@axa-fr/canopee-react 1.6.1-alpha.4 → 1.6.1-alpha.6

package/dist/distributeur/Accordion/Accordion.js

@@ -2,14 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import "@axa-fr/canopee-css/distributeur/Accordion/Accordion.css";
 import React, { useId } from "react";
-import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
+import { getClassName } from "../utilities/helpers/getClassName";
 import { CollapseCard } from "./CollapseCard";
 const defaultClassName = "af-accordion";
 const Accordion = ({ className, classModifier, variant = "default", children, onlyOne = false, }) => {
-    const componentClassName = getComponentClassNameWithUserClassname({
-        componentClassName: defaultClassName,
-        userClassName: className,
-        classModifier: classModifier || (variant !== "default" && variant) || "",
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: [
+            variant !== "default" && variant,
+            ...(classModifier?.split(" ") ?? []),
+        ],
+        className,
     });
     const id = useId();
     const childrenArray = Array.isArray(children) ? children : [children];

package/dist/distributeur/Accordion/CollapseCard.d.ts

@@ -8,6 +8,7 @@ export type CollapseProps = {
     name?: string;
     onToggle?: DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     actions?: AccordionActions;
     variant?: AccordionVariant;

package/dist/distributeur/Accordion/CollapseCard.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 import { Body } from "./Body";
 import { Header } from "./Header";
 export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", actions, variant, }) => {
     const headerId = id;
     let newClassModifier = open ? "open" : "";
     newClassModifier += ` ${classModifier}`;
-    const componentClassName = getComponentClassName(className, newClassModifier.trim(), "af-accordion__details");
+    const componentClassName = getClassName({
+        baseClassName: "af-accordion__details",
+        modifiers: newClassModifier.trim().split(" "),
+        className,
+    });
     return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, actions: actions, variant: variant, children: title }), _jsx(Body, { children: children })] }));
 };

package/dist/distributeur/Accordion/Header.d.ts

@@ -8,6 +8,7 @@ export type HeaderToggleElement = {
 export type HeaderProps = {
     children: React.ReactNode;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     id?: string;
     actions?: AccordionActions;

package/dist/distributeur/Accordion/Header.js

@@ -4,10 +4,14 @@ import React from "react";
 import { Button } from "../Button/Button";
 import { Svg } from "../Svg/Svg";
 import { Title } from "../Title/Title";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const defaultClassName = "af-accordion__item-header";
 const Header = ({ children, className, classModifier, id, actions, variant, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("summary", { className: componentClassName, id: id, children: variant === "light" ? (_jsxs(Title, { heading: "h3", children: [_jsx(Svg, { src: arrow, className: "af-accordion__item-header-icon" }), children, actions
                     ? actions
                         .filter((action) => Boolean(action))

package/dist/distributeur/Action/Action.d.ts

@@ -1,5 +1,6 @@
 import "@axa-fr/canopee-css/distributeur/Action/Action.css";
 export declare const Action: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     icon: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/distributeur/Action/Action.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Action/Action.css";
+import classNames from "classnames";
 import { forwardRef } from "react";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 export const Action = forwardRef(({ icon, className, classModifier, ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "btn af-btn--circle");
+    const componentClassName = classNames("btn", getClassName({
+        baseClassName: "af-btn--circle",
+        modifiers: classModifier?.split(" "),
+        className,
+    }));
     return (_jsx("a", { ...otherProps, className: componentClassName, ref: ref, children: _jsx("i", { role: "img", className: `glyphicon glyphicon-${icon}` }) }));
 });
 Action.displayName = "Action";

package/dist/distributeur/Form/Checkbox/CheckboxItem.d.ts

@@ -1,10 +1,12 @@
 import { type ReactNode } from "react";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 declare const CheckboxItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     optionClassName?: string;
     children?: ReactNode;
     label?: ReactNode;
     isChecked?: boolean;
+    variant?: "error" | "warning";
 } & import("react").RefAttributes<HTMLInputElement>>;
 export { CheckboxItem };

package/dist/distributeur/Form/Checkbox/CheckboxItem.js

@@ -4,11 +4,11 @@ import { forwardRef, useId, } from "react";
 import { getOptionClassName } from "../core";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 import { Svg } from "../../Svg";
-const CheckboxItem = forwardRef(({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, ...otherProps }, inputRef) => {
+const CheckboxItem = forwardRef(({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, variant, ...otherProps }, inputRef) => {
     const newLabel = children || label;
     const generatedId = useId();
     const newId = id ?? generatedId; // id is required on this component
-    const optionClassName = getOptionClassName(className ?? "", classModifier ?? "", "af-form__checkbox", disabled);
+    const optionClassName = getOptionClassName(className ?? "", classModifier ?? "", "af-form__checkbox", disabled, variant);
     return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-checkbox", value: value, id: newId, disabled: disabled, checked: isChecked, type: "checkbox", ref: inputRef }), _jsxs("label", { className: "af-form__label", htmlFor: newId, children: [_jsx("span", { className: "af-form__indicator", children: _jsx(Svg, { role: "presentation", className: "ok-icon", src: check }) }), _jsx("span", { className: "af-form__description", children: newLabel })] })] }));
 });
 CheckboxItem.displayName = "CheckboxItem";

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

@@ -8,6 +8,7 @@ type Props = Omit<ComponentProps<typeof Radio>, "options" | "value"> & {
         value: boolean;
     }>;
     value?: boolean | string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const Choice: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,7 @@
 import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
 import { type ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "value"> & {
+    /** @deprecated Use `className` and the native `disabled`/`required` props instead. */
     classModifier?: string;
     defaultValue?: Date | string;
     value?: Date | string;

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

@@ -1,10 +1,14 @@
 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";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const Date = forwardRef(({ className, classModifier, defaultValue, value, ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-date");
+    const componentClassName = getClassName({
+        baseClassName: "af-form__input-date",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     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";

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

@@ -2,6 +2,7 @@ import { type DropzoneInputProps, type DropzoneOptions, type FileRejection } fro
 import type { FileActions } from "./constants";
 type Dropzone = DropzoneInputProps & DropzoneOptions;
 type Props = Omit<Dropzone, "onDrop" | "onChange"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     label?: string;
     icon?: string;

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

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

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

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

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

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

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

@@ -5,5 +5,8 @@ type Props = Omit<ComponentPropsWithRef<"input">, "type" | "role"> & {
     classModifier?: string;
     onToggleType: () => void;
 };
+/**
+ * @deprecated The Pass component is deprecated and will be removed in a future release
+ */
 declare const Pass: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Pass };

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

@@ -2,6 +2,9 @@ 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";
+/**
+ * @deprecated The Pass component is deprecated and will be removed in a future release
+ */
 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"}` }) })] }));

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

@@ -6,5 +6,8 @@ type Props = Omit<ConsumerFieldProps & PassProps & {
     helpMessage?: ReactNode;
     score?: string;
 }, "onToggleType" | "type">;
+/**
+ * @deprecated The PassInput component is deprecated and will be removed in a future release
+ */
 declare const PassInput: ({ children, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { PassInput };

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

@@ -23,6 +23,9 @@ const calculateStrength = (score) => {
     }
     return strengthList[strength];
 };
+/**
+ * @deprecated The PassInput component is deprecated and will be removed in a future release
+ */
 const PassInput = ({ children, score, classModifier, disabled, ...props }) => {
     const strength = calculateStrength(score);
     const [type, setType] = useState("password");

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

@@ -1,6 +1,7 @@
 import "@axa-fr/canopee-css/distributeur/Form/Radio/Radio.css";
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "checked" | "type"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     optionClassName?: string;
     label?: ReactNode;

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

@@ -19,6 +19,7 @@ declare const SelectBase: import("react").ForwardRefExoticComponent<Omit<import(
      * It allows you to use the `optgroup` tag for example.
      */
     options?: OptionHTMLAttributes<HTMLOptionElement>[];
+    /** @deprecated Use `className` and the native `required` prop instead. */
     classModifier?: string;
 } & import("react").RefAttributes<HTMLSelectElement>>;
 export { SelectBase };

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

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Select/Select.css";
 import { forwardRef, } from "react";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 /**
  * @deprecated Use Select instead
  */
 const SelectBase = forwardRef(({ options, id, className, classModifier, required, children, ...otherProps }, inputRef) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-select");
+    const componentClassName = getClassName({
+        baseClassName: "af-form__input-select",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("div", { className: "af-form__select-container", children: [_jsx("select", { ...otherProps, id: id, className: componentClassName, ref: inputRef, required: classModifier?.includes("required") || required, children: children ??
                     options?.map(({ label, ...opt }) => (_jsx("option", { ...opt, children: label }, opt.value?.toString()))) }), _jsx("span", { "aria-controls": id, className: "glyphicon glyphicon-menu-down" })] }));
 });

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

@@ -2,6 +2,7 @@ import RcSlider from "rc-slider";
 import { type ComponentProps, type ReactNode } from "react";
 type RcSliderProps = ComponentProps<typeof RcSlider>;
 type Props = Omit<RcSliderProps, "marks" | "onChange" | "onChangeComplete"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     options: {
         value: number;

package/dist/distributeur/Form/Slider/Slider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import RcSlider from "rc-slider";
 import { useCallback, useMemo, } from "react";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 /**
  * @deprecated Slider is deprecated and will be removed in a future major release.
  */
@@ -21,7 +21,11 @@ const Slider = ({ options, value, defaultValue, className, classModifier, ...oth
         newMarks[index] = optLabel || optValue;
         return newMarks;
     }, {}), [options]);
-    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-slider"), [className, classModifier]);
+    const componentClassName = useMemo(() => getClassName({
+        baseClassName: "af-slider",
+        modifiers: classModifier?.split(" "),
+        className,
+    }), [className, classModifier]);
     const formatOnChange = useCallback((newValueIndex, onChange) => {
         if (onChange && !Array.isArray(newValueIndex)) {
             onChange({

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

@@ -1,6 +1,7 @@
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
 import { type ComponentPropsWithRef } from "react";
 type Props = ComponentPropsWithRef<"input"> & {
+    /** @deprecated Use `className` and the native `required` prop instead. */
     classModifier?: string;
 };
 declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/distributeur/Form/Text/Text.js

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

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

@@ -1,5 +1,6 @@
 import "@axa-fr/canopee-css/distributeur/Form/Textarea/Textarea.css";
 declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    /** @deprecated Use `className` and the native `required` prop instead. */
     classModifier?: string;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/dist/distributeur/Form/Textarea/Textarea.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Textarea/Textarea.css";
 import { forwardRef, useId } from "react";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const Textarea = forwardRef(({ id, className, classModifier, ...otherProps }, inputRef) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
-    const componentClassName = getComponentClassName(className, classModifier, "af-form__input-textarea");
+    const componentClassName = getClassName({
+        baseClassName: "af-form__input-textarea",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("textarea", { ...otherProps, id: inputId, className: componentClassName, ref: inputRef, required: classModifier?.includes("required") }));
 });
 Textarea.displayName = "Textarea";

package/dist/distributeur/Form/core/getOptionClassName.d.ts

@@ -1 +1 @@
-export declare function getOptionClassName(className: string, classModifier: string, defaultClassName: string, disabled: boolean): string;
+export declare function getOptionClassName(className: string, classModifier: string, defaultClassName: string, disabled: boolean, variant?: string): string;

package/dist/distributeur/Form/core/getOptionClassName.js

@@ -1,10 +1,12 @@
-import { getComponentClassName } from "../../utilities";
-export function getOptionClassName(className, classModifier, defaultClassName, disabled) {
-    const classModifierWithDisabled = [
-        classModifier,
-        disabled ? "disabled" : undefined,
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return getComponentClassName(className, classModifierWithDisabled, defaultClassName);
+import { getClassName } from "../../utilities/helpers/getClassName";
+export function getOptionClassName(className, classModifier, defaultClassName, disabled, variant) {
+    return getClassName({
+        baseClassName: defaultClassName,
+        modifiers: [
+            variant,
+            ...(classModifier?.split(" ") ?? []),
+            disabled && "disabled",
+        ],
+        className,
+    });
 }

package/dist/distributeur/HelpButton/index.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Action/Action.css";
+import classNames from "classnames";
 import { Popover } from "../Popover";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 export const HelpButton = ({ className, classModifier, children, mode = "click", placement = "right", helpButtonContent = _jsx("span", { className: "af-more-help", children: "i" }), }) => {
-    const buttonClassName = getComponentClassName("btn af-btn--circle", classModifier, "");
+    const buttonClassName = classNames("btn", getClassName({
+        baseClassName: "af-btn--circle",
+        modifiers: classModifier?.split(" "),
+    }));
     return (_jsx(Popover, { className: className, classModifier: classModifier, placement: placement, mode: mode, popoverElement: children, children: _jsx("div", { className: buttonClassName, children: helpButtonContent }) }));
 };

package/dist/distributeur/Layout/Header/Header.d.ts

@@ -2,6 +2,7 @@ import "@axa-fr/canopee-css/distributeur/Layout/Header/Header.css";
 import { type ReactNode } from "react";
 type Props = {
     children: ReactNode;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     className?: string;
 };

package/dist/distributeur/Layout/Header/Header.js

@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Layout/Header/Header.css";
 import classNames from "classnames";
 import {} from "react";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const defaultClassName = "af-header";
 const Header = ({ classModifier, className, children }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("div", { className: classNames("af-container", componentClassName), children: _jsx("header", { className: `${defaultClassName}__content`, role: "banner", children: children }) }));
 };
 export { Header };

package/dist/distributeur/Layout/Header/Infos/Infos.d.ts

@@ -6,6 +6,7 @@ export type TInfo = {
     word: ReactNode;
 };
 type InfosProps = {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     className?: string;
     infos: TInfo[];

package/dist/distributeur/Layout/Header/Infos/Infos.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import infoIcon from "@material-symbols/svg-400/outlined/info-fill.svg";
 import { Fragment } from "react";
-import { getComponentClassName } from "../../../utilities";
 import { generateId } from "../../../utilities/helpers/generateId";
+import { getClassName } from "../../../utilities/helpers/getClassName";
 import "@axa-fr/canopee-css/distributeur/Layout/Header/Infos/Infos.css";
 import { Svg } from "../../../Svg";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("div", { className: componentClassName, children: [_jsx(Svg, { className: "af-contrat__icon", src: infoIcon, "aria-hidden": "true" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => {
                     const idTerm = info.id ?? `info-${generateId(info)}`;
                     return (_jsxs(Fragment, { children: [_jsx("dt", { id: idTerm, className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, "aria-labelledby": idTerm, children: info.definition })] }, idTerm));

package/dist/distributeur/Layout/Header/Name/Name.d.ts

@@ -3,6 +3,7 @@ import "@axa-fr/canopee-css/distributeur/Layout/Header/Name/Name.css";
 import { type MouseEvent } from "react";
 type Props = {
     alt?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     className?: string;
     img?: string;

package/dist/distributeur/Layout/Header/Name/Name.js

@@ -2,10 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Layout/Header/Logo/Logo.css";
 import "@axa-fr/canopee-css/distributeur/Layout/Header/Name/Name.css";
 import {} from "react";
-import { getComponentClassName } from "../../../utilities";
+import { getClassName } from "../../../utilities/helpers/getClassName";
 const defaultClassName = "af-header__name";
 const Name = ({ alt = "logo", classModifier, className, img, onClick, subtitle, title, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("div", { className: componentClassName, children: [_jsx("a", { className: "af-logo", href: "/", onClick: (event) => onClick && onClick({ event }), children: _jsx("img", { className: "af-logo__brand", src: img, alt: alt }) }), _jsxs("h2", { className: "af-header__title", children: [title, _jsx("span", { className: "af-header__subtitle", children: subtitle })] })] }));
 };
 export { Name };

package/dist/distributeur/Layout/Header/NavBar/NavBarBase.d.ts

@@ -6,6 +6,7 @@ type Props = {
     isMenuFocused?: boolean;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     handleKeys: (key: string) => void;
     onFocus: (action: {

package/dist/distributeur/Layout/Header/NavBar/NavBarBase.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { getComponentClassName } from "../../../utilities";
+import { getClassName } from "../../../utilities/helpers/getClassName";
 const defaultClassName = "af-nav-container";
 const NavBarBase = ({ isVisible = true, onClick, id = "mainmenu", toggleMenuId = "togglemenu", isMenuFocused, className, classModifier, handleKeys, onFocus, onBlur, children, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("div", { className: classNames("af-container", componentClassName), children: [_jsx("button", { "aria-controls": id, "aria-haspopup": "true", type: "button", onClick: onClick, className: `mask fade ${isVisible ? "show" : ""}`, id: `open-${toggleMenuId}`, "aria-label": "Open Menu" }), _jsxs("nav", { className: `af-nav af-drawer left ${isVisible ? "show" : ""}`, role: "navigation", "aria-label": "Menu principal", children: [_jsxs("div", { className: "af-nav__aside-header", children: [_jsx("h4", { className: "af-nav__aside-title", children: "Menu" }), _jsx("button", { "aria-controls": id, "aria-haspopup": "true", onClick: onClick, type: "button", className: "af-nav__aside-close", id: `close-${toggleMenuId}`, "aria-label": "Close Menu", children: "\u00D7" })] }), _jsx("ul", { onKeyDown: (e) => {
                             e.preventDefault();
                             handleKeys(e.key);

package/dist/distributeur/Layout/Header/User/User.d.ts

@@ -20,6 +20,7 @@ type Props = {
      * <User classModifier="custom-class" />
      * ```
      * This will apply the class `af-info-user--custom-class` to the component.
+     * @deprecated Use `className` instead.
      */
     classModifier?: string;
     /**

package/dist/distributeur/Layout/Header/User/User.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Layout/Header/User/User.css";
-import { getComponentClassName } from "../../../utilities";
+import { getClassName } from "../../../utilities/helpers/getClassName";
 import { InnerUser } from "./InnerUser";
 const defaultClassName = "af-info-user";
 const User = ({ children, classModifier, className, href, name, path, profile, onClick, title = "Voir mon profil", }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("div", { className: componentClassName, children: [href ? (_jsx("a", { "aria-label": "user info link", className: `${defaultClassName}__link`, href: href, title: title, onClick: (event) => onClick && onClick({ path, event }), children: _jsx(InnerUser, { name: name, profile: profile }) })) : (_jsx(InnerUser, { name: name, profile: profile })), children] }));
 };
 export { User };

package/dist/distributeur/Loader/Loader.d.ts

@@ -6,6 +6,7 @@ type LoaderProps = {
     mode: LoaderMode;
     text?: string;
     children: ReactNode;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const Loader: ({ className, text, children, classModifier, mode, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;