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

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

@@ -0,0 +1,3 @@
+export { NavBarItem } from "./NavBarItem";
+export { NavBarItemBase } from "./NavBarItemBase";
+export { NavBarItemLink } from "./NavBarItemLink";

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

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Header/NavBar/NavBar.css";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+export { NavBar } from "./NavBar";
+export { NavBarBase } from "./NavBarBase";
+export { NavBarItem, NavBarItemBase, NavBarItemLink } from "./NavBarItem";

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

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Header/NavBar/NavBar.css";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+export { NavBar } from "./NavBar";
+export { NavBarBase } from "./NavBarBase";
+export { NavBarItem, NavBarItemBase, NavBarItemLink } from "./NavBarItem";

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    idControl: string;
+};
+declare const ToggleButton: ({ children, idControl }: Props) => false | ReactElement<HTMLAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
+export { ToggleButton };

package/dist/distributeur/Layout/Header/ToggleButton/ToggleButton.js

@@ -0,0 +1,8 @@
+import { cloneElement, isValidElement, } from "react";
+const ToggleButton = ({ children, idControl }) => isValidElement(children) &&
+    cloneElement(children, {
+        ...children.props,
+        "aria-controls": idControl,
+        "aria-haspopup": true,
+    });
+export { ToggleButton };

package/dist/distributeur/Layout/Header/User/InnerUser.d.ts

@@ -0,0 +1,5 @@
+declare const InnerUser: ({ name, profile }: {
+    name: string;
+    profile?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export { InnerUser };

package/dist/distributeur/Layout/Header/User/InnerUser.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const InnerUser = ({ name, profile }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "af-info-user__name", children: name }, "1"), profile ? (_jsxs("span", { className: "af-info-user__profile", children: ["[", profile, "]"] }, "2")) : null] }));
+export { InnerUser };

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

@@ -0,0 +1,60 @@
+import "@axa-fr/canopee-css/distributeur/Layout/Header/User/User.css";
+import { MouseEvent, ReactNode } from "react";
+type Props = {
+    /**
+     * User's name
+     */
+    name: string;
+    /**
+     * User's profile or role, optional
+     */
+    profile?: string;
+    /**
+     * Children elements to be rendered next to the user's name and role
+     */
+    children?: ReactNode;
+    /**
+     * Class modifier to apply additional styles\
+     * @example
+     * ```tsx
+     * <User classModifier="custom-class" />
+     * ```
+     * This will apply the class `af-info-user--custom-class` to the component.
+     */
+    classModifier?: string;
+    /**
+     * classNames to override completely the component's style
+     */
+    className?: string;
+    /**
+     * URL to navigate to when the user name is clicked
+     * If provided, the user name will be wrapped in an anchor tag.
+     * If not provided, the user name will be displayed as plain text.
+     */
+    href?: string;
+    /**
+     * Function to call when the user name link is clicked
+     * @param action - Contains the event and optionally the path
+     */
+    onClick?: (action: {
+        path?: string;
+        event: MouseEvent<HTMLAnchorElement>;
+    }) => void;
+    /**
+     * Optional path to be used in the onClick function
+     * @example
+     * ```tsx
+     * <User onClick={({ path }) => console.log(path)} path="/user-profile" />
+     * ```
+     * This will log `/user-profile` when the user name link is clicked.
+     */
+    path?: string;
+    /**
+     * Title for the user link, defaults to "Voir mon profil"
+     * This is used as the `title` attribute for the anchor tag if `href` is provided.
+     * It provides additional context for screen readers and tooltips.
+     */
+    title?: string;
+};
+declare const User: ({ children, classModifier, className, href, name, path, profile, onClick, title, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { User };

package/dist/distributeur/Layout/Header/User/User.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Layout/Header/User/User.css";
+import { getComponentClassName } from "../../../utilities";
+import { InnerUser } from "./InnerUser";
+const defaultClassName = "af-info-user";
+const User = ({ children, classModifier, className, href, name, path, profile, onClick, title = "Voir mon profil", }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("div", { className: componentClassName, children: [href ? (_jsx("a", { "aria-label": "user info link", className: `${defaultClassName}__link`, href: href, title: title, onClick: (event) => onClick && onClick({ path, event }), children: _jsx(InnerUser, { name: name, profile: profile }) })) : (_jsx(InnerUser, { name: name, profile: profile })), children] }));
+};
+export { User };

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

@@ -0,0 +1,9 @@
+export { Header } from "./Header";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
+export { Infos } from "./Infos/Infos";
+export { MenuTitleWrapper } from "./MenuTitleWrapper/MenuTitleWrapper";
+export { Name } from "./Name/Name";
+export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
+export { ToggleButton } from "./ToggleButton/ToggleButton";
+export { User } from "./User/User";
+export type { AnchorNavBarItem } from "./AnchorNavBar/AnchorNavBar";

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

@@ -0,0 +1,8 @@
+export { Header } from "./Header";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
+export { Infos } from "./Infos/Infos";
+export { MenuTitleWrapper } from "./MenuTitleWrapper/MenuTitleWrapper";
+export { Name } from "./Name/Name";
+export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
+export { ToggleButton } from "./ToggleButton/ToggleButton";
+export { User } from "./User/User";

package/dist/distributeur/Layout/MainContainer/MainContainer.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+type MainContainerProps = ComponentPropsWithoutRef<"main"> & PropsWithChildren;
+export declare const MainContainer: ({ children, ...othersProps }: MainContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Layout/MainContainer/MainContainer.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/common/breakpoints.css";
+export const MainContainer = ({ children, ...othersProps }) => (_jsx("main", { className: "af-container", ...othersProps, children: children }));

package/dist/distributeur/Link/CustomLink.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+type CustomLinkProps = {
+    render: (props: {
+        className: string;
+    }) => ReactNode;
+};
+declare const CustomLink: (props: CustomLinkProps) => ReactNode;
+export { CustomLink, type CustomLinkProps };

package/dist/distributeur/Link/CustomLink.js

@@ -0,0 +1,6 @@
+import { linkClassName } from "./linkClassName";
+const CustomLink = (props) => {
+    const { render } = props;
+    return render({ className: linkClassName, ...props });
+};
+export { CustomLink };

package/dist/distributeur/Link/Link.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/distributeur/Link/Link.css";
+import { type CustomLinkProps } from "./CustomLink";
+import { type LinkComponentProps } from "./LinkAnchor";
+export type LinkProps = LinkComponentProps | CustomLinkProps;
+export declare const Link: import("react").ForwardRefExoticComponent<(CustomLinkProps | Omit<LinkComponentProps, "ref">) & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/distributeur/Link/Link.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Link/Link.css";
+import { forwardRef } from "react";
+import { CustomLink } from "./CustomLink";
+import { LinkAnchor } from "./LinkAnchor";
+export const Link = forwardRef((props, ref) => {
+    if ("render" in props) {
+        return _jsx(CustomLink, { ...props });
+    }
+    return _jsx(LinkAnchor, { ...props, ref: ref });
+});
+Link.displayName = "Link";

package/dist/distributeur/Link/LinkAnchor.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef, ReactElement } from "react";
+import { Svg } from "../Svg";
+type AnchorLinkProps = {
+    leftIcon?: ReactElement<typeof Svg>;
+    rightIcon?: ReactElement<typeof Svg>;
+    className?: string;
+    disabled?: boolean;
+    variant?: "default" | "reverse";
+};
+type LinkComponentProps = ComponentPropsWithRef<"a"> & AnchorLinkProps;
+declare const LinkAnchor: import("react").ForwardRefExoticComponent<Omit<LinkComponentProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export { LinkAnchor, type LinkComponentProps };

package/dist/distributeur/Link/LinkAnchor.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { linkClassName } from "./linkClassName";
+const LinkAnchor = forwardRef(({ className, target, rel, leftIcon, children, rightIcon, disabled, variant, ...restProps }, ref) => {
+    const finalClassName = classnames(linkClassName, className, {
+        [`${linkClassName}--reverse`]: variant === "reverse",
+    });
+    return (_jsxs("a", { className: finalClassName, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? restProps["aria-disabled"], ref: ref, target: target, ...restProps, children: [leftIcon, children, rightIcon] }));
+});
+LinkAnchor.displayName = "LinkAnchor";
+export { LinkAnchor };

package/dist/distributeur/Link/linkClassName.d.ts

@@ -0,0 +1 @@
+export declare const linkClassName = "af-slash-link";

package/dist/distributeur/Link/linkClassName.js

@@ -0,0 +1 @@
+export const linkClassName = "af-slash-link";

package/dist/distributeur/Loader/Loader.d.ts

@@ -0,0 +1,12 @@
+import "@axa-fr/canopee-css/distributeur/Loader/Loader.css";
+import { type ReactNode } from "react";
+type LoaderMode = "none" | "get" | "post" | "delete" | "update" | "error";
+type LoaderProps = {
+    className?: string;
+    mode: LoaderMode;
+    text?: string;
+    children: ReactNode;
+    classModifier?: string;
+};
+export declare const Loader: ({ className, text, children, classModifier, mode, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Loader/Loader.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Loader/Loader.css";
+import { getComponentClassName } from "../utilities";
+const getText = (index) => {
+    switch (index) {
+        case "get":
+            return "Chargement en cours";
+        case "post":
+            return "Sauvegarde en cours";
+        case "delete":
+            return "Suppression en cours";
+        case "update":
+            return "Mise à jour en cours";
+        case "error":
+            return "Une erreur est survenue lors du chargement du composant";
+        default:
+            return "";
+    }
+};
+export const Loader = ({ className, text, children, classModifier, mode = "none", }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-loader");
+    const message = text || getText(mode);
+    const isLoaderVisible = mode !== "none";
+    const isLoaderInError = mode === "error";
+    return (_jsxs("div", { className: componentClassName, children: [children, isLoaderVisible ? (_jsx("div", { className: `${componentClassName} af-loader-on`, children: _jsxs("div", { className: "af-spinner", role: "alert", "aria-live": "assertive", "aria-busy": !isLoaderInError, "aria-label": message, children: [!isLoaderInError && _jsx("div", { className: "af-spinner__animation" }), _jsx("div", { className: "af-spinner__caption", children: message })] }) })) : null] }));
+};

package/dist/distributeur/Messages/Message.d.ts

@@ -0,0 +1,47 @@
+import "@axa-fr/canopee-css/distributeur/Message/Message.css";
+import { MouseEventHandler, PropsWithChildren, ReactNode } from "react";
+export type MessageVariants = "error" | "warning" | "info" | "success";
+export type MessageProps = {
+    /**
+     * Content of the message title. Can be a string or a ReactNode.
+     */
+    title: ReactNode;
+    /**
+     * URL of an svg icon to display in the sidebar of the message.
+     * If not provided, a default icon based on the classModifier will be used.
+     * <strong>This not recommended to use</strong>. Only use as an escape hatch.
+     */
+    icon?: string;
+    /**
+     * handler for the close button click event.
+     * If not provided, the close button will not be displayed.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * If you want to add a custom class to the component.
+     * @example
+     * ```tsx
+     * <Message className="my-custom-class" title="My message">
+     * ```
+     * will produce
+     * ```html
+     * <div class="my-custom-class af-alert">My message</div>
+     */
+    className?: string;
+    /**
+     * @deprecated Use `variant` instead.
+     */
+    classModifier?: MessageVariants | "danger";
+    /**
+     * Variant of the message.
+     * This will determine the icon and the style of the message.
+     */
+    variant?: MessageVariants;
+    /**
+     * Aria label for the close button.
+     * This is important for accessibility, use a meaningful label to describe the action.
+     * @default "close"
+     */
+    closeButtonAriaLabel?: string;
+};
+export declare const Message: ({ className, onClose, icon, title, children, classModifier, variant, closeButtonAriaLabel, }: PropsWithChildren<MessageProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Messages/Message.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Message/Message.css";
+import successSvg from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import closeSvg from "@material-symbols/svg-400/outlined/close.svg";
+import errorSvg from "@material-symbols/svg-400/outlined/error-fill.svg";
+import infoSvg from "@material-symbols/svg-400/outlined/info-fill.svg";
+import warningSvg from "@material-symbols/svg-400/outlined/warning-fill.svg";
+import { Svg } from "../Svg";
+import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
+const getIconUrl = (type) => {
+    switch (type) {
+        case "info":
+            return infoSvg;
+        case "success":
+            return successSvg;
+        case "error":
+            return errorSvg;
+        case "warning":
+            return warningSvg;
+        default:
+            return errorSvg;
+    }
+};
+const getVariant = (classModifier, variant) => {
+    if (variant) {
+        return variant;
+    }
+    if (classModifier) {
+        return classModifier === "danger" ? "warning" : classModifier;
+    }
+    return "error"; // Default variant
+};
+export const Message = ({ className, onClose, icon, title, children, classModifier = "error", variant, // Backward compatibility
+closeButtonAriaLabel = "close", }) => {
+    const safeVariant = getVariant(classModifier, variant);
+    const componentClassName = getComponentClassNameWithUserClassname({
+        componentClassName: "af-alert",
+        userClassName: className,
+        classModifier: safeVariant,
+    });
+    const iconSrc = icon ?? getIconUrl(safeVariant);
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsx("div", { className: "af-alert__sidebar", children: _jsx("div", { className: "af-alert__indicator", children: _jsx(Svg, { src: iconSrc, className: "af-alert__icon", role: "presentation" }) }) }), _jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__title", children: title }), children] }), onClose ? (_jsx("button", { onClick: onClose, "aria-label": closeButtonAriaLabel, type: "button", className: "af-alert__close-button", children: _jsx(Svg, { src: closeSvg, className: "af-alert__close-icon", role: "presentation" }) })) : null] }));
+};

package/dist/distributeur/ModalAgent/BooleanModal.d.ts

@@ -0,0 +1,40 @@
+import React, { type ReactNode } from "react";
+import { type HeaderProps } from "./components/Header";
+import { ModalProps } from "./Modal";
+export type BooleanModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & Omit<HeaderProps, "children" | "onCancel" | "title"> & Pick<ModalProps, "size"> & {
+    /**
+     * Title of the modal, displayed in the header.
+     * Also used as the `aria-label` of the <dialog> element for accessibility.
+     */
+    title: string;
+    /**
+     * Callback function called when the modal is submitted.
+     * @param event The event that triggered the submission, can be a mouse click or a keyboard event.
+     * @returns void
+     */
+    onSubmit: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Callback function called when the modal is cancelled.
+     * @param event The event that triggered the cancellation, can be a mouse click or a keyboard event.
+     * @returns void
+     */
+    onCancel: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    id: string;
+    children: ReactNode;
+    /**
+     * Text content of the submit button.
+     */
+    submitTitle?: string;
+    /**
+     * Text content of the cancel button.
+     */
+    cancelTitle?: string;
+    className?: string;
+    /**
+     * @deprecated Use `size` prop instead.
+     * Class modifier for the modal. Can be used to apply custom styles.
+     */
+    classModifier?: string;
+};
+declare const BooleanModal: React.ForwardRefExoticComponent<Omit<BooleanModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export { BooleanModal };

package/dist/distributeur/ModalAgent/BooleanModal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Button, Modal, getComponentClassName } from "../../distributeur";
+import { Body } from "./components/Body";
+import { Footer } from "./components/Footer";
+import { Header } from "./components/Header";
+const defaultClassName = "af-modal";
+const BooleanModal = forwardRef(({ children, title, submitTitle = "Valider", cancelTitle = "Annuler", className = defaultClassName, classModifier, onCancel, onSubmit, closeButtonAriaLabel, ...props }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs(Modal, { className: componentClassName, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(Header, { title: title, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(Body, { children: children }), _jsxs(Footer, { children: [_jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelTitle }), _jsx(Button, { onClick: onSubmit, variant: "validated", children: submitTitle })] })] }));
+});
+BooleanModal.displayName = "BooleanModal";
+export { BooleanModal };

package/dist/distributeur/ModalAgent/Modal.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export type ModalProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
+    size?: "lg" | "sm";
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * `aria-label` of the modal, used for accessibility.
+     */
+    title?: string;
+    className?: string;
+    /**
+     * @deprecated Use `size` prop instead.
+     * Class modifier for the modal. Can be used to apply custom styles.
+     */
+    classModifier?: string;
+    /**
+     * Size of the modal. Overrides classModifier if set
+     */
+    ref?: React.Ref<HTMLDialogElement>;
+};
+declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { Modal };

package/dist/distributeur/ModalAgent/Modal.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../utilities";
+const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, size, ...props }, ref) => {
+    // If size is set to 'lg' or 'sm', use it as the classModifier, otherwise use the provided classModifier
+    let effectiveClassModifier;
+    if (size) {
+        if (classModifier && classModifier !== "lg" && classModifier !== "sm") {
+            effectiveClassModifier = `${size} ${classModifier}`;
+        }
+        else {
+            effectiveClassModifier = size;
+        }
+    }
+    else {
+        effectiveClassModifier = classModifier;
+    }
+    const componentClassName = getComponentClassName(className, effectiveClassModifier, "af-modal");
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+    _jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
+});
+Modal.displayName = "Modal";
+export { Modal };

package/dist/distributeur/ModalAgent/components/Body.d.ts

@@ -0,0 +1,5 @@
+export type BodyProps = React.HTMLAttributes<HTMLDivElement> & {
+    classModifier?: string;
+};
+declare const Body: ({ children, className, classModifier, ...otherProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export { Body };

package/dist/distributeur/ModalAgent/components/Body.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../../utilities";
+const Body = ({ children, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__body");
+    return (_jsx("section", { className: componentClassName, ...otherProps, children: children }));
+};
+export { Body };

package/dist/distributeur/ModalAgent/components/Footer.d.ts

@@ -0,0 +1,5 @@
+export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    classModifier?: string;
+};
+declare const Footer: ({ classModifier, className, ...rest }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export { Footer };

package/dist/distributeur/ModalAgent/components/Footer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../../utilities";
+const Footer = ({ classModifier, className, ...rest }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__footer");
+    return _jsx("footer", { ...rest, className: componentClassName });
+};
+export { Footer };

package/dist/distributeur/ModalAgent/components/Header.d.ts

@@ -0,0 +1,30 @@
+import type { MouseEventHandler, ReactNode } from "react";
+export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Text displayed in the header.
+     * @deprecated Use `children` instead to allow for more flexible content.
+     */
+    title?: string;
+    /**
+     * Text displayed in the header, overrides `title` if both are set.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when the close button is clicked.
+     */
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Aria label for the close button, used for accessibility.
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Class modifier for the header. Can be used to apply custom styles.
+     */
+    classModifier?: string;
+    /**
+     * Prop to override the style of the header. Will totally remove the default styles.
+     */
+    className?: string;
+};
+declare const Header: ({ className, classModifier, title, closeButtonAriaLabel, onCancel, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export { Header };

package/dist/distributeur/ModalAgent/components/Header.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
+import { getComponentClassName, Svg } from "../../../distributeur";
+const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, children, ...props }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
+    return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: children ?? title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx(Svg, { src: closeIcon }) })] }));
+};
+export { Header };

package/dist/distributeur/ModalAgent/components/HeaderBase.d.ts

@@ -0,0 +1,5 @@
+export type HeaderBaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    classModifier?: string;
+};
+declare const HeaderBase: ({ classModifier, className, ...rest }: HeaderBaseProps) => import("react/jsx-runtime").JSX.Element;
+export { HeaderBase };

package/dist/distributeur/ModalAgent/components/HeaderBase.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../../utilities";
+const HeaderBase = ({ classModifier, className, ...rest }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
+    return _jsx("header", { ...rest, className: componentClassName });
+};
+export { HeaderBase };

package/dist/distributeur/ModalAgent/index.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/Modal/Modal.css";
+export { BooleanModal } from "./BooleanModal";
+export { Body as ModalBody } from "./components/Body";
+export { Footer as ModalFooter } from "./components/Footer";
+export { Header as ModalHeader } from "./components/Header";
+export { HeaderBase as ModalHeaderBase } from "./components/HeaderBase";
+export { Modal } from "./Modal";

package/dist/distributeur/ModalAgent/index.js

@@ -0,0 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/Modal/Modal.css";
+export { BooleanModal } from "./BooleanModal";
+export { Body as ModalBody } from "./components/Body";
+export { Footer as ModalFooter } from "./components/Footer";
+export { Header as ModalHeader } from "./components/Header";
+export { HeaderBase as ModalHeaderBase } from "./components/HeaderBase";
+export { Modal } from "./Modal";

package/dist/distributeur/Popover/AnimatedPopover.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Placement } from "@floating-ui/react";
+type PropsAnimatedPopover = {
+    placement: Placement;
+    children: React.ReactNode;
+    isOpen: boolean;
+    target: React.ReactNode;
+    className?: string;
+    classModifier?: string;
+    onMouseEnter?: (event: React.MouseEvent) => void;
+    onMouseLeave?: (event: React.MouseEvent) => void;
+};
+export declare const AnimatedPopover: ({ placement, children, isOpen, target, className, classModifier, onMouseEnter, onMouseLeave, }: PropsAnimatedPopover) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Popover/AnimatedPopover.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useRef } from "react";
+import { arrow, FloatingArrow, offset, useFloating, } from "@floating-ui/react";
+import { getComponentClassName } from "../utilities";
+const defaultClassName = "af-popover__container";
+export const AnimatedPopover = ({ placement, children, isOpen, target, className, classModifier, onMouseEnter, onMouseLeave, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const [referenceElement, setReferenceElement] = React.useState(null);
+    const [popperElement, setPopperElement] = React.useState(null);
+    const arrowRef = useRef(null);
+    const { floatingStyles, context } = useFloating({
+        placement,
+        elements: { reference: referenceElement, floating: popperElement },
+        middleware: [offset(12), arrow({ element: arrowRef })],
+    });
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { ref: setReferenceElement, className: "af-popover__container-over", role: "presentation", children: target }), isOpen ? (_jsxs("div", { ref: setPopperElement, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: floatingStyles, "data-popper-placement": placement, className: "af-popover__container-pop", children: [_jsx("div", { children: children }), _jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "white" })] })) : null] }));
+};

package/dist/distributeur/Popover/Popover.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Placement } from "@floating-ui/react";
+import { PopoverModes } from "./Popover.types";
+type Props = {
+    className?: string;
+    classModifier?: string;
+    placement?: Placement;
+    mode: PopoverModes;
+    popoverElement: React.ReactNode;
+    children: React.ReactNode;
+};
+declare const Popover: ({ children, placement, className, classModifier, mode, popoverElement: content, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Popover };