@ikatec/nebula-react 1.0.26 → 1.0.27

package/dist/index.js

@@ -28,6 +28,7 @@ var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
 var locale = require('react-day-picker/locale');
 var mask = require('@react-input/mask');
+var SliderPrimitive = require('@radix-ui/react-slider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -67,6 +68,7 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var RPNInput__namespace = /*#__PURE__*/_interopNamespace(RPNInput);
 var flags__default = /*#__PURE__*/_interopDefault(flags);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 // src/button.tsx
 
@@ -1157,8 +1159,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,
@@ -1167,7 +1177,7 @@ var enMessages = {
 };
 
 // src/i18n/messages/es/pagination.ts
-var messages6 = {
+var messages7 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1178,16 +1188,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",
@@ -1437,22 +1447,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,
@@ -1461,7 +1479,7 @@ var esMessages = {
 };
 
 // src/i18n/messages/pt-br/pagination.ts
-var messages11 = {
+var messages13 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1472,16 +1490,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",
@@ -1731,19 +1749,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 = {
@@ -1751,7 +1776,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
@@ -1776,7 +1802,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],
@@ -1794,14 +1820,14 @@ var NebulaI18nProvider = ({
     () => customI18nStorageKey ?? localStorageKey,
     [customI18nStorageKey]
   );
-  const [messages17, setMessages] = React8.useState(
-    messages16.get(getNebulaLanguage()) ?? messages16.get("en-US")
+  const [messages20, setMessages] = React8.useState(
+    messages19.get(getNebulaLanguage()) ?? messages19.get("en-US")
   );
   const handleStorageChange = React8.useCallback(
     ({ detail }) => {
       if (detail.key === storageKey) {
         setMessages(
-          messages16.get(detail.value) ?? messages16.get("en-US")
+          messages19.get(detail.value) ?? messages19.get("en-US")
         );
       }
     },
@@ -1845,7 +1871,7 @@ var NebulaI18nProvider = ({
     NebulaI18nContext.Provider,
     {
       value: {
-        messages: messages17,
+        messages: messages20,
         locale: getNebulaLanguage()
       },
       children
@@ -1867,7 +1893,7 @@ var Pagination = ({
   onChangePage,
   ...props
 }) => {
-  const { messages: messages17 } = useNebulaI18n();
+  const { messages: messages20 } = useNebulaI18n();
   const totalPages = React8.useMemo(() => {
     return Math.ceil(total / (pageSize || 1));
   }, [total, pageSize]);
@@ -1900,13 +1926,13 @@ var Pagination = ({
   }, [totalPages, pageSize, total]);
   const totalResultsLabel = React8.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 = React8.useMemo(
-    () => messages17.pagination.currentPageLabel(normalizedPage, totalPages),
-    [messages17.pagination, normalizedPage, totalPages]
+    () => messages20.pagination.currentPageLabel(normalizedPage, totalPages),
+    [messages20.pagination, normalizedPage, totalPages]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
@@ -2179,7 +2205,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
     isError = false,
     ...props
   }) => {
-    const { messages: messages17 } = useNebulaI18n();
+    const { messages: messages20 } = useNebulaI18n();
     const customClassNames = React8.useMemo(() => {
       return {
         control: (props2) => controlStyles(props2, isError),
@@ -2226,7 +2252,7 @@ var createStyledSelect = (BaseSelect, displayName) => {
         isDisabled: disabled,
         components: customComponents,
         classNames: customClassNames,
-        noOptionsMessage: () => /* @__PURE__ */ jsxRuntime.jsx("p", { children: messages17.inputSelect.noOptions }),
+        noOptionsMessage: () => /* @__PURE__ */ jsxRuntime.jsx("p", { children: messages20.inputSelect.noOptions }),
         ...props
       }
     );
@@ -2372,16 +2398,17 @@ var DialogOverlay = React8__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React8__namespace.forwardRef(({ className, children, portal = false, ...props }, ref) => {
-  const Comp = portal ? DialogPortal : React8__namespace.Fragment;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.Content,
-      {
-        ref,
-        className: cn(
-          `rounded-2xl
+var DialogContent = React8__namespace.forwardRef(
+  ({ className, children, portal = false, showClose = true, ...props }, ref) => {
+    const Comp = portal ? DialogPortal : React8__namespace.Fragment;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        DialogPrimitive__namespace.Content,
+        {
+          ref,
+          className: cn(
+            `rounded-2xl
         fixed
         left-[50%]
         top-[50%]
@@ -2406,29 +2433,30 @@ var DialogContent = React8__namespace.forwardRef(({ className, children, portal
         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__ */ jsxRuntime.jsx(
-            DialogPrimitive__namespace.Close,
-            {
-              asChild: true,
-              className: `absolute
-          right-4
-          top-4`,
-              children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", icon: true, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "nebula-ds !h-4 !w-4 !text-dialog-icon" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds sr-only", children: "Close" })
-              ] })
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            showClose && /* @__PURE__ */ jsxRuntime.jsx(
+              DialogPrimitive__namespace.Close,
+              {
+                asChild: true,
+                className: `absolute
+              right-4
+              top-4`,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", icon: true, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "nebula-ds !h-4 !w-4 !text-dialog-icon" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds sr-only", children: "Close" })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
 var DialogHeader = ({
   className,
@@ -3244,13 +3272,13 @@ function custom(message, options) {
     }
   );
 }
-async function promise(promise2, messages17, options) {
+async function promise(promise2, messages20, options) {
   const loadingToast = sonner.toast.custom(
     (t) => /* @__PURE__ */ jsxRuntime.jsx(
       ToastComponent,
       {
         type: "info",
-        message: messages17.loading,
+        message: messages20.loading,
         options,
         t
       }
@@ -3264,7 +3292,7 @@ async function promise(promise2, messages17, options) {
         ToastComponent,
         {
           type: "success",
-          message: messages17.success,
+          message: messages20.success,
           options,
           t
         }
@@ -3279,7 +3307,7 @@ async function promise(promise2, messages17, options) {
         ToastComponent,
         {
           type: "error",
-          message: messages17.error,
+          message: messages20.error,
           options,
           t
         }
@@ -3449,8 +3477,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "nebula-ds inline-flex items-center gap-1", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
@@ -4270,7 +4298,7 @@ var InputDateTimePickerSingle = ({
     formattedDateByLanguage ? new Date(formattedDateByLanguage) : void 0
   );
   const [popoverIsOpen, setPopoverIsOpen] = React8.useState(false);
-  const { locale, messages: messages17 } = useNebulaI18n();
+  const { locale, messages: messages20 } = useNebulaI18n();
   const [month, setMonth] = React8.useState(/* @__PURE__ */ new Date());
   const inputTimeRef = React8.useRef(null);
   const handleClearValue = () => {
@@ -4442,7 +4470,7 @@ var InputDateTimePickerSingle = ({
             disabled: disabledDates,
             footer: /* @__PURE__ */ jsxRuntime.jsxs(Space, { className: "nebula-ds items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
-                messages17.timePicker.label,
+                messages20.timePicker.label,
                 ":"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4984,9 +5012,11 @@ var ProfileImage = ({
   onError,
   maxFiles = Infinity,
   onRemove,
+  image,
   ...rest
 }) => {
   const maxSize = maxSizeMB * 1024 * 1024;
+  const id = React8.useId();
   const [
     { files, isDragging, errors },
     {
@@ -4999,6 +5029,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/*",
@@ -5074,6 +5113,1026 @@ var ProfileImage = ({
   ] });
 };
 ProfileImage.displayName = "ProfileImage";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+var CropperContext = React8.createContext(null);
+var useCropperContext = () => {
+  const context = React8.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 = React8.useId();
+  const [imgWidth, setImgWidth] = React8.useState(null);
+  const [imgHeight, setImgHeight] = React8.useState(null);
+  const containerRef = React8.useRef(null);
+  const [cropAreaWidth, setCropAreaWidth] = React8.useState(0);
+  const [cropAreaHeight, setCropAreaHeight] = React8.useState(0);
+  const [imageWrapperWidth, setImageWrapperWidth] = React8.useState(0);
+  const [imageWrapperHeight, setImageWrapperHeight] = React8.useState(0);
+  const [offsetX, setOffsetX] = React8.useState(0);
+  const [offsetY, setOffsetY] = React8.useState(0);
+  const [internalZoom, setInternalZoom] = React8.useState(minZoom);
+  const [isDragging, setIsDragging] = React8.useState(false);
+  const dragStartPointRef = React8.useRef({ x: 0, y: 0 });
+  const dragStartOffsetRef = React8.useRef({ x: 0, y: 0 });
+  const latestRestrictedOffsetRef = React8.useRef({
+    x: offsetX,
+    y: offsetY
+  });
+  const latestZoomRef = React8.useRef(internalZoom);
+  const isInitialSetupDoneRef = React8.useRef(false);
+  const initialPinchDistanceRef = React8.useRef(0);
+  const initialPinchZoomRef = React8.useRef(1);
+  const isPinchingRef = React8.useRef(false);
+  const hasWarnedRef = React8.useRef(false);
+  const isZoomControlled = zoomProp !== void 0;
+  const effectiveZoom = isZoomControlled ? zoomProp : internalZoom;
+  const updateZoom = React8.useCallback(
+    (newZoomValue) => {
+      const clampedZoom = clamp(newZoomValue, minZoom, maxZoom);
+      if (onZoomChange) {
+        onZoomChange(clampedZoom);
+      } else if (!isZoomControlled) {
+        setInternalZoom(clampedZoom);
+      }
+      return clampedZoom;
+    },
+    [minZoom, maxZoom, onZoomChange, isZoomControlled]
+  );
+  React8.useEffect(() => {
+    latestZoomRef.current = effectiveZoom;
+  }, [effectiveZoom]);
+  React8.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 = React8.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]
+  );
+  React8.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]);
+  React8.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 = React8.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 = React8.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
+    ]
+  );
+  React8.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
+  ]);
+  React8.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 = React8.useCallback(() => {
+    if (onCropChange) {
+      const finalData = calculateCropData(
+        latestRestrictedOffsetRef.current.x,
+        latestRestrictedOffsetRef.current.y,
+        effectiveZoom
+      );
+      onCropChange(finalData);
+    }
+  }, [onCropChange, calculateCropData, effectiveZoom]);
+  const handleMouseDown = React8.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 = React8.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 = React8.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 = React8.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 = React8.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 = React8.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 = React8.useCallback(
+    (e) => {
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+        handleInteractionEnd();
+      }
+    },
+    [handleInteractionEnd]
+  );
+  React8.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 = React8.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 = React8.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 = React8.useCallback(
+    () => ({
+      src: image,
+      alt: "Image being cropped",
+      draggable: false,
+      "aria-hidden": true
+    }),
+    [image]
+  );
+  const getCropAreaStyle = React8.useCallback(
+    () => ({
+      width: cropAreaWidth,
+      height: cropAreaHeight
+    }),
+    [cropAreaWidth, cropAreaHeight]
+  );
+  const getCropAreaProps = React8.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__ */ jsxRuntime.jsx(CropperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: getImageWrapperStyle(), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...areaProps,
+      style: { ...areaProps.style, ...style, ...areaStyle },
+      className,
+      ...restProps
+    }
+  );
+};
+var CropperDescription = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  const { descriptionId } = useCropperContext();
+  return /* @__PURE__ */ jsxRuntime.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__namespace.useState(
+    Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]
+  );
+  React8__namespace.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__ */ jsxRuntime.jsx(
+      SliderPrimitive__namespace.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__ */ jsxRuntime.jsxs(
+    SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(
+              SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(React8__namespace.Fragment, { children: renderThumb() }, index))
+      ]
+    }
+  );
+}
+function CropperRoot2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    Cropper.Description,
+    {
+      "data-slot": "cropper-description",
+      className: cn("sr-only", className),
+      ...props
+    }
+  );
+}
+function CropperImage2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = React8.useState(null);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React8.useState(null);
+  const [zoom, setZoom] = React8.useState(1);
+  const handleCropChange = React8.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);
+    }
+  };
+  React8.useEffect(() => {
+    const currentFinalUrl = finalImageUrl;
+    return () => {
+      if (currentFinalUrl && currentFinalUrl.startsWith("blob:")) {
+        URL.revokeObjectURL(currentFinalUrl);
+      }
+    };
+  }, [finalImageUrl]);
+  const { cropper } = useNebulaI18n().messages;
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DialogHeader, { className: "nebula-ds contents space-y-0 text-left", children: /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "nebula-ds flex items-center justify-between p-4 text-base", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.XIcon, { "aria-hidden": "true" })
+              }
+            ),
+            cropper.dialogTitle
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          CropperRoot2,
+          {
+            className: "nebula-ds h-96 sm:h-120",
+            image: previewUrl,
+            zoom,
+            onCropChange: handleCropChange,
+            onZoomChange: setZoom,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CropperDescription2, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(CropperImage2, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(CropperCropArea2, { rounded })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { className: "nebula-ds border-t border-t-cropper-dialogBorderColor px-4 py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds mx-auto flex w-full max-w-80 items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.MinusIcon,
+            {
+              className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
+              size: 16,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Slider,
+            {
+              defaultValue: [1],
+              value: [zoom],
+              min: 1,
+              max: 3,
+              step: 0.1,
+              onValueChange: (value) => setZoom(value[0]),
+              "aria-label": "Zoom slider"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.PlusIcon,
+            {
+              className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
+              size: 16,
+              "aria-hidden": "true"
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -5127,6 +6186,10 @@ exports.Calendar = Calendar;
 exports.Caption = Caption;
 exports.Checkbox = Checkbox;
 exports.Creatable = StyledCreatable;
+exports.Cropper = Cropper2;
+exports.CropperCropArea = CropperCropArea2;
+exports.CropperDescription = CropperDescription2;
+exports.CropperImage = CropperImage2;
 exports.Dialog = Dialog;
 exports.DialogBody = DialogBody;
 exports.DialogClose = DialogClose;
@@ -5181,6 +6244,7 @@ exports.ProfileImage = ProfileImage;
 exports.Select = StyledSelect;
 exports.Separator = Separator2;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
 exports.Space = Space;
 exports.SpaceDirectionEnum = SpaceDirectionEnum;
 exports.SpaceSizeEnum = SpaceSizeEnum;
@@ -5211,7 +6275,7 @@ exports.dateIsAvailable = dateIsAvailable;
 exports.formatBytes = formatBytes;
 exports.getNebulaLanguage = getNebulaLanguage;
 exports.localeByi18nKey = localeByi18nKey;
-exports.messages = messages16;
+exports.messages = messages19;
 exports.separatorVariants = separatorVariants;
 exports.setNebulaLanguage = setNebulaLanguage;
 exports.tagVariantsEnum = tagVariantsEnum;