@ctlyst.id/internal-ui 1.0.2-canary.4 → 1.0.2

package/dist/internal-ui.cjs.development.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var react = require('@chakra-ui/react');
-var React$1 = require('react');
-var React$1__default = _interopDefault(React$1);
+var React = require('react');
+var React__default = _interopDefault(React);
 var fi = require('react-icons/fi');
 var icons = require('@chakra-ui/icons');
 var react$1 = require('@emotion/react');
@@ -16,8 +16,8 @@ var ReactDatePicker = _interopDefault(require('react-datepicker'));
 var system = require('@chakra-ui/system');
 var ReactSelect = _interopDefault(require('react-select'));
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
-var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
 var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
+var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
 var reactDropzone = require('react-dropzone');
 var themeTools = require('@chakra-ui/theme-tools');
 var anatomy = require('@chakra-ui/anatomy');
@@ -35,27 +35,27 @@ const BreadCrumb = props => {
     spacing = 2
   } = props;
   const [neutral7, dark5] = react.useToken('colors', ['neutral.700', 'dark.500']);
-  return /*#__PURE__*/React$1.createElement(react.Box, {
+  return /*#__PURE__*/React.createElement(react.Box, {
     "data-test-id": "CT_component_breadcrumb_breadcrumb",
     className: className,
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
     paddingY: 2
-  }, /*#__PURE__*/React$1.createElement(react.Box, {
+  }, /*#__PURE__*/React.createElement(react.Box, {
     display: "flex",
     alignItems: "center"
-  }, /*#__PURE__*/React$1.createElement(react.Text, {
+  }, /*#__PURE__*/React.createElement(react.Text, {
     pr: 2,
     fontWeight: 500,
     textStyle: "heading.3",
     color: react.useColorModeValue('neutral.700', 'white')
-  }, title), /*#__PURE__*/React$1.createElement(react.Box, {
+  }, title), /*#__PURE__*/React.createElement(react.Box, {
     h: "22px",
     borderLeft: "1px solid",
     borderColor: react.useColorModeValue('neutral.700', 'white')
-  }), /*#__PURE__*/React$1.createElement(react.Breadcrumb, {
-    separator: /*#__PURE__*/React$1.createElement(fi.FiChevronsRight, {
+  }), /*#__PURE__*/React.createElement(react.Breadcrumb, {
+    separator: /*#__PURE__*/React.createElement(fi.FiChevronsRight, {
       color: react.useColorModeValue(neutral7, dark5),
       size: 14
     }),
@@ -71,20 +71,20 @@ const BreadCrumb = props => {
     display: "flex",
     alignItems: "center",
     className: "breadcrumb-wrapper"
-  }, /*#__PURE__*/React$1.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React$1.createElement(react.BreadcrumbLink, {
+  }, /*#__PURE__*/React.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
     href: !disableHome ? '/' : undefined,
     style: {
       ...(disableHome && {
         cursor: 'default'
       })
     }
-  }, /*#__PURE__*/React$1.createElement(fi.FiHome, {
+  }, /*#__PURE__*/React.createElement(fi.FiHome, {
     className: "align-top",
     size: 16,
     color: react.useColorModeValue('#12784A', '#ffffff')
-  }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/React$1.createElement(react.BreadcrumbItem, {
+  }))), parents === null || parents === void 0 ? void 0 : parents.map(val => /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
     key: val.name
-  }, /*#__PURE__*/React$1.createElement(react.BreadcrumbLink, {
+  }, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
     "data-test-id": "iadKcMAul3QAdvmfIQjRE",
     href: !val.disable ? val.link : undefined,
     onClick: val.onClick,
@@ -96,20 +96,20 @@ const BreadCrumb = props => {
     _hover: {
       textDecoration: 'none'
     }
-  }, /*#__PURE__*/React$1.createElement(react.Text, {
+  }, /*#__PURE__*/React.createElement(react.Text, {
     color: val.disable ? 'dark.600' : react.useColorModeValue('primary.500', 'white'),
     fontSize: "text.sm",
     fontWeight: 400
-  }, val.name)))), /*#__PURE__*/React$1.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React$1.createElement(react.BreadcrumbLink, {
+  }, val.name)))), /*#__PURE__*/React.createElement(react.BreadcrumbItem, null, /*#__PURE__*/React.createElement(react.BreadcrumbLink, {
     _hover: {
       textDecor: 'none',
       cursor: 'default'
     }
-  }, /*#__PURE__*/React$1.createElement(react.Text, {
+  }, /*#__PURE__*/React.createElement(react.Text, {
     color: react.useColorModeValue('dark.700', 'white'),
     fontSize: "text.sm",
     fontWeight: 400
-  }, title))))), children && /*#__PURE__*/React$1.createElement(react.Box, null, children));
+  }, title))))), children && /*#__PURE__*/React.createElement(react.Box, null, children));
 };
 BreadCrumb.defaultProps = {
   children: undefined,
@@ -123,15 +123,15 @@ const IndeterminateCheckbox = ({
   indeterminate = false,
   ...rest
 }) => {
-  const ref = React$1.useRef(null);
-  React$1.useEffect(() => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
     if (ref.current && typeof indeterminate === 'boolean') {
       ref.current.indeterminate = !rest.checked && indeterminate;
     }
   }, [ref, indeterminate]);
-  return /*#__PURE__*/React$1.createElement(react.Flex, {
+  return /*#__PURE__*/React.createElement(react.Flex, {
     align: "center"
-  }, /*#__PURE__*/React$1.createElement("input", Object.assign({
+  }, /*#__PURE__*/React.createElement("input", Object.assign({
     type: "checkbox",
     ref: ref
   }, rest)));
@@ -150,21 +150,21 @@ const DataTable = ({
   styles,
   ...props
 }) => {
-  const [sorting, setSorting] = React$1.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
-  const [rowSelection, onRowSelectionChange] = React$1.useState({});
-  const dataColumns = React$1.useMemo(() => columns, [columns]);
-  const checkboxColumn = React$1.useMemo(() => [{
+  const [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
+  const [rowSelection, onRowSelectionChange] = React.useState({});
+  const dataColumns = React.useMemo(() => columns, [columns]);
+  const checkboxColumn = React.useMemo(() => [{
     id: 'select',
     header: ({
       table
-    }) => /*#__PURE__*/React$1.createElement(IndeterminateCheckbox, Object.assign({}, {
+    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
       checked: table.getIsAllRowsSelected(),
       indeterminate: table.getIsSomeRowsSelected(),
       onChange: table.getToggleAllRowsSelectedHandler()
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/React$1.createElement(IndeterminateCheckbox, Object.assign({}, {
+    }) => /*#__PURE__*/React.createElement(IndeterminateCheckbox, Object.assign({}, {
       checked: row.getIsSelected(),
       indeterminate: row.getIsSomeSelected(),
       onChange: row.getToggleSelectedHandler()
@@ -200,13 +200,13 @@ const DataTable = ({
   const {
     flatRows
   } = table.getSelectedRowModel();
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const rowData = flatRows.map(row => row.original);
     if (onSelectedRow) {
       onSelectedRow(rowData);
     }
   }, [flatRows]);
-  return /*#__PURE__*/React$1.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React$1.createElement(react.Flex, {
+  return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
     w: "100%",
     h: "100%",
     pos: "absolute",
@@ -214,42 +214,42 @@ const DataTable = ({
     align: "center",
     justify: "center",
     zIndex: 2
-  }, /*#__PURE__*/React$1.createElement(react.Spinner, {
+  }, /*#__PURE__*/React.createElement(react.Spinner, {
     color: "primary.500",
     thickness: "4px",
     size: "lg"
-  })), /*#__PURE__*/React$1.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React$1.createElement(react.Thead, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableHead), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React$1.createElement(react.Tr, Object.assign({
+  })), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableHead), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
     key: headerGroup.id,
     bg: react.useColorModeValue('initial', 'ebony-clay.700')
   }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
     var _ref;
-    return /*#__PURE__*/React$1.createElement(react.Th, Object.assign({
+    return /*#__PURE__*/React.createElement(react.Th, Object.assign({
       key: header.id,
       colSpan: header.colSpan
-    }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React$1.createElement(react.Flex, {
+    }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React.createElement(react.Flex, {
       "data-test-id": `CT_Container_TableHeader_${header.id}`,
       textTransform: "capitalize",
       userSelect: "none",
       align: "center",
-      justifyContent: "space-between",
-      onClick: header.column.getToggleSortingHandler(),
-      cursor: header.column.getCanSort() ? 'pointer' : 'default'
-    }, /*#__PURE__*/React$1.createElement(react.Text, {
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(react.Text, {
       fontSize: "text.sm",
       fontWeight: 400,
       lineHeight: "18px",
       color: react.useColorModeValue('neutral.900', 'white')
-    }, reactTable.flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/React$1.createElement(react.Box, {
+    }, reactTable.flexRender(header.column.columnDef.header, header.getContext())), /*#__PURE__*/React.createElement(react.Box, {
       as: "span",
       pl: "2",
-      "data-test-id": `CT_Container_SortingIcon_${header.id}`
+      cursor: header.column.getCanSort() ? 'pointer' : 'default',
+      "data-test-id": `CT_Container_SortingIcon_${header.id}`,
+      onClick: header.column.getToggleSortingHandler()
     }, (_ref = header.column.getCanSort() && {
-      asc: /*#__PURE__*/React$1.createElement(icons.ChevronUpIcon, null),
-      desc: /*#__PURE__*/React$1.createElement(icons.ChevronDownIcon, null)
-    }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React$1.createElement(icons.UpDownIcon, {
+      asc: /*#__PURE__*/React.createElement(icons.ChevronUpIcon, null),
+      desc: /*#__PURE__*/React.createElement(icons.ChevronDownIcon, null)
+    }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React.createElement(icons.UpDownIcon, {
       h: 2
     }))));
-  })))), /*#__PURE__*/React$1.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/React$1.createElement(react.Tr, Object.assign({
+  })))), /*#__PURE__*/React.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
     key: row.id
   }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
     css: react$1.css`
@@ -259,7 +259,7 @@ const DataTable = ({
                   }
                 }
               `
-  }), row.getVisibleCells().map(cell => /*#__PURE__*/React$1.createElement(react.Td, Object.assign({
+  }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
     key: cell.id,
     fontSize: "text.sm",
     color: react.useColorModeValue('dark.800', 'dark.300')
@@ -285,7 +285,7 @@ const Styles = () => {
   const {
     colorMode
   } = system.useColorMode();
-  return React.createElement(react$1.Global, {
+  return /*#__PURE__*/React__default.createElement(react$1.Global, {
     styles: `
       @charset "UTF-8";
       .react-datepicker__year-read-view--down-arrow,
@@ -1093,33 +1093,33 @@ const TimeInput = ({
   label,
   rightAddon
 }) => {
-  const [time, setTime] = React$1__default.useState(value || '00:00');
+  const [time, setTime] = React__default.useState(value || '00:00');
   const handleChange = e => {
     var _e$target;
     setTime(((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '00:00');
   };
-  React$1__default.useEffect(() => {
+  React__default.useEffect(() => {
     if (onChange) {
       onChange(time);
     }
   }, [time]);
-  return /*#__PURE__*/React$1__default.createElement(react.Flex, {
+  return /*#__PURE__*/React__default.createElement(react.Flex, {
     flexDir: "column",
     alignItems: "center",
     justifyContent: "center",
     p: 4,
     pt: 0
-  }, /*#__PURE__*/React$1__default.createElement(react.Text, {
+  }, /*#__PURE__*/React__default.createElement(react.Text, {
     mb: 2
-  }, label), /*#__PURE__*/React$1__default.createElement(react.InputGroup, {
+  }, label), /*#__PURE__*/React__default.createElement(react.InputGroup, {
     alignItems: "center",
     justifyContent: "center"
-  }, /*#__PURE__*/React$1__default.createElement(react.Input, {
+  }, /*#__PURE__*/React__default.createElement(react.Input, {
     onChange: handleChange,
     type: "time",
     value: time,
     "data-test-id": "CT_Component_datepicker_input_time"
-  }), rightAddon && /*#__PURE__*/React$1__default.createElement(react.InputRightAddon, null, rightAddon)));
+  }), rightAddon && /*#__PURE__*/React__default.createElement(react.InputRightAddon, null, rightAddon)));
 };
 TimeInput.displayName = 'DatepickerTimeInput';
 TimeInput.defaultProps = {
@@ -1152,14 +1152,14 @@ const Datepicker = ({
     return {
       timeInputLabel: '',
       showTimeInput: true,
-      customTimeInput: /*#__PURE__*/React$1__default.createElement(TimeInput, null)
+      customTimeInput: /*#__PURE__*/React__default.createElement(TimeInput, null)
     };
   };
-  const component = /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(Styles, null), /*#__PURE__*/React$1__default.createElement(ReactDatePicker, Object.assign({
+  const component = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Styles, null), /*#__PURE__*/React__default.createElement(ReactDatePicker, Object.assign({
     id: id,
     name: name,
     selected: selected,
-    customInput: /*#__PURE__*/React$1__default.createElement(react.Input, {
+    customInput: /*#__PURE__*/React__default.createElement(react.Input, {
       autoComplete: "off"
     }),
     dateFormat: dateFormat,
@@ -1173,16 +1173,16 @@ const Datepicker = ({
   if (props.inline) {
     return component;
   }
-  return /*#__PURE__*/React$1__default.createElement(react.FormControl, {
+  return /*#__PURE__*/React__default.createElement(react.FormControl, {
     isRequired: isRequired,
     "data-test-id": "CT_Component_datepicker_wrapper"
-  }, label && /*#__PURE__*/React$1__default.createElement(react.FormLabel, {
+  }, label && /*#__PURE__*/React__default.createElement(react.FormLabel, {
     fontSize: "text.sm"
-  }, label), /*#__PURE__*/React$1__default.createElement(react.InputGroup, null, component, /*#__PURE__*/React$1__default.createElement(react.InputRightElement, null, !value && /*#__PURE__*/React$1__default.createElement(fi.FiCalendar, null), value && /*#__PURE__*/React$1__default.createElement(fi.FiX, {
+  }, label), /*#__PURE__*/React__default.createElement(react.InputGroup, null, component, /*#__PURE__*/React__default.createElement(react.InputRightElement, null, !value && /*#__PURE__*/React__default.createElement(fi.FiCalendar, null), value && /*#__PURE__*/React__default.createElement(fi.FiX, {
     "data-test-id": "bcpJJyCP0z_RIAGZXDU6s",
     onClick: onClear,
     cursor: "pointer"
-  }))), !isError ? /*#__PURE__*/React$1__default.createElement(react.FormHelperText, null, helperText) : /*#__PURE__*/React$1__default.createElement(react.FormErrorMessage, null, error));
+  }))), !isError ? /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText) : /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, error));
 };
 Datepicker.defaultProps = {
   id: undefined,
@@ -1208,19 +1208,19 @@ const Field = props => {
     isRequired,
     children
   } = props;
-  return React.createElement(react.FormControl, {
+  return /*#__PURE__*/React__default.createElement(react.FormControl, {
     isInvalid: isError
-  }, label && (typeof label === 'string' ? React.createElement(react.FormLabel, {
+  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
     fontSize: "field.sm",
     requiredIndicator: undefined
-  }, isRequired && React.createElement(react.Box, {
+  }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
     as: "span",
     color: "red.500",
     ml: 0,
     mr: 1
-  }, "*"), label) : label), children, !isError ? helperText && React.createElement(react.FormHelperText, {
+  }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
     fontSize: "field.sm"
-  }, helperText) : typeof error === 'string' ? React.createElement(react.FormErrorMessage, {
+  }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
     textStyle: "field.sm",
     fontSize: "field.sm",
     mt: 1,
@@ -1235,7 +1235,7 @@ Field.defaultProps = {
   isRequired: false
 };
 
-const InputField = /*#__PURE__*/React$1__default.forwardRef((props, ref) => {
+const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     value,
     type,
@@ -1251,19 +1251,19 @@ const InputField = /*#__PURE__*/React$1__default.forwardRef((props, ref) => {
     helperText,
     ...inputProps
   } = props;
-  return /*#__PURE__*/React$1__default.createElement(Field, {
+  return /*#__PURE__*/React__default.createElement(Field, {
     label: label,
     isError: isError,
     error: error,
     helperText: helperText,
     isRequired: isRequired
-  }, /*#__PURE__*/React$1__default.createElement(react.InputGroup, {
+  }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
     size: size
-  }, addOnLeft && /*#__PURE__*/React$1__default.createElement(react.InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React$1__default.createElement(react.InputLeftElement, null, elementLeft), /*#__PURE__*/React$1__default.createElement(react.Input, Object.assign({
+  }, addOnLeft && /*#__PURE__*/React__default.createElement(react.InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React__default.createElement(react.InputLeftElement, null, elementLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     ref: ref,
     type: type,
     value: value
-  }, inputProps)), addOnRight && /*#__PURE__*/React$1__default.createElement(react.InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React$1__default.createElement(react.InputRightElement, null, elementRight)));
+  }, inputProps)), addOnRight && /*#__PURE__*/React__default.createElement(react.InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React__default.createElement(react.InputRightElement, null, elementRight)));
 });
 InputField.defaultProps = {
   addOnLeft: undefined,
@@ -1272,12 +1272,12 @@ InputField.defaultProps = {
   elementRight: undefined
 };
 
-const TextareaField = /*#__PURE__*/React$1__default.forwardRef((props, ref) => {
+const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     value,
     ...inputProps
   } = props;
-  return /*#__PURE__*/React$1__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React$1__default.createElement(react.Textarea, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
     ref: ref,
     value: value
   }, inputProps)));
@@ -1289,11 +1289,11 @@ TextareaField.defaultProps = {
   elementRight: undefined
 };
 
-const XMSLogo = () => React.createElement(react.Image, {
+const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
   height: 8,
   src: react.useColorModeValue('https://assets.voila.id/xms/logo-xms.jpg', 'https://assets.voila.id/xms/logo-xms-dark.png')
 });
-const VoilaLogo = () => React.createElement(react.Image, {
+const VoilaLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
   src: "https://s3.ap-southeast-1.amazonaws.com/assets.voila.id/xms/logo-voila-black.png?v=1",
   filter: react.useColorModeValue('none', 'invert(1)'),
   maxW: 24
@@ -1309,11 +1309,11 @@ const Profile = ({
     onToggle,
     onClose
   } = react.useDisclosure();
-  return /*#__PURE__*/React$1.createElement(react.Popover, {
+  return /*#__PURE__*/React.createElement(react.Popover, {
     placement: "bottom-end",
     isOpen: isOpen,
     onClose: onClose
-  }, /*#__PURE__*/React$1.createElement(react.Box, {
+  }, /*#__PURE__*/React.createElement(react.Box, {
     "data-test-id": "WE0UYbA93LOZy6S09IhDO",
     as: "button",
     cursor: 'pointer',
@@ -1323,38 +1323,38 @@ const Profile = ({
     },
     m: 0,
     onClick: onToggle
-  }, /*#__PURE__*/React$1.createElement(react.HStack, null, /*#__PURE__*/React$1.createElement(react.VStack, {
+  }, /*#__PURE__*/React.createElement(react.HStack, null, /*#__PURE__*/React.createElement(react.VStack, {
     alignItems: "flex-end",
     spacing: -0.5,
     ml: "2"
-  }, /*#__PURE__*/React$1.createElement(react.Text, {
+  }, /*#__PURE__*/React.createElement(react.Text, {
     fontSize: "text.xs",
     mb: 1,
     fontWeight: 400,
     lineHeight: "14px",
     color: react.useColorModeValue('neutral.800', 'white')
-  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React$1.createElement(react.Text, {
+  }, data === null || data === void 0 ? void 0 : data.email), /*#__PURE__*/React.createElement(react.Text, {
     fontSize: "text.xs",
     fontWeight: 400,
     lineHeight: "14px",
     color: react.useColorModeValue('primary.500', 'success.400')
-  }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React$1.createElement(react.Text, {
+  }, (data === null || data === void 0 ? void 0 : data.office) && /*#__PURE__*/React.createElement(react.Text, {
     color: "neutral.700",
     display: "inline-block",
     mr: 0.5
-  }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React$1.createElement(react.PopoverTrigger, null, /*#__PURE__*/React$1.createElement(react.Avatar, {
+  }, data.office, " |", ' '), data === null || data === void 0 ? void 0 : data.userRole)), /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Avatar, {
     size: 'sm',
     bg: "primary.500",
     color: "white",
     name: (_data$name = data === null || data === void 0 ? void 0 : data.name) !== null && _data$name !== void 0 ? _data$name : data === null || data === void 0 ? void 0 : data.email
-  })))), /*#__PURE__*/React$1.createElement(react.PopoverContent, {
+  })))), /*#__PURE__*/React.createElement(react.PopoverContent, {
     bg: react.useColorModeValue('white', 'mirage.900'),
     maxW: 200
-  }, /*#__PURE__*/React$1.createElement(react.PopoverArrow, {
+  }, /*#__PURE__*/React.createElement(react.PopoverArrow, {
     bg: react.useColorModeValue('white', 'mirage.900')
-  }), /*#__PURE__*/React$1.createElement(react.PopoverBody, {
+  }), /*#__PURE__*/React.createElement(react.PopoverBody, {
     p: 1
-  }, /*#__PURE__*/React$1.createElement(react.Flex, {
+  }, /*#__PURE__*/React.createElement(react.Flex, {
     "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
     alignItems: "center",
     px: 3,
@@ -1367,7 +1367,7 @@ const Profile = ({
     },
     onClick: onLogout,
     fontSize: "text.xs"
-  }, /*#__PURE__*/React$1.createElement(fi.FiPower, null), /*#__PURE__*/React$1.createElement(react.Text, {
+  }, /*#__PURE__*/React.createElement(fi.FiPower, null), /*#__PURE__*/React.createElement(react.Text, {
     ml: 2
   }, "Logout")))));
 };
@@ -1381,13 +1381,14 @@ const SwitchMode = () => {
     colorMode,
     toggleColorMode
   } = react.useColorMode();
-  return /*#__PURE__*/React$1.createElement(react.Box, {
+  return /*#__PURE__*/React.createElement(react.Box, {
+    "data-test-id": "rhYuTDCiWkFqr96upiEEh",
     mx: 5,
     onClick: toggleColorMode,
     cursor: "pointer"
-  }, colorMode === 'light' ? /*#__PURE__*/React$1.createElement(fi.FiMoon, {
+  }, colorMode === 'light' ? /*#__PURE__*/React.createElement(fi.FiMoon, {
     size: 20
-  }) : /*#__PURE__*/React$1.createElement(fi.FiSun, {
+  }) : /*#__PURE__*/React.createElement(fi.FiSun, {
     size: 20
   }));
 };
@@ -1409,7 +1410,7 @@ const Version = ({
   version,
   environment,
   onOpenModalRelease
-}) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, version && /*#__PURE__*/React$1.createElement(react.Badge, {
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, version && /*#__PURE__*/React.createElement(react.Badge, {
   "data-test-id": "dzl3esjhCphobaaIXpiUE",
   bg: react.useColorModeValue('primary.500', 'rgba(124, 124, 124, 0.12)'),
   color: react.useColorModeValue('white', 'secondary.400'),
@@ -1421,7 +1422,7 @@ const Version = ({
   borderRadius: "md",
   onClick: onOpenModalRelease,
   cursor: onOpenModalRelease ? 'pointer' : 'auto'
-}, version), /*#__PURE__*/React$1.createElement(react.Box, {
+}, version), /*#__PURE__*/React.createElement(react.Box, {
   background: "primary.50",
   color: "primary.500",
   fontSize: "text.xs",
@@ -1441,26 +1442,26 @@ const Header = ({
   onLogout,
   onOpenModalRelease,
   ...props
-}) => /*#__PURE__*/React$1.createElement(react.Box, Object.assign({
+}) => /*#__PURE__*/React.createElement(react.Box, Object.assign({
   minH: 14,
   bg: react.useColorModeValue('white', 'ebony-clay.800'),
   boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
   px: 4,
   py: 1
-}, props), /*#__PURE__*/React$1.createElement(react.Flex, {
+}, props), /*#__PURE__*/React.createElement(react.Flex, {
   h: 14,
   alignItems: "center",
   justifyContent: "space-between"
-}, /*#__PURE__*/React$1.createElement(XMSLogo, null), /*#__PURE__*/React$1.createElement(react.HStack, {
+}, /*#__PURE__*/React.createElement(XMSLogo, null), /*#__PURE__*/React.createElement(react.HStack, {
   spacing: 2,
   alignItems: "center"
-}, /*#__PURE__*/React$1.createElement(VoilaLogo, null), /*#__PURE__*/React$1.createElement(Version, {
+}, /*#__PURE__*/React.createElement(VoilaLogo, null), /*#__PURE__*/React.createElement(Version, {
   version: data === null || data === void 0 ? void 0 : data.version,
   environment: data === null || data === void 0 ? void 0 : data.environment,
   onOpenModalRelease: onOpenModalRelease
-})), /*#__PURE__*/React$1.createElement(react.Flex, {
+})), /*#__PURE__*/React.createElement(react.Flex, {
   alignItems: "center"
-}, /*#__PURE__*/React$1.createElement(SwitchMode, null), /*#__PURE__*/React$1.createElement(Profile, {
+}, /*#__PURE__*/React.createElement(SwitchMode, null), /*#__PURE__*/React.createElement(Profile, {
   data: data,
   onLogout: onLogout
 }))));
@@ -1470,8 +1471,18 @@ Header.defaultProps = {
   onOpenModalRelease: undefined
 };
 
-const ModalCloseButton = /*#__PURE__*/React$1.forwardRef((props, ref) => {
-  return React.createElement(react.ModalCloseButton, Object.assign({
+const ModalBody = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/React__default.createElement(react.ModalBody, Object.assign({
+    ref: ref,
+    background: react.useColorModeValue('white', 'mirage.900')
+  }, rest), children);
+});
+
+const ModalCloseButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React__default.createElement(react.ModalCloseButton, Object.assign({
     ref: ref,
     top: 4,
     right: 4,
@@ -1480,22 +1491,22 @@ const ModalCloseButton = /*#__PURE__*/React$1.forwardRef((props, ref) => {
   }, props));
 });
 
-const ModalFooter = /*#__PURE__*/React$1.forwardRef(({
+const ModalFooter = /*#__PURE__*/React.forwardRef(({
   children,
   ...rest
 }, ref) => {
-  return React.createElement(react.ModalFooter, Object.assign({
+  return /*#__PURE__*/React__default.createElement(react.ModalFooter, Object.assign({
     ref: ref,
     background: react.useColorModeValue('neutral.200', 'mirage.900'),
     borderBottomRadius: "md"
   }, rest), children);
 });
 
-const ModalHeader = /*#__PURE__*/React$1.forwardRef(({
+const ModalHeader = /*#__PURE__*/React.forwardRef(({
   children,
   ...rest
 }, ref) => {
-  return React.createElement(react.ModalHeader, Object.assign({
+  return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
     ref: ref,
     background: react.useColorModeValue('neutral.200', 'mirage.900'),
     borderTopRadius: 'md',
@@ -1510,26 +1521,26 @@ const Navigation = ({
   as,
   ...props
 }) => {
-  return /*#__PURE__*/React$1.createElement(react.Box, Object.assign({
+  return /*#__PURE__*/React.createElement(react.Box, Object.assign({
     bg: react.useColorModeValue('white', 'ebony-clay.800'),
     boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
     borderRadius: "md",
     overflowX: "auto"
-  }, props), /*#__PURE__*/React$1.createElement(react.Flex, {
+  }, props), /*#__PURE__*/React.createElement(react.Flex, {
     alignItems: "center",
     p: 2
-  }, /*#__PURE__*/React$1.createElement(react.HStack, {
+  }, /*#__PURE__*/React.createElement(react.HStack, {
     spacing: 2
   }, navigations === null || navigations === void 0 ? void 0 : navigations.map(navigation => {
     const isActive = activePath.startsWith(navigation.navLink || '');
     const activeBg = isActive ? 'primary.500' : undefined;
-    return /*#__PURE__*/React$1.createElement(react.Popover, {
+    return /*#__PURE__*/React.createElement(react.Popover, {
       key: navigation.title,
       trigger: "hover",
       placement: "bottom-start"
     }, ({
       isOpen
-    }) => /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(react.PopoverTrigger, null, /*#__PURE__*/React$1.createElement(react.Box, {
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.PopoverTrigger, null, /*#__PURE__*/React.createElement(react.Box, {
       display: "flex",
       alignItems: "center",
       borderRadius: "md",
@@ -1540,18 +1551,18 @@ const Navigation = ({
       backgroundColor: isOpen && !isActive ? react.useColorModeValue('dove-gray.50', 'transparent') : activeBg,
       color: isActive ? 'white' : 'inherit',
       p: 2
-    }, /*#__PURE__*/React$1.createElement(react.Icon, {
+    }, /*#__PURE__*/React.createElement(react.Icon, {
       as: navigation.icon,
       mr: 2
-    }), /*#__PURE__*/React$1.createElement(react.Text, {
+    }), /*#__PURE__*/React.createElement(react.Text, {
       whiteSpace: "nowrap",
       fontSize: "text.sm",
       fontWeight: 400
-    }, navigation.title), /*#__PURE__*/React$1.createElement(icons.ChevronDownIcon, {
+    }, navigation.title), /*#__PURE__*/React.createElement(icons.ChevronDownIcon, {
       ml: 2
-    }))), navigation.children && /*#__PURE__*/React$1.createElement(react.Portal, null, /*#__PURE__*/React$1.createElement(react.Box, {
+    }))), navigation.children && /*#__PURE__*/React.createElement(react.Portal, null, /*#__PURE__*/React.createElement(react.Box, {
       zIndex: "popover"
-    }, /*#__PURE__*/React$1.createElement(react.PopoverContent, {
+    }, /*#__PURE__*/React.createElement(react.PopoverContent, {
       key: navigation.title,
       bg: react.useColorModeValue('white', 'ebony-clay.800'),
       maxW: 250,
@@ -1566,7 +1577,7 @@ const Navigation = ({
     }) => {
       const link = navHost ? `${navHost}${navLink}` : navLink;
       const isActiveSub = activePath === navLink;
-      return /*#__PURE__*/React$1.createElement(react.Link, {
+      return /*#__PURE__*/React.createElement(react.Link, {
         as: as,
         key: title,
         display: "flex",
@@ -1592,12 +1603,12 @@ const Navigation = ({
         css: react$1.css`
                                     border-spacing: 4px;
                                   `
-      }, /*#__PURE__*/React$1.createElement(react.Icon, {
+      }, /*#__PURE__*/React.createElement(react.Icon, {
         as: icon,
         mr: 3
-      }), /*#__PURE__*/React$1.createElement(react.Text, {
+      }), /*#__PURE__*/React.createElement(react.Text, {
         fontSize: "text.sm"
-      }, title), isActiveSub && /*#__PURE__*/React$1.createElement(react.Box, {
+      }, title), isActiveSub && /*#__PURE__*/React.createElement(react.Box, {
         width: 0.5,
         height: 8,
         position: "absolute",
@@ -1624,7 +1635,7 @@ const PaginationButton = /*#__PURE__*/react.forwardRef(({
   const btnColor = react.useColorModeValue('black.high', 'primary.300');
   const btnNotActiveBg = react.useColorModeValue('secondary.50', 'primary.500');
   const btnNotActiveColor = react.useColorModeValue('primary.500', 'white');
-  return React.createElement(react.Button, Object.assign({
+  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
     "data-test-id": "Pagination-Button",
     ref: ref,
     className: className,
@@ -1660,12 +1671,12 @@ const PaginationButtonTrigger = ({
   onClick,
   visuallyHidden,
   icon
-}) => /*#__PURE__*/React$1.createElement(PaginationButton, {
+}) => /*#__PURE__*/React.createElement(PaginationButton, {
   "data-test-id": "DLVCc_fBK35spHm5WxjcJ",
   color: color,
   isDisabled: isDisabled,
   onClick: onClick
-}, /*#__PURE__*/React$1.createElement(react.VisuallyHidden, null, visuallyHidden), icon);
+}, /*#__PURE__*/React.createElement(react.VisuallyHidden, null, visuallyHidden), icon);
 PaginationButtonTrigger.defaultProps = {
   color: undefined,
   isDisabled: undefined,
@@ -1709,59 +1720,59 @@ const Pagination = ({
     }
     return pageButtons;
   };
-  return /*#__PURE__*/React$1.createElement(react.Box, {
+  return /*#__PURE__*/React.createElement(react.Box, {
     className: className,
     display: "inline-flex",
     alignItems: "center"
-  }, /*#__PURE__*/React$1.createElement(react.Box, {
+  }, /*#__PURE__*/React.createElement(react.Box, {
     mr: 1
-  }, /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
+  }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
     "data-test-id": "Pagination-Button",
     color: previousButtonColor,
     isDisabled: disabledPrevious,
     onClick: () => handleSelectPage(1),
     visuallyHidden: "First Page",
-    icon: /*#__PURE__*/React$1.createElement(icons.ArrowLeftIcon, {
+    icon: /*#__PURE__*/React.createElement(icons.ArrowLeftIcon, {
       width: 2
     })
-  })), /*#__PURE__*/React$1.createElement(react.Box, {
+  })), /*#__PURE__*/React.createElement(react.Box, {
     backgroundColor: react.useColorModeValue('neutral.300', 'mirage.900'),
     borderRadius: 50
-  }, /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
+  }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
     "data-test-id": "Pagination-Button",
     color: previousButtonColor,
     isDisabled: disabledPrevious,
     onClick: () => handleSelectPage(current - 1),
     visuallyHidden: "Previous Page",
-    icon: /*#__PURE__*/React$1.createElement(icons.ChevronLeftIcon, null)
+    icon: /*#__PURE__*/React.createElement(icons.ChevronLeftIcon, null)
   }), generatePages().map(page => {
-    return /*#__PURE__*/React$1.createElement(PaginationButton, {
+    return /*#__PURE__*/React.createElement(PaginationButton, {
       "data-test-id": "Pagination-Button",
       key: page,
       isActive: page === current,
       onClick: () => typeof page === 'number' ? handleSelectPage(page) : null
-    }, /*#__PURE__*/React$1.createElement(react.Text, {
+    }, /*#__PURE__*/React.createElement(react.Text, {
       scale: 300,
       fontSize: "text.sm",
       lineHeight: 18,
       fontWeight: 500
     }, page));
-  }), /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
+  }), /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
     "data-test-id": "Pagination-Button",
     color: nextButtonColor,
     isDisabled: disabledNext,
     onClick: () => handleSelectPage(current + 1),
     visuallyHidden: "Next Page",
-    icon: /*#__PURE__*/React$1.createElement(icons.ChevronRightIcon, null)
-  })), /*#__PURE__*/React$1.createElement(react.Box, {
+    icon: /*#__PURE__*/React.createElement(icons.ChevronRightIcon, null)
+  })), /*#__PURE__*/React.createElement(react.Box, {
     ml: 1
-  }, /*#__PURE__*/React$1.createElement(PaginationButtonTrigger, {
+  }, /*#__PURE__*/React.createElement(PaginationButtonTrigger, {
     "data-test-id": "Pagination-Button",
     color: nextButtonColor,
     isDisabled: disabledNext,
     onClick: () => handleSelectPage(total),
     visuallyHidden: "Last Page",
-    icon: /*#__PURE__*/React$1.createElement(icons.ArrowRightIcon, {
+    icon: /*#__PURE__*/React.createElement(icons.ArrowRightIcon, {
       width: 2
     })
   })));
@@ -1781,7 +1792,7 @@ const PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /*#__PURE__*/React$1.createElement(react.Text, Object.assign({
+  return /*#__PURE__*/React.createElement(react.Text, Object.assign({
     scale: scale,
     fontSize: fontSize,
     lineHeight: lineHeight
@@ -1795,23 +1806,23 @@ const PaginationFilter = ({
   onChange,
   ...rest
 }) => {
-  const [value, setValue] = React$1.useState(limit);
-  return /*#__PURE__*/React$1.createElement(react.Box, {
+  const [value, setValue] = React.useState(limit);
+  return /*#__PURE__*/React.createElement(react.Box, {
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  }, /*#__PURE__*/React$1.createElement(react.Text, Object.assign({
+  }, /*#__PURE__*/React.createElement(react.Text, Object.assign({
     fontSize: "text.sm",
     lineHeight: 18,
     color: react.useColorModeValue('neutral.900', 'white')
-  }, rest), label), /*#__PURE__*/React$1.createElement(react.Select, {
+  }, rest), label), /*#__PURE__*/React.createElement(react.Select, {
     textAlign: "center",
     size: "xs",
     outline: "none",
     border: "none",
     boxShadow: "none",
     width: 18,
-    icon: /*#__PURE__*/React$1.createElement(fi.FiChevronDown, null),
+    icon: /*#__PURE__*/React.createElement(fi.FiChevronDown, null),
     _focusVisible: {
       boxShadow: 'none'
     },
@@ -1822,7 +1833,7 @@ const PaginationFilter = ({
     },
     value: value
   }, items.map(item => {
-    return /*#__PURE__*/React$1.createElement("option", {
+    return /*#__PURE__*/React.createElement("option", {
       key: item,
       value: item
     }, item);
@@ -2318,7 +2329,7 @@ function Select({
   const {
     colorMode
   } = system.useColorMode();
-  return React.createElement(ReactSelect, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2334,7 +2345,7 @@ function SelectAsync({
   const {
     colorMode
   } = system.useColorMode();
-  return React.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2343,14 +2354,14 @@ function SelectAsync({
   }));
 }
 
-function SelectCreatable({
+function SelectAsyncCreatable({
   styles,
   ...rest
 }) {
   const {
     colorMode
   } = system.useColorMode();
-  return React.createElement(ReactSelectCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2359,14 +2370,14 @@ function SelectCreatable({
   }));
 }
 
-function SelectAsyncCreatable({
+function SelectCreatable({
   styles,
   ...rest
 }) {
   const {
     colorMode
   } = system.useColorMode();
-  return React.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({}, rest, {
     styles: {
       ...selectStyles(colorMode),
       ...styles
@@ -2383,7 +2394,7 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
   });
   const isSelected = !!tabProps['aria-selected'];
   const styles = react.useMultiStyleConfig('Tabs', tabProps);
-  return /*#__PURE__*/React$1.createElement(react.Button, Object.assign({
+  return /*#__PURE__*/React.createElement(react.Button, Object.assign({
     p: 3,
     fontSize: "text.md",
     _selected: {
@@ -2396,20 +2407,20 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
       bg: 'none'
     },
     __css: styles.tab
-  }, tabProps), /*#__PURE__*/React$1.createElement(react.Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
+  }, tabProps), /*#__PURE__*/React.createElement(react.Flex, null, (_props$leftAddon = props.leftAddon) === null || _props$leftAddon === void 0 ? void 0 : _props$leftAddon.call(props, {
     isSelected
   }), tabProps.children, (_props$rightAddon = props.rightAddon) === null || _props$rightAddon === void 0 ? void 0 : _props$rightAddon.call(props, {
     isSelected
   })));
 });
 
-const TabList = /*#__PURE__*/react.forwardRef((props, ref) => React.createElement(react.TabList, {
+const TabList = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(react.TabList, {
   borderBottom: "1px solid",
   borderColor: react.useColorModeValue('gray.200', 'bright-gray.800'),
   ref: ref
 }, props.children));
 
-const TabPanel = /*#__PURE__*/react.forwardRef((props, ref) => React.createElement(react.TabPanel, {
+const TabPanel = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(react.TabPanel, {
   px: 0,
   ref: ref
 }, props.children));
@@ -2433,9 +2444,9 @@ const Uploader = ({
   validator,
   ...props
 }) => {
-  const [selectedFirstFile, setSelectedFirstFile] = React$1.useState();
-  const [isSelected, setIsSelected] = React$1.useState(selected || false);
-  const onDrop = React$1.useCallback(acceptedFiles => {
+  const [selectedFirstFile, setSelectedFirstFile] = React.useState();
+  const [isSelected, setIsSelected] = React.useState(selected || false);
+  const onDrop = React.useCallback(acceptedFiles => {
     if (acceptedFiles.length > 0) {
       onHandleUploadFile === null || onHandleUploadFile === void 0 ? void 0 : onHandleUploadFile(acceptedFiles);
       if (!multiple) {
@@ -2456,46 +2467,46 @@ const Uploader = ({
     multiple,
     validator
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (fileRejections.length > 0 && onHandleRejections) {
       onHandleRejections(fileRejections);
     }
   }, [fileRejections, onHandleRejections]);
-  const isError = React$1.useMemo(() => {
+  const isError = React.useMemo(() => {
     const error = fileRejections.length > 0;
     if (error) {
       setIsSelected(false);
     }
     return error;
   }, [fileRejections]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setIsSelected(selected !== null && selected !== void 0 ? selected : false);
   }, [selected]);
-  return /*#__PURE__*/React$1.createElement(react.Stack, {
+  return /*#__PURE__*/React.createElement(react.Stack, {
     direction: "column"
-  }, /*#__PURE__*/React$1.createElement(react.Flex, Object.assign({
+  }, /*#__PURE__*/React.createElement(react.Flex, Object.assign({
     minH: 200,
     border: "1px dashed",
     borderColor: isError ? 'danger.500' : 'primary.500',
     alignItems: "center",
     justifyContent: "center",
     cursor: "pointer"
-  }, props, getRootProps()), /*#__PURE__*/React$1.createElement("input", Object.assign({}, getInputProps())), isDragActive ? /*#__PURE__*/React$1.createElement(react.Text, null, messages.dragActive) : /*#__PURE__*/React$1.createElement(react.Flex, {
+  }, props, getRootProps()), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps())), isDragActive ? /*#__PURE__*/React.createElement(react.Text, null, messages.dragActive) : /*#__PURE__*/React.createElement(react.Flex, {
     flexDirection: "column",
     alignItems: "center",
     color: isError ? 'danger.500' : 'primary.500'
-  }, !multiple && isSelected && /*#__PURE__*/React$1.createElement(react.Heading, {
+  }, !multiple && isSelected && /*#__PURE__*/React.createElement(react.Heading, {
     fontWeight: 400,
     fontSize: "18px",
     lineHeight: 28,
     color: "black.high",
     mb: 2
-  }, selectedFirstFile === null || selectedFirstFile === void 0 ? void 0 : selectedFirstFile.name), !isSelected && /*#__PURE__*/React$1.createElement(react.Heading, {
+  }, selectedFirstFile === null || selectedFirstFile === void 0 ? void 0 : selectedFirstFile.name), !isSelected && /*#__PURE__*/React.createElement(react.Heading, {
     fontWeight: 400,
     fontSize: "18px",
     lineHeight: 28,
     mb: 2
-  }, messages.uploadFile), isSelected ? /*#__PURE__*/React$1.createElement(react.Text, null, messages.dragReplace) : /*#__PURE__*/React$1.createElement(react.Text, null, messages.dragInActive))), renderError === null || renderError === void 0 ? void 0 : renderError(fileRejections));
+  }, messages.uploadFile), isSelected ? /*#__PURE__*/React.createElement(react.Text, null, messages.dragReplace) : /*#__PURE__*/React.createElement(react.Text, null, messages.dragInActive))), renderError === null || renderError === void 0 ? void 0 : renderError(fileRejections));
 };
 Uploader.defaultProps = {
   onHandleUploadFile: undefined,
@@ -2975,13 +2986,13 @@ const theme = /*#__PURE__*/react.extendTheme({
   config
 });
 
-const ProviderContext = /*#__PURE__*/React$1.createContext({
+const ProviderContext = /*#__PURE__*/React.createContext({
   instance: undefined
 });
 const useInternalUI = () => {
   const {
     instance
-  } = React$1.useContext(ProviderContext);
+  } = React.useContext(ProviderContext);
   return {
     instance
   };
@@ -2992,8 +3003,8 @@ const Provider = ({
   requestInterceptors,
   responseInterceptors
 }) => {
-  const instanceRef = React$1.useRef(axios.create(config));
-  React$1.useEffect(() => {
+  const instanceRef = React.useRef(axios.create(config));
+  React.useEffect(() => {
     requestInterceptors === null || requestInterceptors === void 0 ? void 0 : requestInterceptors.forEach(interceptor => {
       instanceRef.current.interceptors.request.use(interceptor);
     });
@@ -3001,10 +3012,10 @@ const Provider = ({
       instanceRef.current.interceptors.response.use(interceptor);
     });
   }, [requestInterceptors, responseInterceptors]);
-  const provider = React$1.useMemo(() => ({
+  const provider = React.useMemo(() => ({
     instance: instanceRef.current
   }), []);
-  return React.createElement(ProviderContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(ProviderContext.Provider, {
     value: provider
   }, children);
 };
@@ -3100,12 +3111,6 @@ Object.defineProperty(exports, 'Modal', {
     return react.Modal;
   }
 });
-Object.defineProperty(exports, 'ModalBody', {
-  enumerable: true,
-  get: function () {
-    return react.ModalBody;
-  }
-});
 Object.defineProperty(exports, 'ModalContent', {
   enumerable: true,
   get: function () {
@@ -3257,6 +3262,7 @@ exports.Field = Field;
 exports.Header = Header;
 exports.InputField = InputField;
 exports.MainMenu = Navigation;
+exports.ModalBody = ModalBody;
 exports.ModalCloseButton = ModalCloseButton;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;