@axa-fr/canopee-react 2.0.0-alpha.4 → 2.0.0-alpha.43

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

@@ -3,5 +3,5 @@ import { ModalCore } from "./components/ModalCore";
 import { ModalCoreBody, } from "./components/ModalCoreBody";
 import { ModalCoreFooterCommon, } from "./components/ModalCoreFooterCommon";
 import { ModalCoreHeaderCommon } from "./components/ModalCoreHeaderCommon";
-export const ModalCommon = ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }) => (_jsxs(ModalCore, { onClose: onClose, ...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

@@ -6,6 +6,6 @@ export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
 export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
 export declare const Modal: {
-    ({ headingProps, icon, iconProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ headingProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -7,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 = ({ headingProps = {}, icon, iconProps, ...props }) => (_jsx(ModalCommon, { ...props, 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 }));
 Modal.displayName = "Modal";

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

@@ -33,7 +33,7 @@ export const TabMenu = ({ items, className, initialPosition = 0, ...props }) =>
             className,
         }), ...props, 
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex: 0, onKeyDown: (e) => handleKeys(e.key), children: _jsx("ul", { className: "af-tab-menu__list", children: items.map((item, index) => (_jsx("li", { role: "presentation", children: _jsx(ItemMenu, { ref: (el) => {
+        tabIndex: 0, onKeyDown: (e) => handleKeys(e.key), children: _jsx("ul", { className: "af-tab-menu__list", children: items.map((item, index) => (_jsx("li", { children: _jsx(ItemMenu, { ref: (el) => {
                         itemRefs.current[index] = el;
                     }, ...item, isActive: index === position ? true : item.isActive, tabIndex: index === position ? 0 : -1, children: item.label }) }, item.href))) }) }));
 };

package/dist/prospect-client/Tag/TagCommon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const tagVariants = {
     info: "info",
     success: "success",
@@ -9,6 +9,10 @@ export const tagVariants = {
     neutral: "neutral",
 };
 export const Tag = ({ children, className, variant = "info", ...divProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName("af-tag", className, variant), [className, variant]);
+    const componentClassName = useMemo(() => getClassName({
+        baseClassName: "af-tag",
+        className,
+        modifiers: [variant],
+    }), [className, variant]);
     return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
 };

package/dist/prospect-client/TagList/TagListApollo.d.ts

@@ -0,0 +1,4 @@
+import { type TagListProps as TagListCommonProps } from "./TagListCommon";
+import "@axa-fr/canopee-css/prospect/TagList/TagListAll.css";
+export type TagListProps = Omit<TagListCommonProps, "OverflowTag">;
+export declare const TagList: (props: TagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/TagList/TagListApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from "../Tag/TagCommon";
+import { TagListCommon, } from "./TagListCommon";
+import "@axa-fr/canopee-css/prospect/TagList/TagListAll.css";
+export const TagList = (props) => (_jsx(TagListCommon, { ...props, OverflowTag: Tag }));

package/dist/prospect-client/TagList/TagListCommon.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentType, type ReactNode } from "react";
+export type TagListProps = {
+    children: ReactNode;
+    hideThreshold?: number;
+    className?: string;
+    OverflowTag: ComponentType<{
+        children: ReactNode;
+    }>;
+};
+export declare const TagListCommon: ({ children, hideThreshold, className, OverflowTag, }: TagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/TagList/TagListCommon.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, } from "react";
+import { getClassName } from "../utilities/getClassName";
+export const TagListCommon = ({ children, hideThreshold = 2, className = "", OverflowTag, }) => {
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const total = childArray.length;
+    const isOverflowing = total > hideThreshold;
+    const visibleChildren = isOverflowing
+        ? childArray.slice(0, hideThreshold)
+        : childArray;
+    const hiddenCount = total - hideThreshold;
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-tag-list",
+            className,
+        }), children: [visibleChildren, isOverflowing ? _jsxs(OverflowTag, { children: ["+", hiddenCount] }) : null] }));
+};

package/dist/prospect-client/TagList/TagListLF.d.ts

@@ -0,0 +1,4 @@
+import { type TagListProps as TagListCommonProps } from "./TagListCommon";
+import "@axa-fr/canopee-css/client/TagList/TagListAll.css";
+export type TagListProps = Omit<TagListCommonProps, "OverflowTag">;
+export declare const TagList: (props: TagListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/TagList/TagListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from "../Tag/TagCommon";
+import { TagListCommon, } from "./TagListCommon";
+import "@axa-fr/canopee-css/client/TagList/TagListAll.css";
+export const TagList = (props) => (_jsx(TagListCommon, { ...props, OverflowTag: Tag }));

package/dist/prospect-client/Toggle/ToggleCommon.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import check from "@material-symbols/svg-400/rounded/check.svg";
 import close from "@material-symbols/svg-400/rounded/close.svg";
 import { useId } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const ToggleCommon = ({ className, IconComponent, ...inputProps }) => {
     let inputId = useId();
     inputId = inputProps.id ?? inputId;
-    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, type: "checkbox", id: inputId })] }));
+    return (_jsxs("label", { className: getClassName({ baseClassName: "af-toggle", className }), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, type: "checkbox", id: inputId })] }));
 };
 ToggleCommon.displayName = "ToggleCommon";

package/dist/prospect.d.ts

@@ -5,9 +5,10 @@ import "@fontsource/source-sans-pro";
 export { Accordion, accordionVariants, type AccordionVariants, } from "./prospect-client/Accordion/AccordionApollo";
 export { AccordionContextual, accordionContextualVariants, type AccordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualApollo";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreApollo";
+export { AppName, type AppNameProps } from "./prospect-client/AppName/AppName";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
 export { Button, buttonVariants, type ButtonVariants, } from "./prospect-client/Button/ButtonApollo";
-export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
+export { Card, cardVariants, type CardProps, type CardVariants, } from "./prospect-client/Card/CardApollo";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./prospect-client/CardMessage/CardMessageApollo";
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconApollo";
 export { ContentItemDuoAction, type ContentItemDuoActionState, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionApollo";
@@ -15,9 +16,7 @@ export { ContentItemMono } from "./prospect-client/ContentItemMono/ContentItemMo
 export { DataAgent, type DataAgentProps, } from "./prospect-client/DataAgent/DataAgentApollo";
 export { Divider } from "./prospect-client/Divider/DividerApollo";
 export { Fieldset, type FieldsetProps, } from "./prospect-client/Fieldset/FieldsetApollo";
-export { CardCheckbox, 
-/** @deprecated Use `CardCheckbox` instead. */
-CardCheckbox as CheckboxCard, } from "./prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxApollo";
+export { CardCheckbox } from "./prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxApollo";
 export { CardCheckboxOption } from "./prospect-client/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo";
 export { Checkbox } from "./prospect-client/Form/Checkbox/Checkbox/CheckboxApollo";
 export { CheckboxText } from "./prospect-client/Form/Checkbox/CheckboxText/CheckboxTextApollo";
@@ -32,6 +31,8 @@ export { InputText } from "./prospect-client/Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomApollo";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageApollo";
+export { ItemMultiSelect, type ItemMultiSelectProps, } from "./prospect-client/Form/ItemMultiSelect/ItemMultiSelectApollo";
+export { MultiSelectList, type MultiSelectListProps, } from "./prospect-client/Form/MultiSelectList/MultiSelectListApollo";
 export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioApollo";
 export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioApollo";
@@ -39,11 +40,13 @@ export { RadioText, type RadioTextProps, } from "./prospect-client/Form/Radio/Ra
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaApollo";
 export { DebugGrid } from "./prospect-client/Grid/DebugGridApollo";
 export { Heading, type HeadingLevel, type HeadingProps, } from "./prospect-client/Heading/HeadingApollo";
+export { Header, type HeaderProps, } from "./prospect-client/Header/HeaderApollo";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./prospect-client/Icon/IconApollo";
 export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
 export { ItemMenu, type ItemMenuProps, } from "./prospect-client/ItemMenu/ItemMenuApollo";
+export { MenuBurger, type MenuBurgerProps, } from "./prospect-client/MenuBurger/MenuBurgerApollo";
 export { TabMenu, type TabMenuProps } from "./prospect-client/TabMenu/TabMenu";
-export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
+export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
 export { Footer, type FooterProps, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { FormLayout, type FormLayoutProps, } from "./prospect-client/Layout/FormLayout/FormLayout";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
@@ -61,7 +64,8 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Pagination } from "./prospect-client/Pagination/PaginationApollo";
 export { ProgressBar } from "./prospect-client/ProgressBar/ProgressBarApollo";
 export { ProgressBarGroup } from "./prospect-client/ProgressBarGroup/ProgressBarGroupApollo";
-export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { Skeleton, skeletonSizeVariants, skeletonVariants, type SkeletonActionSizeVariant, type SkeletonCircleSizeVariant, type SkeletonProps, type SkeletonSizeVariant, type SkeletonVariant, } from "./prospect-client/Skeleton/Skeleton";
+export { SkeletonGrid, type SkeletonGridProps, } from "./prospect-client/SkeletonGrid/SkeletonGrid";
 export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListApollo";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./prospect-client/Spinner/SpinnerApollo";
 export { Stepper } from "./prospect-client/Stepper/StepperApollo";
@@ -70,6 +74,7 @@ export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from
 export { Table, type BodyColorVariants, type HeadColorVariants, type RowSizeVariants, type TableProps, } from "./prospect-client/Table/TableApollo";
 export { TableMobileCard } from "./prospect-client/TableMobileCard/TableMobileCard";
 export { Tag, tagVariants, type TagVariants, } from "./prospect-client/Tag/TagApollo";
+export { TagList, type TagListProps, } from "./prospect-client/TagList/TagListApollo";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export type { GridContainerProps } from "./prospect-client/utilities/types/GridContainerProps";