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

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

@@ -7,4 +7,7 @@ export type ModalCommonProps = ModalCoreProps & Omit<ModalCoreHeaderCommonProps,
     modalCoreFooterProps?: ModalCoreFooterContainerProps;
     modalCoreHeaderProps?: ModalCoreHeaderContainerProps;
 };
-export declare const ModalCommon: import("react").ForwardRefExoticComponent<Omit<ModalCommonProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const ModalCommon: {
+    ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }: ModalCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ModalCore } from "./components/ModalCore";
 import { ModalCoreBody, } from "./components/ModalCoreBody";
 import { ModalCoreFooterCommon, } from "./components/ModalCoreFooterCommon";
 import { ModalCoreHeaderCommon } from "./components/ModalCoreHeaderCommon";
-export const ModalCommon = forwardRef(({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }, ref) => (_jsxs(ModalCore, { onClose: onClose, ref: ref, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] })));
+export const ModalCommon = ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }) => (_jsxs(ModalCore, { onClose: onClose, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] }));
 ModalCommon.displayName = "ModalCommon";

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

@@ -5,4 +5,7 @@ export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreB
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
 export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
-export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Modal: {
+    ({ headingProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Modal/ModalLF.css";
-import { forwardRef } from "react";
 import { Button } from "../Button/ButtonLF";
 import { Heading } from "../Heading/HeadingLF";
 import { ModalCommon } from "./ModalCommon";
@@ -8,10 +7,8 @@ export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+export const Modal = ({ headingProps = {}, ...props }) => (_jsx(ModalCommon, { ...props, headingComponent: Heading, headingProps: {
         ...headingProps,
         children: props.title,
-        icon: headingProps.icon ?? icon,
-        iconProps: headingProps.iconProps ?? iconProps,
-    }, buttonComponent: Button })));
+    }, buttonComponent: Button }));
 Modal.displayName = "Modal";

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

@@ -2,5 +2,8 @@ import { type ComponentPropsWithRef } from "react";
 export type ModalCoreProps = Omit<ComponentPropsWithRef<"dialog">, "title" | "onClose"> & Required<Pick<ComponentPropsWithRef<"dialog">, "title">> & {
     onClose?: VoidFunction;
 };
-declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+declare const ModalCore: {
+    ({ className, children, ...props }: ModalCoreProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { ModalCore };

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const ModalCore = forwardRef(({ className, children, ...props }, ref) => (
+import {} from "react";
+const ModalCore = ({ className, children, ...props }) => (
 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-_jsx("dialog", { "aria-modal": true, "aria-label": props["aria-label"] ?? props.title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ref: ref, ...props, children: _jsx("section", { className: "af-modal__content", onClick: (e) => e.stopPropagation(), children: children }) })));
+_jsx("dialog", { "aria-modal": true, "aria-label": props["aria-label"] ?? props.title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ...props, children: _jsx("section", { className: "af-modal__content", onClick: (e) => e.stopPropagation(), children: children }) }));
 ModalCore.displayName = "ModalCore";
 export { ModalCore };

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

@@ -1,16 +1,9 @@
 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;
-    /**
-     * @deprecated Pass `icon` and `iconProps` (without `src`) inside
-     * `headingProps` instead. The legacy `iconProps` is forwarded to the
-     * Heading molecule for backward compatibility and will be removed in 2.0.0.
-     */
-    iconProps?: IconProps;
     onClose?: VoidFunction;
     closeButtonAriaLabel?: string;
 };

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

@@ -2,16 +2,6 @@ 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 = (props) => {
-    const { className, headingComponent: HeadingComponent, headingProps, iconProps, onClose, closeButtonAriaLabel = "Fermer la boite de dialogue", ...rest } = props;
-    // Backward-compat: legacy `iconProps` (with `src`) is routed through the
-    // Heading molecule, which already renders the icon and title together.
-    const { src: legacyIconSrc, ...legacyIconRest } = iconProps ?? {};
-    const mergedHeadingProps = legacyIconSrc
-        ? {
-            ...headingProps,
-            icon: headingProps.icon ?? legacyIconSrc,
-            iconProps: { ...legacyIconRest, ...(headingProps.iconProps ?? {}) },
-        }
-        : headingProps;
-    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...rest, children: [_jsx(ClickIcon, { className: "af-modal__header-close-btn", src: close, onClick: onClose, "aria-label": closeButtonAriaLabel }), _jsx("div", { className: "af-modal__header-title", children: _jsx(HeadingComponent, { level: 2, ...mergedHeadingProps }) })] }));
+    const { className, headingComponent: HeadingComponent, headingProps, onClose, closeButtonAriaLabel = "Fermer la boite de dialogue", ...rest } = props;
+    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...rest, children: [_jsx(ClickIcon, { className: "af-modal__header-close-btn", src: close, onClick: onClose, "aria-label": closeButtonAriaLabel }), _jsx("div", { className: "af-modal__header-title", children: _jsx(HeadingComponent, { level: 2, ...headingProps }) })] }));
 };

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

@@ -1,5 +1,4 @@
 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";
@@ -7,18 +6,4 @@ export type ModalCoreHeaderProps = Omit<ModalCoreHeaderCommonProps, "headingComp
 export type ModalCoreFooterProps = Omit<ModalCoreFooterCommonProps, "buttonComponent">;
 export type ModalProps = Omit<ModalCommonProps, "headingComponent" | "headingProps" | "iconProps" | "buttonComponent"> & {
     headingProps?: Omit<HeadingProps, "children">;
-    /**
-     * @deprecated Pass `icon` inside `headingProps` instead
-     * (e.g. `headingProps={{ icon }}`). The top-level `icon` prop is
-     * forwarded to the Heading molecule for backward compatibility and will
-     * be removed in 2.0.0.
-     */
-    icon?: string;
-    /**
-     * @deprecated Pass `iconProps` inside `headingProps` instead
-     * (e.g. `headingProps={{ iconProps }}`). The top-level `iconProps`
-     * is forwarded to the Heading molecule for backward compatibility and
-     * will be removed in 2.0.0.
-     */
-    iconProps?: Omit<IconProps, "src">;
 };

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

@@ -3,10 +3,6 @@ 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;
@@ -14,5 +10,5 @@ export type ProgressBarGroupProps = {
 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 declare const ProgressBarGroupCommon: ({ currentStepProgress, max, stepsCount, currentStep, className, ProgressBarComponent, ...props }: ProgressBarGroupCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { useId } from "react";
 import { ProgressBar } from "../ProgressBar/ProgressBarCommon";
 import { useSequentialProgress } from "./useSequentialProgress";
-export const ProgressBarGroupCommon = ({ currentStepProgress = 0, max = 100, nbSteps = 4, stepsCount = nbSteps, currentStep, className, ProgressBarComponent, ...props }) => {
+export const ProgressBarGroupCommon = ({ currentStepProgress = 0, max = 100, stepsCount = 4, 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/Skeleton/Skeleton.d.ts

@@ -0,0 +1,61 @@
+import type { ComponentPropsWithoutRef } from "react";
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonAll.css";
+export declare const skeletonVariants: {
+    readonly action: "action";
+    readonly circle: "circle";
+    readonly rectangle: "rectangle";
+};
+export type SkeletonVariant = keyof typeof skeletonVariants;
+export declare const skeletonSizeVariants: {
+    readonly XS: "extra-small";
+    readonly S: "small";
+    readonly M: "medium";
+    readonly L: "large";
+    readonly XL: "extra-large";
+    readonly XXL: "extra-extra-large";
+};
+export type SkeletonSizeVariant = keyof typeof skeletonSizeVariants;
+export type SkeletonCircleSizeVariant = keyof Pick<typeof skeletonSizeVariants, "S" | "M" | "L">;
+export type SkeletonActionSizeVariant = keyof Pick<typeof skeletonSizeVariants, "M">;
+type SkeletonSharedProps = {
+    colSize?: number;
+    rowSize?: number;
+} & ComponentPropsWithoutRef<"div">;
+type SkeletonCircleProps = {
+    size?: SkeletonCircleSizeVariant;
+    variant: "circle";
+};
+type SkeletonActionProps = {
+    size?: SkeletonActionSizeVariant;
+    variant: "action";
+};
+type SkeletonRectangleProps = {
+    size?: SkeletonSizeVariant;
+    variant?: "rectangle";
+};
+/**
+ * Props for the `Skeleton` component.
+ *
+ * The allowed `size` values depend on the selected `variant`:
+ * - `circle`: `S | M | L`
+ * - `action`: `M`
+ * - `rectangle`: `XS | S | M | L | XL | XXL`
+ */
+export type SkeletonProps = SkeletonSharedProps & (SkeletonCircleProps | SkeletonActionProps | SkeletonRectangleProps);
+/**
+ * Renders one skeleton placeholder block.
+ *
+ * This is the base building block used by `SkeletonGrid`, `SkeletonList`,
+ * and `ExitLayoutSkeleton`.
+ *
+ * @component
+ * @param {SkeletonProps} props - Skeleton props.
+ * @param {number} [props.colSize=1] - Number of grid columns occupied by the skeleton.
+ * @param {number} [props.rowSize=1] - Number of grid rows occupied by the skeleton.
+ * @param {SkeletonVariant} [props.variant="rectangle"] - Visual variant of the placeholder.
+ * @param {SkeletonSizeVariant | SkeletonCircleSizeVariant | SkeletonActionSizeVariant} [props.size="M"] - Size applied to the skeleton. The accepted values depend on `variant`.
+ * @param {string} [props.className] - Additional CSS class applied to the skeleton.
+ * @returns {JSX.Element} The rendered Skeleton component.
+ */
+export declare const Skeleton: ({ className, colSize, rowSize, size, variant, style, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonAll.css";
+import { getClassName } from "../utilities/getClassName";
+const CLASS_NAME = "af-skeleton";
+export const skeletonVariants = {
+    action: "action",
+    circle: "circle",
+    rectangle: "rectangle",
+};
+export const skeletonSizeVariants = {
+    XS: "extra-small",
+    S: "small",
+    M: "medium",
+    L: "large",
+    XL: "extra-large",
+    XXL: "extra-extra-large",
+};
+/**
+ * Renders one skeleton placeholder block.
+ *
+ * This is the base building block used by `SkeletonGrid`, `SkeletonList`,
+ * and `ExitLayoutSkeleton`.
+ *
+ * @component
+ * @param {SkeletonProps} props - Skeleton props.
+ * @param {number} [props.colSize=1] - Number of grid columns occupied by the skeleton.
+ * @param {number} [props.rowSize=1] - Number of grid rows occupied by the skeleton.
+ * @param {SkeletonVariant} [props.variant="rectangle"] - Visual variant of the placeholder.
+ * @param {SkeletonSizeVariant | SkeletonCircleSizeVariant | SkeletonActionSizeVariant} [props.size="M"] - Size applied to the skeleton. The accepted values depend on `variant`.
+ * @param {string} [props.className] - Additional CSS class applied to the skeleton.
+ * @returns {JSX.Element} The rendered Skeleton component.
+ */
+export const Skeleton = ({ className, colSize = 1, rowSize = 1, size = "M", variant = "rectangle", style, ...props }) => (_jsx("div", { ...props, className: getClassName({
+        baseClassName: CLASS_NAME,
+        modifiers: [variant, skeletonSizeVariants[size]],
+        className,
+    }), style: {
+        "--col-size": colSize,
+        "--row-size": rowSize,
+        ...style,
+    } }));

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

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { type SkeletonProps } from "../Skeleton/Skeleton";
+import "@axa-fr/canopee-css/prospect/SkeletonGrid/SkeletonGridAll.css";
+/**
+ * One skeleton cell rendered inside a `SkeletonGrid` row.
+ */
+export type SkeletonGridItem = SkeletonProps;
+type isLoadingAndChildrenProps = {
+    children: ReactNode;
+    isLoading: boolean;
+} | {
+    children?: undefined;
+    isLoading?: boolean;
+};
+/**
+ * Props for the `SkeletonGrid` component.
+ *
+ * `grid` is a two-level array where:
+ * - first level represents rows
+ * - second level represents skeleton cells rendered in each row
+ */
+export type SkeletonGridProps = {
+    className?: string;
+    grid: SkeletonGridItem[][];
+    "aria-busy"?: boolean;
+    "aria-label"?: string;
+    maxCols?: number;
+    colGap?: number;
+    rowGap?: number;
+} & isLoadingAndChildrenProps;
+/**
+ * Renders a responsive grid of skeleton placeholders.
+ *
+ * When `isLoading` is `false`, the component returns its `children` instead of
+ * the skeleton grid.
+ *
+ * @component
+ * @param {SkeletonGridProps} props - SkeletonGrid props.
+ * @param {SkeletonGridItem[][]} props.grid - Grid definition where each row contains one or more skeleton cells.
+ * @param {number} [props.maxCols=12] - Number of columns used to build the grid template.
+ * @param {number} [props.colGap=16] - Horizontal gap between grid columns, in pixels.
+ * @param {number} [props.rowGap=8] - Vertical gap between grid rows, in pixels.
+ * @param {boolean} [props.isLoading=true] - When `true`, displays the skeleton placeholders.
+ * @param {ReactNode} [props.children] - Content rendered when `isLoading` is `false`.
+ * @param {string} [props.className] - Additional CSS class applied to the root element.
+ * @param {string} [props.aria-label="Chargement"] - Accessible label for the loading region.
+ * @param {boolean} [props.aria-busy=true] - Announces the loading region as busy to assistive technologies.
+ * @returns {JSX.Element | ReactNode} The rendered skeleton grid or the fallback children.
+ */
+export declare const SkeletonGrid: ({ className, grid, "aria-busy": ariaBusy, "aria-label": ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonGridProps) => 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/SkeletonGrid/SkeletonGrid.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/Skeleton";
+import "@axa-fr/canopee-css/prospect/SkeletonGrid/SkeletonGridAll.css";
+import { getClassName } from "../utilities/getClassName";
+const CLASS_NAME = "af-skeleton-grid";
+/**
+ * Renders a responsive grid of skeleton placeholders.
+ *
+ * When `isLoading` is `false`, the component returns its `children` instead of
+ * the skeleton grid.
+ *
+ * @component
+ * @param {SkeletonGridProps} props - SkeletonGrid props.
+ * @param {SkeletonGridItem[][]} props.grid - Grid definition where each row contains one or more skeleton cells.
+ * @param {number} [props.maxCols=12] - Number of columns used to build the grid template.
+ * @param {number} [props.colGap=16] - Horizontal gap between grid columns, in pixels.
+ * @param {number} [props.rowGap=8] - Vertical gap between grid rows, in pixels.
+ * @param {boolean} [props.isLoading=true] - When `true`, displays the skeleton placeholders.
+ * @param {ReactNode} [props.children] - Content rendered when `isLoading` is `false`.
+ * @param {string} [props.className] - Additional CSS class applied to the root element.
+ * @param {string} [props.aria-label="Chargement"] - Accessible label for the loading region.
+ * @param {boolean} [props.aria-busy=true] - Announces the loading region as busy to assistive technologies.
+ * @returns {JSX.Element | ReactNode} The rendered skeleton grid or the fallback children.
+ */
+export const SkeletonGrid = ({ className, grid = [], "aria-busy": ariaBusy = true, "aria-label": ariaLabel = "Chargement", maxCols = 12, colGap = 16, rowGap = 8, isLoading = true, children, }) => {
+    if (isLoading) {
+        return (_jsx("div", { className: getClassName({
+                baseClassName: CLASS_NAME,
+                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((skeletonProps, indexCol) => (_jsx(Skeleton, { ...skeletonProps }, `${indexRow}-${indexCol}`)))) }));
+    }
+    return children;
+};

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

@@ -1,3 +1,10 @@
 import { type SkeletonListProps } from "./SkeletonListCommon";
 export { type SkeletonListProps } from "./SkeletonListCommon";
+/**
+ * Apollo-themed `SkeletonList` component.
+ *
+ * @component
+ * @param {SkeletonListProps} props - SkeletonList props.
+ * @returns {JSX.Element | ReactNode[]} The rendered Apollo-themed SkeletonList.
+ */
 export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Skeleton } from "../Skeleton/SkeletonApollo";
 import { List } from "../List/List/ListApollo";
 import { SkeletonListCommon, } from "./SkeletonListCommon";
 export {} from "./SkeletonListCommon";
-export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));
+/**
+ * Apollo-themed `SkeletonList` component.
+ *
+ * @component
+ * @param {SkeletonListProps} props - SkeletonList props.
+ * @returns {JSX.Element | ReactNode[]} The rendered Apollo-themed SkeletonList.
+ */
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, ListComponent: List }));

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

@@ -1,17 +1,34 @@
 import type { ComponentType, PropsWithChildren } from "react";
-import type { SkeletonProps } from "../Skeleton/SkeletonCommon";
+import type { SkeletonGridProps } from "../SkeletonGrid/SkeletonGrid";
 import type { ListProps } from "../List/List/ListCommon";
+/**
+ * Props for the themed `SkeletonList` components.
+ */
 export type SkeletonListProps = {
     lists: {
         lines?: number;
-        grid: SkeletonProps["grid"];
+        grid: SkeletonGridProps["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;
+/**
+ * Shared implementation rendering repeated `SkeletonGrid` rows inside a `List`.
+ *
+ * The visual list container is injected through `ListComponent` to allow
+ * Apollo and Look and Feel theming.
+ *
+ * @component
+ * @param {SkeletonListPropsCommon} props - SkeletonList props.
+ * @param {{ lines?: number; grid: SkeletonGridProps["grid"] }[]} props.lists - Groups of skeleton rows to render while loading.
+ * @param {boolean} [props.isLoading=true] - When `true`, renders the list of skeleton placeholders.
+ * @param {string} [props.className] - Additional CSS class applied to each injected list container.
+ * @param {ReactNode} [props.children] - Content rendered when `isLoading` is `false`.
+ * @param {ComponentType<ListProps>} props.ListComponent - Theme-specific list component used to wrap each skeleton block.
+ * @returns {JSX.Element | ReactNode[]} The rendered skeleton list or the fallback children.
+ */
+export declare const SkeletonListCommon: ({ children, isLoading, lists, className, ListComponent, }: 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

@@ -1,4 +1,20 @@
 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)))
+import { SkeletonGrid } from "../SkeletonGrid/SkeletonGrid";
+/**
+ * Shared implementation rendering repeated `SkeletonGrid` rows inside a `List`.
+ *
+ * The visual list container is injected through `ListComponent` to allow
+ * Apollo and Look and Feel theming.
+ *
+ * @component
+ * @param {SkeletonListPropsCommon} props - SkeletonList props.
+ * @param {{ lines?: number; grid: SkeletonGridProps["grid"] }[]} props.lists - Groups of skeleton rows to render while loading.
+ * @param {boolean} [props.isLoading=true] - When `true`, renders the list of skeleton placeholders.
+ * @param {string} [props.className] - Additional CSS class applied to each injected list container.
+ * @param {ReactNode} [props.children] - Content rendered when `isLoading` is `false`.
+ * @param {ComponentType<ListProps>} props.ListComponent - Theme-specific list component used to wrap each skeleton block.
+ * @returns {JSX.Element | ReactNode[]} The rendered skeleton list or the fallback children.
+ */
+export const SkeletonListCommon = ({ children, isLoading, lists = [], className, ListComponent, }) => isLoading
+    ? lists.map(({ lines = 1, grid }, linesIndex) => (_jsx(ListComponent, { className: className, children: [...Array(lines).keys()].map((_, lineIndex) => (_jsx(SkeletonGrid, { grid: grid }, lineIndex))) }, linesIndex)))
     : children;

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

@@ -1,3 +1,10 @@
 import { type SkeletonListProps } from "./SkeletonListCommon";
 export { type SkeletonListProps } from "./SkeletonListCommon";
+/**
+ * Look and Feel-themed `SkeletonList` component.
+ *
+ * @component
+ * @param {SkeletonListProps} props - SkeletonList props.
+ * @returns {JSX.Element | ReactNode[]} The rendered Look and Feel SkeletonList.
+ */
 export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Skeleton } from "../Skeleton/SkeletonLF";
 import { List } from "../List/List/ListLF";
 import { SkeletonListCommon, } from "./SkeletonListCommon";
 export {} from "./SkeletonListCommon";
-export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));
+/**
+ * Look and Feel-themed `SkeletonList` component.
+ *
+ * @component
+ * @param {SkeletonListProps} props - SkeletonList props.
+ * @returns {JSX.Element | ReactNode[]} The rendered Look and Feel SkeletonList.
+ */
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, ListComponent: List }));

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

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

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

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

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, } from "react";
-import { ItemMessage, } from "../Form/ItemMessage/ItemMessageCommon";
+import {} from "../Form/ItemMessage/ItemMessage";
 import {} from "../ProgressBarGroup/ProgressBarGroupCommon";
-export const StepperCommon = ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, helper, message, messageType = "success", titleLevel = 2, ...props }) => {
+export const StepperCommon = ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, className, ProgressBarGroupComponent, HeadingComponent, ItemMessageComponent, helper, icon, iconProps, 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 })] }));
+    return (_jsxs("div", { className: "af-stepper", ...props, tabIndex: undefined, children: [_jsx("div", { className: "af-stepper__header", id: titleId, children: _jsx(HeadingComponent, { level: titleLevel, icon: icon, iconProps: iconProps, firstSubtitle: currentSubtitle, children: currentTitle }) }), _jsx(ProgressBarGroupComponent, { className: className, currentStep: currentStep, stepsCount: nbSteps, currentStepProgress: currentStepProgress, "aria-labelledby": titleId }), Boolean(helper) && _jsx("span", { className: "af-stepper__helper", children: helper }), _jsx(ItemMessageComponent, { message: message, messageType: messageType })] }));
 };

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

@@ -2,4 +2,6 @@ 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 }));
+import { Heading } from "../Heading/HeadingLF";
+import { ItemMessage } from "../Form/ItemMessage/ItemMessage";
+export const Stepper = (props) => (_jsx(StepperCommon, { ...props, ProgressBarGroupComponent: ProgressBarGroup, HeadingComponent: Heading, ItemMessageComponent: ItemMessage }));

package/dist/prospect-client/TabBar/TabBarCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { useCallback, useRef, useState, } from "react";
+import { useCallback, useId, useRef, useState, } from "react";
 import { ItemTabBar, } from "../ItemTabBar/ItemTabBarCommon";
 export const tabBarDirection = {
     center: "center",
@@ -10,6 +10,9 @@ const CLASS_NAME = "af-tabbar";
 export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", ItemTabBarComponent, }) => {
     const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTabIndex || 0);
     const buttonRefs = useRef([]);
+    const baseId = useId();
+    const getTabId = (index) => `${baseId}-tab-${index}`;
+    const getTabPanelId = (index) => `${baseId}-tabpanel-${index}`;
     const tablistRef = useRef(null);
     const totalTabs = items.length;
     const isActive = (index) => index === selectedTabIndex;
@@ -48,7 +51,7 @@ export const TabBarCommon = ({ items, preSelectedTabIndex, direction = "left", I
                 break;
         }
     }, [selectedTabIndex, totalTabs]);
-    return (_jsxs("div", { className: classNames(CLASS_NAME, direction === tabBarDirection.center ? `${CLASS_NAME}--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map(({ title }, index) => (_jsx(ItemTabBarComponent, { id: `tab-${index}`, "aria-selected": isActive(index), "aria-controls": `tabpanel-${index}`, onKeyDown: onChangeTab, onClick: () => handleClickFn(index), ref: (element) => {
+    return (_jsxs("div", { className: classNames(CLASS_NAME, direction === tabBarDirection.center ? `${CLASS_NAME}--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map(({ title }, index) => (_jsx(ItemTabBarComponent, { id: getTabId(index), "aria-selected": isActive(index), "aria-controls": getTabPanelId(index), onKeyDown: onChangeTab, onClick: () => handleClickFn(index), ref: (element) => {
                         buttonRefs.current[index] = element;
-                    }, tabIndex: isActive(index) ? 0 : -1, title: title }, `tab-${title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, children: item.content }, `tabpanel-${item.title}`)))] }));
+                    }, tabIndex: isActive(index) ? 0 : -1, title: title }, `tab-${title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: getTabPanelId(index), "aria-labelledby": getTabId(index), children: item.content }, `tabpanel-${item.title}`)))] }));
 };

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

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type ItemMenuProps } from "../ItemMenu/ItemMenuCommon";
+import "@axa-fr/canopee-css/prospect/TabMenu/TabMenuAll.css";
+/**
+ * One item displayed in the TabMenu component.
+ */
+export type TabMenuItemProps = Omit<ItemMenuProps, "children"> & {
+    /**
+     * Visible label of the menu item.
+     */
+    label: string;
+};
+/**
+ * Props for the TabMenu component.
+ */
+export type TabMenuProps = {
+    /**
+     * List of menu items.
+     */
+    items?: TabMenuItemProps[];
+    /**
+     * Initial active item position.
+     * @default 0
+     */
+    initialPosition?: number;
+} & Omit<ComponentPropsWithoutRef<"nav">, "children">;
+/**
+ * Renders a keyboard-navigable tab-style menu.
+ *
+ * @component
+ * @param {TabMenuProps} props - TabMenu props.
+ * @param {TabMenuItemProps[]} [props.items] - Items to render.
+ * @param {number} [props.initialPosition=0] - Initially selected item index.
+ * @returns {JSX.Element | null} The rendered TabMenu, or null when no items are provided.
+ */
+export declare const TabMenu: ({ items, className, initialPosition, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element | null;