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

package/dist/prospect-client/Form/InputPhone/CountryCodeSelect.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Select from "react-select";
+const CountryCodeSelect = ({ options, defaultCountry, onChangeSelect, IconComponent, disabled, }) => {
+    const defaultOption = options.find((option) => option.code === (defaultCountry ?? "+33"));
+    const [selectedOption, setSelectedOption] = useState(defaultOption);
+    const customStyles = {
+        control: (provided) => ({
+            ...provided,
+            margin: 0,
+        }),
+        dropdownIndicator: (provided) => ({
+            ...provided,
+            display: "none",
+        }),
+        indicatorSeparator: (provided) => ({
+            ...provided,
+            display: "none",
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            color: "inherit",
+        }),
+    };
+    const formatOptionLabel = ({ flag, code }) => (_jsxs("div", { className: "country-code-select-format-label", children: [_jsx(IconComponent, { src: flag }), code] }));
+    const handleChange = (newValue) => {
+        setSelectedOption(newValue ?? undefined);
+        if (newValue)
+            onChangeSelect?.(newValue);
+    };
+    return (_jsx(Select, { classNamePrefix: "country-code-select", styles: customStyles, options: options, value: selectedOption, onChange: handleChange, formatOptionLabel: formatOptionLabel, "aria-label": "Select country code", getOptionValue: (option) => option.code, isDisabled: disabled }));
+};
+export { CountryCodeSelect };

package/dist/prospect-client/Form/InputPhone/InputPhone.types.d.ts

@@ -0,0 +1,4 @@
+export type OptionType = {
+    flag: string;
+    code: string;
+};

package/dist/prospect-client/Form/InputPhone/InputPhone.types.js

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

package/dist/prospect-client/Form/InputPhone/InputPhoneApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/Form/InputPhone/InputPhoneApollo.css";
+import { type InputPhoneProps } from "./InputPhoneCommon";
+export declare const InputPhone: (props: InputPhoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/InputPhone/InputPhoneApollo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Form/InputPhone/InputPhoneApollo.css";
+import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
+import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
+import { InputPhoneCommon } from "./InputPhoneCommon";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomApollo";
+import { Icon } from "../../Icon/IconApollo";
+export const InputPhone = (props) => (_jsx(InputPhoneCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage, InputTextComponent: InputTextAtom, IconComponent: Icon }));

package/dist/prospect-client/Form/InputPhone/InputPhoneCommon.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentProps, type ComponentPropsWithRef, type ComponentType } from "react";
+import { SingleValue } from "react-select";
+import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
+import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
+import { Icon } from "../../Icon/IconCommon";
+import { type OptionType } from "./InputPhone.types";
+export type InputPhoneProps = ComponentPropsWithRef<"input"> & {
+    classModifier?: string;
+    helper?: string;
+    /**
+     * @deprecated Use `message` and messageType instead.
+     */
+    error?: string;
+    /**
+     * @deprecated Use `message` and messageType instead.
+     */
+    success?: string;
+    defaultCountry?: string;
+    showSelect?: boolean;
+    disabled?: boolean;
+    countryCodeOptions?: OptionType[];
+    onChangeSelect?: (value: SingleValue<OptionType>) => void;
+    onChangeInput?: (value: string) => void;
+    mask?: (value: string) => string;
+    label: ItemLabelProps["label"];
+} & Partial<ItemLabelProps & ItemMessageProps>;
+type InputPhoneCommonProps = InputPhoneProps & {
+    ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+    InputTextComponent: ComponentType<ComponentProps<typeof InputTextAtom>>;
+    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
+};
+declare const InputPhoneCommon: import("react").ForwardRefExoticComponent<Omit<InputPhoneCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputPhoneCommon };

package/dist/prospect-client/Form/InputPhone/InputPhoneCommon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { CountryCodeSelect } from "./CountryCodeSelect";
+import { maskFrenchPhoneNumber } from "./maskFrenchPhoneNumber";
+const InputPhoneCommon = forwardRef(({ className, classModifier = "", helper, error, success, message, messageType, defaultCountry, showSelect, disabled, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, countryCodeOptions = [], onChangeSelect, onChangeInput, mask = maskFrenchPhoneNumber, ItemLabelComponent, ItemMessageComponent, InputTextComponent, IconComponent, "aria-errormessage": ariaErrormessage, ...otherProps }, inputRef) => {
+    let inputId = useId();
+    inputId = otherProps.id || inputId;
+    const idMessage = useId();
+    const idHelp = useId();
+    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
+    const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
+    /**
+     * Gère le changement de valeur du champ numéro de téléphone.
+     * - Récupère une fonction de masquage (mask) depuis les props ou utilise une version par défaut.
+     * - La fonction de masquage par défaut :
+     *   - Ne garde que les chiffres (supprime tout le reste).
+     *   - Limite à 10 chiffres.
+     *   - Formate par groupes de 2 chiffres séparés par un espace (ex: 06 12 34 56 78).
+     * - Applique le masquage à la valeur saisie et transmet le résultat via onChangeInput.
+     */
+    const handleChangeNumber = (e) => {
+        const input = e.target;
+        const rawValue = input.value;
+        const maskedValue = mask(rawValue);
+        onChangeInput?.(maskedValue);
+    };
+    return (_jsxs("div", { className: "af-form__input-phone-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsxs("div", { className: "af-form__input-phone-fields", children: [showSelect ? (_jsx("div", { className: "af-form__country-code-wrapper", children: _jsx(CountryCodeSelect, { options: countryCodeOptions, defaultCountry: defaultCountry, onChangeSelect: onChangeSelect, IconComponent: IconComponent, disabled: disabled }) })) : null, _jsx(InputTextComponent, { ...otherProps, className: ["af-form__input-phone", className]
+                            .filter(Boolean)
+                            .join(" "), classModifier: classModifier, ref: inputRef, error: hasError ? messageType || error : undefined, type: "tel", required: required, placeholder: otherProps.placeholder, "aria-errormessage": ariaErrormessage, value: otherProps.value, onChange: handleChangeNumber, disabled: disabled, idMessage: hasError ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, id: inputId })] }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-phone-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+});
+InputPhoneCommon.displayName = "InputPhone";
+export { InputPhoneCommon };

package/dist/prospect-client/Form/InputPhone/InputPhoneLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/Form/InputPhone/InputPhoneLF.css";
+import { type InputPhoneProps } from "./InputPhoneCommon";
+export declare const InputPhone: (props: InputPhoneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/InputPhone/InputPhoneLF.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Form/InputPhone/InputPhoneLF.css";
+import { ItemLabel } from "../ItemLabel/ItemLabelLF";
+import { ItemMessage } from "../ItemMessage/ItemMessageLF";
+import { InputPhoneCommon } from "./InputPhoneCommon";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomLF";
+import { Icon } from "../../Icon/IconLF";
+export const InputPhone = (props) => (_jsx(InputPhoneCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage, InputTextComponent: InputTextAtom, IconComponent: Icon }));

package/dist/prospect-client/Form/InputPhone/maskFrenchPhoneNumber.d.ts

@@ -0,0 +1 @@
+export declare function maskFrenchPhoneNumber(value: string): string;

package/dist/prospect-client/Form/InputPhone/maskFrenchPhoneNumber.js

@@ -0,0 +1,12 @@
+export function maskFrenchPhoneNumber(value) {
+    let numericValue = value.replace(/[^0-9]/g, "");
+    numericValue = numericValue.slice(0, 10);
+    let formattedValue = "";
+    for (let i = 0; i < numericValue.length; i += 2) {
+        formattedValue += numericValue.slice(i, i + 2);
+        if (i + 2 < numericValue.length) {
+            formattedValue += " ";
+        }
+    }
+    return formattedValue;
+}

package/dist/prospect-client/Form/InputText/InputTextApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/Form/InputText/InputTextApollo.css";
+import { type InputTextProps } from "./InputTextCommon";
+export declare const InputText: import("react").ForwardRefExoticComponent<Omit<InputTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/prospect-client/Form/InputText/InputTextApollo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Form/InputText/InputTextApollo.css";
+import { forwardRef } from "react";
+import { ItemLabel } from "../ItemLabel/ItemLabelApollo";
+import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
+import { InputTextCommon } from "./InputTextCommon";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomApollo";
+export const InputText = forwardRef((props, ref) => (_jsx(InputTextCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage, InputTextAtomComponent: InputTextAtom })));
+InputText.displayName = "InputText";

package/dist/prospect-client/Form/InputText/InputTextCommon.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomCommon";
+import { ItemLabelCommon, type ItemLabelProps } from "../ItemLabel/ItemLabelCommon";
+import { ItemMessage, type ItemMessageProps } from "../ItemMessage/ItemMessageCommon";
+export type InputTextProps = ComponentPropsWithRef<"input"> & {
+    unit?: ReactNode;
+    classModifier?: string;
+    helper?: string;
+    /**
+     * @deprecated Use `message` and messageType instead.
+     */
+    error?: string;
+    /**
+     * @deprecated Use `message` and messageType instead.
+     */
+    success?: string;
+} & Partial<ItemLabelProps & ItemMessageProps>;
+type InputTextCommonProps = InputTextProps & {
+    ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+    InputTextAtomComponent: ComponentType<ComponentProps<typeof InputTextAtom>>;
+};
+declare const InputTextCommon: import("react").ForwardRefExoticComponent<Omit<InputTextCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputTextCommon };

package/dist/prospect-client/Form/InputText/InputTextCommon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+const InputTextCommon = forwardRef(({ unit, className, classModifier = "", helper, error, success, message, messageType, label, description, buttonLabel, onButtonClick, required, sideButtonLabel, onSideButtonClick, ItemLabelComponent, ItemMessageComponent, InputTextAtomComponent, ...otherProps }, inputRef) => {
+    let inputId = useId();
+    inputId = otherProps.id || inputId;
+    const idMessage = useId();
+    const idHelp = useId();
+    const ariaDescribedby = [helper && idHelp, success && idMessage].filter(Boolean);
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsx(ItemLabelComponent, { label: label, description: description, buttonLabel: buttonLabel, onButtonClick: onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, inputId: inputId }), _jsx(InputTextAtomComponent, { id: inputId, ref: inputRef, unit: unit, className: className, classModifier: classModifier, error: (message && messageType === "error") || Boolean(error)
+                    ? messageType || error
+                    : undefined, required: required, idMessage: message || error ? idMessage : undefined, idHelp: ariaDescribedby.length > 0 ? ariaDescribedby.join(" ") : undefined, ...otherProps }), helper ? (_jsx("span", { id: idHelp, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: idMessage, message: message || error || success, messageType: messageType || (error ? "error" : "success") })] }));
+});
+InputTextCommon.displayName = "InputText";
+export { InputTextCommon };

package/dist/prospect-client/Form/InputText/InputTextLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/Form/InputText/InputTextLF.css";
+import { type InputTextProps } from "./InputTextCommon";
+export declare const InputText: import("react").ForwardRefExoticComponent<Omit<InputTextProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/prospect-client/Form/InputText/InputTextLF.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Form/InputText/InputTextLF.css";
+import { forwardRef } from "react";
+import { ItemLabel } from "../ItemLabel/ItemLabelLF";
+import { ItemMessage } from "../ItemMessage/ItemMessageLF";
+import { InputTextCommon } from "./InputTextCommon";
+import { InputTextAtom } from "../InputTextAtom/InputTextAtomLF";
+export const InputText = forwardRef((props, ref) => (_jsx(InputTextCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage, InputTextAtomComponent: InputTextAtom })));
+InputText.displayName = "InputText";

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Form/InputTextAtom/InputTextAtomApollo.css";
+export { InputTextAtom } from "./InputTextAtomCommon";

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Form/InputTextAtom/InputTextAtomApollo.css";
+export { InputTextAtom } from "./InputTextAtomCommon";

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomCommon.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+type InputTextAtomProps = ComponentPropsWithRef<"input"> & {
+    unit?: ReactNode;
+    classModifier?: string;
+    error?: string;
+    idMessage?: string;
+    idHelp?: string;
+};
+declare const InputTextAtom: import("react").ForwardRefExoticComponent<Omit<InputTextAtomProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { InputTextAtom };

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { getComponentClassName } from "../../utilities/getComponentClassName";
+const InputTextAtom = forwardRef(({ unit, className, classModifier = "", error, required, idMessage, idHelp, "aria-errormessage": ariaErrormessage, "aria-describedby": ariaDescribedby, type = "text", ...otherProps }, inputRef) => {
+    const componentClassName = getComponentClassName("af-form__input-text", className, classModifier + (error || ariaErrormessage ? " error" : ""));
+    let inputId = useId();
+    inputId = otherProps.id || inputId;
+    return (_jsxs("div", { className: "af-form__input-variant", children: [_jsx("input", { id: inputId, className: componentClassName, type: type, required: required, ref: inputRef, "aria-errormessage": ariaErrormessage ?? idMessage, "aria-invalid": Boolean(error || ariaErrormessage), "aria-describedby": ariaDescribedby ?? idHelp, ...otherProps }), unit] }));
+});
+InputTextAtom.displayName = "InputTextAtom";
+export { InputTextAtom };

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Form/InputTextAtom/InputTextAtomLF.css";
+export { InputTextAtom } from "./InputTextAtomCommon";

package/dist/prospect-client/Form/InputTextAtom/InputTextAtomLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Form/InputTextAtom/InputTextAtomLF.css";
+export { InputTextAtom } from "./InputTextAtomCommon";

package/dist/prospect-client/Form/ItemLabel/ItemLabelApollo.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/prospect/Form/ItemLabel/ItemLabelApollo.css";
+import { type ItemLabelProps } from "./ItemLabelCommon";
+export declare const ItemLabel: (props: ItemLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/ItemLabel/ItemLabelApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/prospect/Form/ItemLabel/ItemLabelApollo.css";
+import { Button } from "../../Button/ButtonApollo";
+import { ItemLabelCommon } from "./ItemLabelCommon";
+export const ItemLabel = (props) => (_jsx(ItemLabelCommon, { ...props, ButtonComponent: Button }));

package/dist/prospect-client/Form/ItemLabel/ItemLabelCommon.d.ts

@@ -0,0 +1,103 @@
+import { type ComponentProps, type ComponentType, type MouseEventHandler, type ReactNode } from "react";
+import type { ButtonProps } from "../../Button/ButtonCommon";
+export type ItemLabelProps = ComponentProps<"label"> & {
+    /**
+     * Label text content
+     * @deprecated use `children` instead.
+     */
+    label?: ReactNode;
+    /**
+     * Additional description text that enriches the label.
+     * @example "Phone bill, EDF receipt, etc."
+     */
+    description?: ReactNode;
+    /**
+     * Shows a visual asterisk (*) indicator next to the label.
+     */
+    required?: boolean;
+    /**
+     * ID of the associated input element
+     * @deprecated use `htmlFor` instead.
+     */
+    inputId?: string;
+    /**
+     * Label content for the side action button.
+     * When provided, renders a secondary button next to the main label.
+     */
+    sideButtonLabel?: ReactNode;
+    /**
+     * Click handler for the side button
+     */
+    onSideButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Additional props to pass to the side button component.
+     */
+    sideButtonProps?: Omit<Partial<ButtonProps>, "children" | "onClick" | "variant" | "className">;
+    /**
+     * Label content for the more button
+     * @deprecated use `moreButtonLabel` instead.
+     */
+    buttonLabel?: ReactNode;
+    /**
+     * Click handler for the info button
+     * @deprecated use `onMoreButtonClick` instead.
+     */
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Label content for the more button
+     * When provided, renders an more button with an info icon.
+     */
+    moreButtonLabel?: ReactNode;
+    /**
+     * Click handler for the more button
+     */
+    onMoreButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Additional props to pass to the more button component.
+     */
+    moreButtonProps?: Omit<Partial<ButtonProps>, "children" | "onClick" | "variant" | "className">;
+};
+export type ItemLabelCommonProps = ItemLabelProps & {
+    ButtonComponent: ComponentType<ButtonProps>;
+};
+/**
+ * A comprehensive label component for form items with support for descriptions and action buttons.
+ *
+ * This component provides an accessible label that can be enhanced with:
+ * - Visual required field indicator (asterisk)
+ * - Optional description text
+ * - Optional side action button
+ * - Optional more button with icon
+ *
+ * The component ensures proper accessibility by:
+ * - Associating the label with form controls via htmlFor
+ * - Providing appropriate ARIA attributes for screen readers
+ * - Supporting keyboard navigation for interactive elements
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="email-input"
+ *   required
+ *   ButtonComponent={Button}
+ * >
+ *   Email Address
+ * </ItemLabelCommon>
+ * ```
+ *
+ * @example With description and action buttons
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="document-upload"
+ *   description="Accepted: PDF, JPG, PNG (max 5MB)"
+ *   sideButtonLabel="Browse"
+ *   onSideButtonClick={handleBrowse}
+ *   moreButton="Help"
+ *   onMoreButtonClick={handleShowHelp}
+ *   ButtonComponent={Button}
+ * >
+ *   Proof of residence
+ * </ItemLabelCommon>
+ * ```
+ */
+export declare const ItemLabelCommon: ({ label, children, description, required, inputId, htmlFor, className, style, "aria-describedby": ariaDescribedby, sideButtonLabel, onSideButtonClick, sideButtonProps, buttonLabel, onButtonClick, moreButtonLabel, onMoreButtonClick, ButtonComponent, moreButtonProps, ...props }: ItemLabelCommonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/prospect-client/Form/ItemLabel/ItemLabelCommon.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import { useId, } from "react";
+import { Svg } from "../../Svg/Svg";
+/**
+ * A comprehensive label component for form items with support for descriptions and action buttons.
+ *
+ * This component provides an accessible label that can be enhanced with:
+ * - Visual required field indicator (asterisk)
+ * - Optional description text
+ * - Optional side action button
+ * - Optional more button with icon
+ *
+ * The component ensures proper accessibility by:
+ * - Associating the label with form controls via htmlFor
+ * - Providing appropriate ARIA attributes for screen readers
+ * - Supporting keyboard navigation for interactive elements
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="email-input"
+ *   required
+ *   ButtonComponent={Button}
+ * >
+ *   Email Address
+ * </ItemLabelCommon>
+ * ```
+ *
+ * @example With description and action buttons
+ * ```tsx
+ * <ItemLabelCommon
+ *   htmlFor="document-upload"
+ *   description="Accepted: PDF, JPG, PNG (max 5MB)"
+ *   sideButtonLabel="Browse"
+ *   onSideButtonClick={handleBrowse}
+ *   moreButton="Help"
+ *   onMoreButtonClick={handleShowHelp}
+ *   ButtonComponent={Button}
+ * >
+ *   Proof of residence
+ * </ItemLabelCommon>
+ * ```
+ */
+export const ItemLabelCommon = ({ label, children, description, required, inputId, htmlFor, className, style, "aria-describedby": ariaDescribedby, sideButtonLabel, onSideButtonClick, sideButtonProps, buttonLabel, onButtonClick, moreButtonLabel, onMoreButtonClick, ButtonComponent, moreButtonProps, ...props }) => {
+    const idDescription = useId();
+    const contentLabel = children ?? label;
+    const describedByIds = [description ? idDescription : null, ariaDescribedby]
+        .filter(Boolean)
+        .join(" ");
+    if (!contentLabel) {
+        return null;
+    }
+    return (_jsxs("div", { className: ["af-item-label", className].filter(Boolean).join(" "), style: style, children: [_jsxs("label", { htmlFor: htmlFor || inputId, className: "af-item-label__label", "aria-describedby": describedByIds || undefined, ...props, children: [contentLabel, required ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), sideButtonLabel ? (_jsx(ButtonComponent, { ...sideButtonProps, variant: "ghost", onClick: onSideButtonClick, className: "af-item-label__sidebutton", children: sideButtonLabel })) : null, description ? (_jsx("span", { id: idDescription, className: "af-item-label__description", children: description })) : null, moreButtonLabel || buttonLabel ? (_jsx(ButtonComponent, { iconLeft: _jsx(Svg, { src: infoIcon, role: "presentation" }), ...moreButtonProps, variant: "ghost", className: "af-item-label__more", onClick: onMoreButtonClick || onButtonClick, children: moreButtonLabel || buttonLabel })) : null] }));
+};

package/dist/prospect-client/Form/ItemLabel/ItemLabelLF.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/canopee-css/client/Form/ItemLabel/ItemLabelLF.css";
+import { type ItemLabelProps } from "./ItemLabelCommon";
+export declare const ItemLabel: (props: ItemLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/ItemLabel/ItemLabelLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/client/Form/ItemLabel/ItemLabelLF.css";
+import { Button } from "../../Button/ButtonLF";
+import { ItemLabelCommon } from "./ItemLabelCommon";
+export const ItemLabel = (props) => (_jsx(ItemLabelCommon, { ...props, ButtonComponent: Button }));

package/dist/prospect-client/Form/ItemMessage/ItemMessageApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Form/ItemMessage/ItemMessageApollo.css";
+export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./ItemMessageCommon";

package/dist/prospect-client/Form/ItemMessage/ItemMessageApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Form/ItemMessage/ItemMessageApollo.css";
+export { ItemMessage, itemMessageVariants, } from "./ItemMessageCommon";

package/dist/prospect-client/Form/ItemMessage/ItemMessageCommon.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare const itemMessageVariants: {
+    readonly error: "error";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+export type ItemMessageVariants = keyof typeof itemMessageVariants;
+export type ItemMessageProps = {
+    message?: ReactNode;
+    id?: string;
+    messageType?: ItemMessageVariants;
+};
+export declare const ItemMessage: ({ message, id, messageType, }: ItemMessageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/prospect-client/Form/ItemMessage/ItemMessageCommon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import successIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
+import warningIcon from "@material-symbols/svg-400/outlined/warning-fill.svg";
+import { Svg } from "../../Svg/Svg";
+export const itemMessageVariants = {
+    error: "error",
+    success: "success",
+    warning: "warning",
+};
+export const ItemMessage = ({ message, id, messageType = "error", }) => {
+    if (!message) {
+        return null;
+    }
+    const getIcon = () => {
+        if (messageType === "success")
+            return successIcon;
+        if (messageType === "warning")
+            return warningIcon;
+        return errorIcon;
+    };
+    return (_jsxs("small", { id: id, className: `af-item-message af-item-message--${messageType}`, role: messageType === "success" ? undefined : "alert", "aria-live": "assertive", children: [_jsx(Svg, { src: getIcon(), className: "af-item-message__icon", "aria-hidden": "true" }), _jsx("span", { className: "af-item-message__message", children: message })] }));
+};

package/dist/prospect-client/Form/ItemMessage/ItemMessageLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Form/ItemMessage/ItemMessageLF.css";
+export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./ItemMessageCommon";

package/dist/prospect-client/Form/ItemMessage/ItemMessageLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Form/ItemMessage/ItemMessageLF.css";
+export { ItemMessage, itemMessageVariants, } from "./ItemMessageCommon";

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioApollo.d.ts

@@ -0,0 +1,3 @@
+import { type CardRadioProps } from "./CardRadioCommon";
+import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadio/CardRadioApollo.css";
+export declare const CardRadio: (props: CardRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardRadioOption } from "../CardRadioOption/CardRadioOptionApollo";
+import { CardRadioCommon } from "./CardRadioCommon";
+import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
+import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadio/CardRadioApollo.css";
+export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, CardRadioOptionComponent: CardRadioOption, ItemMessageComponent: ItemMessage }));

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioCommon.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentProps, type ComponentType, type PropsWithChildren, type ReactNode } from "react";
+import { type CardRadioOptionProps } from "../CardRadioOption/CardRadioOptionCommon";
+import { ItemMessage, type ItemMessageProps } from "../../ItemMessage/ItemMessageCommon";
+type RadioOption = Omit<CardRadioOptionProps, "name" | "type" | "isInvalid">;
+export type CardRadioProps = Omit<CardRadioOptionProps, "value" | "label" | "type" | "isInvalid" | "icon" | "src" | "basePictureProps" | "description" | "subtitle" | "children"> & {
+    type?: "vertical" | "horizontal";
+    /**
+     * @deprecated Use `label` instead.
+     */
+    labelGroup?: string;
+    /**
+     * @deprecated Use `description` instead.
+     */
+    descriptionGroup?: string;
+    label: ReactNode;
+    description?: ReactNode;
+    /**
+     * @deprecated Use `required` instead.
+     */
+    isRequired?: boolean;
+    /**
+     * @deprecated This prop is deprecated. To check an option, use the `checked` property in each item of the `options` array.
+     */
+    value?: number | string;
+    options: RadioOption[];
+    /**
+     * @deprecated Use `message` and messageType instead.
+     */
+    error?: ReactNode;
+} & PropsWithChildren & Partial<ItemMessageProps>;
+export type CardRadioCommonProps = CardRadioProps & {
+    CardRadioOptionComponent: ComponentType<CardRadioOptionProps>;
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+};
+declare const CardRadioCommon: {
+    ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, type, error, message, messageType, name, value, id, CardRadioOptionComponent, ItemMessageComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CardRadioCommon };

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioCommon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+const CardRadioCommon = ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, type = "vertical", error, message, messageType = "error", name, value, id, CardRadioOptionComponent, ItemMessageComponent, ...inputProps }) => {
+    const generatedId = useId();
+    const cardRadioId = id ?? generatedId;
+    const messageId = `${cardRadioId}-error`;
+    const hasError = (Boolean(message) && messageType === "error") || Boolean(error);
+    return (_jsxs("fieldset", { className: ["af-card-radio", className].filter(Boolean).join(" "), role: "radiogroup", "aria-required": Boolean(required) || undefined, "aria-invalid": hasError || undefined, "aria-errormessage": hasError ? messageId : undefined, id: cardRadioId, children: [_jsxs("legend", { className: "af-card-radio__legend", children: [_jsxs("p", { className: "af-card-radio__label", children: [label, labelGroup, required || isRequired ? _jsx("span", { "aria-hidden": true, children: "*" }) : null] }), description || descriptionGroup ? (_jsxs("p", { className: "af-card-radio__description", children: [description, descriptionGroup] })) : null] }), _jsx("div", { className: [
+                    "af-card-radio__options",
+                    `af-card-radio__options--${type}`,
+                ].join(" "), children: options.map((cardRadioItemProps) => (_jsx(CardRadioOptionComponent, { id: `${cardRadioId}-${cardRadioItemProps.value}`, checked: value !== undefined
+                        ? value === cardRadioItemProps.value
+                        : undefined, required: required, ...inputProps, ...cardRadioItemProps, type: type, isInvalid: hasError, name: name }, `${name ?? cardRadioId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+};
+CardRadioCommon.displayName = "CardRadioCommon";
+export { CardRadioCommon };

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioLF.d.ts

@@ -0,0 +1,3 @@
+import { type CardRadioProps } from "./CardRadioCommon";
+import "@axa-fr/canopee-css/client/Form/Radio/CardRadio/CardRadioLF.css";
+export declare const CardRadio: (props: CardRadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadio/CardRadioLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardRadioOption } from "../CardRadioOption/CardRadioOptionLF";
+import { CardRadioCommon } from "./CardRadioCommon";
+import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
+import "@axa-fr/canopee-css/client/Form/Radio/CardRadio/CardRadioLF.css";
+export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, CardRadioOptionComponent: CardRadioOption, ItemMessageComponent: ItemMessage }));

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo.d.ts

@@ -0,0 +1,3 @@
+import { type CardRadioOptionProps } from "./CardRadioOptionCommon";
+import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadioOption/CardRadioOptionApollo.css";
+export declare const CardRadioOption: (props: CardRadioOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "../../../Icon/IconApollo";
+import { Radio } from "../Radio/RadioApollo";
+import { CardRadioOptionCommon, } from "./CardRadioOptionCommon";
+import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadioOption/CardRadioOptionApollo.css";
+export const CardRadioOption = (props) => (_jsx(CardRadioOptionCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));