@axa-fr/design-system-look-and-feel-react 1.0.4 → 1.0.5-alpha.243

package/dist/Accordion/AccordionTagDateContainer.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "react";
-import { Tag } from "../Tag";
+import { Tag } from "../Tag/Tag";
 type AccordionTagDateContainerProps = {
     tagLabel?: string;
     tagProps?: ComponentProps<typeof Tag>;

package/dist/Accordion/AccordionTagDateContainer.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Tag } from "../Tag";
+import { Tag } from "../Tag/Tag";
 export const AccordionTagDateContainer = ({ tagLabel, tagProps, dateLabel, dateProps, }) => {
     const isShowing = useMemo(() => Boolean(tagLabel) || Boolean(dateLabel), [tagLabel, dateLabel]);
     if (!isShowing) {
         return null;
     }
-    return (_jsxs("div", { className: "af-accordion__tag-date-container", children: [tagLabel && (_jsx("div", { className: "af-accordion__tag-container", children: _jsx(Tag, { classModifier: "warning", ...tagProps, children: tagLabel }) })), dateLabel && (_jsx("time", { className: "af-accordion__date", ...dateProps, children: dateLabel }))] }));
+    return (_jsxs("div", { className: "af-accordion__tag-date-container", children: [tagLabel && (_jsx("div", { className: "af-accordion__tag-container", children: _jsx(Tag, { variant: "warning", ...tagProps, children: tagLabel }) })), dateLabel && (_jsx("time", { className: "af-accordion__date", ...dateProps, children: dateLabel }))] }));
 };

package/dist/AccordionCore/AccordionCore.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, } from "react";
 import { getComponentClassName } from "../utilities";
 export const AccordionCore = ({ summary, children, className, classModifier, summaryProps, isOpen, onClick, ...detailsProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-accordion"), [classModifier, className]);
+    const componentClassName = useMemo(() => getComponentClassName("af-accordion", className, classModifier), [classModifier, className]);
     const handleToggle = useCallback((event) => {
         if (onClick) {
             event.preventDefault();

package/dist/Alert/Alert.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
+import { Button } from "../Button/Button";
 import { Link } from "../Link/Link";
-import { ButtonClient } from "../Button/Button";
 type Headings = "h2" | "h3" | "h4" | "h5" | "h6";
 export declare const alertTypes: {
     readonly validation: "validation";
@@ -14,7 +14,7 @@ export type AlertType = keyof typeof alertTypes;
 type AlertProps = {
     type: AlertType;
     title?: string;
-    action?: ReactElement<typeof Link | typeof ButtonClient>;
+    action?: ReactElement<typeof Link | typeof Button>;
     iconSize?: number;
     heading?: Headings;
 } & ComponentPropsWithoutRef<"div">;

package/dist/Alert/Alert.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, } from "react";
-import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
-import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
 import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
 import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
-import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
+import { useMemo, } from "react";
 import { Svg } from "../Svg";
 export const alertTypes = {
     validation: "validation",
@@ -23,5 +23,5 @@ const getIconFromType = (type) => ({
 })[type] || wbIncandescentOutlined;
 export const Alert = ({ type = alertTypes.information, title, children, action, iconSize = 24, heading: Heading = "h4", }) => {
     const icon = useMemo(() => getIconFromType(type), [type]);
-    return (_jsxs("div", { className: `af-alert af-alert--${type}`, role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon", "aria-hidden": true }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx(Heading, { className: "af-alert__title", children: title }), children, action && _jsx("p", { className: "af-alert__action", children: action })] })] }));
+    return (_jsxs("div", { className: `af-alert af-alert--${type}`, role: "alert", children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon", "aria-hidden": true }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx(Heading, { className: "af-alert__title", children: title }), children, action && _jsx("div", { className: "af-alert__action", children: action })] })] }));
 };

package/dist/BasePicture/BasePicture.d.ts

@@ -0,0 +1 @@
+export { BasePicture } from "@axa-fr/design-system-apollo-react/lf";

package/dist/BasePicture/BasePicture.js

@@ -0,0 +1 @@
+export { BasePicture } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Button/Button.d.ts

@@ -1,17 +1,2 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Button/Button.scss";
-import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
-export declare enum Variants {
-    primary = "primary",
-    business = "primary-business",
-    secondary = "secondary",
-    secondaryError = "secondary-error",
-    tertiary = "tertiary",
-    ghost = "ghost"
-}
-type ButtonProps = {
-    variant?: Variants;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
-} & ComponentPropsWithoutRef<"button">;
-export declare const ButtonClient: ({ children, className, disabled, variant, iconLeft, iconRight, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export { Button, buttonVariants } from "@axa-fr/design-system-apollo-react/lf";
+export type { ButtonVariants } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Button/Button.js

@@ -1,15 +1 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Button/Button.scss";
-import classNames from "classnames";
-export var Variants;
-(function (Variants) {
-    Variants["primary"] = "primary";
-    Variants["business"] = "primary-business";
-    Variants["secondary"] = "secondary";
-    Variants["secondaryError"] = "secondary-error";
-    Variants["tertiary"] = "tertiary";
-    Variants["ghost"] = "ghost";
-})(Variants || (Variants = {}));
-export const ButtonClient = ({ children, className, disabled, variant, iconLeft, iconRight, ...args }) => {
-    return (_jsxs("button", { className: classNames("af-btn-client", variant && `af-btn-client--${variant.toString()}`, className), disabled: disabled, type: "button", ...args, children: [iconLeft, children, iconRight] }));
-};
+export { Button, buttonVariants } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Card/Card.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { getComponentClassName } from "../utilities";
 export const Card = ({ children, className, classModifier, onClick, ...otherProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-card"), [className, classModifier]);
+    const componentClassName = useMemo(() => getComponentClassName("af-card", className, classModifier), [className, classModifier]);
     const Component = useMemo(() => (onClick ? "button" : "section"), [onClick]);
     return (_jsx(Component, { className: componentClassName, ...(onClick ? { type: "button", onClick } : {}), ...otherProps, children: children }));
 };

package/dist/CardMessage/CardMessage.d.ts

@@ -0,0 +1 @@
+export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "@axa-fr/design-system-apollo-react/lf";

package/dist/CardMessage/CardMessage.js

@@ -0,0 +1 @@
+export { CardMessage, cardMessageVariants, } from "@axa-fr/design-system-apollo-react/lf";

package/dist/ClickIcon/ClickIcon.d.ts

@@ -0,0 +1 @@
+export { ClickIcon } from "@axa-fr/design-system-apollo-react/lf";

package/dist/ClickIcon/ClickIcon.js

@@ -0,0 +1 @@
+export { ClickIcon } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Divider/Divider.d.ts

@@ -1,6 +1 @@
-type DividerProps = {
-    className?: string;
-    classModifier?: string;
-};
-export declare const Divider: ({ className, classModifier }: DividerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export { Divider } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Divider/Divider.js

@@ -1,7 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { getComponentClassName } from "../utilities";
-export const Divider = ({ className, classModifier }) => {
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-divider"), [className, classModifier]);
-    return _jsx("hr", { className: componentClassName });
-};
+export { Divider } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
 import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
 import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
@@ -10,7 +10,7 @@ const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps },
     const idError = useId();
     let inputId = useId();
     inputId = inputProps.id || inputId;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": !!errorMessage }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": Boolean(errorMessage) }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/Form/Checkbox/CheckboxSelect.d.ts

@@ -1,6 +1,6 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
-import React, { type ReactNode } from "react";
-type CheckboxProps = {
+import React, { ComponentPropsWithRef, type ReactNode } from "react";
+type CheckboxProps = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;
@@ -14,5 +14,5 @@ type CheckboxProps = {
     errorMessage?: string;
     onChange?: React.ChangeEventHandler;
 };
-export declare const CheckboxSelect: ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxSelect: ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Checkbox/CheckboxSelect.js

@@ -5,7 +5,10 @@ import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_b
 import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { useId } from "react";
 import { Svg } from "../../Svg";
-export const CheckboxSelect = ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
+import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
+export const CheckboxSelect = ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
+    const componentClassName = getComponentClassName("af-checkbox__container", className);
+    const checkboxGroupClassName = getComponentClassName(`af-checkbox af-checkbox-select af-checkbox-select--${type}`, className);
     const optionId = useId();
-    return (_jsxs("div", { className: "af-checkbox__container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup })), _jsx("div", { role: "group", className: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-checkbox__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: checkboxGroupClassName, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
 };

package/dist/Form/Date/Date.d.ts

@@ -0,0 +1 @@
+export { DateInput } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/Date/Date.js

@@ -0,0 +1 @@
+export { DateInput } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/FileUpload/FileUpload.d.ts

@@ -6,27 +6,29 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
     buttonLabel?: string;
     dropzoneDescription?: string;
     instructions?: string;
+    filesListLabel?: string;
     required?: boolean;
-    globalError: string;
-    errors: Array<{
+    globalError?: string;
+    errors?: Array<{
         id?: string | undefined;
         message: string;
     }>;
-    files: Array<{
+    files?: Array<{
         id: string;
         name: string;
         size: number;
         isLoading: boolean;
     }>;
-    accept: string;
+    accept?: string;
     isMobile?: boolean;
+    withPadding?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
     onView?: (id: string) => void;
     onDelete?: (id: string) => void;
 };
 declare const FileUpload: {
-    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, buttonLabel, instructions, dropzoneDescription, filesListLabel, required, files, errors, globalError, isMobile, withPadding, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { FileUpload };

package/dist/Form/FileUpload/FileUpload.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
 import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
@@ -8,46 +8,37 @@ import error from "@material-symbols/svg-400/outlined/error-fill.svg";
 import errorO from "@material-symbols/svg-400/outlined/error.svg";
 import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
 import classNames from "classnames";
-import { Svg } from "../../Svg";
-import { Loader } from "../../Loader";
-import { Button } from "../..";
-import { Variants } from "../../Button/Button";
+import { Spinner, Svg, Button } from "@axa-fr/design-system-apollo-react/lf";
 import { InputError } from "../InputError";
 function getReadableFileSizeString(fileSizeInBytes) {
     let i = -1;
     let fileSizeInBytesCopy = fileSizeInBytes;
     const byteUnits = [" Ko", " Mo", " Go"];
     do {
-        fileSizeInBytesCopy /= 1024;
+        fileSizeInBytesCopy /= 1000;
         i += 1;
-    } while (fileSizeInBytesCopy > 1024);
+    } while (fileSizeInBytesCopy > 1000);
     return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
 }
-const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
+const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, filesListLabel, required, files, errors, globalError, isMobile, withPadding = false, onView, onDelete, ...otherProps }) => {
     const idError = useId();
     const getIcon = (isInError, isLoading) => {
         if (isInError) {
             return (_jsx(Svg, { src: error, className: "af-form__file-title-container-icon-error" }));
         }
         if (isLoading) {
-            return _jsx(Loader, { size: 18, border: 2 });
+            return _jsx(Spinner, { size: 24 });
         }
         return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
-                        const effectiveSize = getReadableFileSizeString(size);
-                        const isInError = errors.some((fileError) => fileError.id === fileId);
-                        const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
-                        return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
-                                                        if (e.key === "Enter") {
-                                                            onView(fileId);
-                                                        }
-                                                    }, className: "af-form__file-actions-icon", src: visibility })), onDelete && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Supprimer", onClick: () => onDelete(fileId), onKeyDown: (e) => {
-                                                        if (e.key === "Enter") {
-                                                            onDelete(fileId);
-                                                        }
-                                                    }, className: "af-form__file-actions-icon", src: close }))] })] }), isInError && (_jsxs("small", { className: "af-form__file-error", children: [_jsx(Svg, { src: errorO, className: "af-form__file-error-icon", width: 18 }), errorMessage] }))] }, fileId));
-                    }) }) })] }));
+    return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: "tertiary", onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), instructions && (_jsx("small", { className: "af-form__file-input-help", children: instructions })), files && files.length !== 0 && (_jsxs("div", { className: "custom-table-file af-file-table", children: [filesListLabel && (_jsx("div", { className: "af-form__group--label af-form__files-list-label", children: filesListLabel })), _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
+                            const effectiveSize = getReadableFileSizeString(size);
+                            const isInError = errors
+                                ? errors.some((fileError) => fileError.id === fileId)
+                                : false;
+                            const errorMessage = errors?.find((fileError) => fileError.id === fileId)?.message;
+                            return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Button, { "aria-label": "Visualiser", onClick: () => onView(fileId), variant: "ghost", iconLeft: _jsx(Svg, { src: visibility }) })), onDelete && (_jsx(Button, { "aria-label": "Supprimer", onClick: () => onDelete(fileId), variant: "ghost", iconLeft: _jsx(Svg, { src: close }) }))] })] }), isInError && (_jsxs("small", { className: "af-form__file-error", children: [_jsx(Svg, { src: errorO, className: "af-form__file-error-icon", width: 18 }), errorMessage] }))] }, fileId));
+                        }) })] }))] }));
 };
 FileUpload.displayName = "FileUpload";
 export { FileUpload };

package/dist/Form/ItemLabel/ItemLabel.d.ts

@@ -0,0 +1 @@
+export { ItemLabel } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/ItemLabel/ItemLabel.js

@@ -0,0 +1 @@
+export { ItemLabel } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/ItemMessage/ItemMessage.d.ts

@@ -0,0 +1 @@
+export { ItemMessage } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/ItemMessage/ItemMessage.js

@@ -0,0 +1 @@
+export { ItemMessage } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/Radio/Radio.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
 import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
@@ -9,7 +9,7 @@ const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
     let inputId = useId();
     inputId = inputProps.id || inputId;
     const idError = useId();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), "aria-errormessage": idError, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
+    return (_jsxs("div", { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), "aria-errormessage": idError, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && _jsx(InputError, { id: idError, message: errorMessage })] }));
 });
 Radio.displayName = "Radio";
 export { Radio };

package/dist/Form/Radio/RadioSelect.d.ts

@@ -1,8 +1,9 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import React, { ComponentPropsWithRef, ReactNode } from "react";
-type RadioSelectProps = {
+type RadioSelectProps = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
     label?: string;
+    description?: string;
     isRequired?: boolean;
     options: ({
         label: ReactNode;

package/dist/Form/Radio/RadioSelect.js

@@ -5,7 +5,10 @@ import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_butt
 import { forwardRef, useCallback, useId, } from "react";
 import { Svg } from "../../Svg";
 import { InputError } from "../InputError";
-export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
+import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
+export const RadioSelect = forwardRef(({ className, id, label, description, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
+    const componentClassName = getComponentClassName("af-radio__container", className);
+    const radioGroupClassName = getComponentClassName(`af-radio af-radio-select af-radio-select--${type}`, className);
     const generatedId = useId();
     const optionId = id || generatedId;
     const getRef = useCallback((index, reference, val, inputVal) => {
@@ -14,6 +17,6 @@ export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onCha
         }
         return null;
     }, []);
-    return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-radio__label-container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), description && (_jsx("span", { className: "af-radio__description", children: description }))] }), _jsx("div", { ...rest, role: "radiogroup", className: radioGroupClassName, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description: inputDescription, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), inputDescription && _jsx("span", { children: inputDescription }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
 });
 RadioSelect.displayName = "RadioSelect";

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

@@ -1,27 +1 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
-import ReactSelect, { ActionMeta, SingleValue } from "react-select";
-import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
-type Option = {
-    label: string;
-    value: string | number;
-};
-type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
-    id: string;
-    label: string;
-    options: {
-        label: string;
-        value?: string | number | readonly string[];
-    }[];
-    value: Option | null;
-    errorLabel?: string;
-    placeholder?: string;
-    noOptionsMessage?: string;
-    onChange: (newValue: SingleValue<Option>, actionMeta: ActionMeta<string>) => void;
-    disabled?: boolean;
-    required?: boolean;
-};
-declare const Select: {
-    ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Select };
+export { Select } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/Select/Select.js

@@ -1,27 +1 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
-import ErrorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import ReactSelect from "react-select";
-import classNames from "classnames";
-import { DropdownIndicator } from "./DropdownIndicator";
-import { Svg } from "../../Svg";
-import { CustomOption } from "./CustomOption";
-const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }) => {
-    return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, "aria-errormessage": `${id}__error`, "aria-invalid": Boolean(errorLabel), unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
-                    DropdownIndicator,
-                    Option: CustomOption,
-                }, classNames: {
-                    control: () => "af-form__input-select",
-                    menu: () => "af-form__input-select-menu",
-                    menuList: () => "af-form__select-menu-list",
-                    container: ({ isFocused, isDisabled, selectProps: { menuIsOpen }, }) => classNames("af-form__input-select-container", isFocused && "af-form__input-select-container-focused", isDisabled && "af-form__input-select-container-disabled", errorLabel &&
-                        !isFocused &&
-                        !menuIsOpen &&
-                        "af-form__input-select-container-error"),
-                    option: ({ isSelected, isFocused, }) => classNames("af-form__input-select-menu-options", isSelected && "af-form__input-select-menu-options-selected", isFocused && "af-form__input-select-menu-options-focused"),
-                    singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
-                    dropdownIndicator: () => "af-form__select-dropdown-indicator",
-                }, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { id: `${id}__error`, className: "af-form__select-error", "aria-live": "assertive", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
-};
-Select.displayName = "Select";
-export { Select };
+export { Select } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/Text/Text.d.ts

@@ -1,13 +1 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
-import { ComponentPropsWithRef, MouseEventHandler } from "react";
-type Props = ComponentPropsWithRef<"input"> & {
-    classModifier?: string;
-    helper?: string;
-    error?: string;
-    description?: string;
-    label?: string;
-    buttonLabel?: string;
-    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
-};
-declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export { Text };
+export { TextInput } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/Text/Text.js

@@ -1,18 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
-import { forwardRef, useId, } from "react";
-import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
-import { Button } from "../..";
-import { Variants } from "../../Button/Button";
-import { Svg } from "../../Svg";
-import { getComponentClassName } from "../../utilities";
-import { InputError } from "../InputError";
-const Text = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
-    let inputId = useId();
-    inputId = otherProps.id || inputId;
-    const idError = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [(label || description || buttonLabel) && (_jsxs("div", { className: "af-form__label-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel }))] })), _jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
-});
-Text.displayName = "Text";
-export { Text };
+export { TextInput } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/TextArea/TextArea.d.ts

@@ -1,12 +1 @@
-import { ComponentPropsWithRef, MouseEventHandler } from "react";
-type Props = ComponentPropsWithRef<"textarea"> & {
-    classModifier?: string;
-    helper?: string;
-    error?: string;
-    description?: string;
-    label?: string;
-    buttonLabel?: string;
-    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
-};
-declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
-export { TextArea };
+export { TextArea } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/TextArea/TextArea.js

@@ -1,16 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, } from "react";
-import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
-import { getComponentClassName } from "../core";
-import { Button, Svg } from "../..";
-import { Variants } from "../../Button/Button";
-import { InputError } from "../InputError";
-const TextArea = forwardRef(({ className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-textarea");
-    let inputId = useId();
-    inputId = otherProps.id || inputId;
-    const idError = useId();
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: inputId, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("textarea", { id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": idError, "aria-invalid": Boolean(error), ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: idError, message: error })] }));
-});
-TextArea.displayName = "TextArea";
-export { TextArea };
+export { TextArea } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Form/core/FieldForm.d.ts

@@ -49,7 +49,7 @@ export declare const eventWrapper: ({ wrapper, props }: EventWrapperProps) => {
     onFocus: (ev: BaseSyntheticEvent) => void;
 };
 type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
-    child: ReactElement;
+    child: ReactElement<Record<string, unknown>>;
     classModifier: string;
     name: string;
     getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;

package/dist/Form/core/FieldForm.js

@@ -101,7 +101,8 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
     };
     if (child.props.children) {
         const subChildren = renderedChildren({
-            children: child.props.children,
+            children: child.props
+                .children,
             wrapper,
             message,
             messageType,
@@ -119,7 +120,7 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
             messageType,
             classModifier: props.classModifier,
             wrapper,
-            child,
+            child: child,
         }),
     });
 });

package/dist/Grid/DebugGrid.d.ts

@@ -1,5 +1 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Grid/DebugGrid.scss";
-export declare const DebugGrid: ({ cols, isCheckedByDefault, }: {
-    cols?: number;
-    isCheckedByDefault?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export { DebugGrid } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Grid/DebugGrid.js

@@ -1,9 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Grid/DebugGrid.scss";
-import { useState } from "react";
-import { Checkbox } from "../Form/Checkbox";
-export const DebugGrid = ({ cols = 12, isCheckedByDefault = false, }) => {
-    const [checked, setChecked] = useState(isCheckedByDefault);
-    const handleChecked = () => setChecked(!checked);
-    return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { className: "af-checkbox af-checkbox-select af-checkbox-select--debuggrid", label: "Grid", name: "debuggrid", checked: checked, onClick: handleChecked }), _jsx("div", { className: "debug-grid", children: _jsx("div", { className: "grid", children: [...Array(cols).keys()].map((col) => (_jsx("div", { className: "cols" }, col))) }) })] }));
-};
+export { DebugGrid } from "@axa-fr/design-system-apollo-react/lf";

package/dist/Icon/Icon.d.ts

@@ -0,0 +1 @@
+export { Icon, iconVariants, type IconVariants, iconSizeVariants, type IconSizeVariants, } from "@axa-fr/design-system-apollo-react/lf";