allaw-ui 3.0.0 → 3.0.2

package/dist/components/molecules/fileUploader/FileUploader.stories.js

@@ -0,0 +1,226 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState } from "react";
+import FileUploader from "./FileUploader";
+import "../../../styles/global.css";
+import pdfIcon from "../../../assets/allaw-icon-pdf.svg";
+export default {
+    title: "Components/Molecules/FileUploader/FileUploader",
+    component: FileUploader,
+    tags: ["autodocs"],
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+    argTypes: {
+        acceptedExtensions: {
+            control: "array",
+            description: "Liste des extensions de fichiers acceptées",
+        },
+        maxFileSizeMB: {
+            control: "number",
+            description: "Taille maximale du fichier en MB",
+        },
+        enableDragAndDrop: {
+            control: "boolean",
+            description: "Active/désactive la zone de drag & drop",
+        },
+        enableCropping: {
+            control: "boolean",
+            description: "Active/désactive le cadrage pour les images",
+        },
+        cropShape: {
+            control: { type: "select", options: ["circle", "square"] },
+            description: "Forme du masque de cadrage (cercle ou carré)",
+        },
+        iconUrl: {
+            control: "text",
+            description: "URL de l'icône du type de fichier",
+        },
+        buttonLabel: {
+            control: "text",
+            description: "Texte du bouton de sélection manuelle",
+        },
+        acceptedLabel: {
+            control: "text",
+            description: "Texte sur le format accepté",
+        },
+        maxSizeLabel: {
+            control: "text",
+            description: "Texte sur la taille maximale",
+        },
+        uploadProgress: {
+            control: { type: "range", min: 0, max: 10, step: 1 },
+            description: "Progression de l'upload (0-10)",
+        },
+        isLoading: {
+            control: "boolean",
+            description: "Affiche un loader pendant lecture ou traitement",
+        },
+        errorMessage: {
+            control: "text",
+            description: "Message d'erreur à afficher",
+        },
+    },
+};
+// Template de base avec gestion d'état intégré pour la démo
+var Template = function (args) {
+    var _a = useState(null), file = _a[0], setFile = _a[1];
+    var _b = useState(null), fileContent = _b[0], setFileContent = _b[1];
+    var _c = useState(null), cropMetadata = _c[0], setCropMetadata = _c[1];
+    var _d = useState(0), progress = _d[0], setProgress = _d[1];
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _f = useState(null), error = _f[0], setError = _f[1];
+    var handleFileRead = function (file, content, cropMeta) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    setFile(file);
+                    setFileContent(content);
+                    if (cropMeta) {
+                        setCropMetadata(cropMeta);
+                        console.log("Métadonnées de cadrage:", cropMeta);
+                    }
+                    // Simuler une progression
+                    setProgress(2);
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                case 1:
+                    _a.sent();
+                    setProgress(5);
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                case 2:
+                    _a.sent();
+                    setProgress(8);
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                case 3:
+                    _a.sent();
+                    setProgress(10);
+                    setLoading(false);
+                    console.log("Fichier lu:", file.name, "Taille:", file.size);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleFileRemove = function () {
+        setFile(null);
+        setFileContent(null);
+        setCropMetadata(null);
+        setProgress(0);
+        setError(null);
+        console.log("Fichier supprimé");
+    };
+    return (React.createElement("div", null,
+        React.createElement(FileUploader, __assign({}, args, { onFileRead: handleFileRead, onFileRemove: handleFileRemove, uploadProgress: progress, isLoading: loading, errorMessage: error })),
+        cropMetadata && (React.createElement("div", { style: {
+                marginTop: "20px",
+                padding: "10px",
+                backgroundColor: "#f5f5f5",
+                borderRadius: "8px",
+            } },
+            React.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", color: "#456073" } }, "M\u00E9tadonn\u00E9es de cadrage:"),
+            React.createElement("code", { style: { display: "block", fontSize: "12px", color: "#333" } }, JSON.stringify(cropMetadata, null, 2))))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    acceptedExtensions: [".jpg", ".jpeg", ".png", ".webp"],
+    maxFileSizeMB: 5,
+    enableDragAndDrop: true,
+    enableCropping: true,
+    cropShape: "circle",
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
+    maxSizeLabel: "Taille maximale :",
+};
+export var WithDescription = Template.bind({});
+WithDescription.args = __assign(__assign({}, Default.args), { descriptionParts: {
+        beforeLink: "Une",
+        linkLabel: "page sera ajoutée",
+        linkUrl: "https://example.com",
+        afterLink: "à la fin de votre convention d'honoraire précisant les détails du rendez-vous.",
+    } });
+export var WithoutDragAndDrop = Template.bind({});
+WithoutDragAndDrop.args = __assign(__assign({}, Default.args), { enableDragAndDrop: false });
+export var WithError = Template.bind({});
+WithError.args = __assign(__assign({}, Default.args), { errorMessage: "Le format du fichier choisi n'est pas supporté ou sa taille dépasse 5 Mo." });
+export var WithProgress = Template.bind({});
+WithProgress.args = __assign(__assign({}, Default.args), { uploadProgress: 6, isLoading: true, fileName: "document.pdf", fileSize: 2 * 1024 * 1024 });
+// Exemple avec des extensions multiples
+export var MultipleExtensions = Template.bind({});
+MultipleExtensions.args = __assign(__assign({}, Default.args), { acceptedExtensions: [".pdf", ".doc", ".docx"] });
+// Exemple avec le cadrage d'image en carré
+export var WithSquareCropping = Template.bind({});
+WithSquareCropping.args = {
+    acceptedExtensions: [".jpg", ".jpeg", ".png", ".webp"],
+    maxFileSizeMB: 5,
+    enableDragAndDrop: true,
+    enableCropping: true,
+    cropShape: "square",
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
+    maxSizeLabel: "Taille maximale :",
+};
+// Exemple avec le cadrage d'image en cercle
+export var WithCircleCropping = Template.bind({});
+WithCircleCropping.args = {
+    acceptedExtensions: [".jpg", ".jpeg", ".png", ".webp"],
+    maxFileSizeMB: 5,
+    enableDragAndDrop: true,
+    enableCropping: true,
+    cropShape: "circle",
+    buttonLabel: "Choisir une image",
+    acceptedLabel: "Formats acceptés :",
+    maxSizeLabel: "Taille maximale :",
+};

package/dist/components/molecules/fileUploader/ImageCropperModal.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface CropMetadata {
+    zoom: number;
+    offsetX: number;
+    offsetY: number;
+    shape: "circle" | "square";
+}
+interface ImageCropperModalProps {
+    file: File;
+    shape: "circle" | "square";
+    onCancel: () => void;
+    onConfirm: (cropMetadata: CropMetadata) => void;
+}
+declare const ImageCropperModal: React.FC<ImageCropperModalProps>;
+export default ImageCropperModal;

package/dist/components/molecules/fileUploader/ImageCropperModal.js

@@ -0,0 +1,211 @@
+import React, { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import styles from "./ImageCropperModal.module.css";
+var ImageCropperModal = function (_a) {
+    var file = _a.file, shape = _a.shape, onCancel = _a.onCancel, onConfirm = _a.onConfirm;
+    var _b = useState(1), zoom = _b[0], setZoom = _b[1]; // Facteur de zoom relatif (1-3)
+    var _c = useState(1), baseZoom = _c[0], setBaseZoom = _c[1]; // Zoom de base pour fit l'image
+    var _d = useState({
+        x: 0,
+        y: 0,
+    }), position = _d[0], setPosition = _d[1];
+    var _e = useState(false), isDragging = _e[0], setIsDragging = _e[1];
+    var _f = useState(null), imageSrc = _f[0], setImageSrc = _f[1];
+    var _g = useState({
+        x: 0,
+        y: 0,
+    }), dragStart = _g[0], setDragStart = _g[1];
+    var _h = useState(null), imageSize = _h[0], setImageSize = _h[1];
+    var imageRef = useRef(null);
+    var cropAreaRef = useRef(null);
+    var imageWrapperRef = useRef(null);
+    // Calcule le zoom de base pour que l'image "fit" parfaitement dans le cadre
+    var calculateFitZoom = function (imgWidth, imgHeight) {
+        if (!cropAreaRef.current)
+            return 1;
+        var cropRect = cropAreaRef.current.getBoundingClientRect();
+        var cropWidth = cropRect.width;
+        var cropHeight = cropRect.height;
+        // Calcul du zoom pour que l'image couvre complètement le cadre
+        // On utilise max pour assurer que l'image couvre tout le cadre, sans espace vide
+        var fitZoom = Math.max(cropWidth / imgWidth, cropHeight / imgHeight);
+        return fitZoom;
+    };
+    // Calcule les limites de déplacement pour éviter les zones vides
+    var calculateBoundaries = function () {
+        if (!cropAreaRef.current || !imageSize) {
+            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+        }
+        var cropRect = cropAreaRef.current.getBoundingClientRect();
+        var cropWidth = cropRect.width;
+        var cropHeight = cropRect.height;
+        // Taille de l'image après application des deux zooms
+        var totalZoom = baseZoom * zoom;
+        var scaledWidth = imageSize.width * totalZoom;
+        var scaledHeight = imageSize.height * totalZoom;
+        // Si l'image est plus petite que le crop à cause du zoom
+        // ce qui ne devrait pas arriver avec notre logique, mais au cas où
+        if (scaledWidth <= cropWidth || scaledHeight <= cropHeight) {
+            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+        }
+        // Calcule combien l'image peut être déplacée sans créer d'espace vide
+        var xLimit = Math.max(0, (scaledWidth - cropWidth) / 2);
+        var yLimit = Math.max(0, (scaledHeight - cropHeight) / 2);
+        return {
+            minX: -xLimit,
+            maxX: xLimit,
+            minY: -yLimit,
+            maxY: yLimit,
+        };
+    };
+    // Centre l'image dans la zone de crop
+    var centerImage = function () {
+        setPosition({ x: 0, y: 0 });
+    };
+    useEffect(function () {
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            if (e.target && typeof e.target.result === "string") {
+                setImageSrc(e.target.result);
+                // Charge l'image pour obtenir ses dimensions
+                var img_1 = new window.Image();
+                img_1.onload = function () {
+                    setImageSize({ width: img_1.width, height: img_1.height });
+                    // Attendre que les refs soient disponibles
+                    setTimeout(function () {
+                        var fitZoom = calculateFitZoom(img_1.width, img_1.height);
+                        setBaseZoom(fitZoom);
+                        setZoom(1); // Zoom initial toujours à 1 (relatif)
+                        centerImage();
+                    }, 50);
+                };
+                img_1.src = e.target.result;
+            }
+        };
+        reader.readAsDataURL(file);
+        return function () {
+            reader.abort();
+        };
+    }, [file]);
+    // Recalcule les limites quand le zoom change
+    useEffect(function () {
+        // Quand zoom change, recalculer les limites et ajuster la position si nécessaire
+        if (imageSize && cropAreaRef.current) {
+            var boundaries = calculateBoundaries();
+            // Ajuste la position pour rester dans les limites
+            setPosition({
+                x: Math.max(boundaries.minX, Math.min(boundaries.maxX, position.x)),
+                y: Math.max(boundaries.minY, Math.min(boundaries.maxY, position.y)),
+            });
+        }
+    }, [zoom, imageSize]);
+    var handleMouseDown = function (e) {
+        e.preventDefault();
+        setIsDragging(true);
+        setDragStart({
+            x: e.clientX - position.x,
+            y: e.clientY - position.y,
+        });
+    };
+    var handleTouchStart = function (e) {
+        if (e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        setDragStart({
+            x: e.touches[0].clientX - position.x,
+            y: e.touches[0].clientY - position.y,
+        });
+    };
+    var updatePosition = function (clientX, clientY) {
+        if (!isDragging)
+            return;
+        var newX = clientX - dragStart.x;
+        var newY = clientY - dragStart.y;
+        var boundaries = calculateBoundaries();
+        setPosition({
+            x: Math.max(boundaries.minX, Math.min(boundaries.maxX, newX)),
+            y: Math.max(boundaries.minY, Math.min(boundaries.maxY, newY)),
+        });
+    };
+    var handleMouseMove = function (e) {
+        if (!isDragging)
+            return;
+        updatePosition(e.clientX, e.clientY);
+    };
+    var handleTouchMove = function (e) {
+        if (!isDragging || e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        updatePosition(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+    };
+    var handleTouchEnd = function () {
+        setIsDragging(false);
+    };
+    var handleZoomChange = function (e) {
+        var newZoom = parseFloat(e.target.value);
+        setZoom(Math.min(3, Math.max(1, newZoom)));
+    };
+    useEffect(function () {
+        if (isDragging) {
+            document.addEventListener("mousemove", handleDocumentMouseMove);
+            document.addEventListener("mouseup", handleDocumentMouseUp);
+            document.addEventListener("touchmove", handleDocumentTouchMove, {
+                passive: false,
+            });
+            document.addEventListener("touchend", handleDocumentTouchEnd);
+        }
+        return function () {
+            document.removeEventListener("mousemove", handleDocumentMouseMove);
+            document.removeEventListener("mouseup", handleDocumentMouseUp);
+            document.removeEventListener("touchmove", handleDocumentTouchMove);
+            document.removeEventListener("touchend", handleDocumentTouchEnd);
+        };
+    }, [isDragging, dragStart, zoom, imageSize]);
+    var handleDocumentMouseMove = function (e) {
+        updatePosition(e.clientX, e.clientY);
+    };
+    var handleDocumentTouchMove = function (e) {
+        if (e.touches.length !== 1)
+            return;
+        e.preventDefault();
+        updatePosition(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    var handleDocumentMouseUp = function () {
+        setIsDragging(false);
+    };
+    var handleDocumentTouchEnd = function () {
+        setIsDragging(false);
+    };
+    return (React.createElement("div", { className: styles.modal_overlay },
+        React.createElement("div", { className: styles.modal_content },
+            React.createElement("div", { className: styles.modal_header },
+                React.createElement("h3", { className: styles.modal_title }, "Recadrer l'image")),
+            React.createElement("div", { className: styles.crop_container },
+                React.createElement("div", { className: styles.image_wrapper, ref: imageWrapperRef }, imageSrc && (React.createElement("div", { ref: imageRef, className: styles.image_container, style: {
+                        transform: "translate(".concat(position.x, "px, ").concat(position.y, "px) scale(").concat(baseZoom * zoom, ")"),
+                        cursor: isDragging ? "grabbing" : "grab",
+                    } },
+                    React.createElement(Image, { src: imageSrc, alt: "Aper\u00E7u", className: styles.image, draggable: false, width: 1000, height: 1000, priority: true, unoptimized: true })))),
+                React.createElement("div", { ref: cropAreaRef, className: "".concat(styles.crop_area, " ").concat(styles["crop_area_".concat(shape)]), onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd })),
+            React.createElement("div", { className: styles.controls },
+                React.createElement("div", { className: styles.zoom_control },
+                    React.createElement("span", { className: styles.zoom_label }, "Zoom:"),
+                    React.createElement("button", { className: styles.zoom_button, onClick: function () { return setZoom(Math.max(1, zoom - 0.1)); }, disabled: zoom <= 1 }, "\u2013"),
+                    React.createElement("input", { type: "range", min: "1", max: "3", step: "0.1", value: zoom, onChange: handleZoomChange, className: styles.zoom_slider }),
+                    React.createElement("button", { className: styles.zoom_button, onClick: function () { return setZoom(Math.min(3, zoom + 0.1)); }, disabled: zoom >= 3 }, "+")),
+                React.createElement("div", { className: styles.action_buttons },
+                    React.createElement("button", { className: styles.cancel_button, onClick: onCancel }, "Annuler"),
+                    React.createElement("button", { className: styles.confirm_button, onClick: function () {
+                            return onConfirm({
+                                zoom: zoom,
+                                offsetX: position.x,
+                                offsetY: position.y,
+                                shape: shape,
+                            });
+                        } }, "Valider"))))));
+};
+export default ImageCropperModal;

package/dist/components/molecules/fileUploader/ImageCropperModal.module.css

@@ -0,0 +1,232 @@
+.modal_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal_content {
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  height: 80vh;
+  max-height: 600px;
+  overflow: hidden;
+}
+
+.modal_header {
+  padding: 1rem;
+  background-color: white;
+  border-bottom: 1px solid var(--grey-venom, #e6edf5);
+  border-radius: 12px 12px 0 0;
+}
+
+.modal_title {
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--noir, #171e25);
+  margin: 0;
+}
+
+.crop_container {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.crop_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.crop_area {
+  position: relative;
+  width: 280px;
+  height: 280px;
+  background-color: transparent;
+  z-index: 20;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+}
+
+.crop_area_square {
+  border-radius: 8px;
+}
+
+.crop_area_circle {
+  border-radius: 50%;
+}
+
+.crop_area::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 25;
+}
+
+.image_wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 5;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.image_container {
+  position: absolute;
+  transform-origin: center;
+  will-change: transform;
+  touch-action: none;
+  cursor: grab;
+  pointer-events: all;
+}
+
+.image {
+  width: auto !important;
+  height: auto !important;
+  max-width: none !important;
+  max-height: none !important;
+  user-select: none;
+  -webkit-user-drag: none;
+  display: block;
+  object-fit: cover !important;
+}
+
+.controls {
+  padding: 1rem;
+  background-color: white;
+  border-top: 1px solid var(--grey-venom, #e6edf5);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-radius: 0 0 12px 12px;
+}
+
+.zoom_control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.zoom_label {
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  color: var(--mid-grey, #728ea7);
+  white-space: nowrap;
+}
+
+.zoom_slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 2px;
+  outline: none;
+}
+
+.zoom_slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--bleu-allaw, #25beeb);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.zoom_slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--bleu-allaw, #25beeb);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.zoom_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  background-color: white;
+  cursor: pointer;
+  font-size: 16px;
+  color: var(--noir, #171e25);
+}
+
+.zoom_button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.action_buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.cancel_button,
+.confirm_button {
+  padding: 0.5rem 1.5rem;
+  border-radius: 4px;
+  font-family: var(--font-open-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel_button {
+  background-color: transparent;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  color: var(--mid-grey, #728ea7);
+}
+
+.confirm_button {
+  background-color: var(--bleu-allaw, #25beeb);
+  border: 1px solid var(--bleu-allaw, #25beeb);
+  color: white;
+}
+
+.cancel_button:hover {
+  background-color: #f8f9fb;
+}
+
+.confirm_button:hover {
+  background-color: #1da9d2;
+}

package/dist/components/molecules/fileUploader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileUploader } from "./FileUploader";
+export type { FileUploaderProps } from "./FileUploader";

package/dist/components/molecules/fileUploader/index.js

@@ -0,0 +1 @@
+export { default as FileUploader } from "./FileUploader";