@axa-fr/design-system-look-and-feel-react 0.2.0-beta.306

package/dist/Form/FileUpload/FIleUpload.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileUpload } from "./FileUpload";
+const meta = {
+    title: "Components/Form/Input/FileUpload",
+};
+export default meta;
+export const FileUploadStory = {
+    name: "FileUpload",
+    render: ({ onChange, onView, onDelete, ...args }) => (_jsx(FileUpload, { onChange: onChange, onView: onView, onDelete: onDelete, ...args })),
+    args: {
+        id: "file-input",
+        className: "",
+        label: "Label",
+        files: [
+            {
+                id: "1",
+                name: " IMG_8904587880.jpg",
+                size: 109936,
+                isLoading: false,
+            },
+            {
+                id: "2",
+                name: " IMG_465510680.jpg",
+                size: 5010,
+                isLoading: true,
+            },
+            {
+                id: "3",
+                name: " IMG_8904587880.jpg",
+                size: 23000000,
+                isLoading: true,
+            },
+        ],
+        globalError: "Erreur",
+        errors: [
+            {
+                id: "3",
+                message: "Votre fichier fait plus de 19 Mo.",
+            },
+        ],
+        accept: "image/jpeg, image/png, application/*",
+        buttonLabel: "Importer fichier",
+        instructions: "2 fichiers max. / pdf, png, jpg, jpeg, gif / 19 Mo par fichier",
+        dropzoneDescription: "Glissez/déposez vos fichiers",
+        required: false,
+        isMobile: false,
+        multiple: false,
+    },
+    argTypes: {
+        onChange: { action: "onChange" },
+        onView: { action: "onView" },
+        onDelete: { action: "onDelete" },
+    },
+};

package/dist/Form/FileUpload/FileUpload.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithRef } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
+type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
+    id: string;
+    label?: string;
+    buttonLabel?: string;
+    dropzoneDescription?: string;
+    instructions?: string;
+    required?: boolean;
+    globalError: string;
+    errors: Array<{
+        id?: string | undefined;
+        message: string;
+    }>;
+    files: Array<{
+        id: string;
+        name: string;
+        size: number;
+        isLoading: boolean;
+    }>;
+    accept: string;
+    isMobile?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onView?: (id: string) => void;
+    onDelete?: (id: string) => void;
+};
+declare const FileUpload: {
+    ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FileUpload };

package/dist/Form/FileUpload/FileUpload.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
+import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
+import close from "@material-symbols/svg-400/outlined/close-fill.svg";
+import check from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import error from "@material-symbols/svg-400/outlined/error-fill.svg";
+import errorO from "@material-symbols/svg-400/outlined/error.svg";
+import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+import { Loader } from "../../Loader";
+import { Button } from "../..";
+import { Variants } from "../../Button/Button";
+import { InputError } from "../InputError";
+function getReadableFileSizeString(fileSizeInBytes) {
+    let i = -1;
+    let fileSizeInBytesCopy = fileSizeInBytes;
+    const byteUnits = [" Ko", " Mo", " Go"];
+    do {
+        fileSizeInBytesCopy /= 1024;
+        i += 1;
+    } while (fileSizeInBytesCopy > 1024);
+    return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
+}
+const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
+    const getIcon = (isInError, isLoading) => {
+        if (isInError) {
+            return (_jsx(Svg, { src: error, className: "af-form__file-title-container-icon-error" }));
+        }
+        if (isLoading) {
+            return _jsx(Loader, { size: 18, border: 2 });
+        }
+        return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
+                        const effectiveSize = getReadableFileSizeString(size);
+                        const isInError = errors.some((fileError) => fileError.id === fileId);
+                        const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
+                        return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
+                                                        if (e.key === "Enter") {
+                                                            onView(fileId);
+                                                        }
+                                                    }, className: "af-form__file-actions-icon", src: visibility })), onDelete && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Supprimer", onClick: () => onDelete(fileId), onKeyDown: (e) => {
+                                                        if (e.key === "Enter") {
+                                                            onDelete(fileId);
+                                                        }
+                                                    }, className: "af-form__file-actions-icon", src: close }))] })] }), isInError && (_jsxs("small", { className: "af-form__file-error", children: [_jsx(Svg, { src: errorO, className: "af-form__file-error-icon", width: 18 }), errorMessage] }))] }, fileId));
+                    }) }) })] }));
+};
+FileUpload.displayName = "FileUpload";
+export { FileUpload };

package/dist/Form/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export { FileUpload } from "./FileUpload";

package/dist/Form/FileUpload/index.js

@@ -0,0 +1 @@
+export { FileUpload } from "./FileUpload";

package/dist/Form/InputError/InputError.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/InputError/InputError.scss";
+type InputErrorProps = {
+    message: string;
+    id?: string;
+};
+export declare const InputError: ({ message, id }: InputErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/InputError/InputError.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import errorIcon from "@material-symbols/svg-400/outlined/error.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/InputError/InputError.scss";
+import { Svg } from "../../Svg";
+export const InputError = ({ message, id }) => (_jsxs("div", { className: "af-input-error", children: [_jsx(Svg, { src: errorIcon, className: "af-input-error__icon" }), _jsx("span", { id: id, "aria-live": "assertive", className: "af-input-error__message", children: message })] }));

package/dist/Form/InputError/InputError.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { InputError } from "./InputError";
+declare const meta: Meta<typeof InputError>;
+export default meta;
+export declare const Default: StoryObj<typeof InputError>;

package/dist/Form/InputError/InputError.stories.js

@@ -0,0 +1,12 @@
+import { InputError } from "./InputError";
+const meta = {
+    title: "Components/Form/InputError",
+    component: InputError,
+};
+export default meta;
+export const Default = {
+    name: "Default",
+    args: {
+        message: "Error Message",
+    },
+};

package/dist/Form/InputError/index.d.ts

@@ -0,0 +1 @@
+export { InputError } from "./InputError";

package/dist/Form/InputError/index.js

@@ -0,0 +1 @@
+export { InputError } from "./InputError";

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

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import React, { ReactNode } from "react";
+declare const Radio: React.ForwardRefExoticComponent<{
+    label: string | ReactNode;
+    errorMessage?: string;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export { Radio };

package/dist/Form/Radio/Radio.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
+import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import { forwardRef, useId } from "react";
+import { Svg } from "../../Svg";
+const Radio = forwardRef(({ label, errorMessage, ...inputProps }, ref) => {
+    let inputId = useId();
+    inputId = inputProps.id || inputId;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-radio", role: "radiogroup", "aria-invalid": Boolean(errorMessage), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "radio", id: inputId }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-radio__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+});
+Radio.displayName = "Radio";
+export { Radio };

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Radio } from "./Radio";
+declare const meta: Meta;
+export default meta;
+export declare const RadioStory: StoryObj<ComponentProps<typeof Radio>>;

package/dist/Form/Radio/Radio.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from "./Radio";
+const meta = {
+    title: "Components/Form/Input/Radio",
+    component: Radio,
+    argTypes: {},
+};
+export default meta;
+export const RadioStory = {
+    name: "Basic",
+    render: ({ ...args }) => _jsx(Radio, { ...args }),
+    args: {
+        label: "J'accepte de fournir à AXA mes coordonnées ainsi que les données  relatives à mon projet et ma situation. Ces dernières seront transmises à mon conseiller AXA qui pourra  me contacter pour m'accompagner.",
+        name: "option1",
+        value: "option1",
+    },
+    argTypes: {
+        label: {
+            control: { type: "text" },
+        },
+        name: {
+            control: { type: "text" },
+        },
+        value: {
+            control: { type: "text" },
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        disabled: {
+            control: { type: "boolean" },
+        },
+        checked: {
+            control: { type: "boolean" },
+        },
+        onChange: { action: "onChange" },
+    },
+};

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

@@ -0,0 +1,18 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+type RadioSelectProps = {
+    type: "vertical" | "horizontal";
+    options: ({
+        label: ReactNode;
+        subtitle?: ReactNode;
+        description?: ReactNode;
+        icon?: ReactNode;
+    } & React.InputHTMLAttributes<HTMLInputElement>)[];
+    name: string;
+    errorMessage?: string;
+    onChange?: React.ChangeEventHandler;
+    value?: string;
+    isDisabled?: boolean;
+} & Omit<ComponentPropsWithRef<"div">, "className" | "aria-invalid">;
+export declare const RadioSelect: React.ForwardRefExoticComponent<Omit<RadioSelectProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/Form/Radio/RadioSelect.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
+import radioIcon from "@material-symbols/svg-400/outlined/radio_button_checked.svg";
+import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_button_unchecked.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import { forwardRef, useId, } from "react";
+import { Svg } from "../../Svg";
+export const RadioSelect = forwardRef(({ id, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, ...rest }, ref) => {
+    const generatedId = useId();
+    const optionId = id || generatedId;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), children: options.map(({ label, description, subtitle, icon, disabled: inputDisabled, ...inputProps }) => (_jsxs("label", { htmlFor: `${optionId}-${label}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${label}`, onChange: onChange, ...(value && {
+                                "aria-checked": value === inputProps.value,
+                                checked: value === inputProps.value,
+                            }) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, label))) }), errorMessage && (_jsxs("div", { className: "af-radio__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+});
+RadioSelect.displayName = "RadioSelect";

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { RadioSelect } from "./RadioSelect";
+declare const meta: Meta;
+export default meta;
+export declare const RadioSelectStory: StoryObj<ComponentProps<typeof RadioSelect>>;
+export declare const RadioSelectDisabledStory: StoryObj<ComponentProps<typeof RadioSelect>>;

package/dist/Form/Radio/RadioSelect.stories.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import home from "@material-symbols/svg-400/outlined/home.svg";
+import { Svg } from "../../Svg";
+import { RadioSelect } from "./RadioSelect";
+const meta = {
+    title: "Components/Form/Input/Radio/Select",
+    component: RadioSelect,
+    argTypes: {},
+};
+export default meta;
+export const RadioSelectStory = {
+    name: "Select",
+    render: ({ ...args }) => _jsx(RadioSelect, { ...args }),
+    args: {
+        type: "vertical",
+        "aria-label": "Quelle ville ?",
+        name: "cities",
+        options: [
+            {
+                label: "Paris",
+                description: "Capitale de la France",
+                subtitle: "Nord",
+                value: "paris",
+                icon: _jsx(Svg, { src: home }),
+            },
+            {
+                label: "Bruxelles",
+                description: "Capitale de la Belgique",
+                value: "bruxelles",
+                icon: _jsx(Svg, { src: home }),
+            },
+            {
+                label: "Lille",
+                value: "lille",
+                icon: _jsx(Svg, { src: home }),
+            },
+        ],
+    },
+    argTypes: {
+        type: {
+            control: { type: "inline-radio" },
+            options: ["vertical", "horizontal"],
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        onChange: { action: "onChange" },
+    },
+};
+export const RadioSelectDisabledStory = {
+    name: "SelectDisabled",
+    render: ({ ...args }) => _jsx(RadioSelect, { ...args }),
+    args: {
+        type: "vertical",
+        "aria-label": "Quelle ville ?",
+        name: "cities",
+        options: [
+            {
+                label: "Paris",
+                description: "Capitale de la France",
+                subtitle: "Nord",
+                value: "paris",
+                icon: _jsx(Svg, { src: home }),
+            },
+            {
+                label: "Bruxelles",
+                description: "Capitale de la Belgique",
+                value: "bruxelles",
+                icon: _jsx(Svg, { src: home }),
+            },
+            {
+                label: "Lille",
+                value: "lille",
+                icon: _jsx(Svg, { src: home }),
+                checked: true,
+            },
+        ],
+        isDisabled: true,
+    },
+    argTypes: {
+        type: {
+            control: { type: "inline-radio" },
+            options: ["vertical", "horizontal"],
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        onChange: { action: "onChange" },
+    },
+};

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

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioSelect } from "./RadioSelect";

package/dist/Form/Radio/index.js

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioSelect } from "./RadioSelect";

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { OptionProps } from "react-select";
+declare const CustomOption: React.FC<OptionProps>;
+export { CustomOption };

package/dist/Form/Select/CustomOption.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { components } from "react-select";
+const CustomOption = ({ getValue, ...otherProps }) => {
+    const value = useMemo(() => getValue(), [getValue]);
+    return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
+};
+export { CustomOption };

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownIndicatorProps } from "react-select";
+declare const DropdownIndicator: React.FC<DropdownIndicatorProps>;
+export { DropdownIndicator };

package/dist/Form/Select/DropdownIndicator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
+import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
+import { components } from "react-select";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const DropdownIndicator = (props) => {
+    const { selectProps: { menuIsOpen, isDisabled }, } = props;
+    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
+};
+export { DropdownIndicator };

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

@@ -0,0 +1,27 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
+import ReactSelect, { ActionMeta, SingleValue } from "react-select";
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+type Option = {
+    label: string;
+    value: string | number;
+};
+type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
+    id: string;
+    label: string;
+    options: {
+        label: string;
+        value?: string | number | readonly string[];
+    }[];
+    value: Option | null;
+    errorLabel?: string;
+    placeholder?: string;
+    noOptionsMessage?: string;
+    onChange: (newValue: SingleValue<Option>, actionMeta: ActionMeta<string>) => void;
+    disabled?: boolean;
+    required?: boolean;
+};
+declare const Select: {
+    ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Select };

package/dist/Form/Select/Select.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Select/Select.scss";
+import ErrorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import ReactSelect from "react-select";
+import classNames from "classnames";
+import { DropdownIndicator } from "./DropdownIndicator";
+import { Svg } from "../../Svg";
+import { CustomOption } from "./CustomOption";
+const Select = ({ id, required, disabled, label, errorLabel, noOptionsMessage, ...otherProps }) => {
+    return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { id: `${id}__label`, htmlFor: `${id}__input`, className: "af-form__select-label", children: [label, required && _jsx("span", { children: " *" })] })), _jsx(ReactSelect, { inputId: `${id}__input`, "aria-labelledby": `${id}__label`, unstyled: true, isDisabled: disabled, noOptionsMessage: () => noOptionsMessage || "Aucun résultat", components: {
+                    DropdownIndicator,
+                    Option: CustomOption,
+                }, classNames: {
+                    control: () => "af-form__input-select",
+                    menu: () => "af-form__input-select-menu",
+                    menuList: () => "af-form__select-menu-list",
+                    container: ({ isFocused, isDisabled, selectProps: { menuIsOpen }, }) => classNames("af-form__input-select-container", isFocused && "af-form__input-select-container-focused", isDisabled && "af-form__input-select-container-disabled", errorLabel &&
+                        !isFocused &&
+                        !menuIsOpen &&
+                        "af-form__input-select-container-error"),
+                    option: ({ isSelected, isFocused, }) => classNames("af-form__input-select-menu-options", isSelected && "af-form__input-select-menu-options-selected", isFocused && "af-form__input-select-menu-options-focused"),
+                    singleValue: ({ isDisabled, }) => classNames("af-form__select-single-value", isDisabled && "af-form__select-single-value-disabled"),
+                    dropdownIndicator: () => "af-form__select-dropdown-indicator",
+                }, className: "af-form__input-select", ...otherProps }), errorLabel && (_jsxs("div", { className: "af-form__select-error", children: [_jsx(Svg, { src: ErrorOutline, width: 16, className: "af-form__select-error-icon" }), errorLabel] }))] }));
+};
+Select.displayName = "Select";
+export { Select };

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Select } from "./Select";
+declare const meta: Meta<typeof Select>;
+export default meta;
+type StoryProps = ComponentProps<typeof Select>;
+type Story = StoryObj<StoryProps> & {
+    required?: boolean;
+};
+export declare const SelectStory: Story;

package/dist/Form/Select/Select.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from "./Select";
+const options = [
+    { value: "fun", label: "For fun" },
+    { value: "work", label: "For work" },
+    { value: "drink", label: "For drink" },
+];
+const meta = {
+    component: Select,
+    title: "Components/Form/Input/Select",
+};
+export default meta;
+export const SelectStory = {
+    name: "Select",
+    tags: ["Form", "Input"],
+    render: ({ onChange, ...args }) => (_jsx("div", { style: { width: 300 }, children: _jsx(Select, { onChange: onChange, ...args }) })),
+    args: {
+        className: "",
+        options,
+        label: "Label",
+        id: "nameid",
+        disabled: false,
+        required: false,
+        placeholder: "Placeholder",
+        noOptionsMessage: "Pas d'option",
+        errorLabel: "",
+    },
+    argTypes: {
+        onChange: { action: "onChange" },
+    },
+};

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

@@ -0,0 +1 @@
+export { Select } from "./Select";

package/dist/Form/Select/index.js

@@ -0,0 +1 @@
+export { Select } from "./Select";

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

@@ -0,0 +1,12 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
+import { ComponentPropsWithRef } from "react";
+type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
+    classModifier?: string;
+    helper?: string;
+    error?: string;
+    description?: string;
+    label?: string;
+    required?: boolean;
+};
+declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Text };

package/dist/Form/Text/Text.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../../utilities";
+import { InputError } from "../InputError";
+const Text = forwardRef(({ className, classModifier = "", ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
+    const { id, label, required, disabled, description, helper, error } = otherProps;
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, required: required, disabled: disabled, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
+});
+Text.displayName = "Text";
+export { Text };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./Text";
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const TextStory: Story;
+export declare const TextWithDescriptionStory: Story;
+export declare const TextOnErrorStory: Story;

package/dist/Form/Text/Text.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "./Text";
+const meta = {
+    component: Text,
+    title: "Components/Form/Input/Text",
+    args: {
+        value: "John Doe",
+        label: "Label",
+        placeholder: "¨Placeholder",
+        helper: "Informations complémentaires",
+        name: "name",
+        id: "nameid",
+        disabled: false,
+        required: false,
+        className: "",
+        type: "text",
+    },
+    argTypes: {
+        type: {
+            control: { type: "text" },
+            onChange: { action: "onChange" },
+        },
+        onChange: { action: "onChange" },
+    },
+};
+export default meta;
+export const TextStory = {
+    name: "Text",
+    render: ({ onChange, ...args }) => _jsx(Text, { onChange: onChange, ...args }),
+};
+export const TextWithDescriptionStory = {
+    name: "Text with description",
+    render: ({ onChange, ...args }) => _jsx(Text, { onChange: onChange, ...args }),
+    args: {
+        description: "Description",
+    },
+};
+export const TextOnErrorStory = {
+    name: "Text on error",
+    render: ({ onChange, ...args }) => _jsx(Text, { onChange: onChange, ...args }),
+    args: {
+        classModifier: "error",
+        description: "Description",
+        error: "Error Message",
+    },
+};

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

@@ -0,0 +1 @@
+export { Text } from "./Text";