@axa-fr/design-system-slash-react 1.1.1-alpha.2 → 1.1.1-alpha.204

package/dist/Form/core/FieldError.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getComponentClassName } from "../../utilities";
 import { MessageTypes } from "./MessageTypes";
 const DEFAULT_CLASS_NAME = "af-form__message";
-export const FieldError = ({ message = null, messageType = MessageTypes.error, }) => {
+export const FieldError = ({ message = null, messageType = MessageTypes.error, errorId = undefined, }) => {
     const className = getComponentClassName(DEFAULT_CLASS_NAME, messageType, DEFAULT_CLASS_NAME);
-    return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { className: `af-form__${messageType}-text`, children: message })] })));
+    return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { id: errorId, className: `af-form__${messageType}-text`, children: message })] })));
 };

package/dist/Form/core/FieldForm.d.ts

@@ -1,4 +1,4 @@
-import { BaseSyntheticEvent, Dispatch, ReactNode, SetStateAction } from "react";
+import { type BaseSyntheticEvent, type Dispatch, type ReactElement, type ReactNode, type SetStateAction } from "react";
 import { FormClassManager } from "./FormClassManager";
 import { MessageTypes } from "./MessageTypes";
 type TMessage = {
@@ -49,7 +49,7 @@ export declare const eventWrapper: ({ wrapper, props }: EventWrapperProps) => {
     onFocus: (ev: BaseSyntheticEvent) => void;
 };
 type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
-    child: JSX.Element;
+    child: ReactElement<Record<string, unknown>>;
     classModifier: string;
     name: string;
     getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;

package/dist/Form/core/FieldForm.js

@@ -100,7 +100,8 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
     };
     if (child.props.children) {
         const subChildren = renderedChildren({
-            children: child.props.children,
+            children: child.props
+                .children,
             wrapper,
             message,
             messageType,
@@ -118,7 +119,7 @@ export const renderedChildren = ({ children, wrapper, message, messageType, }) =
             messageType,
             classModifier: props.classModifier,
             wrapper,
-            child,
+            child: child,
         }),
     });
 });

package/dist/Form/core/LegacyField.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { FieldForm } from "./FieldForm";
+type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> & {
+    label: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    classModifier?: string;
+    classNameContainerLabel?: string;
+    classNameContainerInput?: string;
+    isVisible?: boolean;
+    roleContainer?: string;
+    ariaLabelContainer?: string;
+    isLabelContainerLinkedToInput?: boolean;
+    errorId?: string;
+};
+export declare const LegacyField: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, errorId, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Form/core/LegacyField.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getComponentClassName } from "../../utilities";
+import { FieldError } from "./FieldError";
+import { FieldForm } from "./FieldForm";
+import { MessageTypes } from "./MessageTypes";
+export const LegacyField = ({ id = "", message = "", messageType = MessageTypes.error, label, children, forceDisplayMessage, classModifier = "", className, classNameContainerLabel = "col-md-2", classNameContainerInput = "col-md-10", isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, errorId, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    const componentClassName = getComponentClassName(className, classModifier, "row af-form__group");
+    return (_jsxs("div", { className: componentClassName, role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames({
+                        "af-form__group-label--required": classModifier.includes("required"),
+                    }, "af-form__group-label"), htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })] })] }));
+};

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

@@ -1,16 +1,17 @@
 import { ReactNode } from "react";
 export { Field } from "./Field";
-export { FieldInput } from "./FieldInput";
-export { MessageTypes } from "./MessageTypes";
 export { FieldError } from "./FieldError";
-export { FormClassManager } from "./FormClassManager";
 export { FieldForm } from "./FieldForm";
+export { FieldInput } from "./FieldInput";
+export { FormClassManager } from "./FormClassManager";
 export { HelpMessage } from "./HelpMessage";
 export { InputList } from "./InputList";
-export { useInputClassModifier } from "./useInputClassModifier";
+export { LegacyField } from "./LegacyField";
+export { MessageTypes } from "./MessageTypes";
+export { getFirstId } from "./getFirstId";
 export { getOptionClassName } from "./getOptionClassName";
+export { useInputClassModifier } from "./useInputClassModifier";
 export { useOptionsWithId } from "./useOptionsWithId";
-export { getFirstId } from "./getFirstId";
 export type Option = {
     id?: string;
     icon?: ReactNode;

package/dist/Form/core/index.js

@@ -1,12 +1,13 @@
 export { Field } from "./Field";
-export { FieldInput } from "./FieldInput";
-export { MessageTypes } from "./MessageTypes";
 export { FieldError } from "./FieldError";
-export { FormClassManager } from "./FormClassManager";
 export { FieldForm } from "./FieldForm";
+export { FieldInput } from "./FieldInput";
+export { FormClassManager } from "./FormClassManager";
 export { HelpMessage } from "./HelpMessage";
 export { InputList } from "./InputList";
-export { useInputClassModifier } from "./useInputClassModifier";
+export { LegacyField } from "./LegacyField";
+export { MessageTypes } from "./MessageTypes";
+export { getFirstId } from "./getFirstId";
 export { getOptionClassName } from "./getOptionClassName";
+export { useInputClassModifier } from "./useInputClassModifier";
 export { useOptionsWithId } from "./useOptionsWithId";
-export { getFirstId } from "./getFirstId";

package/dist/Form/core/useAriaInvalid.d.ts

@@ -0,0 +1,2 @@
+import { MessageTypes } from ".";
+export declare const useAriaInvalid: (message?: string, forceDisplayMessage?: boolean, messageType?: MessageTypes) => boolean;

package/dist/Form/core/useAriaInvalid.js

@@ -0,0 +1,2 @@
+import { MessageTypes } from ".";
+export const useAriaInvalid = (message, forceDisplayMessage, messageType) => Boolean(message && forceDisplayMessage && messageType === MessageTypes.error);

package/dist/Layout/Footer/Footer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import logo from "@axa-fr/design-system-slash-css/dist/common/assets/logo-axa.svg";
+import logo from "@axa-fr/design-system-slash-css/logo-axa.svg";
 import "@axa-fr/design-system-slash-css/dist/Layout/Footer/Footer.scss";
 import { forwardRef } from "react";
 export const Footer = forwardRef(({ className = "af-footer", href = "https://www.axa.fr/", title = "Site Axa", icon = logo, alt = "Logo Axa", children = `© ${new Date().getFullYear()} AXA Tous droits réservés`, ...props }, ref) => (_jsx("footer", { ref: ref, className: className, ...props, children: _jsxs("div", { className: "container-fluid container", children: [Boolean(icon) && (_jsx("a", { className: "af-logo", href: href, title: title, target: "blank", rel: "noopener noreferrer", children: _jsx("img", { className: "af-logo__brand", src: icon, alt: alt }) })), _jsx("div", { className: "af-footer-content", children: children })] }) })));

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

@@ -6,6 +6,9 @@ import "@axa-fr/design-system-slash-css/dist/Layout/Header/Infos/Infos.scss";
 const defaultClassName = "af-contrat";
 const Infos = ({ infos, className, classModifier }) => {
     const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _jsx("dl", { className: `${defaultClassName}__list`, children: infos.map((info) => (_jsxs(Fragment, { children: [_jsx("dt", { className: `${defaultClassName}__word`, children: info.word }), _jsx("dd", { className: `${defaultClassName}__def`, children: info.definition })] }, `info-${generateId(info)}`))) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("i", { className: "glyphicon glyphicon-info-sign" }), _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));
+                }) })] }));
 };
 export { Infos };

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

@@ -1,8 +1,11 @@
+import { type ComponentProps } from "react";
+import { NavBar } from "../NavBar";
 type TMenuTitleWrapperProps = {
     children: React.ReactNode;
     menuVisible: boolean;
     subtitle: string;
     title: string;
+    navBarProps?: Partial<ComponentProps<typeof NavBar>>;
 };
-declare const MenuTitleWrapper: ({ children, menuVisible, subtitle, title, }: TMenuTitleWrapperProps) => import("react/jsx-runtime").JSX.Element;
+declare const MenuTitleWrapper: ({ children, menuVisible, subtitle, title, navBarProps, }: TMenuTitleWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export { MenuTitleWrapper };

package/dist/Layout/Header/MenuTitleWrapper/MenuTitleWrapper.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { NavBar } from "../NavBar";
 import { HeaderTitle } from "../HeaderTitle/HeaderTitle";
-const MenuTitleWrapper = ({ children, menuVisible, subtitle, title, }) => {
+import { NavBar } from "../NavBar";
+const MenuTitleWrapper = ({ children, menuVisible, subtitle, title, navBarProps, }) => {
     const [isMenuVisible, setIsMenuVisible] = useState(menuVisible);
     const handleClick = useCallback(() => {
         const { body } = document;
         body.classList.toggle("af-menu-open");
         setIsMenuVisible((prev) => !prev);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(NavBar, { isVisible: isMenuVisible, onClick: handleClick, children: children }), _jsx(HeaderTitle, { title: title, subtitle: subtitle, toggleMenu: handleClick })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NavBar, { isVisible: isMenuVisible, onClick: handleClick, ...navBarProps, children: children }), _jsx(HeaderTitle, { title: title, subtitle: subtitle, toggleMenu: handleClick })] }));
 };
 export { MenuTitleWrapper };

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

@@ -28,6 +28,7 @@ const NavBar = ({ positionInit = 0, children, ...otherProps }) => {
                 tabIndex: isCurrent ? 0 : -1,
                 index,
                 hasFocus: isMenuFocused && isCurrent,
+                onClick: () => setPosition(index),
             });
         }) }));
 };

package/dist/Layout/Header/NavBar/NavBarItem/NavBarItem.d.ts

@@ -1,8 +1,14 @@
 import { ComponentProps, ReactElement } from "react";
 import { NavBarItemBase } from "./NavBarItemBase";
+type ChildrenProps = {
+    classModifier?: string;
+    tabIndex?: number;
+    hasFocus?: boolean;
+    [key: string]: unknown;
+};
 type Props = Omit<ComponentProps<typeof NavBarItemBase>, "handleKeys" | "isMenuOpen" | "position"> & {
     ariaLabel?: string;
-    children?: ReactElement | ReactElement[];
+    children?: ReactElement<ChildrenProps> | ReactElement<ChildrenProps>[];
 };
 declare const NavBarItem: ({ children, hasFocus, actionElt, ariaLabel, tabIndex, role, className, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { NavBarItem };

package/dist/Layout/Header/NavBar/NavBarItem/NavBarItemBase.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, KeyboardEvent, ReactElement } from "react";
 type Props = HTMLAttributes<HTMLLIElement> & {
-    actionElt: ReactElement;
+    actionElt: ReactElement<HTMLAttributes<HTMLElement>>;
     handleKeys: (event: KeyboardEvent<HTMLLIElement>) => void;
     hasFocus?: boolean;
     isMenuOpen?: boolean;

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

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 type Props = {
     children: ReactNode;
     idControl: string;
 };
-declare const ToggleButton: ({ children, idControl }: Props) => false | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare const ToggleButton: ({ children, idControl }: Props) => false | ReactElement<HTMLAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
 export { ToggleButton };

package/dist/Layout/Header/ToggleButton/ToggleButton.js

@@ -1,4 +1,4 @@
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, isValidElement, } from "react";
 const ToggleButton = ({ children, idControl }) => isValidElement(children) &&
     cloneElement(children, {
         ...children.props,

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

@@ -1,7 +1,8 @@
 export { Header } from "./Header";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
 export { Infos } from "./Infos/Infos";
+export { MenuTitleWrapper } from "./MenuTitleWrapper/MenuTitleWrapper";
 export { Name } from "./Name/Name";
-export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
+export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
-export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";

package/dist/Layout/Header/index.js

@@ -1,7 +1,8 @@
 export { Header } from "./Header";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
 export { Infos } from "./Infos/Infos";
+export { MenuTitleWrapper } from "./MenuTitleWrapper/MenuTitleWrapper";
 export { Name } from "./Name/Name";
-export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
+export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
-export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";

package/dist/Link/Link.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps, type ElementType, type ReactNode } from "react";
+import "@axa-fr/design-system-slash-css/dist/Link/Link.scss";
+export type LinkProps<C extends ElementType> = {
+    component?: C;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+} & ComponentProps<C>;
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Link/Link.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef, } from "react";
+import "@axa-fr/design-system-slash-css/dist/Link/Link.scss";
+export const Link = forwardRef(({ className, component: Component = "a", leftIcon, rightIcon, target, rel, disabled, children, ...props }, ref) => {
+    return (_jsxs(Component, { className: classnames("af-slash-link", className), target: target, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? props["aria-disabled"], ...props, ref: ref, children: [leftIcon, children, rightIcon] }));
+});
+Link.displayName = "Link";

package/dist/ModalAgent/Modal.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { getComponentClassName } from "..";
 const Modal = forwardRef(({ className, title = "", onOutsideTap, children, classModifier, ...props }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-modal");
-    return (_jsx("dialog", { "aria-describedby": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
+    return (_jsx("dialog", { "aria-label": title, className: componentClassName, onClick: onOutsideTap, ref: ref, ...props, children: _jsx("div", { className: "af-modal__dialog", onClick: (event) => event.stopPropagation(), children: _jsx("div", { className: "af-modal__content", children: children }) }) }));
 });
 Modal.displayName = "Modal";
 export { Modal };

package/dist/Restitution/HeaderRestitution.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getComponentClassName } from "../utilities";
 export const HeaderRestitution = ({ title, subtitle, rightTitle, className, classModifier, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-restitution__header");
-    return (_jsxs("header", { className: componentClassName, children: [_jsx("div", { className: "af-restitution__header-left", children: _jsxs("div", { 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] }));
+    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/Restitution/SectionRestitutionTitle.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getComponentClassName } from "../utilities";
 export const SectionRestitutionTitle = ({ title, className, classModifier, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-restitution__content-title");
-    return _jsx("div", { className: componentClassName, children: title });
+    return _jsx("h4", { className: componentClassName, children: title });
 };

package/dist/Summary/index.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert } from "../Alert/Alert";
+import { generateId } from "../utilities/helpers/generateId";
 export const Summary = ({ messages = [], isVisible = true, title = "Invalid form", classModifier = "error", ...args }) => {
     const messagesNotBlank = messages.filter((message) => Boolean(message));
     if (!messages || !isVisible || messagesNotBlank.length === 0) {
         return null;
     }
-    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${message}`))) }) }));
+    return (_jsx(Alert, { icon: "glyphicon glyphicon-warning-sign", title: title, classModifier: classModifier, ...args, children: _jsx("ul", { className: "af-summary__message-list", children: messages.map((message) => (_jsx("li", { className: "af-summary__message-item", children: message }, `message_${generateId({ message })}`))) }) }));
 };

package/dist/Table/Pagination/Items.d.ts

@@ -6,9 +6,10 @@ export type Props = {
     elementsLabel?: string;
     items?: number[];
     numberItems?: number;
+    selectAriaLabel?: string;
     onChange: (e: {
         value: number;
     }) => void;
 };
-declare const Items: ({ className, classModifier, onChange, displayLabel, elementsLabel, id, items, numberItems, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Items: ({ className, classModifier, onChange, displayLabel, elementsLabel, selectAriaLabel, id, items, numberItems, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Items };

package/dist/Table/Pagination/Items.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { getComponentClassName } from "../../utilities";
-const Items = ({ className, classModifier, onChange, displayLabel = "Afficher", elementsLabel = "éléments", id, items = [5, 10, 25, 50, 100], numberItems = 10, }) => {
+import { Select } from "../../Form/Select";
+const Items = ({ className, classModifier, onChange, displayLabel = "Afficher", elementsLabel = "éléments", selectAriaLabel = "Modifier le nombre d'éléments à afficher dans le tableau", id, items = [5, 10, 25, 50, 100], numberItems = 10, }) => {
     const defaultIdName = useId();
     const newId = id ?? defaultIdName;
     const componentClassName = getComponentClassName(className, classModifier, "af-paging__form");
-    return (_jsx("div", { className: "af-paging__limit", children: _jsx("form", { className: componentClassName, children: _jsxs("div", { className: "af-form__group", children: [_jsx("div", { className: "col col-sm-2 col-md-2 col-lg-2 col-xl-2", children: _jsx("label", { className: "af-form__group-label", htmlFor: newId, children: displayLabel }) }), _jsx("div", { className: "col col-sm-10 col-md-10 col-lg-10 col-xl-10", children: _jsxs("div", { className: "af-form__select", children: [_jsxs("div", { className: "af-form__select-container", children: [_jsx("select", { id: newId, className: "af-form__input-select", value: numberItems, onChange: (e) => {
-                                                e.preventDefault();
-                                                onChange({ value: Number(e.target.value) });
-                                            }, children: items.map((item) => (_jsx("option", { value: item, children: item }, item))) }), _jsx("span", { className: "glyphicon glyphicon-menu-down" })] }), _jsx("span", { className: "af-form__input-cmplt", children: elementsLabel })] }) })] }) }) }));
+    return (_jsx("div", { className: "af-paging__limit", children: _jsx("form", { className: componentClassName, children: _jsxs("div", { className: "af-form__group", children: [_jsx("div", { className: "col col-sm-2 col-md-2 col-lg-2 col-xl-2", children: _jsx("label", { className: "af-form__group-label", htmlFor: newId, children: displayLabel }) }), _jsxs("div", { className: "col col-sm-10 col-md-10 col-lg-10 col-xl-10", children: [_jsx(Select, { id: newId, value: numberItems, mode: "base", options: items.map((item) => ({
+                                    label: item.toString(),
+                                    value: item.toString(),
+                                })), onChange: (e) => {
+                                    e.preventDefault();
+                                    onChange({ value: Number(e.target.value) });
+                                }, "aria-label": selectAriaLabel }), _jsx("span", { className: "af-form__input-cmplt", children: elementsLabel })] })] }) }) }));
 };
 export { Items };

package/dist/Table/Pagination/Paging.d.ts

@@ -10,5 +10,5 @@ type OnChangePager = (e: {
 export type Props = Omit<PagingComponentProps, "onChange"> & {
     onChange?: OnChangePager;
 };
-declare const Paging: ({ className, classModifier, currentPage, displayLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Paging: ({ className, classModifier, currentPage, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Paging };

package/dist/Table/Pagination/Paging.js

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { getComponentClassName } from "../..";
 import { Items } from "./Items";
 import { Pager } from "./Pager";
-const Paging = ({ className, classModifier, currentPage = 1, displayLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
+const Paging = ({ className, classModifier, currentPage = 1, displayLabel, selectAriaLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-paging");
     const handleChangeItems = useCallback((e) => onChange &&
         onChange({
@@ -16,6 +16,6 @@ const Paging = ({ className, classModifier, currentPage = 1, displayLabel, eleme
             numberItems,
             page: e.value,
         }), [numberItems, onChange]);
-    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, selectAriaLabel: selectAriaLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
 };
 export { Paging };

package/dist/Tabs/components/TabsStateless.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { type ReactNode, type MouseEvent } from "react";
 export interface TabsStatelessProps {
     children: ReactNode;
     activeIndex: string;
@@ -6,7 +6,7 @@ export interface TabsStatelessProps {
     classModifier?: string;
 }
 export interface TabsStatelessHandlers {
-    onChange: (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
+    onChange: (event: MouseEvent<HTMLButtonElement>, index: string) => void;
 }
 type Props = TabsStatelessProps & TabsStatelessHandlers;
 declare const TabsStateless: ({ activeIndex, className, classModifier, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/components/TabsStateless.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from "react";
+import { Children, isValidElement, } from "react";
 import { getComponentClassName } from "../..";
 import { Pane } from "./Pane";
 import { Title } from "./Title";

package/dist/Title/Title.d.ts

@@ -1,9 +1,11 @@
 import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
-import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import { ComponentPropsWithRef, PropsWithChildren, ReactElement } from "react";
 type Headings = "h2" | "h3" | "h4";
 type TitleProps = ComponentPropsWithRef<"h2"> & {
     classModifier?: string;
     heading?: Headings;
+    contentLeft?: ReactElement;
+    contentRight?: ReactElement;
 };
 export declare const Title: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<TitleProps>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};

package/dist/Title/Title.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
-import { forwardRef } from "react";
+import { forwardRef, } from "react";
 import { getComponentClassName } from "../utilities";
-export const Title = forwardRef(({ className, classModifier, children, heading: Heading = "h2", ...otherProps }, ref) => {
-    const componentClassName = getComponentClassName(className, classModifier, "af-title");
-    return (_jsx(Heading, { ref: ref, className: componentClassName, ...otherProps, children: children }));
+const baseClass = "af-title";
+export const Title = forwardRef(({ className, classModifier, children, heading: Heading = "h2", contentLeft, contentRight, ...otherProps }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, baseClass);
+    return (_jsxs("div", { className: `${baseClass}--container`, children: [_jsxs(Heading, { ref: ref, className: componentClassName, ...otherProps, children: [children, contentLeft] }), contentRight ? (_jsx("div", { className: "content-right", children: contentRight })) : null] }));
 });
 Title.displayName = "Title";

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
+import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
 export { Action } from "./Action/Action";
 export { Alert } from "./Alert/Alert";
@@ -8,7 +10,7 @@ export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Ch
 export { Choice, ChoiceInput } from "./Form/Choice";
 export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
-export { File, FileInput, FileTable } from "./Form/File";
+export { File, FileInput, FileTable, type FilePreview } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
 export { Pass, PassInput } from "./Form/Pass";
@@ -17,8 +19,10 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Footer } from "./Layout/Footer";
-export { Header, HeaderTitle, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Link, type LinkProps } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Step, StepBase, Steps } from "./Steps";

package/dist/index.js

@@ -1,4 +1,6 @@
+import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
+import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
 import "@fontsource/source-sans-pro";
 export { Action } from "./Action/Action";
 export { Alert } from "./Alert/Alert";
@@ -17,8 +19,10 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { NestedQuestion } from "./Form/NestedQuestion/NestedQuestion";
 export { Footer } from "./Layout/Footer";
-export { Header, HeaderTitle, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Header, HeaderTitle, Infos, MenuTitleWrapper, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, ToggleButton, User, } from "./Layout/Header";
+export { Link } from "./Link/Link";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Step, StepBase, Steps } from "./Steps";

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "1.1.1-alpha.2",
+  "version": "1.1.1-alpha.204",
   "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
     },
     "./utilities": {
-      "import": "./dist/utilities.js",
-      "types": "./dist/utilities.d.ts"
+      "default": {
+        "import": "./dist/utilities.js",
+        "types": "./dist/utilities.d.ts"
+      }
     }
   },
   "files": [
@@ -19,18 +25,14 @@
     "prebuild": "rimraf dist",
     "build": "tsc -p tsconfig.build.json",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
-    "start:storybook": "storybook dev -p 6007",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
     "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
-    "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx)\" --check",
-    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx)\" --write",
-    "tsc": "tsc --noEmit",
+    "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx)\" --check --ignore-unknown",
+    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx)\" --write --ignore-unknown",
+    "check-types": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:ci": "vitest run --coverage",
-    "chromatic": "npx chromatic"
+    "test:ci": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -45,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "1.1.1-alpha.2",
+    "@axa-fr/design-system-slash-css": "1.1.1-alpha.204",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -55,8 +57,8 @@
     }
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.2",
-    "@fontsource/source-sans-pro": "^5.0.8",
+    "@floating-ui/react": "^0.27.8",
+    "@fontsource/source-sans-pro": "^5.2.5",
     "@tanem/svg-injector": "^10.1.68",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
@@ -64,12 +66,32 @@
     "react-dropzone": "^11.5.3",
     "react-select": "^5.9.0"
   },
+  "devDependencies": {
+    "@axa-fr/design-system-slash-css": "*",
+    "@axa-fr/eslint-config-design-system": "*",
+    "@axa-fr/prettier-config-design-system": "*",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/dompurify": "^3.0.5",
+    "@types/jest": "^29.5.14",
+    "@types/jest-axe": "^3.5.9",
+    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
+    "copyfiles": "^2.4.1",
+    "jest-axe": "^9.0.0",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "vitest": "^3.0.7"
+  },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
-    "*.(ts|tsx)": "tsc-files --noEmit",
-    "*.mdx": "prettier --write"
+    "*.(ts|tsx)": "tsc-files --noEmit"
   },
+  "prettier": "@axa-fr/prettier-config-design-system",
   "volta": {
     "extends": "../../package.json"
   }
-}
+}