allaw-ui 1.0.167 → 1.0.170

package/dist/components/atoms/typography/Link.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface LinkProps {
+    variant: "bold" | "semiBold" | "medium";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    text: React.ReactNode;
+    maxLines?: number;
+    maxChars?: number;
+    size?: "default" | "small";
+    className?: string;
+    onClick?: () => void;
+}
+declare const Link: React.FC<LinkProps>;
+export default Link;

package/dist/components/atoms/typography/Link.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import styles from "./Link.module.css";
+import { convertToHtml } from "../../../utils/utils";
+var Link = function (_a) {
+    var variant = _a.variant, color = _a.color, text = _a.text, maxLines = _a.maxLines, maxChars = _a.maxChars, _b = _a.size, size = _b === void 0 ? "default" : _b, className = _a.className, onClick = _a.onClick;
+    var truncateText = function (text, maxChars) {
+        if (text.length <= maxChars)
+            return text;
+        return text.slice(0, maxChars) + "...";
+    };
+    var htmlText = convertToHtml(text);
+    var truncatedText = maxChars ? truncateText(htmlText, maxChars) : htmlText;
+    var isClickable = typeof onClick === "function";
+    var colorClassName = color ? "color-".concat(color) : "";
+    return (React.createElement("div", { className: "".concat(styles.link, " ").concat(styles[variant], " ").concat(size === "small" ? styles["link-small"] : "", " ").concat(className || "", " ").concat(isClickable ? styles.pointer : "", " ").concat(styles[colorClassName]), style: __assign({ whiteSpace: "pre-line" }, (maxLines
+            ? {
+                WebkitLineClamp: maxLines,
+                display: "-webkit-box",
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+            }
+            : {})), onClick: onClick, dangerouslySetInnerHTML: { __html: truncatedText } }));
+};
+export default Link;

package/dist/components/atoms/typography/Link.module.css

@@ -0,0 +1,60 @@
+@import "../../../styles/colors.module.css";
+
+.link {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 1rem;
+  line-height: normal;
+}
+
+.link-small {
+  font-size: 0.875rem;
+}
+
+.link.bold {
+  font-weight: 700;
+}
+
+.link.semiBold {
+  font-weight: 600;
+}
+
+.link.medium {
+  font-weight: 400;
+}
+
+.link.color-bleu-allaw {
+  color: var(--bleu-allaw);
+}
+
+.link.color-mid-grey {
+  color: var(--mid-grey);
+}
+
+.link.color-dark-grey {
+  color: var(--dark-grey);
+}
+
+.link.color-noir {
+  color: var(--noir);
+}
+
+.link.color-pure-white {
+  color: var(--pure-white);
+}
+
+.link.color-grey-venom {
+  color: var(--grey-venom);
+}
+
+.link.color-venom-grey-dark {
+  color: var(--venom-grey-dark);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.pointer:hover {
+  cursor: pointer;
+}

package/dist/components/atoms/typography/Link.stories.d.ts

@@ -0,0 +1,57 @@
+declare namespace _default {
+    export let title: string;
+    export { Link as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace variant {
+            namespace control {
+                let type: string;
+                let options: string[];
+            }
+        }
+        namespace color {
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_1 as control };
+        }
+        namespace text {
+            let control_2: string;
+            export { control_2 as control };
+        }
+        namespace size {
+            export namespace control_3 {
+                let type_2: string;
+                export { type_2 as type };
+                let options_2: string[];
+                export { options_2 as options };
+            }
+            export { control_3 as control };
+        }
+        namespace onClick {
+            let action: string;
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Bold: any;
+export const SemiBold: any;
+export const Medium: any;
+export const BoldSmall: any;
+export const SemiBoldSmall: any;
+export const MediumSmall: any;
+export const ClickableLink: any;
+import Link from "./Link";

package/dist/components/atoms/typography/Link.stories.js

@@ -0,0 +1,105 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import Link from "./Link";
+import "../../../styles/global.css";
+export default {
+    title: "Components/UI-Variables/Typography/Link",
+    component: Link,
+    tags: ["autodocs"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: ["bold", "semiBold", "medium"],
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+                options: ["bleu-allaw", "mid-grey", "dark-grey", "noir", "pure-white"],
+            },
+        },
+        text: {
+            control: "text",
+        },
+        size: {
+            control: {
+                type: "select",
+                options: ["default", "small"],
+            },
+        },
+        onClick: { action: "clicked" },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) { return React.createElement(Link, __assign({}, args)); };
+export var Bold = Template.bind({});
+Bold.args = {
+    variant: "bold",
+    color: "noir",
+    text: "Open Sans - Bold - 16px",
+    size: "default",
+};
+export var SemiBold = Template.bind({});
+SemiBold.args = {
+    variant: "semiBold",
+    color: "noir",
+    text: "Open Sans - SemiBold - 16px",
+    size: "default",
+};
+export var Medium = Template.bind({});
+Medium.args = {
+    variant: "medium",
+    color: "noir",
+    text: "Open Sans - Medium - 16px",
+    size: "default",
+};
+export var BoldSmall = Template.bind({});
+BoldSmall.args = {
+    variant: "bold",
+    color: "noir",
+    text: "Open Sans - Bold - 12px",
+    size: "small",
+};
+export var SemiBoldSmall = Template.bind({});
+SemiBoldSmall.args = {
+    variant: "semiBold",
+    color: "noir",
+    text: "Open Sans - SemiBold - 12px",
+    size: "small",
+};
+export var MediumSmall = Template.bind({});
+MediumSmall.args = {
+    variant: "medium",
+    color: "noir",
+    text: "Open Sans - Medium - 12px",
+    size: "small",
+};
+export var ClickableLink = Template.bind({});
+ClickableLink.args = {
+    variant: "semiBold",
+    color: "bleu-allaw",
+    text: "Cliquez sur moi",
+    size: "small",
+    onClick: function () { return console.log("Linke cliqué"); },
+};

package/dist/components/atoms/typography/index.d.ts

@@ -1,10 +1,12 @@
 export { default as Heading } from "./Heading";
 export { default as Paragraph } from "./Paragraph";
+export { default as Link } from "./Link";
 export { default as SmallTitle } from "./SmallTitle";
 export { default as Subtitle } from "./Subtitle";
 export { default as TinyInfo } from "./TinyInfo";
 export type { HeadingProps } from "./Heading";
 export type { ParagraphProps } from "./Paragraph";
+export type { LinkProps } from "./Link";
 export type { SmallTitleProps } from "./SmallTitle";
 export type { SubtitleProps } from "./Subtitle";
 export type { TinyInfoProps } from "./TinyInfo";

package/dist/components/atoms/typography/index.js

@@ -1,5 +1,6 @@
 export { default as Heading } from "./Heading";
 export { default as Paragraph } from "./Paragraph";
+export { default as Link } from "./Link";
 export { default as SmallTitle } from "./SmallTitle";
 export { default as Subtitle } from "./Subtitle";
 export { default as TinyInfo } from "./TinyInfo";

package/dist/components/molecules/contactCard/ContactCard.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "./ContactCard.css";
 export interface ContactCardProps {
     name: string;
     status: string;
@@ -10,6 +9,7 @@ export interface ContactCardProps {
     onClick?: () => void;
     gender: "male" | "female";
     actionIconName?: string;
+    clientLabel?: string;
 }
 declare const ContactCard: React.FC<ContactCardProps>;
 export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.js

@@ -1,33 +1,33 @@
 import React from "react";
-import "./ContactCard.css";
+import styles from "./contactCard.module.css";
 import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import IconButton from "../../atoms/buttons/IconButton";
 import Link from "next/link";
 var ContactCard = function (_a) {
-    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, onClick = _a.onClick, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
+    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, isEditable = _a.isEditable, onEdit = _a.onEdit, onClick = _a.onClick, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b, clientLabel = _a.clientLabel;
     var isPhoneEmpty = !phone || phone.trim() === "";
     var isEmailEmpty = !email || email.trim() === "";
-    return (React.createElement("div", { className: "contact-card", onClick: function () { return onClick && onClick(); }, style: { cursor: "pointer" } },
-        React.createElement("div", { className: "content-container" },
-            React.createElement("div", { className: "name-tag-container" },
-                React.createElement("h3", { className: "contact-name" }, name),
+    var defaultClientLabel = gender === "male" ? "Client" : "Cliente";
+    var displayClientLabel = clientLabel || "".concat(defaultClientLabel, " de l'\u00E9tude");
+    return (React.createElement("div", { className: styles.contactCard, onClick: function () { return onClick && onClick(); }, style: { cursor: "pointer" } },
+        React.createElement("div", { className: styles.contentContainer },
+            React.createElement("div", { className: styles.nameTagContainer },
+                React.createElement("h3", { className: styles.contactName }, name),
                 React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
-            React.createElement("div", { className: "info-container" },
-                React.createElement("div", { className: "info-item" },
-                    React.createElement("i", { className: "allaw-icon-user info-icon" }),
-                    React.createElement("span", { className: "info-text" },
-                        gender === "male" ? "Client" : "Cliente",
-                        " de l'\u00E9tude")),
-                React.createElement("div", { className: "telephone-email-items" },
-                    React.createElement("div", { className: "info-item" },
-                        React.createElement("i", { className: "allaw-icon-phone info-icon ".concat(isPhoneEmpty ? "info-icon-disabled" : "") }),
-                        React.createElement("span", { className: "info-text contact ".concat(isPhoneEmpty ? "empty-field" : "") }, isPhoneEmpty ? "Non renseigné" : React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone))),
-                    React.createElement("div", { className: "info-item" },
-                        React.createElement("i", { className: "allaw-icon-mail info-icon ".concat(isEmailEmpty ? "info-icon-disabled" : "") }),
-                        React.createElement("span", { className: "info-text contact ".concat(isEmailEmpty ? "empty-field" : "") }, isEmailEmpty ? "Non renseigné" : React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email)))))),
-        isEditable && (React.createElement("div", { className: "action-button-container" },
+            React.createElement("div", { className: styles.infoContainer },
+                React.createElement("div", { className: styles.infoItem },
+                    React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
+                    React.createElement("span", { className: styles.infoText }, displayClientLabel)),
+                React.createElement("div", { className: styles.telephoneEmailItems },
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-phone ".concat(styles.infoIcon, " ").concat(isPhoneEmpty ? styles.infoIconDisabled : "") }),
+                        React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isPhoneEmpty ? styles.emptyField : "") }, isPhoneEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "tel:".concat(phone) }, phone)))),
+                    React.createElement("div", { className: styles.infoItem },
+                        React.createElement("i", { className: "allaw-icon-mail ".concat(styles.infoIcon, " ").concat(isEmailEmpty ? styles.infoIconDisabled : "") }),
+                        React.createElement("span", { className: "".concat(styles.infoText, " ").concat(styles.contact, " ").concat(isEmailEmpty ? styles.emptyField : "") }, isEmailEmpty ? ("Non renseigné") : (React.createElement(Link, { style: { color: "#171E25", textDecoration: "underline" }, href: "mailTo:".concat(email) }, email))))))),
+        isEditable && (React.createElement("div", { className: styles.actionButtonContainer },
             React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit }))),
-        onClick && (React.createElement("div", { className: "action-button-container" },
-            React.createElement("i", { className: "allaw-icon-arrow-right" })))));
+        onClick && (React.createElement("div", { className: styles.actionButtonContainer },
+            React.createElement("i", { className: "allaw-icon-right ".concat(styles.infoIcon) })))));
 };
 export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.stories.d.ts

@@ -37,6 +37,12 @@ declare namespace _default {
             export { control_6 as control };
             export let description: string;
         }
+        namespace clientLabel {
+            let control_7: string;
+            export { control_7 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
     }
     export namespace args {
         let name_1: string;
@@ -53,6 +59,8 @@ declare namespace _default {
         export { gender_1 as gender };
         let actionIconName_1: string;
         export { actionIconName_1 as actionIconName };
+        let clientLabel_1: string;
+        export { clientLabel_1 as clientLabel };
     }
     export namespace parameters {
         namespace backgrounds {
@@ -71,4 +79,5 @@ export const Editable: any;
 export const WithCustomIcon: any;
 export const EmptyFields: any;
 export const PartiallyEmpty: any;
+export const CustomClientLabel: any;
 import ContactCard from "./ContactCard";

package/dist/components/molecules/contactCard/ContactCard.stories.js

@@ -33,6 +33,10 @@ export default {
             control: "text",
             description: "Nom de l'icône pour le bouton d'action",
         },
+        clientLabel: {
+            control: "text",
+            description: "Texte personnalisé pour 'Client/Cliente de l'étude'",
+        },
     },
     args: {
         name: "Jane DOE",
@@ -42,6 +46,7 @@ export default {
         isEditable: false,
         gender: "female",
         actionIconName: "allaw-icon-edit-2",
+        clientLabel: "", // Valeur par défaut vide
     },
     parameters: {
         backgrounds: {
@@ -75,3 +80,7 @@ PartiallyEmpty.args = {
     phone: "06 12 34 56 78",
     email: "",
 };
+export var CustomClientLabel = Template.bind({});
+CustomClientLabel.args = {
+    clientLabel: "Utilisateur professionnel",
+};

package/dist/components/molecules/contactCard/{ContactCard.css → contactCard.module.css}

@@ -1,6 +1,6 @@
 @import "../../../styles/colors.css";
 
-.contact-card {
+.contactCard {
   font-family: "Open Sans", sans-serif;
   border-radius: 16px;
   border: 1px solid var(--venom-grey, #e6edf5);
@@ -16,14 +16,14 @@
   background: var(--Primary-Blanc, #fff);
 }
 
-.content-container {
+.contentContainer {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 24px;
 }
 
-.name-tag-container {
+.nameTagContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -32,7 +32,7 @@
   padding-left: 2px;
 }
 
-.contact-name {
+.contactName {
   color: var(--Primary-Mid-black, #171e25);
   font-family: Poppins;
   font-size: 24px;
@@ -41,7 +41,7 @@
   line-height: 24px;
 }
 
-.info-container {
+.infoContainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -49,13 +49,13 @@
   padding-left: 6px;
 }
 
-.info-item {
+.infoItem {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.info-icon {
+.infoIcon {
   width: 24px;
   height: 24px;
   color: #25beeb;
@@ -65,11 +65,11 @@
   align-items: center;
 }
 
-.info-icon-disabled {
+.infoIconDisabled {
   color: var(--Tags-Mid-grey, #728ea7);
 }
 
-.info-text {
+.infoText {
   color: var(--Primary-Mid-black, #171e25);
   font-family: "Open Sans";
   font-size: 16px;
@@ -78,12 +78,12 @@
   line-height: normal;
 }
 
-.info-text.contact.empty-field {
+.infoText.contact.emptyField {
   color: var(--Tags-Mid-grey, #728ea7);
   font-style: italic;
 }
 
-.telephone-email-items {
+.telephoneEmailItems {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -92,7 +92,7 @@
 }
 
 @media (max-width: 800px) {
-  .telephone-email-items {
+  .telephoneEmailItems {
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
@@ -100,16 +100,16 @@
 }
 
 @media (max-width: 600px) {
-  .content-container {
+  .contentContainer {
     flex-direction: column;
   }
-  .name-tag-container {
+  .nameTagContainer {
     align-items: flex-start;
     width: 100%;
   }
 }
 
-.action-button-container {
+.actionButtonContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -119,7 +119,7 @@
 }
 
 @media (max-width: 450px) {
-  .action-button-container {
+  .actionButtonContainer {
     display: block;
     position: absolute;
     top: 24px;
@@ -128,7 +128,7 @@
   }
 }
 
-.empty-field {
+.emptyField {
   color: var(--Tags-Mid-grey, #728ea7) !important;
   font-style: italic;
 }

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { default as FolderStatusTag } from "./components/atoms/tags/FolderStatus
 export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTag";
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as Link } from "./components/atoms/typography/Link";
 export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
 export { default as Subtitle } from "./components/atoms/typography/Subtitle";
 export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";

package/dist/index.js

@@ -39,6 +39,7 @@ export { default as OtherStatusTag } from "./components/atoms/tags/OtherStatusTa
 // Typography
 export { default as Heading } from "./components/atoms/typography/Heading";
 export { default as Paragraph } from "./components/atoms/typography/Paragraph";
+export { default as Link } from "./components/atoms/typography/Link";
 export { default as SmallTitle } from "./components/atoms/typography/SmallTitle";
 export { default as Subtitle } from "./components/atoms/typography/Subtitle";
 export { default as TinyInfo } from "./components/atoms/typography/TinyInfo";

package/dist/stories/Header.stories.d.ts

@@ -7,9 +7,9 @@ declare const meta: {
         layout: string;
     };
     args: {
-        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogin: import("@vitest/spy").Mock<[], void>;
+        onLogout: import("@vitest/spy").Mock<[], void>;
+        onCreateAccount: import("@vitest/spy").Mock<[], void>;
     };
 };
 export default meta;

package/dist/styles/colors.module.css

@@ -1,44 +1,107 @@
-:root {
-    /* Primary colors */
-    --bleu-allaw: #25beeb;
-    --mid-grey: #728ea7;
-    --dark-grey: #456073;
-    --noir: #171e25;
-    --pure-white: #ffffff;
-  
-    /* Greyscale */
-    --grey-venom: #e6edf5;
-    --venom-grey-dark: #d1dce8;
-    --grey-light: #f6fcfe;
-    --grey-light-2: #f2f8fc;
-    --active-grey: #e9eef5;
-    --blue-lightning: #f6fcfe;
-    --fond-de-selection: #f6fcfe;
-    --lightSteelBlue: #a2b5c8;
-  
-    /* Tag colors */
-    --tag-white: #eef5fc;
-    --green-tag-dark: #29a36a;
-    --green-tag-light: #daf6e9;
-    --red-tag-dark: #e15151;
-    --red-tag-light: #fdf2f2;
-    --blue-tag-dark: #1985e8;
-    --blue-tag-light: #daebfb;
-    --gris-clair: #dee8f2;
-  
-    /* Actions */
-    --actions-valid: #29a36a;
-    --actions-error: #e15151;
-  
-    /* Background */
-    --background-pro: #fcfdfd;
-    --background-usager: #ffffff;
-  }
-  
-  .bgBleuAllaw {
-    background-color: var(--bleu-allaw);
-  }
-  
-  .textMidGrey {
-    color: var(--mid-grey);
-  }
+.bgBleuAllaw {
+  background-color: var(--bleu-allaw);
+}
+
+.textMidGrey {
+  color: var(--mid-grey);
+}
+
+.bleuAllaw {
+  --bleu-allaw: #25beeb;
+}
+
+.midGrey {
+  --mid-grey: #728ea7;
+}
+
+.darkGrey {
+  --dark-grey: #456073;
+}
+
+.noir {
+  --noir: #171e25;
+}
+
+.pureWhite {
+  --pure-white: #ffffff;
+}
+
+.greyVenom {
+  --grey-venom: #e6edf5;
+}
+
+.venomGreyDark {
+  --venom-grey-dark: #d1dce8;
+}
+
+.greyLight {
+  --grey-light: #f6fcfe;
+}
+
+.greyLight2 {
+  --grey-light-2: #f2f8fc;
+}
+
+.activeGrey {
+  --active-grey: #e9eef5;
+}
+
+.blueLightning {
+  --blue-lightning: #f6fcfe;
+}
+
+.fondDeSelection {
+  --fond-de-selection: #f6fcfe;
+}
+
+.lightSteelBlue {
+  --lightSteelBlue: #a2b5c8;
+}
+
+.tagWhite {
+  --tag-white: #eef5fc;
+}
+
+.greenTagDark {
+  --green-tag-dark: #29a36a;
+}
+
+.greenTagLight {
+  --green-tag-light: #daf6e9;
+}
+
+.redTagDark {
+  --red-tag-dark: #e15151;
+}
+
+.redTagLight {
+  --red-tag-light: #fdf2f2;
+}
+
+.blueTagDark {
+  --blue-tag-dark: #1985e8;
+}
+
+.blueTagLight {
+  --blue-tag-light: #daebfb;
+}
+
+.grisClair {
+  --gris-clair: #dee8f2;
+}
+
+.actionsValid {
+  --actions-valid: #29a36a;
+}
+
+.actionsError {
+  --actions-error: #e15151;
+}
+
+.backgroundPro {
+  --background-pro: #fcfdfd;
+}
+
+.backgroundUsager {
+  --background-usager: #ffffff;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "1.0.167",
+  "version": "1.0.170",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",