@ikatec/nebula-react 1.0.26 → 1.0.27

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React8 from 'react';
-import React8__default, { createContext, forwardRef, useMemo, useState, useEffect, useCallback, useContext, useRef } from 'react';
+import React8__default, { createContext, forwardRef, useMemo, useState, useEffect, useCallback, useContext, useRef, useId } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, UserIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
+import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, UserIcon, MinusIcon, PlusIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import Select, { components } from 'react-select';
 import Creatable from 'react-select/creatable';
@@ -27,6 +27,7 @@ import { formatDate, isValid, addMonths, isSameDay, isBefore, isAfter } from 'da
 import { DayPicker } from 'react-day-picker';
 import { ptBR, enUS, es } from 'react-day-picker/locale';
 import { useMask } from '@react-input/mask';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 // src/button.tsx
 
@@ -1117,8 +1118,16 @@ var messages5 = {
 };
 var file_upload_default = messages5;
 
+// src/i18n/messages/en/cropper.ts
+var messages6 = {
+  applyButtonLabel: "Apply",
+  dialogTitle: "Adjust image"
+};
+var cropper_default = messages6;
+
 // src/i18n/messages/en/index.ts
 var enMessages = {
+  cropper: cropper_default,
   pagination: pagination_default,
   inputSelect: input_select_default,
   inputPhone: input_phone_default,
@@ -1127,7 +1136,7 @@ var enMessages = {
 };
 
 // src/i18n/messages/es/pagination.ts
-var messages6 = {
+var messages7 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1138,16 +1147,16 @@ var messages6 = {
     return `P\xE1gina ${currentPage} de ${totalPages}`;
   }
 };
-var pagination_default2 = messages6;
+var pagination_default2 = messages7;
 
 // src/i18n/messages/es/input-select.ts
-var messages7 = {
+var messages8 = {
   noOptions: "No hay opciones disponibles"
 };
-var input_select_default2 = messages7;
+var input_select_default2 = messages8;
 
 // src/i18n/messages/es/input-phone.ts
-var messages8 = {
+var messages9 = {
   countries: {
     empty: "Seleccionar",
     AF: "Afganist\xE1n",
@@ -1397,22 +1406,30 @@ var messages8 = {
     ZW: "Zimbabue"
   }
 };
-var input_phone_default2 = messages8;
+var input_phone_default2 = messages9;
 
 // src/i18n/messages/es/time-picker.ts
-var messages9 = {
+var messages10 = {
   label: "Tiempo"
 };
-var time_picker_default2 = messages9;
+var time_picker_default2 = messages10;
 
 // src/i18n/messages/es/file-upload.ts
-var messages10 = {
+var messages11 = {
   deleteAll: "Remover todos"
 };
-var file_upload_default2 = messages10;
+var file_upload_default2 = messages11;
+
+// src/i18n/messages/es/cropper.ts
+var messages12 = {
+  applyButtonLabel: "Aplicar",
+  dialogTitle: "Ajustar la imagen"
+};
+var cropper_default2 = messages12;
 
 // src/i18n/messages/es/index.ts
 var esMessages = {
+  cropper: cropper_default2,
   pagination: pagination_default2,
   inputSelect: input_select_default2,
   inputPhone: input_phone_default2,
@@ -1421,7 +1438,7 @@ var esMessages = {
 };
 
 // src/i18n/messages/pt-br/pagination.ts
-var messages11 = {
+var messages13 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1432,16 +1449,16 @@ var messages11 = {
     return `P\xE1gina ${currentPage} de ${totalPages}`;
   }
 };
-var pagination_default3 = messages11;
+var pagination_default3 = messages13;
 
 // src/i18n/messages/pt-br/input-select.ts
-var messages12 = {
+var messages14 = {
   noOptions: "Nenhuma op\xE7\xE3o dispon\xEDvel"
 };
-var input_select_default3 = messages12;
+var input_select_default3 = messages14;
 
 // src/i18n/messages/pt-br/input-phone.ts
-var messages13 = {
+var messages15 = {
   countries: {
     empty: "Selecione",
     AF: "Afeganist\xE3o",
@@ -1691,19 +1708,26 @@ var messages13 = {
     ZW: "Zimb\xE1bue"
   }
 };
-var input_phone_default3 = messages13;
+var input_phone_default3 = messages15;
 
 // src/i18n/messages/pt-br/time-picker.ts
-var messages14 = {
+var messages16 = {
   label: "Hor\xE1rio"
 };
-var time_picker_default3 = messages14;
+var time_picker_default3 = messages16;
 
 // src/i18n/messages/pt-br/file-upload.ts
-var messages15 = {
+var messages17 = {
   deleteAll: "Remover todos"
 };
-var file_upload_default3 = messages15;
+var file_upload_default3 = messages17;
+
+// src/i18n/messages/pt-br/cropper.ts
+var messages18 = {
+  applyButtonLabel: "Aplicar",
+  dialogTitle: "Ajustar imagem"
+};
+var cropper_default3 = messages18;
 
 // src/i18n/messages/pt-br/index.ts
 var ptBrMessages = {
@@ -1711,7 +1735,8 @@ var ptBrMessages = {
   inputSelect: input_select_default3,
   inputPhone: input_phone_default3,
   timePicker: time_picker_default3,
-  fileUpload: file_upload_default3
+  fileUpload: file_upload_default3,
+  cropper: cropper_default3
 };
 
 // src/i18n/message-storage-handler.ts
@@ -1736,7 +1761,7 @@ var setNebulaLanguage = (language) => {
   }
   localStorage.setItem(getNebulaI18nStorageKey(), language);
 };
-var messages16 = /* @__PURE__ */ new Map([
+var messages19 = /* @__PURE__ */ new Map([
   [null, enMessages],
   [void 0, enMessages],
   ["en-US", enMessages],
@@ -1754,14 +1779,14 @@ var NebulaI18nProvider = ({
     () => customI18nStorageKey ?? localStorageKey,
     [customI18nStorageKey]
   );
-  const [messages17, setMessages] = useState(
-    messages16.get(getNebulaLanguage()) ?? messages16.get("en-US")
+  const [messages20, setMessages] = useState(
+    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US")
   );
   const handleStorageChange = useCallback(
     ({ detail }) => {
       if (detail.key === storageKey) {
         setMessages(
-          messages16.get(detail.value) ?? messages16.get("en-US")
+          messages19.get(detail.value) ?? messages19.get("en-US")
         );
       }
     },
@@ -1805,7 +1830,7 @@ var NebulaI18nProvider = ({
     NebulaI18nContext.Provider,
     {
       value: {
-        messages: messages17,
+        messages: messages20,
         locale: getNebulaLanguage()
       },
       children
@@ -1827,7 +1852,7 @@ var Pagination = ({
   onChangePage,
   ...props
 }) => {
-  const { messages: messages17 } = useNebulaI18n();
+  const { messages: messages20 } = useNebulaI18n();
   const totalPages = useMemo(() => {
     return Math.ceil(total / (pageSize || 1));
   }, [total, pageSize]);
@@ -1860,13 +1885,13 @@ var Pagination = ({
   }, [totalPages, pageSize, total]);
   const totalResultsLabel = useMemo(() => {
     if (page === totalPages) {
-      return messages17.pagination.totalResultsLabel(lastPageSize, total);
+      return messages20.pagination.totalResultsLabel(lastPageSize, total);
     }
-    return messages17.pagination.totalResultsLabel(pageSize, total);
-  }, [messages17.pagination, pageSize, total, page, totalPages, lastPageSize]);
+    return messages20.pagination.totalResultsLabel(pageSize, total);
+  }, [messages20.pagination, pageSize, total, page, totalPages, lastPageSize]);
   const currentPageLabel = useMemo(
-    () => messages17.pagination.currentPageLabel(normalizedPage, totalPages),
-    [messages17.pagination, normalizedPage, totalPages]
+    () => messages20.pagination.currentPageLabel(normalizedPage, totalPages),
+    [messages20.pagination, normalizedPage, totalPages]
   );
   return /* @__PURE__ */ jsxs(
     "nav",
@@ -2139,7 +2164,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
     isError = false,
     ...props
   }) => {
-    const { messages: messages17 } = useNebulaI18n();
+    const { messages: messages20 } = useNebulaI18n();
     const customClassNames = useMemo(() => {
       return {
         control: (props2) => controlStyles(props2, isError),
@@ -2186,7 +2211,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
         isDisabled: disabled,
         components: customComponents,
         classNames: customClassNames,
-        noOptionsMessage: () => /* @__PURE__ */ jsx("p", { children: messages17.inputSelect.noOptions }),
+        noOptionsMessage: () => /* @__PURE__ */ jsx("p", { children: messages20.inputSelect.noOptions }),
         ...props
       }
     );
@@ -2332,16 +2357,17 @@ var DialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React8.forwardRef(({ className, children, portal = false, ...props }, ref) => {
-  const Comp = portal ? DialogPortal : React8.Fragment;
-  return /* @__PURE__ */ jsxs(Comp, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        ref,
-        className: cn(
-          `rounded-2xl
+var DialogContent = React8.forwardRef(
+  ({ className, children, portal = false, showClose = true, ...props }, ref) => {
+    const Comp = portal ? DialogPortal : React8.Fragment;
+    return /* @__PURE__ */ jsxs(Comp, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(
+            `rounded-2xl
         fixed
         left-[50%]
         top-[50%]
@@ -2366,29 +2392,30 @@ var DialogContent = React8.forwardRef(({ className, children, portal = false, ..
         data-[state=closed]:slide-out-to-top-[48%]
         data-[state=open]:slide-in-from-left-1/2
         data-[state=open]:slide-in-from-top-[48%]`,
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsx(
-            DialogPrimitive.Close,
-            {
-              asChild: true,
-              className: `absolute
-          right-4
-          top-4`,
-              children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", icon: true, children: [
-                /* @__PURE__ */ jsx(X, { className: "nebula-ds !h-4 !w-4 !text-dialog-icon" }),
-                /* @__PURE__ */ jsx("span", { className: "nebula-ds sr-only", children: "Close" })
-              ] })
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            showClose && /* @__PURE__ */ jsx(
+              DialogPrimitive.Close,
+              {
+                asChild: true,
+                className: `absolute
+              right-4
+              top-4`,
+                children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", icon: true, children: [
+                  /* @__PURE__ */ jsx(X, { className: "nebula-ds !h-4 !w-4 !text-dialog-icon" }),
+                  /* @__PURE__ */ jsx("span", { className: "nebula-ds sr-only", children: "Close" })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
@@ -3204,13 +3231,13 @@ function custom(message, options) {
     }
   );
 }
-async function promise(promise2, messages17, options) {
+async function promise(promise2, messages20, options) {
   const loadingToast = toast$1.custom(
     (t) => /* @__PURE__ */ jsx(
       ToastComponent,
       {
         type: "info",
-        message: messages17.loading,
+        message: messages20.loading,
         options,
         t
       }
@@ -3224,7 +3251,7 @@ async function promise(promise2, messages17, options) {
         ToastComponent,
         {
           type: "success",
-          message: messages17.success,
+          message: messages20.success,
           options,
           t
         }
@@ -3239,7 +3266,7 @@ async function promise(promise2, messages17, options) {
         ToastComponent,
         {
           type: "error",
-          message: messages17.error,
+          message: messages20.error,
           options,
           t
         }
@@ -3409,8 +3436,8 @@ var CountrySelect = ({
   const handleSelect = (event) => {
     onChange(event.target.value);
   };
-  const { messages: messages17 } = useNebulaI18n();
-  const { countries } = messages17.inputPhone;
+  const { messages: messages20 } = useNebulaI18n();
+  const { countries } = messages20.inputPhone;
   return /* @__PURE__ */ jsxs("div", { className: "nebula-ds rounded-s-[20px] relative inline-flex items-center self-stretch py-2 ps-4 pe-2 transition-[color,box-shadow] outline-none has-disabled:pointer-events-none has-disabled:opacity-50", children: [
     /* @__PURE__ */ jsxs("div", { className: "nebula-ds inline-flex items-center gap-1", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
@@ -4230,7 +4257,7 @@ var InputDateTimePickerSingle = ({
     formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
-  const { locale, messages: messages17 } = useNebulaI18n();
+  const { locale, messages: messages20 } = useNebulaI18n();
   const [month, setMonth] = useState(/* @__PURE__ */ new Date());
   const inputTimeRef = useRef(null);
   const handleClearValue = () => {
@@ -4402,7 +4429,7 @@ var InputDateTimePickerSingle = ({
             disabled: disabledDates,
             footer: /* @__PURE__ */ jsxs(Space, { className: "nebula-ds items-center", children: [
               /* @__PURE__ */ jsxs(Label, { children: [
-                messages17.timePicker.label,
+                messages20.timePicker.label,
                 ":"
               ] }),
               /* @__PURE__ */ jsx(
@@ -4944,9 +4971,11 @@ var ProfileImage = ({
   onError,
   maxFiles = Infinity,
   onRemove,
+  image,
   ...rest
 }) => {
   const maxSize = maxSizeMB * 1024 * 1024;
+  const id = useId();
   const [
     { files, isDragging, errors },
     {
@@ -4959,6 +4988,15 @@ var ProfileImage = ({
       getInputProps
     }
   ] = useFileUpload({
+    initialFiles: image ? [
+      {
+        id,
+        url: image,
+        name: image,
+        size: 0,
+        type: "image"
+      }
+    ] : [],
     multiple: false,
     maxSize: maxSize > 0 ? maxSize : void 0,
     accept: "image/*",
@@ -5034,6 +5072,1026 @@ var ProfileImage = ({
   ] });
 };
 ProfileImage.displayName = "ProfileImage";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+var CropperContext = createContext(null);
+var useCropperContext = () => {
+  const context = useContext(CropperContext);
+  if (!context) {
+    throw new Error("useCropperContext must be used within a Cropper.Root");
+  }
+  return context;
+};
+var CropperRoot = ({
+  image,
+  cropPadding = 25,
+  aspectRatio = 1,
+  minZoom = 1,
+  maxZoom = 3,
+  zoomSensitivity = 5e-3,
+  keyboardStep = 10,
+  className,
+  style,
+  zoom: zoomProp,
+  onCropChange,
+  onZoomChange,
+  children,
+  ...restProps
+}) => {
+  const descriptionId = useId();
+  const [imgWidth, setImgWidth] = useState(null);
+  const [imgHeight, setImgHeight] = useState(null);
+  const containerRef = useRef(null);
+  const [cropAreaWidth, setCropAreaWidth] = useState(0);
+  const [cropAreaHeight, setCropAreaHeight] = useState(0);
+  const [imageWrapperWidth, setImageWrapperWidth] = useState(0);
+  const [imageWrapperHeight, setImageWrapperHeight] = useState(0);
+  const [offsetX, setOffsetX] = useState(0);
+  const [offsetY, setOffsetY] = useState(0);
+  const [internalZoom, setInternalZoom] = useState(minZoom);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartPointRef = useRef({ x: 0, y: 0 });
+  const dragStartOffsetRef = useRef({ x: 0, y: 0 });
+  const latestRestrictedOffsetRef = useRef({
+    x: offsetX,
+    y: offsetY
+  });
+  const latestZoomRef = useRef(internalZoom);
+  const isInitialSetupDoneRef = useRef(false);
+  const initialPinchDistanceRef = useRef(0);
+  const initialPinchZoomRef = useRef(1);
+  const isPinchingRef = useRef(false);
+  const hasWarnedRef = useRef(false);
+  const isZoomControlled = zoomProp !== void 0;
+  const effectiveZoom = isZoomControlled ? zoomProp : internalZoom;
+  const updateZoom = useCallback(
+    (newZoomValue) => {
+      const clampedZoom = clamp(newZoomValue, minZoom, maxZoom);
+      if (onZoomChange) {
+        onZoomChange(clampedZoom);
+      } else if (!isZoomControlled) {
+        setInternalZoom(clampedZoom);
+      }
+      return clampedZoom;
+    },
+    [minZoom, maxZoom, onZoomChange, isZoomControlled]
+  );
+  useEffect(() => {
+    latestZoomRef.current = effectiveZoom;
+  }, [effectiveZoom]);
+  useEffect(() => {
+    setOffsetX(0);
+    setOffsetY(0);
+    if (!isZoomControlled) {
+      setInternalZoom(minZoom);
+    }
+    isInitialSetupDoneRef.current = false;
+    if (!image) {
+      setImgWidth(null);
+      setImgHeight(null);
+      return;
+    }
+    let isMounted = true;
+    const img = new Image();
+    img.onload = () => {
+      if (isMounted) {
+        setImgWidth(img.naturalWidth);
+        setImgHeight(img.naturalHeight);
+      }
+    };
+    img.onerror = () => {
+      if (isMounted) {
+        setImgWidth(null);
+        setImgHeight(null);
+      }
+    };
+    img.src = image;
+    return () => {
+      isMounted = false;
+    };
+  }, [image, minZoom, isZoomControlled]);
+  const updateCropAreaDimensions = useCallback(
+    (containerWidth, containerHeight) => {
+      if (containerWidth <= 0 || containerHeight <= 0) {
+        setCropAreaWidth(0);
+        setCropAreaHeight(0);
+        return;
+      }
+      const maxPossibleWidth = Math.max(0, containerWidth - cropPadding * 2);
+      const maxPossibleHeight = Math.max(0, containerHeight - cropPadding * 2);
+      let targetCropW = 0;
+      let targetCropH = 0;
+      if (maxPossibleWidth / aspectRatio >= maxPossibleHeight) {
+        targetCropH = maxPossibleHeight;
+        targetCropW = targetCropH * aspectRatio;
+      } else {
+        targetCropW = maxPossibleWidth;
+        targetCropH = targetCropW / aspectRatio;
+      }
+      setCropAreaWidth(targetCropW);
+      setCropAreaHeight(targetCropH);
+    },
+    [aspectRatio, cropPadding]
+  );
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) updateCropAreaDimensions(width, height);
+      }
+    });
+    observer.observe(element);
+    const initialWidth = element.clientWidth;
+    const initialHeight = element.clientHeight;
+    if (initialWidth > 0 && initialHeight > 0)
+      updateCropAreaDimensions(initialWidth, initialHeight);
+    return () => observer.disconnect();
+  }, [updateCropAreaDimensions]);
+  useEffect(() => {
+    if (cropAreaWidth <= 0 || cropAreaHeight <= 0 || !imgWidth || !imgHeight) {
+      setImageWrapperWidth(0);
+      setImageWrapperHeight(0);
+      return;
+    }
+    const naturalAspect = imgWidth / imgHeight;
+    const cropAspect = cropAreaWidth / cropAreaHeight;
+    let targetWrapperWidth = 0;
+    let targetWrapperHeight = 0;
+    if (naturalAspect >= cropAspect) {
+      targetWrapperHeight = cropAreaHeight;
+      targetWrapperWidth = targetWrapperHeight * naturalAspect;
+    } else {
+      targetWrapperWidth = cropAreaWidth;
+      targetWrapperHeight = targetWrapperWidth / naturalAspect;
+    }
+    setImageWrapperWidth(targetWrapperWidth);
+    setImageWrapperHeight(targetWrapperHeight);
+  }, [cropAreaWidth, cropAreaHeight, imgWidth, imgHeight]);
+  const restrictOffset = useCallback(
+    (dragOffsetX, dragOffsetY, currentZoom) => {
+      if (imageWrapperWidth <= 0 || imageWrapperHeight <= 0 || cropAreaWidth <= 0 || cropAreaHeight <= 0)
+        return { x: 0, y: 0 };
+      const effectiveWrapperWidth = imageWrapperWidth * currentZoom;
+      const effectiveWrapperHeight = imageWrapperHeight * currentZoom;
+      const maxDragX = Math.max(0, (effectiveWrapperWidth - cropAreaWidth) / 2);
+      const maxDragY = Math.max(
+        0,
+        (effectiveWrapperHeight - cropAreaHeight) / 2
+      );
+      return {
+        x: clamp(dragOffsetX, -maxDragX, maxDragX),
+        y: clamp(dragOffsetY, -maxDragY, maxDragY)
+      };
+    },
+    [imageWrapperWidth, imageWrapperHeight, cropAreaWidth, cropAreaHeight]
+  );
+  const calculateCropData = useCallback(
+    (finalOffsetX, finalOffsetY, finalZoom) => {
+      const currentOffsetX = finalOffsetX !== void 0 ? finalOffsetX : latestRestrictedOffsetRef.current.x;
+      const currentOffsetY = finalOffsetY !== void 0 ? finalOffsetY : latestRestrictedOffsetRef.current.y;
+      const currentZoom = finalZoom !== void 0 ? finalZoom : effectiveZoom;
+      if (!imgWidth || !imgHeight || imageWrapperWidth <= 0 || imageWrapperHeight <= 0 || cropAreaWidth <= 0 || cropAreaHeight <= 0)
+        return null;
+      const scaledWrapperWidth = imageWrapperWidth * currentZoom;
+      const scaledWrapperHeight = imageWrapperHeight * currentZoom;
+      const topLeftOffsetX = currentOffsetX + (cropAreaWidth - scaledWrapperWidth) / 2;
+      const topLeftOffsetY = currentOffsetY + (cropAreaHeight - scaledWrapperHeight) / 2;
+      const baseScale = imgWidth / imageWrapperWidth;
+      if (isNaN(baseScale) || baseScale === 0) return null;
+      const sx = -topLeftOffsetX * baseScale / currentZoom;
+      const sy = -topLeftOffsetY * baseScale / currentZoom;
+      const sWidth = cropAreaWidth * baseScale / currentZoom;
+      const sHeight = cropAreaHeight * baseScale / currentZoom;
+      const finalX = clamp(Math.round(sx), 0, imgWidth);
+      const finalY = clamp(Math.round(sy), 0, imgHeight);
+      const finalWidth = clamp(Math.round(sWidth), 0, imgWidth - finalX);
+      const finalHeight = clamp(Math.round(sHeight), 0, imgHeight - finalY);
+      if (finalWidth <= 0 || finalHeight <= 0) return null;
+      return { x: finalX, y: finalY, width: finalWidth, height: finalHeight };
+    },
+    [
+      imgWidth,
+      imgHeight,
+      imageWrapperWidth,
+      imageWrapperHeight,
+      cropAreaWidth,
+      cropAreaHeight,
+      effectiveZoom
+    ]
+  );
+  useEffect(() => {
+    if (imageWrapperWidth > 0 && imageWrapperHeight > 0 && cropAreaWidth > 0 && cropAreaHeight > 0) {
+      const currentZoomForSetup = effectiveZoom;
+      if (!isInitialSetupDoneRef.current) {
+        const initialX = 0;
+        const initialY = 0;
+        const restrictedInitial = restrictOffset(
+          initialX,
+          initialY,
+          currentZoomForSetup
+        );
+        setOffsetX(restrictedInitial.x);
+        setOffsetY(restrictedInitial.y);
+        if (!isZoomControlled) setInternalZoom(currentZoomForSetup);
+        dragStartOffsetRef.current = restrictedInitial;
+        latestRestrictedOffsetRef.current = restrictedInitial;
+        latestZoomRef.current = currentZoomForSetup;
+        if (onCropChange)
+          onCropChange(
+            calculateCropData(
+              restrictedInitial.x,
+              restrictedInitial.y,
+              currentZoomForSetup
+            )
+          );
+        isInitialSetupDoneRef.current = true;
+      } else {
+        const restrictedCurrent = restrictOffset(
+          latestRestrictedOffsetRef.current.x,
+          latestRestrictedOffsetRef.current.y,
+          currentZoomForSetup
+        );
+        if (restrictedCurrent.x !== latestRestrictedOffsetRef.current.x || restrictedCurrent.y !== latestRestrictedOffsetRef.current.y) {
+          setOffsetX(restrictedCurrent.x);
+          setOffsetY(restrictedCurrent.y);
+          latestRestrictedOffsetRef.current = restrictedCurrent;
+          dragStartOffsetRef.current = restrictedCurrent;
+        }
+        if (onCropChange)
+          onCropChange(
+            calculateCropData(
+              restrictedCurrent.x,
+              restrictedCurrent.y,
+              currentZoomForSetup
+            )
+          );
+      }
+    } else {
+      isInitialSetupDoneRef.current = false;
+      setOffsetX(0);
+      setOffsetY(0);
+      if (!isZoomControlled) setInternalZoom(minZoom);
+      dragStartOffsetRef.current = { x: 0, y: 0 };
+      latestRestrictedOffsetRef.current = { x: 0, y: 0 };
+      latestZoomRef.current = effectiveZoom;
+      if (onCropChange) onCropChange(null);
+    }
+  }, [
+    imageWrapperWidth,
+    imgHeight,
+    cropAreaWidth,
+    cropAreaHeight,
+    restrictOffset,
+    onCropChange,
+    calculateCropData,
+    minZoom,
+    effectiveZoom,
+    isZoomControlled,
+    updateZoom,
+    imageWrapperHeight
+  ]);
+  useEffect(() => {
+    const checkTimeout = setTimeout(() => {
+      if (containerRef.current && !hasWarnedRef.current) {
+        const hasDescription = document.getElementById(descriptionId);
+        if (!hasDescription) {
+          hasWarnedRef.current = true;
+        }
+      }
+    }, 100);
+    return () => clearTimeout(checkTimeout);
+  }, [descriptionId]);
+  const handleInteractionEnd = useCallback(() => {
+    if (onCropChange) {
+      const finalData = calculateCropData(
+        latestRestrictedOffsetRef.current.x,
+        latestRestrictedOffsetRef.current.y,
+        effectiveZoom
+      );
+      onCropChange(finalData);
+    }
+  }, [onCropChange, calculateCropData, effectiveZoom]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0 || !containerRef.current) return;
+      e.preventDefault();
+      setIsDragging(true);
+      isPinchingRef.current = false;
+      dragStartPointRef.current = { x: e.clientX, y: e.clientY };
+      dragStartOffsetRef.current = {
+        x: latestRestrictedOffsetRef.current.x,
+        y: latestRestrictedOffsetRef.current.y
+      };
+      const handleMouseMove = (ev) => {
+        const deltaX = ev.clientX - dragStartPointRef.current.x;
+        const deltaY = ev.clientY - dragStartPointRef.current.y;
+        const targetOffsetX = dragStartOffsetRef.current.x + deltaX;
+        const targetOffsetY = dragStartOffsetRef.current.y + deltaY;
+        const restricted = restrictOffset(
+          targetOffsetX,
+          targetOffsetY,
+          effectiveZoom
+        );
+        latestRestrictedOffsetRef.current = restricted;
+        setOffsetX(restricted.x);
+        setOffsetY(restricted.y);
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+        handleInteractionEnd();
+      };
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    },
+    [restrictOffset, effectiveZoom, handleInteractionEnd]
+  );
+  const handleWheel = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!containerRef.current || imageWrapperWidth <= 0 || imageWrapperHeight <= 0)
+        return;
+      const currentZoom = latestZoomRef.current;
+      const currentOffsetX = latestRestrictedOffsetRef.current.x;
+      const currentOffsetY = latestRestrictedOffsetRef.current.y;
+      const delta = e.deltaY * -zoomSensitivity;
+      const targetZoom = currentZoom + delta;
+      if (clamp(targetZoom, minZoom, maxZoom) === currentZoom) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pointerX = e.clientX - rect.left - rect.width / 2;
+      const pointerY = e.clientY - rect.top - rect.height / 2;
+      const imagePointX = (pointerX - currentOffsetX) / currentZoom;
+      const imagePointY = (pointerY - currentOffsetY) / currentZoom;
+      const finalNewZoom = updateZoom(targetZoom);
+      const newOffsetX = pointerX - imagePointX * finalNewZoom;
+      const newOffsetY = pointerY - imagePointY * finalNewZoom;
+      const restrictedNewOffset = restrictOffset(
+        newOffsetX,
+        newOffsetY,
+        finalNewZoom
+      );
+      setOffsetX(restrictedNewOffset.x);
+      setOffsetY(restrictedNewOffset.y);
+      latestRestrictedOffsetRef.current = restrictedNewOffset;
+      if (onCropChange) {
+        const finalData = calculateCropData(
+          restrictedNewOffset.x,
+          restrictedNewOffset.y,
+          finalNewZoom
+        );
+        onCropChange(finalData);
+      }
+    },
+    [
+      restrictOffset,
+      calculateCropData,
+      imageWrapperWidth,
+      imageWrapperHeight,
+      onCropChange,
+      minZoom,
+      maxZoom,
+      zoomSensitivity,
+      updateZoom
+    ]
+  );
+  const getPinchDistance = (touches) => Math.sqrt(
+    Math.pow(touches[1].clientX - touches[0].clientX, 2) + Math.pow(touches[1].clientY - touches[0].clientY, 2)
+  );
+  const getPinchCenter = (touches) => ({
+    x: (touches[0].clientX + touches[1].clientX) / 2,
+    y: (touches[0].clientY + touches[1].clientY) / 2
+  });
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (!containerRef.current || imageWrapperWidth <= 0 || imageWrapperHeight <= 0)
+        return;
+      e.preventDefault();
+      const touches = e.touches;
+      if (touches.length === 1) {
+        setIsDragging(true);
+        isPinchingRef.current = false;
+        dragStartPointRef.current = {
+          x: touches[0].clientX,
+          y: touches[0].clientY
+        };
+        dragStartOffsetRef.current = {
+          x: latestRestrictedOffsetRef.current.x,
+          y: latestRestrictedOffsetRef.current.y
+        };
+      } else if (touches.length === 2) {
+        setIsDragging(false);
+        isPinchingRef.current = true;
+        initialPinchDistanceRef.current = getPinchDistance(touches);
+        initialPinchZoomRef.current = latestZoomRef.current;
+        dragStartOffsetRef.current = {
+          x: latestRestrictedOffsetRef.current.x,
+          y: latestRestrictedOffsetRef.current.y
+        };
+      }
+    },
+    [imageWrapperWidth, imageWrapperHeight]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (!containerRef.current || imageWrapperWidth <= 0 || imageWrapperHeight <= 0)
+        return;
+      e.preventDefault();
+      const touches = e.touches;
+      if (touches.length === 1 && isDragging && !isPinchingRef.current) {
+        const deltaX = touches[0].clientX - dragStartPointRef.current.x;
+        const deltaY = touches[0].clientY - dragStartPointRef.current.y;
+        const targetOffsetX = dragStartOffsetRef.current.x + deltaX;
+        const targetOffsetY = dragStartOffsetRef.current.y + deltaY;
+        const restricted = restrictOffset(
+          targetOffsetX,
+          targetOffsetY,
+          effectiveZoom
+        );
+        latestRestrictedOffsetRef.current = restricted;
+        setOffsetX(restricted.x);
+        setOffsetY(restricted.y);
+      } else if (touches.length === 2 && isPinchingRef.current) {
+        const currentPinchDistance = getPinchDistance(touches);
+        const scale = currentPinchDistance / initialPinchDistanceRef.current;
+        const currentZoom = initialPinchZoomRef.current;
+        const targetZoom = currentZoom * scale;
+        if (clamp(targetZoom, minZoom, maxZoom) === latestZoomRef.current)
+          return;
+        const pinchCenter = getPinchCenter(touches);
+        const rect = containerRef.current.getBoundingClientRect();
+        const pinchCenterX = pinchCenter.x - rect.left - rect.width / 2;
+        const pinchCenterY = pinchCenter.y - rect.top - rect.height / 2;
+        const currentOffsetX = dragStartOffsetRef.current.x;
+        const currentOffsetY = dragStartOffsetRef.current.y;
+        const imagePointX = (pinchCenterX - currentOffsetX) / currentZoom;
+        const imagePointY = (pinchCenterY - currentOffsetY) / currentZoom;
+        const finalNewZoom = updateZoom(targetZoom);
+        const newOffsetX = pinchCenterX - imagePointX * finalNewZoom;
+        const newOffsetY = pinchCenterY - imagePointY * finalNewZoom;
+        const restrictedNewOffset = restrictOffset(
+          newOffsetX,
+          newOffsetY,
+          finalNewZoom
+        );
+        setOffsetX(restrictedNewOffset.x);
+        setOffsetY(restrictedNewOffset.y);
+        latestRestrictedOffsetRef.current = restrictedNewOffset;
+        if (onCropChange) {
+          const finalData = calculateCropData(
+            restrictedNewOffset.x,
+            restrictedNewOffset.y,
+            finalNewZoom
+          );
+          onCropChange(finalData);
+        }
+      }
+    },
+    [
+      isDragging,
+      restrictOffset,
+      minZoom,
+      maxZoom,
+      imageWrapperWidth,
+      imageWrapperHeight,
+      effectiveZoom,
+      updateZoom,
+      onCropChange,
+      calculateCropData
+    ]
+  );
+  const handleTouchEnd = useCallback(
+    (e) => {
+      e.preventDefault();
+      const touches = e.touches;
+      if (isPinchingRef.current && touches.length < 2) {
+        isPinchingRef.current = false;
+        if (touches.length === 1) {
+          setIsDragging(true);
+          dragStartPointRef.current = {
+            x: touches[0].clientX,
+            y: touches[0].clientY
+          };
+          dragStartOffsetRef.current = {
+            x: latestRestrictedOffsetRef.current.x,
+            y: latestRestrictedOffsetRef.current.y
+          };
+        } else {
+          setIsDragging(false);
+          handleInteractionEnd();
+        }
+      } else if (isDragging && touches.length === 0) {
+        setIsDragging(false);
+        handleInteractionEnd();
+      }
+    },
+    [isDragging, handleInteractionEnd]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (imageWrapperWidth <= 0) return;
+      let targetOffsetX = latestRestrictedOffsetRef.current.x;
+      let targetOffsetY = latestRestrictedOffsetRef.current.y;
+      let moved = false;
+      switch (e.key) {
+        case "ArrowUp":
+          targetOffsetY += keyboardStep;
+          moved = true;
+          break;
+        case "ArrowDown":
+          targetOffsetY -= keyboardStep;
+          moved = true;
+          break;
+        case "ArrowLeft":
+          targetOffsetX += keyboardStep;
+          moved = true;
+          break;
+        case "ArrowRight":
+          targetOffsetX -= keyboardStep;
+          moved = true;
+          break;
+        default:
+          return;
+      }
+      if (moved) {
+        e.preventDefault();
+        const restricted = restrictOffset(
+          targetOffsetX,
+          targetOffsetY,
+          effectiveZoom
+        );
+        if (restricted.x !== latestRestrictedOffsetRef.current.x || restricted.y !== latestRestrictedOffsetRef.current.y) {
+          latestRestrictedOffsetRef.current = restricted;
+          setOffsetX(restricted.x);
+          setOffsetY(restricted.y);
+        }
+      }
+    },
+    [keyboardStep, imageWrapperWidth, restrictOffset, effectiveZoom]
+  );
+  const handleKeyUp = useCallback(
+    (e) => {
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+        handleInteractionEnd();
+      }
+    },
+    [handleInteractionEnd]
+  );
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const options = { passive: false };
+    node.addEventListener("wheel", handleWheel, options);
+    node.addEventListener("touchstart", handleTouchStart, options);
+    node.addEventListener("touchmove", handleTouchMove, options);
+    node.addEventListener("touchend", handleTouchEnd, options);
+    node.addEventListener("touchcancel", handleTouchEnd, options);
+    return () => {
+      node.removeEventListener("wheel", handleWheel, options);
+      node.removeEventListener("touchstart", handleTouchStart, options);
+      node.removeEventListener("touchmove", handleTouchMove, options);
+      node.removeEventListener("touchend", handleTouchEnd, options);
+      node.removeEventListener("touchcancel", handleTouchEnd, options);
+    };
+  }, [handleWheel, handleTouchStart, handleTouchMove, handleTouchEnd]);
+  const getRootProps = useCallback(
+    () => ({
+      className,
+      style,
+      onMouseDown: handleMouseDown,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Interactive image cropper",
+      "aria-describedby": descriptionId,
+      "aria-valuemin": minZoom,
+      "aria-valuemax": maxZoom,
+      "aria-valuenow": effectiveZoom,
+      "aria-valuetext": `Zoom: ${Math.round(effectiveZoom * 100)}%`
+    }),
+    [
+      className,
+      style,
+      handleMouseDown,
+      handleKeyDown,
+      handleKeyUp,
+      descriptionId,
+      minZoom,
+      maxZoom,
+      effectiveZoom
+    ]
+  );
+  const getImageWrapperStyle = useCallback(
+    () => ({
+      width: imageWrapperWidth,
+      height: imageWrapperHeight,
+      transform: `translate3d(${offsetX}px, ${offsetY}px, 0px) scale(${effectiveZoom})`,
+      position: "absolute",
+      left: `calc(50% - ${imageWrapperWidth / 2}px)`,
+      top: `calc(50% - ${imageWrapperHeight / 2}px)`,
+      willChange: "transform"
+    }),
+    [imageWrapperWidth, imageWrapperHeight, offsetX, offsetY, effectiveZoom]
+  );
+  const getImageProps = useCallback(
+    () => ({
+      src: image,
+      alt: "Image being cropped",
+      draggable: false,
+      "aria-hidden": true
+    }),
+    [image]
+  );
+  const getCropAreaStyle = useCallback(
+    () => ({
+      width: cropAreaWidth,
+      height: cropAreaHeight
+    }),
+    [cropAreaWidth, cropAreaHeight]
+  );
+  const getCropAreaProps = useCallback(
+    () => ({
+      style: getCropAreaStyle(),
+      "aria-hidden": true
+    }),
+    [getCropAreaStyle]
+  );
+  const contextValue = {
+    containerRef,
+    image,
+    imgWidth,
+    imgHeight,
+    cropAreaWidth,
+    cropAreaHeight,
+    imageWrapperWidth,
+    imageWrapperHeight,
+    offsetX,
+    offsetY,
+    effectiveZoom,
+    minZoom,
+    maxZoom,
+    getRootProps,
+    getImageProps,
+    getImageWrapperStyle,
+    getCropAreaProps,
+    getCropAreaStyle,
+    descriptionId
+  };
+  return /* @__PURE__ */ jsx(CropperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref: containerRef, ...getRootProps(), ...restProps, children }) });
+};
+var CropperImage = ({ className, ...restProps }) => {
+  const { image, getImageProps, getImageWrapperStyle } = useCropperContext();
+  if (!image) return null;
+  const imageProps = getImageProps();
+  return /* @__PURE__ */ jsx("div", { style: getImageWrapperStyle(), children: /* @__PURE__ */ jsx("img", { ...imageProps, className, ...restProps }) });
+};
+var CropperCropArea = ({
+  className,
+  style,
+  ...restProps
+}) => {
+  const { cropAreaWidth, cropAreaHeight, getCropAreaProps, getCropAreaStyle } = useCropperContext();
+  if (cropAreaWidth <= 0 || cropAreaHeight <= 0) return null;
+  const areaProps = getCropAreaProps();
+  const areaStyle = getCropAreaStyle();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...areaProps,
+      style: { ...areaProps.style, ...style, ...areaStyle },
+      className,
+      ...restProps
+    }
+  );
+};
+var CropperDescription = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const { descriptionId } = useCropperContext();
+  return /* @__PURE__ */ jsx("div", { id: descriptionId, className, ...restProps, children: children ?? // Default description if none provided by user
+  "Use mouse wheel or pinch gesture to zoom. Drag with mouse or touch, or use arrow keys to pan the image within the crop area." });
+};
+var Cropper = {
+  Root: CropperRoot,
+  Image: CropperImage,
+  CropArea: CropperCropArea,
+  Description: CropperDescription
+};
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const [internalValues, setInternalValues] = React8.useState(
+    Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]
+  );
+  React8.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValues(Array.isArray(value) ? value : [value]);
+    }
+  }, [value]);
+  const handleValueChange = (newValue) => {
+    setInternalValues(newValue);
+    props.onValueChange?.(newValue);
+  };
+  const renderThumb = () => {
+    const thumb = /* @__PURE__ */ jsx(
+      SliderPrimitive.Thumb,
+      {
+        "data-testid": "slider-thumb",
+        "data-slot": "slider-thumb",
+        className: "nebula-ds border-2 border-slider-rangeColor bg-slider-thumbColor ring-ring/50 block size-4 shrink-0 rounded-full transition-[color,box-shadow] outline-none hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
+      }
+    );
+    return thumb;
+  };
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      onValueChange: handleValueChange,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-slider-trackColor relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-slider-rangeColor absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: internalValues.length }, (_, index) => /* @__PURE__ */ jsx(React8.Fragment, { children: renderThumb() }, index))
+      ]
+    }
+  );
+}
+function CropperRoot2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Cropper.Root,
+    {
+      "data-slot": "cropper",
+      className: cn(
+        "relative flex w-full cursor-move touch-none items-center justify-center overflow-hidden focus:outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CropperDescription2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Cropper.Description,
+    {
+      "data-slot": "cropper-description",
+      className: cn("sr-only", className),
+      ...props
+    }
+  );
+}
+function CropperImage2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Cropper.Image,
+    {
+      "data-slot": "cropper-image",
+      className: cn(
+        "pointer-events-none h-full w-full object-cover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CropperCropArea2({
+  className,
+  rounded,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Cropper.CropArea,
+    {
+      "data-slot": "cropper-crop-area",
+      className: cn(
+        "pointer-events-none absolute shadow-[0_0_0_9999px_rgba(0,0,0,0.5)] in-[[data-slot=cropper]:focus-visible]:ring-[2px] in-[[data-slot=cropper]:focus-visible]:ring-white",
+        rounded && "rounded-full",
+        className,
+        "border-2 border-cropper-cropAreaBorderColor"
+      ),
+      ...props
+    }
+  );
+}
+var createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error2) => reject(error2));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
+});
+async function getCroppedImg(imageSrc, pixelCrop, outputWidth = pixelCrop.width, outputHeight = pixelCrop.height) {
+  try {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return null;
+    }
+    canvas.width = outputWidth;
+    canvas.height = outputHeight;
+    ctx.drawImage(
+      image,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      outputWidth,
+      // Draw onto the output size
+      outputHeight
+    );
+    return new Promise((resolve) => {
+      canvas.toBlob((blob) => {
+        resolve(blob);
+      }, "image/jpeg");
+    });
+  } catch (error2) {
+    return null;
+  }
+}
+function Cropper2({
+  onOpenChange,
+  open,
+  previewUrl,
+  onRemove: removeFile,
+  onApply,
+  rounded = false,
+  portal = false
+}) {
+  const [finalImageUrl, setFinalImageUrl] = useState(null);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const [zoom, setZoom] = useState(1);
+  const handleCropChange = useCallback((pixels) => {
+    setCroppedAreaPixels(pixels);
+  }, []);
+  const handleApply = async () => {
+    if (!previewUrl || !croppedAreaPixels) {
+      if (previewUrl) {
+        removeFile();
+        setCroppedAreaPixels(null);
+      }
+      return;
+    }
+    try {
+      const croppedBlob = await getCroppedImg(previewUrl, croppedAreaPixels);
+      if (!croppedBlob) {
+        throw new Error("Failed to generate cropped image blob.");
+      }
+      const newFinalUrl = URL.createObjectURL(croppedBlob);
+      if (finalImageUrl) {
+        URL.revokeObjectURL(finalImageUrl);
+      }
+      setFinalImageUrl(newFinalUrl);
+      onOpenChange(false);
+      onApply(newFinalUrl, croppedBlob);
+    } catch (error2) {
+      onOpenChange(false);
+    }
+  };
+  useEffect(() => {
+    const currentFinalUrl = finalImageUrl;
+    return () => {
+      if (currentFinalUrl && currentFinalUrl.startsWith("blob:")) {
+        URL.revokeObjectURL(currentFinalUrl);
+      }
+    };
+  }, [finalImageUrl]);
+  const { cropper } = useNebulaI18n().messages;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "nebula-ds gap-0 p-0 sm:max-w-140 *:[button]:hidden border border-cropper-dialogBorderColor",
+      portal,
+      showClose: false,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { className: "nebula-ds contents space-y-0 text-left", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "nebula-ds flex items-center justify-between p-4 text-base", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: true,
+                type: "button",
+                variant: "ghost",
+                onClick: () => onOpenChange(false),
+                "aria-label": "close-cropper-dialog",
+                "data-testid": "close-cropper-dialog",
+                size: "sm",
+                children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+              }
+            ),
+            cropper.dialogTitle
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              autoFocus: false,
+              onClick: handleApply,
+              disabled: !previewUrl,
+              variant: "primary",
+              size: "sm",
+              type: "button",
+              "aria-label": "apply-cropper-image",
+              "data-testid": "apply-cropper-image",
+              children: cropper.applyButtonLabel
+            }
+          )
+        ] }) }),
+        previewUrl && /* @__PURE__ */ jsxs(
+          CropperRoot2,
+          {
+            className: "nebula-ds h-96 sm:h-120",
+            image: previewUrl,
+            zoom,
+            onCropChange: handleCropChange,
+            onZoomChange: setZoom,
+            children: [
+              /* @__PURE__ */ jsx(CropperDescription2, {}),
+              /* @__PURE__ */ jsx(CropperImage2, {}),
+              /* @__PURE__ */ jsx(CropperCropArea2, { rounded })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogFooter, { className: "nebula-ds border-t border-t-cropper-dialogBorderColor px-4 py-6", children: /* @__PURE__ */ jsxs("div", { className: "nebula-ds mx-auto flex w-full max-w-80 items-center gap-4", children: [
+          /* @__PURE__ */ jsx(
+            MinusIcon,
+            {
+              className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
+              size: 16,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              defaultValue: [1],
+              value: [zoom],
+              min: 1,
+              max: 3,
+              step: 0.1,
+              onValueChange: (value) => setZoom(value[0]),
+              "aria-label": "Zoom slider"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlusIcon,
+            {
+              className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
+              size: 16,
+              "aria-hidden": "true"
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -5045,4 +6103,4 @@ var tailwind = {
   // plugin: () => require("tailwindcss")("node_modules/@nebulareact/dist/tailwind.config.js"),
 };
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, StyledSelect as Select, Separator2 as Separator, Skeleton, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages16 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, StyledSelect as Select, Separator2 as Separator, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages19 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };