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

package/dist/distributeur/Loader/Loader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Loader/Loader.css";
 import {} from "react";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const getText = (index) => {
     switch (index) {
         case "get":
@@ -19,7 +19,11 @@ const getText = (index) => {
     }
 };
 export const Loader = ({ className, text, children, classModifier, mode = "none", }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-loader");
+    const componentClassName = getClassName({
+        baseClassName: "af-loader",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     const message = text || getText(mode);
     const isLoaderVisible = mode !== "none";
     const isLoaderInError = mode === "error";

package/dist/distributeur/Messages/Message.js

@@ -6,7 +6,7 @@ import errorSvg from "@material-symbols/svg-400/outlined/error-fill.svg";
 import infoSvg from "@material-symbols/svg-400/outlined/info-fill.svg";
 import warningSvg from "@material-symbols/svg-400/outlined/warning-fill.svg";
 import { Svg } from "../Svg";
-import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
+import { getClassName } from "../utilities/helpers/getClassName";
 const getIconUrl = (type) => {
     switch (type) {
         case "info":
@@ -33,10 +33,10 @@ const getVariant = (classModifier, variant) => {
 export const Message = ({ className, onClose, icon, title, children, classModifier = "error", variant, // Backward compatibility
 closeButtonAriaLabel = "close", }) => {
     const safeVariant = getVariant(classModifier, variant);
-    const componentClassName = getComponentClassNameWithUserClassname({
-        componentClassName: "af-alert",
-        userClassName: className,
-        classModifier: safeVariant,
+    const componentClassName = getClassName({
+        baseClassName: "af-alert",
+        modifiers: [safeVariant],
+        className,
     });
     const iconSrc = icon ?? getIconUrl(safeVariant);
     return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsx("div", { className: "af-alert__sidebar", children: _jsx("div", { className: "af-alert__indicator", children: _jsx(Svg, { src: iconSrc, className: "af-alert__icon", role: "presentation" }) }) }), _jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__title", children: title }), children] }), onClose ? (_jsx("button", { onClick: onClose, "aria-label": closeButtonAriaLabel, type: "button", className: "af-alert__close-button", children: _jsx(Svg, { src: closeSvg, className: "af-alert__close-icon", role: "presentation" }) })) : null] }));

package/dist/distributeur/ModalAgent/components/Body.d.ts

@@ -1,4 +1,5 @@
 export type BodyProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const Body: ({ children, className, classModifier, ...otherProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/ModalAgent/components/Body.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const Body = ({ children, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal__body");
+    const componentClassName = getClassName({
+        baseClassName: "af-modal__body",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("section", { className: componentClassName, ...otherProps, children: children }));
 };
 export { Body };

package/dist/distributeur/ModalAgent/components/Footer.d.ts

@@ -1,4 +1,5 @@
 export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const Footer: ({ classModifier, className, ...rest }: FooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/ModalAgent/components/Footer.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const Footer = ({ classModifier, className, ...rest }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal__footer");
+    const componentClassName = getClassName({
+        baseClassName: "af-modal__footer",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return _jsx("footer", { ...rest, className: componentClassName });
 };
 export { Footer };

package/dist/distributeur/ModalAgent/components/Header.d.ts

@@ -19,6 +19,7 @@ export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     closeButtonAriaLabel?: string;
     /**
      * Class modifier for the header. Can be used to apply custom styles.
+     * @deprecated Use `className` instead.
      */
     classModifier?: string;
     /**

package/dist/distributeur/ModalAgent/components/Header.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
-import { getComponentClassName, Svg } from "../../../distributeur";
+import { Svg } from "../../../distributeur";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const Header = ({ className, classModifier, title, closeButtonAriaLabel = "Fermer la boite de dialogue", onCancel, children, ...props }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
+    const componentClassName = getClassName({
+        baseClassName: "af-modal__header",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("header", { className: componentClassName, ...props, children: [_jsx("h4", { className: "af-modal__header-title", children: children ?? title }), _jsx("button", { className: "af-modal__header-close-btn", type: "button", "aria-label": closeButtonAriaLabel, onClick: onCancel, children: _jsx(Svg, { src: closeIcon }) })] }));
 };
 export { Header };

package/dist/distributeur/ModalAgent/components/HeaderBase.d.ts

@@ -1,4 +1,5 @@
 export type HeaderBaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const HeaderBase: ({ classModifier, className, ...rest }: HeaderBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/ModalAgent/components/HeaderBase.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../../utilities";
+import { getClassName } from "../../utilities/helpers/getClassName";
 const HeaderBase = ({ classModifier, className, ...rest }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-modal__header");
+    const componentClassName = getClassName({
+        baseClassName: "af-modal__header",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return _jsx("header", { ...rest, className: componentClassName });
 };
 export { HeaderBase };

package/dist/distributeur/Popover/AnimatedPopover.d.ts

@@ -6,6 +6,7 @@ type PropsAnimatedPopover = {
     isOpen: boolean;
     target: React.ReactNode;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     onMouseEnter?: (event: React.MouseEvent) => void;
     onMouseLeave?: (event: React.MouseEvent) => void;

package/dist/distributeur/Popover/AnimatedPopover.js

@@ -2,10 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { arrow, FloatingArrow, offset, useFloating, } from "@floating-ui/react";
 import React, { useRef } from "react";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const defaultClassName = "af-popover__container";
 export const AnimatedPopover = ({ placement, children, isOpen, target, className, classModifier, onMouseEnter, onMouseLeave, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" ") ?? [],
+        className,
+    });
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
     const arrowRef = useRef(null);

package/dist/distributeur/Popover/Popover.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 import type { PopoverModes } from "./Popover.types";
 type Props = {
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     placement?: Placement;
     mode: PopoverModes;

package/dist/distributeur/Popover/Popover.types.d.ts

@@ -2,7 +2,9 @@ import type { Placement } from "@floating-ui/react";
 export type PopoverModes = "hover" | "click";
 export type PopoverProps = {
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
+    size?: "small";
     placement?: Placement;
     children?: React.ReactNode;
     element: React.ReactNode;

package/dist/distributeur/Popover/PopoverBase.d.ts

@@ -4,6 +4,7 @@ import "@axa-fr/canopee-css/distributeur/Popover/Popover.css";
 type Props = {
     placement?: Placement;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     element: React.ReactNode;
     children: React.ReactNode | React.ReactNode[];

package/dist/distributeur/Popover/PopoverBase.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { AnimatedPopover } from "./AnimatedPopover";
 import "@axa-fr/canopee-css/distributeur/Popover/Popover.css";
-const defaultClassName = "af-popover__container";
-const PopoverBase = ({ children, isOpen, placement = "right", className = defaultClassName, classModifier, element, onMouseEnter, onMouseLeave, }) => {
+const PopoverBase = ({ children, isOpen, placement = "right", className, classModifier, element, onMouseEnter, onMouseLeave, }) => {
     return (_jsx(AnimatedPopover, { target: children, placement: placement, isOpen: isOpen, className: className, classModifier: classModifier, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: element }));
 };
 export { PopoverBase };

package/dist/distributeur/Restitution/ArticleRestitution.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 type ArticleRestitutionProps = ComponentPropsWithoutRef<"article"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const ArticleRestitution: ({ children, className, classModifier, ...otherProps }: PropsWithChildren<ArticleRestitutionProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/ArticleRestitution.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 export const ArticleRestitution = ({ children, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-restitution");
+    const componentClassName = getClassName({
+        baseClassName: "af-restitution",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("article", { className: componentClassName, ...otherProps, children: children }));
 };

package/dist/distributeur/Restitution/HeaderRestitution.d.ts

@@ -4,6 +4,7 @@ export type HeaderRestitutionProps = {
     title: React.ReactNode;
     subtitle?: React.ReactNode;
     rightTitle?: React.ReactNode;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const HeaderRestitution: ({ title, subtitle, rightTitle, className, classModifier, }: HeaderRestitutionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/HeaderRestitution.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 export const HeaderRestitution = ({ title, subtitle, rightTitle, className, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__header");
+    const componentClassName = getClassName({
+        baseClassName: "af-restitution__header",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsxs("header", { className: componentClassName, children: [_jsx("div", { className: "af-restitution__header-left", children: _jsxs("h3", { className: "af-restitution__title", children: [_jsx("span", { className: "af-restitution__title-main", children: title }), subtitle ? (_jsx("span", { className: "af-restitution__title-subtitle", children: subtitle })) : null] }) }), rightTitle ? (_jsx("div", { className: "af-restitution__header-right", children: _jsx("span", { className: "af-restitution__title", children: rightTitle }) })) : null] }));
 };

package/dist/distributeur/Restitution/Restitution.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 export type RestitutionProps = ComponentPropsWithoutRef<"dl"> & {
     label: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
+    variant?: "marge";
 };
-export declare const Restitution: ({ label, children, className, classModifier, }: PropsWithChildren<RestitutionProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Restitution: ({ label, children, className, classModifier, variant, }: PropsWithChildren<RestitutionProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/Restitution.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
-export const Restitution = ({ label, children = "-", className, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__listdef");
+import { getClassName } from "../utilities/helpers/getClassName";
+export const Restitution = ({ label, children = "-", className, classModifier, variant, }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-restitution__listdef",
+        modifiers: [variant, ...(classModifier?.split(" ") ?? [])],
+        className,
+    });
     return (_jsxs("dl", { className: componentClassName, children: [_jsx("dt", { className: "af-restitution__listdef-item", children: _jsx("span", { className: "af-restitution__text", children: label }) }), _jsx("dd", { className: "af-restitution__listdef-value", children: children })] }));
 };

package/dist/distributeur/Restitution/SectionRestitution.d.ts

@@ -1,6 +1,7 @@
 import type { PropsWithChildren } from "react";
 export type SectionRestitutionProps = {
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const SectionRestitution: ({ children, className, classModifier, }: PropsWithChildren<SectionRestitutionProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/SectionRestitution.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 export const SectionRestitution = ({ children, className, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__content");
+    const componentClassName = getClassName({
+        baseClassName: "af-restitution__content",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return _jsx("section", { className: componentClassName, children: children });
 };

package/dist/distributeur/Restitution/SectionRestitutionColumn.d.ts

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
 export type SectionRestitutionColumnProps = {
     className?: string;
     title?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const SectionRestitutionColumn: ({ children, className, title, classModifier, }: PropsWithChildren<SectionRestitutionColumnProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/SectionRestitutionColumn.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import classNames from "classnames";
+import { getClassName } from "../utilities/helpers/getClassName";
 import { SectionRestitutionTitle } from "./SectionRestitutionTitle";
 export const SectionRestitutionColumn = ({ children, className, title, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "col-sm-12 col-md-12 col-lg-6 col-xl-6");
+    const baseClassName = className
+        ? getClassName({
+            baseClassName: className,
+            modifiers: classModifier?.split(" "),
+        })
+        : null;
+    const componentClassName = classNames("col-sm-12 col-md-12 col-lg-6 col-xl-6", baseClassName);
     return (_jsxs("div", { className: componentClassName, children: [title ? _jsx(SectionRestitutionTitle, { title: title }) : null, children] }));
 };

package/dist/distributeur/Restitution/SectionRestitutionRow.d.ts

@@ -3,6 +3,7 @@ export type SectionRestitutionRowProps = {
     title?: React.ReactNode;
     classNameContainer?: string;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const SectionRestitutionRow: ({ title, className, classNameContainer, children, classModifier, }: PropsWithChildren<SectionRestitutionRowProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/SectionRestitutionRow.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import classNames from "classnames";
+import { getClassName } from "../utilities/helpers/getClassName";
 import { SectionRestitutionTitle } from "./SectionRestitutionTitle";
 const DEFAULT_CLASSNAME = "col col-sm-12 col-md-12 col-lg-12 col-xl-12";
-export const SectionRestitutionRow = ({ title, className = DEFAULT_CLASSNAME, classNameContainer = "row af-restitution__content-left", children, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, DEFAULT_CLASSNAME);
+export const SectionRestitutionRow = ({ title, className, classNameContainer = "row af-restitution__content-left", children, classModifier, }) => {
+    const baseClassName = className
+        ? getClassName({
+            baseClassName: className,
+            modifiers: classModifier?.split(" "),
+        })
+        : null;
+    const componentClassName = classNames(DEFAULT_CLASSNAME, baseClassName);
     return (_jsxs("div", { className: componentClassName, children: [title ? _jsx(SectionRestitutionTitle, { title: title }) : null, _jsx("div", { className: classNameContainer, children: children })] }));
 };

package/dist/distributeur/Restitution/SectionRestitutionTitle.d.ts

@@ -1,6 +1,7 @@
 export type SectionRestitutionTitleProps = {
     title: React.ReactNode;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 export declare const SectionRestitutionTitle: ({ title, className, classModifier, }: SectionRestitutionTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Restitution/SectionRestitutionTitle.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 export const SectionRestitutionTitle = ({ title, className, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-restitution__content-title");
+    const componentClassName = getClassName({
+        baseClassName: "af-restitution__content-title",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return _jsx("h4", { className: componentClassName, children: title });
 };

package/dist/distributeur/Steps/StepBase.d.ts

@@ -4,6 +4,7 @@ export type StepBaseProps = {
     title: string;
     children?: ReactNode;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
     /**
      * Label to add to the title as state indication (e.g. "in progress", "to come"...)

package/dist/distributeur/Steps/StepBase.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import checkSvg from "@material-symbols/svg-400/outlined/check.svg";
 import chevronSvg from "@material-symbols/svg-400/outlined/chevron_right.svg";
-import { getComponentClassName, Svg } from "../../distributeur";
+import { Svg } from "../../distributeur";
+import { getClassName } from "../utilities/helpers/getClassName";
 const StepBase = ({ children, id, title, className, classModifier, stateLabel, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-steps-list-step");
+    const componentClassName = getClassName({
+        baseClassName: "af-steps-list-step",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     const outputTitle = stateLabel ? `${title} (${stateLabel})` : title;
     return (_jsxs("li", { className: componentClassName, title: outputTitle, children: [_jsx(Svg, { src: checkSvg }), children, _jsx(Svg, { src: chevronSvg })] }, id));
 };

package/dist/distributeur/Steps/Steps.d.ts

@@ -2,7 +2,8 @@ import type { ReactNode } from "react";
 type Props = {
     children: ReactNode;
     className?: string;
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
-declare const Steps: ({ children, className, classModifier, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Steps: ({ children, className, classModifier }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Steps };

package/dist/distributeur/Steps/Steps.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const defaultClassName = "af-steps-new";
-const Steps = ({ children, className = defaultClassName, classModifier, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+const Steps = ({ children, className, classModifier }) => {
+    const componentClassName = getClassName({
+        baseClassName: defaultClassName,
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("div", { className: componentClassName, children: _jsx("ol", { className: "af-steps-list", children: children }) }));
 };
 export { Steps };

package/dist/distributeur/Table/TBody.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"tbody"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const TBody: ({ children, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Table/TBody.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const TBody = ({ children, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-table__body");
+    const componentClassName = getClassName({
+        baseClassName: "af-table__body",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("tbody", { className: componentClassName, ...otherProps, children: children }));
 };
 export { TBody };

package/dist/distributeur/Table/THead.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"thead"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const THead: ({ children, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Table/THead.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const THead = ({ children, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-table__thead");
+    const componentClassName = getClassName({
+        baseClassName: "af-table__thead",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("thead", { className: componentClassName, ...otherProps, children: children }));
 };
 export { THead };

package/dist/distributeur/Table/Table.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from "react";
 import "@axa-fr/canopee-css/distributeur/Table/Table.css";
 type TableProps = ComponentPropsWithoutRef<"table"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const Table: {
@@ -23,8 +24,9 @@ declare const Table: {
     TBody: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
         classModifier?: string;
     }) => import("react/jsx-runtime").JSX.Element;
-    Th: ({ children, id, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+    Th: ({ children, id, className, classModifier, sortable, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
         classModifier?: string;
+        sortable?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
     Tr: ({ children, id, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
         classModifier?: string;

package/dist/distributeur/Table/Table.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 import { TBody } from "./TBody";
 import { THead } from "./THead";
 import { Td } from "./Td";
@@ -7,7 +7,11 @@ import { Th } from "./Th";
 import { Tr } from "./Tr";
 import "@axa-fr/canopee-css/distributeur/Table/Table.css";
 const Table = ({ className, classModifier, children, ...othersProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-table");
+    const componentClassName = getClassName({
+        baseClassName: "af-table",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("table", { className: componentClassName, ...othersProps, children: children }));
 };
 /**

package/dist/distributeur/Table/Td.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"td"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const Td: ({ children, id, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Table/Td.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const Td = ({ children, id, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-table__cell");
+    const componentClassName = getClassName({
+        baseClassName: "af-table__cell",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("td", { className: componentClassName, id: id, ...otherProps, children: children }, id));
 };
 export { Td };

package/dist/distributeur/Table/Th.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"th"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
+    sortable?: boolean;
 };
-declare const Th: ({ children, id, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Th: ({ children, id, className, classModifier, sortable, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Th };

package/dist/distributeur/Table/Th.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getComponentClassName } from "../utilities";
-const Th = ({ children, id, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-table__th");
+import { getClassName } from "../utilities/helpers/getClassName";
+const Th = ({ children, id, className, classModifier, sortable, ...otherProps }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-table__th",
+        modifiers: [sortable && "sortable", ...(classModifier?.split(" ") ?? [])],
+        className,
+    });
     return (_jsx("th", { className: componentClassName, id: id, ...otherProps, children: children }, id));
 };
 export { Th };

package/dist/distributeur/Table/Tr.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"tr"> & {
+    /** @deprecated Use `className` instead. */
     classModifier?: string;
 };
 declare const Tr: ({ children, id, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Table/Tr.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "react";
-import { getComponentClassName } from "../utilities";
+import { getClassName } from "../utilities/helpers/getClassName";
 const Tr = ({ children, id, className, classModifier, ...otherProps }) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-table__tr");
+    const componentClassName = getClassName({
+        baseClassName: "af-table__tr",
+        modifiers: classModifier?.split(" "),
+        className,
+    });
     return (_jsx("tr", { className: componentClassName, ...otherProps, children: children }, id));
 };
 export { Tr };