@axa-fr/design-system-apollo-react 3.0.1-tags-slash-2-0-4.3 → 3.1.0-alpha.1

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

@@ -1,3 +1,3 @@
 import { type FileUploadProps } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadApollo.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/FileUpload/FileUpload/FileUploadApollo.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { InputFile } from "../InputFile/InputFileApollo";
 import { FileUploadCommon } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadApollo.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export const FileUpload = forwardRef((props, ref) => (_jsx(FileUploadCommon, { ...props, ref: ref, InputFileComponent: InputFile })));
 FileUpload.displayName = "FileUpload";

package/dist/Form/FileUpload/FileUpload/FileUploadCommon.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, forwardRef, } from "react";
 import { generateId } from "../../../utilities/generateId";
+import { getClassName } from "../../../utilities/getClassName";
 export const FileUploadCommon = forwardRef(({ InputFileComponent, className, children, fileListLabel = "Vos fichiers importés :", ...props }, ref) => {
-    return (_jsx(InputFileComponent, { ...props, className: ["af-file-upload", className].filter(Boolean).join(" "), ref: ref, children: children ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "af-file-list__title", children: fileListLabel }), _jsx("ul", { className: "af-file-list", children: Children.map(children, (child) => (_jsx("li", { className: "af-file-list__item", children: child }, generateId(child)))) })] })) : null }));
+    return (_jsx(InputFileComponent, { ...props, className: getClassName({
+            baseClassName: "af-file-upload",
+            className,
+        }), ref: ref, children: children ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "af-file-list__title", children: fileListLabel }), _jsx("ul", { className: "af-file-list", children: Children.map(children, (child) => (_jsx("li", { className: "af-file-list__item", children: child }, generateId(child)))) })] })) : null }));
 });
 FileUploadCommon.displayName = "FileUploadCommon";

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

@@ -1,3 +1,3 @@
 import { type FileUploadProps } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadLF.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/FileUpload/FileUpload/FileUploadLF.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { InputFile } from "../InputFile/InputFileLF";
 import { FileUploadCommon } from "./FileUploadCommon";
-import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadLF.css";
+import "@axa-fr/design-system-apollo-css/dist/Form/FileUpload/FileUpload/FileUploadAll.css";
 export const FileUpload = forwardRef((props, ref) => (_jsx(FileUploadCommon, { ...props, ref: ref, InputFileComponent: InputFile })));
 FileUpload.displayName = "FileUpload";

package/dist/Form/FileUpload/InputFile/InputFileCommon.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import addCircleIcon from "@material-symbols/svg-400/rounded/add_circle-fill.svg";
 import { Svg } from "../../../Svg/Svg";
+import { getClassName } from "../../../utilities/getClassName";
 const DEFAULT_DROPZONE_LABELS = {
     dropzone: "Glisser et déposer un fichier",
     or: "ou",
@@ -22,13 +23,17 @@ export const InputFileCommon = forwardRef(({ ItemLabelComponent, ItemMessageComp
         or: dropzoneLabels.or || DEFAULT_DROPZONE_LABELS.or,
         button: dropzoneLabels.button || DEFAULT_DROPZONE_LABELS.button,
     };
-    return (_jsxs("div", { className: ["af-input-file", className].filter(Boolean).join(" "), style: style, children: [_jsx(ItemLabelComponent, { htmlFor: inputId, description: description, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, required: required, ...labelProps, children: label }), _jsxs("div", { className: "af-input-file__container", children: [_jsxs("span", { className: [
-                            "af-input-file__dropzone",
-                            hasError && "af-input-file__dropzone--error",
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [_jsx("input", { ref: ref, type: "file", id: inputId, required: required, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": ariaDescribedby.length > 0
+    return (_jsxs("div", { className: getClassName({
+            baseClassName: "af-input-file",
+            className,
+        }), style: style, children: [_jsx(ItemLabelComponent, { htmlFor: inputId, description: description, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, moreButtonLabel: moreButtonLabel, onMoreButtonClick: onMoreButtonClick, required: required, ...labelProps, children: label }), _jsxs("div", { className: "af-input-file__container", children: [_jsxs("span", { className: getClassName({
+                            baseClassName: "af-input-file__dropzone",
+                            modifiers: [hasError && "error"],
+                        }), children: [_jsx("input", { ref: ref, type: "file", id: inputId, required: required, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": ariaDescribedby.length > 0
                                     ? ariaDescribedby.join(" ")
-                                    : undefined, ...props }), _jsx("span", { children: resolvedDropzoneLabels.dropzone }), _jsx("span", { children: resolvedDropzoneLabels.or }), _jsxs("span", { className: "af-btn-client af-btn-client--tertiary", children: [_jsx(Svg, { src: addCircleIcon, role: "presentation" }), resolvedDropzoneLabels.button] })] }), helper ? (_jsx("span", { id: helpId, className: "af-input-file__help", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }), children] }));
+                                    : undefined, ...props }), _jsx("span", { children: resolvedDropzoneLabels.dropzone }), _jsx("span", { children: resolvedDropzoneLabels.or }), _jsxs("span", { className: getClassName({
+                                    baseClassName: "af-btn-client",
+                                    modifiers: ["tertiary"],
+                                }), children: [_jsx(Svg, { src: addCircleIcon, role: "presentation" }), resolvedDropzoneLabels.button] })] }), helper ? (_jsx("span", { id: helpId, className: "af-input-file__help", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message, messageType: messageType })] }), children] }));
 });
 InputFileCommon.displayName = "InputFileCommon";

package/dist/Form/FileUpload/ItemFile/ItemFileCommon.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
 import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
+import { getClassName } from "../../../utilities/getClassName";
 const BASE_UNIT = 1000;
 const BYTE_UNITS = ["Ko", "Mo", "Go"];
 const getReadableFileSizeString = (fileSizeInBytes) => {
@@ -17,7 +18,9 @@ export const ItemFileCommon = ({ file, isLoading, errorMessage, className, onRem
     const handleClick = (callback) => (e) => {
         callback(file, e);
     };
-    return (_jsxs("section", { className: ["af-item-file", hasError && "af-item-file--error", className]
-            .filter(Boolean)
-            .join(" "), "aria-busy": isLoading ? true : undefined, "aria-live": "polite", ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [isLoading && !hasError ? (_jsx(ItemSpinnerComponent, { size: 24 })) : (_jsx(ItemIconComponent, { size: "S", src: hasError ? errorIcon : validationIcon })), _jsx("p", { className: "af-item-file__file-name", children: file.name }), _jsx("p", { className: "af-item-file__file-size", children: getReadableFileSizeString(file.size) }), _jsxs("div", { className: "af-item-file__actions", children: [!isLoading && !hasError && (_jsx(ClickIconComponent, { src: previewIcon, onClick: handleClick(onPreview), "aria-label": `Previsualiser le fichier ${file.name}`, ...previewProps })), _jsx(ClickIconComponent, { src: removeIcon, onClick: handleClick(onRemove), "aria-label": `Suppression du fichier ${file.name}`, ...removeProps })] })] }), _jsx(ItemMessageComponent, { message: errorMessage })] }));
+    return (_jsxs("section", { className: getClassName({
+            baseClassName: "af-item-file",
+            modifiers: [hasError && "error"],
+            className,
+        }), "aria-busy": isLoading ? true : undefined, "aria-live": "polite", ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [isLoading && !hasError ? (_jsx(ItemSpinnerComponent, { size: 24 })) : (_jsx(ItemIconComponent, { size: "S", src: hasError ? errorIcon : validationIcon })), _jsx("p", { className: "af-item-file__file-name", children: file.name }), _jsx("p", { className: "af-item-file__file-size", children: getReadableFileSizeString(file.size) }), _jsxs("div", { className: "af-item-file__actions", children: [!isLoading && !hasError && (_jsx(ClickIconComponent, { src: previewIcon, onClick: handleClick(onPreview), "aria-label": `Previsualiser le fichier ${file.name}`, ...previewProps })), _jsx(ClickIconComponent, { src: removeIcon, onClick: handleClick(onRemove), "aria-label": `Suppression du fichier ${file.name}`, ...removeProps })] })] }), _jsx(ItemMessageComponent, { message: errorMessage })] }));
 };

package/dist/Form/InputDate/InputDate.helper.d.ts

@@ -1 +1,8 @@
 export declare const formatInputDateValue: (value?: Date | string) => string | undefined;
+export declare const isValidDayDecimal: (char: string, index: number) => boolean;
+export declare const isValidDay: (day: number, index: number) => boolean;
+export declare const isValidMonthDecimal: (char: string, index: number) => boolean;
+export declare const isValidMonth: (month: number, index: number) => boolean;
+export declare const isValidMillennium: (char: string, index: number) => boolean;
+export declare const isValidDigit: (char: string, index: number, currentCleanValue: string[]) => boolean;
+export declare const formatDateTextValue: (value?: string) => string;

package/dist/Form/InputDate/InputDate.helper.js

@@ -1 +1,23 @@
 export const formatInputDateValue = (value) => value instanceof Date ? value.toISOString().split("T")[0] : value;
+export const isValidDayDecimal = (char, index) => (index === 0 && Number(char) <= 3) || index !== 0;
+export const isValidDay = (day, index) => (index === 1 && day <= 31 && day > 0) || index !== 1;
+export const isValidMonthDecimal = (char, index) => (index === 2 && Number(char) <= 1) || index !== 2;
+export const isValidMonth = (month, index) => (index === 3 && month <= 12 && month > 0) || index !== 3;
+export const isValidMillennium = (char, index) => (index === 4 && Number(char) > 0) || index !== 4;
+export const isValidDigit = (char, index, currentCleanValue) => Number.isInteger(Number(char)) &&
+    isValidDayDecimal(char, index) &&
+    isValidDay(Number(`${Number(currentCleanValue[0])}${Number(char)}`), index) &&
+    isValidMonthDecimal(char, index) &&
+    isValidMonth(Number(`${Number(currentCleanValue[2])}${Number(char)}`), index) &&
+    isValidMillennium(char, index);
+export const formatDateTextValue = (value) => {
+    if (!value) {
+        return "";
+    }
+    return value
+        .split("")
+        .filter((char) => char !== "/")
+        .filter((char, index, currentCleanValue) => isValidDigit(char, index, currentCleanValue))
+        .map((char, index) => (index === 2 || index === 4 ? `/${char}` : char))
+        .join("");
+};

package/dist/Form/InputDate/InputDateAtom.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithRef } from "react";
+export type InputDateAtomProps = Omit<ComponentPropsWithRef<"input">, "value" | "min" | "max"> & {
+    defaultValue?: Date | string;
+    value?: Date | string;
+    min?: Date | string;
+    max?: Date | string;
+};
+declare const InputDateAtom: import("react").ForwardRefExoticComponent<Omit<InputDateAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputDateAtom };

package/dist/Form/InputDate/InputDateAtom.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { formatInputDateValue } from "./InputDate.helper";
+const InputDateAtom = forwardRef(({ defaultValue, value, min, max, ...otherProps }, inputRef) => (_jsx("input", { ...otherProps, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), min: formatInputDateValue(min), max: formatInputDateValue(max) })));
+InputDateAtom.displayName = "InputDateAtom";
+export { InputDateAtom };

package/dist/Form/InputDate/InputDateCommon.d.ts

@@ -18,7 +18,7 @@ export type InputDateProps = Omit<ComponentPropsWithRef<"input">, "value" | "min
     success?: string;
     hidePicker?: boolean;
     label: ItemLabelProps["label"];
-} & Partial<ItemLabelProps & ItemMessageProps>;
+} & Partial<Omit<ItemLabelProps, "onChange"> & ItemMessageProps>;
 type InputDateCommonProps = InputDateProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;

package/dist/Form/InputDate/InputDateCommon.js

@@ -1,41 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useId, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
-import { formatInputDateValue } from "./InputDate.helper";
-const InputDateCommon = forwardRef(({ className, classModifier = "", defaultValue, value, helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, min, max, hidePicker, ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", `${classModifier}${hidePicker ? " no-picker" : ""}`);
+import { InputDateAtom } from "./InputDateAtom";
+import { InputDateTextAtom } from "./InputDateTextAtom";
+const InputDateCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, ItemLabelComponent, ItemMessageComponent, required, hidePicker, max, min, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-date", className ?? "", classModifier);
     let inputId = useId();
     inputId = otherProps.id ?? inputId;
     const idMessage = useId();
     const idHelp = useId();
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
-    /* Stop space keydown, enter keydown for non webkit browsers and click events targeting the input element when picker is disabled */
-    useEffect(() => {
-        function handleKeydown(event) {
-            if (hidePicker &&
-                (event.keyCode === 32 ||
-                    (event.keyCode === 13 &&
-                        !window.navigator?.userAgent?.includes("WebKit"))) &&
-                event.target === inputRef.current) {
-                event.preventDefault();
-            }
-        }
-        function handleClick(event) {
-            if (hidePicker && event.target === inputRef.current) {
-                event.preventDefault();
-            }
-        }
-        window.addEventListener("keydown", handleKeydown);
-        window.addEventListener("click", handleClick);
-        return () => {
-            window.removeEventListener("keydown", handleKeydown);
-            window.removeEventListener("click", handleClick);
-        };
-    }, [hidePicker]);
+    const ariaDescribedbyIds = [
+        helper && idHelp,
+        ((Boolean(message) && messageType === "success") || Boolean(success)) &&
+            idMessage,
+    ].filter(Boolean);
+    const ariaDescribedby = ariaDescribedbyIds.length
+        ? ariaDescribedbyIds.join(" ")
+        : undefined;
     const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId }), _jsx("input", { ...otherProps, id: inputId, className: componentClassName, type: "date", ref: inputRef, defaultValue: formatInputDateValue(defaultValue), value: formatInputDateValue(value), "aria-errormessage": hasError ? idMessage : undefined, "aria-invalid": hasError || undefined, "aria-describedby": ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, required: required, min: formatInputDateValue(min), max: formatInputDateValue(max) }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+    const ariaErrormessage = hasError ? idMessage : undefined;
+    const ariaInvalid = hasError || undefined;
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, required: required, inputId: inputId }), hidePicker ? (_jsx(InputDateTextAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required })) : (_jsx(InputDateAtom, { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, "aria-errormessage": ariaErrormessage, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, required: required, max: max, min: min })), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
 });
 InputDateCommon.displayName = "InputDate";
 export { InputDateCommon };

package/dist/Form/InputDate/InputDateTextAtom.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
+export type InputDateTextAtomProps = Omit<ComponentProps<typeof InputTextAtom>, "value"> & {
+    value?: Date | string;
+    defaultValue?: Date | string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const InputDateTextAtom: import("react").ForwardRefExoticComponent<Omit<InputDateTextAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputDateTextAtom };

package/dist/Form/InputDate/InputDateTextAtom.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
+import { formatDateTextValue, formatInputDateValue } from "./InputDate.helper";
+const InputDateTextAtom = forwardRef(({ onChange, value, defaultValue, ...otherProps }, inputRef) => {
+    const handleChange = (e) => {
+        const formattedValue = formatDateTextValue(e.target.value);
+        onChange?.({
+            ...e,
+            target: { ...e.target, value: formattedValue },
+        });
+    };
+    return (_jsx(InputTextAtom, { pattern: "\\d{0,2}/?\\d{0,2}/?\\d{0,4}", maxLength: 10, ref: inputRef, inputMode: "numeric", onChange: handleChange, value: formatInputDateValue(value), defaultValue: formatInputDateValue(defaultValue), ...otherProps }));
+});
+InputDateTextAtom.displayName = "InputDateText";
+export { InputDateTextAtom };

package/dist/Form/InputTextAtom/InputTextAtomCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import { getComponentClassName } from "../../utilities/getComponentClassName";
-const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, type = "text", ...otherProps }, inputRef) => {
+const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName("af-form__input-text", className, classModifier + (error || ariaErrormessage ? " error" : ""));
     let inputId = useId();
     inputId = otherProps.id || inputId;
-    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": idHelp, ...otherProps }), unit] }));
+    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": ariaDescribedby ?? idHelp, ...otherProps }), unit] }));
 });
 InputTextAtom.displayName = "InputTextAtom";
 export { InputTextAtom };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { BasePicture } from "./BasePicture/BasePicture";
 export { Button, buttonVariants, type ButtonVariants, } from "./Button/ButtonApollo";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./CardMessage/CardMessageApollo";
 export { ClickIcon } from "./ClickIcon/ClickIconApollo";
+export { ContentItemDuoAction, type ContentItemDuoActionState, } from "./ContentItemDuoAction/ContentItemDuoActionApollo";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoApollo";
 export { DataAgent } from "./DataAgent/DataAgentApollo";
 export { Divider } from "./Divider/DividerApollo";
@@ -18,6 +19,9 @@ export { CardCheckboxOption } from "./Form/Checkbox/CardCheckboxOption/CardCheck
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxApollo";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextApollo";
 export { Dropdown } from "./Form/Dropdown/DropdownApollo";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadApollo";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileApollo";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileApollo";
 export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { type OptionType } from "./Form/InputPhone/InputPhone.types";
 export { InputPhone } from "./Form/InputPhone/InputPhoneApollo";
@@ -33,12 +37,10 @@ export { DebugGrid } from "./Grid/DebugGridApollo";
 export { Heading, type HeadingLevel } from "./Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./Icon/IconApollo";
 export { ItemTabBar, type ItemTabBarProps, } from "./ItemTabBar/ItemTabBarApollo";
-export { TabBar, type TabBarProps, tabBarDirection, type TabBarDirection, } from "./TabBar/TabBarApollo";
 export { Footer, type FooterProps } from "./Layout/Footer/FooterApollo";
 export { Link, linkVariants, type LinkVariants } from "./Link/LinkApollo";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./List/ClickItem/ClickItemApollo";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoApollo";
-export { type ContentItemDuoActionState, ContentItemDuoAction, } from "./ContentItemDuoAction/ContentItemDuoActionApollo";
 export { Message, messageVariants, type MessageVariants, } from "./Message/MessageApollo";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalApollo";
 export { ProgressBar } from "./ProgressBar/ProgressBarApollo";
@@ -46,9 +48,7 @@ export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupApollo";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/SpinnerApollo";
 export { Stepper } from "./Stepper/StepperApollo";
 export { Svg } from "./Svg/Svg";
+export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from "./TabBar/TabBarApollo";
 export { Tag, tagVariants, type TagVariants } from "./Tag/TagApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
-export { InputFile } from "./Form/FileUpload/InputFile/InputFileApollo";
-export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileApollo";
-export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadApollo";

package/dist/index.js

@@ -8,6 +8,7 @@ export { BasePicture } from "./BasePicture/BasePicture";
 export { Button, buttonVariants, } from "./Button/ButtonApollo";
 export { CardMessage, cardMessageVariants, } from "./CardMessage/CardMessageApollo";
 export { ClickIcon } from "./ClickIcon/ClickIconApollo";
+export { ContentItemDuoAction, } from "./ContentItemDuoAction/ContentItemDuoActionApollo";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoApollo";
 export { DataAgent } from "./DataAgent/DataAgentApollo";
 export { Divider } from "./Divider/DividerApollo";
@@ -18,6 +19,9 @@ export { CardCheckboxOption } from "./Form/Checkbox/CardCheckboxOption/CardCheck
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxApollo";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextApollo";
 export { Dropdown } from "./Form/Dropdown/DropdownApollo";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadApollo";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileApollo";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileApollo";
 export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { InputPhone } from "./Form/InputPhone/InputPhoneApollo";
 export { InputText } from "./Form/InputText/InputTextApollo";
@@ -32,12 +36,10 @@ export { DebugGrid } from "./Grid/DebugGridApollo";
 export { Heading } from "./Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, } from "./Icon/IconApollo";
 export { ItemTabBar, } from "./ItemTabBar/ItemTabBarApollo";
-export { TabBar, tabBarDirection, } from "./TabBar/TabBarApollo";
 export { Footer } from "./Layout/Footer/FooterApollo";
 export { Link, linkVariants } from "./Link/LinkApollo";
 export { ClickItem, clickItemStates, clickItemVariants, } from "./List/ClickItem/ClickItemApollo";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoApollo";
-export { ContentItemDuoAction, } from "./ContentItemDuoAction/ContentItemDuoActionApollo";
 export { Message, messageVariants, } from "./Message/MessageApollo";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalApollo";
 export { ProgressBar } from "./ProgressBar/ProgressBarApollo";
@@ -45,9 +47,7 @@ export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupApollo";
 export { Spinner, spinnerVariants, } from "./Spinner/SpinnerApollo";
 export { Stepper } from "./Stepper/StepperApollo";
 export { Svg } from "./Svg/Svg";
+export { TabBar, tabBarDirection, } from "./TabBar/TabBarApollo";
 export { Tag, tagVariants } from "./Tag/TagApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Toggle } from "./Toggle/ToggleApollo";
-export { InputFile } from "./Form/FileUpload/InputFile/InputFileApollo";
-export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileApollo";
-export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadApollo";

package/dist/indexLF.d.ts

@@ -8,6 +8,7 @@ export { BasePicture } from "./BasePicture/BasePicture";
 export { Button, buttonVariants, type ButtonVariants } from "./Button/ButtonLF";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./CardMessage/CardMessageLF";
 export { ClickIcon } from "./ClickIcon/ClickIconLF";
+export { ContentItemDuoAction, type ContentItemDuoActionState, } from "./ContentItemDuoAction/ContentItemDuoActionLF";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoLF";
 export { DataAgent } from "./DataAgent/DataAgentLF";
 export { Divider } from "./Divider/DividerLF";
@@ -18,6 +19,9 @@ export { CardCheckboxOption } from "./Form/Checkbox/CardCheckboxOption/CardCheck
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxLF";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextLF";
 export { Dropdown } from "./Form/Dropdown/DropdownLF";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadLF";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileLF";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileLF";
 export { 
 /** @deprecated Use `InputDate` instead. */
 InputDate as DateInput, InputDate, } from "./Form/InputDate/InputDateLF";
@@ -37,12 +41,10 @@ export { DebugGrid } from "./Grid/DebugGridLF";
 export { Heading, type HeadingLevel } from "./Heading/HeadingLF";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./Icon/IconLF";
 export { ItemTabBar, type ItemTabBarProps } from "./ItemTabBar/ItemTabBarLF";
-export { TabBar, type TabBarProps, tabBarDirection, type TabBarDirection, } from "./TabBar/TabBarLF";
 export { Footer, type FooterProps } from "./Layout/Footer/FooterLF";
 export { Link, linkVariants, type LinkVariants } from "./Link/LinkLF";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./List/ClickItem/ClickItemLF";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoLF";
-export { type ContentItemDuoActionState, ContentItemDuoAction, } from "./ContentItemDuoAction/ContentItemDuoActionLF";
 export { Message, messageVariants, type MessageVariants, } from "./Message/MessageLF";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalLF";
 export { ProgressBar } from "./ProgressBar/ProgressBarLF";
@@ -50,9 +52,7 @@ export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupLF";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/SpinnerLF";
 export { Stepper } from "./Stepper/StepperLF";
 export { Svg } from "./Svg/Svg";
+export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from "./TabBar/TabBarLF";
 export { Tag, tagVariants, type TagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
-export { InputFile } from "./Form/FileUpload/InputFile/InputFileLF";
-export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileLF";
-export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadLF";

package/dist/indexLF.js

@@ -8,6 +8,7 @@ export { BasePicture } from "./BasePicture/BasePicture";
 export { Button, buttonVariants } from "./Button/ButtonLF";
 export { CardMessage, cardMessageVariants, } from "./CardMessage/CardMessageLF";
 export { ClickIcon } from "./ClickIcon/ClickIconLF";
+export { ContentItemDuoAction, } from "./ContentItemDuoAction/ContentItemDuoActionLF";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoLF";
 export { DataAgent } from "./DataAgent/DataAgentLF";
 export { Divider } from "./Divider/DividerLF";
@@ -18,6 +19,9 @@ export { CardCheckboxOption } from "./Form/Checkbox/CardCheckboxOption/CardCheck
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxLF";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextLF";
 export { Dropdown } from "./Form/Dropdown/DropdownLF";
+export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadLF";
+export { InputFile } from "./Form/FileUpload/InputFile/InputFileLF";
+export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileLF";
 export { 
 /** @deprecated Use `InputDate` instead. */
 InputDate as DateInput, InputDate, } from "./Form/InputDate/InputDateLF";
@@ -36,12 +40,10 @@ export { DebugGrid } from "./Grid/DebugGridLF";
 export { Heading } from "./Heading/HeadingLF";
 export { Icon, iconSizeVariants, iconVariants, } from "./Icon/IconLF";
 export { ItemTabBar } from "./ItemTabBar/ItemTabBarLF";
-export { TabBar, tabBarDirection, } from "./TabBar/TabBarLF";
 export { Footer } from "./Layout/Footer/FooterLF";
 export { Link, linkVariants } from "./Link/LinkLF";
 export { ClickItem, clickItemStates, clickItemVariants, } from "./List/ClickItem/ClickItemLF";
 export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuoLF";
-export { ContentItemDuoAction, } from "./ContentItemDuoAction/ContentItemDuoActionLF";
 export { Message, messageVariants, } from "./Message/MessageLF";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal/ModalLF";
 export { ProgressBar } from "./ProgressBar/ProgressBarLF";
@@ -49,9 +51,7 @@ export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroupLF";
 export { Spinner, spinnerVariants, } from "./Spinner/SpinnerLF";
 export { Stepper } from "./Stepper/StepperLF";
 export { Svg } from "./Svg/Svg";
+export { TabBar, tabBarDirection, } from "./TabBar/TabBarLF";
 export { Tag, tagVariants } from "./Tag/TagLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./Toggle/ToggleLF";
-export { InputFile } from "./Form/FileUpload/InputFile/InputFileLF";
-export { ItemFile } from "./Form/FileUpload/ItemFile/ItemFileLF";
-export { FileUpload } from "./Form/FileUpload/FileUpload/FileUploadLF";

package/dist/utilities/getClassName.d.ts

@@ -0,0 +1,20 @@
+type getClassNameParams = {
+    baseClassName: string;
+    modifiers?: Array<string | boolean | undefined>;
+    className?: string;
+};
+/**
+ * Generates a CSS class string from a base class name, optional modifiers, and an additional class name.
+ *
+ * @param {string} params.baseClassName - The base class name (required).
+ * @param {Array<string|boolean|undefined>} [params.modifiers] - List of modifiers to append as `${baseClassName}--{modifier}`. Falsy values are ignored.
+ * @param {string} [params.className] - Additional class name(s) to append to the final string.
+ * @returns {string} The concatenated CSS class string, separated by spaces.
+ *
+ * @example
+ * const isLarge = false;
+ * getClassName({ baseClassName: 'af-button', modifiers: ['primary', isLarge && 'large'], className: 'custom-class' })
+ * // Returns: 'af-button af-button--primary custom-class'
+ */
+export declare const getClassName: ({ baseClassName, modifiers, className, }: getClassNameParams) => string;
+export {};

package/dist/utilities/getClassName.js

@@ -0,0 +1,24 @@
+/**
+ * Generates a CSS class string from a base class name, optional modifiers, and an additional class name.
+ *
+ * @param {string} params.baseClassName - The base class name (required).
+ * @param {Array<string|boolean|undefined>} [params.modifiers] - List of modifiers to append as `${baseClassName}--{modifier}`. Falsy values are ignored.
+ * @param {string} [params.className] - Additional class name(s) to append to the final string.
+ * @returns {string} The concatenated CSS class string, separated by spaces.
+ *
+ * @example
+ * const isLarge = false;
+ * getClassName({ baseClassName: 'af-button', modifiers: ['primary', isLarge && 'large'], className: 'custom-class' })
+ * // Returns: 'af-button af-button--primary custom-class'
+ */
+export const getClassName = ({ baseClassName, modifiers = [], className = "", }) => {
+    const parsedModifiers = modifiers
+        .filter(Boolean)
+        .map((modifier) => `${baseClassName}--${modifier}`);
+    const classList = [
+        baseClassName,
+        ...parsedModifiers,
+        ...className.split(" "),
+    ].filter(Boolean);
+    return Array.from(new Set(classList)).join(" ");
+};

package/dist/utilities/getComponentClassName.d.ts

@@ -1 +1,4 @@
+/**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
+ */
 export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;

package/dist/utilities/getComponentClassName.js

@@ -11,6 +11,9 @@ const listClassModifier = (classModifier) => {
     }
     return classModifier.split(" ");
 };
+/**
+ * @deprecated This function is deprecated and will be removed in a future release. Use getClassName instead.
+ */
 export const getComponentClassName = (defaultClassName, className, classModifier) => {
     // Fail fast, when no defaultClassName we don't want to loop on modifier
     if (!defaultClassName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "3.0.1-tags-slash-2-0-4.3",
+  "version": "3.1.0-alpha.1",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,10 +46,9 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "3.0.1-tags-slash-2-0-4.3",
+    "@axa-fr/design-system-apollo-css": "3.1.0-alpha.1",
     "@material-symbols/svg-400": ">= 0.19.0",
-    "react": ">= 18",
-    "@axa-fr/design-system-look-and-feel-css": "3.0.1-tags-slash-2-0-4.3"
+    "react": ">= 18"
   },
   "peerDependenciesMeta": {
     "@material-symbols/svg-400": {