@majoo-ui/react 1.47.0 → 1.48.0

package/index.esm.js

@@ -18,6 +18,7 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
+import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -1189,7 +1190,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-const colors = foundations.colors;
+const colors$1 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -3140,7 +3141,8 @@ const Toast = _ref => {
       e.stopPropagation();
       close();
     },
-    center: true,
+    align: "center",
+    justify: "center",
     hasTitle: !!title,
     __self: undefined,
     __source: {
@@ -3149,12 +3151,12 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 263,
+      lineNumber: 264,
       columnNumber: 19
     }
   }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React.createElement(Link, {
@@ -3169,7 +3171,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 267,
+      lineNumber: 268,
       columnNumber: 17
     }
   }, captionOfAction)))));
@@ -3565,7 +3567,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
-  color: colors.iconSecondary,
+  color: colors$1.iconSecondary,
   size: "16px",
   __self: undefined,
   __source: {
@@ -3643,7 +3645,7 @@ const SingleTagBanner = props => {
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -7246,7 +7248,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 14,
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     style: {
       verticalAlign: 'middle'
     },
@@ -8561,7 +8563,7 @@ function InputSelect(_a) {
               }, {
                 children: jsx(CircleInfoOutline, {
                   size: "16px",
-                  color: colors.iconDisable,
+                  color: colors$1.iconDisable,
                   style: {
                     verticalAlign: 'text-bottom'
                   }
@@ -9407,7 +9409,7 @@ function InputSelectCheck(_ref) {
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(IconCaretDown, {
-    color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary,
+    color: disabled || readOnly ? colors$1.iconDisable : colors$1.iconPrimary,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -9497,7 +9499,7 @@ function InputSelectCheck(_ref) {
       columnNumber: 19
     }
   }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
-    color: colors.iconDisable,
+    color: colors$1.iconDisable,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -9505,7 +9507,7 @@ function InputSelectCheck(_ref) {
       columnNumber: 23
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
-    color: colors.iconGreen,
+    color: colors$1.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -9552,7 +9554,7 @@ function InputSelectCheck(_ref) {
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
     size: "16px",
-    color: colors.iconDisable,
+    color: colors$1.iconDisable,
     style: {
       verticalAlign: 'text-bottom'
     },
@@ -9856,7 +9858,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors.iconGreen,
+    color: colors$1.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$s,
@@ -10134,6 +10136,71 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
+const {
+  colors
+} = foundations;
+function InputOTP(props) {
+  const {
+    isError
+  } = props;
+  const inputStyles = {
+    width: 48,
+    height: 48,
+    border: `1px solid ${isError ? colors.textRed : colors.gray300}`,
+    borderRadius: 4,
+    fontWeight: 600,
+    fontSize: 24,
+    textAlign: 'center',
+    color: colors.textPrimary
+  };
+  return jsx(OTPInput, Object.assign({
+    inputStyles: inputStyles
+  }, props), void 0);
+}
+InputOTP.defaultProps = {
+  OTPLength: 4,
+  value: '',
+  disabled: false,
+  autoFocus: false,
+  otpType: 'any',
+  secure: false
+};
+function ResendOTP(props) {
+  function renderButton() {
+    return;
+  }
+
+  function renderTime(time) {
+    function handleClick() {
+      var _a;
+
+      if (time < 1) {
+        (_a = props === null || props === void 0 ? void 0 : props.onResendClick) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+
+    return jsx(Paragraph, Object.assign({
+      color: "green",
+      css: {
+        cursor: time > 0 ? 'not-allowed' : 'pointer',
+        userSelect: 'none'
+      },
+      onClick: handleClick
+    }, {
+      children: `Kirim Ulang ${time > 0 ? `(${time}s)` : ''}`
+    }), void 0);
+  }
+
+  return jsx(ResendOTP$1, Object.assign({
+    renderButton: renderButton,
+    renderTime: renderTime
+  }, props), void 0);
+}
+ResendOTP.defaultProps = {
+  maxTime: 60,
+  timeInterval: 1000
+};
+
 const _excluded$b = ["children"];
 var _jsxFileName$r = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
 const {
@@ -15553,7 +15620,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: currentPage === 1 ? colors.iconDisable : colors.iconPrimary,
+    color: currentPage === 1 ? colors$1.iconDisable : colors$1.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
@@ -15605,7 +15672,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: currentPage === totalPages ? colors.iconDisable : colors.iconPrimary,
+    color: currentPage === totalPages ? colors$1.iconDisable : colors$1.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
@@ -15750,7 +15817,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors.gray400,
+    color: colors$1.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
@@ -16019,7 +16086,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       align: "center",
                       justify: "between",
                       css: {
-                        backgroundColor: colors.bgGray,
+                        backgroundColor: colors$1.bgGray,
                         padding: `$spacing-03 $spacing-05 ${'selection' in row.values ? '$spacing-03 $spacing-07' : ''}`,
                         borderBottom: '1pt solid $bgBorder'
                       }
@@ -17909,7 +17976,7 @@ const contentShow = keyframes({
 });
 const StyledOverlay = styled(ADialog.Overlay, {
   zIndex: 1,
-  backgroundColor: colors.bgDimmer,
+  backgroundColor: colors$1.bgDimmer,
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -17942,14 +18009,14 @@ const StyledTitle = styled(ADialog.Title, {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  color: colors.gray900,
+  color: colors$1.gray900,
   fontSize: 17,
   fontWeight: 500
 });
 const StyledDescription = styled(ADialog.Description, {
   mx: 24,
   my: 20,
-  color: colors.gray900,
+  color: colors$1.gray900,
   fontSize: 15,
   lineHeight: 1.5
 });
@@ -18564,17 +18631,17 @@ const itemStyles = {
   position: 'relative',
   userSelect: 'none',
   '&[data-disabled]': {
-    color: colors.gray400,
+    color: colors$1.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer'
   },
   '&:active': {
-    backgroundColor: colors.gray150
+    backgroundColor: colors$1.gray150
   },
   '&:focus': {
-    backgroundColor: colors.gray100
+    backgroundColor: colors$1.gray100
   }
 };
 const StyledItem = styled(DropdownMenuPrimitive.Item, Object.assign({}, itemStyles));
@@ -18582,18 +18649,18 @@ const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, Object.ass
 const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, Object.assign({}, itemStyles));
 const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, Object.assign({
   '&[data-state="open"]': {
-    backgroundColor: colors.gray50
+    backgroundColor: colors$1.gray50
   }
 }, itemStyles));
 const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
   lineHeight: '25px',
-  color: colors.gray700
+  color: colors$1.gray700
 });
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: colors.gray150,
+  backgroundColor: colors$1.gray150,
   margin: 5
 });
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
@@ -18673,7 +18740,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors.gray400
+    color: colors$1.gray400
   }
 });
 const StyledDropdown = styled(ButtonPrimitive, {
@@ -20838,6 +20905,15 @@ const Upload = ({
 
   function toggleModal() {
     modalTrigger.current.click();
+    setTimeout(() => {
+      if (imgRef.current) {
+        const {
+          width,
+          height
+        } = imgRef.current;
+        setCrop(centerAspectCrop(width, height, ratio));
+      }
+    }, 300);
   }
 
   function handleUpload(files) {
@@ -21101,7 +21177,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 537,
+        lineNumber: 543,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -21111,7 +21187,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 538,
+        lineNumber: 544,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21127,7 +21203,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 548,
+            lineNumber: 554,
             columnNumber: 16
           }
         });
@@ -21139,7 +21215,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 551,
+          lineNumber: 557,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21149,7 +21225,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 552,
+          lineNumber: 558,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21158,7 +21234,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 553,
+          lineNumber: 559,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21171,7 +21247,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 554,
+          lineNumber: 560,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21180,7 +21256,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 562,
+          lineNumber: 568,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -21188,7 +21264,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 564,
+          lineNumber: 570,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21207,7 +21283,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 575,
+            lineNumber: 581,
             columnNumber: 16
           }
         });
@@ -21218,7 +21294,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 578,
+          lineNumber: 584,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21228,7 +21304,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 579,
+          lineNumber: 585,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21237,7 +21313,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 580,
+          lineNumber: 586,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21250,7 +21326,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 581,
+          lineNumber: 587,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21260,32 +21336,40 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 589,
+          lineNumber: 595,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 590,
+          lineNumber: 596,
+          columnNumber: 17
+        }
+      }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
+        label: item.name,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 597,
           columnNumber: 17
         }
-      }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Text, {
+      }, /*#__PURE__*/React__default.createElement(Text, {
         css: {
           color: '$textPrimary',
           textOverflow: 'ellipsis',
           overflow: 'hidden',
-          width: 180,
+          width: 120,
           whiteSpace: 'nowrap',
           margin: '0 $spacing-07 0 $spacing-07'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 591,
-          columnNumber: 17
+          lineNumber: 598,
+          columnNumber: 19
         }
-      }, item.name))), /*#__PURE__*/React__default.createElement(Box, {
+      }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'absolute',
           top: '45%',
@@ -21295,7 +21379,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 605,
+          lineNumber: 613,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21304,14 +21388,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 621,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 623,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21327,7 +21411,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 626,
+        lineNumber: 634,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21341,7 +21425,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 627,
+        lineNumber: 635,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21367,7 +21451,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 628,
+        lineNumber: 636,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21375,14 +21459,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 641,
+        lineNumber: 649,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 642,
+        lineNumber: 650,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21395,7 +21479,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 658,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21411,7 +21495,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 651,
+        lineNumber: 659,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -21423,21 +21507,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 662,
+        lineNumber: 670,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 663,
+        lineNumber: 671,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 673,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -21446,7 +21530,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 674,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -21454,7 +21538,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 667,
+        lineNumber: 675,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21464,14 +21548,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 669,
+        lineNumber: 677,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 676,
+        lineNumber: 684,
         columnNumber: 19
       }
     }, error));
@@ -21482,7 +21566,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 683,
+        lineNumber: 691,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21490,7 +21574,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 684,
+        lineNumber: 692,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21498,7 +21582,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 685,
+        lineNumber: 693,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21511,7 +21595,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 695,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21522,7 +21606,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 690,
+        lineNumber: 698,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21533,7 +21617,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 691,
+        lineNumber: 699,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21546,14 +21630,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 692,
+        lineNumber: 700,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 703,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21565,7 +21649,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 696,
+        lineNumber: 704,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21573,7 +21657,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 697,
+        lineNumber: 705,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21585,7 +21669,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 706,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21593,7 +21677,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 712,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21602,7 +21686,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 705,
+        lineNumber: 713,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21610,7 +21694,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 708,
+        lineNumber: 716,
         columnNumber: 15
       }
     }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21626,7 +21710,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 719,
+      lineNumber: 727,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21635,7 +21719,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 722,
+      lineNumber: 730,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21955,7 +22039,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronLgLeftOutline, {
-        color: colors.btnPrimary
+        color: colors$1.btnPrimary
       }, void 0)
     }), void 0), jsxs(Flex$1, Object.assign({
       align: "center",
@@ -22015,7 +22099,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors.btnPrimary
+        color: colors$1.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -25000,7 +25084,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors.bgGreen,
+        color: colors$1.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -25021,7 +25105,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors.iconSecondary,
+        color: colors$1.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -25047,7 +25131,7 @@ const Navigation = props => {
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
         size: "24",
-        color: colors.bgGreen,
+        color: colors$1.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -25092,7 +25176,7 @@ const Navigation = props => {
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: colors.iconSecondary,
+        color: colors$1.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28595,4 +28679,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };