@axa-fr/canopee-react 1.8.1-alpha.1 → 2.0.0-RC.1

package/dist/distributeur/Form/Experimental/Radio/RadioText.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioItem } from "./RadioItem";
+export const RadioText = ({ id, label, ...props }) => (_jsxs("label", { htmlFor: id, className: "af-radio__text", children: [_jsx(RadioItem, { id: id, ...props }), _jsx("span", { className: "af-radio__label", children: label })] }));

package/dist/distributeur/Form/Experimental/Radio/_radioInputOptions.d.ts

@@ -0,0 +1,8 @@
+import type { RadioInputPropsButtonVariant, RadioInputPropsCardVariant } from "./RadioInput";
+type RadioInputOptionsProps = {
+    inputId: string;
+    isInvalid: boolean;
+    describedBy?: string;
+} & (Pick<RadioInputPropsCardVariant, "variant" | "options" | "showAddButton" | "orientation" | "onAdd"> | Pick<RadioInputPropsButtonVariant, "variant" | "options">);
+export declare const RadioInputOptions: ({ inputId, isInvalid, describedBy, ...props }: RadioInputOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Form/Experimental/Radio/_radioInputOptions.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddRadioCard } from "./AddRadioCard";
+import { RadioButton } from "./RadioButton";
+import { RadioCard } from "./RadioCard";
+export const RadioInputOptions = ({ inputId, isInvalid, describedBy, ...props }) => (_jsxs(_Fragment, { children: [!props.variant || props.variant === "button"
+            ? props.options.map((o) => (_jsx(RadioButton, { ...o }, `${inputId}-${o.value}`)))
+            : null, props.variant === "card" ? (_jsxs(_Fragment, { children: [props.options.map((o) => (_jsx(RadioCard, { id: `${inputId}-${o.value}`, ...o, "aria-invalid": isInvalid, "aria-describedby": describedBy, orientation: props.orientation || "horizontal" }, `${inputId}-${o.value}`))), props.showAddButton ? (_jsx(AddRadioCard, { orientation: props.orientation || "horizontal", onClick: props.onAdd })) : null] })) : null] }));

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

@@ -0,0 +1,8 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Select.css";
+import { type ComponentPropsWithRef } from "react";
+declare const Select: {
+    ({ className, children, ...otherProps }: ComponentPropsWithRef<"select">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Select };

package/dist/distributeur/Form/Experimental/Select.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Select.css";
+import {} from "react";
+import icon from "@material-symbols/svg-700/rounded/arrow_drop_down-fill.svg";
+import { getClassName } from "../../utilities/helpers/getClassName";
+import { Svg } from "../../Svg";
+const Select = ({ className, children, ...otherProps }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-input__input",
+        className,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("select", { className: componentClassName, ...otherProps, children: children }), _jsx(Svg, { className: "af-input__select-icon", src: icon })] }));
+};
+Select.displayName = "Select";
+export { Select };

package/dist/distributeur/Form/Experimental/SelectInput.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { Select } from "./Select";
+import type { InputBaseProps } from "./types";
+export type SelectInputProps = Omit<ComponentProps<typeof Select>, "children"> & InputBaseProps & {
+    /**
+     * The content of the select, as JSX.
+     * This allows you to render `<option>` elements, and to group them with `<optgroup>`.
+     *
+     * @example
+     * ```tsx
+     * options={
+     *   <optgroup label="Europe">
+     *     <option value="FR">France</option>
+     *     <option value="ES">Spain</option>
+     *   </optgroup>
+     * }
+     * ```
+     */
+    options: ReactNode;
+    /**
+     * The text of the empty option rendered before the options, when no value is selected.
+     * Pass `null` to not render any placeholder option.
+     * @default "- Select -"
+     */
+    placeholder?: string | null;
+};
+/**
+ * This component renders a label, a select field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the select.
+ * It also supports adding a unit on the right of the select.
+ */
+declare const SelectInput: {
+    ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, options, placeholder, ...props }: SelectInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectInput };

package/dist/distributeur/Form/Experimental/SelectInput.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { InputContainer } from "./InputContainer";
+import { InputUnit } from "./InputUnit";
+import { ItemMessage } from "./ItemMessage";
+import { Label } from "./Label";
+import { Select } from "./Select";
+import { useInput } from "./useInput.hook";
+/**
+ * This component renders a label, a select field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the select.
+ * It also supports adding a unit on the right of the select.
+ */
+const SelectInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, options, placeholder = "- Select -", ...props }) => {
+    const { describedBy, errorId, helperId, inputClassName, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
+        id,
+        labelPosition,
+        inputClassName: inputClassNameProp,
+        labelClassName: labelClassNameProp,
+        errorMessage,
+        helpMessage,
+    });
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsxs(Select, { ...props, className: inputClassName, id: inputId, "aria-describedby": describedBy, "aria-invalid": isInvalid, children: [placeholder === null ? null : _jsx("option", { value: "", children: placeholder }), options] }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+};
+SelectInput.displayName = "SelectInput";
+export { SelectInput };

package/dist/distributeur/Form/Experimental/TextInput.d.ts

@@ -7,5 +7,8 @@ export type TextInputProps = Omit<ComponentProps<typeof Input>, "children"> & In
  * It can be customized to render the label on top, or on the left of the input.
  * It also supports adding a unit on the right of the input.
  */
-declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const TextInput: {
+    ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { TextInput };

package/dist/distributeur/Form/Experimental/TextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { Input } from "./Input";
 import { InputContainer } from "./InputContainer";
 import { InputUnit } from "./InputUnit";
@@ -11,7 +11,7 @@ import { useInput } from "./useInput.hook";
  * It can be customized to render the label on top, or on the left of the input.
  * It also supports adding a unit on the right of the input.
  */
-const TextInput = forwardRef(({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }, inputRef) => {
+const TextInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }) => {
     const { describedBy, errorId, helperId, inputClassName, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
         id,
         labelPosition,
@@ -20,7 +20,7 @@ const TextInput = forwardRef(({ contentRight, id, labelPosition, inputClassName:
         errorMessage,
         helpMessage,
     });
-    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsx(Input, { ...props, className: inputClassName, id: inputId, ref: inputRef, "aria-describedby": describedBy, "aria-invalid": isInvalid }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
-});
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsx(Input, { ...props, className: inputClassName, id: inputId, "aria-describedby": describedBy, "aria-invalid": isInvalid }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+};
 TextInput.displayName = "TextInput";
 export { TextInput };

package/dist/distributeur/Form/Experimental/index.d.ts

@@ -1,9 +1,20 @@
+export { DateInput } from "./DateInput";
+export type { DateInputProps } from "./DateInput";
 export { Input } from "./Input";
 export { InputContainer } from "./InputContainer";
 export { InputUnit } from "./InputUnit";
 export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
+export { Select } from "./Select";
+export { SelectInput } from "./SelectInput";
+export type { SelectInputProps } from "./SelectInput";
 export { TextInput } from "./TextInput";
 export type { TextInputProps } from "./TextInput";
 export type { InputBaseProps, LabelPosition, SingleLineLabelPosition, } from "./types";
 export { useInput } from "./useInput.hook";
+export { RadioButton, type RadioButtonProps } from "./Radio/RadioButton";
+export { RadioCard, type RadioCardProps } from "./Radio/RadioCard";
+export { RadioGroup, type RadioGroupProps } from "./Radio/RadioGroup";
+export { RadioInput, type RadioInputProps, type RadioInputPropsButtonVariant, type RadioInputPropsCardVariant, } from "./Radio/RadioInput";
+export { RadioItem, type RadioItemProps } from "./Radio/RadioItem";
+export { RadioText, type RadioTextProps } from "./Radio/RadioText";

package/dist/distributeur/Form/Experimental/index.js

@@ -1,7 +1,16 @@
+export { DateInput } from "./DateInput";
 export { Input } from "./Input";
 export { InputContainer } from "./InputContainer";
 export { InputUnit } from "./InputUnit";
 export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
+export { Select } from "./Select";
+export { SelectInput } from "./SelectInput";
 export { TextInput } from "./TextInput";
 export { useInput } from "./useInput.hook";
+export { RadioButton } from "./Radio/RadioButton";
+export { RadioCard } from "./Radio/RadioCard";
+export { RadioGroup } from "./Radio/RadioGroup";
+export { RadioInput, } from "./Radio/RadioInput";
+export { RadioItem } from "./Radio/RadioItem";
+export { RadioText } from "./Radio/RadioText";

package/dist/distributeur/Form/Experimental/types.d.ts

@@ -35,7 +35,7 @@ export type InputBaseProps = {
      * - `leftAbove` will place the label above the input, aligned to the left. This is used to have the label above the input.
      * @default "centerLeft"
      */
-    labelPosition?: SingleLineLabelPosition;
+    labelPosition?: LabelPosition;
     /**
      * The help message to display below the input.
      */

package/dist/distributeur/Form/Experimental/useInput.hook.js

@@ -11,7 +11,7 @@ export const useInput = (props) => {
     });
     const labelClassName = getClassName({
         baseClassName: "af-label",
-        modifiers: [props.labelPosition === "above" && "top"],
+        modifiers: [props.labelPosition === "topLeft" && "top-left"],
         className: props.labelClassName,
     });
     const errorId = isInvalid ? `${inputId}-description` : undefined;

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

@@ -2,8 +2,6 @@ import { type DropzoneInputProps, type DropzoneOptions, type FileRejection } fro
 import type { FileActions } from "./constants";
 type Dropzone = DropzoneInputProps & DropzoneOptions;
 type Props = Omit<Dropzone, "onDrop" | "onChange"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     label?: string;
     icon?: string;
     onChange: (data: onChangeProps) => void;
@@ -22,5 +20,5 @@ type onChangeProps = {
     values: CustomFile[];
     errors?: CustomFile<FileRejection>[];
 };
-declare const File: ({ className, classModifier, id, name, disabled, onChange, multiple, maxSize, minSize, accept, readOnly, placeholder, label, icon, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const File: ({ className, id, name, disabled, onChange, multiple, maxSize, minSize, accept, readOnly, placeholder, label, icon, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { File };

package/dist/distributeur/Form/File/File.js

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { useDropzone, } from "react-dropzone";
 import { Button } from "../../Button/Button";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const File = ({ className, classModifier, id, name, disabled, onChange, multiple = true, maxSize = 20000000, minSize = 0, accept, readOnly, placeholder = "Glissez/déposez vos fichiers", label = "Parcourir", icon = "open", ...otherProps }) => {
+const File = ({ className, id, name, disabled, onChange, multiple = true, maxSize = 20000000, minSize = 0, accept, readOnly, placeholder = "Glissez/déposez vos fichiers", label = "Parcourir", icon = "open", ...otherProps }) => {
     const valueId = useId();
     const errorsId = useId();
     const handleOnChange = (acceptedFiles, rejectedFiles) => {
@@ -56,7 +56,6 @@ const File = ({ className, classModifier, id, name, disabled, onChange, multiple
     });
     const componentClassName = getClassName({
         baseClassName: "af-form__file-input",
-        modifiers: classModifier?.split(" "),
         className,
     });
     return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsx(Button, { className: "af-btn--file", leftIcon: _jsx("i", { className: `glyphicon glyphicon-${icon}` }), onClick: open, disabled: disabled, children: label })] }));

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

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

package/dist/distributeur/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, label, errors, fileLabel, classModifier, children, ...otherFileProps }) => {
+const FileInput = ({ values = [], id, name = "", onChange, label, errors, fileLabel, 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, label, errors, fileLa
     };
     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 }), children] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), classModifier: classModifier }) }));
+    return (_jsx(Field, { label: label, labelPosition: "top", id: actualId, fieldClassNameSuffix: "file", ...otherFileProps, renderInput: ({ inputClassName: inputClassModifiers, id: inputId, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(File, { id: inputId, name: name, onChange: onChange, className: inputClassModifiers, label: fileLabel, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), className: otherFileProps.tableClassName }) }));
 };
 export { FileInput };

package/dist/distributeur/Form/File/FileLine.d.ts

@@ -2,8 +2,7 @@ import type { CustomFile } from "./File";
 type Props = CustomFile & {
     onClick: (id: string) => void;
     className?: string;
-    classModifier?: string;
     disabled?: boolean;
 };
-declare const FileLine: ({ className, classModifier, file, disabled, id, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileLine: ({ className, file, disabled, id, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileLine };

package/dist/distributeur/Form/File/FileLine.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
-const FileLine = ({ className, classModifier, file, disabled, id, onClick, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__file-line");
+import { getClassName } from "../../utilities";
+const FileLine = ({ className, file, disabled, id, onClick }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-form__file-line",
+        className,
+    });
     return (_jsxs("li", { className: componentClassName, children: [file && file.type && file.type.startsWith("image") ? (_jsx("i", { className: "glyphicon glyphicon-picture" })) : (_jsx("i", { className: "glyphicon glyphicon-file" })), _jsx("span", { children: file.name }), _jsx("span", { children: file.size }), _jsx("button", { disabled: disabled, type: "button", className: "af-link af-link--delete-file", onClick: () => onClick(id), children: _jsx("span", { className: "af-link__text", children: "Supprimer" }) })] }));
 };
 export { FileLine };

package/dist/distributeur/Form/File/FileTable.d.ts

@@ -7,8 +7,7 @@ type Props = Pick<FileLineProps, "onClick"> & {
     errors?: FileRejection[];
     values?: CustomFile[];
     className?: string;
-    classModifier?: string;
     disabled?: boolean;
 };
-declare const FileTable: ({ errors, values, className, classModifier, disabled, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileTable: ({ errors, values, className, disabled, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileTable };

package/dist/distributeur/Form/File/FileTable.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities";
 import { FileErrors } from "./FileErrors";
 import { FileLine } from "./FileLine";
-const FileTable = ({ errors, values, className, classModifier, disabled, onClick, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "custom-table-file af-file-table");
+const FileTable = ({ errors, values, className, disabled, onClick }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-file-table",
+        className: `custom-table-file ${className ?? ""}`,
+    });
     return (_jsxs("div", { className: componentClassName, children: [errors && errors.length > 0 ? _jsx(FileErrors, { errors: errors }) : null, values && values.length > 0 ? (_jsx("ul", { className: "af-form__file-list", children: values.map(({ file, id }) => (_jsx(FileLine, { disabled: disabled, file: file, onClick: onClick, id: id }, id))) })) : null] }));
 };
 export { FileTable };

package/dist/distributeur/Form/MultiSelect/MultiSelectInput.js

@@ -4,7 +4,7 @@ import {} from "react";
 import { Field } from "../core";
 import { MultiSelect } from "./MultiSelect";
 const MultiSelectInput = ({ label, children, ...multiSelectProps }) => {
-    return (_jsx(Field, { label: label, ...multiSelectProps, classNameSuffix: "select", renderInput: ({ id, ariaInvalid, errorId, ...props }) => {
+    return (_jsx(Field, { label: label, ...multiSelectProps, fieldClassNameSuffix: "select", renderInput: ({ id, ariaInvalid, errorId, ...props }) => {
             return (_jsxs(_Fragment, { children: [_jsx(MultiSelect, { id: id, "aria-invalid": ariaInvalid, "aria-describedby": errorId, ...props }), children] }));
         } }));
 };

package/dist/distributeur/Form/NestedQuestion/NestedQuestion.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/NestedQuestion/NestedQuestion.css";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities";
+const baseClassName = "af-form__nested-question";
 export const NestedQuestion = ({ children, className, }) => {
-    const componentClassName = getComponentClassName(className, "", "af-form__nested-question");
-    return (_jsxs("section", { className: componentClassName, children: [_jsx("div", { className: `${componentClassName}-arrow` }), _jsx("section", { children: children })] }));
+    const componentClassName = getClassName({
+        baseClassName,
+        className,
+    });
+    return (_jsxs("section", { className: componentClassName, children: [_jsx("div", { className: `${baseClassName}-arrow` }), _jsx("section", { children: children })] }));
 };

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

@@ -1,8 +1,8 @@
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
 import { type ComponentPropsWithRef } from "react";
-type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
-    /** @deprecated Use `className` and the native `required` prop instead. */
-    classModifier?: string;
+type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {};
+declare const NumberComponent: {
+    ({ id, className, required, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-declare const Number: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export { Number };
+export { NumberComponent as Number };

package/dist/distributeur/Form/Number/Number.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Number = forwardRef(({ id, className, classModifier, required, ...otherProps }, inputRef) => {
+const NumberComponent = ({ id, className, required, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const componentClassName = getClassName({
         baseClassName: "af-form__input-text",
-        modifiers: classModifier?.split(" "),
         className,
     });
-    return (_jsx("input", { className: componentClassName, id: inputId, type: "number", ref: inputRef, required: required || classModifier?.includes("required"), ...otherProps }));
-});
-Number.displayName = "Number";
-export { Number };
+    return (_jsx("input", { className: componentClassName, id: inputId, type: "number", required: required, ...otherProps }));
+};
+NumberComponent.displayName = "Number";
+export { NumberComponent as Number };

package/dist/distributeur/Form/Number/NumberInput.js

@@ -3,5 +3,5 @@ import {} from "react";
 import { Field } from "../core";
 import { Number } from "./Number";
 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] })) }));
+    return (_jsx(Field, { ...props, renderInput: ({ id, inputClassName, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), children] })) }));
 };

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

@@ -1,33 +1,22 @@
+import { type ComponentPropsWithRef } from "react";
 import type { Option } from "../core";
+import { RadioCardGroup } from "./RadioCardGroup";
+import { RadioItem } from "./RadioItem";
 export declare enum RadioModes {
     classic = "classic",
     default = "default",
     inline = "inline",
     cardRadio = "cardRadio"
 }
-declare const Radio: import("react").ForwardRefExoticComponent<(({
+type Props = {
     options: Option[];
-} & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    options: ({
-        id?: string;
-        icon?: import("react").ReactNode;
-        label: import("react").ReactNode;
-        description?: import("react").ReactNode;
-        value: string;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & {
-        action?: import("react").ReactNode;
-    })[];
-    orientation?: "horizontal" | "vertical";
-}, "ref"> & {
-    mode: "cardRadio";
-}) | Omit<{
-    options: Option[];
-} & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
-    classModifier?: string;
-    optionClassName?: string;
-    label?: import("react").ReactNode;
-    isChecked?: boolean;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
+} & ((Omit<ComponentPropsWithRef<typeof RadioItem>, "id" | "label"> & {
     mode?: "classic" | "default" | "inline";
-}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+}) | (ComponentPropsWithRef<typeof RadioCardGroup> & {
+    mode: "cardRadio";
+}));
+declare const Radio: {
+    ({ options, value, children, disabled, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { Radio };

package/dist/distributeur/Form/Radio/Radio.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { forwardRef, } from "react";
+import {} from "react";
 import { RadioCardGroup } from "./RadioCardGroup";
 import { RadioItem } from "./RadioItem";
 export var RadioModes;
@@ -23,7 +23,7 @@ const getClassNameMode = (mode) => {
             return "af-form__radio-custom";
     }
 };
-const Radio = forwardRef(({ options, value = "", children, disabled, ...otherProps }, inputRef) => {
+const Radio = ({ options, value = "", children, disabled, ...otherProps }) => {
     const { mode, ...onlyNecessaryProps } = otherProps;
     const classNameMode = getClassNameMode(mode ?? "default");
     if (mode === "cardRadio") {
@@ -31,7 +31,7 @@ const Radio = forwardRef(({ options, value = "", children, disabled, ...otherPro
     }
     return (_jsxs(_Fragment, { children: [_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] }));
-});
+                ]), children: options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ...option }))) }), children] }));
+};
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

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

@@ -1,6 +1,9 @@
-import { type ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Radio } from "./Radio";
-type RadioInputProps = ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>;
-declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
+type RadioInputProps = ConsumerFieldProps & ComponentPropsWithRef<typeof Radio>;
+declare const RadioInput: {
+    ({ label, mode, options, children, ...props }: RadioInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { RadioInput };

package/dist/distributeur/Form/Radio/RadioInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Radio, RadioModes } from "./Radio";
-const RadioInput = forwardRef(({ label, mode = "default", options, children, ...props }, inputRef) => {
+const RadioInput = ({ label, mode = "default", options, children, ...props }) => {
     const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: "radiogroup", ...props, renderInput: ({ classModifier, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, ...radioProps, children: children })) }));
-});
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: "radiogroup", ...props, renderInput: ({ inputClassName, ...radioProps }) => (_jsx(Radio, { options: newOptions, mode: mode, className: inputClassName, ...radioProps, children: children })) }));
+};
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

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

@@ -1,11 +1,12 @@
 import "@axa-fr/canopee-css/distributeur/Form/Radio/Radio.css";
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "checked" | "type"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     optionClassName?: string;
     label?: ReactNode;
     isChecked?: boolean;
 };
-declare const RadioItem: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const RadioItem: {
+    ({ value, id, isChecked, label, className, disabled, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { RadioItem };

package/dist/distributeur/Form/Radio/RadioItem.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Radio/Radio.css";
-import { forwardRef, useId, } from "react";
+import { useId } from "react";
 import { getOptionClassName } from "../core";
-const RadioItem = forwardRef(({ value = "", id, isChecked, label, classModifier = "", className = "", disabled = false, ...otherProps }, inputRef) => {
-    const optionClassName = getOptionClassName(className, classModifier, "af-form__radio", disabled);
+const RadioItem = ({ value = "", id, isChecked, label, className = "", disabled = false, ...otherProps }) => {
+    const optionClassName = getOptionClassName(className, "af-form__radio", disabled);
     const generatedId = useId();
     const newId = id ?? generatedId;
-    return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-radio", id: newId, type: "radio", value: value, checked: isChecked, ref: inputRef, disabled: disabled }), _jsx("label", { className: "af-form__label", htmlFor: newId, children: _jsx("span", { className: "af-form__description", children: label }) })] }, value));
-});
+    return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-radio", id: newId, type: "radio", value: value, checked: isChecked, disabled: disabled }), _jsx("label", { className: "af-form__label", htmlFor: newId, children: _jsx("span", { className: "af-form__description", children: label }) })] }, value));
+};
 RadioItem.displayName = "RadioItem";
 export { RadioItem };