@axa-fr/design-system-look-and-feel-react 0.1.1

package/dist/Layout/Footer/MenuLink.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { BREAKPOINT, useIsSmallScreen } from "../../utilities";
+export const MenuLink = ({ links, isAboutOpen = false }) => {
+    const isSmallScreen = useIsSmallScreen(BREAKPOINT.MD);
+    if (links.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: classNames("af-footer__menuLinks", isAboutOpen && "af-footer__menuLinks--display"), children: links.map((menuItem) => (_jsx("a", { className: "af-footer__linkItem", href: menuItem.link, target: menuItem.openInCurrentTab ? "_top" : "_blank", rel: "noreferrer", tabIndex: isSmallScreen && !isAboutOpen ? -1 : undefined, children: menuItem.text }, menuItem.text))) }));
+};

package/dist/Layout/Header/Header.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
+import { ComponentPropsWithoutRef } from "react";
+type HeaderProps = {
+    defaultActiveLink?: number;
+    previousLink?: JSX.Element;
+    rightItem?: JSX.Element[];
+} & ComponentPropsWithoutRef<"header">;
+export declare const Header: ({ children, defaultActiveLink, previousLink, rightItem, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Layout/Header/Header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
+import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
+import { useCallback, useState } from "react";
+import { NavBar } from "./NavBar";
+import { PreviousLink } from "./PreviousLink/PreviousLink";
+export const Header = ({ children, defaultActiveLink, previousLink, rightItem, }) => {
+    const [activeLink, setActiveLink] = useState(defaultActiveLink);
+    const resetActiveLink = useCallback(() => setActiveLink(defaultActiveLink), [defaultActiveLink]);
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "af-header", children: _jsxs("div", { className: "af-header-container", children: [_jsxs("div", { className: "af-header-left-item", children: [_jsx("img", { className: "af-logo", src: logo, alt: "" }), children && (_jsx(NavBar, { activeLink: activeLink, setActiveLink: setActiveLink, children: children }))] }), rightItem && _jsx("div", { className: "af-header-right-item", children: rightItem })] }) }), previousLink && (_jsx(PreviousLink, { handleClick: resetActiveLink, children: previousLink }))] }));
+};

package/dist/Layout/Header/NavBar/NavBar.d.ts

@@ -0,0 +1,8 @@
+import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
+type NavBarProps = {
+    activeLink?: number;
+    setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+} & ComponentPropsWithoutRef<"nav">;
+declare const NavBar: ({ activeLink, children, setActiveLink, ...otherProps }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element;
+export { NavBar };

package/dist/Layout/Header/NavBar/NavBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { isValidElement, useMemo, } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
+const NavBar = ({ activeLink, children, setActiveLink, ...otherProps }) => {
+    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: React.Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: React.cloneElement(child, {
+                    className: `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
+                    onClick: () => setActiveLink(index),
+                    onFocus: () => setActiveLink(index),
+                    role: "menuitem",
+                }) }))) }) }));
+};
+export { NavBar };

package/dist/Layout/Header/NavBar/index.d.ts

@@ -0,0 +1 @@
+export { NavBar } from "./NavBar";

package/dist/Layout/Header/NavBar/index.js

@@ -0,0 +1 @@
+export { NavBar } from "./NavBar";

package/dist/Layout/Header/PreviousLink/PreviousLink.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/PreviousLink/PreviousLink.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+type PreviousLinkProps = {
+    handleClick: () => void;
+} & ComponentPropsWithoutRef<"div">;
+declare const PreviousLink: ({ handleClick, children, ...otherProps }: PropsWithChildren<PreviousLinkProps>) => import("react/jsx-runtime").JSX.Element;
+export { PreviousLink };

package/dist/Layout/Header/PreviousLink/PreviousLink.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import arrowBack from "@material-symbols/svg-400/outlined/arrow_back.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/PreviousLink/PreviousLink.scss";
+import React, { isValidElement, useMemo, } from "react";
+import { Svg } from "../../../Svg";
+const PreviousLink = ({ handleClick, children, ...otherProps }) => {
+    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    return (_jsx("div", { className: "af-header-previous-link-container", ...otherProps, children: React.Children.map(validChildren, (child) => React.cloneElement(child, {
+            children: (_jsxs(_Fragment, { children: [_jsx(Svg, { className: "af-header-previous-link__icon", src: arrowBack }), _jsx("span", { className: "af-header-previous-link__text", children: child.props.children })] })),
+            className: "af-header-previous-link",
+            onClick: handleClick,
+        })) }));
+};
+export { PreviousLink };

package/dist/Layout/Header/PreviousLink/index.d.ts

@@ -0,0 +1 @@
+export { PreviousLink } from "./PreviousLink";

package/dist/Layout/Header/PreviousLink/index.js

@@ -0,0 +1 @@
+export { PreviousLink } from "./PreviousLink";

package/dist/Layout/Header/index.d.ts

@@ -0,0 +1 @@
+export { Header } from "./Header";

package/dist/Layout/Header/index.js

@@ -0,0 +1 @@
+export { Header } from "./Header";

package/dist/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Link/Link.scss";
+type LinkProps = {
+    openInNewTab?: boolean;
+} & ComponentPropsWithoutRef<"a">;
+export declare const Link: ({ href, openInNewTab, children, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Link/Link.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Link/Link.scss";
+import openInNew from "@material-symbols/svg-400/outlined/open_in_new.svg";
+import { Svg } from "../Svg";
+export const Link = ({ href, openInNewTab, children, ...props }) => {
+    const newTabProps = openInNewTab && {
+        target: "_blank",
+        rel: "noopener noreferrer",
+    };
+    return (_jsxs("a", { className: `af-link ${openInNewTab ? " af-link--openInNewTab" : ""}`, href: href, ...newTabProps, ...props, children: [children, newTabProps && _jsx(Svg, { src: openInNew })] }));
+};

package/dist/List/ClickList/ClickItem/ClickItem.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps, type ReactNode } from "react";
+type TClickItem = {
+    classModifier?: string;
+    isDisabled?: boolean;
+} & Omit<ComponentProps<"button">, "disabled"> & ComponentProps<"a"> & {
+    label?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+};
+export declare const ClickItem: ({ label, children, icon, href, isDisabled, className, classModifier, ...otherProps }: TClickItem) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ClickList/ClickItem/ClickItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import chevron from "@material-symbols/svg-400/outlined/chevron_right.svg";
+import { useMemo } from "react";
+import { Svg } from "../../../Svg";
+import { getComponentClassName } from "../../../utilities";
+export const ClickItem = ({ label, children, icon, href, isDisabled = false, className, classModifier = "", ...otherProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
+    const ClickComponent = useMemo(() => (href ? "a" : "button"), [href]);
+    const clickComponentProps = useMemo(() => href
+        ? { href, "aria-disabled": isDisabled, ...otherProps }
+        : {
+            type: "button",
+            disabled: isDisabled,
+            ...otherProps,
+        }, [isDisabled, href, otherProps]);
+    return (_jsxs(ClickComponent, { className: componentClassName, ...clickComponentProps, children: [_jsxs("div", { className: "af-click-item__content", children: [icon && _jsx("div", { className: "af-click-item__icon", children: icon }), _jsx("div", { className: "af-click-item__label", children: children || label })] }), _jsx("div", { className: "af-click-item__action", children: _jsx(Svg, { src: chevron }) })] }));
+};

package/dist/List/ClickList/ClickItem/index.d.ts

@@ -0,0 +1 @@
+export { ClickItem } from "./ClickItem";

package/dist/List/ClickList/ClickItem/index.js

@@ -0,0 +1 @@
+export { ClickItem } from "./ClickItem";

package/dist/List/ClickList/ClickList.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import { ClickItem } from "./ClickItem";
+type TClickList = {
+    items: Array<ComponentProps<typeof ClickItem>>;
+    classModifier?: string;
+};
+export declare const ClickList: ({ items, classModifier }: TClickList) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ClickList/ClickList.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "..";
+import { ClickItem } from "./ClickItem";
+export const ClickList = ({ items, classModifier }) => (_jsx(List, { classModifier: `click-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, ...props }) => (_jsx(ClickItem, { id: id, ...props }, id))) }));

package/dist/List/ClickList/index.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+export { ClickItem } from "./ClickItem";
+export { ClickList } from "./ClickList";

package/dist/List/ClickList/index.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ClickList/ClickList.scss";
+export { ClickItem } from "./ClickItem";
+export { ClickList } from "./ClickList";

package/dist/List/ContentItemDuo/ContentItemDuo.d.ts

@@ -0,0 +1,13 @@
+type ContentItemDuoProps = {
+    label: string;
+    value: string;
+    isVertical?: boolean;
+    className?: string;
+    classModifier?: string;
+    isShowingDoneIcon?: boolean;
+    isShowingCloseIcon?: boolean;
+    buttonText?: string;
+    onButtonClick?: () => void;
+};
+export declare const ContentItemDuo: ({ label, value, isVertical, className, classModifier, isShowingDoneIcon, isShowingCloseIcon, buttonText, onButtonClick, }: ContentItemDuoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import checkIcon from "@material-symbols/svg-400/outlined/check.svg";
+import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
+import { useMemo } from "react";
+import { Variants } from "../../Button/Button";
+import { getComponentClassName } from "../../utilities";
+import { Button, Svg } from "../..";
+export const ContentItemDuo = ({ label, value, isVertical = false, className, classModifier, isShowingDoneIcon = false, isShowingCloseIcon = false, buttonText, onButtonClick, }) => {
+    const componentClassName = useMemo(() => {
+        const classModifiers = [classModifier];
+        if (isVertical) {
+            classModifiers.push("vertical");
+        }
+        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-duo");
+    }, [classModifier, className, isVertical]);
+    const iconContainerModifier = useMemo(() => ` af-content-item-duo__icon--${isShowingDoneIcon ? "done" : "close"}`, [isShowingDoneIcon]);
+    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), _jsx("p", { className: "af-content-item-duo__value", children: value }), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: Variants.ghost, onClick: onButtonClick, children: buttonText }) }))] }));
+};

package/dist/List/ContentItemDuo/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemDuo/ContentItemDuo.scss";
+export { ContentItemDuo } from "./ContentItemDuo";

package/dist/List/ContentItemDuo/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemDuo/ContentItemDuo.scss";
+export { ContentItemDuo } from "./ContentItemDuo";

package/dist/List/ContentItemMono/ContentItemMono.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { ContentItemMonoSize } from "./constants";
+type ContentItemMonoProps = {
+    children: ReactNode;
+    className?: string;
+    classModifier?: string;
+    secondaryText?: string;
+    tertiaryText?: string;
+    leftElement?: ReactNode;
+    size?: ContentItemMonoSize;
+    isDisabled?: boolean;
+    isLeftElementCentered?: boolean;
+    hasStick?: boolean;
+};
+export declare const ContentItemMono: ({ children, className, classModifier, secondaryText, tertiaryText, leftElement, size, isDisabled, isLeftElementCentered, hasStick, }: ContentItemMonoProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentItemMono/ContentItemMono.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../../utilities";
+import { ContentItemMonoSize } from "./constants";
+export const ContentItemMono = ({ children, className, classModifier, secondaryText, tertiaryText, leftElement, size = ContentItemMonoSize.M, isDisabled = false, isLeftElementCentered = false, hasStick = false, }) => {
+    const componentClassName = useMemo(() => {
+        const classModifiers = [size, classModifier];
+        if (isDisabled) {
+            classModifiers.push("disabled");
+        }
+        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-mono");
+    }, [classModifier, isDisabled, size, className]);
+    return (_jsxs("div", { className: componentClassName, children: [hasStick && (_jsx("div", { className: "af-content-item-mono__stick", role: "presentation" })), leftElement && (_jsx("div", { className: `af-content-item-mono__left-container${isLeftElementCentered
+                    ? " af-content-item-mono__left-container--center"
+                    : ""}`, children: leftElement })), _jsxs("div", { className: "af-content-item-mono__text-container", children: [_jsx("p", { className: "af-content-item-mono__main-text", children: children }), secondaryText && (_jsx("p", { className: "af-content-item-mono__secondary-text", children: secondaryText })), tertiaryText && size !== ContentItemMonoSize.XL && (_jsx("p", { className: "af-content-item-mono__tertiary-text", children: tertiaryText }))] })] }));
+};

package/dist/List/ContentItemMono/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ContentItemMonoSize {
+    XL = "xl",
+    M = "m"
+}

package/dist/List/ContentItemMono/constants.js

@@ -0,0 +1,5 @@
+export var ContentItemMonoSize;
+(function (ContentItemMonoSize) {
+    ContentItemMonoSize["XL"] = "xl";
+    ContentItemMonoSize["M"] = "m";
+})(ContentItemMonoSize || (ContentItemMonoSize = {}));

package/dist/List/ContentItemMono/index.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemMono/ContentItemMono.scss";
+export { ContentItemMonoSize } from "./constants";
+export { ContentItemMono } from "./ContentItemMono";

package/dist/List/ContentItemMono/index.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemMono/ContentItemMono.scss";
+export { ContentItemMonoSize } from "./constants";
+export { ContentItemMono } from "./ContentItemMono";

package/dist/List/ContentTabList/ContentTabItem/ContentTabItem.d.ts

@@ -0,0 +1,6 @@
+import type { TContentTabItem } from "./types";
+type TContentTabItemProps = TContentTabItem & {
+    isMobile?: boolean;
+};
+export declare const ContentTabItem: ({ title, subtitle, tag, tagProps, date, buttons, value, isMobile, }: TContentTabItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentTabList/ContentTabItem/ContentTabItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Tag } from "../../..";
+export const ContentTabItem = ({ title, subtitle, tag, tagProps, date, buttons = [], value, isMobile = false, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-list-item__left-container", children: [Boolean(value) && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] })), _jsxs("div", { className: "af-list-item__label", children: [_jsx("span", { className: "af-list-item-label__title", children: title }), Boolean(subtitle) && (_jsx("span", { className: "af-list-item-label__subtitle", children: subtitle }))] }), !value && isMobile && (Boolean(tag) || Boolean(date)) && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && _jsx("span", { className: "af-list-item__date", children: date })] }))] }), (buttons.length > 0 ||
+            Boolean(tag) ||
+            Boolean(date) ||
+            Boolean(value)) && (_jsxs("div", { className: "af-list-item__right-container", children: [!value && (Boolean(tag) || Boolean(date)) && !isMobile && (_jsxs("div", { className: "af-list-item__additional-data-container", children: [Boolean(tag) && (_jsx(Tag, { classModifier: "warning", ...tagProps, children: tag })), Boolean(date) && (_jsx("span", { className: "af-list-item__date", children: date }))] })), buttons.map((button) => (_jsx("div", { className: "af-list-item__button-container", children: _jsx(Button, { ...button }) }, button?.id))), Boolean(value) && _jsx("span", { className: "af-list-item__value", children: value })] }))] }));

package/dist/List/ContentTabList/ContentTabItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentTabItem } from "./ContentTabItem";
+export type { TContentTabItem } from "./types";

package/dist/List/ContentTabList/ContentTabItem/index.js

@@ -0,0 +1 @@
+export { ContentTabItem } from "./ContentTabItem";

package/dist/List/ContentTabList/ContentTabList.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentTabList/ContentTabList.scss";
+import { type TContentTabItem } from "./ContentTabItem";
+type ContentTabListProps = {
+    items: TContentTabItem[];
+    classModifier?: string;
+};
+export declare const ContentTabList: ({ items, classModifier, }: ContentTabListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/ContentTabList/ContentTabList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from "../List";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentTabList/ContentTabList.scss";
+import { BREAKPOINT, useIsSmallScreen } from "../../utilities";
+import { ContentTabItem } from "./ContentTabItem";
+export const ContentTabList = ({ items, classModifier, }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    return (_jsx(List, { classModifier: `list large extra-padding content-tab-list ${classModifier}`, tabIndex: -1, children: items.map(({ id, ...item }) => (_jsx(ContentTabItem, { ...item, isMobile: isMobile }, id ?? item.title))) }));
+};

package/dist/List/ContentTabList/index.d.ts

@@ -0,0 +1 @@
+export { ContentTabList } from "./ContentTabList";

package/dist/List/ContentTabList/index.js

@@ -0,0 +1 @@
+export { ContentTabList } from "./ContentTabList";

package/dist/List/List.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+import { Card } from "..";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+type TList = ComponentProps<typeof Card>;
+export declare const List: ({ children, classModifier, ...cardProps }: TList) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/List/List.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Children, isValidElement, useMemo, } from "react";
+import { Card } from "..";
+import "@axa-fr/design-system-look-and-feel-css/dist/List/List.scss";
+const defaultClassName = "af-list";
+export const List = ({ children, classModifier, ...cardProps }) => {
+    const validChildren = useMemo(() => (Children.map(children, (child) => isValidElement(child) && child) ?? []).filter(Boolean), [children]);
+    return (_jsx(Card, { classModifier: `list ${classModifier}`, ...cardProps, children: _jsx("ul", { className: defaultClassName, children: Children.map(validChildren, (child, index) => (_jsxs(React.Fragment, { children: [_jsx("li", { className: `${defaultClassName}__item`, children: child }), index < validChildren.length - 1 && (_jsx("hr", { className: `${defaultClassName}__separator` }))] }, child.key))) }) }));
+};

package/dist/List/index.d.ts

@@ -0,0 +1 @@
+export { List } from "./List";

package/dist/List/index.js

@@ -0,0 +1 @@
+export { List } from "./List";

package/dist/Loader/Loader.d.ts

@@ -0,0 +1,11 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
+type LoaderProps = {
+    border?: number;
+    size?: number;
+    text?: string;
+};
+declare const Loader: {
+    ({ border, size, text, }: LoaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Loader };

package/dist/Loader/Loader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
+const Loader = ({ border = 5, size = 60, text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: "af-loader__container", style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        border: `${border}px solid #f3f3f3`,
+        borderTop: `${border}px solid #00008f`,
+    }, children: _jsx("div", { className: "af-loader__container-spin", "aria-hidden": "true" }) }));
+Loader.displayName = "Loader";
+export { Loader };

package/dist/Loader/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from "./Loader";

package/dist/Loader/index.js

@@ -0,0 +1 @@
+export { Loader } from "./Loader";

package/dist/ModalClient/Modal.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren, ReactNode } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+export type ButtonAction = {
+    text: string;
+    disabled?: boolean;
+    callback: () => void;
+};
+type ModalProps = {
+    isOpen: boolean;
+    hasCloseBtn?: boolean;
+    onClose?: () => void;
+    onClickOutside?: () => void;
+    title: string;
+    subtitle?: string;
+    iconTitle?: ReactNode;
+    fullWidthButtons?: boolean;
+    actions?: {
+        primary?: ButtonAction;
+        secondary?: ButtonAction;
+        tertiary?: ButtonAction;
+    };
+};
+export declare const Modal: ({ isOpen, hasCloseBtn, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ModalClient/Modal.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from "react";
+import close from "@material-symbols/svg-400/outlined/close.svg";
+import { ButtonClient as Button, Variants as ButtonVariants, } from "../Button/Button";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+import { Svg } from "../Svg";
+export const Modal = ({ isOpen, hasCloseBtn = true, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
+    const [isModalOpen, setIsModalOpen] = useState(isOpen);
+    const modalRef = useRef(null);
+    const idTitle = useId();
+    const idContent = useId();
+    useEffect(() => {
+        setIsModalOpen(isOpen);
+    }, [isOpen]);
+    useEffect(() => {
+        const modalElement = modalRef.current;
+        if (!modalRef.current) {
+            return;
+        }
+        if (isModalOpen) {
+            document.body.style.overflow = "hidden";
+            modalElement.showModal();
+        }
+        else {
+            document.body.style.overflow = "inherit";
+            modalElement.close();
+        }
+    }, [isModalOpen]);
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = "inherit";
+        };
+    }, []);
+    const handleCloseModal = () => {
+        onClose?.();
+        setIsModalOpen(false);
+    };
+    const handleClickOutside = () => {
+        if (onClickOutside) {
+            onClickOutside();
+            setIsModalOpen(false);
+        }
+        else {
+            handleCloseModal();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            handleCloseModal();
+        }
+    };
+    return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleClickOutside(), className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseBtn && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: actions?.primary.callback, disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));
+};

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/Pagination.scss";
+import { ComponentPropsWithoutRef } from "react";
+type PaginationProps = {
+    numberPage: number;
+    onChangePage: (page: number) => void;
+    defaultPage?: number;
+} & ComponentPropsWithoutRef<"div">;
+export declare const Pagination: ({ numberPage, onChangePage, defaultPage, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/Pagination.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/Pagination.scss";
+import { useEffect, useState } from "react";
+import { BREAKPOINT, useIsSmallScreen } from "../utilities";
+import { PaginationDesktop } from "./PaginationDesktop";
+import { PaginationMobile } from "./PaginationMobile";
+export const Pagination = ({ numberPage, onChangePage, defaultPage, }) => {
+    const isMobile = useIsSmallScreen(BREAKPOINT.MD);
+    const [currentPage, setCurrentPage] = useState(defaultPage || 1);
+    useEffect(() => {
+        onChangePage(currentPage);
+    }, [currentPage, onChangePage]);
+    return (_jsx("div", { className: "af-container-pagination", children: isMobile ? (_jsx(PaginationMobile, { numberPage: numberPage, currentPage: currentPage, setCurrentPage: setCurrentPage })) : (_jsx(PaginationDesktop, { numberPage: numberPage, currentPage: currentPage, setCurrentPage: setCurrentPage })) }));
+};

package/dist/Pagination/PaginationDesktop.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationDesktop.scss";
+import { ComponentPropsWithoutRef } from "react";
+type PropsPaginationDesktop = {
+    numberPage: number;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+} & ComponentPropsWithoutRef<"div">;
+export declare const PaginationDesktop: ({ numberPage, currentPage, setCurrentPage, }: PropsPaginationDesktop) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/PaginationDesktop.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationDesktop.scss";
+const SEVEN_PAGE = 7;
+const LAST_FOUR_PAGE = 4;
+const FIVE_PAGE = 5;
+export const PaginationDesktop = ({ numberPage, currentPage, setCurrentPage, }) => {
+    const pages = Array.from({ length: numberPage }, (_, index) => index + 1);
+    let filteredNumbers = [...pages];
+    let classNamePagination = "";
+    if (numberPage > SEVEN_PAGE) {
+        if (currentPage < FIVE_PAGE) {
+            classNamePagination = "first";
+            filteredNumbers = [...pages.slice(0, FIVE_PAGE), pages[pages.length - 1]];
+        }
+        else if (currentPage > numberPage - LAST_FOUR_PAGE) {
+            classNamePagination = "last";
+            filteredNumbers = [pages[0], ...pages.slice(-FIVE_PAGE)];
+        }
+        else {
+            classNamePagination = "between";
+            filteredNumbers = [
+                pages[0],
+                currentPage - 1,
+                currentPage,
+                currentPage + 1,
+                pages[pages.length - 1],
+            ];
+        }
+    }
+    return (_jsx("div", { className: "af-pagination-desktop", children: _jsx("ul", { className: classNamePagination, children: filteredNumbers.map((page) => (_jsx("li", { "aria-label": `page-${page}`, "aria-current": currentPage === page ? "page" : undefined, children: _jsx("button", { type: "button", onClick: () => setCurrentPage(page), children: page }) }, `page-${page}`))) }) }));
+};

package/dist/Pagination/PaginationMobile.d.ts

@@ -0,0 +1,9 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationMobile.scss";
+import { ComponentPropsWithoutRef } from "react";
+type PropsPaginationMobile = {
+    numberPage: number;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+} & ComponentPropsWithoutRef<"div">;
+export declare const PaginationMobile: ({ numberPage, currentPage, setCurrentPage, }: PropsPaginationMobile) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/PaginationMobile.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Pagination/PaginationMobile.scss";
+import arrowBackIos from "@material-symbols/svg-400/outlined/arrow_back_ios.svg";
+import arrowForwardIos from "@material-symbols/svg-400/outlined/arrow_forward_ios.svg";
+import { Svg } from "../Svg";
+export const PaginationMobile = ({ numberPage, currentPage, setCurrentPage, }) => {
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === numberPage;
+    return (_jsxs("div", { className: "af-pagination-mobile", children: [_jsx("button", { type: "button", onClick: () => setCurrentPage(currentPage - 1), disabled: isFirstPage, "aria-label": "Page pr\u00E9c\u00E9dente", children: _jsx(Svg, { src: arrowBackIos, className: "arrow" }) }), _jsxs("span", { children: [currentPage, " sur ", numberPage] }), _jsx("button", { type: "button", onClick: () => setCurrentPage(currentPage + 1), disabled: isLastPage, "aria-label": "Page suivant", children: _jsx(Svg, { src: arrowForwardIos, className: "arrow" }) })] }));
+};

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+export type StepperProps = {
+    currentStepProgress?: number;
+    currentStep: number;
+    currentSubtitle?: string;
+    currentTitle?: string;
+    nbSteps: 2 | 3 | 4 | 5 | 6;
+    isTitleVisible?: boolean;
+    isSubtitleVisible?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, "role">;
+export declare const Stepper: ({ currentStepProgress, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible, isSubtitleVisible, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;