@axa-fr/design-system-slash-react 2.0.0-RC.1 → 2.0.0-RC.3

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

@@ -1,8 +1,8 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from "react";
-import { RadioItem } from "./RadioItem";
 import { RadioCardGroup } from "./RadioCardGroup";
+import { RadioItem } from "./RadioItem";
 export var RadioModes;
 (function (RadioModes) {
     RadioModes["classic"] = "classic";
@@ -28,7 +28,7 @@ const Radio = forwardRef(({ options, value = "", children, disabled, ...otherPro
     if (mode === "card") {
         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: "af-form__radio-group", 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 !== "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 }), 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/Header/index.d.ts

@@ -6,3 +6,4 @@ export { Name } from "./Name/Name";
 export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
+export type { AnchorNavBarItem } from "./AnchorNavBar/AnchorNavBar";

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

@@ -1,10 +1,10 @@
 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";
@@ -18,5 +18,5 @@ export const VerticalStep = ({ title, id, stepMode, editButtonLabel = "Modifier"
                     [`${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: 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";
@@ -31,7 +25,7 @@ export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
 export { Footer } from "./Layout/Footer";
-export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, type AnchorNavBarItem, } from "./Layout/Header";
 export { MainContainer } from "./Layout/MainContainer/MainContainer";
 export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
@@ -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-RC.1",
+  "version": "2.0.0-RC.3",
   "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-RC.1",
+    "@axa-fr/design-system-slash-css": "2.0.0-RC.3",
     "@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",