@axa-fr/canopee-react 1.0.0-alpha.1089

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

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ComponentType } from "react";
+import type { HeadingProps } from "../../Heading/types";
+import type { IconProps } from "../../Icon/IconCommon";
+export type ModalCoreHeaderContainerProps = ComponentPropsWithoutRef<"header">;
+export type ModalCoreHeaderCommonProps = ModalCoreHeaderContainerProps & {
+    headingComponent: ComponentType<HeadingProps>;
+    headingProps: HeadingProps;
+    iconComponent?: ComponentType<IconProps>;
+    iconProps?: IconProps;
+    onClose?: VoidFunction;
+    closeButtonAriaLabel?: string;
+};
+export declare const ModalCoreHeaderCommon: ({ className, headingComponent: HeadingComponent, headingProps, iconComponent: IconComponent, iconProps, onClose, closeButtonAriaLabel, ...props }: ModalCoreHeaderCommonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import close from "@material-symbols/svg-400/rounded/close.svg";
+import { ClickIcon } from "../../ClickIcon/ClickIconCommon";
+export const ModalCoreHeaderCommon = ({ className, headingComponent: HeadingComponent, headingProps, iconComponent: IconComponent, iconProps, onClose, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(ClickIcon, { className: "af-modal__header-close-btn", src: close, onClick: onClose, "aria-label": closeButtonAriaLabel }), _jsxs("div", { className: "af-modal__header-title", children: [IconComponent && iconProps ? (_jsx(IconComponent, { size: "M", ...iconProps })) : null, _jsx(HeadingComponent, { level: 2, ...headingProps })] })] }));

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

@@ -0,0 +1,2 @@
+import type { ModalCoreHeaderProps } from "../types";
+export declare const ModalCoreHeader: (args: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Heading } from "../../Heading/HeadingLF";
+import { Icon } from "../../Icon/IconLF";
+import { ModalCoreHeaderCommon } from "./ModalCoreHeaderCommon";
+export const ModalCoreHeader = (args) => (_jsx(ModalCoreHeaderCommon, { headingComponent: Heading, iconComponent: Icon, ...args }));

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

@@ -0,0 +1,12 @@
+import type { HeadingProps } from "../Heading/types";
+import type { IconProps } from "../Icon/IconCommon";
+import type { ModalCoreFooterCommonProps } from "./components/ModalCoreFooterCommon";
+import type { ModalCoreHeaderCommonProps } from "./components/ModalCoreHeaderCommon";
+import type { ModalCommonProps } from "./ModalCommon";
+export type ModalCoreHeaderProps = Omit<ModalCoreHeaderCommonProps, "headingComponent" | "iconComponent">;
+export type ModalCoreFooterProps = Omit<ModalCoreFooterCommonProps, "buttonComponent">;
+export type ModalProps = Omit<ModalCommonProps, "headingComponent" | "headingProps" | "iconComponent" | "iconProps" | "buttonComponent"> & {
+    headingProps?: Omit<HeadingProps, "children">;
+    icon?: string;
+    iconProps?: Omit<IconProps, "src">;
+};

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

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

package/dist/prospect-client/Pagination/ItemPagination/ItemPaginationApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/Pagination/ItemPagination/ItemPaginationApollo.css";
+export { type ItemPaginationCommonProps as ItemPaginationProps } from "./ItemPaginationCommon";
+export declare const ItemPagination: <T extends import("react").ElementType = "a">({ as, page, isCurrentPage, className, ...props }: import("./ItemPaginationCommon").ItemPaginationCommonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Pagination/ItemPagination/ItemPaginationApollo.js

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/Pagination/ItemPagination/ItemPaginationApollo.css";
+import { ItemPaginationCommon } from "./ItemPaginationCommon";
+export const ItemPagination = ItemPaginationCommon;

package/dist/prospect-client/Pagination/ItemPagination/ItemPaginationCommon.d.ts

@@ -0,0 +1,10 @@
+import { type ElementType } from "react";
+import { type PolymorphicComponent } from "../../utilities/types/PolymorphicComponent";
+export declare const ELLIPSIS = "...";
+type ItemPaginationCustomProps = {
+    page: number | typeof ELLIPSIS;
+    isCurrentPage: boolean;
+};
+export type ItemPaginationCommonProps<T extends ElementType> = PolymorphicComponent<T, ItemPaginationCustomProps>;
+export declare const ItemPaginationCommon: <T extends ElementType = "a">({ as, page, isCurrentPage, className, ...props }: ItemPaginationCommonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/Pagination/ItemPagination/ItemPaginationCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../../utilities/getClassName";
+export const ELLIPSIS = "...";
+export const ItemPaginationCommon = ({ as, page, isCurrentPage, className, ...props }) => {
+    const Component = page === ELLIPSIS ? "span" : as || "a";
+    return (_jsx(Component, { href: Component === "a" ? `/${page}` : undefined, type: Component === "button" ? "button" : undefined, "aria-current": Component === "a" && isCurrentPage ? "page" : undefined, className: getClassName({
+            baseClassName: "af-item-pagination",
+            className,
+            modifiers: [isCurrentPage ? "current" : undefined],
+        }), ...props, children: page }));
+};

package/dist/prospect-client/Pagination/ItemPagination/ItemPaginationLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/Pagination/ItemPagination/ItemPaginationLF.css";
+export { type ItemPaginationCommonProps as ItemPaginationProps } from "./ItemPaginationCommon";
+export declare const ItemPagination: <T extends import("react").ElementType = "a">({ as, page, isCurrentPage, className, ...props }: import("./ItemPaginationCommon").ItemPaginationCommonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Pagination/ItemPagination/ItemPaginationLF.js

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/Pagination/ItemPagination/ItemPaginationLF.css";
+import { ItemPaginationCommon } from "./ItemPaginationCommon";
+export const ItemPagination = ItemPaginationCommon;

package/dist/prospect-client/Pagination/Pagination.helper.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType } from "react";
+import type { ItemPaginationCommonProps } from "./ItemPagination/ItemPaginationCommon";
+export type getItemsProps = {
+    numberPages: number;
+    onChangePage: (page: number) => void;
+    currentPage: number;
+    asItem?: ElementType;
+};
+export declare const getItems: ({ numberPages, currentPage, asItem, onChangePage, }: getItemsProps) => ItemPaginationCommonProps<ElementType>[];

package/dist/prospect-client/Pagination/Pagination.helper.js

@@ -0,0 +1,34 @@
+import { ELLIPSIS } from "./ItemPagination/ItemPaginationCommon";
+const MAX_PAGE = 7;
+const ellipsisItem = {
+    page: ELLIPSIS,
+    isCurrentPage: false,
+};
+export const getItems = ({ numberPages, currentPage, asItem, onChangePage, }) => {
+    const items = Array.from({ length: numberPages }, (_, index) => ({
+        page: index + 1,
+        isCurrentPage: index + 1 === currentPage,
+        as: asItem,
+        onClick: () => onChangePage(index + 1),
+    }));
+    if (numberPages <= MAX_PAGE) {
+        return items;
+    }
+    if (currentPage && currentPage < MAX_PAGE - 1) {
+        return items.toSpliced(MAX_PAGE - 1, numberPages - 1, ellipsisItem, items[numberPages - 1]);
+    }
+    if (currentPage && currentPage > numberPages - (MAX_PAGE - 2)) {
+        return [
+            items[0],
+            ellipsisItem,
+            ...items.toSpliced(0, numberPages - (MAX_PAGE - 1)),
+        ];
+    }
+    return [
+        items[0],
+        ellipsisItem,
+        ...items.toSpliced(0, currentPage - 2).toSpliced(3, numberPages - 1),
+        ellipsisItem,
+        items[numberPages - 1],
+    ];
+};

package/dist/prospect-client/Pagination/PaginationApollo.d.ts

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

package/dist/prospect-client/Pagination/PaginationApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Pagination/PaginationApollo.css";
+import { ItemPagination } from "./ItemPagination/ItemPaginationApollo";
+import { PaginationCommon } from "./PaginationCommon";
+export const Pagination = (props) => (_jsx(PaginationCommon, { ...props, ItemPaginationComponent: ItemPagination }));

package/dist/prospect-client/Pagination/PaginationCommon.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, ComponentType, type ComponentPropsWithoutRef } from "react";
+import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { ItemPaginationCommon } from "./ItemPagination/ItemPaginationCommon";
+import { type getItemsProps } from "./Pagination.helper";
+export type PaginationProps = getItemsProps & ComponentPropsWithoutRef<"nav"> & {
+    hidePrevNext?: boolean;
+    prevButtonProps?: ComponentProps<typeof ClickIcon>;
+    nextButtonProps?: ComponentProps<typeof ClickIcon>;
+};
+type PaginationCommonProps = PaginationProps & {
+    ItemPaginationComponent: ComponentType<ComponentProps<typeof ItemPaginationCommon>>;
+};
+export declare const PaginationCommon: ({ numberPages, onChangePage, className, currentPage, asItem, hidePrevNext, "aria-label": ariaLabel, ItemPaginationComponent, prevButtonProps, nextButtonProps, }: PaginationCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/Pagination/PaginationCommon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevronBackward from "@material-symbols/svg-400/rounded/chevron_backward.svg";
+import chevronForward from "@material-symbols/svg-400/rounded/chevron_forward.svg";
+import { getClassName } from "../utilities/getClassName";
+import { ClickIcon } from "../ClickIcon/ClickIconApollo";
+import { ELLIPSIS, } from "./ItemPagination/ItemPaginationCommon";
+import { getItems } from "./Pagination.helper";
+export const PaginationCommon = ({ numberPages = 1, onChangePage, className, currentPage = 1, asItem, hidePrevNext = false, "aria-label": ariaLabel = "Pagination", ItemPaginationComponent, prevButtonProps, nextButtonProps, }) => {
+    const items = getItems({
+        numberPages,
+        currentPage,
+        asItem,
+        onChangePage,
+    });
+    return (_jsx("nav", { className: getClassName({
+            baseClassName: "af-pagination",
+            className,
+            modifiers: [hidePrevNext ? "hide-prev-next" : undefined],
+        }), "aria-label": ariaLabel, children: _jsxs("ol", { className: "af-pagination-list", children: [_jsx("li", { children: _jsx(ClickIcon, { src: chevronBackward, onClick: () => onChangePage(currentPage - 1), disabled: currentPage === 1, "aria-label": "Page pr\u00E9c\u00E9dente", ...prevButtonProps }) }), _jsx("li", { children: _jsx("span", { className: "af-pagination-counter", children: `Page ${currentPage} sur ${numberPages}` }) }), items.map((item, index) => (_jsx("li", { children: _jsx(ItemPaginationComponent, { ...item }) }, item.page === ELLIPSIS ? `ellipsis-${index}` : item.page))), _jsx("li", { children: _jsx(ClickIcon, { src: chevronForward, onClick: () => onChangePage(currentPage + 1), disabled: currentPage === numberPages, "aria-label": "Page suivante", ...nextButtonProps }) })] }) }));
+};

package/dist/prospect-client/Pagination/PaginationLF.d.ts

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

package/dist/prospect-client/Pagination/PaginationLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Pagination/PaginationLF.css";
+import { ItemPagination } from "./ItemPagination/ItemPaginationLF";
+import { PaginationCommon } from "./PaginationCommon";
+export const Pagination = (props) => (_jsx(PaginationCommon, { ...props, ItemPaginationComponent: ItemPagination }));

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

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/ProgressBar/ProgressBarApollo.css";
+export { ProgressBar } from "./ProgressBarCommon";

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

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/ProgressBar/ProgressBarApollo.css";
+export { ProgressBar } from "./ProgressBarCommon";

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export const ProgressBar = ({ id, label, 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 })] }));
+};
+ProgressBar.displayName = "ProgressBar";

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

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/ProgressBar/ProgressBarLF.css";
+export { ProgressBar } from "./ProgressBarCommon";

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

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/ProgressBar/ProgressBarLF.css";
+export { ProgressBar } from "./ProgressBarCommon";

package/dist/prospect-client/ProgressBarGroup/ProgressBarGroupApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/ProgressBarGroup/ProgressBarGroupApollo.css";
+import { ProgressBarGroupProps } from "./ProgressBarGroupCommon";
+export declare const ProgressBarGroup: (props: ProgressBarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/ProgressBarGroup/ProgressBarGroupApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/ProgressBarGroup/ProgressBarGroupApollo.css";
+import { ProgressBar } from "../ProgressBar/ProgressBarApollo";
+import { ProgressBarGroupCommon, } from "./ProgressBarGroupCommon";
+export const ProgressBarGroup = (props) => (_jsx(ProgressBarGroupCommon, { ...props, ProgressBarComponent: ProgressBar }));

package/dist/prospect-client/ProgressBarGroup/ProgressBarGroupCommon.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentProps, type ComponentType } from "react";
+import { ProgressBar } from "../ProgressBar/ProgressBarCommon";
+export type ProgressBarGroupProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    /**
+     * @deprecated Use `stepsCount` instead.
+     */
+    nbSteps?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    stepsCount?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    max?: number;
+    className?: string;
+} & Omit<ComponentProps<"ol">, "children" | "className">;
+type ProgressBarGroupCommonProps = ProgressBarGroupProps & {
+    ProgressBarComponent: ComponentType<ComponentProps<typeof ProgressBar>>;
+};
+export declare const ProgressBarGroupCommon: ({ currentStepProgress, max, nbSteps, stepsCount, currentStep, className, ProgressBarComponent, ...props }: ProgressBarGroupCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/ProgressBarGroup/ProgressBarGroupCommon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useId } from "react";
+import { useSequentialProgress } from "./useSequentialProgress";
+export const ProgressBarGroupCommon = ({ currentStepProgress = 0, max = 100, nbSteps = 4, stepsCount = nbSteps, currentStep, className, ProgressBarComponent, ...props }) => {
+    const stepperId = useId();
+    const progressValues = useSequentialProgress(currentStepProgress / max, currentStep, stepsCount);
+    return (_jsx("ol", { className: classNames("af-progress-bar-group", className), ...props, children: progressValues.map((value, index) => (_jsx("li", { className: "af-progress-bar-group__item", children: _jsx(ProgressBarComponent, { value: value, "aria-hidden": true }) }, `af-progress-bar-group__item--${stepperId}-${index}`))) }));
+};

package/dist/prospect-client/ProgressBarGroup/ProgressBarGroupLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/ProgressBarGroup/ProgressBarGroupLF.css";
+import { ProgressBarGroupProps } from "./ProgressBarGroupCommon";
+export declare const ProgressBarGroup: (props: ProgressBarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/ProgressBarGroup/ProgressBarGroupLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/ProgressBarGroup/ProgressBarGroupLF.css";
+import { ProgressBar } from "../ProgressBar/ProgressBarLF";
+import { ProgressBarGroupCommon, } from "./ProgressBarGroupCommon";
+export const ProgressBarGroup = (props) => (_jsx(ProgressBarGroupCommon, { ...props, ProgressBarComponent: ProgressBar }));

package/dist/prospect-client/ProgressBarGroup/useSequentialProgress.d.ts

@@ -0,0 +1,20 @@
+/**
+ * useSequentialProgress
+ *
+ * A custom React hook to manage the animated progress values for a multi-step progress bar (stepper).
+ *
+ * This hook returns an array of numbers (between 0 and 1) representing the fill percentage of each progress bar step.
+ * It animates the transition between steps, smoothly updating the progress values when the current step or percentage changes.
+ *
+ * @param stepPercentage - The completion percentage (between 0 and 1) of the current step.
+ * @param currentStepIndex - The index (starting from 0) of the current step.
+ * @param steps - The total number of steps in the progress bar.
+ * @param duration - (Optional) Animation duration in milliseconds for each update (default: 750ms).
+ *
+ * @returns number[] - An array of progress values for each step (0 = empty, 1 = full, value between 0 and 1 = partial).
+ *
+ * Example usage:
+ *   const progressValues = useSequentialProgress(0.5, 1, 3);
+ *   // progressValues might be: [1, 0.5, 0]
+ */
+export declare const useSequentialProgress: (stepPercentage: number, currentStepIndex: number, steps: number, duration?: number) => number[];

package/dist/prospect-client/ProgressBarGroup/useSequentialProgress.js

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const getProgressValues = (currentStepIndex, stepPercentage, steps) => {
+    const values = Array(steps).fill(0);
+    for (let i = 0; i < steps; i++) {
+        if (i < currentStepIndex) {
+            values[i] = 1;
+        }
+        else if (i === currentStepIndex) {
+            values[i] = stepPercentage;
+            break;
+        }
+    }
+    return values;
+};
+/**
+ * useSequentialProgress
+ *
+ * A custom React hook to manage the animated progress values for a multi-step progress bar (stepper).
+ *
+ * This hook returns an array of numbers (between 0 and 1) representing the fill percentage of each progress bar step.
+ * It animates the transition between steps, smoothly updating the progress values when the current step or percentage changes.
+ *
+ * @param stepPercentage - The completion percentage (between 0 and 1) of the current step.
+ * @param currentStepIndex - The index (starting from 0) of the current step.
+ * @param steps - The total number of steps in the progress bar.
+ * @param duration - (Optional) Animation duration in milliseconds for each update (default: 750ms).
+ *
+ * @returns number[] - An array of progress values for each step (0 = empty, 1 = full, value between 0 and 1 = partial).
+ *
+ * Example usage:
+ *   const progressValues = useSequentialProgress(0.5, 1, 3);
+ *   // progressValues might be: [1, 0.5, 0]
+ */
+export const useSequentialProgress = (stepPercentage, currentStepIndex, steps, duration = 750) => {
+    const [progressValues, setProgressValues] = useState(getProgressValues(currentStepIndex, stepPercentage, steps));
+    const currentAnimationStep = useRef(currentStepIndex + stepPercentage);
+    const timeoutRef = useRef(null);
+    const animate = useCallback(() => {
+        const targetStep = currentStepIndex + stepPercentage;
+        if (currentAnimationStep.current === targetStep) {
+            return;
+        }
+        const diff = targetStep - currentAnimationStep.current;
+        if (!Number.isInteger(currentAnimationStep.current) &&
+            Math.floor(currentAnimationStep.current) !== currentStepIndex) {
+            currentAnimationStep.current =
+                diff > 0
+                    ? Math.ceil(currentAnimationStep.current)
+                    : Math.floor(currentAnimationStep.current);
+        }
+        else if (Math.abs(diff) > 1) {
+            currentAnimationStep.current += Number(Math.sign(diff)) * 1;
+        }
+        else if (Math.abs(diff) > 0) {
+            currentAnimationStep.current = targetStep;
+        }
+        setProgressValues(getProgressValues(Math.floor(currentAnimationStep.current), currentAnimationStep.current - Math.floor(currentAnimationStep.current), steps));
+        timeoutRef.current = setTimeout(animate, duration);
+    }, [currentStepIndex, duration, stepPercentage, steps]);
+    // Reset the array and animation if the number of steps changes
+    useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setProgressValues(getProgressValues(currentStepIndex, stepPercentage, steps));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [steps]);
+    // Animate only when currentStepIndex or stepPercentage changes
+    useEffect(() => {
+        animate();
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stepPercentage, currentStepIndex]);
+    return progressValues;
+};

package/dist/prospect-client/Spinner/SpinnerApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Spinner/SpinnerApollo.css";
+export { Spinner, spinnerVariants, type SpinnerVariants, } from "./SpinnerCommon";

package/dist/prospect-client/Spinner/SpinnerApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Spinner/SpinnerApollo.css";
+export { Spinner, spinnerVariants, } from "./SpinnerCommon";

package/dist/prospect-client/Spinner/SpinnerCommon.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithoutRef } from "react";
+export declare const spinnerVariants: {
+    readonly blue: "blue";
+    readonly gray: "gray";
+    readonly white: "white";
+};
+export type SpinnerVariants = keyof typeof spinnerVariants;
+export type SpinnerProps = {
+    size?: 24 | 32 | 40;
+    variant?: SpinnerVariants;
+    text?: string;
+} & ComponentPropsWithoutRef<"div">;
+declare const Spinner: {
+    ({ size, variant, text, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Spinner };

package/dist/prospect-client/Spinner/SpinnerCommon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const spinnerVariants = {
+    blue: "blue",
+    gray: "gray",
+    white: "white",
+};
+const DEFAULT_CLASSNAME = "af-spinner";
+const Spinner = ({ size = 40, variant = "blue", text = "Chargement en cours", className, ...props }) => (_jsx("div", { role: "alert", ...props, "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: [
+        DEFAULT_CLASSNAME,
+        `${DEFAULT_CLASSNAME}--${variant}`,
+        `${DEFAULT_CLASSNAME}--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" "), style: {
+        "--spinner-size": size,
+    } }));
+Spinner.displayName = "Spinner";
+export { Spinner };

package/dist/prospect-client/Spinner/SpinnerLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Spinner/SpinnerLF.css";
+export { Spinner, spinnerVariants, type SpinnerVariants, } from "./SpinnerCommon";

package/dist/prospect-client/Spinner/SpinnerLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Spinner/SpinnerLF.css";
+export { Spinner, spinnerVariants, } from "./SpinnerCommon";

package/dist/prospect-client/Stepper/StepperApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/Stepper/StepperApollo.css";
+import { type StepperProps } from "./StepperCommon";
+export declare const Stepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Stepper/StepperApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Stepper/StepperApollo.css";
+import { ProgressBarGroup } from "../ProgressBarGroup/ProgressBarGroupApollo";
+import { StepperCommon } from "./StepperCommon";
+export const Stepper = (props) => (_jsx(StepperCommon, { ...props, ProgressBarGroupComponent: ProgressBarGroup }));

package/dist/prospect-client/Stepper/StepperCommon.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType, type HTMLAttributes } from "react";
+import { type ItemMessageProps } from "../Form/ItemMessage/ItemMessageCommon";
+import { type ProgressBarGroupProps } from "../ProgressBarGroup/ProgressBarGroupCommon";
+export type StepperProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    currentSubtitle?: string;
+    currentTitle?: string;
+    nbSteps?: 3 | 4 | 5 | 6 | 7 | 8;
+    helper?: string;
+    message?: string;
+    messageType?: ItemMessageProps["messageType"];
+    titleLevel?: 1 | 2 | 3;
+} & Omit<HTMLAttributes<HTMLDivElement>, "role">;
+export type StepperCommonProps = StepperProps & {
+    ProgressBarGroupComponent: ComponentType<ProgressBarGroupProps>;
+};
+export declare const StepperCommon: ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, helper, message, messageType, titleLevel, ...props }: StepperCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Stepper/StepperCommon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { ItemMessage, } from "../Form/ItemMessage/ItemMessageCommon";
+export const StepperCommon = ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, helper, message, messageType = "success", titleLevel = 2, ...props }) => {
+    const titleId = useId();
+    const Title = `h${titleLevel}`;
+    return (_jsxs("div", { className: "af-stepper", ...props, tabIndex: undefined, children: [_jsxs("div", { className: "af-stepper__header", children: [_jsx(Title, { id: titleId, className: "af-stepper__title", children: currentTitle }), Boolean(currentSubtitle) && (_jsx("p", { className: "af-stepper__subtitle", children: currentSubtitle }))] }), _jsx(ProgressBarGroupComponent, { className: className, currentStep: currentStep, stepsCount: nbSteps, currentStepProgress: currentStepProgress, "aria-labelledby": titleId }), Boolean(helper) && _jsx("span", { className: "af-stepper__helper", children: helper }), _jsx(ItemMessage, { message: message, messageType: messageType })] }));
+};

package/dist/prospect-client/Stepper/StepperLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/Stepper/StepperLF.css";
+import { type StepperProps } from "./StepperCommon";
+export declare const Stepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Stepper/StepperLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Stepper/StepperLF.css";
+import { ProgressBarGroup } from "../ProgressBarGroup/ProgressBarGroupLF";
+import { StepperCommon } from "./StepperCommon";
+export const Stepper = (props) => (_jsx(StepperCommon, { ...props, ProgressBarGroupComponent: ProgressBarGroup }));

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

@@ -0,0 +1,11 @@
+import "@axa-fr/canopee-css/prospect/Svg/Svg.css";
+import { type SVGAttributes } from "react";
+type SvgProps = SVGAttributes<SVGSVGElement> & {
+    src: string;
+    alt?: string;
+};
+/**
+ * @deprecated Use Icon instead
+ */
+export declare const Svg: ({ className, src, alt, width, height, ...props }: SvgProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Svg/Svg.css";
+import React from "react";
+import { svgInjector } from "./svgInjector";
+const cloneAttributes = (from, to) => {
+    const attributes = from.getAttributeNames();
+    attributes.forEach((attribute) => {
+        to.setAttribute(attribute, from.getAttribute(attribute));
+    });
+};
+/**
+ * @deprecated Use Icon instead
+ */
+export const Svg = ({ className, src, alt, width = 24, height = 24, ...props }) => {
+    const rootRef = React.useRef(null);
+    const [hasError, setHasError] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (hasError) {
+            setHasError(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [src]);
+    React.useLayoutEffect(() => {
+        if (hasError) {
+            return;
+        }
+        const root = rootRef.current;
+        if (root) {
+            const parent = document.createElement("div");
+            const svg = document.createElement("svg");
+            parent.appendChild(svg);
+            cloneAttributes(root, svg);
+            // Default SVG size was 24px with @material-design-icons/svg. With @material-symbols/svg-400 this is now 48px (with no native way to change it)
+            // In order not to break existing CSS, we manually set the default value back to 24px
+            svg.setAttribute("width", width.toString());
+            svg.setAttribute("height", height.toString());
+            svgInjector(svg, {
+                afterEach: (error, svgInject) => {
+                    if (error) {
+                        setHasError(true);
+                    }
+                    if (svgInject) {
+                        root.innerHTML = svgInject.innerHTML;
+                        cloneAttributes(svgInject, root);
+                    }
+                },
+            });
+        }
+    }, [src, width, height, hasError]);
+    if (hasError) {
+        return alt ? (_jsx("span", { ...props, children: alt })) : null;
+    }
+    return (_jsx("svg", { ref: rootRef, className: ["af-svg", className].filter(Boolean).join(" "), "data-src": src, width: width, height: height, ...props }));
+};

package/dist/prospect-client/Svg/svgInjector.d.ts

@@ -0,0 +1,12 @@
+import { type AfterAll, type BeforeEach, type Errback, type EvalScripts } from "@tanem/svg-injector";
+type Options = {
+    afterAll?: AfterAll;
+    afterEach?: Errback;
+    beforeEach?: BeforeEach;
+    cacheRequests?: boolean;
+    evalScripts?: EvalScripts;
+    httpRequestWithCredentials?: boolean;
+    renumerateIRIElements?: boolean;
+};
+export declare const svgInjector: (element: HTMLElement | SVGSVGElement | null, { beforeEach, ...options }?: Options) => void;
+export {};