@axa-fr/canopee-react 2.0.0-alpha.23 → 2.0.0-alpha.26

package/dist/client.d.ts

@@ -51,7 +51,7 @@ export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/
 export { ItemMenu, type ItemMenuProps, } from "./prospect-client/ItemMenu/ItemMenuLF";
 export { MenuBurger, type MenuBurgerProps, } from "./prospect-client/MenuBurger/MenuBurgerLF";
 export { TabMenu, type TabMenuProps } from "./prospect-client/TabMenu/TabMenu";
-export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
+export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
 export { Footer, type FooterProps, } from "./prospect-client/Layout/Footer/FooterLF";
 export { FormLayout, type FormLayoutProps, } from "./prospect-client/Layout/FormLayout/FormLayout";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorLF";
@@ -69,7 +69,8 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";
 export { ProgressBar } from "./prospect-client/ProgressBar/ProgressBarLF";
 export { ProgressBarGroup } from "./prospect-client/ProgressBarGroup/ProgressBarGroupLF";
-export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonLF";
+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/SkeletonListLF";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./prospect-client/Spinner/SpinnerLF";
 export { Stepper } from "./prospect-client/Stepper/StepperLF";

package/dist/client.js

@@ -51,7 +51,7 @@ export { ItemTabBar, } from "./prospect-client/ItemTabBar/ItemTabBarLF";
 export { ItemMenu, } from "./prospect-client/ItemMenu/ItemMenuLF";
 export { MenuBurger, } from "./prospect-client/MenuBurger/MenuBurgerLF";
 export { TabMenu } from "./prospect-client/TabMenu/TabMenu";
-export { ExitLayout, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
+export { ExitLayout, ExitLayoutSkeleton, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
 export { Footer, } from "./prospect-client/Layout/Footer/FooterLF";
 export { FormLayout, } from "./prospect-client/Layout/FormLayout/FormLayout";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorLF";
@@ -69,7 +69,8 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";
 export { ProgressBar } from "./prospect-client/ProgressBar/ProgressBarLF";
 export { ProgressBarGroup } from "./prospect-client/ProgressBarGroup/ProgressBarGroupLF";
-export { Skeleton, } from "./prospect-client/Skeleton/SkeletonLF";
+export { Skeleton, skeletonSizeVariants, skeletonVariants, } from "./prospect-client/Skeleton/Skeleton";
+export { SkeletonGrid, } from "./prospect-client/SkeletonGrid/SkeletonGrid";
 export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListLF";
 export { Spinner, spinnerVariants, } from "./prospect-client/Spinner/SpinnerLF";
 export { Stepper } from "./prospect-client/Stepper/StepperLF";

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioCommon.d.ts

@@ -22,7 +22,7 @@ export type CardRadioCommonProps = CardRadioProps & {
     IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
 };
 export declare const CardRadioCommon: {
-    ({ label, position, type, description, subtitle, icon, src, basePictureProps, isInvalid, className, RadioComponent, IconComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, position, type, description, subtitle, icon, src, basePictureProps, variant, className, RadioComponent, IconComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioCommon.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "react";
 import { BasePicture } from "../../../BasePicture/BasePicture";
 import { getClassName } from "../../../utilities/getClassName";
-export const CardRadioCommon = ({ label, position, type, description, subtitle, icon, src, basePictureProps, isInvalid, className, RadioComponent, IconComponent, ...inputProps }) => {
+export const CardRadioCommon = ({ label, position, type, description, subtitle, icon, src, basePictureProps, variant, className, RadioComponent, IconComponent, ...inputProps }) => {
     const isCardRadioHorizontal = [position, type].includes("horizontal");
     return (_jsxs("label", { className: getClassName({
             baseClassName: "af-card-radio",
             modifiers: [
-                isInvalid && "invalid",
+                variant === "error" && "invalid",
                 isCardRadioHorizontal && "horizontal",
             ],
             className,
-        }), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, isCardRadioHorizontal && src ? (_jsx(BasePicture, { src: src, ...basePictureProps })) : null, _jsxs("div", { className: "af-card-radio__content", children: [_jsx("p", { className: "af-card-radio__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-radio__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-radio__subtitle", children: subtitle }))] }), _jsx(RadioComponent, { ...inputProps, isInvalid: isInvalid })] }));
+        }), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, isCardRadioHorizontal && src ? (_jsx(BasePicture, { src: src, ...basePictureProps })) : null, _jsxs("div", { className: "af-card-radio__content", children: [_jsx("p", { className: "af-card-radio__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-radio__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-radio__subtitle", children: subtitle }))] }), _jsx(RadioComponent, { ...inputProps, variant: variant })] }));
 };
 CardRadioCommon.displayName = "CardRadioCommon";

package/dist/prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupCommon.d.ts

@@ -2,8 +2,8 @@ import { type ComponentProps, type ComponentType, type PropsWithChildren, type R
 import type { GridContainerProps } from "../../../utilities/types/GridContainerProps";
 import { ItemMessage, type ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
 import { type CardRadioProps } from "../CardRadio/CardRadioCommon";
-type RadioOption = Omit<CardRadioProps, "name" | "type" | "isInvalid">;
-export type CardRadioGroupProps = Omit<CardRadioProps, "value" | "label" | "type" | "isInvalid" | "icon" | "src" | "basePictureProps" | "description" | "subtitle" | "children" | "position"> & {
+type RadioOption = Omit<CardRadioProps, "name" | "type" | "variant">;
+export type CardRadioGroupProps = Omit<CardRadioProps, "value" | "label" | "type" | "variant" | "icon" | "src" | "basePictureProps" | "description" | "subtitle" | "children" | "position"> & {
     /**
      * @deprecated Use `position` and `cardStyle` instead.
      */

package/dist/prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupCommon.js

@@ -12,7 +12,7 @@ const CardRadioGroupCommon = ({ className, labelGroup, descriptionGroup, label,
                     `af-card-radio-group__options--${position}`,
                 ].join(" "), children: options.map((cardRadioItemProps) => (_jsx(CardRadioComponent, { id: `${cardRadioGroupId}-${cardRadioItemProps.value}`, checked: value !== undefined
                         ? value === cardRadioItemProps.value
-                        : undefined, required: required, position: cardStyle ?? type, ...inputProps, ...cardRadioItemProps, isInvalid: hasError, name: name }, `${name ?? cardRadioGroupId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+                        : undefined, required: required, position: cardStyle ?? type, ...inputProps, ...cardRadioItemProps, variant: hasError ? "error" : undefined, name: name }, `${name ?? cardRadioGroupId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
 };
 CardRadioGroupCommon.displayName = "CardRadioGroupCommon";
 export { CardRadioGroupCommon };

package/dist/prospect-client/Form/Radio/Radio/RadioCommon.d.ts

@@ -1,8 +1,5 @@
 import { type ComponentProps } from "react";
 export type RadioProps = Omit<ComponentProps<"input">, "disabled" | "type"> & {
-    isInvalid?: boolean;
-};
-export declare const Radio: {
-    ({ className, isInvalid, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+    variant?: "error" | "warning";
 };
+export declare const Radio: ({ variant, className, ref, ...inputProps }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/Radio/RadioCommon.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "react";
-export const Radio = ({ className, isInvalid, ...props }) => (_jsx("input", { ...props, className: ["af-radio", isInvalid && "af-radio--invalid", className]
-        .filter(Boolean)
-        .join(" "), type: "radio" }));
-Radio.displayName = "Radio";
+import { getClassName } from "../../../utilities/getClassName";
+export const Radio = ({ variant, className, ref, ...inputProps }) => (_jsx("input", { ...inputProps, className: getClassName({
+        baseClassName: "af-radio",
+        modifiers: [variant],
+        className,
+    }), ref: ref, type: "radio" }));

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutApollo.d.ts

@@ -1,5 +1,17 @@
 import { type ExitLayoutProps } from "./ExitLayoutCommon";
 export { type ExitLayoutWithSubComponents, type ExitLayoutProps, } from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./ExitLayoutSkeleton";
+/**
+ * Apollo-themed `ExitLayout` component with `Agent`, `Action`, and `Content`
+ * static slots.
+ *
+ * @component
+ * @param {ExitLayoutProps} props - ExitLayout props.
+ * @param {HeadingProps} [props.headingProps] - Props forwarded to the heading displayed in the content column.
+ * @param {Pick<IconProps, "variant" | "src" | "hasBackground">} [props.iconProps] - Props forwarded to the icon displayed in the content column.
+ * @param {React.ReactNode} [props.children] - Slots composed with `ExitLayout.Content`, `ExitLayout.Agent`, and `ExitLayout.Action`.
+ * @returns {JSX.Element} The rendered Apollo-themed ExitLayout.
+ */
 export declare const ExitLayout: {
     (props: ExitLayoutProps): import("react/jsx-runtime").JSX.Element;
     Agent: ({ children }: import("react").PropsWithChildren) => (string | number | bigint | 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> | {

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutApollo.js

@@ -3,6 +3,18 @@ import { Heading } from "../../Heading/HeadingApollo";
 import { Icon } from "../../Icon/IconApollo";
 import { Agent, Action, Content, ExitLayoutCommon, } from "./ExitLayoutCommon";
 export {} from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, } from "./ExitLayoutSkeleton";
+/**
+ * Apollo-themed `ExitLayout` component with `Agent`, `Action`, and `Content`
+ * static slots.
+ *
+ * @component
+ * @param {ExitLayoutProps} props - ExitLayout props.
+ * @param {HeadingProps} [props.headingProps] - Props forwarded to the heading displayed in the content column.
+ * @param {Pick<IconProps, "variant" | "src" | "hasBackground">} [props.iconProps] - Props forwarded to the icon displayed in the content column.
+ * @param {React.ReactNode} [props.children] - Slots composed with `ExitLayout.Content`, `ExitLayout.Agent`, and `ExitLayout.Action`.
+ * @returns {JSX.Element} The rendered Apollo-themed ExitLayout.
+ */
 export const ExitLayout = (props) => (_jsx(ExitLayoutCommon, { ...props, HeadingComponent: Heading, IconComponent: Icon }));
 ExitLayout.Agent = Agent;
 ExitLayout.Action = Action;

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutLF.d.ts

@@ -1,5 +1,17 @@
 import { type ExitLayoutProps } from "./ExitLayoutCommon";
 export { type ExitLayoutWithSubComponents, type ExitLayoutProps, } from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./ExitLayoutSkeleton";
+/**
+ * Look and Feel-themed `ExitLayout` component with `Agent`, `Action`, and
+ * `Content` static slots.
+ *
+ * @component
+ * @param {ExitLayoutProps} props - ExitLayout props.
+ * @param {HeadingProps} [props.headingProps] - Props forwarded to the heading displayed in the content column.
+ * @param {Pick<IconProps, "variant" | "src" | "hasBackground">} [props.iconProps] - Props forwarded to the icon displayed in the content column.
+ * @param {React.ReactNode} [props.children] - Slots composed with `ExitLayout.Content`, `ExitLayout.Agent`, and `ExitLayout.Action`.
+ * @returns {JSX.Element} The rendered Look and Feel ExitLayout.
+ */
 export declare const ExitLayout: {
     (props: ExitLayoutProps): import("react/jsx-runtime").JSX.Element;
     Agent: ({ children }: import("react").PropsWithChildren) => (string | number | bigint | 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> | {

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutLF.js

@@ -3,6 +3,18 @@ import { Heading } from "../../Heading/HeadingLF";
 import { Icon } from "../../Icon/IconLF";
 import { Agent, Action, Content, ExitLayoutCommon, } from "./ExitLayoutCommon";
 export {} from "./ExitLayoutCommon";
+export { ExitLayoutSkeleton, } from "./ExitLayoutSkeleton";
+/**
+ * Look and Feel-themed `ExitLayout` component with `Agent`, `Action`, and
+ * `Content` static slots.
+ *
+ * @component
+ * @param {ExitLayoutProps} props - ExitLayout props.
+ * @param {HeadingProps} [props.headingProps] - Props forwarded to the heading displayed in the content column.
+ * @param {Pick<IconProps, "variant" | "src" | "hasBackground">} [props.iconProps] - Props forwarded to the icon displayed in the content column.
+ * @param {React.ReactNode} [props.children] - Slots composed with `ExitLayout.Content`, `ExitLayout.Agent`, and `ExitLayout.Action`.
+ * @returns {JSX.Element} The rendered Look and Feel ExitLayout.
+ */
 export const ExitLayout = (props) => (_jsx(ExitLayoutCommon, { ...props, HeadingComponent: Heading, IconComponent: Icon }));
 ExitLayout.Agent = Agent;
 ExitLayout.Action = Action;

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutSkeleton.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Props controlling which placeholder areas are displayed in `ExitLayoutSkeleton`.
+ */
+export type ExitLayoutSkeletonProps = {
+    hasAgent?: boolean;
+    hasIcon?: boolean;
+    hasAction?: boolean;
+    hasContent?: boolean;
+    hasHeading?: boolean;
+};
+/**
+ * Renders skeleton placeholders matching the visual structure of `ExitLayout`.
+ *
+ * @component
+ * @param {ExitLayoutSkeletonProps} props - ExitLayoutSkeleton props.
+ * @param {boolean} [props.hasAgent] - Displays the agent placeholder block.
+ * @param {boolean} [props.hasIcon] - Displays the icon placeholder.
+ * @param {boolean} [props.hasAction] - Displays the action area placeholder.
+ * @param {boolean} [props.hasContent] - Displays the main content placeholder.
+ * @param {boolean} [props.hasHeading] - Displays the heading placeholder.
+ * @returns {JSX.Element} The rendered ExitLayoutSkeleton component.
+ */
+export declare const ExitLayoutSkeleton: ({ hasAgent, hasIcon, hasAction, hasContent, hasHeading, }: ExitLayoutSkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Layout/ExitLayout/ExitLayoutSkeleton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../Skeleton/Skeleton";
+/**
+ * Renders skeleton placeholders matching the visual structure of `ExitLayout`.
+ *
+ * @component
+ * @param {ExitLayoutSkeletonProps} props - ExitLayoutSkeleton props.
+ * @param {boolean} [props.hasAgent] - Displays the agent placeholder block.
+ * @param {boolean} [props.hasIcon] - Displays the icon placeholder.
+ * @param {boolean} [props.hasAction] - Displays the action area placeholder.
+ * @param {boolean} [props.hasContent] - Displays the main content placeholder.
+ * @param {boolean} [props.hasHeading] - Displays the heading placeholder.
+ * @returns {JSX.Element} The rendered ExitLayoutSkeleton component.
+ */
+export const ExitLayoutSkeleton = ({ hasAgent, hasIcon, hasAction, hasContent, hasHeading, }) => {
+    return (_jsxs("section", { className: "af-exit-page subgrid", children: [_jsxs("article", { className: "af-exit-page__content subgrid", children: [hasIcon ? _jsx(Skeleton, { variant: "circle", size: "L" }) : null, hasHeading ? _jsx(Skeleton, { colSize: 12 }) : null, hasContent ? _jsx(Skeleton, { size: "XL", colSize: 12 }) : null] }), hasAgent ? (_jsx(Skeleton, { className: "af-exit-page__agent", size: "XXL", colSize: 12 })) : null, hasAction ? (_jsx("div", { className: "af-exit-page__actions subgrid", children: _jsx(Skeleton, { variant: "action", colSize: 12 }) })) : null] }));
+};

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.d.ts

@@ -47,7 +47,7 @@ export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/
 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";
@@ -65,7 +65,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";

package/dist/prospect.js

@@ -47,7 +47,7 @@ export { ItemTabBar, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
 export { ItemMenu, } from "./prospect-client/ItemMenu/ItemMenuApollo";
 export { MenuBurger, } from "./prospect-client/MenuBurger/MenuBurgerApollo";
 export { TabMenu } from "./prospect-client/TabMenu/TabMenu";
-export { ExitLayout, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
+export { ExitLayout, ExitLayoutSkeleton, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
 export { Footer, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { FormLayout, } from "./prospect-client/Layout/FormLayout/FormLayout";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
@@ -65,7 +65,8 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Pagination } from "./prospect-client/Pagination/PaginationApollo";
 export { ProgressBar } from "./prospect-client/ProgressBar/ProgressBarApollo";
 export { ProgressBarGroup } from "./prospect-client/ProgressBarGroup/ProgressBarGroupApollo";
-export { Skeleton, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { Skeleton, skeletonSizeVariants, skeletonVariants, } from "./prospect-client/Skeleton/Skeleton";
+export { SkeletonGrid, } from "./prospect-client/SkeletonGrid/SkeletonGrid";
 export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListApollo";
 export { Spinner, spinnerVariants, } from "./prospect-client/Spinner/SpinnerApollo";
 export { Stepper } from "./prospect-client/Stepper/StepperApollo";

package/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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