@axa-fr/design-system-slash-react 2.0.6-alpha.15 → 2.0.6-alpha.22

package/dist/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
+import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.css";
 import React from "react";
 import { CollapseProps } from "./CollapseCard";
 import { AccordionVariant, TDefaultProps } from "./types";

package/dist/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
+import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.css";
 import { useId } from "react";
 import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
 import { CollapseCard } from "./CollapseCard";

package/dist/Action/Action.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Action/Action.scss";
+import "@axa-fr/design-system-slash-css/dist/Action/Action.css";
 export declare const Action: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     icon: string;
     classModifier?: string;

package/dist/Action/Action.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Action/Action.scss";
+import "@axa-fr/design-system-slash-css/dist/Action/Action.css";
 import { forwardRef } from "react";
 import { getComponentClassName } from "../utilities";
 export const Action = forwardRef(({ icon, className, classModifier, ...otherProps }, ref) => {

package/dist/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from "react";
 import classNames from "classnames";
+import { forwardRef, } from "react";
 import "@axa-fr/design-system-slash-css/dist/Button/Button.css";
 const DEFAULT_CLASS_NAME = "af-btn";
 export const Button = forwardRef(({ variant = "primary", small, leftIcon, rightIcon, className, children, ...props }, ref) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, variant !== "primary" && `${DEFAULT_CLASS_NAME}--${variant}`, small && `${DEFAULT_CLASS_NAME}--small`, className), ...props, ref: ref, children: [leftIcon, children, rightIcon] })));

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

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.css";
 declare const CheckboxItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
     classModifier?: string;
     optionClassName?: string;

package/dist/Form/Checkbox/CheckboxItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import check from "@material-symbols/svg-700/sharp/check.svg";
 import { forwardRef, useId } from "react";
 import { getOptionClassName } from "../core";
-import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.css";
 import { Svg } from "../../Svg";
 const CheckboxItem = forwardRef(({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, ...otherProps }, inputRef) => {
     const newLabel = children || label;

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Date/Date.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Date/Date.css";
 import { ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "value"> & {
     classModifier?: string;

package/dist/Form/Date/Date.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Date/Date.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Date/Date.css";
 import { forwardRef } from "react";
 import { getComponentClassName } from "../../utilities";
 import { formatDateInputValue } from "../../utilities/helpers/date";

package/dist/Form/Experimental/index.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/File/File.css";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { File } from "./File";

package/dist/Form/File/FileInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/File/File.css";
 import { useId } from "react";
 import { Field } from "../core";
 import { File } from "./File";

package/dist/Form/MultiSelect/MultiSelect.d.ts

@@ -1,6 +1,6 @@
+import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.css";
 import { type GroupBase } from "react-select";
 import { AsyncProps } from "react-select/async";
-import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 type Option = {
     value: string;
     label: string;

package/dist/Form/MultiSelect/MultiSelect.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.css";
 import { useId } from "react";
 import Select from "react-select";
 import AsyncSelect from "react-select/async";
-import { ValueContainer } from "./ValueContainer";
-import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
 import { formatOptionLabel } from "./FormatOptionLabel";
-import { useMultiSelectStyle } from "./useMultiSelectStyle";
 import { noOptionsMessage } from "./NoOptionsMessage";
+import { useMultiSelectStyle } from "./useMultiSelectStyle";
+import { ValueContainer } from "./ValueContainer";
 const MultiSelect = ({ id, name, loadOptions, values, options, value, onChange, onBlur, placeholder = "- Sélectionner -", className = "react-select", disabled, loadingMessage = () => "Chargement...", isMulti, selectedLimit, selectedLimitLabel, ...otherProps }) => {
     const { styles } = useMultiSelectStyle();
     const generatedId = useId();

package/dist/Form/MultiSelect/MultiSelectInput.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.css";
 import { type ComponentProps } from "react";
 import { ConsumerFieldProps } from "../core";
 import { MultiSelect } from "./MultiSelect";

package/dist/Form/MultiSelect/MultiSelectInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.css";
 import { Field } from "../core";
 import { MultiSelect } from "./MultiSelect";
 const MultiSelectInput = ({ label, children, ...multiSelectProps }) => {

package/dist/Form/NestedQuestion/NestedQuestion.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/NestedQuestion/NestedQuestion.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/NestedQuestion/NestedQuestion.css";
 import { PropsWithChildren } from "react";
 export declare const NestedQuestion: ({ children, className, }: {
     className?: string;

package/dist/Form/NestedQuestion/NestedQuestion.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/NestedQuestion/NestedQuestion.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/NestedQuestion/NestedQuestion.css";
 import { getComponentClassName } from "../../utilities";
 export const NestedQuestion = ({ children, className, }) => {
     const componentClassName = getComponentClassName(className, "", "af-form__nested-question");

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.css";
 import { ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
     classModifier?: string;

package/dist/Form/Number/Number.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.css";
 import { forwardRef, useId } from "react";
 import { getComponentClassName } from "../../utilities";
 const Number = forwardRef(({ id, className, classModifier, required, ...otherProps }, inputRef) => {

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

@@ -1,6 +1,3 @@
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { ComponentPropsWithRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Number } from "./Number";

package/dist/Form/Number/NumberInput.js

@@ -1,7 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
 import { Field } from "../core";
 import { Number } from "./Number";
 export const NumberInput = ({ children, ...props }) => {

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from "react";
-import "@axa-fr/design-system-slash-css/dist/Form/Pass/Pass.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Pass/Pass.css";
 type Props = Omit<ComponentPropsWithRef<"input">, "type" | "role"> & {
     type?: "text" | "password";
     classModifier?: string;

package/dist/Form/Pass/Pass.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getComponentClassName } from "../../utilities";
-import "@axa-fr/design-system-slash-css/dist/Form/Pass/Pass.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Pass/Pass.css";
 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/Form/Radio/RadioItem.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Radio/Radio.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/Radio.css";
 import { ComponentPropsWithRef, ReactNode } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "checked" | "type"> & {
     classModifier?: string;

package/dist/Form/Radio/RadioItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Radio/Radio.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/Radio.css";
 import { forwardRef, useId } from "react";
 import { getOptionClassName } from "../core";
 const RadioItem = forwardRef(({ value = "", id, isChecked, label, classModifier = "", className = "", disabled = false, ...otherProps }, inputRef) => {

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Select/Select.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Select/Select.css";
 import { OptionHTMLAttributes } from "react";
 /**
  * @deprecated Use Select instead

package/dist/Form/Select/SelectBase.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Select/Select.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Select/Select.css";
 import { forwardRef, } from "react";
 import { getComponentClassName } from "../../utilities";
 /**

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

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Slider/Slider.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Slider/Slider.css";
 export { Slider } from "./Slider";
 export { SliderInput } from "./SliderInput";

package/dist/Form/Slider/index.js

@@ -1,3 +1,3 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Slider/Slider.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Slider/Slider.css";
 export { Slider } from "./Slider";
 export { SliderInput } from "./SliderInput";

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.css";
 import { ComponentPropsWithRef } from "react";
 type Props = ComponentPropsWithRef<"input"> & {
     classModifier?: string;

package/dist/Form/Text/Text.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Text/Text.css";
 import { forwardRef } from "react";
 import { getComponentClassName } from "../../utilities";
 const Text = forwardRef(({ className, classModifier, required, ...otherProps }, inputRef) => {

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Textarea/Textarea.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Textarea/Textarea.css";
 declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     classModifier?: string;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Form/Textarea/Textarea.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Textarea/Textarea.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Textarea/Textarea.css";
 import { forwardRef, useId } from "react";
 import { getComponentClassName } from "../../utilities";
 const Textarea = forwardRef(({ id, className, classModifier, ...otherProps }, inputRef) => {

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

@@ -1,6 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Textarea/Textarea.css";
 import { ComponentProps } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Textarea } from "./Textarea";

package/dist/Form/Textarea/TextareaInput.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
-import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
+import "@axa-fr/design-system-slash-css/dist/Form/Textarea/Textarea.css";
 import { forwardRef } from "react";
 import { Field } from "../core";
 import { Textarea } from "./Textarea";

package/dist/HelpButton/index.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Action/Action.scss";
+import "@axa-fr/design-system-slash-css/dist/Action/Action.css";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Popover } from "../Popover";
 type HelpProps = Omit<ComponentPropsWithoutRef<typeof Popover>, "popoverElement"> & {

package/dist/HelpButton/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Action/Action.scss";
+import "@axa-fr/design-system-slash-css/dist/Action/Action.css";
 import { Popover } from "../Popover";
 import { getComponentClassName } from "../utilities";
 export const HelpButton = ({ className, classModifier, children, mode = "click", placement = "right", helpButtonContent = _jsx("span", { className: "af-more-help", children: "i" }), }) => {

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

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Header.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Header.css";
+import { type ReactNode } from "react";
 type Props = {
     children: ReactNode;
     classModifier?: string;

package/dist/Layout/Header/Header.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Header.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Header.css";
 import classNames from "classnames";
 import { getComponentClassName } from "../../utilities";
 const defaultClassName = "af-header";

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

@@ -1,5 +1,5 @@
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.css";
 import { ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
 import { AnchorNavBarItem } from "../AnchorNavBar/AnchorNavBar";
 type Props = {
     children?: ReactNode;

package/dist/Layout/Header/HeaderTitle/HeaderTitle.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.css";
 import classNames from "classnames";
+import { Action } from "../../../Action/Action";
 import { getComponentClassName } from "../../../utilities";
+import { AnchorNavBar } from "../AnchorNavBar/AnchorNavBar";
 import { ToggleButton } from "../ToggleButton/ToggleButton";
-import { Action } from "../../../Action/Action";
 import { getClassModifier } from "./HeaderTitle.helpers";
-import { AnchorNavBar } from "../AnchorNavBar/AnchorNavBar";
 const defaultClassName = "af-title-bar";
 const HeaderTitle = ({ children, classModifier, className, isSticky = true, contentLeft, contentRight, subtitle, title, toggleMenu, anchorNavBarItems, }) => {
     const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);

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

@@ -1,6 +1,6 @@
-import { MouseEvent } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Name/Name.scss";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Logo/Logo.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Logo/Logo.css";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Name/Name.css";
+import { type MouseEvent } from "react";
 type Props = {
     alt?: string;
     classModifier?: string;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Name/Name.scss";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/Logo/Logo.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Logo/Logo.css";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/Name/Name.css";
 import { getComponentClassName } from "../../../utilities";
 const defaultClassName = "af-header__name";
 const Name = ({ alt = "logo", classModifier, className, img, onClick, subtitle, title, }) => {

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.css";
 import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export { NavBar } from "./NavBar";
 export { NavBarBase } from "./NavBarBase";

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/NavBar/NavBar.css";
 import "@axa-fr/design-system-slash-css/dist/common/breakpoints.css";
 export { NavBar } from "./NavBar";
 export { NavBarBase } from "./NavBarBase";

package/dist/Loader/Loader.d.ts

@@ -1,11 +1,11 @@
-import "@axa-fr/design-system-slash-css/dist/Loader/Loader.scss";
-import React from "react";
+import "@axa-fr/design-system-slash-css/dist/Loader/Loader.css";
+import { type ReactNode } from "react";
 type LoaderMode = "none" | "get" | "post" | "delete" | "update" | "error";
 type LoaderProps = {
     className?: string;
     mode: LoaderMode;
     text?: string;
-    children: React.ReactNode;
+    children: ReactNode;
     classModifier?: string;
 };
 export declare const Loader: ({ className, text, children, classModifier, mode, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Loader/Loader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Loader/Loader.scss";
+import "@axa-fr/design-system-slash-css/dist/Loader/Loader.css";
 import { getComponentClassName } from "../utilities";
 const getText = (index) => {
     switch (index) {

package/dist/ModalAgent/index.d.ts

@@ -1,7 +1,7 @@
-import "@axa-fr/design-system-slash-css/dist/Modal/Modal.scss";
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.css";
 export { BooleanModal } from "./BooleanModal";
-export { Modal } from "./Modal";
 export { Body as ModalBody } from "./components/Body";
 export { Footer as ModalFooter } from "./components/Footer";
 export { Header as ModalHeader } from "./components/Header";
 export { HeaderBase as ModalHeaderBase } from "./components/HeaderBase";
+export { Modal } from "./Modal";

package/dist/ModalAgent/index.js

@@ -1,7 +1,7 @@
-import "@axa-fr/design-system-slash-css/dist/Modal/Modal.scss";
+import "@axa-fr/design-system-slash-css/dist/Modal/Modal.css";
 export { BooleanModal } from "./BooleanModal";
-export { Modal } from "./Modal";
 export { Body as ModalBody } from "./components/Body";
 export { Footer as ModalFooter } from "./components/Footer";
 export { Header as ModalHeader } from "./components/Header";
 export { HeaderBase as ModalHeaderBase } from "./components/HeaderBase";
+export { Modal } from "./Modal";

package/dist/Popover/PopoverBase.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 import { Placement } from "@floating-ui/react";
-import "@axa-fr/design-system-slash-css/dist/Popover/Popover.scss";
+import React from "react";
+import "@axa-fr/design-system-slash-css/dist/Popover/Popover.css";
 type Props = {
     placement?: Placement;
     className?: string;

package/dist/Popover/PopoverBase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatedPopover } from "./AnimatedPopover";
-import "@axa-fr/design-system-slash-css/dist/Popover/Popover.scss";
+import "@axa-fr/design-system-slash-css/dist/Popover/Popover.css";
 const defaultClassName = "af-popover__container";
 const PopoverBase = ({ children, isOpen, placement = "right", className = defaultClassName, classModifier, element, onMouseEnter, onMouseLeave, }) => {
     return (_jsx(AnimatedPopover, { target: children, placement: placement, isOpen: isOpen, className: className, classModifier: classModifier, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: element }));

package/dist/Restitution/Restitution.d.ts

@@ -1,4 +1,3 @@
-import "@axa-fr/design-system-slash-css/dist/Restitution/Restitution.scss";
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 export type RestitutionProps = ComponentPropsWithoutRef<"dl"> & {
     label: string;

package/dist/Restitution/Restitution.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Restitution/Restitution.scss";
 import { getComponentClassName } from "../utilities";
 export const Restitution = ({ label, children = "-", className, classModifier, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-restitution__listdef");

package/dist/Restitution/index.d.ts

@@ -1,8 +1,9 @@
+import "@axa-fr/design-system-slash-css/dist/Restitution/Restitution.css";
 export { ArticleRestitution } from "./ArticleRestitution";
 export { HeaderRestitution } from "./HeaderRestitution";
-export { SectionRestitution } from "./SectionRestitution";
-export { SectionRestitutionTitle } from "./SectionRestitutionTitle";
-export { SectionRestitutionRow } from "./SectionRestitutionRow";
-export { SectionRestitutionColumn } from "./SectionRestitutionColumn";
 export { Restitution } from "./Restitution";
 export { RestitutionList } from "./RestitutionList";
+export { SectionRestitution } from "./SectionRestitution";
+export { SectionRestitutionColumn } from "./SectionRestitutionColumn";
+export { SectionRestitutionRow } from "./SectionRestitutionRow";
+export { SectionRestitutionTitle } from "./SectionRestitutionTitle";

package/dist/Restitution/index.js

@@ -1,8 +1,9 @@
+import "@axa-fr/design-system-slash-css/dist/Restitution/Restitution.css";
 export { ArticleRestitution } from "./ArticleRestitution";
 export { HeaderRestitution } from "./HeaderRestitution";
-export { SectionRestitution } from "./SectionRestitution";
-export { SectionRestitutionTitle } from "./SectionRestitutionTitle";
-export { SectionRestitutionRow } from "./SectionRestitutionRow";
-export { SectionRestitutionColumn } from "./SectionRestitutionColumn";
 export { Restitution } from "./Restitution";
 export { RestitutionList } from "./RestitutionList";
+export { SectionRestitution } from "./SectionRestitution";
+export { SectionRestitutionColumn } from "./SectionRestitutionColumn";
+export { SectionRestitutionRow } from "./SectionRestitutionRow";
+export { SectionRestitutionTitle } from "./SectionRestitutionTitle";

package/dist/Steps/index.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
+import "@axa-fr/design-system-slash-css/dist/Steps/Steps.css";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";

package/dist/Steps/index.js

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Steps/Steps.scss";
+import "@axa-fr/design-system-slash-css/dist/Steps/Steps.css";
 export { Step } from "./Step";
 export { StepBase } from "./StepBase";
 export { Steps } from "./Steps";

package/dist/Table/Pagination/Items.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { getComponentClassName } from "../../utilities";
 import { Select } from "../../Form/Select";
+import { getComponentClassName } from "../../utilities";
 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;

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Table/Pager.scss";
+import "@axa-fr/design-system-slash-css/dist/Table/Pager.css";
 import { ComponentPropsWithoutRef } from "react";
 import { PaginationButton } from "./PaginationButton";
 export type PagerComponentProps = Pick<ComponentPropsWithoutRef<typeof PaginationButton>, "onChange"> & {

package/dist/Table/Pagination/Pager.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Table/Pager.scss";
+import "@axa-fr/design-system-slash-css/dist/Table/Pager.css";
 import { getComponentClassName } from "../..";
 import { Li } from "./Li";
 import { LiPoint } from "./LiPoint";

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Table/Paging.scss";
+import "@axa-fr/design-system-slash-css/dist/Table/Paging.css";
 import { ComponentPropsWithoutRef } from "react";
 import { Items } from "./Items";
 import { Pager } from "./Pager";

package/dist/Table/Pagination/Paging.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Table/Paging.scss";
+import "@axa-fr/design-system-slash-css/dist/Table/Paging.css";
 import { useCallback } from "react";
 import { getComponentClassName } from "../..";
 import { Items } from "./Items";

package/dist/Table/Table.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from "react";
-import "@axa-fr/design-system-slash-css/dist/Table/Table.scss";
+import "@axa-fr/design-system-slash-css/dist/Table/Table.css";
 type TableProps = ComponentPropsWithoutRef<"table"> & {
     classModifier?: string;
 };

package/dist/Table/Table.js

@@ -5,7 +5,7 @@ import { THead } from "./THead";
 import { Td } from "./Td";
 import { Th } from "./Th";
 import { Tr } from "./Tr";
-import "@axa-fr/design-system-slash-css/dist/Table/Table.scss";
+import "@axa-fr/design-system-slash-css/dist/Table/Table.css";
 const Table = ({ className, classModifier, children, ...othersProps }) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-table");
     return (_jsx("table", { className: componentClassName, ...othersProps, children: children }));

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

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.scss";
+import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.css";
 import { ReactNode } from "react";
 export type TabProps = {
     title: ReactNode;

package/dist/Tabs/components/Tab.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.scss";
+import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.css";
 const Tab = () => _jsx("span", {});
 export { Tab };

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+import "@axa-fr/design-system-slash-css/dist/Tag/Tag.css";
 import { ComponentPropsWithRef, PropsWithChildren } from "react";
 export type TagVariants = "success" | "information" | "warning" | "error" | "default" | "dark" | "purple" | "gray" | "white";
 type TagProps = ComponentPropsWithRef<"span"> & {

package/dist/Tag/Tag.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Tag/Tag.scss";
+import "@axa-fr/design-system-slash-css/dist/Tag/Tag.css";
 import { forwardRef } from "react";
 import { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
 /**

package/dist/Title/Title.d.ts

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
+import "@axa-fr/design-system-slash-css/dist/Title/Title.css";
 import { ComponentPropsWithRef, PropsWithChildren, ReactElement, ReactNode } from "react";
 type Headings = "h2" | "h3" | "h4";
 type TitleProps = ComponentPropsWithRef<"h2"> & {

package/dist/Title/Title.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Title/Title.scss";
+import "@axa-fr/design-system-slash-css/dist/Title/Title.css";
 import { forwardRef, } from "react";
 import { getComponentClassName } from "../utilities";
 const baseClass = "af-title";

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-slash-css/dist/common/grid.css";
+import "@axa-fr/design-system-slash-css/dist/common/icons.css";
+import "@axa-fr/design-system-slash-css/dist/common/reboot.css";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
+import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.css";
 import "@fontsource/source-sans-pro/400.css";
 import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";

package/dist/index.js

@@ -1,6 +1,8 @@
-import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
-import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-slash-css/dist/common/grid.css";
+import "@axa-fr/design-system-slash-css/dist/common/icons.css";
+import "@axa-fr/design-system-slash-css/dist/common/reboot.css";
 import "@axa-fr/design-system-slash-css/dist/common/tokens.css";
+import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.css";
 import "@fontsource/source-sans-pro/400.css";
 import "@fontsource/source-sans-pro/700.css";
 import { Message } from "./Messages/Message";

package/package.json

@@ -1,27 +1,24 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.6-alpha.15",
+  "version": "2.0.6-alpha.22",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "default": {
-        "import": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      }
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./utilities": {
-      "default": {
-        "import": "./dist/utilities.js",
-        "types": "./dist/utilities.d.ts"
-      }
+      "import": "./dist/utilities.js",
+      "types": "./dist/utilities.d.ts"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
+    "dev": "tsc -w -p tsconfig.build.json",
     "prebuild": "rimraf dist",
     "build": "tsc -p tsconfig.build.json",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
@@ -47,7 +44,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "2.0.6-alpha.15",
+    "@axa-fr/design-system-slash-css": "2.0.6-alpha.22",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"