@tecsinapse/cortex-react 1.6.0 → 1.7.0-beta.1

package/dist/cjs/components/Avatar.js

@@ -2,7 +2,8 @@
 
 var clsx = require('clsx');
 var React = require('react');
-var utils = require('./utils.js');
+require('@internationalized/date');
+var string = require('../utils/string.js');
 
 const Avatar = ({ src, name, className, ...rest }) => {
   const [hasError, setHasError] = React.useState(false);
@@ -27,7 +28,7 @@ const Avatar = ({ src, name, className, ...rest }) => {
         onError: () => setHasError(true),
         "data-testid": "avatar-img"
       }
-    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, utils.getNameInitials(name))
+    ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base", "data-testid": "avatar-p" }, string.getNameInitials(name))
   );
 };
 

package/dist/cjs/components/Calendar/Calendar.js

@@ -7,6 +7,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/Calendar/CalendarCell.js

@@ -7,6 +7,8 @@ require('react-stately');
 var useCalendarCell = require('../../hooks/useCalendarCell.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var calendarCell = require('../../styles/calendar-cell.js');
 require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');

package/dist/cjs/components/Calendar/CalendarGrid.js

@@ -7,6 +7,8 @@ require('react-stately');
 var useCalendarGrid = require('../../hooks/useCalendarGrid.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
 var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');
 

package/dist/cjs/components/Calendar/RangeCalendar.js

@@ -7,6 +7,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useRangeCalendar = require('../../hooks/useRangeCalendar.js');
+require('react-dropzone');
+require('uuid');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -4,16 +4,18 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var utils = require('../utils.js');
+var date = require('../../utils/date.js');
 var useDatePickerInput = require('../../hooks/useDatePickerInput.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var Calendar = require('../Calendar/Calendar.js');
-var DateField = require('./DateField.js');
-var DatePickerInputBase = require('./DatePickerInputBase.js');
 var index = require('../Popover/index.js');
 var Context = require('../Popover/Context.js');
 var Content = require('./Content.js');
+var DateField = require('./DateField.js');
+var DatePickerInputBase = require('./DatePickerInputBase.js');
 
 const DatePickerInputWithPopover = (props) => {
   const { setIsOpen } = Context.usePopoverContext();
@@ -43,7 +45,7 @@ const DatePickerInputWithPopover = (props) => {
       value,
       onChange: (value2) => {
         setIsOpen(false);
-        state.setDateValue(utils.dateToCalendarDate(value2));
+        state.setDateValue(date.dateToCalendarDate(value2));
       }
     }
   )));

package/dist/cjs/components/DatePicker/DateRangePickerInput.js

@@ -4,16 +4,18 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var utils = require('../utils.js');
+var date = require('../../utils/date.js');
 var useDateRangePickerInput = require('../../hooks/useDateRangePickerInput.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
-var DateField = require('./DateField.js');
-var DatePickerInputBase = require('./DatePickerInputBase.js');
 var index = require('../Popover/index.js');
 var Context = require('../Popover/Context.js');
 var Content = require('./Content.js');
+var DateField = require('./DateField.js');
+var DatePickerInputBase = require('./DatePickerInputBase.js');
 
 const DateRangePickerInputWithPopover = (props) => {
   const { setIsOpen } = Context.usePopoverContext();
@@ -32,7 +34,7 @@ const DateRangePickerInputWithPopover = (props) => {
       DateField.DateField,
       {
         ...startFieldProps,
-        value: utils.dateToCalendarDate(value?.start),
+        value: date.dateToCalendarDate(value?.start),
         onChange: (value2) => {
           state.setDate("start", value2);
         }
@@ -41,7 +43,7 @@ const DateRangePickerInputWithPopover = (props) => {
       DateField.DateField,
       {
         ...endFieldProps,
-        value: utils.dateToCalendarDate(value?.end),
+        value: date.dateToCalendarDate(value?.end),
         onChange: (value2) => {
           state.setDate("end", value2);
         }
@@ -54,8 +56,8 @@ const DateRangePickerInputWithPopover = (props) => {
       onChange: (value2) => {
         setIsOpen?.(false);
         state.setDateRange({
-          start: utils.dateToCalendarDate(value2.start),
-          end: utils.dateToCalendarDate(value2.end)
+          start: date.dateToCalendarDate(value2.start),
+          end: date.dateToCalendarDate(value2.end)
         });
       }
     }

package/dist/cjs/components/Input/Mask.js

@@ -7,6 +7,8 @@ require('react-stately');
 require('@floating-ui/react');
 var useNumberMask = require('../../hooks/useNumberMask.js');
 var useStringMask = require('../../hooks/useStringMask.js');
+require('react-dropzone');
+require('uuid');
 var Root = require('./Root.js');
 
 const InputMask = React.forwardRef(

package/dist/cjs/components/Input/Search.js

@@ -8,6 +8,8 @@ require('react-stately');
 var useDebouncedState = require('../../hooks/useDebouncedState.js');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var Box = require('./Box.js');
 var Face = require('./Face.js');
 var Left = require('./Left.js');

package/dist/cjs/components/Input/index.js

@@ -7,6 +7,8 @@ var Mask = require('./Mask.js');
 var Right = require('./Right.js');
 var Root = require('./Root.js');
 var Search = require('./Search.js');
+require('@internationalized/date');
+require('react');
 
 const Input = {
   Root: Root.InputRoot,

package/dist/cjs/components/Input/masks.js

@@ -1,6 +1,8 @@
 'use strict';
 
-var extractNumbersFromString = require('../../utils/extractNumbersFromString.js');
+require('@internationalized/date');
+var extractors = require('../../utils/extractors.js');
+require('react');
 
 const ExpressionMasks = {
   CPF: "000.000.000-00",
@@ -48,7 +50,7 @@ const Masks = {
   PHONE: ["(99) 9999-9999"],
   PHONE_EXTENDED: ["(99) 99999-9999"],
   COMBINED_PHONE: (value) => {
-    const onlyNumbers = extractNumbersFromString.extractDigitsFromString(value);
+    const onlyNumbers = extractors.extractDigitsFromString(value);
     const isCellPhoneExtended = onlyNumbers.length === 11;
     return value?.length <= 14 && !isCellPhoneExtended ? Masks.PHONE : Masks.PHONE_EXTENDED;
   },

package/dist/cjs/components/Menubar/Dropdown.js

@@ -8,6 +8,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Menubar/Header.js

@@ -7,6 +7,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Menubar/ItemLink.js

@@ -7,6 +7,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Menubar/Search.js

@@ -9,6 +9,8 @@ require('react-aria');
 require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 require('../../provider/MenubarContext.js');
 require('../../provider/SnackbarProvider.js');
 var useMenubar = require('../../provider/useMenubar.js');

package/dist/cjs/components/Popover/Provider.js

@@ -4,8 +4,10 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+var useFloatingElement = require('../../hooks/useFloatingElement.js');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 var Context = require('./Context.js');
 
 const PopoverProvider = ({
@@ -13,7 +15,7 @@ const PopoverProvider = ({
   placement,
   trigger
 }) => {
-  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
+  const floatingLogic = useFloatingElement.useFloatingElement({ placement, trigger });
   return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
 };
 

package/dist/cjs/components/Popover/Trigger.js

@@ -1,12 +1,13 @@
 'use strict';
 
-var utils = require('../utils.js');
+require('@internationalized/date');
+var react = require('../../utils/react.js');
 var Context = require('./Context.js');
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = Context.usePopoverContext();
   const isDisabled = children.props?.disabled;
-  return utils.cloneWithProps(children, isDisabled ? {} : triggerProps);
+  return react.cloneWithProps(children, isDisabled ? {} : triggerProps);
 };
 
 exports.PopoverTrigger = PopoverTrigger;

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var ProgressBarInfinite = require('./ProgressBarInfinite.js');
+var ProgressBarSegments = require('./ProgressBarSegments.js');
+
+const ProgressBar = ({
+  segments: _segments = 1,
+  valueMin = 0,
+  valueMax = 100,
+  valueCurrent = 50,
+  intentProgress = "default",
+  type = "default",
+  animated = true
+}) => {
+  const [displayedValue, setDisplayedValue] = React.useState(0);
+  const [showAnimation, setShowAnimation] = React.useState(true);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (valueCurrent < displayedValue) {
+        setShowAnimation(false);
+      }
+      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
+      setDisplayedValue(valueCurrent);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [valueCurrent]);
+  const totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
+  const segments = Math.max(1, _segments);
+  return type === "infinite" ? /* @__PURE__ */ React.createElement(ProgressBarInfinite.ProgressBarInfinite, { intentProgress }) : /* @__PURE__ */ React.createElement(
+    ProgressBarSegments.ProgressBarSegments,
+    {
+      segments,
+      totalProgress,
+      intentProgress,
+      showAnimation
+    }
+  );
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/cjs/components/ProgressBar/ProgressBarInfinite.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+var progressBar = require('../../styles/progressBar.js');
+
+const { container, bar, progress } = progressBar.progressBarInfiniteVariants();
+const ProgressBarInfinite = ({
+  intentProgress
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: container() }, /* @__PURE__ */ React.createElement("div", { className: bar(), "data-testid": "infinite-progress-bar" }, /* @__PURE__ */ React.createElement("div", { className: progress({ status: intentProgress }) })));
+};
+
+exports.ProgressBarInfinite = ProgressBarInfinite;

package/dist/cjs/components/ProgressBar/ProgressBarSegments.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+var progressBar = require('../../styles/progressBar.js');
+
+const ProgressBarSegments = ({
+  segments,
+  totalProgress,
+  intentProgress,
+  showAnimation
+}) => {
+  const lengthSeg = 100 / segments;
+  const items = [...Array(segments).keys()];
+  const progressStyle = React.useCallback(
+    (width, index) => {
+      return {
+        width: `${width}%`,
+        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
+      };
+    },
+    [showAnimation]
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row", "data-testid": "progress-bar" }, items.map((_, index) => {
+    const max = lengthSeg * (index + 1);
+    const min = lengthSeg * index;
+    const minmax = (totalProgress - min) / (max - min);
+    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: index,
+        className: "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: progressStyle(width, index),
+          "data-testid": "div-segment-filled",
+          className: progressBar.progressBarFilled({ intentProgress, showAnimation })
+        }
+      )
+    );
+  }));
+};
+
+exports.ProgressBarSegments = ProgressBarSegments;

package/dist/cjs/components/Select/GroupedOptions.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
+require('react-dropzone');
+require('uuid');
 var Context = require('../Popover/Context.js');
 var Option = require('./Option.js');
 var SkeletonOptions = require('./SkeletonOptions.js');

package/dist/cjs/components/Select/MultiGroupedOptions.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
+require('react-dropzone');
+require('uuid');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');

package/dist/cjs/components/Select/MultiOptions.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
+require('react-dropzone');
+require('uuid');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');

package/dist/cjs/components/Select/Options.js

@@ -8,6 +8,8 @@ require('react-stately');
 require('@floating-ui/react');
 require('currency.js');
 var useSelectOptions = require('../../hooks/useSelectOptions.js');
+require('react-dropzone');
+require('uuid');
 var Context = require('../Popover/Context.js');
 var Option = require('./Option.js');
 var SkeletonOptions = require('./SkeletonOptions.js');

package/dist/cjs/components/Tooltip.js

@@ -1,13 +1,15 @@
 'use strict';
 
-var react = require('@floating-ui/react');
+var react$1 = require('@floating-ui/react');
 var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var utils = require('./utils.js');
-var useFloatingLogic = require('../hooks/useFloatingLogic.js');
+var react = require('../utils/react.js');
+var useFloatingElement = require('../hooks/useFloatingElement.js');
 require('currency.js');
+require('react-dropzone');
+require('uuid');
 
 const Tooltip = React.forwardRef(
   (props, ref) => {
@@ -17,7 +19,8 @@ const Tooltip = React.forwardRef(
       trigger = "hover",
       placement = "top",
       width,
-      height
+      height,
+      delay = { open: 500, close: 0 }
     } = props;
     const arrowRef = React.useRef(null);
     const {
@@ -28,9 +31,10 @@ const Tooltip = React.forwardRef(
       strategy,
       refs,
       context,
-      floatingStyles
-    } = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, utils.cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+      floatingStyles,
+      getFloatingProps
+    } = useFloatingElement.useFloatingElement({ placement, arrowRef, trigger, delay });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, react.cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: ref || refs.setFloating,
@@ -42,11 +46,12 @@ const Tooltip = React.forwardRef(
           width,
           height,
           ...floatingStyles
-        }
+        },
+        ...getFloatingProps()
       },
       text,
-      /* @__PURE__ */ React.createElement(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+      /* @__PURE__ */ React.createElement(react$1.FloatingArrow, { ref: arrowRef, context, fill: "black" })
+    ) : null);
   }
 );
 

package/dist/cjs/components/Uploader/Dropzone.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var hi2 = require('react-icons/hi2');
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+
+const Dropzone = ({
+  dropzoneProps,
+  selectFileText = "Select a file to start",
+  dropText = "By dragging and dropping it here or clicking the button below",
+  buttonText = "Select File"
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...dropzoneProps.getRootProps(),
+      className: clsx(
+        "bg-white w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili",
+        {
+          "border-success-medium bg-gray-100": dropzoneProps.isDragActive
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement("input", { ...dropzoneProps.getInputProps() }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center text-center items-center gap-deca" }, /* @__PURE__ */ React.createElement(hi2.HiOutlineCloudArrowUp, { className: "text-primary-medium", size: 35 }), /* @__PURE__ */ React.createElement("div", { className: "gap-mili" }, /* @__PURE__ */ React.createElement("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone" }, selectFileText), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-secondary-medium" }, dropText)), /* @__PURE__ */ React.createElement("button", { className: cortexCore.button() }, buttonText))
+  );
+};
+
+exports.Dropzone = Dropzone;

package/dist/cjs/components/Uploader/Files.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var Upload = require('./Upload.js');
+
+const Files = ({
+  files,
+  onDelete,
+  uploadProgressText = "Upload(s) in progress"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-mili items-center mb-deca" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white" }, `${files.length}`), /* @__PURE__ */ React.createElement("h2", { className: "text-md font-semibold", "data-testid": "upload-progress" }, uploadProgressText)), files.map((file, index) => /* @__PURE__ */ React.createElement(Upload.File, { key: file.uid, file, index, onDelete })));
+};
+
+exports.Files = Files;

package/dist/cjs/components/Uploader/Modal.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var md = require('react-icons/md');
+var cortexCore = require('@tecsinapse/cortex-core');
+var Modal$1 = require('../Modal.js');
+var reactDom = require('react-dom');
+
+const Modal = ({
+  open,
+  onClose,
+  children,
+  title = "File Upload"
+}) => {
+  return reactDom.createPortal(
+    /* @__PURE__ */ React.createElement(
+      Modal$1.Modal,
+      {
+        open,
+        onClose,
+        className: "flex-col w-[70%] h-[50%] bg-secondary-xlight rounded-mili"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between mb-deca" }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("h2", { className: "text-deca font-semibold" }, title), /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: cortexCore.button({ size: "square" }),
+          onClick: onClose,
+          "data-testid": "close-button"
+        },
+        /* @__PURE__ */ React.createElement(md.MdClose, { size: 20 })
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row w-full h-full max-h-[85%] gap-deca" }, children)
+    ),
+    document.body
+  );
+};
+
+exports.Modal = Modal;

package/dist/cjs/components/Uploader/Root.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var Modal = require('./Modal.js');
+var Dropzone = require('./Dropzone.js');
+var Files = require('./Files.js');
+
+const Root = ({
+  open,
+  onClose,
+  files,
+  onDelete,
+  dropzoneProps,
+  selectFileText,
+  dropText,
+  buttonText,
+  uploadProgressText,
+  titleModal
+}) => {
+  return /* @__PURE__ */ React.createElement(Modal.Modal, { onClose, open, title: titleModal }, /* @__PURE__ */ React.createElement(
+    Dropzone.Dropzone,
+    {
+      dropzoneProps,
+      selectFileText,
+      dropText,
+      buttonText
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Files.Files,
+    {
+      files,
+      onDelete,
+      uploadProgressText
+    }
+  ));
+};
+
+exports.Root = Root;

package/dist/cjs/components/Uploader/Upload.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var fa6 = require('react-icons/fa6');
+var cortexCore = require('@tecsinapse/cortex-core');
+var md = require('react-icons/md');
+var ProgressBar = require('../ProgressBar/ProgressBar.js');
+
+const File = ({ file, index, onDelete }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", key: index }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-centi" }, file.file && file.file.type.startsWith("image/") ? /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: URL.createObjectURL(file.file),
+      alt: "Preview",
+      className: "w-tera h-tera rounded-mili"
+    }
+  ) : /* @__PURE__ */ React.createElement("span", { className: "border-2 text-kilo text-primary-medium w-tera h-tera flex items-center justify-center rounded-mili" }, /* @__PURE__ */ React.createElement(fa6.FaRegFileLines, null)), /* @__PURE__ */ React.createElement("div", { className: "flex-col" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold truncate max-w-[200px]" }, file.file.name), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500" }, (file.file.size / 1024).toFixed(2), " KB"))), file.status === "success" && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => onDelete(index),
+      "data-testid": "remove-button",
+      className: cortexCore.button({
+        className: " bg-inherit border-2 border-primary-light text-primary-light",
+        size: "small"
+      })
+    },
+    /* @__PURE__ */ React.createElement(md.MdClose, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(ProgressBar.ProgressBar, { intentProgress: file.status, type: "infinite" }));
+};
+
+exports.File = File;

package/dist/cjs/components/Uploader/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var Dropzone = require('./Dropzone.js');
+var Files = require('./Files.js');
+var Modal = require('./Modal.js');
+var Root = require('./Root.js');
+
+const Uploader = {
+  Dropzone: Dropzone.Dropzone,
+  Files: Files.Files,
+  Modal: Modal.Modal,
+  Root: Root.Root
+};
+
+exports.Root = Root.Root;
+exports.Uploader = Uploader;