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

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/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/Divider/Divider.js

@@ -2,6 +2,6 @@ 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]);
+    const componentClassName = useMemo(() => getComponentClassName("af-divider", className, classModifier), [className, classModifier]);
     return _jsx("hr", { className: componentClassName });
 };

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": !!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/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,22 +8,19 @@ 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 { Loader, 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) {
@@ -34,20 +31,24 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
         }
         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 })), _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 &&
+                            files.length !== 0 &&
+                            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(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));
+                            }) })] })] }));
 };
 FileUpload.displayName = "FileUpload";
 export { FileUpload };

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,10 @@
 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;
+import { ComponentPropsWithRef } from "react";
+type Props = ComponentPropsWithRef<"select"> & {
+    id?: string;
+    label?: string;
     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;
 };
+declare const Select: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 export { Select };

package/dist/Form/Select/Select.js

@@ -1,27 +1,15 @@
-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/Select/Select.scss";
-import ErrorOutline from "@material-symbols/svg-400/outlined/error.svg";
-import ReactSelect from "react-select";
+import { forwardRef, useId } from "react";
 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] }))] }));
-};
+import { InputError } from "../InputError";
+const Select = forwardRef(({ id, required, label, errorLabel, placeholder, children, ...otherProps }, inputRef) => {
+    const idError = useId();
+    let inputId = useId();
+    inputId = id || inputId;
+    const isShowingPlaceholder = otherProps.value === "";
+    const classname = classNames("af-form__select-input", errorLabel && "af-form__select-input--error", isShowingPlaceholder && "af-form__select-input-placeholder");
+    return (_jsxs("div", { children: [label && (_jsxs("label", { htmlFor: inputId, className: "af-form__select-label", children: [label, required && _jsx("span", { "aria-hidden": "true", children: " *" })] })), _jsxs("select", { className: classname, ...otherProps, ref: inputRef, id: inputId, children: [Boolean(placeholder) && (_jsx("option", { disabled: true, value: "", children: placeholder })), children] }), errorLabel && _jsx(InputError, { id: idError, message: errorLabel })] }));
+});
 Select.displayName = "Select";
 export { Select };

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

@@ -1,6 +1,7 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
 import { ComponentPropsWithRef, MouseEventHandler } from "react";
 type Props = ComponentPropsWithRef<"input"> & {
+    unit?: React.ReactNode;
     classModifier?: string;
     helper?: string;
     error?: string;
@@ -8,6 +9,8 @@ type Props = ComponentPropsWithRef<"input"> & {
     label?: string;
     buttonLabel?: string;
     onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    sideButtonLabel?: string;
+    onSideButtonClick?: MouseEventHandler<HTMLButtonElement>;
 };
 declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Text };

package/dist/Form/Text/Text.js

@@ -3,16 +3,19 @@ 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");
+const Text = forwardRef(({ unit, className, classModifier = "", label, description, helper, error, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-text", className, classModifier +
+        (error || otherProps["aria-errormessage"] ? " error" : ""));
     let inputId = useId();
     inputId = otherProps.id || inputId;
+    const idDescription = useId();
     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 })] }));
+    const idHelp = useId();
+    const idLabel = useId();
+    return (_jsxs("div", { className: "af-form__input-container", children: [(label || description || buttonLabel) && (_jsxs("div", { className: "af-form__label-container", children: [_jsxs("div", { className: "af-form__label-header", children: [_jsxs("label", { htmlFor: inputId, id: idLabel, "aria-describedby": idDescription, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { "aria-hidden": "true", children: " *" })] }), sideButtonLabel && (_jsx(Button, { className: "af-form__input-modify", variant: "ghost", onClick: onSideButtonClick, children: sideButtonLabel }))] }), description && (_jsx("span", { id: idDescription, className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: "ghost", iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel }))] })), _jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: "text", ref: inputRef, "aria-labelledby": idLabel, "aria-errormessage": otherProps["aria-errormessage"] ?? idError, "aria-invalid": Boolean(error || otherProps["aria-errormessage"]), "aria-describedby": idHelp, ...otherProps }), unit] }), helper && (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })), !otherProps["aria-errormessage"] && error && (_jsx(InputError, { id: idError, message: error }))] }));
 });
 Text.displayName = "Text";
 export { Text };

package/dist/Form/TextArea/TextArea.js

@@ -3,14 +3,13 @@ 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");
+    const componentClassName = getComponentClassName("af-form__input-textarea", className, classModifier);
     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 })] }));
+    return (_jsxs("div", { className: "af-form__input-container", children: [label && (_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: "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 };

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/IconBg/IconBg.js

@@ -7,7 +7,7 @@ export const IconBg = ({ children, className, classModifier, isDisabled = false,
         if (isDisabled) {
             newClassModifier += " disabled";
         }
-        return getComponentClassName(className, newClassModifier, "af-icon-bg");
+        return getComponentClassName("af-icon-bg", className, newClassModifier);
     }, [classModifier, isDisabled, className]);
     return _jsx("div", { className: componentClassName, children: children });
 };

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

@@ -1,9 +1,9 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
-import { ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 type HeaderProps = {
     defaultActiveLink?: number;
-    previousLink?: JSX.Element;
-    rightItem?: JSX.Element[];
+    previousLink?: ReactNode;
+    rightItem?: ReactNode[];
 } & ComponentPropsWithoutRef<"header">;
 export declare const Header: ({ children, defaultActiveLink, previousLink, rightItem, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Layout/Header/Header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/Header.scss";
-import logo from "@axa-fr/design-system-look-and-feel-css/dist/common/assets/logo-axa.svg";
-import { useCallback, useState } from "react";
+import logo from "@axa-fr/design-system-look-and-feel-css/logo-axa.svg";
+import { useCallback, useState, } from "react";
 import { NavBar } from "./NavBar";
 import { PreviousLink } from "./PreviousLink/PreviousLink";
 export const Header = ({ children, defaultActiveLink, previousLink, rightItem, }) => {

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

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import { type ComponentPropsWithoutRef, type PropsWithChildren, type Dispatch, type SetStateAction } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
 type NavBarProps = {
     activeLink?: number;
-    setActiveLink: React.Dispatch<React.SetStateAction<number | undefined>>;
+    setActiveLink: Dispatch<SetStateAction<number | undefined>>;
 } & ComponentPropsWithoutRef<"nav">;
 declare const NavBar: ({ activeLink, children, setActiveLink, ...otherProps }: PropsWithChildren<NavBarProps>) => import("react/jsx-runtime").JSX.Element;
 export { NavBar };

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { isValidElement, useMemo, } from "react";
+import { isValidElement, useMemo, Children, cloneElement, } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Header/NavBar/NavBar.scss";
 const NavBar = ({ activeLink, children, setActiveLink, ...otherProps }) => {
-    const validChildren = useMemo(() => (React.Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
-    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: React.Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: React.cloneElement(child, {
+    const validChildren = useMemo(() => (Children.map(children, (child) => isValidElement(child) && child) ?? []).filter((c) => Boolean(c)), [children]);
+    return (_jsx("nav", { role: "navigation", "aria-label": "Menu principal", ...otherProps, children: _jsx("ul", { className: "af-navbar-container", role: "menubar", children: Children.map(validChildren, (child, index) => (_jsx("li", { className: "af-navbar-item", role: "none", children: cloneElement(child, {
                     className: `af-navbar-item__link ${index === activeLink ? "af-navbar-item__link--active" : ""}`.trim(),
                     onClick: () => setActiveLink(index),
                     onFocus: () => setActiveLink(index),

package/dist/Link/Link.js

@@ -8,7 +8,7 @@ export const Link = ({ href, openInNewTab = false, leftIcon, rightIcon, children
         target: "_blank",
         rel: "noopener noreferrer",
     };
-    const componentClassName = useMemo(() => getComponentClassName(className, `${classModifier}${!className && openInNewTab ? " openInNewTab" : ""}`, "af-link"), [classModifier, className, openInNewTab]);
+    const componentClassName = useMemo(() => getComponentClassName("af-link", className, `${classModifier}${!className && openInNewTab ? " openInNewTab" : ""}`), [classModifier, className, openInNewTab]);
     return (_jsxs("a", { className: componentClassName, href: href, ...newTabProps, ...props, children: [leftIcon, children, (openInNewTab || Boolean(rightIcon)) &&
                 (rightIcon ?? _jsx(Svg, { src: openInNew }))] }));
 };