@123usmanhaider321/ui 0.1.0 → 0.1.8

package/dist/components/ImageCropModal/index.js

@@ -0,0 +1,464 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import Cropper from "react-easy-crop";
+import { useState, useRef, useEffect, Fragment } from "react";
+import getCroppedImage from "../../lib/cropImage.js";
+import { getImageLuminance, calculateInitialZoom } from "../../lib/imageAnalysis.js";
+import Modal from "../ui/Modal/index.js";
+import { Transition, Dialog } from "@headlessui/react";
+import { Image, X, Move, ZoomOut, ZoomIn, RotateCw, Stamp, Palette } from "lucide-react";
+import Image$1 from "next/image";
+import { Button } from "../Button/Button.js";
+function ImageCropModal({
+  open,
+  imageSrc,
+  onClose,
+  onConfirm,
+  aspect = 16 / 9,
+  cropShape = "rect",
+  showRotationControl = false,
+  allowBackgroundColor = false,
+  allowBothFitting = false,
+  hideWatermark = false
+}) {
+  const getLuminance = (hex) => {
+    const c = hex.substring(1);
+    const rgb = parseInt(c, 16);
+    const r = rgb >> 16 & 255;
+    const g = rgb >> 8 & 255;
+    const b = rgb >> 0 & 255;
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [rotation, setRotation] = useState(0);
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
+  const [watermarkPos, setWatermarkPos] = useState({ x: 20, y: 20 });
+  const [isDraggingWatermark, setIsDraggingWatermark] = useState(false);
+  const [watermarkTheme, setWatermarkTheme] = useState("auto");
+  const dragStart = useRef({ x: 0, y: 0 });
+  const [cropSize, setCropSize] = useState(void 0);
+  const [mediaSize, setMediaSize] = useState(void 0);
+  const [isDarkImage, setIsDarkImage] = useState(false);
+  const containerRef = useRef(null);
+  const watermarkRef = useRef(null);
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (imageSrc) {
+      getImageLuminance(imageSrc).then((brightness) => {
+        setIsDarkImage(brightness < 128);
+      });
+    }
+  }, [imageSrc]);
+  useEffect(() => {
+    const calculateCropSize = () => {
+      if (!containerRef.current) return;
+      const { clientWidth, clientHeight } = containerRef.current;
+      const fitRatio = aspect;
+      const containerRatio = clientWidth / clientHeight;
+      let width, height;
+      if (containerRatio > fitRatio) {
+        height = clientHeight;
+        width = height * fitRatio;
+      } else {
+        width = clientWidth;
+        height = width / fitRatio;
+      }
+      const newCropSize = { width: width * 0.9, height: height * 0.9 };
+      setCropSize(newCropSize);
+      if (mediaSize && !initializedRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const containerW = containerRect.width;
+        const containerH = containerRect.height;
+        const targetZoom = calculateInitialZoom({
+          containerSize: { width: containerW, height: containerH },
+          mediaSize: { naturalWidth: mediaSize.naturalWidth, naturalHeight: mediaSize.naturalHeight },
+          cropSize: newCropSize,
+          allowBothFitting
+        });
+        setZoom(targetZoom);
+        const wmWidth = newCropSize.width * 0.15;
+        const wmHeight = wmWidth / 3;
+        setWatermarkPos({
+          x: newCropSize.width - wmWidth - 20,
+          // 20px padding
+          y: newCropSize.height - wmHeight - 20
+        });
+        initializedRef.current = true;
+      }
+    };
+    const observer = new ResizeObserver(() => {
+      calculateCropSize();
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [aspect, open, mediaSize]);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDraggingWatermark || !cropSize) return;
+      const dx = e.clientX - dragStart.current.x;
+      const dy = e.clientY - dragStart.current.y;
+      setWatermarkPos((prev) => {
+        const newX = prev.x + dx;
+        const newY = prev.y + dy;
+        const watermarkWidth = cropSize.width * 0.15;
+        const ratio = watermarkRef.current ? watermarkRef.current.naturalWidth / watermarkRef.current.naturalHeight : 1;
+        const watermarkHeight = watermarkWidth / ratio;
+        return {
+          x: Math.min(Math.max(0, newX), cropSize.width - watermarkWidth),
+          y: Math.min(Math.max(0, newY), cropSize.height - watermarkHeight)
+        };
+      });
+      dragStart.current = { x: e.clientX, y: e.clientY };
+    };
+    const handleMouseUp = () => {
+      setIsDraggingWatermark(false);
+    };
+    if (isDraggingWatermark) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDraggingWatermark, cropSize]);
+  const cropOffset = containerRef.current && cropSize ? {
+    x: (containerRef.current.clientWidth - cropSize.width) / 2,
+    y: (containerRef.current.clientHeight - cropSize.height) / 2
+  } : { x: 0, y: 0 };
+  const getWatermarkUrl = () => {
+    if (watermarkTheme === "dark") return "/images/logo/login.svg";
+    if (watermarkTheme === "light") return "/logos/ticketly-logo.svg";
+    const shouldUseLightLogo = allowBackgroundColor ? getLuminance(backgroundColor) <= 128 : isDarkImage;
+    return shouldUseLightLogo ? "/logos/ticketly-logo.svg" : "/images/logo/login.svg";
+  };
+  const watermarkUrl = getWatermarkUrl();
+  const handleSave = async () => {
+    var _a, _b;
+    if (!croppedAreaPixels) return;
+    try {
+      setLoading(true);
+      let currentBlob = null;
+      let currentMaxDim = 2500;
+      let currentQuality = 0.85;
+      let attempt = 0;
+      const maxAttempts = 3;
+      while (attempt < maxAttempts) {
+        console.log(`[Crop Export] Attempt ${attempt + 1}: Dim=${currentMaxDim}, Qual=${currentQuality}`);
+        currentBlob = await getCroppedImage(
+          imageSrc,
+          croppedAreaPixels,
+          rotation,
+          void 0,
+          backgroundColor,
+          hideWatermark ? void 0 : {
+            url: watermarkUrl,
+            // Calculate relative position in the final cropped image
+            x: watermarkPos.x / ((cropSize == null ? void 0 : cropSize.width) || 1) * croppedAreaPixels.width,
+            y: watermarkPos.y / ((cropSize == null ? void 0 : cropSize.height) || 1) * croppedAreaPixels.height,
+            // Width is 15% of the final cropped image width
+            width: croppedAreaPixels.width * 0.15,
+            // Calculate height based on aspect ratio
+            height: croppedAreaPixels.width * 0.15 / ((((_a = watermarkRef.current) == null ? void 0 : _a.naturalWidth) || 100) / (((_b = watermarkRef.current) == null ? void 0 : _b.naturalHeight) || 100))
+          },
+          allowBackgroundColor ? void 0 : true,
+          currentMaxDim,
+          currentQuality
+        );
+        if (currentBlob.size <= 4.5 * 1024 * 1024) {
+          break;
+        }
+        attempt++;
+        if (attempt === 1) {
+          currentMaxDim = 2e3;
+          currentQuality = 0.75;
+        } else if (attempt === 2) {
+          currentMaxDim = 1600;
+          currentQuality = 0.65;
+        }
+      }
+      if (currentBlob) {
+        onConfirm(currentBlob);
+        onClose();
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Modal, { open, handleClose: onClose, children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-center justify-center px-4 py-2 text-center", children: /* @__PURE__ */ jsx(
+    Transition.Child,
+    {
+      as: Fragment,
+      enter: "ease-out duration-300",
+      enterFrom: "opacity-0 scale-95",
+      enterTo: "opacity-100 scale-100",
+      leave: "ease-in duration-200",
+      leaveFrom: "opacity-100 scale-100",
+      leaveTo: "opacity-0 scale-95",
+      children: /* @__PURE__ */ jsxs(Dialog.Panel, { className: "w-full max-w-5xl transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-xl transition-all", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-grey-200 px-6 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "p-2 bg-primaryx-50 rounded-lg", children: /* @__PURE__ */ jsx(Image, { className: "w-5 h-5 text-primaryx-600" }) }),
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "text-lg font-semibold text-grey-900", children: cropShape === "round" ? "Crop profile picture" : "Crop image" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "rounded-lg p-2 text-grey-400 hover:bg-grey-100 hover:text-grey-500 transition-colors focus:outline-none",
+              children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-0", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative h-[70vh] w-full bg-grey-900",
+            children: [
+              !allowBackgroundColor && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: [
+                /* @__PURE__ */ jsx(
+                  Image$1,
+                  {
+                    src: imageSrc,
+                    className: "w-full h-full object-cover blur-[20px] scale-110 opacity-70",
+                    alt: "blur-bg",
+                    width: 1,
+                    height: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Cropper,
+                {
+                  image: imageSrc,
+                  crop,
+                  rotation,
+                  zoom,
+                  aspect,
+                  cropShape,
+                  onCropChange: setCrop,
+                  onRotationChange: setRotation,
+                  onZoomChange: setZoom,
+                  onMediaLoaded: (media) => {
+                    setMediaSize(media);
+                    initializedRef.current = false;
+                  },
+                  maxZoom: 3,
+                  minZoom: 0.1,
+                  zoomSpeed: 0.01,
+                  onCropComplete: (_, areaPixels) => setCroppedAreaPixels(areaPixels),
+                  cropSize,
+                  restrictPosition: false,
+                  objectFit: "contain",
+                  style: {
+                    containerStyle: {
+                      background: allowBackgroundColor ? backgroundColor : "transparent",
+                      width: "100%"
+                    },
+                    cropAreaStyle: {
+                      border: "2px solid white",
+                      boxShadow: "0 0 0 9999em rgba(0, 0, 0, 0.5)"
+                    }
+                  }
+                }
+              ),
+              !hideWatermark && cropSize && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute pointer-events-none",
+                  style: {
+                    left: cropOffset.x,
+                    top: cropOffset.y,
+                    width: cropSize.width,
+                    height: cropSize.height,
+                    border: "1px dashed rgba(255,255,255,0.3)"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "absolute cursor-move select-none pointer-events-auto group",
+                      style: {
+                        left: watermarkPos.x,
+                        top: watermarkPos.y,
+                        width: `${cropSize.width * 0.15}px`
+                        // 15% of crop width
+                      },
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        setIsDraggingWatermark(true);
+                        dragStart.current = { x: e.clientX, y: e.clientY };
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "absolute -top-8 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2.5 py-1 bg-grey-900/90 text-white text-[10px] font-medium rounded-full transition-all duration-200 pointer-events-none whitespace-nowrap shadow-lg backdrop-blur-sm", children: [
+                          /* @__PURE__ */ jsx(Move, { className: "w-3 h-3" }),
+                          /* @__PURE__ */ jsx("span", { children: "Drag to move" })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "relative rounded transition-all duration-200 group-hover:ring-2 group-hover:ring-primaryx-500/50 group-hover:scale-[1.02]", children: [
+                          /* @__PURE__ */ jsx(
+                            Image$1,
+                            {
+                              ref: watermarkRef,
+                              src: watermarkUrl,
+                              alt: "Watermark",
+                              className: "w-full h-auto opacity-90 block",
+                              width: 100,
+                              height: 100
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-1 rounded-full backdrop-blur-[1px]", children: /* @__PURE__ */ jsx(Move, { className: "w-4 h-4 text-white drop-shadow-md" }) }) })
+                        ] })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-white px-6 py-5 border-t border-grey-100 flex flex-col md:flex-row md:items-center gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(ZoomOut, { className: "w-4 h-4 text-grey-400" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 0.7,
+                  max: 3,
+                  step: 0.01,
+                  value: zoom,
+                  onChange: (e) => setZoom(Number(e.target.value)),
+                  className: "flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20"
+                }
+              ),
+              /* @__PURE__ */ jsx(ZoomIn, { className: "w-4 h-4 text-grey-400" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2", children: "Zoom" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded", children: [
+                Math.round(zoom * 100),
+                "%"
+              ] })
+            ] })
+          ] }),
+          showRotationControl && /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(RotateCw, { className: "w-3.5 h-3.5" }),
+                "Rotate"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded", children: [
+                rotation,
+                "°"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-medium", children: "0°" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: 360,
+                  step: 1,
+                  value: rotation,
+                  onChange: (e) => setRotation(Number(e.target.value)),
+                  className: "flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-medium", children: "360°" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "hidden md:block w-px h-10 bg-grey-200" }),
+          !hideWatermark && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-[140px]", children: [
+            /* @__PURE__ */ jsxs("label", { className: "text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Stamp, { className: "w-3.5 h-3.5" }),
+              "Watermark"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 bg-grey-50 p-1 rounded-lg border border-grey-200", children: ["auto", "light", "dark"].map((theme) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setWatermarkTheme(theme),
+                className: `
+                                                        flex-1 px-2 py-1 text-[10px] font-medium rounded-md transition-all uppercase
+                                                        ${watermarkTheme === theme ? "bg-white text-grey-900 shadow-sm ring-1 ring-black/5" : "text-grey-500 hover:text-grey-700 hover:bg-grey-100"}
+                                                    `,
+                children: theme
+              },
+              theme
+            )) })
+          ] }),
+          allowBackgroundColor && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx("div", { className: "hidden md:block w-px h-10 bg-grey-200" }),
+            /* @__PURE__ */ jsxs("label", { htmlFor: "cropper-background-color", className: "flex items-center gap-3 p-1.5 pr-4 rounded-xl border border-grey-200 bg-white shadow-sm hover:border-grey-300 transition-colors cursor-pointer group relative overflow-hidden", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-8 h-8 rounded-lg border border-grey-200 shadow-inner flex items-center justify-center overflow-hidden relative",
+                  style: { backgroundColor },
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "color",
+                      id: "cropper-background-color",
+                      value: backgroundColor,
+                      onChange: (e) => setBackgroundColor(e.target.value),
+                      className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer p-0 border-0"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col pointer-events-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-grey-700 group-hover:text-grey-900", children: "Background" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-mono uppercase", children: backgroundColor })
+              ] }),
+              /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4 text-grey-400 ml-2" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "hidden md:block w-px h-10 bg-grey-200" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "rounded-lg border border-grey-300 bg-white px-4 py-2 text-sm font-medium text-grey-700 hover:bg-grey-50 focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 transition-all shadow-sm",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                onClick: handleSave,
+                disabled: loading,
+                className: "relative inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 disabled:opacity-70 disabled:cursor-not-allowed",
+                children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", children: [
+                    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                  ] }),
+                  "Processing..."
+                ] }) : "Apply Crop"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  ) }) }) });
+}
+export {
+  ImageCropModal as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ImageCropModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ImageCropModal/index.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\r\n\"use client\"\r\n\r\nimport Cropper from \"react-easy-crop\"\r\nimport { useState, Fragment, useRef, useEffect } from \"react\"\r\nimport getCroppedImage from \"@/lib/cropImage\"\r\nimport { getImageLuminance, calculateInitialZoom } from \"@/lib/imageAnalysis\"\r\nimport Modal from \"@/components/ui/Modal\"\r\nimport { Dialog, Transition } from \"@headlessui/react\"\r\nimport { X, ZoomIn, ZoomOut, Image as ImageIcon, RotateCw, Palette, Stamp, Move } from \"lucide-react\"\r\nimport Image from \"next/image\"\r\nimport { Button } from \"../Button\"\r\n\r\ninterface Props {\r\n    open: boolean\r\n    imageSrc: string\r\n    onClose: () => void\r\n    onConfirm: (blob: Blob) => void\r\n    aspect?: number\r\n    cropShape?: 'rect' | 'round'\r\n    showRotationControl?: boolean\r\n    allowBackgroundColor?: boolean\r\n    allowBothFitting?: boolean\r\n    hideWatermark?: boolean\r\n}\r\n\r\nexport default function ImageCropModal({\r\n    open,\r\n    imageSrc,\r\n    onClose,\r\n    onConfirm,\r\n    aspect = 16 / 9,\r\n    cropShape = 'rect',\r\n    showRotationControl = false,\r\n    allowBackgroundColor = false,\r\n    allowBothFitting = false,\r\n    hideWatermark = false,\r\n}: Props) {\r\n    // Helper to calculate luminance\r\n    const getLuminance = (hex: string) => {\r\n        const c = hex.substring(1)      // strip #\r\n        const rgb = parseInt(c, 16)   // convert rrggbb to decimal\r\n        const r = (rgb >> 16) & 0xff  // extract red\r\n        const g = (rgb >> 8) & 0xff   // extract green\r\n        const b = (rgb >> 0) & 0xff   // extract blue\r\n\r\n        // sRGB luma\r\n        return 0.2126 * r + 0.7152 * g + 0.0722 * b\r\n    }\r\n    const [crop, setCrop] = useState({ x: 0, y: 0 })\r\n    const [rotation, setRotation] = useState(0)\r\n    const [zoom, setZoom] = useState(1)\r\n    const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null)\r\n    const [loading, setLoading] = useState(false)\r\n\r\n    const [backgroundColor, setBackgroundColor] = useState('#ffffff')\r\n    const [watermarkPos, setWatermarkPos] = useState({ x: 20, y: 20 })\r\n    const [isDraggingWatermark, setIsDraggingWatermark] = useState(false)\r\n    const [watermarkTheme, setWatermarkTheme] = useState<'auto' | 'dark' | 'light'>('auto')\r\n    const dragStart = useRef({ x: 0, y: 0 })\r\n\r\n    // State to force the crop box to fill the container\r\n    const [cropSize, setCropSize] = useState<{ width: number; height: number } | undefined>(undefined)\r\n    const [mediaSize, setMediaSize] = useState<{ width: number; height: number; naturalWidth: number; naturalHeight: number } | undefined>(undefined)\r\n    const [isDarkImage, setIsDarkImage] = useState(false)\r\n    const containerRef = useRef<HTMLDivElement>(null)\r\n    const watermarkRef = useRef<HTMLImageElement>(null)\r\n    const initializedRef = useRef(false)\r\n\r\n    // Calculate luminance when image changes\r\n    useEffect(() => {\r\n        if (imageSrc) {\r\n            getImageLuminance(imageSrc).then((brightness) => {\r\n                setIsDarkImage(brightness < 128)\r\n            })\r\n        }\r\n    }, [imageSrc])\r\n\r\n    // Calculate crop size based on container dimensions to ensure it maximizes space relative to parent\r\n    // Also calculate initial zoom to cover\r\n    useEffect(() => {\r\n        const calculateCropSize = () => {\r\n            if (!containerRef.current) return\r\n            const { clientWidth, clientHeight } = containerRef.current\r\n\r\n            // Calculate dimensions that fit within the container while maintaining aspect ratio\r\n            const fitRatio = aspect\r\n            const containerRatio = clientWidth / clientHeight\r\n\r\n            let width, height;\r\n\r\n            if (containerRatio > fitRatio) {\r\n                // Container is wider than the aspect ratio -> constrain by height\r\n                height = clientHeight\r\n                width = height * fitRatio\r\n            } else {\r\n                // Container is taller than the aspect ratio -> constrain by width\r\n                width = clientWidth\r\n                height = width / fitRatio\r\n            }\r\n\r\n            // Calculate new crop size\r\n            const newCropSize = { width: width * 0.9, height: height * 0.9 }\r\n            setCropSize(newCropSize)\r\n\r\n            // Calculate Auto-Zoom to Cover if media is loaded\r\n            if (mediaSize && !initializedRef.current) {\r\n\r\n                // REWRITTEN ZOOM LOGIC\r\n                // Goal: Calculate precise zoom to ensure image fills the crop box.\r\n\r\n                // 1. Get exact container geometry\r\n                const containerRect = containerRef.current.getBoundingClientRect()\r\n                const containerW = containerRect.width\r\n                const containerH = containerRect.height\r\n\r\n                // 2. Get exact image geometry\r\n\r\n                // 3. Determine how the image is displayed at Zoom=1 (fit to container)\r\n                // react-easy-crop uses 'contain' logic: fits the largest dimension\r\n                const targetZoom = calculateInitialZoom({\r\n                    containerSize: { width: containerW, height: containerH },\r\n                    mediaSize: { naturalWidth: mediaSize.naturalWidth, naturalHeight: mediaSize.naturalHeight },\r\n                    cropSize: newCropSize,\r\n                    allowBothFitting\r\n                })\r\n\r\n                setZoom(targetZoom)\r\n\r\n                // Initial Watermark Position: Right Bottom\r\n                // We need cropSize to determine offsets.\r\n                const wmWidth = newCropSize.width * 0.15\r\n                // Approx height? \r\n                const wmHeight = wmWidth / 3 // roughly 3:1 aspect for logo\r\n\r\n                setWatermarkPos({\r\n                    x: newCropSize.width - wmWidth - 20, // 20px padding\r\n                    y: newCropSize.height - wmHeight - 20\r\n                })\r\n\r\n                initializedRef.current = true\r\n            }\r\n        }\r\n\r\n        // Use ResizeObserver to handle window resizes or modal transitions\r\n        const observer = new ResizeObserver(() => {\r\n            calculateCropSize()\r\n        })\r\n\r\n        if (containerRef.current) {\r\n            observer.observe(containerRef.current)\r\n        }\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [aspect, open, mediaSize])\r\n\r\n    useEffect(() => {\r\n        const handleMouseMove = (e: MouseEvent) => {\r\n            if (!isDraggingWatermark || !cropSize) return\r\n\r\n            const dx = e.clientX - dragStart.current.x\r\n            const dy = e.clientY - dragStart.current.y\r\n\r\n            setWatermarkPos(prev => {\r\n                const newX = prev.x + dx\r\n                const newY = prev.y + dy\r\n\r\n                // Constrain to crop box\r\n                const watermarkWidth = cropSize.width * 0.15 // 15% of crop width\r\n                // Maintain aspect ratio of watermark for height constraint\r\n                // We don't have exact height here easily without loading image meta, but we can approximate or use ref\r\n                const ratio = watermarkRef.current ? watermarkRef.current.naturalWidth / watermarkRef.current.naturalHeight : 1\r\n                const watermarkHeight = watermarkWidth / ratio\r\n\r\n                return {\r\n                    x: Math.min(Math.max(0, newX), cropSize.width - watermarkWidth),\r\n                    y: Math.min(Math.max(0, newY), cropSize.height - watermarkHeight)\r\n                }\r\n            })\r\n\r\n            dragStart.current = { x: e.clientX, y: e.clientY }\r\n        }\r\n\r\n        const handleMouseUp = () => {\r\n            setIsDraggingWatermark(false)\r\n        }\r\n\r\n        if (isDraggingWatermark) {\r\n            window.addEventListener('mousemove', handleMouseMove)\r\n            window.addEventListener('mouseup', handleMouseUp)\r\n        }\r\n\r\n        return () => {\r\n            window.removeEventListener('mousemove', handleMouseMove)\r\n            window.removeEventListener('mouseup', handleMouseUp)\r\n        }\r\n    }, [isDraggingWatermark, cropSize])\r\n\r\n    // Calculate offset to position watermark over the centered crop area\r\n    const cropOffset = containerRef.current && cropSize ? {\r\n        x: (containerRef.current.clientWidth - cropSize.width) / 2,\r\n        y: (containerRef.current.clientHeight - cropSize.height) / 2\r\n    } : { x: 0, y: 0 }\r\n\r\n    // Dynamic watermark based on background contrast\r\n    const getWatermarkUrl = () => {\r\n        if (watermarkTheme === 'dark') return '/images/logo/login.svg'\r\n        if (watermarkTheme === 'light') return '/logos/ticketly-logo.svg'\r\n\r\n        // Auto logic\r\n        const shouldUseLightLogo = allowBackgroundColor\r\n            ? getLuminance(backgroundColor) <= 128 // Dark BG -> Light Logo\r\n            : isDarkImage // Dark Image -> Light Logo\r\n\r\n        return shouldUseLightLogo\r\n            ? '/logos/ticketly-logo.svg' // Light/White Logo\r\n            : '/images/logo/login.svg' // Dark/Black Logo\r\n    }\r\n\r\n    const watermarkUrl = getWatermarkUrl()\r\n\r\n    const handleSave = async () => {\r\n        if (!croppedAreaPixels) return\r\n        try {\r\n            setLoading(true)\r\n\r\n            let currentBlob: Blob | null = null;\r\n            let currentMaxDim = 2500;\r\n            let currentQuality = 0.85;\r\n            let attempt = 0;\r\n            const maxAttempts = 3;\r\n\r\n            while (attempt < maxAttempts) {\r\n                console.log(`[Crop Export] Attempt ${attempt + 1}: Dim=${currentMaxDim}, Qual=${currentQuality}`);\r\n\r\n                currentBlob = await getCroppedImage(\r\n                    imageSrc,\r\n                    croppedAreaPixels,\r\n                    rotation,\r\n                    undefined,\r\n                    backgroundColor,\r\n                    hideWatermark ? undefined : {\r\n                        url: watermarkUrl,\r\n                        // Calculate relative position in the final cropped image\r\n                        x: (watermarkPos.x / (cropSize?.width || 1)) * croppedAreaPixels.width,\r\n                        y: (watermarkPos.y / (cropSize?.height || 1)) * croppedAreaPixels.height,\r\n                        // Width is 15% of the final cropped image width\r\n                        width: croppedAreaPixels.width * 0.15,\r\n                        // Calculate height based on aspect ratio\r\n                        height: (croppedAreaPixels.width * 0.15) / ((watermarkRef.current?.naturalWidth || 100) / (watermarkRef.current?.naturalHeight || 100))\r\n                    },\r\n                    allowBackgroundColor ? undefined : true,\r\n                    currentMaxDim,\r\n                    currentQuality\r\n                )\r\n\r\n                // If blob is under 4.5MB, we are good\r\n                if (currentBlob.size <= 4.5 * 1024 * 1024) {\r\n                    break;\r\n                }\r\n\r\n                // If still too large, reduce settings for next attempt\r\n                attempt++;\r\n                if (attempt === 1) {\r\n                    currentMaxDim = 2000;\r\n                    currentQuality = 0.75;\r\n                } else if (attempt === 2) {\r\n                    currentMaxDim = 1600;\r\n                    currentQuality = 0.65;\r\n                }\r\n            }\r\n\r\n            if (currentBlob) {\r\n                onConfirm(currentBlob)\r\n                onClose()\r\n            }\r\n        } catch (e) {\r\n            console.error(e)\r\n        } finally {\r\n            setLoading(false)\r\n        }\r\n    }\r\n\r\n    return (\r\n        <Modal open={open} handleClose={onClose}>\r\n            <div className=\"fixed inset-0 overflow-y-auto\">\r\n                <div className=\"flex min-h-full items-center justify-center px-4 py-2 text-center\">\r\n                    <Transition.Child\r\n                        as={Fragment}\r\n                        enter=\"ease-out duration-300\"\r\n                        enterFrom=\"opacity-0 scale-95\"\r\n                        enterTo=\"opacity-100 scale-100\"\r\n                        leave=\"ease-in duration-200\"\r\n                        leaveFrom=\"opacity-100 scale-100\"\r\n                        leaveTo=\"opacity-0 scale-95\"\r\n                    >\r\n                        <Dialog.Panel className=\"w-full max-w-5xl transform overflow-hidden rounded-2xl bg-white text-left align-middle shadow-xl transition-all\">\r\n                            {/* Header */}\r\n                            <div className=\"flex items-center justify-between border-b border-grey-200 px-6 py-4\">\r\n                                <div className=\"flex items-center gap-2\">\r\n                                    <div className=\"p-2 bg-primaryx-50 rounded-lg\">\r\n                                        <ImageIcon className=\"w-5 h-5 text-primaryx-600\" />\r\n                                    </div>\r\n                                    <Dialog.Title className=\"text-lg font-semibold text-grey-900\">\r\n                                        {cropShape === 'round' ? 'Crop profile picture' : 'Crop image'}\r\n                                    </Dialog.Title>\r\n                                </div>\r\n                                <button\r\n                                    onClick={onClose}\r\n                                    className=\"rounded-lg p-2 text-grey-400 hover:bg-grey-100 hover:text-grey-500 transition-colors focus:outline-none\"\r\n                                >\r\n                                    <X className=\"w-5 h-5\" />\r\n                                </button>\r\n                            </div>\r\n\r\n                            {/* Body */}\r\n                            <div className=\"p-0\">\r\n                                {/* Cropper Container */}\r\n                                <div\r\n                                    ref={containerRef}\r\n                                    className=\"relative h-[70vh] w-full bg-grey-900\"\r\n                                >\r\n                                    {/* Blurred Background Layer - Render BEFORE Cropper to be behind it */}\r\n                                    {!allowBackgroundColor && (\r\n                                        <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\r\n                                            <Image\r\n                                                src={imageSrc}\r\n                                                className=\"w-full h-full object-cover blur-[20px] scale-110 opacity-70\"\r\n                                                alt=\"blur-bg\"\r\n                                                width={1}\r\n                                                height={1}\r\n                                            />\r\n                                            <div className=\"absolute inset-0 bg-black/30\" />\r\n                                        </div>\r\n                                    )}\r\n\r\n                                    <Cropper\r\n                                        image={imageSrc}\r\n                                        crop={crop}\r\n                                        rotation={rotation}\r\n                                        zoom={zoom}\r\n                                        aspect={aspect}\r\n                                        cropShape={cropShape}\r\n                                        onCropChange={setCrop}\r\n                                        onRotationChange={setRotation}\r\n                                        onZoomChange={setZoom}\r\n                                        onMediaLoaded={(media) => {\r\n                                            setMediaSize(media)\r\n                                            // Reset init flag on new media\r\n                                            initializedRef.current = false\r\n                                        }}\r\n                                        maxZoom={3}\r\n                                        minZoom={0.1}\r\n                                        zoomSpeed={0.01}\r\n                                        onCropComplete={(_, areaPixels) =>\r\n                                            setCroppedAreaPixels(areaPixels)\r\n                                        }\r\n                                        cropSize={cropSize} // Force crop box size relative to container\r\n                                        restrictPosition={false} // Allows free drag of the image\r\n                                        objectFit=\"contain\" // Ensures image is contained within the view, allowing crop box to be larger\r\n                                        style={{\r\n                                            containerStyle: {\r\n                                                background: allowBackgroundColor ? backgroundColor : 'transparent',\r\n                                                width: '100%'\r\n                                            },\r\n                                            cropAreaStyle: {\r\n                                                border: '2px solid white',\r\n                                                boxShadow: '0 0 0 9999em rgba(0, 0, 0, 0.5)',\r\n                                            }\r\n                                        }}\r\n                                    />\r\n\r\n                                    {/* Watermark Overlay */}\r\n                                    {!hideWatermark && cropSize && (\r\n                                        <div\r\n                                            className=\"absolute pointer-events-none\"\r\n                                            style={{\r\n                                                left: cropOffset.x,\r\n                                                top: cropOffset.y,\r\n                                                width: cropSize.width,\r\n                                                height: cropSize.height,\r\n                                                border: '1px dashed rgba(255,255,255,0.3)',\r\n                                            }}\r\n                                        >\r\n                                            {/* We use specific standard size for watermark on screen */}\r\n                                            <div\r\n                                                className=\"absolute cursor-move select-none pointer-events-auto group\"\r\n                                                style={{\r\n                                                    left: watermarkPos.x,\r\n                                                    top: watermarkPos.y,\r\n                                                    width: `${cropSize.width * 0.15}px`, // 15% of crop width\r\n                                                }}\r\n                                                onMouseDown={(e) => {\r\n                                                    e.preventDefault()\r\n                                                    setIsDraggingWatermark(true)\r\n                                                    dragStart.current = { x: e.clientX, y: e.clientY }\r\n                                                }}\r\n                                            >\r\n                                                {/* Drag Tooltip - Always Visible */}\r\n                                                <div className=\"absolute -top-8 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2.5 py-1 bg-grey-900/90 text-white text-[10px] font-medium rounded-full transition-all duration-200 pointer-events-none whitespace-nowrap shadow-lg backdrop-blur-sm\">\r\n                                                    <Move className=\"w-3 h-3\" />\r\n                                                    <span>Drag to move</span>\r\n                                                </div>\r\n\r\n                                                {/* Image Container with Hover Effect */}\r\n                                                <div className=\"relative rounded transition-all duration-200 group-hover:ring-2 group-hover:ring-primaryx-500/50 group-hover:scale-[1.02]\">\r\n                                                    <Image\r\n                                                        ref={watermarkRef}\r\n                                                        src={watermarkUrl}\r\n                                                        alt=\"Watermark\"\r\n                                                        className=\"w-full h-auto opacity-90 block\"\r\n                                                        width={100}\r\n                                                        height={100}\r\n                                                    />\r\n\r\n                                                    {/* Center Move Icon Overlay */}\r\n                                                    <div className=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\r\n                                                        <div className=\"bg-black/20 p-1 rounded-full backdrop-blur-[1px]\">\r\n                                                            <Move className=\"w-4 h-4 text-white drop-shadow-md\" />\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    )}\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                            <div className=\"bg-white px-6 py-5 border-t border-grey-100 flex flex-col md:flex-row md:items-center gap-6\">\r\n                                {/* Zoom Control */}\r\n                                <div className=\"flex-1 w-full space-y-2\">\r\n                                    <div className=\"flex items-center gap-3\">\r\n                                        <ZoomOut className=\"w-4 h-4 text-grey-400\" />\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min={0.7}\r\n                                            max={3}\r\n                                            step={0.01}\r\n                                            value={zoom}\r\n                                            onChange={(e) => setZoom(Number(e.target.value))}\r\n                                            className=\"flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20\"\r\n                                        />\r\n                                        <ZoomIn className=\"w-4 h-4 text-grey-400\" />\r\n                                    </div>\r\n                                    <div className=\"flex items-center justify-between\">\r\n                                        <label className=\"text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2\">\r\n                                            Zoom\r\n                                        </label>\r\n                                        <span className=\"text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded\">\r\n                                            {Math.round(zoom * 100)}%\r\n                                        </span>\r\n                                    </div>\r\n\r\n                                </div>\r\n\r\n                                {/* Rotation Control */}\r\n                                {showRotationControl && (\r\n                                    <div className=\"flex-1 w-full space-y-2\">\r\n                                        <div className=\"flex items-center justify-between\">\r\n                                            <label className=\"text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2\">\r\n                                                <RotateCw className=\"w-3.5 h-3.5\" />\r\n                                                Rotate\r\n                                            </label>\r\n                                            <span className=\"text-xs font-mono text-grey-400 bg-grey-50 px-2 py-0.5 rounded\">\r\n                                                {rotation}°\r\n                                            </span>\r\n                                        </div>\r\n                                        <div className=\"flex items-center gap-3\">\r\n                                            <span className=\"text-[10px] text-grey-400 font-medium\">0°</span>\r\n                                            <input\r\n                                                type=\"range\"\r\n                                                min={0}\r\n                                                max={360}\r\n                                                step={1}\r\n                                                value={rotation}\r\n                                                onChange={(e) => setRotation(Number(e.target.value))}\r\n                                                className=\"flex-1 h-1.5 bg-grey-100 rounded-lg appearance-none cursor-pointer accent-primaryx-600 hover:accent-primaryx-700 focus:outline-none focus:ring-2 focus:ring-primaryx-500/20\"\r\n                                            />\r\n                                            <span className=\"text-[10px] text-grey-400 font-medium\">360°</span>\r\n                                        </div>\r\n                                    </div>\r\n                                )}\r\n\r\n                                {/* Divider for desktop */}\r\n                                <div className=\"hidden md:block w-px h-10 bg-grey-200\" />\r\n\r\n                                {/* Watermark Theme Control */}\r\n                                {!hideWatermark && (\r\n                                    <div className=\"flex flex-col gap-1.5 min-w-[140px]\">\r\n                                        <label className=\"text-xs font-semibold text-grey-500 uppercase tracking-wider flex items-center gap-2\">\r\n                                            <Stamp className=\"w-3.5 h-3.5\" />\r\n                                            Watermark\r\n                                        </label>\r\n                                        <div className=\"flex items-center gap-1 bg-grey-50 p-1 rounded-lg border border-grey-200\">\r\n                                            {(['auto', 'light', 'dark'] as const).map((theme) => (\r\n                                                <button\r\n                                                    key={theme}\r\n                                                    onClick={() => setWatermarkTheme(theme)}\r\n                                                    className={`\r\n                                                        flex-1 px-2 py-1 text-[10px] font-medium rounded-md transition-all uppercase\r\n                                                        ${watermarkTheme === theme\r\n                                                            ? 'bg-white text-grey-900 shadow-sm ring-1 ring-black/5'\r\n                                                            : 'text-grey-500 hover:text-grey-700 hover:bg-grey-100'\r\n                                                        }\r\n                                                    `}\r\n                                                >\r\n                                                    {theme}\r\n                                                </button>\r\n                                            ))}\r\n                                        </div>\r\n                                    </div>\r\n                                )}\r\n\r\n                                {/* Background Color - Conditional */}\r\n                                {allowBackgroundColor && (\r\n                                    <>\r\n                                        <div className=\"hidden md:block w-px h-10 bg-grey-200\" />\r\n                                        <label htmlFor=\"cropper-background-color\" className=\"flex items-center gap-3 p-1.5 pr-4 rounded-xl border border-grey-200 bg-white shadow-sm hover:border-grey-300 transition-colors cursor-pointer group relative overflow-hidden\">\r\n                                            <div\r\n                                                className=\"w-8 h-8 rounded-lg border border-grey-200 shadow-inner flex items-center justify-center overflow-hidden relative\"\r\n                                                style={{ backgroundColor: backgroundColor }}\r\n                                            >\r\n                                                {/* Invisible Color Input Overlay */}\r\n                                                <input\r\n                                                    type=\"color\"\r\n                                                    id=\"cropper-background-color\"\r\n                                                    value={backgroundColor}\r\n                                                    onChange={(e) => setBackgroundColor(e.target.value)}\r\n                                                    className=\"absolute inset-0 opacity-0 w-full h-full cursor-pointer p-0 border-0\"\r\n                                                />\r\n                                            </div>\r\n                                            <div className=\"flex flex-col pointer-events-none\">\r\n                                                <span className=\"text-xs font-semibold text-grey-700 group-hover:text-grey-900\">Background</span>\r\n                                                <span className=\"text-[10px] text-grey-400 font-mono uppercase\">{backgroundColor}</span>\r\n                                            </div>\r\n                                            <Palette className=\"w-4 h-4 text-grey-400 ml-2\" />\r\n                                        </label>\r\n                                    </>\r\n                                )}\r\n\r\n                                {/* Divider for desktop */}\r\n                                <div className=\"hidden md:block w-px h-10 bg-grey-200\" />\r\n\r\n                                <div className=\"flex items-center justify-end gap-3\">\r\n                                    <button\r\n                                        type=\"button\"\r\n                                        onClick={onClose}\r\n                                        className=\"rounded-lg border border-grey-300 bg-white px-4 py-2 text-sm font-medium text-grey-700 hover:bg-grey-50 focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 transition-all shadow-sm\"\r\n                                    >\r\n                                        Cancel\r\n                                    </button>\r\n                                    <Button\r\n                                        type=\"button\"\r\n                                        onClick={handleSave}\r\n                                        disabled={loading}\r\n                                        className=\"relative inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primaryx-500 focus:ring-offset-2 disabled:opacity-70 disabled:cursor-not-allowed\"\r\n                                    >\r\n                                        {loading ? (\r\n                                            <>\r\n                                                <svg className=\"animate-spin -ml-1 mr-2 h-4 w-4 text-white\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n                                                    <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\r\n                                                    <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\r\n                                                </svg>\r\n                                                Processing...\r\n                                            </>\r\n                                        ) : (\r\n                                            'Apply Crop'\r\n                                        )}\r\n                                    </Button>\r\n                                </div>\r\n                            </div>\r\n                        </Dialog.Panel>\r\n                    </Transition.Child>\r\n                </div>\r\n            </div>\r\n        </Modal>\r\n    )\r\n}\r\n"],"names":["Fragment","ImageIcon","Image"],"mappings":"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"}

package/dist/components/InformationPopover/InformationPopover.js

@@ -1,15 +1,15 @@
-import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { Info } from "lucide-react";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import Info from "../../node_modules/lucide-react/dist/esm/icons/info.js";
 function InformationPopover({
   text,
   className = "",
   side = "top"
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { content: text, placement: side, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(Tooltip, { content: text, placement: side, children: /* @__PURE__ */ jsx(
     Info,
     {
-      className: `ui-h-4 ui-w-4 ui-text-grey-700 hover:ui-text-grey-800 ui-cursor-default ui-transition-colors ${className}`
+      className: `h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors ${className}`
     }
   ) });
 }

package/dist/components/InformationPopover/InformationPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationPopover.js","sources":["../../../src/components/InformationPopover/InformationPopover.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport React from \"react\";\n\ninterface InformationPopoverProps {\n  text: string;\n  className?: string;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport default function InformationPopover({\n  text,\n  className = \"\",\n  side = \"top\",\n}: InformationPopoverProps) {\n  return (\n    <Tooltip content={text} placement={side}>\n      <Info\n        className={`ui-h-4 ui-w-4 ui-text-grey-700 hover:ui-text-grey-800 ui-cursor-default ui-transition-colors ${className}`}\n      />\n    </Tooltip>\n  );\n}\n"],"names":["jsx"],"mappings":";;;AAUA,SAAwB,mBAAmB;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAA4B;AAC1B,SACEA,kCAAAA,IAAC,SAAA,EAAQ,SAAS,MAAM,WAAW,MACjC,UAAAA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,gGAAgG,SAAS;AAAA,IAAA;AAAA,EAAA,GAExH;AAEJ;"}
+{"version":3,"file":"InformationPopover.js","sources":["../../../src/components/InformationPopover/InformationPopover.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\r\nimport { Tooltip } from \"../Tooltip/Tooltip\";\r\nimport React from \"react\";\r\n\r\ninterface InformationPopoverProps {\r\n  text: string;\r\n  className?: string;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n}\r\n\r\nexport default function InformationPopover({\r\n  text,\r\n  className = \"\",\r\n  side = \"top\",\r\n}: InformationPopoverProps) {\r\n  return (\r\n    <Tooltip content={text} placement={side}>\r\n      <Info\r\n        className={`h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors ${className}`}\r\n      />\r\n    </Tooltip>\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;AAUA,SAAwB,mBAAmB;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAA4B;AAC1B,SACE,oBAAC,SAAA,EAAQ,SAAS,MAAM,WAAW,MACjC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8EAA8E,SAAS;AAAA,IAAA;AAAA,EAAA,GAEtG;AAEJ;"}

package/dist/components/InformationPopover.d.ts

@@ -0,0 +1,7 @@
+interface InformationPopoverProps {
+    text: string;
+    className?: string;
+    side?: "top" | "bottom" | "left" | "right";
+}
+export default function InformationPopover({ text, className, side, }: InformationPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InformationPopover.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+import Tooltip from "./ui/Tooltip.js";
+function InformationPopover({
+  text,
+  className = "",
+  side = "top"
+}) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: text, placement: side, children: /* @__PURE__ */ jsx(
+    Info,
+    {
+      className: `h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors ${className}`
+    }
+  ) });
+}
+export {
+  InformationPopover as default
+};
+//# sourceMappingURL=InformationPopover.js.map

package/dist/components/InformationPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InformationPopover.js","sources":["../../src/components/InformationPopover.tsx"],"sourcesContent":["import { Info } from \"lucide-react\";\r\nimport Tooltip from \"@/components/ui/Tooltip\";\r\n\r\ninterface InformationPopoverProps {\r\n  text: string;\r\n  className?: string;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n}\r\n\r\nexport default function InformationPopover({\r\n  text,\r\n  className = \"\",\r\n  side = \"top\",\r\n}: InformationPopoverProps) {\r\n  return (\r\n    <Tooltip content={text} placement={side}>\r\n      <Info\r\n        className={`h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors ${className}`}\r\n      />\r\n    </Tooltip>\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;AASA,SAAwB,mBAAmB;AAAA,EACzC;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAA4B;AAC1B,SACE,oBAAC,SAAA,EAAQ,SAAS,MAAM,WAAW,MACjC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,8EAA8E,SAAS;AAAA,IAAA;AAAA,EAAA,GAEtG;AAEJ;"}