@ikatec/nebula-react 1.0.24 → 1.0.26

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
+import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, UserIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import Select, { components } from 'react-select';
 import Creatable from 'react-select/creatable';
@@ -2202,15 +2202,9 @@ var StyledAsyncCreatable = createStyledSelect(
   "AsyncCreatable"
 );
 var InputText = React8.forwardRef(
-  ({
-    className,
-    icon,
-    isError = false,
-    onClean,
-    iconPlacement = "start",
-    disabled,
-    ...props
-  }, ref) => {
+  ({ className, isError = false, onClean, disabled, suffix, ...props }, ref) => {
+    const icon = "icon" in props ? props.icon : null;
+    const iconPlacement = "iconPlacement" in props || props.type !== "password" ? props.iconPlacement || "start" : null;
     const initialInputType = props.type || "text";
     const [type, setType] = React8.useState(initialInputType);
     const iconClass = {
@@ -2221,71 +2215,92 @@ var InputText = React8.forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("relative w-full", {
-          "pointer-events-none": disabled
-        }),
+        className: cn(
+          "w-full 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"
+        ),
         children: [
-          /* @__PURE__ */ jsx(
-            "input",
+          /* @__PURE__ */ jsxs("div", { className: "nebula-ds relative w-full", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                className: cn(
+                  "w-full 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",
+                  "rounded-input",
+                  "pl-4",
+                  !!suffix && "rounded-r-none",
+                  {
+                    "pl-10 pr-4": !!icon && iconPlacement === "start",
+                    "pr-10": initialInputType === "password",
+                    "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password"
+                  },
+                  className
+                ),
+                ...{ ...props, icon: void 0, iconPlacement: void 0 },
+                disabled,
+                type
+              }
+            ),
+            onClean && props.value && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn("absolute top-1/2 transform -translate-y-1/2", {
+                  "right-10": initialInputType === "password" || iconPlacement === "end",
+                  "right-4": initialInputType === "text" && iconPlacement === "start"
+                }),
+                onClick: onClean,
+                children: /* @__PURE__ */ jsx(CircleX, { className: cn("w-4 h-4", iconClass) })
+              }
+            ),
+            initialInputType === "password" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nebula-ds absolute right-4 top-1/2 transform -translate-y-1/2",
+                onClick: () => setType((prev) => prev === "text" ? "password" : "text"),
+                children: type === "text" ? /* @__PURE__ */ jsx(Eye, { className: cn("w-4 h-4", iconClass) }) : /* @__PURE__ */ jsx(EyeOff, { className: cn("w-4 h-4", iconClass) })
+              }
+            ),
+            icon && initialInputType !== "password" && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("absolute top-1/2 transform -translate-y-1/2", {
+                  "left-4": iconPlacement === "start",
+                  "right-4": iconPlacement === "end"
+                }),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "w-4 h-4 flex items-center justify-center disabled:text-inputText-icon-disabled",
+                      iconClass
+                    ),
+                    children: icon
+                  }
+                )
+              }
+            )
+          ] }),
+          !!suffix && /* @__PURE__ */ jsx(
+            "div",
             {
-              ref,
               className: cn(
-                "w-full h-10 outline-none rounded-input text-sm leading-none font-medium",
-                "bg-inputText-background-default disabled:bg-inputText-background-disabled",
-                "border border-inputText-border-default focus:ring-[3px] focus:ring-inputText-border-focus focus:border-inputText-border-focus",
-                "text-inputText-text-filled focus:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
-                "disabled:cursor-not-allowed",
-                {
-                  "pl-10 pr-4": !!icon && iconPlacement === "start",
-                  "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password",
-                  "px-4": !icon,
-                  "border-inputText-border-danger focus:border-inputText-border-danger focus:ring-button-danger-border-focus": isError
-                },
-                className
+                "w-fit h-10 outline-none rounded-input text-sm leading-none font-medium rounded-l-none flex items-center px-4",
+                "bg-inputText-suffixBackground disabled:bg-inputText-background-disabled",
+                "text-inputText-text-filled",
+                "border-l border-inputText-border-default",
+                "rounded-input rounded-l-none"
               ),
-              ...props,
-              disabled,
-              type
-            }
-          ),
-          onClean && props.value && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: cn("absolute top-1/2 transform -translate-y-1/2", {
-                "right-10": initialInputType === "password" || iconPlacement === "end",
-                "right-4": initialInputType === "text" && iconPlacement === "start"
-              }),
-              onClick: onClean,
-              children: /* @__PURE__ */ jsx(CircleX, { className: cn("w-4 h-4", iconClass) })
-            }
-          ),
-          initialInputType === "password" && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "nebula-ds absolute right-4 top-1/2 transform -translate-y-1/2",
-              onClick: () => setType((prev) => prev === "text" ? "password" : "text"),
-              children: type === "text" ? /* @__PURE__ */ jsx(Eye, { className: cn("w-4 h-4", iconClass) }) : /* @__PURE__ */ jsx(EyeOff, { className: cn("w-4 h-4", iconClass) })
-            }
-          ),
-          icon && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn("absolute top-1/2 transform -translate-y-1/2", {
-                "left-4": iconPlacement === "start",
-                "right-4": iconPlacement === "end" && initialInputType !== "password"
-              }),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "w-4 h-4 flex items-center justify-center disabled:text-inputText-icon-disabled",
-                    iconClass
-                  ),
-                  children: icon
-                }
-              )
+              children: suffix
             }
           )
         ]
@@ -3866,13 +3881,44 @@ var Calendar = ({
     }
   );
 };
-
-// src/utils/valid-date-format.ts
-function dateFormatIsValid(dateStr, locale) {
-  const regexBR = /^(?:(?:31\/(0[13578]|1[02]))\/(?:\d{4})|(?:29|30)\/(0[13-9]|1[0-2])\/(?:\d{4})|29\/02\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:0[1-9]|1\d|2[0-8])\/(0[1-9]|1[0-2])\/(?:\d{4}))$/;
-  const regexUS = /^(?:(?:(0[13578]|1[02])\/31)\/(?:\d{4})|(?:(0[13-9]|1[0-2])\/(29|30))\/(?:\d{4})|(?:02\/29)\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:(0[1-9]|1[0-2])\/(0[1-9]|1\d|2[0-8]))\/(?:\d{4}))$/;
-  const regex = locale === "en-US" ? regexUS : regexBR;
-  return regex.test(dateStr);
+function useClickOutside(refs, onClickOutside) {
+  useEffect(() => {
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    function handleClick(event) {
+      const isInside = refArray.some(
+        (ref) => ref?.current && ref?.current.contains(event.target)
+      );
+      if (!isInside) {
+        onClickOutside();
+      }
+    }
+    function handlePressEsc(event) {
+      if (event.key === "Esc") {
+        onClickOutside();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("touchstart", handleClick);
+    document.addEventListener("keypress", handlePressEsc);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("touchstart", handleClick);
+      document.removeEventListener("keypress", handlePressEsc);
+    };
+  }, [refs, onClickOutside]);
+}
+function useKeyPress(key, callback) {
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [key, callback]);
 }
 var formatDateToSubmit = (dateStr, timeFallback = "23:59") => {
   try {
@@ -3893,6 +3939,14 @@ var formatDateToSubmit = (dateStr, timeFallback = "23:59") => {
     return void 0;
   }
 };
+
+// src/utils/valid-date-format.ts
+function dateFormatIsValid(dateStr, locale) {
+  const regexBR = /^(?:(?:31\/(0[13578]|1[02]))\/(?:\d{4})|(?:29|30)\/(0[13-9]|1[0-2])\/(?:\d{4})|29\/02\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:0[1-9]|1\d|2[0-8])\/(0[1-9]|1[0-2])\/(?:\d{4}))$/;
+  const regexUS = /^(?:(?:(0[13578]|1[02])\/31)\/(?:\d{4})|(?:(0[13-9]|1[0-2])\/(29|30))\/(?:\d{4})|(?:02\/29)\/(?:\d\d(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)|(?:(0[1-9]|1[0-2])\/(0[1-9]|1\d|2[0-8]))\/(?:\d{4}))$/;
+  const regex = locale === "en-US" ? regexUS : regexBR;
+  return regex.test(dateStr);
+}
 var dateIsAvailable = (inputDate, disabledDates) => {
   if (!disabledDates || !inputDate) return true;
   const dateIsDisabled = (d, matcher) => {
@@ -4017,61 +4071,57 @@ var InputDatePickerSingle = ({
     replacement: { _: /\d/ }
   };
   const inputRef = useMask(maskOptions);
-  return /* @__PURE__ */ jsx("div", { className: "nebula-ds w-full", children: /* @__PURE__ */ jsxs(Popover, { open: popoverIsOpen, onOpenChange: setPopoverIsOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { className, asChild: true, children: /* @__PURE__ */ jsx(
-      "div",
+  const conteinerRef = useRef(null);
+  const calendarRef = useRef(null);
+  useClickOutside([conteinerRef, calendarRef], () => {
+    setPopoverIsOpen(false);
+  });
+  useKeyPress("Escape", () => {
+    setPopoverIsOpen(false);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds w-full", ref: conteinerRef, children: [
+    /* @__PURE__ */ jsx(
+      InputText,
       {
-        onClick: (e) => e.preventDefault(),
-        onFocus: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsx(
-          InputText,
+        ref: inputRef,
+        placeholder,
+        value,
+        className,
+        onChange: (e) => handleInnerInputChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        icon: /* @__PURE__ */ jsx(
+          CalendarIcon,
           {
-            ref: inputRef,
-            placeholder,
-            value,
-            className,
-            onChange: (e) => handleInnerInputChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            icon: /* @__PURE__ */ jsx(
-              CalendarIcon,
-              {
-                tabIndex: 0,
-                role: "button",
-                onClick: () => setPopoverIsOpen((s) => !s),
-                onKeyUp: (e) => {
-                  if (e.key === "Enter") {
-                    setPopoverIsOpen((s) => !s);
-                  }
-                },
-                className: "nebula-ds cursor-pointer"
-              }
-            ),
-            iconPlacement: "end",
+            tabIndex: 0,
+            role: "button",
+            onClick: () => setPopoverIsOpen((s) => !s),
             onKeyUp: (e) => {
-              if (e.key === "ArrowDown") {
-                setPopoverIsOpen(true);
+              if (e.key === "Enter") {
+                setPopoverIsOpen((s) => !s);
               }
             },
-            maxLength: 10,
-            onClean: onClean ? () => {
-              onClean();
-              handleClearValue();
-            } : void 0,
-            ...rest
+            className: "nebula-ds cursor-pointer"
           }
-        )
+        ),
+        iconPlacement: "end",
+        onKeyUp: (e) => {
+          if (e.key === "ArrowDown") {
+            setPopoverIsOpen(true);
+          }
+        },
+        maxLength: 10,
+        onClean: onClean ? () => {
+          onClean();
+          handleClearValue();
+        } : void 0,
+        ...rest
       }
-    ) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
+    ),
+    /* @__PURE__ */ jsx("div", { className: "nebula-ds  relative", children: popoverIsOpen && /* @__PURE__ */ jsx(
+      "div",
       {
-        side: "bottom",
-        className: "nebula-ds p-0 border-none bg-transparent shadow-none absolute",
-        align: "start",
-        collisionPadding: 8,
-        avoidCollisions: true,
-        asChild: false,
-        style: { position: "absolute" },
+        className: "nebula-ds absolute top-full left-0-0 z-40 pb-2 pt-1",
+        ref: calendarRef,
         children: /* @__PURE__ */ jsx(
           Calendar,
           {
@@ -4087,8 +4137,8 @@ var InputDatePickerSingle = ({
           }
         )
       }
-    )
-  ] }) });
+    ) })
+  ] });
 };
 var InputTime = forwardRef(
   ({ value = "", onChange, placeholder = "--:--", ...rest }, ref) => {
@@ -4168,7 +4218,10 @@ var InputDateTimePickerSingle = ({
   ...rest
 }) => {
   const [innerTimeValue, setInnerTimeValue] = useState(
-    value?.split?.(DATA_TIME_SEPARATOR)?.at?.(-1) ?? ""
+    () => {
+      const [, time] = (value || "")?.split?.(DATA_TIME_SEPARATOR);
+      return time ?? "";
+    }
   );
   const formattedDateByLanguage = formatDateToSubmit(
     value?.split(DATA_TIME_SEPARATOR)?.at(0) ?? ""
@@ -4235,8 +4288,9 @@ var InputDateTimePickerSingle = ({
     if (date && !dateFormatIsValid(date, locale)) {
       handleClearValue();
     }
+    const hasInputtedDate = date.length === "__/__/____".length;
     onChange?.(
-      date + (newTime ? DATA_TIME_SEPARATOR + newTime : ""),
+      date + (newTime && hasInputtedDate ? DATA_TIME_SEPARATOR + newTime : ""),
       innerDate,
       newTime
     );
@@ -4284,60 +4338,56 @@ var InputDateTimePickerSingle = ({
     replacement: { _: /\d/ }
   };
   const inputRef = useMask(maskOptions);
-  return /* @__PURE__ */ jsx("div", { className: "nebula-ds w-full", children: /* @__PURE__ */ jsxs(Popover, { open: popoverIsOpen, onOpenChange: setPopoverIsOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { className, asChild: true, children: /* @__PURE__ */ jsx(
-      "div",
+  const conteinerRef = useRef(null);
+  const calendarRef = useRef(null);
+  useClickOutside([conteinerRef, calendarRef], () => {
+    setPopoverIsOpen(false);
+  });
+  useKeyPress("Escape", () => {
+    setPopoverIsOpen(false);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds w-full", ref: conteinerRef, children: [
+    /* @__PURE__ */ jsx(
+      InputText,
       {
-        onClick: (e) => e.preventDefault(),
-        onFocus: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsx(
-          InputText,
+        ref: inputRef,
+        placeholder,
+        value,
+        className,
+        onChange: (e) => handleInnerInputChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        icon: /* @__PURE__ */ jsx(
+          CalendarIcon,
           {
-            ref: inputRef,
-            placeholder,
-            value,
-            className,
-            onChange: (e) => handleInnerInputChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            icon: /* @__PURE__ */ jsx(
-              CalendarIcon,
-              {
-                tabIndex: 0,
-                role: "button",
-                onClick: () => setPopoverIsOpen((s) => !s),
-                onKeyUp: (e) => {
-                  if (e.key === "Enter") {
-                    setPopoverIsOpen((s) => !s);
-                  }
-                },
-                className: "nebula-ds cursor-pointer"
-              }
-            ),
-            iconPlacement: "end",
+            tabIndex: 0,
+            role: "button",
+            onClick: () => setPopoverIsOpen((s) => !s),
             onKeyUp: (e) => {
-              if (e.key === "ArrowDown") {
-                setPopoverIsOpen(true);
+              if (e.key === "Enter") {
+                setPopoverIsOpen((s) => !s);
               }
             },
-            onClean: onClean ? () => {
-              onClean();
-              handleClearValue();
-            } : void 0,
-            ...rest
+            className: "nebula-ds cursor-pointer"
           }
-        )
+        ),
+        iconPlacement: "end",
+        onKeyUp: (e) => {
+          if (e.key === "ArrowDown") {
+            setPopoverIsOpen(true);
+          }
+        },
+        onClean: onClean ? () => {
+          onClean();
+          handleClearValue();
+        } : void 0,
+        ...rest
       }
-    ) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
+    ),
+    /* @__PURE__ */ jsx("div", { className: "nebula-ds  relative", children: popoverIsOpen && /* @__PURE__ */ jsx(
+      "div",
       {
-        side: "bottom",
-        className: "nebula-ds p-0 border-none bg-transparent shadow-none",
-        align: "start",
-        collisionPadding: 8,
-        avoidCollisions: true,
-        asChild: false,
-        style: { position: "absolute" },
+        className: "nebula-ds absolute top-full left-0-0 z-40 pb-2 pt-1",
+        ref: calendarRef,
         children: /* @__PURE__ */ jsx(
           Calendar,
           {
@@ -4369,14 +4419,14 @@ var InputDateTimePickerSingle = ({
           }
         )
       }
-    )
-  ] }) });
+    ) })
+  ] });
 };
-var FileUploadError = /* @__PURE__ */ ((FileUploadError2) => {
-  FileUploadError2["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
-  FileUploadError2["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
-  FileUploadError2["INVALID_FORMAT"] = "INVALID_FORMAT";
-  return FileUploadError2;
+var FileUploadError = /* @__PURE__ */ ((FileUploadError4) => {
+  FileUploadError4["MAX_FILES_EXCEEDED"] = "MAX_FILES_EXCEEDED";
+  FileUploadError4["MAXIMUM_FILE_SIZE_EXCEEDED"] = "MAXIMUM_FILE_SIZE_EXCEEDED";
+  FileUploadError4["INVALID_FORMAT"] = "INVALID_FORMAT";
+  return FileUploadError4;
 })(FileUploadError || {});
 var useFileUpload = (options = {}) => {
   const {
@@ -4477,9 +4527,6 @@ var useFileUpload = (options = {}) => {
       const newFilesArray = Array.from(newFiles);
       const errors = [];
       setState((prev) => ({ ...prev, errors: [] }));
-      if (!multiple) {
-        clearFiles();
-      }
       if (multiple && maxFiles !== Infinity && state.files.length + newFilesArray.length > maxFiles) {
         errors.push({ error: "MAX_FILES_EXCEEDED" /* MAX_FILES_EXCEEDED */ });
         setState((prev) => ({ ...prev, errors }));
@@ -4514,6 +4561,9 @@ var useFileUpload = (options = {}) => {
         }
       });
       if (validFiles.length > 0) {
+        if (!multiple) {
+          clearFiles();
+        }
         onFilesAdded?.(validFiles);
         setState((prev) => {
           const newFiles2 = !multiple ? validFiles : [...prev.files, ...validFiles];
@@ -4810,6 +4860,7 @@ function FileUpload({
     ) })
   ] });
 }
+FileUpload.displayName = "FileUpload";
 var TextArea = React8.forwardRef(
   ({
     className,
@@ -4887,6 +4938,102 @@ var TextArea = React8.forwardRef(
   }
 );
 TextArea.displayName = "TextArea";
+var ProfileImage = ({
+  maxSizeMB = 2,
+  subtitle,
+  onError,
+  maxFiles = Infinity,
+  onRemove,
+  ...rest
+}) => {
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const [
+    { files, isDragging, errors },
+    {
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      removeFile,
+      getInputProps
+    }
+  ] = useFileUpload({
+    multiple: false,
+    maxSize: maxSize > 0 ? maxSize : void 0,
+    accept: "image/*",
+    ...rest,
+    maxFiles
+  });
+  useEffect(() => {
+    onError?.(errors);
+  }, [errors, onError]);
+  const [file] = files;
+  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ 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"
+        ),
+        "data-testid": "select-image-profile",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...getInputProps(),
+              className: "nebula-ds sr-only",
+              "aria-label": "Upload file"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
+              "aria-hidden": "true",
+              children: [
+                file && file.preview && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: file.preview,
+                    alt: file.file.name,
+                    className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
+                  }
+                ),
+                !file && /* @__PURE__ */ jsx(UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
+              ]
+            }
+          ),
+          file && /* @__PURE__ */ 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__ */ jsx(XIcon, { className: "nebula-ds size-2" })
+            }
+          )
+        ]
+      }
+    ) }),
+    !!subtitle && /* @__PURE__ */ jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
+  ] });
+};
+ProfileImage.displayName = "ProfileImage";
 
 // src/tailwind.ts
 function content({ base = "./" } = {}) {
@@ -4898,4 +5045,4 @@ var tailwind = {
   // plugin: () => require("tailwindcss")("node_modules/@nebulareact/dist/tailwind.config.js"),
 };
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, StyledSelect as Select, Separator2 as Separator, Skeleton, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages16 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, StyledSelect as Select, Separator2 as Separator, Skeleton, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages16 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "React components",
   "publishConfig": {
     "access": "public"