@axa-fr/design-system-look-and-feel-react 1.0.5-ci.1 → 1.0.5-ci.100

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

@@ -4,6 +4,6 @@ import { useMemo } from "react";
 import { Svg } from "../../../Svg";
 import { getComponentClassName } from "../../../utilities";
 export const ClickItem = ({ children, icon, parentClickComponent: ClickComponent = ({ children: parentClickComponentChildren, ...parentClickComponentProps }) => (_jsx("button", { type: "button", ...parentClickComponentProps, children: parentClickComponentChildren })), isDisabled = false, className, classModifier = "", actionIcon = _jsx(Svg, { src: chevron, "aria-hidden": true }), ...otherProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${isDisabled ? " disabled" : ""}`, "af-click-item"), [className, classModifier, isDisabled]);
+    const componentClassName = useMemo(() => getComponentClassName("af-click-item", className, `${classModifier}${isDisabled ? " disabled" : ""}`), [className, classModifier, isDisabled]);
     return (_jsxs(ClickComponent, { className: componentClassName, disabled: isDisabled, "aria-disabled": isDisabled, ...otherProps, 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 })] }), _jsx("div", { className: "af-click-item__action", children: actionIcon })] }));
 };

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

@@ -1,6 +1,7 @@
+import { type ReactNode } from "react";
 type ContentItemDuoProps = {
     label: string;
-    value: string;
+    value: ReactNode;
     isVertical?: boolean;
     className?: string;
     classModifier?: string;

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -2,17 +2,16 @@ 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 "../..";
+import { getComponentClassName } from "../../utilities";
 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");
+        return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
     }, [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 }) }))] }));
+    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 }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: "ghost", onClick: onButtonClick, children: buttonText }) }))] }));
 };

package/dist/List/ContentItemMono/ContentItemMono.js

@@ -8,7 +8,7 @@ export const ContentItemMono = ({ children, className, classModifier, secondaryT
         if (isDisabled) {
             classModifiers.push("disabled");
         }
-        return getComponentClassName(className, classModifiers.filter(Boolean).join(" "), "af-content-item-mono");
+        return getComponentClassName("af-content-item-mono", className, classModifiers.filter(Boolean).join(" "));
     }, [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"

package/dist/Loader/Loader.d.ts

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

package/dist/Loader/Loader.js

@@ -1,11 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
-import classNames from "classnames";
-const Loader = ({ border = 5, size = 60, variant = "blue", text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: classNames("af-loader__container", `af-loader__container--${variant}`), style: {
-        width: `${size}px`,
-        height: `${size}px`,
-        borderWidth: `${border}px`,
-        borderTopWidth: `${border}px`,
-    }, children: _jsx("div", { className: "af-loader__container-spin", "aria-hidden": "true" }) }));
-Loader.displayName = "Loader";
-export { Loader };
+export { Loader } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type ModalCoreProps } from "./ModalCore";
+import { type ModalCoreHeaderProps } from "./components/ModalCoreHeader";
+export type ModalProps = Omit<ModalCoreProps, "onOutsideTap" | "title"> & ModalCoreHeaderProps & {
+    onSubmit?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    submitTitle?: string;
+    cancelTitle?: string;
+    submitDisabled?: boolean;
+    cancelDisabled?: boolean;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export { Modal };

package/dist/Modal/Modal.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ModalCore } from "./ModalCore";
+import { Button } from "../Button/Button";
+import { ModalCoreHeader, } from "./components/ModalCoreHeader";
+import { ModalCoreBody } from "./components/ModalCoreBody";
+import { ModalCoreFooter } from "./components/ModalCoreFooter";
+const Modal = forwardRef(({ children, title, submitTitle, cancelTitle, className, onCancel, onSubmit, closeButtonAriaLabel, cancelDisabled, submitDisabled, subtitle, iconTitle, levelTitle, ...props }, ref) => (_jsxs(ModalCore, { className: className, onOutsideTap: onCancel, title: title, ref: ref, ...props, children: [_jsx(ModalCoreHeader, { title: title, subtitle: subtitle, iconTitle: iconTitle, levelTitle: levelTitle, onCancel: onCancel, closeButtonAriaLabel: closeButtonAriaLabel }), _jsx(ModalCoreBody, { children: children }), _jsxs(ModalCoreFooter, { children: [onCancel && cancelTitle && (_jsx(Button, { variant: "secondary", onClick: onCancel, disabled: cancelDisabled, children: cancelTitle })), onSubmit && submitTitle && (_jsx(Button, { variant: "primary", onClick: onSubmit, disabled: submitDisabled, children: submitTitle }))] })] })));
+Modal.displayName = "Modal";
+export { Modal };

package/dist/Modal/ModalCore.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+export type ModalCoreProps = React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement> & {
+    className?: string;
+    title: string;
+    onOutsideTap: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    children: ReactNode;
+    ref?: React.Ref<HTMLDialogElement>;
+};
+declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export { ModalCore };

package/dist/Modal/ModalCore.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
+const ModalCore = forwardRef(({ className, title = "", onOutsideTap, children, ...props }, ref) => (_jsx("dialog", { "aria-describedby": title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) })));
+ModalCore.displayName = "ModalCore";
+export { ModalCore };

package/dist/Modal/components/ModalCoreBody.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreBody: ({ children, className, ...otherProps }: ModalCoreBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreBody.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreBody = ({ children, className, ...otherProps }) => (_jsx("section", { className: ["af-modal__body", className].filter(Boolean).join(" "), ...otherProps, children: children }));

package/dist/Modal/components/ModalCoreFooter.d.ts

@@ -0,0 +1,2 @@
+export type ModalCoreFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ModalCoreFooter: ({ className, ...rest }: ModalCoreFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreFooter.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ModalCoreFooter = ({ className, ...rest }) => (_jsx("footer", { className: ["af-modal__footer", className].filter(Boolean).join(" "), ...rest }));

package/dist/Modal/components/ModalCoreHeader.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, MouseEvent, KeyboardEvent } from "react";
+import type { TitleLevel } from "../../Title";
+export type ModalCoreHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    title: string;
+    subtitle?: string;
+    iconTitle?: string;
+    levelTitle?: TitleLevel;
+    onCancel: (event: MouseEvent | KeyboardEvent) => void;
+    closeButtonAriaLabel?: string;
+};
+export declare const ModalCoreHeader: ({ className, title, subtitle, iconTitle, levelTitle, onCancel, closeButtonAriaLabel, ...props }: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/ModalCoreHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import closeSmall from "@material-symbols/svg-400/outlined/close.svg";
+import { Button } from "../../Button/Button";
+import { Svg } from "../../Svg";
+export const ModalCoreHeader = ({ className, title, subtitle, iconTitle, levelTitle = 2, onCancel, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => {
+    const HLevel = `h${levelTitle}`;
+    return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(Button, { variant: "ghost", iconLeft: _jsx(Svg, { src: closeSmall, width: 32, height: 32, role: "graphics-document" }), "aria-label": closeButtonAriaLabel, onClick: onCancel }), _jsxs("div", { className: "af-modal__header-title", children: [iconTitle && (_jsx(Svg, { src: iconTitle, width: 32, height: 32, role: "graphics-document" })), _jsx(HLevel, { className: "af-modal__header-title-heading", children: title }), subtitle && (_jsx("span", { className: "af-modal__header-title-subtitle", children: subtitle }))] })] }));
+};

package/dist/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { Modal, type ModalProps } from "./Modal";
+export { ModalCore, type ModalCoreProps } from "./ModalCore";
+export { ModalCoreFooter, type ModalCoreFooterProps, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, type ModalCoreHeaderProps, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";

package/dist/Modal/index.js

@@ -0,0 +1,5 @@
+export { Modal } from "./Modal";
+export { ModalCore } from "./ModalCore";
+export { ModalCoreFooter, } from "./components/ModalCoreFooter";
+export { ModalCoreHeader, } from "./components/ModalCoreHeader";
+export { ModalCoreBody, } from "./components/ModalCoreBody";

package/dist/Skeleton/Skeleton.d.ts

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

package/dist/SkeletonList/SkeletonList.d.ts

@@ -8,4 +8,4 @@ export type SkeletonListProps = {
     classModifierList?: ComponentPropsWithRef<typeof List>["classModifier"];
     isLoading: boolean;
 } & PropsWithChildren;
-export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => 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;

package/dist/Stepper/Stepper.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+import { HTMLAttributes } from "react";
 export type StepperProps = {
     currentStepProgress?: number;
     currentStep: number;

package/dist/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId } from "react";
-import classNames from "classnames";
 import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
+import classNames from "classnames";
+import { useCallback, useId } from "react";
 const INITIAL_STEPPER_PROGRESS = 10;
 const MAX_STEPPER_PROGRESS = 100;
 export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible = true, isSubtitleVisible = true, className, ...props }) => {
@@ -18,5 +18,5 @@ export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, curren
         }
         return 0;
     }, [currentStep, currentStepProgress]);
-    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle })), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
+    return (_jsxs("div", { className: "af-stepper-client", ...props, children: [_jsxs("div", { children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle }))] }), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
 };

package/dist/Tag/Tag.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { getComponentClassName } from "../utilities";
 export const Tag = ({ children, className, classModifier = "", ...divProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-tag"), [className, classModifier]);
+    const componentClassName = useMemo(() => getComponentClassName("af-tag", className, classModifier), [className, classModifier]);
     return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
 };

package/dist/Title/Title.js

@@ -5,7 +5,7 @@ import { getComponentClassName } from "../utilities";
 import { TitleSize } from "./constants";
 import { TitleWithSubtitles } from "./TitleWithSubtitles";
 export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, level = size === TitleSize.L ? 2 : 1, }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier ? `${classModifier} ${size}` : size, "af-title"), [classModifier, className, size]);
+    const componentClassName = useMemo(() => getComponentClassName("af-title", className, classModifier ? `${classModifier} ${size}` : size), [classModifier, className, size]);
     const TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, level: level, ...args })), [title, firstSubtitle, level]);
     return (_jsx("header", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle })] })) : (_jsx(TitleWithSubtitlesPart, {})) }));
 };

package/dist/Title/TitleWithSubtitles.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { TitleLevel } from ".";
 type TitleTextProps = {
     title: ReactNode;

package/dist/index.d.ts

@@ -4,26 +4,31 @@ export { Accordion } from "./Accordion";
 export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
 export type { AlertType } from "./Alert/Alert";
-export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
+export { Button, buttonVariants, type ButtonVariants } from "./Button/Button";
 export { Card } from "./Card";
+export { Divider } from "./Divider";
 export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
 export { FileUpload } from "./Form/FileUpload";
+export { InputError } from "./Form/InputError";
 export { Radio, RadioSelect } from "./Form/Radio";
 export { Select } from "./Form/Select";
 export { Text as TextInput } from "./Form/Text";
 export { TextArea } from "./Form/TextArea";
+export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
 export { Header } from "./Layout/Header";
+export { NavBar } from "./Layout/Header/NavBar/NavBar";
+export { PreviousLink } from "./Layout/Header/PreviousLink";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
-export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
-export type { ButtonAction as ModalButtonAction } from "./ModalClient/type";
+export { Loader } from "./Loader/Loader";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
+export type { ModalCoreBodyProps, ModalCoreFooterProps, ModalCoreHeaderProps, ModalCoreProps, ModalProps, } from "./Modal";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -32,4 +37,3 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize, type TitleLevel } from "./Title";
-export { DebugGrid } from "./Grid/DebugGrid";

package/dist/index.js

@@ -3,25 +3,30 @@ import "@fontsource/source-sans-pro";
 export { Accordion } from "./Accordion";
 export { AccordionCore } from "./AccordionCore";
 export { Alert } from "./Alert/Alert";
-export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
+export { Button, buttonVariants } from "./Button/Button";
 export { Card } from "./Card";
+export { Divider } from "./Divider";
 export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
 export { FileUpload } from "./Form/FileUpload";
+export { InputError } from "./Form/InputError";
 export { Radio, RadioSelect } from "./Form/Radio";
 export { Select } from "./Form/Select";
 export { Text as TextInput } from "./Form/Text";
 export { TextArea } from "./Form/TextArea";
+export { DebugGrid } from "./Grid/DebugGrid";
 export { IconBg } from "./IconBg";
 export { Footer } from "./Layout/Footer/Footer";
 export { Header } from "./Layout/Header";
+export { NavBar } from "./Layout/Header/NavBar/NavBar";
+export { PreviousLink } from "./Layout/Header/PreviousLink";
 export { Link } from "./Link";
 export { List } from "./List";
 export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
 export { ContentItemDuo } from "./List/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
-export { Loader } from "./Loader";
-export { Modal } from "./ModalClient";
+export { Loader } from "./Loader/Loader";
+export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
 export { Pagination } from "./Pagination/Pagination";
 export { Skeleton } from "./Skeleton/Skeleton";
 export { SkeletonList } from "./SkeletonList/SkeletonList";
@@ -30,4 +35,3 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize } from "./Title";
-export { DebugGrid } from "./Grid/DebugGrid";

package/dist/utilities/helpers/getComponentClassName.d.ts

@@ -1 +1 @@
-export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;
+export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;

package/dist/utilities/helpers/getComponentClassName.js

@@ -1,9 +1,9 @@
 import classNames from "classnames";
-const getLastClassName = (classNameToUse) => {
-    if (!classNameToUse) {
+const getLastClassName = (defaultClassName) => {
+    if (!defaultClassName) {
         return null;
     }
-    return classNameToUse.split(" ").filter(Boolean).at(-1);
+    return defaultClassName.split(" ").filter(Boolean).at(-1);
 };
 const listClassModifier = (classModifier) => {
     if (!classModifier) {
@@ -11,17 +11,16 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
-export const getComponentClassName = (className, classModifier, defaultClassName) => {
-    const classNameToUse = className || defaultClassName;
-    if (!classNameToUse) {
+export const getComponentClassName = (defaultClassName, className, classModifier) => {
+    if (!defaultClassName) {
         return "";
     }
-    const classWithoutModifier = getLastClassName(classNameToUse);
+    const classWithoutModifier = getLastClassName(defaultClassName);
     const modifiers = listClassModifier(classModifier);
     const modifiersObject = modifiers
         .filter((it) => /\S/.test(it))
         .map((it) => {
         return `${classWithoutModifier}--${it}`;
     });
-    return classNames(classNameToUse, modifiersObject);
+    return classNames(defaultClassName, className, modifiersObject);
 };

package/package.json

@@ -1,15 +1,27 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-ci.1",
+  "version": "1.0.5-ci.100",
   "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "development": {
+        "import": "./src/index.ts"
+      },
+      "default": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
     },
     "./utilities": {
-      "import": "./dist/utilities.js",
-      "types": "./dist/utilities.d.ts"
+      "development": {
+        "import": "./src/utilities.ts"
+      },
+      "default": {
+        "import": "./dist/utilities.js",
+        "types": "./dist/utilities.d.ts"
+      }
     }
   },
   "files": [
@@ -19,18 +31,15 @@
     "prebuild": "rimraf dist",
     "build": "tsc -p tsconfig.build.json",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
-    "start:storybook": "storybook dev -p 6009",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
     "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check",
     "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write",
-    "tsc": "tsc --noEmit",
+    "check-types": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:ci": "vitest run --coverage",
-    "chromatic": "npx chromatic"
+    "test:ci": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -45,7 +54,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.1",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.100",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -55,74 +64,30 @@
     }
   },
   "dependencies": {
+    "@axa-fr/design-system-apollo-react": "*",
     "@fontsource/source-sans-pro": "^5.0.8",
     "@tanem/svg-injector": "^10.1.68",
-    "@types/react-dom": "^18.2.24",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
-    "rc-slider": "^11.1.7",
-    "react-select": "^5.9.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@material-symbols/svg-400": "*",
-    "@storybook/addon-docs": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/dompurify": "^3.0.5",
-    "@types/jest": "^29.5.12",
-    "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.1.2",
-    "chromatic": "^11.12.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "jest-axe": "^8.0.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.3.5",
-    "tsc-files": "^1.1.4",
-    "typescript": "^5.6.3",
-    "vitest": "^2.0.5"
+    "rc-slider": "^11.1.7"
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
-    "*.(ts|tsx)": "tsc-files --noEmit",
-    "*.mdx": "prettier --write"
+    "*.(ts|tsx)": "tsc-files --noEmit"
   },
   "volta": {
-    "node": "20.10.0",
-    "npm": "10.2.5"
+    "extends": "../../../package.json"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/jest-axe": "^3.5.9",
+    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
+    "jest-axe": "^9.0.0",
+    "vitest": "^3.0.7"
   }
 }

package/dist/Form/Select/CustomOption.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { OptionProps } from "react-select";
-declare const CustomOption: React.FC<OptionProps>;
-export { CustomOption };

package/dist/Form/Select/CustomOption.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { components } from "react-select";
-const CustomOption = ({ getValue, ...otherProps }) => {
-    const value = useMemo(() => getValue(), [getValue]);
-    return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
-};
-export { CustomOption };

package/dist/Form/Select/DropdownIndicator.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { DropdownIndicatorProps } from "react-select";
-declare const DropdownIndicator: React.FC<DropdownIndicatorProps>;
-export { DropdownIndicator };

package/dist/Form/Select/DropdownIndicator.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
-import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
-import { components } from "react-select";
-import classNames from "classnames";
-import { Svg } from "../../Svg";
-const DropdownIndicator = (props) => {
-    const { selectProps: { menuIsOpen, isDisabled }, } = props;
-    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
-};
-export { DropdownIndicator };

package/dist/Grid/components/Card.d.ts

@@ -1,3 +0,0 @@
-export declare const Card: ({ title }: {
-    title: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/Card.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Card = ({ title }) => (_jsxs("div", { className: "box-card", children: [_jsx("h3", { children: title }), _jsx("p", { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptatibus dolor ratione, ab natus reprehenderit itaque corporis officia ad necessitatibus enim et voluptatem reiciendis rem optio laudantium iure esse vero." })] }));

package/dist/Grid/components/Contacts.d.ts

@@ -1 +0,0 @@
-export declare const Contacts: () => import("react/jsx-runtime").JSX.Element[];

package/dist/Grid/components/Contacts.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import callIcon from "@material-symbols/svg-400/outlined/call-fill.svg";
-import mailIcon from "@material-symbols/svg-400/outlined/mail-fill.svg";
-import { List, Svg, ContentItemMono, ClickItem, createClickItemParent, } from "../..";
-export const Contacts = () => [...Array(6).keys()].map((_, index) => (_jsxs(List, { classModifier: "first-separator-full-width", children: [_jsx(ContentItemMono, { secondaryText: "agent g\u00E9n\u00E9ral", tertiaryText: "Doe", children: "John Doe" }), index % 3 === 0 && (_jsx(ClickItem, { icon: _jsx(Svg, { src: callIcon, "aria-hidden": true }), classModifier: "small", parentClickComponent: createClickItemParent("a", {
-                href: `tel:0601010101`,
-            }), children: "06 01 01 01 01" })), _jsx(ClickItem, { icon: _jsx(Svg, { src: mailIcon, "aria-hidden": true }), classModifier: "small", parentClickComponent: createClickItemParent("a", {
-                href: `mailto:john.doe@axa.fr`,
-            }), children: "john.doe@axa.fr" })] }, "John Doe-agent")));

package/dist/Grid/components/MainTitle.d.ts

@@ -1 +0,0 @@
-export declare const MainTitle: () => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/components/MainTitle.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import article from "@material-symbols/svg-400/outlined/article-fill.svg";
-import { Svg, Title } from "../..";
-export const MainTitle = () => (_jsx(Title, { icon: _jsx(Svg, { src: article, "aria-hidden": true }), firstSubtitle: "Sous Titre 1", secondSubtitle: "Sous Titre 2", children: "Titre de la page" }));

package/dist/Grid/components/MyFooter.d.ts

@@ -1 +0,0 @@
-export declare const MyFooter: () => import("react/jsx-runtime").JSX.Element;