allaw-ui 1.0.24 → 1.0.26

package/dist/components/atoms/buttons/SecondaryButton.css

@@ -24,6 +24,7 @@
 
 .secondary-button-enabled:hover {
   color: #25beeb;
+  border: 0px;
 }
 
 .secondary-button-enabled:active {
@@ -122,3 +123,68 @@
 .secondary-button-full-width {
   width: 100%;
 }
+
+/* Styles pour les différentes couleurs */
+.secondary-button-color-bleu-allaw {
+  border-color: var(--bleu-allaw);
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-color-mid-grey {
+  border-color: var(--mid-grey);
+  color: var(--mid-grey);
+}
+
+.secondary-button-color-dark-grey {
+  border-color: var(--dark-grey);
+  color: var(--dark-grey);
+}
+
+.secondary-button-color-noir {
+  border-color: var(--noir);
+  color: var(--noir);
+}
+
+.secondary-button-color-pure-white {
+  border-color: var(--pure-white);
+  color: var(--pure-white);
+}
+
+.secondary-button-color-actions-error {
+  border-color: var(--actions-error);
+  color: var(--actions-error);
+}
+
+.secondary-button-color-actions-valid {
+  border-color: var(--actions-valid);
+  color: var(--actions-valid);
+}
+
+/* Ajustement des icônes pour chaque couleur */
+.secondary-button-color-bleu-allaw .secondary-button-icon {
+  color: var(--bleu-allaw);
+}
+
+.secondary-button-color-mid-grey .secondary-button-icon {
+  color: var(--mid-grey);
+}
+
+.secondary-button-color-dark-grey .secondary-button-icon {
+  color: var(--dark-grey);
+}
+
+.secondary-button-color-noir .secondary-button-icon {
+  color: var(--noir);
+}
+
+.secondary-button-color-pure-white .secondary-button-icon {
+  color: var(--pure-white);
+}
+
+.secondary-button-color-actions-error .secondary-button-icon {
+  color: var(--actions-error);
+}
+
+.secondary-button-color-actions-valid .secondary-button-icon {
+  color: var(--actions-valid);
+}

package/dist/components/atoms/buttons/SecondaryButton.d.ts

@@ -9,6 +9,7 @@ export interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
     label: string;
     disabled?: boolean;
     mode?: "dark" | "light";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
     onClick?: () => Promise<void> | void;
     fullWidth?: boolean;
     type?: "button" | "submit" | "reset";

package/dist/components/atoms/buttons/SecondaryButton.js

@@ -61,10 +61,10 @@ import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "re
 import "./SecondaryButton.css";
 import "../../../styles/global.css";
 var SecondaryButton = forwardRef(function (_a, ref) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "onClick", "fullWidth", "type", "isLoading"]);
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? "button" : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "color", "onClick", "fullWidth", "type", "isLoading"]);
     var buttonRef = React.useRef(null);
-    var _g = useState(false), internalIsLoading = _g[0], setInternalIsLoading = _g[1];
-    var _h = useState(""), loadingDots = _h[0], setLoadingDots = _h[1];
+    var _h = useState(false), internalIsLoading = _h[0], setInternalIsLoading = _h[1];
+    var _j = useState(""), loadingDots = _j[0], setLoadingDots = _j[1];
     useImperativeHandle(ref, function () { return buttonRef.current; });
     var isButtonLoading = isLoading || internalIsLoading;
     useEffect(function () {
@@ -108,7 +108,7 @@ var SecondaryButton = forwardRef(function (_a, ref) {
             }
         });
     }); };
-    return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
+    return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : "", " ").concat(color ? "secondary-button-color-".concat(color) : ""), disabled: disabled, onClick: handleClick, type: type }, props),
         startIcon && (React.createElement("span", { className: "secondary-button-icon ".concat(startIconName) })),
         React.createElement("span", { className: "secondary-button-label" }, label),
         isButtonLoading ? (React.createElement("span", { className: "secondary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIconName) }))));

package/dist/components/atoms/buttons/TabNavigation.css

@@ -57,7 +57,7 @@
   height: 35px;
   padding: 12px 24px;
   border-radius: 18px;
-  border: 0px;
+  border: 1px solid var(--dark-grey, #456073);
 }
 
 .tab-navigation.tab-navigation--round .tab-item.active:hover {

package/dist/components/atoms/datepickers/Datepicker.d.ts

@@ -6,6 +6,7 @@ export interface DatepickerProps {
     value?: Date;
     onChange?: (date: Date) => void;
     placeholder?: string;
+    yearDropdownItemNumber?: number;
 }
 declare const Datepicker: React.FC<DatepickerProps>;
 export default Datepicker;

package/dist/components/atoms/datepickers/Datepicker.js

@@ -1,3 +1,14 @@
+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, { forwardRef, useState, useRef, useEffect } from "react";
 import ReactDatePicker from "react-datepicker";
 import ReactDOM from "react-dom";
@@ -8,24 +19,68 @@ import { fr } from "date-fns/locale";
 import { format } from "date-fns";
 var CustomInput = forwardRef(function (_a, ref) {
     var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
+    var _b = useState(placeholder), displayedPlaceholder = _b[0], setDisplayedPlaceholder = _b[1];
+    var containerRef = useRef(null);
+    var testRef = useRef(null);
+    useEffect(function () {
+        var checkTextFit = function () {
+            if (containerRef.current && testRef.current && placeholder) {
+                // Élément de test invisible pour mesurer la largeur réelle du texte complet
+                testRef.current.style.visibility = "hidden";
+                testRef.current.style.position = "absolute";
+                testRef.current.textContent = placeholder;
+                var containerWidth = containerRef.current.offsetWidth;
+                var textWidth = testRef.current.offsetWidth;
+                // Ajouter une marge pour l'icône et le padding (40px)
+                setDisplayedPlaceholder(textWidth + 40 > containerWidth ? "Date" : placeholder);
+            }
+        };
+        checkTextFit();
+        window.addEventListener("resize", checkTextFit);
+        return function () { return window.removeEventListener("resize", checkTextFit); };
+    }, [placeholder]);
     return (React.createElement("button", { type: "button", className: "datepicker", onClick: onClick, ref: ref },
-        React.createElement("span", { className: "datepicker-text" }, value || placeholder),
-        React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })));
+        React.createElement("span", { className: "datepicker-content", ref: containerRef },
+            React.createElement("span", { className: "datepicker-text" }, value || displayedPlaceholder),
+            React.createElement("i", { className: "datepicker-icon allaw-icon-calendar" })),
+        React.createElement("span", { className: "datepicker-test-text", ref: testRef, "aria-hidden": "true" })));
 });
 CustomInput.displayName = "CustomInput";
 var Datepicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b;
-    var _c = useState(value), selectedDate = _c[0], setSelectedDate = _c[1];
-    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    var _e = useState({ top: 0, left: 0 }), position = _e[0], setPosition = _e[1];
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c;
+    var _d = useState(value), selectedDate = _d[0], setSelectedDate = _d[1];
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState({ top: 0, left: 0 }), position = _f[0], setPosition = _f[1];
     var buttonRef = useRef(null);
     var calendarRef = useRef(null);
+    var _g = useState("bottom"), placement = _g[0], setPlacement = _g[1];
     var updatePosition = function () {
         if (buttonRef.current) {
             var rect = buttonRef.current.getBoundingClientRect();
+            var windowHeight = window.innerHeight;
+            var calendarHeight = 360; // Hauteur approximative du calendrier
+            // Vérifier s'il y a assez d'espace en dessous
+            var spaceBelow = windowHeight - rect.bottom;
+            var shouldShowBelow = spaceBelow >= calendarHeight;
+            setPlacement(shouldShowBelow ? "bottom" : "top");
+            // Calcul de la position horizontale centrée
+            var buttonCenter = rect.left + rect.width / 2;
+            var calendarWidth = 300; // Largeur du calendrier
+            var leftPosition = buttonCenter - calendarWidth / 2;
+            // Ajuster si le calendrier dépasse de l'écran
+            if (leftPosition + calendarWidth > window.innerWidth) {
+                leftPosition = window.innerWidth - calendarWidth - 16;
+            }
+            if (leftPosition < 16) {
+                leftPosition = 16;
+            }
+            // Calcul de la position verticale
+            var topPosition = shouldShowBelow
+                ? rect.bottom + window.scrollY + 8 // 8px de marge en dessous du bouton
+                : rect.top + window.scrollY - calendarHeight - 8; // 8px de marge au-dessus du bouton
             setPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
+                top: topPosition,
+                left: leftPosition + window.scrollX,
             });
         }
     };
@@ -66,12 +121,10 @@ var Datepicker = function (_a) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-portal", style: {
-            position: "absolute",
-            top: "".concat(position.top, "px"),
-            left: "".concat(position.left, "px"),
-        } },
-        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", yearItemNumber: 15, maxDate: new Date() }))); };
+    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
+            ? { top: "".concat(position.top, "px") }
+            : { top: "".concat(position.top, "px") })) },
+        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", maxDate: new Date(), minDate: new Date(new Date().setFullYear(new Date().getFullYear() - yearDropdownItemNumber)) }))); };
     return (React.createElement("div", { className: "datepicker-container", ref: buttonRef },
         React.createElement(CustomInput, { value: selectedDate
                 ? format(selectedDate, "dd MMMM yyyy", { locale: fr })

package/dist/components/atoms/datepickers/datepicker.css

@@ -7,15 +7,13 @@
   display: flex;
   height: 40px;
   padding: 8px 16px;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  align-self: stretch;
   border-radius: 8px;
   background: var(--Primary-Light-grey, #f4f7fb);
   border: none;
   cursor: pointer;
-  min-width: 200px;
+  min-width: 120px;
   width: 100%;
 }
 
@@ -23,6 +21,14 @@
   background: var(--grey-venom, #e6edf5);
 }
 
+.datepicker-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  justify-content: space-between;
+}
+
 .datepicker-text {
   color: var(--Primary-Mid-black, #171e25);
   font-family: "Open Sans";
@@ -33,12 +39,22 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
 }
 
 .datepicker-icon {
   color: var(--Primary-Dark-grey, #456073);
   font-size: 16px;
-  padding-left: 6px;
+  flex-shrink: 0;
+}
+
+.datepicker-test-text {
+  visibility: hidden;
+  position: absolute;
+  white-space: nowrap;
+  font-family: "Open Sans";
+  font-size: 16px;
+  font-weight: 700;
 }
 
 /* Customisation du calendrier */
@@ -147,6 +163,12 @@
   box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
 }
 
+/* Suppression des styles top et bottom qui ne sont plus nécessaires */
+.datepicker-portal.top,
+.datepicker-portal.bottom {
+  transform: none; /* Suppression de la transformation */
+}
+
 /* Customisation des flèches de navigation */
 .react-datepicker__navigation {
   padding: 8px;
@@ -206,3 +228,13 @@
 .react-datepicker__year-text:not([aria-disabled="true"]):hover {
   border-radius: 18px;
 }
+
+.react-datepicker__day--disabled {
+  color: var(--venom-grey-dark, #d1dce8) !important;
+  cursor: not-allowed;
+}
+
+.react-datepicker__day--disabled:hover {
+  background: none !important;
+  cursor: not-allowed;
+}

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

@@ -12,6 +12,7 @@ export interface ContactCardProps {
     isEditable: boolean;
     onEdit: () => void;
     gender: "male" | "female";
+    actionIconName?: string;
 }
 declare const ContactCard: React.FC<ContactCardProps>;
 export default ContactCard;

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

@@ -5,7 +5,7 @@ import IconButton from "../../atoms/buttons/IconButton";
 import Image from "next/image";
 var NoPhoto = "/assets/NoPhoto.png";
 var ContactCard = function (_a) {
-    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender;
+    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender, _b = _a.actionIconName, actionIconName = _b === void 0 ? "allaw-icon-edit-2" : _b;
     var renderContent = function () {
         switch (size) {
             case "small":
@@ -73,7 +73,7 @@ var ContactCard = function (_a) {
                                     React.createElement("i", { className: "allaw-icon-mail info-icon" }),
                                     React.createElement("span", { className: "info-text contact" }, email))))),
                     React.createElement("div", { className: "action-button-container" },
-                        React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit }))));
+                        React.createElement(IconButton, { style: "largeFilled", iconName: actionIconName, onClick: onEdit }))));
         }
     };
     return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());

package/dist/components/molecules/datepickerForm/DatepickerForm.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "react-datepicker/dist/react-datepicker.css";
 import "./datepickerForm.css";
 import "../../../styles/global.css";
 export interface DatepickerFormProps {
@@ -9,6 +8,7 @@ export interface DatepickerFormProps {
     text?: string;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
+    yearDropdownItemNumber?: number;
 }
 declare const DatepickerForm: React.FC<DatepickerFormProps>;
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/DatepickerForm.js

@@ -1,84 +1,12 @@
-import React, { forwardRef, useState, useRef, useEffect } from "react";
-import ReactDatePicker from "react-datepicker";
-import ReactDOM from "react-dom";
-import "react-datepicker/dist/react-datepicker.css";
+import React from "react";
 import "./datepickerForm.css";
 import "../../../styles/global.css";
-import { fr } from "date-fns/locale";
-import { format } from "date-fns";
 import Paragraph from "../../atoms/typography/Paragraph";
-var CustomInput = forwardRef(function (_a, ref) {
-    var value = _a.value, onClick = _a.onClick, placeholder = _a.placeholder;
-    return (React.createElement("button", { type: "button", className: "datepicker-form", onClick: onClick, ref: ref },
-        React.createElement("span", { className: "datepicker-form-text" }, value || placeholder),
-        React.createElement("i", { className: "datepicker-form-icon allaw-icon-calendar" })));
-});
-CustomInput.displayName = "CustomInput";
+import Datepicker from "../../atoms/datepickers/Datepicker";
 var DatepickerForm = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d;
-    var _e = useState(value), selectedDate = _e[0], setSelectedDate = _e[1];
-    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
-    var _g = useState({ top: 0, left: 0 }), position = _g[0], setPosition = _g[1];
-    var buttonRef = useRef(null);
-    var calendarRef = useRef(null);
-    var updatePosition = function () {
-        if (buttonRef.current) {
-            var rect = buttonRef.current.getBoundingClientRect();
-            setPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-            });
-        }
-    };
-    useEffect(function () {
-        if (isOpen) {
-            updatePosition();
-            window.addEventListener("scroll", updatePosition);
-            window.addEventListener("resize", updatePosition);
-        }
-        return function () {
-            window.removeEventListener("scroll", updatePosition);
-            window.removeEventListener("resize", updatePosition);
-        };
-    }, [isOpen]);
-    var handleDateChange = function (date) {
-        if (date) {
-            setSelectedDate(date);
-            onChange === null || onChange === void 0 ? void 0 : onChange(date);
-            setIsOpen(false);
-        }
-    };
-    var handleClickOutside = function (event) {
-        if (buttonRef.current &&
-            !buttonRef.current.contains(event.target) &&
-            calendarRef.current &&
-            !calendarRef.current.contains(event.target)) {
-            setIsOpen(false);
-        }
-    };
-    useEffect(function () {
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    var renderCalendar = function () { return (React.createElement("div", { ref: calendarRef, className: "datepicker-form-portal", style: {
-            position: "absolute",
-            top: "".concat(position.top, "px"),
-            left: "".concat(position.left, "px"),
-        } },
-        React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", yearItemNumber: 15, maxDate: new Date() }))); };
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, text = _a.text, _c = _a.variant, variant = _c === void 0 ? "medium" : _c, _d = _a.color, color = _d === void 0 ? "noir" : _d, _e = _a.yearDropdownItemNumber, yearDropdownItemNumber = _e === void 0 ? 10 : _e;
     return (React.createElement("div", { className: "datepicker-form-wrapper" },
         text && React.createElement(Paragraph, { text: text, variant: variant, color: color }),
-        React.createElement("div", { className: "datepicker-form-container", ref: buttonRef },
-            React.createElement(CustomInput, { value: selectedDate
-                    ? format(selectedDate, "dd MMMM yyyy", { locale: fr })
-                    : "", onClick: function () { return setIsOpen(!isOpen); }, placeholder: placeholder }),
-            isOpen && ReactDOM.createPortal(renderCalendar(), document.body))));
+        React.createElement(Datepicker, { value: value, onChange: onChange, placeholder: placeholder, yearDropdownItemNumber: yearDropdownItemNumber })));
 };
 export default DatepickerForm;

package/dist/components/molecules/datepickerForm/datepickerForm.css

@@ -1,214 +1,3 @@
-.datepicker-form-container {
-  position: relative;
-  width: 100%;
-}
-
-.datepicker-form {
-  display: flex;
-  height: 40px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  align-self: stretch;
-  border-radius: 8px;
-  background: var(--Primary-Light-grey, #f4f7fb);
-  border: none;
-  cursor: pointer;
-  min-width: 200px;
-  width: 100%;
-}
-
-.datepicker-form:hover {
-  background: var(--grey-venom, #e6edf5);
-}
-
-.datepicker-form-text {
-  color: var(--Primary-Mid-black, #171e25);
-  font-family: "Open Sans";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.datepicker-form-icon {
-  color: var(--Primary-Dark-grey, #456073);
-  font-size: 16px;
-  padding-left: 6px;
-}
-
-/* Customisation du calendrier */
-.custom-calendar {
-  border: none !important;
-  font-family: "Open Sans";
-  font-size: 16px;
-  width: 300px !important;
-  padding: 16px;
-}
-
-.react-datepicker-form__month-container {
-  width: 100%;
-}
-
-.react-datepicker-form__header {
-  background: white;
-  border: none;
-  padding: 0;
-}
-
-.react-datepicker-form__day-names {
-  display: flex;
-  justify-content: space-between;
-  padding: 16px 8px;
-}
-
-.react-datepicker-form__day-name {
-  color: var(--Primary-Dark-grey, #456073);
-  font-weight: 600;
-  width: 36px;
-  margin: 0;
-}
-
-.react-datepicker-form__month {
-  margin: 0;
-  padding: 8px;
-}
-
-.react-datepicker-form__day {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  margin: 0;
-  border-radius: 18px;
-  color: var(--Primary-Dark-grey, #456073);
-  font-family: "Open Sans";
-}
-
-.react-datepicker-form__day:hover {
-  background: var(--grey-venom, #e6edf5);
-  border-radius: 18px;
-}
-
-.react-datepicker-form__day--selected {
-  background: var(--bleu-allaw, #1985e8) !important;
-  border-radius: 18px !important;
-  color: white !important;
-}
-
-.react-datepicker-form__day--keyboard-selected {
-  background: var(--grey-venom, #e6edf5);
-  border-radius: 18px;
-  color: var(--Primary-Mid-black, #171e25);
-}
-
-.react-datepicker-form__day--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover,
-.react-datepicker-form__month-text--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover,
-.react-datepicker-form__quarter-text--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover,
-.react-datepicker-form__year-text--keyboard-selected:not(
-    [aria-disabled="true"]
-  ):hover {
-  background-color: var(--bleu-allaw, #25beeb);
-  color: white;
-  border-radius: 18px;
-}
-
-.custom-header {
-  margin-bottom: 16px;
-}
-
-.year-dropdown,
-.month-dropdown {
-  padding: 8px;
-  min-width: 100px;
-}
-
-/* Style pour mobile */
-@media (max-width: 768px) {
-  .datepicker-form {
-    width: 100%;
-    min-width: unset;
-  }
-}
-
-.datepicker-form-portal {
-  position: absolute;
-  z-index: 9999;
-  background: white;
-  border: 1px solid var(--grey-venom, #e6edf5);
-  border-radius: 8px;
-  box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
-}
-
-/* Customisation des flèches de navigation */
-.react-datepicker-form__navigation {
-  padding: 8px;
-  border-radius: 18px;
-  margin: 8px;
-}
-
-.react-datepicker-form__navigation--previous {
-  left: 1px;
-}
-
-.react-datepicker-form__navigation--next {
-  right: 1px;
-}
-
-.react-datepicker-form__navigation:hover {
-  background: var(--grey-venom, #e6edf5);
-  border-radius: 18px;
-}
-
-/* Padding pour le mois en cours */
-.react-datepicker-form__current-month {
-  padding-bottom: 18px;
-}
-
-.react-datepicker-form__current-month.react-datepicker-form__current-month--hasYearDropdown.react-datepicker-form__current-month--hasMonthDropdown {
-  padding-bottom: 16px;
-}
-
-.react-datepicker-form__month-select,
-.react-datepicker-form__year-select {
-  font-size: 16px;
-  font-family: "Open Sans";
-  padding: 6px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--grey-venom, #e6edf5);
-  background-color: white;
-  cursor: pointer;
-}
-
-.react-datepicker-form__month-select:hover,
-.react-datepicker-form__year-select:hover {
-  background: var(--grey-venom, #e6edf5);
-}
-
-.react-datepicker-form__navigation-icon.react-datepicker-form__navigation-icon--previous {
-  left: 1px;
-}
-
-.react-datepicker-form__navigation-icon.react-datepicker-form__navigation-icon--next {
-  right: 1px;
-}
-
-.react-datepicker-form__day:not([aria-disabled="true"]):hover,
-.react-datepicker-form__month-text:not([aria-disabled="true"]):hover,
-.react-datepicker-form__quarter-text:not([aria-disabled="true"]):hover,
-.react-datepicker-form__year-text:not([aria-disabled="true"]):hover {
-  border-radius: 18px;
-}
-
 .datepicker-form-wrapper {
   display: flex;
   flex-direction: column;

package/dist/components/molecules/documentCard/DocumentCard.css

@@ -63,6 +63,10 @@
   align-items: flex-end;
 }
 
+.document-card-icon-eye {
+  color: var(--Primary-Mid-black, var(--mid-grey, #728ea7));
+}
+
 /* Styles spécifiques pour le type "waiting" */
 .document-card.waiting {
   width: 425px;

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -67,6 +67,9 @@ var DocumentCard = function (_a) {
                 React.createElement(Paragraph, { text: title, variant: "semiBold", size: "default", maxLines: 1, color: "noir" }),
                 React.createElement("span", { className: "document-card-date" }, formatDate(date)))),
         React.createElement("div", { className: "document-card-right" },
-            React.createElement(OtherStatusTag, { type: "information", label: getStatusName() }))));
+            React.createElement("div", { className: "document-card-status" },
+                React.createElement(OtherStatusTag, { type: "information", label: getStatusName() })),
+            React.createElement("div", { className: "document-card-icon-eye" },
+                React.createElement("i", { className: "allaw-icon-eye" })))));
 };
 export default DocumentCard;

package/package.json

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