@axa-fr/canopee-react 1.0.0-alpha.1089

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

@@ -0,0 +1,9 @@
+import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
+import { ComponentPropsWithRef } from "react";
+type Props = Omit<ComponentPropsWithRef<"input">, "value"> & {
+    classModifier?: string;
+    defaultValue?: Date | string;
+    value?: Date | string;
+};
+declare const Date: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Date };

package/dist/distributeur/Form/Date/Date.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../../utilities";
+import { formatDateInputValue } from "../../utilities/helpers/date";
+const Date = forwardRef(({ className, classModifier, defaultValue, value, ...otherProps }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-date");
+    return (_jsx("input", { className: componentClassName, type: "date", defaultValue: formatDateInputValue(defaultValue), value: formatDateInputValue(value), ref: ref, disabled: classModifier?.includes("disabled"), required: classModifier?.includes("required"), ...otherProps }));
+});
+Date.displayName = "Date";
+export { Date };

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

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

package/dist/distributeur/Form/Date/DateInput.js

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

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

@@ -0,0 +1,2 @@
+export { DateInput } from "./DateInput";
+export { Date } from "./Date";

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

@@ -0,0 +1,2 @@
+export { DateInput } from "./DateInput";
+export { Date } from "./Date";

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,25 @@
+import { DropzoneInputProps, DropzoneOptions, FileRejection } from "react-dropzone";
+import { FileActions } from "./constants";
+type Dropzone = DropzoneInputProps & DropzoneOptions;
+type Props = Omit<Dropzone, "onDrop" | "onChange"> & {
+    classModifier?: string;
+    label?: string;
+    icon?: string;
+    onChange: (data: onChangeProps) => void;
+};
+export type FilePreview = File & {
+    preview: string;
+};
+export type CustomFile<T = FilePreview> = {
+    id: string;
+    file: T;
+};
+type onChangeProps = {
+    id?: string;
+    name?: string;
+    fileAction?: FileActions;
+    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;
+export { File };

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDropzone, } from "react-dropzone";
+import { useId } from "react";
+import { getComponentClassName } from "../../utilities";
+import { Button } from "../../Button/Button";
+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 valueId = useId();
+    const errorsId = useId();
+    const handleOnChange = (acceptedFiles, rejectedFiles) => {
+        if (!onChange)
+            return;
+        const values = acceptedFiles.map((file) => ({
+            id: valueId,
+            file: {
+                ...file,
+                lastModified: file.lastModified,
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                stream: file.stream,
+                arrayBuffer: file.arrayBuffer,
+                slice: file.slice,
+                text: file.text,
+                preview: URL.createObjectURL(file),
+            },
+        }));
+        const errors = rejectedFiles.map((error) => ({
+            id: errorsId,
+            file: {
+                errors: error.errors,
+                file: {
+                    ...error.file,
+                    lastModified: error.file.lastModified,
+                    name: error.file.name,
+                    type: error.file.type,
+                    size: error.file.size,
+                },
+            },
+        }));
+        const onChangeProps = {
+            values,
+            errors,
+            name,
+            fileAction: "add",
+            id,
+        };
+        onChange(onChangeProps);
+    };
+    const { getRootProps, getInputProps, open } = useDropzone({
+        onDrop: handleOnChange,
+        minSize,
+        maxSize,
+        multiple,
+        accept,
+        disabled,
+    });
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__file-input");
+    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 })] }));
+};
+export { File };

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

@@ -0,0 +1,6 @@
+import { FileRejection } from "react-dropzone";
+type Props = {
+    errors?: FileRejection[];
+};
+declare const FileErrors: ({ errors }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FileErrors };

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FileErrors = ({ errors }) => (_jsxs("div", { className: "af-form__file-errors", children: [_jsx("span", { children: "Le chargement de certains fichiers a \u00E9chou\u00E9 : " }), _jsx("ul", { className: "af-form__file-errors-list", children: errors
+                ? errors.map((err) => (_jsxs("li", { children: [err.file.name, " (", err.file.size, ")"] }, err.file.name)))
+                : null })] }));
+export { FileErrors };

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

@@ -0,0 +1,13 @@
+import "@axa-fr/canopee-css/distributeur/Form/File/File.css";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type ConsumerFieldProps } from "../core";
+import { File } from "./File";
+import { FileTable } from "./FileTable";
+type FileProps = ComponentPropsWithoutRef<typeof File>;
+type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
+type Props = ConsumerFieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
+    fileLabel?: string;
+    helpMessage?: ReactNode;
+};
+declare const FileInput: ({ values, id, name, onChange, label, errors, fileLabel, classModifier, children, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FileInput };

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/File/File.css";
+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 onDeleteClick = (selectedId, selectInputId) => {
+        const newValues = values.filter((element) => element.id !== selectedId);
+        onChange({
+            values: newValues,
+            name,
+            id: selectInputId,
+            fileAction: "delete",
+        });
+    };
+    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 }) }));
+};
+export { FileInput };

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

@@ -0,0 +1,9 @@
+import { 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;
+export { FileLine };

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

@@ -0,0 +1,7 @@
+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");
+    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

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from "react";
+import { FileRejection } from "react-dropzone";
+import { FileLine } from "./FileLine";
+import { CustomFile } from "./File";
+type FileLineProps = ComponentPropsWithoutRef<typeof FileLine>;
+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;
+export { FileTable };

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileLine } from "./FileLine";
+import { FileErrors } from "./FileErrors";
+import { getComponentClassName } from "../../utilities";
+const FileTable = ({ errors, values, className, classModifier, disabled, onClick, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "custom-table-file af-file-table");
+    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/File/constants.d.ts

@@ -0,0 +1 @@
+export type FileActions = "add" | "delete";

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+export { File } from "./File";
+export type { FilePreview } from "./File";
+export { FileErrors } from "./FileErrors";
+export { FileInput } from "./FileInput";
+export { FileLine } from "./FileLine";
+export { FileTable } from "./FileTable";

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

@@ -0,0 +1,5 @@
+export { File } from "./File";
+export { FileErrors } from "./FileErrors";
+export { FileInput } from "./FileInput";
+export { FileLine } from "./FileLine";
+export { FileTable } from "./FileTable";

package/dist/distributeur/Form/MultiSelect/FormatOptionLabel.d.ts

@@ -0,0 +1,4 @@
+import { type FormatOptionLabelMeta } from "react-select";
+import { Option } from "./MultiSelect";
+declare const formatOptionLabel: (data: Option, formatOptionLabelMeta: FormatOptionLabelMeta<Option>) => string | import("react/jsx-runtime").JSX.Element;
+export { formatOptionLabel };

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import checkIcon from "@material-symbols/svg-700/outlined/check.svg";
+import { Svg } from "../../Svg";
+const formatOptionLabel = (data, formatOptionLabelMeta) => {
+    if (formatOptionLabelMeta.context === "value") {
+        return data.label;
+    }
+    const isChecked = formatOptionLabelMeta.selectValue.some((selectValue) => data.value === selectValue.value);
+    return (_jsxs("div", { className: "react-select__multi-option-label", children: [_jsx("div", { className: "checkbox-indicator", children: _jsx("span", { className: classNames("indicator", { "checkbox-checked": isChecked }), children: isChecked ? _jsx(Svg, { src: checkIcon }) : null }) }), data.label] }));
+};
+export { formatOptionLabel };

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

@@ -0,0 +1,23 @@
+import "@axa-fr/canopee-css/distributeur/Form/MultiSelect/MultiSelect.css";
+import { type GroupBase } from "react-select";
+import { AsyncProps } from "react-select/async";
+type Option = {
+    value: string;
+    label: string;
+};
+type Props = Omit<AsyncProps<Option, true, GroupBase<Option>>, "value" | "isDisabled" | "onChange"> & {
+    onChange?: (data: onChangeProps) => void;
+    values?: string[] | null;
+    value?: string;
+    disabled?: boolean;
+    selectedLimit?: number;
+    selectedLimitLabel?: string;
+};
+type onChangeProps = {
+    id: string;
+    name: string;
+    values?: string[];
+    value?: string;
+};
+declare const MultiSelect: ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder, className, disabled, loadingMessage, isMulti, selectedLimit, selectedLimitLabel, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { MultiSelect, type Option };

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/MultiSelect/MultiSelect.css";
+import { useId } from "react";
+import Select from "react-select";
+import AsyncSelect from "react-select/async";
+import { formatOptionLabel } from "./FormatOptionLabel";
+import { noOptionsMessage } from "./NoOptionsMessage";
+import { useMultiSelectStyle } from "./useMultiSelectStyle";
+import { ValueContainer } from "./ValueContainer";
+const MultiSelect = ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder = "- Sélectionner -", className = "react-select", disabled, loadingMessage = () => "Chargement...", isMulti, selectedLimit, selectedLimitLabel, ...otherProps }) => {
+    const { styles } = useMultiSelectStyle();
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const handleOnChange = (newValue) => {
+        if (!onChange)
+            return;
+        let onChangeProps = {
+            name: name ?? "",
+            id: inputId,
+        };
+        if (values) {
+            onChangeProps = {
+                ...onChangeProps,
+                values: (newValue || []).map((v) => v.value),
+            };
+        }
+        else {
+            onChangeProps = {
+                ...onChangeProps,
+                value: newValue?.value,
+            };
+        }
+        onChange(onChangeProps);
+    };
+    const commonProps = {
+        inputId,
+        name,
+        onChange: handleOnChange,
+        onBlur,
+        placeholder,
+        className,
+        isDisabled: disabled,
+        options,
+        valueKey: "value",
+        labelKey: "label",
+        styles,
+        isMulti,
+        noOptionsMessage,
+        isClearable: true,
+        hideSelectedOptions: false,
+        components: { ValueContainer },
+        closeMenuOnSelect: !values,
+        ...otherProps,
+    };
+    if (values) {
+        const newValues = options.filter((opt) => values.includes(opt.value));
+        const commonValuesProps = {
+            ...commonProps,
+            value: newValues,
+            formatOptionLabel,
+            selectedLimit,
+            selectedLimitLabel,
+        };
+        return loadOptions ? (_jsx(AsyncSelect, { ...commonValuesProps, loadOptions: loadOptions, loadingMessage: loadingMessage, isMulti: true })) : (_jsx(Select, { ...commonValuesProps, isMulti: true }));
+    }
+    const newValue = options.find((o) => o.value === value);
+    const commonValueProps = {
+        ...commonProps,
+        multi: false,
+        value: newValue,
+    };
+    return loadOptions ? (_jsx(AsyncSelect, { ...commonValueProps, loadOptions: loadOptions, loadingMessage: loadingMessage })) : (_jsx(Select, { ...commonValueProps }));
+};
+export { MultiSelect };

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

@@ -0,0 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/Form/MultiSelect/MultiSelect.css";
+import { type ComponentProps } from "react";
+import { ConsumerFieldProps } from "../core";
+import { MultiSelect } from "./MultiSelect";
+type Props = ConsumerFieldProps & ComponentProps<typeof MultiSelect>;
+declare const MultiSelectInput: ({ label, children, ...multiSelectProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { MultiSelectInput };

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/MultiSelect/MultiSelect.css";
+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 (_jsxs(_Fragment, { children: [_jsx(MultiSelect, { id: id, "aria-invalid": ariaInvalid, "aria-describedby": errorId, ...props }), children] }));
+        } }));
+};
+export { MultiSelectInput };

package/dist/distributeur/Form/MultiSelect/NoOptionsMessage.d.ts

@@ -0,0 +1,3 @@
+export declare const noOptionsMessage: ({ inputValue }: {
+    inputValue: string;
+}) => string;

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

@@ -0,0 +1 @@
+export const noOptionsMessage = ({ inputValue }) => `Pas de résultats pour "${inputValue}"`;

package/dist/distributeur/Form/MultiSelect/ValueContainer.d.ts

@@ -0,0 +1,4 @@
+import { type GroupBase, type ValueContainerProps } from "react-select";
+import { Option } from "./MultiSelect";
+declare const ValueContainer: ({ children, ...props }: ValueContainerProps<Option, boolean, GroupBase<Option>>) => import("react/jsx-runtime").JSX.Element;
+export { ValueContainer };

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { components, } from "react-select";
+const ValueContainer = ({ children, ...props }) => {
+    const { selectProps, getStyles, innerProps } = props;
+    const { selectedLimit, selectedLimitLabel, value: selectedOptions, isMulti, } = selectProps;
+    if (!isMulti) {
+        return (_jsx(components.ValueContainer, { ...props, children: children }));
+    }
+    const [values, input] = children;
+    const visibleOptions = React.Children.toArray(values).slice(0, selectedLimit);
+    const extraCount = Array.isArray(selectedOptions) && selectedLimit !== undefined
+        ? selectedOptions.length - selectedLimit
+        : 0;
+    // On est obligé de sortir le borderRadius ici pour ne pas devoir ajouter un important dans le fichier scss
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { borderRadius, ...multiValueLabelStyles } = getStyles("multiValueLabel", props);
+    return (_jsxs(components.ValueContainer, { ...props, children: [extraCount > 0 ? (_jsxs(_Fragment, { children: [visibleOptions, _jsxs("div", { ...innerProps, style: multiValueLabelStyles, className: "multi-value-limit", children: ["+ ", extraCount, " ", selectedLimitLabel || ""] })] })) : (values), input] }));
+};
+export { ValueContainer };

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from "./MultiSelect";
+export { MultiSelectInput } from "./MultiSelectInput";

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from "./MultiSelect";
+export { MultiSelectInput } from "./MultiSelectInput";

package/dist/distributeur/Form/MultiSelect/useMultiSelectStyle.d.ts

@@ -0,0 +1,5 @@
+import { type GroupBase, type StylesConfig } from "react-select";
+import { Option } from "./MultiSelect";
+export declare const useMultiSelectStyle: () => {
+    styles: StylesConfig<Option, boolean, GroupBase<Option>>;
+};

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

@@ -0,0 +1,81 @@
+export const useMultiSelectStyle = () => {
+    // The recommended way to provide custom styles to react-select is to use the styles prop
+    // https://react-select.com/styles#the-styles-prop
+    const styles = {
+        container: () => ({
+            width: "100%",
+        }),
+        control: (provided, state) => ({
+            ...provided,
+            whiteSpace: "normal",
+            borderRadius: "0",
+            borderColor: state.isFocused ? "var(--axablue80)" : provided.borderColor,
+            boxShadow: state.isFocused ? "0" : provided.boxShadow,
+            width: "100%",
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            ":hover": {
+                borderColor: state.isFocused
+                    ? "var(--axablue80)"
+                    : provided.borderColor,
+            },
+        }),
+        menu: (provided) => ({
+            ...provided,
+            borderRadius: "0",
+        }),
+        menuList: (provided) => ({
+            ...provided,
+            padding: "0",
+        }),
+        option: (provided, state) => ({
+            ...provided,
+            backgroundColor: (state.isSelected && !state.isMulti) || state.isFocused
+                ? "var(--axablue30)"
+                : "var(--white)",
+            color: state.isSelected || state.isFocused
+                ? "var(--axablue80)"
+                : provided.color,
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            padding: "0.406rem 0.75rem",
+            ":hover": {
+                backgroundColor: "var(--axablue30)",
+                color: "var(--axablue80)",
+            },
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            whiteSpace: "normal",
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            whiteSpace: "normal",
+            flexDirection: "row-reverse",
+            borderRadius: "0.25rem",
+        }),
+        multiValueLabel: (provided, state) => ({
+            ...provided,
+            whiteSpace: "normal",
+            backgroundColor: state.isDisabled
+                ? provided.backgroundColor
+                : "var(--axablue30)",
+            color: state.isDisabled ? provided.backgroundColor : "var(--axablue80)",
+            padding: "0.125rem 0.375rem 0.125rem 0.375rem",
+            borderRadius: "0 0.25rem 0.25rem 0",
+        }),
+        multiValueRemove: (provided, state) => ({
+            ...provided,
+            backgroundColor: state.isDisabled
+                ? provided.backgroundColor
+                : "var(--axablue30)",
+            color: state.isDisabled ? provided.color : "var(--axablue80)",
+            //   borderRadius: "0.25rem 0 0 0.25rem",
+            ":hover": {
+                backgroundColor: state.isDisabled
+                    ? provided.backgroundColor
+                    : "var(--axablue40)",
+                color: state.isDisabled ? provided.color : "var(--axablue80)",
+            },
+        }),
+    };
+    return { styles };
+};

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

@@ -0,0 +1,5 @@
+import "@axa-fr/canopee-css/distributeur/Form/NestedQuestion/NestedQuestion.css";
+import { PropsWithChildren } from "react";
+export declare const NestedQuestion: ({ children, className, }: {
+    className?: string;
+} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+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";
+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 })] }));
+};

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

@@ -0,0 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
+import { ComponentPropsWithRef } from "react";
+type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
+    classModifier?: string;
+};
+declare const Number: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Number };

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

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

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from "react";
+import { type ConsumerFieldProps } from "../core";
+import { Number } from "./Number";
+type Props = ConsumerFieldProps & ComponentPropsWithRef<typeof Number>;
+export declare const NumberInput: ({ children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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] })) }));
+};

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

@@ -0,0 +1,2 @@
+export { NumberInput } from "./NumberInput";
+export { Number } from "./Number";

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

@@ -0,0 +1,2 @@
+export { NumberInput } from "./NumberInput";
+export { Number } from "./Number";

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

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef } from "react";
+import "@axa-fr/canopee-css/distributeur/Form/Pass/Pass.css";
+type Props = Omit<ComponentPropsWithRef<"input">, "type" | "role"> & {
+    type?: "text" | "password";
+    classModifier?: string;
+    onToggleType: () => void;
+};
+declare const Pass: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Pass };

package/dist/distributeur/Form/Pass/Pass.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../../utilities";
+import "@axa-fr/canopee-css/distributeur/Form/Pass/Pass.css";
+const Pass = forwardRef(({ onToggleType, type = "password", className, classModifier, ...inputProps }, inputRef) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__pass");
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-form__pass-strength" }), _jsx("input", { ...inputProps, role: type === "password" ? "password" : "textbox", className: "af-form__input-text", type: type, ref: inputRef, required: classModifier?.includes("required") }), _jsx("button", { className: "af-form__pass-btn", type: "button", "aria-label": "show password", onClick: onToggleType, children: _jsx("i", { className: `glyphicon glyphicon-eye${type === "text" ? "-close" : "-open"}` }) })] }));
+});
+Pass.displayName = "Pass";
+export { Pass };