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

package/dist/Stepper/Stepper.js

@@ -0,0 +1,22 @@
+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";
+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 }) => {
+    const stepperId = useId();
+    const getCurrentProgress = useCallback((index) => {
+        if (index < currentStep) {
+            return MAX_STEPPER_PROGRESS;
+        }
+        if (index === currentStep) {
+            if (currentStepProgress === 0) {
+                return INITIAL_STEPPER_PROGRESS;
+            }
+            return currentStepProgress;
+        }
+        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}`))) })] }));
+};

package/dist/Svg/Svg.d.ts

@@ -0,0 +1,7 @@
+import { type SVGAttributes } from "react";
+type SvgProps = SVGAttributes<SVGSVGElement> & {
+    src: string;
+    alt?: string;
+};
+export declare const Svg: ({ src, alt, width, height, ...props }: SvgProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Svg/Svg.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { svgInjector } from "./svgInjector";
+const cloneAttributes = (from, to) => {
+    const attributes = from.getAttributeNames();
+    attributes.forEach((attribute) => {
+        to.setAttribute(attribute, from.getAttribute(attribute));
+    });
+};
+export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
+    const rootRef = useRef(null);
+    const [hasError, setHasError] = useState(false);
+    useLayoutEffect(() => {
+        if (hasError) {
+            setHasError(false);
+        }
+    }, [src]);
+    useLayoutEffect(() => {
+        if (hasError) {
+            return;
+        }
+        const root = rootRef.current;
+        if (root) {
+            const parent = document.createElement("div");
+            const svg = document.createElement("svg");
+            parent.appendChild(svg);
+            cloneAttributes(root, svg);
+            svg.setAttribute("width", width.toString());
+            svg.setAttribute("height", height.toString());
+            svgInjector(svg, {
+                afterEach: (error, svgInject) => {
+                    if (error) {
+                        setHasError(true);
+                    }
+                    if (svgInject) {
+                        root.innerHTML = svgInject.innerHTML;
+                        cloneAttributes(svgInject, root);
+                    }
+                },
+            });
+        }
+    }, [src, width, height, hasError]);
+    if (hasError) {
+        return alt ? (_jsx("span", { ...props, children: alt })) : null;
+    }
+    return _jsx("svg", { ref: rootRef, "data-src": src, ...props });
+};

package/dist/Svg/index.d.ts

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

package/dist/Svg/index.js

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

package/dist/Svg/svgInjector.d.ts

@@ -0,0 +1,12 @@
+import { type AfterAll, type BeforeEach, type Errback, type EvalScripts } from "@tanem/svg-injector";
+type Options = {
+    afterAll?: AfterAll;
+    afterEach?: Errback;
+    beforeEach?: BeforeEach;
+    cacheRequests?: boolean;
+    evalScripts?: EvalScripts;
+    httpRequestWithCredentials?: boolean;
+    renumerateIRIElements?: boolean;
+};
+export declare const svgInjector: (element: HTMLElement | SVGSVGElement | null, { beforeEach, ...options }?: Options) => void;
+export {};

package/dist/Svg/svgInjector.js

@@ -0,0 +1,28 @@
+import { SVGInjector, } from "@tanem/svg-injector";
+import DOMPurify from "dompurify";
+const attributesToRestore = ["fill", "stroke"];
+const restoreAttributes = (element, svg) => {
+    const attributes = {};
+    element?.getAttributeNames().forEach((attribute) => {
+        if (attribute.startsWith("aria-") ||
+            attributesToRestore.includes(attribute)) {
+            attributes[attribute] = element.getAttribute(attribute);
+        }
+    });
+    Object.keys(attributes).forEach((attribute) => {
+        svg.setAttribute(attribute, attributes[attribute]);
+    });
+};
+export const svgInjector = (element, { beforeEach = () => { }, ...options } = {}) => {
+    SVGInjector(element, {
+        ...options,
+        beforeEach: (svg) => {
+            DOMPurify.sanitize(svg, {
+                USE_PROFILES: { svg: true, svgFilters: true },
+                IN_PLACE: true,
+            });
+            restoreAttributes(element, svg);
+            beforeEach(svg);
+        },
+    });
+};

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,16 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Tabs/Tabs.scss";
+import { ReactNode } from "react";
+export declare enum Direction {
+    center = "center"
+}
+type TabsProps = {
+    items: {
+        title: string;
+        content: string | ReactNode;
+        icon?: ReactNode;
+    }[];
+    preSelectedTabIndex?: number;
+    direction?: Direction;
+};
+export declare const TabsClient: ({ items, preSelectedTabIndex, direction, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tabs/Tabs.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Tabs/Tabs.scss";
+import classNames from "classnames";
+import { useCallback, useRef, useState } from "react";
+export var Direction;
+(function (Direction) {
+    Direction["center"] = "center";
+})(Direction || (Direction = {}));
+export const TabsClient = ({ items, preSelectedTabIndex, direction, }) => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTabIndex || 0);
+    const buttonRefs = useRef([]);
+    const tablistRef = useRef(null);
+    const totalTabs = items.length;
+    const isActive = (index) => index === selectedTabIndex;
+    const onChangeTab = useCallback((e) => {
+        const firstTabIndex = 0;
+        const lastTabIndex = totalTabs - 1;
+        const goToNextTab = (nextTabIndex) => {
+            setSelectedTabIndex(nextTabIndex);
+            buttonRefs.current[nextTabIndex].focus();
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        switch (e.key) {
+            case "ArrowRight":
+                goToNextTab(selectedTabIndex < lastTabIndex
+                    ? selectedTabIndex + 1
+                    : firstTabIndex);
+                break;
+            case "ArrowLeft":
+                goToNextTab(selectedTabIndex > firstTabIndex
+                    ? selectedTabIndex - 1
+                    : lastTabIndex);
+                break;
+            case "Home":
+                goToNextTab(firstTabIndex);
+                break;
+            case "End":
+                goToNextTab(lastTabIndex);
+                break;
+            default:
+                break;
+        }
+    }, [selectedTabIndex, totalTabs]);
+    return (_jsxs("div", { className: classNames("af-tabs-client", direction === Direction.center ? `af-tabs-client--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map((item, index) => (_jsxs("button", { role: "tab", id: `tab-${index}`, "aria-selected": isActive(index), "aria-controls": `tabpanel-${index}`, onKeyDown: onChangeTab, onClick: () => setSelectedTabIndex(index), ref: (element) => {
+                        buttonRefs.current[index] = element;
+                    }, type: "button", tabIndex: isActive(index) ? 0 : -1, children: [item.icon, _jsx("span", { children: item.title })] }, `tab-${item.title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, children: item.content }, `tabpanel-${item.title}`)))] }));
+};

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+type TagProps = ComponentProps<"div"> & {
+    classModifier?: string;
+};
+export declare const Tag: ({ children, className, classModifier, ...divProps }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tag/Tag.js

@@ -0,0 +1,7 @@
+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]);
+    return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
+};

package/dist/Tag/index.d.ts

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

package/dist/Tag/index.js

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

package/dist/Title/Title.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import { TitleSize, TitleLevel } from "./constants";
+type TitleProps = {
+    children: ReactNode;
+    firstSubtitle?: string;
+    secondSubtitle?: string;
+    icon?: ReactNode;
+    className?: string;
+    classModifier?: string;
+    size?: TitleSize;
+    level?: TitleLevel;
+};
+export declare const Title: ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size, level, }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Title/Title.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, } from "react";
+import { IconBg } from "..";
+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 TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, ...args })), [title, firstSubtitle]);
+    return (_jsx("div", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx("div", { className: "af-title__text-container", children: _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle, level: level }) })] })) : (_jsx(TitleWithSubtitlesPart, { level: level })) }));
+};

package/dist/Title/TitleWithSubtitles.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import { TitleLevel } from "./constants";
+type TitleTextProps = {
+    title: ReactNode;
+    firstSubtitle?: string;
+    secondSubtitle?: string;
+    level?: TitleLevel;
+};
+export declare const TitleWithSubtitles: ({ title, firstSubtitle, secondSubtitle, level, }: TitleTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Title/TitleWithSubtitles.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+export const TitleWithSubtitles = ({ title, firstSubtitle, secondSubtitle, level = 1, }) => {
+    const HLevel = useMemo(() => `h${level}`, [level]);
+    return (_jsxs(_Fragment, { children: [_jsx(HLevel, { className: "af-title__title", children: title }), firstSubtitle && (_jsx("span", { className: "af-title__subtitle", children: firstSubtitle })), secondSubtitle && (_jsx("span", { className: "af-title__subtitle", children: secondSubtitle }))] }));
+};

package/dist/Title/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum TitleSize {
+    XL = "xl",
+    L = "l"
+}
+export type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/Title/constants.js

@@ -0,0 +1,5 @@
+export var TitleSize;
+(function (TitleSize) {
+    TitleSize["XL"] = "xl";
+    TitleSize["L"] = "l";
+})(TitleSize || (TitleSize = {}));

package/dist/Title/index.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Title/Title.scss";
+export { TitleSize, type TitleLevel } from "./constants";
+export { Title } from "./Title";

package/dist/Title/index.js

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

package/dist/assets/svg/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z"></path></svg>

package/dist/assets/svg/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"></path></svg>

package/dist/assets/svg/twitterx.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>

package/dist/assets/svg/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"></path></svg>

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import "@fontsource/source-sans-pro";
+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 { Card } from "./Card";
+export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
+export { FileUpload } from "./Form/FileUpload";
+export { Radio, RadioSelect } from "./Form/Radio";
+export { Select } from "./Form/Select";
+export { Text as TextInput } from "./Form/Text";
+export { IconBg } from "./IconBg";
+export { Footer } from "./Layout/Footer/Footer";
+export { Header } from "./Layout/Header";
+export { Link } from "./Link/Link";
+export { List } from "./List";
+export { ClickItem, ClickList } from "./List/ClickList";
+export { ContentItemDuo } from "./List/ContentItemDuo";
+export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
+export { ContentTabList } from "./List/ContentTabList";
+export { Loader } from "./Loader";
+export { Modal } from "./ModalClient/Modal";
+export type { ButtonAction as ModalButtonAction } from "./ModalClient/Modal";
+export { Pagination } from "./Pagination/Pagination";
+export { Stepper } from "./Stepper/Stepper";
+export { Svg } from "./Svg";
+export { TabsClient as Tabs } from "./Tabs/Tabs";
+export { Tag } from "./Tag";
+export { Title, TitleSize, type TitleLevel } from "./Title";

package/dist/index.js

@@ -0,0 +1,28 @@
+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 { Card } from "./Card";
+export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
+export { FileUpload } from "./Form/FileUpload";
+export { Radio, RadioSelect } from "./Form/Radio";
+export { Select } from "./Form/Select";
+export { Text as TextInput } from "./Form/Text";
+export { IconBg } from "./IconBg";
+export { Footer } from "./Layout/Footer/Footer";
+export { Header } from "./Layout/Header";
+export { Link } from "./Link/Link";
+export { List } from "./List";
+export { ClickItem, ClickList } from "./List/ClickList";
+export { ContentItemDuo } from "./List/ContentItemDuo";
+export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
+export { ContentTabList } from "./List/ContentTabList";
+export { Loader } from "./Loader";
+export { Modal } from "./ModalClient/Modal";
+export { Pagination } from "./Pagination/Pagination";
+export { Stepper } from "./Stepper/Stepper";
+export { Svg } from "./Svg";
+export { TabsClient as Tabs } from "./Tabs/Tabs";
+export { Tag } from "./Tag";
+export { Title, TitleSize } from "./Title";

package/dist/utilities/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum BREAKPOINT {
+    SM = 667,
+    MD = 1023,
+    LG = 1279,
+    XL = 1599
+}

package/dist/utilities/constants.js

@@ -0,0 +1,7 @@
+export var BREAKPOINT;
+(function (BREAKPOINT) {
+    BREAKPOINT[BREAKPOINT["SM"] = 667] = "SM";
+    BREAKPOINT[BREAKPOINT["MD"] = 1023] = "MD";
+    BREAKPOINT[BREAKPOINT["LG"] = 1279] = "LG";
+    BREAKPOINT[BREAKPOINT["XL"] = 1599] = "XL";
+})(BREAKPOINT || (BREAKPOINT = {}));

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

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

package/dist/utilities/helpers/getComponentClassName.js

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

package/dist/utilities/hooks/useIsSmallScreen.d.ts

@@ -0,0 +1 @@
+export declare const useIsSmallScreen: (breakPointToCheck: number) => boolean;

package/dist/utilities/hooks/useIsSmallScreen.js

@@ -0,0 +1,14 @@
+import { useCallback, useSyncExternalStore } from "react";
+export const useIsSmallScreen = (breakPointToCheck) => {
+    const subscribe = useCallback((listener) => {
+        window.addEventListener("resize", listener);
+        return () => {
+            window.removeEventListener("resize", listener);
+        };
+    }, []);
+    const getSnapshot = useCallback(() => {
+        return window.innerWidth <= breakPointToCheck;
+    }, [breakPointToCheck]);
+    const getServerSnapshot = useCallback(() => false, []);
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};

package/dist/utilities.d.ts

@@ -0,0 +1,3 @@
+export { BREAKPOINT } from "./utilities/constants";
+export { getComponentClassName } from "./utilities/helpers/getComponentClassName";
+export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";

package/dist/utilities.js

@@ -0,0 +1,3 @@
+export { BREAKPOINT } from "./utilities/constants";
+export { getComponentClassName } from "./utilities/helpers/getComponentClassName";
+export { useIsSmallScreen } from "./utilities/hooks/useIsSmallScreen";

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@axa-fr/design-system-look-and-feel-react",
+  "version": "0.1.1",
+  "description": "",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./utilities": {
+      "import": "./dist/utilities.js",
+      "types": "./dist/utilities.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "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",
+    "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",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:ci": "vitest run --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AxaFrance/design-system.git"
+  },
+  "author": "AxaFrance",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AxaFrance/design-system/issues"
+  },
+  "homepage": "https://github.com/AxaFrance/design-system#readme",
+  "peerDependencies": {
+    "@axa-fr/design-system-look-and-feel-css": "0.1.1+277",
+    "@material-symbols/svg-400": ">= 0.19.0",
+    "react": ">= 18"
+  },
+  "peerDependenciesMeta": {
+    "@material-symbols/svg-400": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@fontsource/source-sans-pro": "^5.0.8",
+    "@tanem/svg-injector": "^10.1.68",
+    "classnames": "^2.5.1",
+    "dompurify": "^3.1.5",
+    "rc-slider": "^10.5.0",
+    "react-select": "^5.8.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/addons": "^7.6.17",
+    "@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": "^7.17.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/ui": "^2.1.2",
+    "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"
+  },
+  "lint-staged": {
+    "*.(js|jsx|ts|tsx)": "eslint --fix",
+    "*.(ts|tsx)": "tsc-files --noEmit",
+    "*.mdx": "prettier --write"
+  },
+  "volta": {
+    "node": "20.10.0",
+    "npm": "10.2.5"
+  }
+}