@axa-fr/design-system-slash-react 2.0.0-alpha.48 → 2.0.0-alpha.49

package/dist/Accordion/Accordion.d.ts

@@ -1,13 +1,13 @@
 import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
 import React from "react";
 import { CollapseProps } from "./CollapseCard";
-import { TDefaultProps } from "./types";
+import { AccordionVariant, TDefaultProps } from "./types";
 export type EnhancedProps = Partial<TDefaultProps> & {
     onlyOne?: boolean;
     className?: string;
     /** @deprecated Use `variant` instead. */
     classModifier?: string;
-    variant?: string;
+    variant?: AccordionVariant;
     children: React.ReactElement<CollapseProps>[] | React.ReactElement<CollapseProps>;
 };
 declare const Accordion: ({ className, classModifier, variant, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/Accordion.js

@@ -5,11 +5,11 @@ import { useId } from "react";
 import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
 import { CollapseCard } from "./CollapseCard";
 const defaultClassName = "af-accordion";
-const Accordion = ({ className, classModifier, variant, children, onlyOne = false, }) => {
+const Accordion = ({ className, classModifier, variant = "default", children, onlyOne = false, }) => {
     const componentClassName = getComponentClassNameWithUserClassname({
         componentClassName: defaultClassName,
         userClassName: className,
-        classModifier: classModifier || variant || "",
+        classModifier: classModifier || (variant !== "default" && variant) || "",
     });
     const id = useId();
     const childrenArray = Array.isArray(children) ? children : [children];

package/dist/Accordion/CollapseCard.d.ts

@@ -1,5 +1,5 @@
 import type { DetailsHTMLAttributes, ReactNode } from "react";
-import type { AccordionActions } from "./types";
+import type { AccordionActions, AccordionVariant } from "./types";
 export type CollapseProps = {
     id: string;
     title: ReactNode;
@@ -10,6 +10,6 @@ export type CollapseProps = {
     className?: string;
     classModifier?: string;
     actions?: AccordionActions;
-    variant?: string;
+    variant?: AccordionVariant;
 };
 export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, actions, variant, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/CollapseCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
 import { Body } from "./Body";
 import { Header } from "./Header";
-import { getComponentClassName } from "../utilities";
 export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", actions, variant, }) => {
     const headerId = id;
     let newClassModifier = open ? "open" : "";

package/dist/Accordion/Header.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { AccordionActions } from "./types";
+import type { AccordionActions, AccordionVariant } from "./types";
 export type HeaderToggleElement = {
     isOpen: boolean;
     index: number;
@@ -11,7 +11,7 @@ export type HeaderProps = {
     classModifier?: string;
     id?: string;
     actions?: AccordionActions;
-    variant?: string;
+    variant?: AccordionVariant;
 };
 declare const Header: ({ children, className, classModifier, id, actions, variant, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/Accordion/Header.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import arrow from "@material-symbols/svg-400/rounded/keyboard_arrow_down.svg";
-import { Title } from "../Title/Title";
 import { Button } from "../Button/Button";
 import { Svg } from "../Svg/Svg";
+import { Title } from "../Title/Title";
 import { getComponentClassName } from "../utilities";
 const defaultClassName = "af-accordion__item-header";
 const Header = ({ children, className, classModifier, id, actions, variant, }) => {

package/dist/Card/Card.d.ts

@@ -8,6 +8,7 @@ type CardProps = ComponentProps<"button"> & {
      *  import villaIcon from "@material-symbols/svg-400/outlined/villa.svg"; */
     iconSrc?: string;
     error?: boolean;
+    active?: boolean;
 };
-export declare const Card: ({ children, className, iconSrc, orientation, error, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, className, iconSrc, orientation, error, active, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Card/Card.js

@@ -3,4 +3,4 @@ import classNames from "classnames";
 import { Svg } from "../Svg";
 import "@axa-fr/design-system-slash-css/dist/Card/Card.css";
 const DEFAULT_CLASS_NAME = "af-card";
-export const Card = ({ children, className, iconSrc, orientation = "vertical", error = false, ...otherProps }) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, error && `${DEFAULT_CLASS_NAME}--error`, orientation === "horizontal" && `${DEFAULT_CLASS_NAME}--${orientation}`, className), ...otherProps, children: [iconSrc ? _jsx(Svg, { src: iconSrc }) : null, children] }));
+export const Card = ({ children, className, iconSrc, orientation = "vertical", error = false, active = false, ...otherProps }) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, active && `${DEFAULT_CLASS_NAME}--active`, error && `${DEFAULT_CLASS_NAME}--error`, orientation === "horizontal" && `${DEFAULT_CLASS_NAME}--${orientation}`, className), ...otherProps, children: [iconSrc ? _jsx(Svg, { src: iconSrc }) : null, children] }));

package/dist/Form/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { forwardRef } from "react";
 import { CheckboxItem } from "./CheckboxItem";
@@ -21,7 +21,7 @@ const CheckboxInner = forwardRef(({ id, name, options, disabled, children, value
             : values.filter((v) => v !== value);
         onChange({ values: newValues, target: { value, checked }, id, name });
     };
-    return (_jsx(_Fragment, { children: options.map((option) => {
+    return (_jsx("div", { className: "af-form__checkbox-container", children: options.map((option) => {
             const isChecked = values ? values.indexOf(option.value) >= 0 : false;
             return (_createElement(CheckboxItem, { ...otherProps, onChange: handleOnChange, key: option.value, className: className, isChecked: isChecked, name: name, disabled: option.disabled || disabled, ref: inputRef, ...option }, children));
         }) }));

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Checkbox } from "./Checkbox";
-type Props = Omit<ComponentProps<typeof Checkbox> & ConsumerFieldProps, "children" | "placeholder">;
+type Props = Omit<ComponentProps<typeof Checkbox> & ConsumerFieldProps, "placeholder">;
 declare const CheckboxInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { CheckboxInput };

package/dist/Form/Checkbox/CheckboxInput.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
-const CheckboxInput = forwardRef(({ label, mode = "default", options, ...otherProps }, inputRef) => {
+const CheckboxInput = forwardRef(({ label, mode = "default", options, children, ...otherProps }, inputRef) => {
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", classNameSuffix: "checkbox-container", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
-            return (_jsx(Checkbox, { id: id, mode: mode, options: newOptions, classModifier: ariaInvalid ? `${classModifier} error` : classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }));
+    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
+            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, classModifier: ariaInvalid ? `${classModifier} error` : classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
         } }));
 });
 CheckboxInput.displayName = "CheckboxInput";

package/dist/Form/Checkbox/CheckboxItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import check from "@material-symbols/svg-400/sharp/check.svg";
+import check from "@material-symbols/svg-700/sharp/check.svg";
 import { forwardRef, useId } from "react";
 import { getOptionClassName } from "../core";
 import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.scss";

package/dist/Form/Choice/ChoiceInput.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Choice } from "./Choice";
-type Props = ComponentProps<typeof Choice> & Omit<ConsumerFieldProps, "children">;
+type Props = ComponentProps<typeof Choice> & ConsumerFieldProps;
 declare const ChoiceInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { ChoiceInput };

package/dist/Form/Choice/ChoiceInput.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Choice } from "./Choice";
@@ -6,8 +6,8 @@ const defaultOptions = [
     { label: "Oui", value: true },
     { label: "Non", value: false },
 ];
-const ChoiceInput = forwardRef(({ label, options = defaultOptions, ...otherProps }, inputRef) => {
-    return (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ classModifier, id, errorId, ariaInvalid, ...props }) => (_jsx(Choice, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props })) }));
+const ChoiceInput = forwardRef(({ label, options = defaultOptions, children, ...otherProps }, inputRef) => {
+    return (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ classModifier, id, errorId, ariaInvalid, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Choice, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props }), children] })) }));
 });
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

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

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactNode } from "react";
 import { ConsumerFieldProps } from "../core";
 import { Date } from "./Date";
-type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Date> & {
+type Props = ConsumerFieldProps & ComponentProps<typeof Date> & {
     helpMessage?: ReactNode;
-}, "renderInput" | "children">;
+};
 declare const DateInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { DateInput };

package/dist/Form/Date/DateInput.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Date } from "./Date";
-const DateInput = forwardRef(({ rightElement, ...otherProps }, inputRef) => {
-    return (_jsx(Field, { ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...otherProps }), rightElement] })) }));
+const DateInput = forwardRef(({ children, ...otherProps }, inputRef) => {
+    return (_jsx(Field, { ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...otherProps }), children] })) }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/Form/File/FileInput.d.ts

@@ -5,9 +5,9 @@ import { File } from "./File";
 import { FileTable } from "./FileTable";
 type FileProps = ComponentPropsWithoutRef<typeof File>;
 type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
-type Props = Omit<ConsumerFieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
+type Props = ConsumerFieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
     fileLabel?: string;
     helpMessage?: ReactNode;
-}, "children">;
-declare const FileInput: ({ values, id, name, onChange, rightElement, label, errors, fileLabel, classModifier, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
+};
+declare const FileInput: ({ values, id, name, onChange, label, errors, fileLabel, classModifier, children, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileInput };

package/dist/Form/File/FileInput.js

@@ -4,7 +4,7 @@ import { useId } from "react";
 import { Field } from "../core";
 import { File } from "./File";
 import { FileTable } from "./FileTable";
-const FileInput = ({ values = [], id, name = "", onChange, rightElement, label, errors, fileLabel, classModifier, ...otherFileProps }) => {
+const FileInput = ({ values = [], id, name = "", onChange, label, errors, fileLabel, classModifier, children, ...otherFileProps }) => {
     const onDeleteClick = (selectedId, selectInputId) => {
         const newValues = values.filter((element) => element.id !== selectedId);
         onChange({
@@ -16,6 +16,6 @@ const FileInput = ({ values = [], id, name = "", onChange, rightElement, label,
     };
     const generatedId = useId();
     const actualId = id ?? generatedId;
-    return (_jsx(Field, { label: label, labelPosition: "top", id: actualId, classNameSuffix: "file", ...otherFileProps, renderInput: ({ classModifier: inputClassModifiers, id: inputId, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(File, { id: inputId, name: name, onChange: onChange, classModifier: inputClassModifiers, label: fileLabel, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), classModifier: classModifier }) }));
+    return (_jsx(Field, { label: label, labelPosition: "top", id: actualId, classNameSuffix: "file", ...otherFileProps, renderInput: ({ classModifier: inputClassModifiers, id: inputId, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(File, { id: inputId, name: name, onChange: onChange, classModifier: inputClassModifiers, label: fileLabel, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), classModifier: classModifier }) }));
 };
 export { FileInput };

package/dist/Form/MultiSelect/MultiSelectInput.d.ts

@@ -3,5 +3,5 @@ import { type ComponentProps } from "react";
 import { ConsumerFieldProps } from "../core";
 import { MultiSelect } from "./MultiSelect";
 type Props = ConsumerFieldProps & ComponentProps<typeof MultiSelect>;
-declare const MultiSelectInput: ({ label, ...multiSelectProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectInput: ({ label, children, ...multiSelectProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { MultiSelectInput };

package/dist/Form/MultiSelect/MultiSelectInput.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 import { Field } from "../core";
 import { MultiSelect } from "./MultiSelect";
-const MultiSelectInput = ({ label, ...multiSelectProps }) => {
+const MultiSelectInput = ({ label, children, ...multiSelectProps }) => {
     return (_jsx(Field, { label: label, ...multiSelectProps, classNameSuffix: "select", renderInput: ({ id, ariaInvalid, errorId, ...props }) => {
-            return (_jsx(MultiSelect, { id: id, "aria-invalid": ariaInvalid, "aria-describedby": errorId, ...props }));
+            return (_jsxs(_Fragment, { children: [_jsx(MultiSelect, { id: id, "aria-invalid": ariaInvalid, "aria-describedby": errorId, ...props }), children] }));
         } }));
 };
 export { MultiSelectInput };

package/dist/Form/Number/NumberInput.d.ts

@@ -4,6 +4,6 @@ import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentPropsWithRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Number } from "./Number";
-type Props = Omit<ConsumerFieldProps & ComponentPropsWithRef<typeof Number>, "children">;
-export declare const NumberInput: ({ rightElement, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = ConsumerFieldProps & ComponentPropsWithRef<typeof Number>;
+export declare const NumberInput: ({ children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Number/NumberInput.js

@@ -4,6 +4,6 @@ import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { Field } from "../core";
 import { Number } from "./Number";
-export const NumberInput = ({ rightElement, ...props }) => {
-    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })) }));
+export const NumberInput = ({ children, ...props }) => {
+    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })) }));
 };

package/dist/Form/Pass/PassInput.d.ts

@@ -5,6 +5,6 @@ type PassProps = ComponentProps<typeof Pass>;
 type Props = Omit<ConsumerFieldProps & PassProps & {
     helpMessage?: ReactNode;
     score?: string;
-}, "onToggleType" | "type" | "children">;
-declare const PassInput: ({ rightElement, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+}, "onToggleType" | "type">;
+declare const PassInput: ({ children, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { PassInput };

package/dist/Form/Pass/PassInput.js

@@ -23,9 +23,9 @@ const calculateStrength = (score) => {
     }
     return strengthList[strength];
 };
-const PassInput = ({ rightElement, score, classModifier, disabled, ...props }) => {
+const PassInput = ({ children, score, classModifier, disabled, ...props }) => {
     const strength = calculateStrength(score);
     const [type, setType] = useState("password");
-    return (_jsx(Field, { ...props, classModifier: classModifier, renderInput: ({ id, classModifier: modifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Pass, { ...props, type: type, id: id, disabled: disabled, classModifier: `${modifier} ${strength}`, "aria-describedby": errorId, "aria-invalid": ariaInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), rightElement] })) }));
+    return (_jsx(Field, { ...props, classModifier: classModifier, renderInput: ({ id, classModifier: modifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Pass, { ...props, type: type, id: id, disabled: disabled, classModifier: `${modifier} ${strength}`, "aria-describedby": errorId, "aria-invalid": ariaInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), children] })) }));
 };
 export { PassInput };

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

@@ -3,7 +3,7 @@ export declare enum RadioModes {
     classic = "classic",
     default = "default",
     inline = "inline",
-    card = "card"
+    cardRadio = "cardRadio"
 }
 declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
@@ -12,7 +12,7 @@ declare const Radio: import("react").ForwardRefExoticComponent<(({
     orientation?: "horizontal" | "vertical";
     error?: boolean;
 }, "ref"> & {
-    mode: "card";
+    mode: "cardRadio";
 }) | Omit<{
     options: Option[];
 } & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {

package/dist/Form/Radio/Radio.js

@@ -1,14 +1,15 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from "react";
-import { RadioItem } from "./RadioItem";
+import classNames from "classnames";
 import { RadioCardGroup } from "./RadioCardGroup";
+import { RadioItem } from "./RadioItem";
 export var RadioModes;
 (function (RadioModes) {
     RadioModes["classic"] = "classic";
     RadioModes["default"] = "default";
     RadioModes["inline"] = "inline";
-    RadioModes["card"] = "card";
+    RadioModes["cardRadio"] = "cardRadio";
 })(RadioModes || (RadioModes = {}));
 const getClassNameMode = (mode) => {
     switch (mode) {
@@ -16,7 +17,7 @@ const getClassNameMode = (mode) => {
             return "af-form__radio";
         case RadioModes.inline:
             return "af-form__radio-inline";
-        case RadioModes.card:
+        case RadioModes.cardRadio:
             return "af-form__radio-card";
         default:
             return "af-form__radio-custom";
@@ -25,10 +26,12 @@ const getClassNameMode = (mode) => {
 const Radio = forwardRef(({ options, value = "", children, disabled, ...otherProps }, inputRef) => {
     const { mode, ...onlyNecessaryProps } = otherProps;
     const classNameMode = getClassNameMode(mode ?? "default");
-    if (mode === "card") {
+    if (mode === "cardRadio") {
         return (_jsx(RadioCardGroup, { ...onlyNecessaryProps, options: options, disabled: disabled, value: value, children: children }));
     }
-    return options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children)));
+    return (_jsx("div", { className: classNames("af-form__radio-group", [
+            { "af-form__radio-group-classic": mode === RadioModes.classic },
+        ]), children: options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children))) }));
 });
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Radio } from "./Radio";
-type RadioInputProps = Omit<ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>, "children">;
+type RadioInputProps = ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>;
 declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export { RadioInput };

package/dist/Form/Radio/RadioInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Radio, RadioModes } from "./Radio";
-const RadioInput = forwardRef(({ label, mode = "default", options, rightElement, ...props }, inputRef) => {
+const RadioInput = forwardRef(({ label, mode = "default", options, children, ...props }, inputRef) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "card" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), rightElement] })) }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "cardRadio" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), children] })) }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

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

@@ -26,7 +26,7 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     } & Record<string, unknown>) => import("react").ReactNode;
     appendChildren?: import("react").ReactNode;
 }, "children" | "renderInput" | "classNameSuffix"> & {
-    rightElement?: import("react").ReactNode;
+    children?: import("react").ReactNode;
 } & Omit<Omit<{
     suppressHydrationWarning?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
@@ -355,7 +355,7 @@ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<
     } & Record<string, unknown>) => import("react").ReactNode;
     appendChildren?: import("react").ReactNode;
 }, "children" | "renderInput" | "classNameSuffix"> & {
-    rightElement?: import("react").ReactNode;
+    children?: import("react").ReactNode;
 } & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
     classModifier?: string;

package/dist/Form/Select/SelectInput.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from "react";
 import { Field } from "../core";
 import { Select } from "./Select";
-const SelectInput = forwardRef(({ label, options, ...props }, inputRef) => {
-    return (_jsx(Field, { label: label, classNameSuffix: "select", ...props, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...otherSelectProps }) => (_jsx(Select, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...otherSelectProps })) }));
+const SelectInput = forwardRef(({ label, options, children, ...props }, inputRef) => {
+    return (_jsx(Field, { label: label, classNameSuffix: "select", ...props, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...otherSelectProps }) => (_jsxs(_Fragment, { children: [_jsx(Select, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...otherSelectProps }), children] })) }));
 });
 SelectInput.displayName = "SelectInput";
 export { SelectInput };

package/dist/Form/Slider/SliderInput.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentProps } from "react";
 import { ConsumerFieldProps } from "../core";
 import { Slider } from "./Slider";
-type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Slider>, "children">;
+type Props = ConsumerFieldProps & ComponentProps<typeof Slider>;
 /**
  * @deprecated This component is deprecated and will be removed in a future major release.
  */
-declare const SliderInput: ({ rightElement, name, options, label, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SliderInput: ({ children, name, options, label, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { SliderInput };

package/dist/Form/Slider/SliderInput.js

@@ -4,7 +4,7 @@ import { Slider } from "./Slider";
 /**
  * @deprecated This component is deprecated and will be removed in a future major release.
  */
-const SliderInput = ({ rightElement, name, options, label, ...props }) => {
-    return (_jsx(Field, { label: label, ...props, renderInput: ({ id, classModifier, ...sliderProps }) => (_jsxs(_Fragment, { children: [_jsx(Slider, { id: id, classModifier: classModifier, name: name, options: options, ...sliderProps }), rightElement] })) }));
+const SliderInput = ({ children, name, options, label, ...props }) => {
+    return (_jsx(Field, { label: label, ...props, renderInput: ({ id, classModifier, ...sliderProps }) => (_jsxs(_Fragment, { children: [_jsx(Slider, { id: id, classModifier: classModifier, name: name, options: options, ...sliderProps }), children] })) }));
 };
 export { SliderInput };

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

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 import { ConsumerFieldProps } from "../core";
 import { Text } from "./Text";
-export type TextInputProps = Omit<ConsumerFieldProps & ComponentProps<typeof Text>, "children">;
+export type TextInputProps = ConsumerFieldProps & ComponentProps<typeof Text>;
 declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { TextInput };

package/dist/Form/Text/TextInput.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Text } from "./Text";
-const TextInput = forwardRef(({ rightElement, ...props }, inputRef) => {
-    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), rightElement] })) }));
+const TextInput = forwardRef(({ children, ...props }, inputRef) => {
+    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
 });
 TextInput.displayName = "TextInput";
 export { TextInput };

package/dist/Form/Textarea/TextareaInput.d.ts

@@ -4,6 +4,6 @@ import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentProps } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Textarea } from "./Textarea";
-type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Textarea>, "children">;
+type Props = ConsumerFieldProps & ComponentProps<typeof Textarea>;
 declare const TextareaInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { TextareaInput };

package/dist/Form/Textarea/TextareaInput.js

@@ -5,8 +5,8 @@ import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Textarea } from "./Textarea";
-const TextareaInput = forwardRef(({ label, rightElement, ...props }, inputRef) => {
-    return (_jsx(Field, { label: label, labelPosition: "top", classNameSuffix: "textarea", ...props, renderInput: ({ id, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Textarea, { id: id, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })) }));
+const TextareaInput = forwardRef(({ label, children, ...props }, inputRef) => {
+    return (_jsx(Field, { label: label, labelPosition: "top", classNameSuffix: "textarea", ...props, renderInput: ({ id, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Textarea, { id: id, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })) }));
 });
 TextareaInput.displayName = "TextareaInput";
 export { TextareaInput };

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

@@ -74,7 +74,7 @@ export type ConsumerFieldProps = Omit<InputProps, "renderInput" | "classNameSuff
     /**
      * Element appended right to the input
      */
-    rightElement?: ReactNode;
+    children?: ReactNode;
 };
 export declare const Field: ({ classNameContainerInput, classNameContainerLabel, className, label, forceDisplayMessage, message, messageType, required, classModifier, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, labelPosition, classNameSuffix, renderInput, appendChildren, ...otherProps }: InputProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Layout/MainContainer/MainContainer.d.ts

@@ -1,5 +1,4 @@
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/MainContainer/MainContainer.css";
 import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 type MainContainerProps = ComponentPropsWithoutRef<"main"> & PropsWithChildren;
 export declare const MainContainer: ({ children, ...othersProps }: MainContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layout/MainContainer/MainContainer.js

@@ -1,4 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Layout/MainContainer/MainContainer.css";
 import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export const MainContainer = ({ children, ...othersProps }) => (_jsx("main", { className: "af-container", ...othersProps, children: children }));

package/dist/Steps/VerticalStep.d.ts

@@ -2,47 +2,28 @@ import { ReactNode } from "react";
 import type { VerticalStepMode } from "./types";
 import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
 type Props = {
-    /**
-     * title - The title of the step.
-     */
+    /** The title of the step. */
     title: string;
-    /**
-     * id - The id of the step, used for accessibility.
-     * It should be unique within the document.
-     */
+    /** The id of the step, used for accessibility. It should be unique within the document. */
     id: string;
-    /**
-     * stepMode - The mode of the step, can be "edited", "validated", or "locked".
-     */
+    /** The mode of the step, can be "edited", "validated", or "locked". */
     stepMode: VerticalStepMode;
-    /**
-     * onEdit - The function to call when the edit button is clicked.
-     */
+    /** The function to call when the edit button is clicked. */
     onEdit: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * form - The content of the form to display when the step is in "edited" mode.
-     */
+    /** The content of the form to display when the step is in "edited" mode. */
     form: ReactNode;
-    /**
-     * restitution - The content to display when the step is in "validated" mode.
-     */
+    /** The content to display when the step is in "validated" mode. */
     restitution: ReactNode;
-    /**
-     * editButtonLabel - The label of the edit button.
-     */
+    /** The label of the edit button. */
     editButtonLabel?: string;
-    /**
-     * editButtonAriaLabel - The aria-label of the edit button.
-     */
+    /** The aria-label of the edit button. */
     editButtonAriaLabel?: string;
-    /**
-     * showRestitution - Whether to show the restitution content when the step is validated.
-     */
+    /** Whether to show the restitution content when the step is validated. */
     showRestitution?: boolean;
-    /**
-     * contentRight - Additional content to display on the right side of the title.
-     */
+    /** Additional content to display on the right side of the title. */
     contentRight?: string;
+    /** The aria-label for the additional content on the right side of the title. */
+    contentRightAriaLabel?: string;
 };
-export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, onEdit, form, restitution, showRestitution, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalStep: ({ title, id, stepMode, editButtonLabel, editButtonAriaLabel, contentRightAriaLabel, onEdit, form, restitution, showRestitution, contentRight, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Steps/VerticalStep.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import edit from "@material-symbols/svg-400/sharp/edit-fill.svg";
 import check from "@material-symbols/svg-400/sharp/check.svg";
+import edit from "@material-symbols/svg-400/sharp/edit-fill.svg";
 import lock from "@material-symbols/svg-400/sharp/lock-fill.svg";
-import { Title } from "../Title/Title";
+import classNames from "classnames";
 import { Svg } from "../Svg";
+import { Title } from "../Title/Title";
 import "@axa-fr/design-system-slash-css/dist/Steps/VerticalStep.css";
 import { Button } from "../Button/Button";
 const defaultClassName = "af-vertical-step";
-export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, onEdit, form, restitution, showRestitution = true, contentRight, }) => {
+export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier", editButtonAriaLabel = `Modifier l'étape ${title}`, contentRightAriaLabel = `Contenu supplémentaire étape verticale ${title}`, onEdit, form, restitution, showRestitution = true, contentRight, }) => {
     const isStepInEdition = stepMode === "edited";
     const isStepValidated = stepMode === "validated";
     const isStepLocked = stepMode === "locked";
-    return (_jsxs("div", { className: classNames(defaultClassName, {
+    return (_jsxs("section", { className: classNames(defaultClassName, {
             [`${defaultClassName}--edition`]: isStepInEdition,
-        }), children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
+        }), "aria-label": `Étape verticale ${title}`, children: [_jsxs("div", { className: classNames("af-vertical-step-icon", {
                     [`${defaultClassName}-icon--validated`]: isStepValidated,
                     [`${defaultClassName}-icon--locked`]: isStepLocked,
                     [`${defaultClassName}-icon--edited`]: isStepInEdition,
-                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { id: id, contentLeft: isStepValidated ? (_jsxs(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, className: "af-vertical-step-title-button", children: [_jsx(Svg, { role: "presentation", src: edit }), editButtonLabel] })) : undefined, contentRight: contentRight, children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
+                }), children: [isStepValidated ? _jsx(Svg, { role: "presentation", src: check }) : null, isStepLocked ? _jsx(Svg, { role: "presentation", src: lock }) : null, isStepInEdition ? _jsx(Svg, { role: "presentation", src: edit }) : null] }), _jsx(Title, { id: id, contentLeft: isStepValidated ? (_jsx(Button, { "aria-label": editButtonAriaLabel, onClick: onEdit, variant: "ghost", leftIcon: _jsx(Svg, { role: "presentation", src: edit }), children: editButtonLabel })) : undefined, contentRight: _jsx("section", { "aria-label": contentRightAriaLabel, children: contentRight }), children: title }), isStepInEdition ? _jsx("section", { children: form }) : null, isStepValidated && showRestitution ? (_jsx("section", { children: restitution })) : null, isStepInEdition ? (_jsx("div", { className: classNames(`${defaultClassName}-icon ${defaultClassName}-icon--lastIcon`), children: _jsx(Svg, { role: "presentation", src: check }) })) : null] }));
 };

package/dist/Summary/index.js

@@ -7,5 +7,5 @@ export const Summary = ({ messages = [], isVisible = true, title = "Invalid form
         return null;
     }
     const variant = classModifier === "danger" ? "warning" : classModifier;
-    return (_jsx(Message, { icon: "glyphicon glyphicon-warning-sign", title: title, variant: variant, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
+    return (_jsx(Message, { title: title, variant: variant, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
 };

package/dist/Tag/Tag.d.ts

@@ -1,12 +1,19 @@
-import { ComponentPropsWithRef, PropsWithChildren } from "react";
 import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
-type TagModifier = "success" | "information" | "warning" | "error" | "default" | "dark" | "purple" | "gray";
-/**
- * @deprecated instead use warning
- */
-type TagModifierDecrepated = "danger" | "info";
+import { ComponentPropsWithRef, PropsWithChildren } from "react";
+export type TagVariants = "success" | "information" | "warning" | "error" | "default" | "dark" | "purple" | "gray" | "white";
 type TagProps = ComponentPropsWithRef<"span"> & {
-    classModifier?: `${TagModifier | TagModifierDecrepated}` | string;
+    /**
+     * Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead. "info" is deprecated, use "information" instead
+     * @deprecated Use `variant` instead
+     */
+    classModifier?: string;
+    /**
+     * Variant of the tag to apply specific styles.
+     * "warning" replaces the deprecated "danger
+     * "information" replaces the deprecated "info"
+     * @default "default"
+     */
+    variant?: TagVariants;
     disabled?: boolean;
 };
 /**
@@ -15,13 +22,9 @@ type TagProps = ComponentPropsWithRef<"span"> & {
  * @component
  * @example
  * // Basic usage
- * <Tag classModifier="success">Success Tag</Tag>
+ * <Tag variant="success">Success Tag</Tag>
  *
- * @param {object} props - The properties object.
  * @param {React.ReactNode} props.children - The content to be displayed inside the tag.
- * @param {string} [props.className] - Additional class names to apply to the tag.
- * @param {string} [props.classModifier] - Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead. "info" is deprecated, use "information" instead
- * @param {boolean} [props.disabled] - If true, the tag will be disabled.
  * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
  * @returns {JSX.Element} The rendered Tag component.
  */

package/dist/Tag/Tag.js

@@ -1,27 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { getComponentClassName } from "../utilities";
 import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+import { forwardRef } from "react";
+import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
 /**
  * Tag component to display a label with various styles.
  *
  * @component
  * @example
  * // Basic usage
- * <Tag classModifier="success">Success Tag</Tag>
+ * <Tag variant="success">Success Tag</Tag>
  *
- * @param {object} props - The properties object.
  * @param {React.ReactNode} props.children - The content to be displayed inside the tag.
- * @param {string} [props.className] - Additional class names to apply to the tag.
- * @param {string} [props.classModifier] - Modifier class to apply specific styles. Note: "danger" is deprecated, use "warning" instead. "info" is deprecated, use "information" instead
- * @param {boolean} [props.disabled] - If true, the tag will be disabled.
  * @param {React.Ref<HTMLSpanElement>} ref - The ref to the span element.
  * @returns {JSX.Element} The rendered Tag component.
  */
-export const Tag = forwardRef(({ children, className, classModifier = "default", ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-tag");
+export const Tag = forwardRef(({ children, className, classModifier, variant, ...otherProps }, ref) => {
+    const actualModifier = variant || classModifier || "default";
+    const componentClassName = getComponentClassNameWithUserClassname({
+        userClassName: className,
+        classModifier: actualModifier,
+        componentClassName: "af-tag",
+    });
     // Kept for backward compatibility. May be removed in a future version
-    const badgeClassName = getComponentClassName(className, classModifier, "af-badge");
+    const badgeClassName = getComponentClassNameWithUserClassname({
+        userClassName: className,
+        classModifier: actualModifier,
+        componentClassName: "af-badge",
+    });
     return (_jsx("span", { ref: ref, className: `${componentClassName} ${badgeClassName}`, ...otherProps, children: children }));
 });
 Tag.displayName = "Tag";

package/dist/index.d.ts

@@ -1,17 +1,11 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
-import "@fontsource/source-sans-pro";
+import "@fontsource/source-sans-pro/400.css";
 import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";
 import { Tag } from "./Tag/Tag";
 export { Action } from "./Action/Action";
-/** @deprecated Use `Tag` instead. */
-declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-    classModifier?: `${("error" | "warning" | "success" | "information" | "default" | "dark" | "purple" | "gray") | ("info" | "danger")}` | string;
-    disabled?: boolean;
-}>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export { Badge, Tag };
 export { Button } from "./Button/Button";
 export type { ButtonVariant } from "./Button/Button";
 export { Card } from "./Card/Card";
@@ -42,6 +36,14 @@ export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+/** @deprecated Use `Tag` instead. */
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+    classModifier?: string;
+    variant?: import("./Tag/Tag").TagVariants;
+    disabled?: boolean;
+}>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export type { TagVariants } from "./Tag/Tag";
+export { Badge, Tag };
 /**
  * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
  * @see {@link Message}

package/dist/index.js

@@ -1,14 +1,11 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
-import "@fontsource/source-sans-pro";
+import "@fontsource/source-sans-pro/400.css";
 import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";
 import { Tag } from "./Tag/Tag";
 export { Action } from "./Action/Action";
-/** @deprecated Use `Tag` instead. */
-const Badge = Tag;
-export { Badge, Tag };
 export { Button } from "./Button/Button";
 export { Card } from "./Card/Card";
 export { Divider } from "./Divider/Divider";
@@ -38,6 +35,9 @@ export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+/** @deprecated Use `Tag` instead. */
+const Badge = Tag;
+export { Badge, Tag };
 /**
  * @deprecated `Alert` has been renamed `Message` in order to comply with UX naming of components. Use `Message` instead.
  * @see {@link Message}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.0-alpha.48",
+  "version": "2.0.0-alpha.49",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,19 +47,22 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "2.0.0-alpha.48",
+    "@axa-fr/design-system-slash-css": "2.0.0-alpha.49",
     "@material-symbols/svg-400": ">= 0.19.0",
+    "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"
   },
   "peerDependenciesMeta": {
     "@material-symbols/svg-400": {
-      "optional": true
+      "optional": false
+    },
+    "@material-symbols/svg-700": {
+      "optional": false
     }
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.8",
     "@fontsource/source-sans-pro": "^5.2.5",
-    "@material-symbols/svg-700": ">= 0.19.0",
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",