@ikatec/nebula-react 1.0.26 → 1.0.28

package/dist/index.js

@@ -28,6 +28,8 @@ 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');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -67,6 +69,8 @@ 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);
+var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 
 // src/button.tsx
 
@@ -1157,8 +1161,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 +1179,7 @@ var enMessages = {
 };
 
 // src/i18n/messages/es/pagination.ts
-var messages6 = {
+var messages7 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1178,16 +1190,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 +1449,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 +1481,7 @@ var esMessages = {
 };
 
 // src/i18n/messages/pt-br/pagination.ts
-var messages11 = {
+var messages13 = {
   totalResultsLabel(pagesSize, totalResults) {
     if (totalResults < pagesSize) {
       pagesSize = totalResults;
@@ -1472,16 +1492,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 +1751,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 +1778,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 +1804,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 +1822,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 +1873,7 @@ var NebulaI18nProvider = ({
     NebulaI18nContext.Provider,
     {
       value: {
-        messages: messages17,
+        messages: messages20,
         locale: getNebulaLanguage()
       },
       children
@@ -1867,7 +1895,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 +1928,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 +2207,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 +2254,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
       }
     );
@@ -2256,12 +2284,13 @@ var InputText = React8__namespace.forwardRef(
       "div",
       {
         className: cn(
-          "w-full flex outline-none",
+          "flex outline-none",
           "rounded-input",
           "border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
           "focus-within:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
           isError && "border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus",
-          disabled && "pointer-events-none"
+          disabled && "pointer-events-none",
+          className
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds relative w-full", children: [
@@ -2270,7 +2299,7 @@ var InputText = React8__namespace.forwardRef(
               {
                 ref,
                 className: cn(
-                  "w-full h-10 outline-none text-sm leading-none font-medium",
+                  "h-10 outline-none text-sm leading-none font-medium",
                   "bg-inputText-background-default disabled:bg-inputText-background-disabled",
                   "text-inputText-text-filled",
                   "disabled:cursor-not-allowed",
@@ -2282,7 +2311,7 @@ var InputText = React8__namespace.forwardRef(
                     "pr-10": initialInputType === "password",
                     "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password"
                   },
-                  className
+                  "!w-full"
                 ),
                 ...{ ...props, icon: void 0, iconPlacement: void 0 },
                 disabled,
@@ -2372,16 +2401,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 +2436,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 +3275,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 +3295,7 @@ async function promise(promise2, messages17, options) {
         ToastComponent,
         {
           type: "success",
-          message: messages17.success,
+          message: messages20.success,
           options,
           t
         }
@@ -3279,7 +3310,7 @@ async function promise(promise2, messages17, options) {
         ToastComponent,
         {
           type: "error",
-          message: messages17.error,
+          message: messages20.error,
           options,
           t
         }
@@ -3449,8 +3480,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" }),
@@ -3489,10 +3520,11 @@ var PhoneInput = React8__namespace.default.forwardRef(({ className, ...props },
         "data-slot": "phone-input",
         ref,
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full h-auto",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus-within:ring-0 border-0 w-full h-auto",
           className
         ),
-        ...props
+        ...props,
+        type: "text"
       }
     )
   ] });
@@ -4270,7 +4302,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 +4474,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(
@@ -4978,102 +5010,1587 @@ var TextArea = React8__namespace.forwardRef(
   }
 );
 TextArea.displayName = "TextArea";
-var ProfileImage = ({
-  maxSizeMB = 2,
-  subtitle,
-  onError,
-  maxFiles = Infinity,
-  onRemove,
-  ...rest
+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 maxSize = maxSizeMB * 1024 * 1024;
-  const [
-    { files, isDragging, errors },
-    {
-      handleDragEnter,
-      handleDragLeave,
-      handleDragOver,
-      handleDrop,
-      openFileDialog,
-      removeFile,
-      getInputProps
+  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);
     }
-  ] = useFileUpload({
-    multiple: false,
-    maxSize: maxSize > 0 ? maxSize : void 0,
-    accept: "image/*",
-    ...rest,
-    maxFiles
+    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(() => {
-    onError?.(errors);
-  }, [errors, onError]);
-  const [file] = files;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    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,
       {
-        role: "button",
-        onClick: openFileDialog,
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onDragOver: handleDragOver,
-        onDrop: handleDrop,
-        "data-dragging": isDragging || void 0,
-        className: cn(
-          "relative border border-transparent rounded-full size-fit",
-          "bg-fileUpload-background hover:bg-fileUpload-backgroundHover transition-colors",
-          !file && "border-dashed border-fileUpload-border"
+        "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"
+                )
+              }
+            )
+          }
         ),
-        "data-testid": "select-image-profile",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ...getInputProps(),
-              className: "nebula-ds sr-only",
-              "aria-label": "Upload file"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
-              "aria-hidden": "true",
-              children: [
-                file && file.preview && /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
+        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,
+  onApply,
+  onCancelCrop,
+  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) {
+        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);
+    }
+  };
+  const handleCancelCrop = () => {
+    setFinalImageUrl(null);
+    setCroppedAreaPixels(null);
+    setZoom(1);
+    onOpenChange?.(false);
+    onCancelCrop?.();
+  };
+  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: (isOpen) => {
+        if (!isOpen && !finalImageUrl) {
+          handleCancelCrop();
+        }
+        onOpenChange?.(isOpen);
+      },
+      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,
                   {
-                    src: file.preview,
-                    alt: file.file.name,
-                    className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
+                    icon: true,
+                    type: "button",
+                    variant: "ghost",
+                    onClick: handleCancelCrop,
+                    "aria-label": "close-cropper-dialog",
+                    "data-testid": "close-cropper-dialog",
+                    size: "sm",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { "aria-hidden": "true" })
                   }
                 ),
-                !file && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
-              ]
-            }
+                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"
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var ProfileImage = ({
+  maxSizeMB = 5,
+  subtitle,
+  onError,
+  maxFiles = Infinity,
+  onRemove,
+  image,
+  cropperProps,
+  onChange
+}) => {
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const id = React8.useId();
+  const withCropper = React8.useMemo(() => !!cropperProps, [cropperProps]);
+  const handleFileChange = (file2, blob) => {
+    if (!file2) {
+      return;
+    }
+    let fileLike = file2;
+    if (withCropper && !blob) {
+      return;
+    }
+    if (withCropper && blob) {
+      fileLike = new File([blob], file2.name, { type: file2.type });
+    }
+    onChange?.(fileLike);
+  };
+  const [
+    { files, isDragging, errors },
+    {
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      removeFile,
+      getInputProps
+    }
+  ] = useFileUpload({
+    maxFiles,
+    initialFiles: image ? [
+      {
+        id,
+        url: image,
+        name: image,
+        size: 0,
+        type: "image"
+      }
+    ] : [],
+    multiple: false,
+    maxSize: maxSize > 0 ? maxSize : void 0,
+    accept: "image/*",
+    onFilesChange([file2]) {
+      handleFileChange(file2?.file);
+    }
+  });
+  const [finalImageUrl, setFinalImageUrl] = React8.useState(null);
+  const [isDialogOpen, setIsDialogOpen] = React8.useState(false);
+  React8.useEffect(() => {
+    onError?.(errors);
+  }, [errors, onError]);
+  const [file] = files;
+  const fileId = file?.id;
+  const previousFileIdRef = React8.useRef(null);
+  const previewUrl = file?.preview || null;
+  const profileImagePreview = React8.useMemo(() => {
+    if (withCropper) return finalImageUrl;
+    return previewUrl;
+  }, [previewUrl, withCropper, finalImageUrl]);
+  React8.useEffect(() => {
+    if (!withCropper) return;
+    if (fileId && fileId !== previousFileIdRef.current) {
+      setIsDialogOpen(true);
+    }
+    previousFileIdRef.current = fileId;
+  }, [fileId, withCropper]);
+  const handleApply = async (croppedUrl, croppedBlob) => {
+    try {
+      const newFinalUrl = URL.createObjectURL(croppedBlob);
+      if (finalImageUrl) {
+        URL.revokeObjectURL(finalImageUrl);
+      }
+      setFinalImageUrl(newFinalUrl);
+      handleFileChange(file?.file, croppedBlob);
+      setIsDialogOpen(false);
+    } catch (error2) {
+      setIsDialogOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "button",
+          onClick: openFileDialog,
+          onDragEnter: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop,
+          "data-dragging": isDragging || void 0,
+          className: cn(
+            "relative border border-transparent rounded-full size-fit",
+            "bg-fileUpload-background hover:bg-fileUpload-backgroundHover transition-colors",
+            !file && "border-dashed border-fileUpload-border"
           ),
-          file && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "nebula-ds box-border absolute flex items-center justify-center -top-1 -right-1 rounded-full size-5 text-profileImage-removeImageButton-icon border-2 border-profileImage-removeImageButton-border bg-profileImage-removeImageButton-background hover:bg-profileImage-removeImageButton-hover",
-              "data-testid": "remove-profile-image",
-              onClick: (e) => {
-                e.stopPropagation();
-                removeFile(file.id);
-                onRemove?.();
-              },
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "nebula-ds size-2" })
-            }
-          )
-        ]
+          "data-testid": "select-image-profile",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...getInputProps(),
+                className: "nebula-ds sr-only",
+                "aria-label": "Upload file"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
+                "aria-hidden": "true",
+                children: [
+                  profileImagePreview && /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: profileImagePreview,
+                      alt: fileId,
+                      className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
+                    }
+                  ),
+                  !file && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
+                ]
+              }
+            ),
+            profileImagePreview && file && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "nebula-ds box-border absolute flex items-center justify-center -top-1 -right-1 rounded-full size-5 text-profileImage-removeImageButton-icon border-2 border-profileImage-removeImageButton-border bg-profileImage-removeImageButton-background hover:bg-profileImage-removeImageButton-hover",
+                "data-testid": "remove-profile-image",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeFile(file.id);
+                  setFinalImageUrl(null);
+                  onChange?.(void 0);
+                  onRemove?.();
+                },
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "nebula-ds size-2" })
+              }
+            )
+          ]
+        }
+      ) }),
+      !!subtitle && /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
+    ] }),
+    withCropper && /* @__PURE__ */ jsxRuntime.jsx(
+      Cropper2,
+      {
+        ...cropperProps,
+        open: isDialogOpen,
+        previewUrl,
+        onOpenChange: setIsDialogOpen,
+        onApply: handleApply,
+        onCancelCrop: () => {
+          fileId && removeFile(fileId);
+          setFinalImageUrl(null);
+          onChange?.(void 0);
+        }
       }
-    ) }),
-    !!subtitle && /* @__PURE__ */ jsxRuntime.jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
+    )
   ] });
 };
 ProfileImage.displayName = "ProfileImage";
+function RadioGroup2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroupPrimitive__namespace.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        `
+        border-2
+        data-[state=checked]:border-4
+        
+        border-radio-border-unselected-default
+        data-[state=checked]:border-radio-background-selected-default
+        hover:border-radio-border-unselected-hover
+        data-[state=checked]:hover:border-radio-background-selected-hover
+
+        bg-radio-background-unselected-default
+        data-[state=checked]:bg-radio-background-unselected-default
+        hover:bg-radio-background-unselected-hover
+        data-[state=checked]:hover:bg-radio-background-unselected-hover
+
+        disabled:border-radio-border-unselected-disabled
+        disabled:bg-radio-background-unselected-disabled
+        data-[state=checked]:disabled:bg-radio-background-unselected-default
+        data-[state=checked]:disabled:border-radio-background-selected-disabled
+
+        focus-visible:ring-[2px]
+        focus-visible:border-radio-border-selected-focus
+
+        aria-invalid:ring-destructive/20
+        dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive
+        
+        aspect-square
+        size-4
+        shrink-0
+        rounded-full
+        shadow-xs
+        transition-all
+        outline-none
+        disabled:cursor-not-allowed
+        `,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "nebula-ds flex items-center justify-center text-current", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds rounded-full w-2 h-2" }) })
+    }
+  );
+}
+var StepperContext = React8.createContext(void 0);
+var StepItemContext = React8.createContext(
+  void 0
+);
+var useStepper = () => {
+  const context = React8.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper");
+  }
+  return context;
+};
+var useStepItem = () => {
+  const context = React8.useContext(StepItemContext);
+  if (!context) {
+    throw new Error("useStepItem must be used within a StepperItem");
+  }
+  return context;
+};
+function Stepper({
+  defaultValue = 0,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  className,
+  ...props
+}) {
+  const [activeStep, setInternalStep] = React8__namespace.useState(defaultValue);
+  const setActiveStep = React8__namespace.useCallback(
+    (step) => {
+      if (value === void 0) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange]
+  );
+  const currentStep = value ?? activeStep;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StepperContext.Provider,
+    {
+      value: {
+        activeStep: currentStep,
+        setActiveStep,
+        orientation
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-slot": "stepper",
+          className: cn(
+            `
+          group/stepper
+          gap-2
+          inline-flex
+          data-[orientation=horizontal]:w-full
+          data-[orientation=horizontal]:flex-row
+          data-[orientation=vertical]:flex-col
+          `,
+            className
+          ),
+          "data-orientation": orientation,
+          ...props
+        }
+      )
+    }
+  );
+}
+function StepperItem({
+  step,
+  completed = false,
+  disabled = false,
+  loading = false,
+  className,
+  children,
+  ...props
+}) {
+  const { activeStep } = useStepper();
+  const state = completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive";
+  const isLoading = loading && step === activeStep;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StepItemContext.Provider,
+    {
+      value: { step, state, isDisabled: disabled, isLoading },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-slot": "stepper-item",
+          className: cn(
+            `
+          group/step
+          gap-2
+          flex
+          items-center
+          group-data-[orientation=horizontal]/stepper:flex-row
+          group-data-[orientation=vertical]/stepper:flex-col
+          group-data-[orientation=vertical]/stepper:items-start
+          `,
+            className
+          ),
+          "data-state": state,
+          ...isLoading ? { "data-loading": true } : {},
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function StepperTrigger({
+  asChild = false,
+  className,
+  children,
+  isClickable = true,
+  ...props
+}) {
+  const { setActiveStep } = useStepper();
+  const { step, isDisabled } = useStepItem();
+  if (asChild) {
+    const Comp = asChild ? reactSlot.Slot : "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { "data-slot": "stepper-trigger", className, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-slot": "stepper-trigger",
+      className: cn(
+        `
+        gap-2
+        inline-flex
+        items-center
+        rounded-full
+        outline-none
+        focus-visible:z-10
+        focus-visible:border-ring
+        focus-visible:ring-ring/50
+        focus-visible:ring-[3px]
+        disabled:pointer-events-none
+        disabled:opacity-50
+        `,
+        className
+      ),
+      onClick: () => isClickable ? setActiveStep(step) : null,
+      disabled: isDisabled,
+      ...props,
+      children
+    }
+  );
+}
+function StepperIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const { state, step, isLoading } = useStepItem();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "stepper-indicator",
+      className: cn(
+        `
+        flex
+        size-5
+        shrink-0
+        items-center
+        justify-center
+        rounded-full
+        font-semibold
+        text-xs
+        transition-colors
+        bg-stepper-background-default
+        text-stepper-count-default
+        data-[state=active]:bg-stepper-background-active
+        data-[state=active]:text-stepper-count-active
+        data-[state=completed]:bg-stepper-background-active
+        data-[state=completed]:text-stepper-count-active
+        `,
+        className
+      ),
+      "data-state": state,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.LoaderCircleIcon,
+          {
+            className: "nebula-ds animate-spin",
+            size: 14,
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              `
+                transition-all
+                group-data-[state=completed]/step:scale-0
+                group-data-[state=completed]/step:opacity-0
+                `
+            ),
+            children: step
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.CheckIcon,
+          {
+            className: cn(
+              `
+              absolute
+              scale-0
+              opacity-0
+              transition-all
+              group-data-[state=completed]/step:scale-100
+              group-data-[state=completed]/step:opacity-100
+              `
+            ),
+            size: 16,
+            "aria-hidden": "true"
+          }
+        )
+      ] })
+    }
+  );
+}
+function StepperTitle({
+  className,
+  ...props
+}) {
+  const { state } = useStepItem();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      "data-slot": "stepper-title",
+      className: cn(
+        `
+        text-sm
+        font-medium
+        text-stepper-title-default
+        data-[state=active]:text-stepper-title-active
+        data-[state=completed]:text-stepper-title-active
+        `,
+        className
+      ),
+      "data-state": state,
+      ...props
+    }
+  );
+}
+function StepperDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "stepper-description",
+      className: cn(
+        `
+        text-sm
+        text-muted-foreground
+        `,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function StepperSeparator({
+  className,
+  ...props
+}) {
+  const { step } = useStepItem();
+  const { activeStep, orientation } = useStepper();
+  const separatorState = step < activeStep ? "completed" : "inactive";
+  const line = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "stepper-separator",
+      "data-orientation": orientation,
+      className: cn(
+        `
+        rounded-full
+        bg-stepper-separator-default
+        `,
+        orientation === "horizontal" && `
+          w-5
+          h-[2px]
+          flex-1
+        `,
+        orientation === "vertical" && `
+          w-[2px]
+          h-5
+          flex-none
+        `,
+        separatorState === "completed" && `
+          bg-stepper-separator-active
+        `,
+        className
+      ),
+      "data-state": separatorState,
+      ...props
+    }
+  );
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nebula-ds flex w-5 justify-center", children: line });
+  }
+  return line;
+}
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -5127,6 +6644,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;
@@ -5178,12 +6699,22 @@ exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ProfileImage = ProfileImage;
+exports.RadioGroup = RadioGroup2;
+exports.RadioGroupItem = RadioGroupItem;
 exports.Select = StyledSelect;
 exports.Separator = Separator2;
 exports.Skeleton = Skeleton;
+exports.Slider = Slider;
 exports.Space = Space;
 exports.SpaceDirectionEnum = SpaceDirectionEnum;
 exports.SpaceSizeEnum = SpaceSizeEnum;
+exports.Stepper = Stepper;
+exports.StepperDescription = StepperDescription;
+exports.StepperIndicator = StepperIndicator;
+exports.StepperItem = StepperItem;
+exports.StepperSeparator = StepperSeparator;
+exports.StepperTitle = StepperTitle;
+exports.StepperTrigger = StepperTrigger;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -5211,7 +6742,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;