@axa-fr/canopee-react 1.2.1-alpha.8 → 1.3.0

package/dist/client.d.ts

@@ -2,6 +2,7 @@ import "@axa-fr/canopee-css/client/common/rebootLF.css";
 import "@axa-fr/canopee-css/client/common/tokensLF.css";
 import "@axa-fr/canopee-css/client/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
+export { AccordionContextual, accordionContextualVariants, type AccordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualLF";
 export { Accordion, accordionVariants, type AccordionVariants, } from "./prospect-client/Accordion/AccordionLF";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreLF";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
@@ -61,3 +62,6 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Card, type CardProps } from "./prospect-client/Card/CardLF";
 export { List, type ListProps } from "./prospect-client/List/List/ListLF";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorLF";
+export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonLF";
+export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListLF";
+export { Fieldset, type FieldsetProps, } from "./prospect-client/Fieldset/FieldsetLF";

package/dist/client.js

@@ -2,6 +2,7 @@ import "@axa-fr/canopee-css/client/common/rebootLF.css";
 import "@axa-fr/canopee-css/client/common/tokensLF.css";
 import "@axa-fr/canopee-css/client/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
+export { AccordionContextual, accordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualLF";
 export { Accordion, accordionVariants, } from "./prospect-client/Accordion/AccordionLF";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreLF";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
@@ -60,3 +61,6 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Card } from "./prospect-client/Card/CardLF";
 export { List } from "./prospect-client/List/List/ListLF";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorLF";
+export { Skeleton, } from "./prospect-client/Skeleton/SkeletonLF";
+export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListLF";
+export { Fieldset, } from "./prospect-client/Fieldset/FieldsetLF";

package/dist/distributeur/Form/Date/DateInput.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { Field } from "../core";
 import { Date } from "./Date";
 const DateInput = forwardRef(({ children, ...otherProps }, inputRef) => {
-    return (_jsx(Field, { ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
+    return (_jsx(Field, { classNameSuffix: "date", ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

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

@@ -8,7 +8,15 @@ export declare enum RadioModes {
 declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
 } & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    options: Option[];
+    options: ({
+        id?: string;
+        icon?: import("react").ReactNode;
+        label: import("react").ReactNode;
+        description?: import("react").ReactNode;
+        value: string;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & {
+        action?: import("react").ReactNode;
+    })[];
     orientation?: "horizontal" | "vertical";
 }, "ref"> & {
     mode: "cardRadio";

package/dist/distributeur/Form/Radio/RadioCardGroup.d.ts

@@ -1,8 +1,11 @@
 import "@axa-fr/canopee-css/distributeur/Form/Radio/RadioCardGroup.css";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import type { Option } from "../core";
+type RadioOptions = Option & {
+    action?: ReactNode;
+};
 type Props = ComponentProps<"input"> & {
-    options: Option[];
+    options: RadioOptions[];
     orientation?: "horizontal" | "vertical";
 };
 export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, "aria-invalid": ariaInvalid, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Radio/RadioCardGroup.js

@@ -12,7 +12,7 @@ export const RadioCardGroup = ({ children, options, className, value, name, orie
             className,
             orientation === "horizontal" &&
                 `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
-        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
+        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, action, ...otherOptionProps }) => {
                 const newName = name || optionName || idGenerated;
                 const allClassNames = classNames([
                     DEFAULT_CLASSNAME,
@@ -20,6 +20,6 @@ export const RadioCardGroup = ({ children, options, className, value, name, orie
                     ariaInvalid && `${DEFAULT_CLASSNAME}--error`,
                 ]);
                 const isDisabled = disabled || optionDisabled;
-                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue));
+                return (_jsxs("div", { children: [_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue), action] }, optionValue));
             }), children] }));
 };

package/dist/distributeur/Layout/Header/HeaderTitle/HeaderTitle.js

@@ -10,8 +10,6 @@ const defaultClassName = "af-title-bar";
 const HeaderTitle = ({ children, classModifier, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
     const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);
     const isAnchorNavBarPresent = anchorNavBarItems && anchorNavBarItems.length > 0;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames("af-container", componentClassName, {
-                    [`${defaultClassName}__withAnchorNavBar`]: isAnchorNavBarPresent,
-                }), children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("div", { className: `${defaultClassName}__leftSection`, children: [contentLeft, _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle ? (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle })) : null] }), children] }), contentRight ? (_jsx("div", { className: `${defaultClassName}__rightSection`, children: contentRight })) : null] }), isAnchorNavBarPresent ? (_jsx(AnchorNavBar, { items: anchorNavBarItems })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames("af-container", componentClassName), children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("div", { className: `${defaultClassName}__leftSection`, children: [contentLeft, _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle ? (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle })) : null] }), children] }), contentRight ? (_jsx("div", { className: `${defaultClassName}__rightSection`, children: contentRight })) : null] }), isAnchorNavBarPresent ? (_jsx(AnchorNavBar, { items: anchorNavBarItems })) : null] }));
 };
 export { HeaderTitle };

package/dist/distributeur/Layout/MainContainer/MainContainer.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+import "@axa-fr/canopee-css/distributeur/MainContainer/MainContainer.css";
 type MainContainerProps = ComponentPropsWithoutRef<"main"> & PropsWithChildren;
 export declare const MainContainer: ({ children, ...othersProps }: MainContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/distributeur/Layout/MainContainer/MainContainer.js

@@ -1,3 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
-export const MainContainer = ({ children, ...othersProps }) => (_jsx("main", { className: "af-container", ...othersProps, children: children }));
+import "@axa-fr/canopee-css/distributeur/MainContainer/MainContainer.css";
+export const MainContainer = ({ children, ...othersProps }) => (_jsx("main", { className: "af-container af-main-container", ...othersProps, children: children }));

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

@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef } from "react";
-import { StepLink } from "./StepLink";
-type Props = Omit<ComponentPropsWithoutRef<typeof StepLink>, "href"> & {
+import { type StepLinkProps } from "./StepLink";
+import { StepMode } from "./types";
+type Props = Omit<StepLinkProps, "href"> & {
     href?: string;
-    mode?: "link" | "active" | "disabled";
+    mode?: StepMode;
 };
-declare const Step: ({ number, id, title, classModifier, href, onClick, mode, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Step: ({ number, id, title, classModifier, href, onClick, mode, className, stateLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Step };

package/dist/distributeur/Steps/Step.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StepCurrent } from "./StepCurrent";
 import { StepDisabled } from "./StepDisabled";
 import { StepLink } from "./StepLink";
-const Step = ({ number, id, title, classModifier, href, onClick, mode = "link", className, }) => {
+const Step = ({ number, id, title, classModifier, href, onClick, mode = "link", className, stateLabel, }) => {
     switch (mode) {
         case "link":
-            return (_jsx(StepLink, { id: id, href: href ?? "#", number: number, classModifier: classModifier, className: className, title: title, onClick: onClick }));
+            return (_jsx(StepLink, { id: id, href: href ?? "#", number: number, classModifier: classModifier, className: className, title: title, onClick: onClick, stateLabel: stateLabel || "complété" }));
         case "active":
-            return (_jsx(StepCurrent, { id: id, title: title, classModifier: classModifier, className: className, number: number }));
+            return (_jsx(StepCurrent, { id: id, title: title, classModifier: classModifier, className: className, number: number, stateLabel: stateLabel || "en cours" }));
         default:
-            return (_jsx(StepDisabled, { id: id, title: title, classModifier: classModifier, className: className, number: number }));
+            return (_jsx(StepDisabled, { id: id, title: title, classModifier: classModifier, className: className, number: number, stateLabel: stateLabel || "à venir" }));
     }
 };
 export { Step };

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

@@ -1,10 +1,19 @@
-import { ReactNode } from "react";
-type Props = {
+import type { ReactNode } from "react";
+export type StepBaseProps = {
     id: string;
     title: string;
     children?: ReactNode;
     className?: string;
     classModifier?: string;
+    /**
+     * Label to add to the title as state indication (e.g. "in progress", "to come"...)
+     * Will be wrapped in parentheses, next to the `title` in the `title` attribute of the <li> element.
+     * @example
+     * stateLabel="In progress"
+     * title="Step 1"
+     * => title attribute will be "Step 1 (In progress)"
+     */
+    stateLabel?: string;
 };
-declare const StepBase: ({ children, id, title, className, classModifier }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const StepBase: ({ children, id, title, className, classModifier, stateLabel, }: StepBaseProps) => import("react/jsx-runtime").JSX.Element;
 export { StepBase };

package/dist/distributeur/Steps/StepBase.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import chevronSvg from "@material-symbols/svg-400/outlined/chevron_right.svg";
 import checkSvg from "@material-symbols/svg-400/outlined/check.svg";
+import chevronSvg from "@material-symbols/svg-400/outlined/chevron_right.svg";
 import { getComponentClassName, Svg } from "../../distributeur";
-const StepBase = ({ children, id, title, className, classModifier }) => {
+const StepBase = ({ children, id, title, className, classModifier, stateLabel, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-steps-list-step");
-    return (_jsxs("li", { className: componentClassName, title: title, children: [_jsx(Svg, { src: checkSvg }), children, _jsx(Svg, { src: chevronSvg })] }, id));
+    const outputTitle = stateLabel ? `${title} (${stateLabel})` : title;
+    return (_jsxs("li", { className: componentClassName, title: outputTitle, children: [_jsx(Svg, { src: checkSvg }), children, _jsx(Svg, { src: chevronSvg })] }, id));
 };
 export { StepBase };

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

@@ -1,10 +1,10 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { StepBase } from "./StepBase";
-import type { CustomClickEvent } from "./types";
-type Props = ComponentPropsWithoutRef<typeof StepBase> & {
+import { ReactNode } from "react";
+import { type StepBaseProps } from "./StepBase";
+import type { StepLinkOnClickHandler } from "./types";
+export type StepLinkProps = StepBaseProps & {
     href: string;
     number?: ReactNode;
-    onClick?: (e: CustomClickEvent) => void;
+    onClick?: StepLinkOnClickHandler;
 };
-declare const StepLink: ({ id, href, number, title, className, onClick, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const StepLink: ({ id, href, number, title, className, onClick, ...otherProps }: StepLinkProps) => import("react/jsx-runtime").JSX.Element;
 export { StepLink };

package/dist/distributeur/Steps/StepLink.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StepBase } from "./StepBase";
 const StepLink = ({ id, href, number, title, className = "past af-steps-list-step", onClick, ...otherProps }) => (_jsx(StepBase, { id: id, className: `${className} ${number ? "number" : ""}`, title: title, ...otherProps, children: _jsxs("a", { className: "af-steps-list-step__label", href: href, onClick: (e) => {
-            e.preventDefault();
-            onClick?.({ href, id, title, number });
+            if (onClick) {
+                e.preventDefault();
+                onClick?.({ href, id, title, number });
+            }
         }, children: [Boolean(number) && (_jsx("div", { className: "af-steps-list-step__number", children: number })), _jsx("div", { className: "af-steps-list-step__title", children: title })] }) }));
 export { StepLink };

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

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { StepBase } from "./StepBase";
 type Props = ComponentPropsWithoutRef<typeof StepBase> & {
     number?: ReactNode;
+    stateLabel?: string;
 };
-declare const StepNoLink: ({ number, title, className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const StepNoLink: ({ number, title, className, stateLabel, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { StepNoLink };

package/dist/distributeur/Steps/StepNoLink.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StepBase } from "./StepBase";
-const StepNoLink = ({ number, title, className = "af-steps-list-step", ...otherProps }) => (_jsx(StepBase, { className: `${className} ${number ? "number" : ""}`, title: title, ...otherProps, children: _jsxs("div", { className: "af-steps-list-step__label", children: [Boolean(number) && (_jsx("div", { className: "af-steps-list-step__number", children: number })), _jsx("div", { className: "af-steps-list-step__title", children: title })] }) }));
+const StepNoLink = ({ number, title, className = "af-steps-list-step", stateLabel, ...otherProps }) => (_jsx(StepBase, { className: `${className} ${number ? "number" : ""}`, title: title + (stateLabel ? ` (${stateLabel})` : ""), ...otherProps, children: _jsxs("div", { className: "af-steps-list-step__label", children: [Boolean(number) && (_jsx("div", { className: "af-steps-list-step__number", children: number })), _jsx("div", { className: "af-steps-list-step__title", children: title })] }) }));
 export { StepNoLink };

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

@@ -1,11 +1,16 @@
 import { ReactNode } from "react";
 import type { VerticalStepMode } from "./types";
 import "@axa-fr/canopee-css/distributeur/Steps/VerticalStep.css";
+type StateLabelsProp = {
+    validatedState: string;
+    editState: string;
+    lockedState: string;
+};
 type Props = {
     /** The title of the step. */
     title: string;
     /** The id of the step, used for accessibility. It should be unique within the document. */
-    id: string;
+    id?: string;
     /** The mode of the step, can be "edited", "validated", or "locked". */
     stepMode: VerticalStepMode;
     /** The function to call when the edit button is clicked. */
@@ -24,6 +29,26 @@ type Props = {
     contentRight?: string;
     /** The aria-label for the additional content on the right side of the title. */
     contentRightAriaLabel?: string;
+    /** Add the section in read only mode by hiding edit button */
+    readonly?: boolean;
+    /** Labels for different states for accessibility purposes
+     * @default
+     * {
+     * validatedState: "validée",
+     *  editState: "en cours de modification",
+     *  lockedState: "verrouillée",
+     * }
+     * @example
+     * ```json
+     * {
+     *  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.
+     */
+    stateLabels?: StateLabelsProp;
 };
-export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, contentRightAriaLabel, onEdit, form, restitution, showRestitution, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalStep: ({ title, stepMode, editButtonLabel, editButtonAriaLabel, contentRightAriaLabel, onEdit, id, form, restitution, showRestitution, readonly, contentRight, stateLabels, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/distributeur/Steps/VerticalStep.js

@@ -3,20 +3,41 @@ import check from "@material-symbols/svg-400/sharp/check.svg";
 import edit from "@material-symbols/svg-400/sharp/edit-fill.svg";
 import lock from "@material-symbols/svg-400/sharp/lock-fill.svg";
 import classNames from "classnames";
+import { useId } from "react";
 import { Svg } from "../Svg";
 import { Title } from "../Title/Title";
 import "@axa-fr/canopee-css/distributeur/Steps/VerticalStep.css";
 import { Button } from "../Button/Button";
 const defaultClassName = "af-vertical-step";
-export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, contentRightAriaLabel = `Contenu supplémentaire étape verticale ${title}`, onEdit, form, restitution, showRestitution = true, contentRight, }) => {
+const defaultStateLabels = {
+    validatedState: "validée",
+    editState: "en cours de modification",
+    lockedState: "verrouillée",
+};
+const getStateLabel = (stepMode, stateLabels) => {
+    switch (stepMode) {
+        case "validated":
+            return stateLabels.validatedState;
+        case "edited":
+            return stateLabels.editState;
+        case "locked":
+            return stateLabels.lockedState;
+        default:
+            return "";
+    }
+};
+export const VerticalStep = ({ title, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, contentRightAriaLabel = `Contenu supplémentaire étape verticale ${title}`, onEdit, id, form, restitution, showRestitution = true, readonly = false, contentRight, stateLabels = defaultStateLabels, }) => {
     const isStepInEdition = stepMode === "edited";
     const isStepValidated = stepMode === "validated";
     const isStepLocked = stepMode === "locked";
+    const generatedId = useId();
+    const stepId = id ?? generatedId;
+    const stateLabel = getStateLabel(stepMode, stateLabels);
     return (_jsxs("section", { className: classNames(defaultClassName, {
             [`${defaultClassName}--edition`]: isStepInEdition,
-        }), "aria-label": `Étape verticale ${title}`, children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
+        }), "aria-label": `Étape verticale ${title} (${stateLabel})`, children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
                     [`${defaultClassName}-icon--validated`]: isStepValidated,
                     [`${defaultClassName}-icon--locked`]: isStepLocked,
                     [`${defaultClassName}-icon--edited`]: isStepInEdition,
-                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { id: id, contentLeft: isStepValidated ? (_jsx(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, variant: "ghost", leftIcon: _jsx(Svg, { role: "presentation", src: edit }), children: editButtonLabel })) : undefined, contentRight: _jsx("section", { "aria-label": contentRightAriaLabel, children: contentRight }), children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
+                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { id: stepId, contentLeft: isStepValidated && !readonly ? (_jsx(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, variant: "ghost", leftIcon: _jsx(Svg, { role: "presentation", src: edit }), children: editButtonLabel })) : undefined, contentRight: _jsx("section", { "aria-label": contentRightAriaLabel, children: contentRight }), children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
 };

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

@@ -2,4 +2,5 @@ import "@axa-fr/canopee-css/distributeur/Steps/Steps.css";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";
+export type { StepLinkOnClickHandler, StepMode } from "./types";
 export { VerticalStep } from "./VerticalStep";

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

@@ -5,4 +5,6 @@ export type CustomClickEvent = {
     id: string;
     title: string;
 };
+export type StepLinkOnClickHandler = (e: CustomClickEvent) => void;
+export type StepMode = "link" | "active" | "disabled";
 export type VerticalStepMode = "edited" | "locked" | "validated";

package/dist/distributeur.d.ts

@@ -32,7 +32,7 @@ export { MainContainer } from "./distributeur/Layout/MainContainer/MainContainer
 export { Link, type LinkProps } from "./distributeur/Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./distributeur/ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./distributeur/Restitution";
-export { Step, StepBase, Steps, VerticalStep } from "./distributeur/Steps";
+export { Step, StepBase, Steps, VerticalStep, type StepLinkOnClickHandler, type StepMode, } from "./distributeur/Steps";
 export type { VerticalStepMode } from "./distributeur/Steps/types";
 export { Summary } from "./distributeur/Summary";
 export { Svg } from "./distributeur/Svg";

package/dist/distributeur.js

@@ -31,7 +31,7 @@ export { MainContainer } from "./distributeur/Layout/MainContainer/MainContainer
 export { Link } from "./distributeur/Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./distributeur/ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./distributeur/Restitution";
-export { Step, StepBase, Steps, VerticalStep } from "./distributeur/Steps";
+export { Step, StepBase, Steps, VerticalStep, } from "./distributeur/Steps";
 export { Summary } from "./distributeur/Summary";
 export { Svg } from "./distributeur/Svg";
 export { Tabs } from "./distributeur/Tabs/Tabs";

package/dist/prospect-client/AccordionContextual/AccordionContextualApollo.d.ts

@@ -0,0 +1,4 @@
+import { type AccordionContextualProps } from "./AccordionContextualCommon";
+import "@axa-fr/canopee-css/prospect/AccordionContextual/AccordionContextualApollo.css";
+export declare const AccordionContextual: (props: AccordionContextualProps) => import("react/jsx-runtime").JSX.Element;
+export { type AccordionContextualVariants, accordionContextualVariants, } from "./AccordionContextualCommon";

package/dist/prospect-client/AccordionContextual/AccordionContextualApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AccordionCore } from "../AccordionCore/AccordionCoreApollo";
+import { Icon } from "../Icon/IconApollo";
+import { AccordionContextualCommon, } from "./AccordionContextualCommon";
+import "@axa-fr/canopee-css/prospect/AccordionContextual/AccordionContextualApollo.css";
+export const AccordionContextual = (props) => (_jsx(AccordionContextualCommon, { ...props, AccordionCoreComponent: AccordionCore, IconComponent: Icon }));
+export { accordionContextualVariants, } from "./AccordionContextualCommon";

package/dist/prospect-client/AccordionContextual/AccordionContextualCommon.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from "react";
+import type { IconProps } from "../Icon/IconCommon";
+import type { AccordionCoreProps } from "../AccordionCore/AccordionCoreCommon";
+export declare const accordionContextualVariants: {
+    readonly info: "info";
+    readonly warning: "warning";
+    readonly reverse: "reverse";
+};
+export type AccordionContextualVariants = (typeof accordionContextualVariants)[keyof typeof accordionContextualVariants];
+export type AccordionContextualProps = {
+    variant?: AccordionContextualVariants;
+    title: string;
+    icon?: string;
+} & Omit<AccordionCoreProps, "summary">;
+type AccordionContextualCommonProps = AccordionContextualProps & {
+    AccordionCoreComponent: ComponentType<AccordionCoreProps>;
+    IconComponent: ComponentType<IconProps>;
+};
+export declare const AccordionContextualCommon: ({ variant, className, children, icon, title, AccordionCoreComponent, IconComponent, ...accordionCoreProps }: AccordionContextualCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/AccordionContextual/AccordionContextualCommon.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName } from "../utilities/getClassName";
+export const accordionContextualVariants = {
+    info: "info",
+    warning: "warning",
+    reverse: "reverse",
+};
+const getIconVariant = (variant) => {
+    if (variant === "info")
+        return "primary";
+    if (variant === "warning")
+        return "error";
+    if (variant === "reverse")
+        return "secondary";
+    return undefined;
+};
+export const AccordionContextualCommon = ({ variant = accordionContextualVariants.info, className, children, icon, title, AccordionCoreComponent, IconComponent, ...accordionCoreProps }) => (_jsx(AccordionCoreComponent, { className: getClassName({
+        baseClassName: "af-apollo-accordion-contextual",
+        modifiers: [variant],
+        className,
+    }), showArrowAsClickIcon: false, arrowIconVariant: getIconVariant(variant), summary: _jsxs(_Fragment, { children: [icon ? (_jsx(IconComponent, { role: "presentation", src: icon, variant: getIconVariant(variant), size: "S", className: "af-accordion__icon" })) : null, _jsx("p", { className: "af-accordion__title", children: title })] }), ...accordionCoreProps, children: children }));

package/dist/prospect-client/AccordionContextual/AccordionContextualLF.d.ts

@@ -0,0 +1,4 @@
+import { type AccordionContextualProps } from "./AccordionContextualCommon";
+import "@axa-fr/canopee-css/client/AccordionContextual/AccordionContextualLF.css";
+export declare const AccordionContextual: (props: AccordionContextualProps) => import("react/jsx-runtime").JSX.Element;
+export { type AccordionContextualVariants, accordionContextualVariants, } from "./AccordionContextualCommon";

package/dist/prospect-client/AccordionContextual/AccordionContextualLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AccordionCore } from "../AccordionCore/AccordionCoreLF";
+import { AccordionContextualCommon, } from "./AccordionContextualCommon";
+import { Icon } from "../Icon/IconCommon";
+import "@axa-fr/canopee-css/client/AccordionContextual/AccordionContextualLF.css";
+export const AccordionContextual = (props) => (_jsx(AccordionContextualCommon, { ...props, AccordionCoreComponent: AccordionCore, IconComponent: Icon }));
+export { accordionContextualVariants, } from "./AccordionContextualCommon";

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

@@ -9,9 +9,11 @@ export type AccordionCoreProps = {
     isOpen?: boolean;
     summaryProps?: Omit<ComponentProps<"summary">, "onClick">;
     onClick?: SummaryOnClick;
+    showArrowAsClickIcon?: boolean;
+    arrowIconVariant?: IconProps["variant"];
 } & ComponentProps<"details">;
 export type AccordionPropsCommonProps = AccordionCoreProps & {
     IconComponent: ComponentType<IconProps>;
 };
-export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, isOpen, IconComponent, onClick, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, isOpen, IconComponent, onClick, showArrowAsClickIcon, arrowIconVariant, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ 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 { getClassName } from "../utilities/getClassName";
-export const AccordionCoreCommon = ({ summary, children, className, summaryProps, isOpen = false, IconComponent, onClick, ...detailsProps }) => {
+export const AccordionCoreCommon = ({ summary, children, className, summaryProps, isOpen = false, IconComponent, onClick, showArrowAsClickIcon = true, arrowIconVariant, ...detailsProps }) => {
     const handleSummaryClick = useCallback((event) => {
         if (onClick) {
             event.preventDefault();
@@ -17,6 +17,6 @@ export const AccordionCoreCommon = ({ summary, children, className, summaryProps
                     className: summaryProps?.className,
                 }), children: [summary, _jsx("div", { className: getClassName({
                             baseClassName: "af-accordion__arrow",
-                            className: "af-click-icon",
-                        }), children: _jsx(IconComponent, { src: keyboardDown, role: "presentation" }) })] }), children] }));
+                            className: showArrowAsClickIcon ? "af-click-icon" : "",
+                        }), children: _jsx(IconComponent, { src: keyboardDown, role: "presentation", variant: arrowIconVariant }) })] }), children] }));
 };

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

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

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

@@ -20,7 +20,7 @@ export const getContentItemCoreProps = ({ IconComponent, type, ...props }) => {
     }
     return {
         ...props,
-        leftComponent: _jsx("div", { className: "stick" }),
+        leftComponent: _jsx("div", { className: "af-content-item-mono__stick" }),
     };
 };
 export const ContentItemMonoCommon = (props) => {

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

@@ -1,9 +1,17 @@
+import type { ElementType } from "react";
+import { ReactNode } from "react";
+import { AtLeastOne } from "../utilities/types/AtLeastOne";
 export type ContentMonoItemSize = "medium" | "large";
-export type ContentItemCoreProps = {
-    size?: ContentMonoItemSize;
+type TextFields = {
     title?: string;
     primarySubtitle?: string;
     subtitle?: string;
-    leftComponent?: React.ReactNode;
 };
-export declare const ContentItemMonoCore: ({ size, leftComponent, title, primarySubtitle, subtitle, }: ContentItemCoreProps) => import("react/jsx-runtime").JSX.Element;
+type AtLeastOneText = AtLeastOne<TextFields>;
+export type ContentItemCoreProps<T extends ElementType = "div"> = {
+    as?: T;
+    size?: ContentMonoItemSize;
+    leftComponent?: ReactNode;
+} & AtLeastOneText;
+export declare const ContentItemMonoCore: <T extends ElementType = "div">({ as, size, leftComponent, title, primarySubtitle, subtitle, }: ContentItemCoreProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ContentItemMonoCore = ({ size = "medium", leftComponent, title, primarySubtitle, subtitle, }) => {
-    return (_jsxs("div", { "data-testid": "container", className: `af-content-item-mono ${size}`, children: [leftComponent, _jsxs("div", { className: "text-content", children: [_jsx("span", { className: "title", children: title }), primarySubtitle ? (_jsx("span", { className: "subtitle-primary", children: primarySubtitle })) : null, subtitle ? _jsx("span", { className: "subtitle", children: subtitle }) : null] })] }));
+import { getClassName } from "../utilities/getClassName";
+export const ContentItemMonoCore = ({ as, size = "medium", leftComponent, title, primarySubtitle, subtitle, }) => {
+    const Component = as ?? "div";
+    const componentClassName = getClassName({
+        baseClassName: "af-content-item-mono",
+        modifiers: [size],
+    });
+    return (_jsxs(Component, { className: componentClassName, children: [leftComponent, _jsxs("div", { className: "af-content-item-mono__text-content", children: [title ? (_jsx("span", { className: "af-content-item-mono__title", children: title })) : null, primarySubtitle ? (_jsx("span", { className: "af-content-item-mono__subtitle-primary", children: primarySubtitle })) : null, subtitle ? (_jsx("span", { className: "af-content-item-mono__subtitle", children: subtitle })) : null] })] }));
 };

package/dist/prospect-client/Fieldset/FieldsetApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/prospect/Fieldset/FieldsetApollo.css";
+import { type FieldsetProps } from "./FieldsetCommon";
+export type { FieldsetProps };
+export declare const Fieldset: (props: FieldsetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Fieldset/FieldsetApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Fieldset/FieldsetApollo.css";
+import { Icon } from "../Icon/IconApollo";
+import { Card } from "../Card/CardApollo";
+import { FieldsetCommon } from "./FieldsetCommon";
+export const Fieldset = (props) => (_jsx(FieldsetCommon, { ...props, IconComponent: Icon, CardComponent: Card }));

package/dist/prospect-client/Fieldset/FieldsetCommon.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ComponentType, PropsWithChildren } from "react";
+import { CardCommon } from "../Card/CardCommon";
+import { Icon, type IconProps } from "../Icon/IconCommon";
+export type FieldsetProps = PropsWithChildren<{
+    title: string;
+    iconProps?: IconProps;
+    className?: string;
+}>;
+export type FieldsetCommonProps = FieldsetProps & {
+    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
+    CardComponent: ComponentType<ComponentProps<typeof CardCommon>>;
+};
+export declare const FieldsetCommon: ({ children, title, iconProps, className, IconComponent, CardComponent, }: FieldsetCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Fieldset/FieldsetCommon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContentItemMonoCore } from "../ContentItemMono/ContentItemMonoCore";
+import { getClassName } from "../utilities/getClassName";
+export const FieldsetCommon = ({ children, title, iconProps, className, IconComponent, CardComponent, }) => {
+    const iconComponent = iconProps && (_jsx(IconComponent, { "aria-hidden": "true", ...iconProps }));
+    return (_jsxs(CardComponent, { as: "fieldset", className: getClassName({ baseClassName: "af-fieldset", className }), children: [_jsx(ContentItemMonoCore, { as: "legend", title: title, leftComponent: iconComponent }), _jsx("div", { className: "af-fieldset__content", children: children })] }));
+};

package/dist/prospect-client/Fieldset/FieldsetLF.d.ts

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

package/dist/prospect-client/Fieldset/FieldsetLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Fieldset/FieldsetLF.css";
+import { Icon } from "../Icon/IconLF";
+import { Card } from "../Card/CardLF";
+import { FieldsetCommon } from "./FieldsetCommon";
+export const Fieldset = (props) => (_jsx(FieldsetCommon, { ...props, IconComponent: Icon, CardComponent: Card }));

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomCommon.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
-import { getComponentClassName } from "../../utilities/getComponentClassName";
+import { getClassName } from "../../utilities/getClassName";
 const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName("af-form__input-text", className, classModifier + (error || ariaErrormessage ? " error" : ""));
+    const componentClassName = getClassName({
+        baseClassName: "af-form__input-text",
+        modifiers: [classModifier, error || ariaErrormessage ? "error" : ""],
+        className,
+    });
     let inputId = useId();
     inputId = otherProps.id || inputId;
-    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": ariaDescribedby ?? idHelp, ...otherProps }), unit] }));
+    return (_jsxs("div", { className: "af-form__input-atom-container", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": ariaDescribedby ?? idHelp, ...otherProps }), unit] }));
 });
 InputTextAtom.displayName = "InputTextAtom";
 export { InputTextAtom };

package/dist/prospect-client/Heading/HeadingCommon.js

@@ -1,8 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
 import { Icon } from "../Icon/IconCommon";
 import { HeadingWithSubheadings } from "./HeadingWithSubheadings";
+import { headingLevelToIconSizeDesktop, headingLevelToIconSizeMobile, } from "./types";
+import { useIsSmallScreen } from "../utilities/hook/useIsSmallScreen";
+import { BREAKPOINT } from "../utilities/constants";
+import { getClassName } from "../utilities/getClassName";
 export const DEFAULT_TAG_PROPS = {
     variant: "neutral",
 };
-export const HeadingCommon = ({ children: title, className, firstSubtitle, secondSubtitle, level = 1, icon, iconProps = {}, tag, ...props }) => (_jsxs("div", { className: classNames("af-heading", className), ...props, children: [tag && level < 3 ? _jsx("div", { className: "af-heading__label", children: tag }) : null, icon && level === 1 ? (_jsx(Icon, { src: icon, size: "L", hasBackground: true, variant: "secondary", ...iconProps, className: classNames("af-heading__icon", iconProps.className) })) : null, _jsx(HeadingWithSubheadings, { title: title, firstSubtitle: firstSubtitle, titleComponent: `h${level}`, secondSubtitle: secondSubtitle })] }));
+export const HeadingCommon = ({ children: title, className, firstSubtitle, secondSubtitle, level = 1, icon, iconProps = {}, tag, ...props }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-heading",
+            className,
+        }), ...props, children: [tag && level < 3 ? _jsx("div", { className: "af-heading__label", children: tag }) : null, icon ? (_jsx(Icon, { src: icon, size: isMobile
+                    ? headingLevelToIconSizeMobile[level]
+                    : headingLevelToIconSizeDesktop[level], hasBackground: true, variant: "secondary", ...iconProps, className: getClassName({
+                    baseClassName: "af-heading__icon",
+                    className: iconProps.className,
+                }) })) : null, _jsx(HeadingWithSubheadings, { title: title, firstSubtitle: firstSubtitle, titleComponent: `h${level}`, secondSubtitle: secondSubtitle })] }));
+};

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

@@ -1,6 +1,18 @@
 import type { TagProps } from "../Tag/TagCommon";
 import type { HeadingCommonProps } from "./HeadingCommon";
 export type HeadingLevel = 1 | 2 | 3 | 4;
+export declare const headingLevelToIconSizeDesktop: {
+    readonly 1: "L";
+    readonly 2: "M";
+    readonly 3: "S";
+    readonly 4: "S";
+};
+export declare const headingLevelToIconSizeMobile: {
+    readonly 1: "S";
+    readonly 2: "S";
+    readonly 3: "S";
+    readonly 4: "XS";
+};
 export type HeadingProps = HeadingCommonProps & {
     tagProps?: Omit<TagProps, "children">;
 };

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

@@ -1 +1,12 @@
-export {};
+export const headingLevelToIconSizeDesktop = {
+    1: "L",
+    2: "M",
+    3: "S",
+    4: "S",
+};
+export const headingLevelToIconSizeMobile = {
+    1: "S",
+    2: "S",
+    3: "S",
+    4: "XS",
+};

package/dist/prospect-client/Icon/IconCommon.d.ts

@@ -4,6 +4,9 @@ export declare const iconVariants: {
     readonly primary: "primary";
     readonly secondary: "secondary";
     readonly disabled: "disabled";
+    readonly success: "success";
+    readonly error: "error";
+    readonly warning: "warning";
 };
 export type IconVariants = keyof typeof iconVariants;
 export declare const iconSizeVariants: {

package/dist/prospect-client/Icon/IconCommon.js

@@ -6,6 +6,9 @@ export const iconVariants = {
     primary: "primary",
     secondary: "secondary",
     disabled: "disabled",
+    success: "success",
+    error: "error",
+    warning: "warning",
 };
 export const iconSizeVariants = {
     L: "large",

package/dist/prospect-client/ProgressBar/ProgressBarCommon.d.ts

@@ -1,9 +1,10 @@
 import { type ComponentProps, type ReactNode } from "react";
 type ProgressBarProps = ComponentProps<"progress"> & {
     label?: ReactNode;
+    showPercentage?: boolean;
 };
 export declare const ProgressBar: {
-    ({ id, label, className, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, showPercentage, className, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/prospect-client/ProgressBar/ProgressBarCommon.js

@@ -1,8 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId } from "react";
-export const ProgressBar = ({ id, label, className, ...props }) => {
+import { getClassName } from "../utilities/getClassName";
+export const ProgressBar = ({ id, label, showPercentage = false, className, ...props }) => {
     let inputId = useId();
     inputId = id || inputId;
-    return (_jsxs(_Fragment, { children: [Boolean(label) && (_jsx("label", { className: "af-progress-bar__label", htmlFor: inputId, children: label })), _jsx("progress", { id: inputId, className: ["af-progress-bar", className].filter(Boolean).join(" "), ...props })] }));
+    const componentClassName = getClassName({
+        baseClassName: "af-progress-bar",
+        className,
+    });
+    return (_jsxs(_Fragment, { children: [Boolean(label) && (_jsx("label", { className: "af-progress-bar__label", htmlFor: inputId, children: label })), _jsxs("div", { className: componentClassName, children: [_jsx("progress", { id: inputId, className: "af-progress-bar__progress", ...props }), Boolean(showPercentage) && (_jsxs("span", { "aria-hidden": "true", children: [props.value, " %"] }))] })] }));
 };
 ProgressBar.displayName = "ProgressBar";

package/dist/prospect-client/Skeleton/SkeletonApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Skeleton/SkeletonApollo.css";
+export { Skeleton, type SkeletonProps } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Skeleton/SkeletonApollo.css";
+export { Skeleton } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonCommon.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+type isLoadingAndChildrenProps = {
+    children: ReactNode;
+    isLoading: boolean;
+} | {
+    children?: undefined;
+    isLoading?: boolean;
+};
+export type SkeletonProps = {
+    className?: string;
+    grid: number[][];
+    "aria-busy"?: boolean;
+    "aria-label"?: string;
+    maxCols?: number;
+    colGap?: number;
+    rowGap?: number;
+} & isLoadingAndChildrenProps;
+export declare const Skeleton: ({ className, grid, "aria-busy": ariaBusy, "aria-label": ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export {};

package/dist/prospect-client/Skeleton/SkeletonCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../utilities/getClassName";
+const CLASS_NAME = "af-skeleton";
+export const Skeleton = ({ className, grid = [], "aria-busy": ariaBusy = true, "aria-label": ariaLabel = "Chargement", maxCols = 12, colGap = 16, rowGap = 8, isLoading = true, children, }) => isLoading ? (_jsx("div", { className: getClassName({
+        baseClassName: `${CLASS_NAME}-container`,
+        className,
+    }), "aria-label": ariaLabel, role: "status", "aria-busy": ariaBusy, style: {
+        "--max-cols": maxCols,
+        "--col-gap": `calc(${colGap} / var(--font-size-base) * 1rem)`,
+        "--row-gap": `calc(${rowGap} / var(--font-size-base) * 1rem)`,
+    }, children: grid.map((cols, indexRow) => cols.map((colSize, indexCol) => (_jsx("div", { style: { "--col-size": colSize }, className: CLASS_NAME }, `${indexRow}-${indexCol}`)))) })) : (children);

package/dist/prospect-client/Skeleton/SkeletonLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonLF.css";
+export { Skeleton, type SkeletonProps } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonLF.css";
+export { Skeleton } from "./SkeletonCommon";

package/dist/prospect-client/SkeletonList/SkeletonListApollo.d.ts

@@ -0,0 +1,3 @@
+import { type SkeletonListProps } from "./SkeletonListCommon";
+export { type SkeletonListProps } from "./SkeletonListCommon";
+export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/SkeletonList/SkeletonListApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/SkeletonApollo";
+import { List } from "../List/List/ListApollo";
+import { SkeletonListCommon, } from "./SkeletonListCommon";
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));

package/dist/prospect-client/SkeletonList/SkeletonListCommon.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import type { SkeletonProps } from "../Skeleton/SkeletonCommon";
+import type { ListProps } from "../List/List/ListCommon";
+export type SkeletonListProps = {
+    lists: {
+        lines?: number;
+        grid: SkeletonProps["grid"];
+    }[];
+    isLoading?: boolean;
+    className?: string;
+} & PropsWithChildren;
+type SkeletonListPropsCommon = SkeletonListProps & {
+    ListComponent: ComponentType<ListProps>;
+    SkeletonComponent: ComponentType<SkeletonProps>;
+};
+export declare const SkeletonListCommon: ({ children, isLoading, lists, className, ListComponent, SkeletonComponent, }: SkeletonListPropsCommon) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export {};

package/dist/prospect-client/SkeletonList/SkeletonListCommon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SkeletonListCommon = ({ children, isLoading, lists = [], className, ListComponent, SkeletonComponent, }) => isLoading
+    ? lists.map(({ lines = 1, grid }, linesIndex) => (_jsx(ListComponent, { className: className, children: [...Array(lines).keys()].map((_, lineIndex) => (_jsx(SkeletonComponent, { grid: grid }, lineIndex))) }, linesIndex)))
+    : children;

package/dist/prospect-client/SkeletonList/SkeletonListLF.d.ts

@@ -0,0 +1,3 @@
+import { type SkeletonListProps } from "./SkeletonListCommon";
+export { type SkeletonListProps } from "./SkeletonListCommon";
+export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/SkeletonList/SkeletonListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/SkeletonLF";
+import { List } from "../List/List/ListLF";
+import { SkeletonListCommon, } from "./SkeletonListCommon";
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));

package/dist/prospect-client/utilities/types/AtLeastOne.d.ts

@@ -0,0 +1,3 @@
+export type AtLeastOne<T, K extends keyof T = keyof T> = Partial<T> & {
+    [P in K]: Required<Pick<T, P>>;
+}[K];

package/dist/prospect-client/utilities/types/AtLeastOne.js

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

package/dist/prospect.d.ts

@@ -2,6 +2,7 @@ import "@axa-fr/canopee-css/prospect/common/reboot.css";
 import "@axa-fr/canopee-css/prospect/common/tokens.css";
 import "@axa-fr/canopee-css/prospect/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
+export { AccordionContextual, accordionContextualVariants, type AccordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualApollo";
 export { Accordion, accordionVariants, type AccordionVariants, } from "./prospect-client/Accordion/AccordionApollo";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreApollo";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
@@ -57,3 +58,6 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
 export { List, type ListProps } from "./prospect-client/List/List/ListApollo";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
+export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListApollo";
+export { Fieldset, type FieldsetProps, } from "./prospect-client/Fieldset/FieldsetApollo";

package/dist/prospect.js

@@ -2,6 +2,7 @@ import "@axa-fr/canopee-css/prospect/common/reboot.css";
 import "@axa-fr/canopee-css/prospect/common/tokens.css";
 import "@axa-fr/canopee-css/prospect/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
+export { AccordionContextual, accordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualApollo";
 export { Accordion, accordionVariants, } from "./prospect-client/Accordion/AccordionApollo";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreApollo";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
@@ -56,3 +57,6 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Card } from "./prospect-client/Card/CardApollo";
 export { List } from "./prospect-client/List/List/ListApollo";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
+export { Skeleton, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListApollo";
+export { Fieldset, } from "./prospect-client/Fieldset/FieldsetApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.2.1-alpha.8",
+  "version": "1.3.0",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.2.1-alpha.8",
+    "@axa-fr/canopee-css": "1.3.0",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"