@majoo-ui/react 1.47.0 → 1.48.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('react-image-crop'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'react-image-crop', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.ReactCrop, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, ReactCrop, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('react-image-crop'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'react-image-crop', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.ReactCrop, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, ReactCrop, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,6 +38,7 @@
   var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
   var InfiniteScroll__default = /*#__PURE__*/_interopDefaultLegacy(InfiniteScroll);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+  var OTPInput__default = /*#__PURE__*/_interopDefaultLegacy(OTPInput);
   var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
   var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
   var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -1306,7 +1307,7 @@
       bgDark: '#FFFFFF'
     }
   });
-  var colors = core.foundations.colors;
+  var colors$1 = core.foundations.colors;
 
   const normalize = {
     '*,::before,::after': {
@@ -3222,7 +3223,8 @@
         e.stopPropagation();
         close();
       },
-      center: true,
+      align: "center",
+      justify: "center",
       hasTitle: !!title,
       __self: undefined,
       __source: {
@@ -3231,12 +3233,12 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.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__namespace.createElement(Link, {
@@ -3251,7 +3253,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 267,
+        lineNumber: 268,
         columnNumber: 17
       }
     }, captionOfAction)))));
@@ -3647,7 +3649,7 @@
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3725,7 +3727,7 @@
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors.iconSecondary,
+      color: colors$1.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -7329,7 +7331,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 14,
-      color: colors.iconSecondary,
+      color: colors$1.iconSecondary,
       style: {
         verticalAlign: 'middle'
       },
@@ -8698,7 +8700,7 @@
                 }, {
                   children: jsxRuntime.jsx(icons.CircleInfoOutline, {
                     size: "16px",
-                    color: colors.iconDisable,
+                    color: colors$1.iconDisable,
                     style: {
                       verticalAlign: 'text-bottom'
                     }
@@ -9544,7 +9546,7 @@
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
-      color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary,
+      color: disabled || readOnly ? colors$1.iconDisable : colors$1.iconPrimary,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -9634,7 +9636,7 @@
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
-      color: colors.iconDisable,
+      color: colors$1.iconDisable,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -9642,7 +9644,7 @@
         columnNumber: 23
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
-      color: colors.iconGreen,
+      color: colors$1.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -9689,7 +9691,7 @@
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
       size: "16px",
-      color: colors.iconDisable,
+      color: colors$1.iconDisable,
       style: {
         verticalAlign: 'text-bottom'
       },
@@ -9993,7 +9995,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CirclePlusOutline, {
-      color: colors.iconGreen,
+      color: colors$1.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$s,
@@ -10308,6 +10310,67 @@
     }), void 0);
   });
 
+  var colors = core.foundations.colors;
+  function InputOTP(props) {
+    var isError = props.isError;
+    var inputStyles = {
+      width: 48,
+      height: 48,
+      border: "1px solid ".concat(isError ? colors.textRed : colors.gray300),
+      borderRadius: 4,
+      fontWeight: 600,
+      fontSize: 24,
+      textAlign: 'center',
+      color: colors.textPrimary
+    };
+    return jsxRuntime.jsx(OTPInput__default["default"], __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 jsxRuntime.jsx(Paragraph, __assign({
+        color: "green",
+        css: {
+          cursor: time > 0 ? 'not-allowed' : 'pointer',
+          userSelect: 'none'
+        },
+        onClick: handleClick
+      }, {
+        children: "Kirim Ulang ".concat(time > 0 ? "(".concat(time, "s)") : '')
+      }), void 0);
+    }
+
+    return jsxRuntime.jsx(OTPInput.ResendOTP, __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 {
@@ -15835,7 +15898,7 @@
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
-      color: currentPage === 1 ? colors.iconDisable : colors.iconPrimary,
+      color: currentPage === 1 ? colors$1.iconDisable : colors$1.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
@@ -15887,7 +15950,7 @@
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
-      color: currentPage === totalPages ? colors.iconDisable : colors.iconPrimary,
+      color: currentPage === totalPages ? colors$1.iconDisable : colors$1.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
@@ -16032,7 +16095,7 @@
         columnNumber: 13
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors.gray400,
+      color: colors$1.gray400,
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
@@ -16306,7 +16369,7 @@
                         align: "center",
                         justify: "between",
                         css: {
-                          backgroundColor: colors.bgGray,
+                          backgroundColor: colors$1.bgGray,
                           padding: "$spacing-03 $spacing-05 ".concat('selection' in row.values ? '$spacing-03 $spacing-07' : ''),
                           borderBottom: '1pt solid $bgBorder'
                         }
@@ -18247,7 +18310,7 @@
   });
   const StyledOverlay = styled(ADialog__namespace.Overlay, {
     zIndex: 1,
-    backgroundColor: colors.bgDimmer,
+    backgroundColor: colors$1.bgDimmer,
     position: 'fixed',
     inset: 0,
     '@media (prefers-reduced-motion: no-preference)': {
@@ -18280,14 +18343,14 @@
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    color: colors.gray900,
+    color: colors$1.gray900,
     fontSize: 17,
     fontWeight: 500
   });
   const StyledDescription = styled(ADialog__namespace.Description, {
     mx: 24,
     my: 20,
-    color: colors.gray900,
+    color: colors$1.gray900,
     fontSize: 15,
     lineHeight: 1.5
   });
@@ -18902,17 +18965,17 @@
     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__namespace.Item, Object.assign({}, itemStyles));
@@ -18920,18 +18983,18 @@
   const StyledRadioItem = styled(DropdownMenuPrimitive__namespace.RadioItem, Object.assign({}, itemStyles));
   const StyledTriggerItem = styled(DropdownMenuPrimitive__namespace.TriggerItem, Object.assign({
     '&[data-state="open"]': {
-      backgroundColor: colors.gray50
+      backgroundColor: colors$1.gray50
     }
   }, itemStyles));
   const StyledLabel = styled(DropdownMenuPrimitive__namespace.Label, {
     padding: '8px 0',
     fontSize: 12,
     lineHeight: '25px',
-    color: colors.gray700
+    color: colors$1.gray700
   });
   const StyledSeparator = styled(DropdownMenuPrimitive__namespace.Separator, {
     height: 1,
-    backgroundColor: colors.gray150,
+    backgroundColor: colors$1.gray150,
     margin: 5
   });
   const StyledItemIndicator = styled(DropdownMenuPrimitive__namespace.ItemIndicator, {
@@ -19011,7 +19074,7 @@
       color: 'white'
     },
     '[data-disabled] &': {
-      color: colors.gray400
+      color: colors$1.gray400
     }
   });
   const StyledDropdown = styled(ButtonPrimitive, {
@@ -21210,6 +21273,15 @@
 
     function toggleModal() {
       modalTrigger.current.click();
+      setTimeout(() => {
+        if (imgRef.current) {
+          const {
+            width,
+            height
+          } = imgRef.current;
+          setCrop(centerAspectCrop(width, height, ratio));
+        }
+      }, 300);
     }
 
     function handleUpload(files) {
@@ -21473,7 +21545,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 537,
+          lineNumber: 543,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21483,7 +21555,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 538,
+          lineNumber: 544,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21499,7 +21571,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 548,
+              lineNumber: 554,
               columnNumber: 16
             }
           });
@@ -21511,7 +21583,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 551,
+            lineNumber: 557,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21521,7 +21593,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 552,
+            lineNumber: 558,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21530,7 +21602,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 553,
+            lineNumber: 559,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21543,7 +21615,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 554,
+            lineNumber: 560,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21552,7 +21624,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 562,
+            lineNumber: 568,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21560,7 +21632,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 564,
+            lineNumber: 570,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21579,7 +21651,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 575,
+              lineNumber: 581,
               columnNumber: 16
             }
           });
@@ -21590,7 +21662,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 578,
+            lineNumber: 584,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21600,7 +21672,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 579,
+            lineNumber: 585,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21609,7 +21681,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 580,
+            lineNumber: 586,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21622,7 +21694,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 581,
+            lineNumber: 587,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21632,32 +21704,40 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 589,
+            lineNumber: 595,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["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["default"].createElement(Text, {
+        }, ".", 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["default"].createElement(Tooltip, {
+          label: item.name,
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$9,
+            lineNumber: 597,
+            columnNumber: 17
+          }
+        }, /*#__PURE__*/React__default["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["default"].createElement(Box, {
+        }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'absolute',
             top: '45%',
@@ -21667,7 +21747,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 605,
+            lineNumber: 613,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21676,14 +21756,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 621,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 623,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21699,7 +21779,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 634,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21713,7 +21793,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 635,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21739,7 +21819,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 636,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21747,14 +21827,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 641,
+          lineNumber: 649,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 650,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21767,7 +21847,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 658,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -21783,7 +21863,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 659,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -21795,21 +21875,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 662,
+          lineNumber: 670,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 671,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 673,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -21818,7 +21898,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 674,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -21826,7 +21906,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 667,
+          lineNumber: 675,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21836,14 +21916,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 677,
           columnNumber: 17
         }
       }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 676,
+          lineNumber: 684,
           columnNumber: 19
         }
       }, error));
@@ -21854,7 +21934,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 691,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21862,7 +21942,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 684,
+          lineNumber: 692,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21870,7 +21950,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 693,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21883,7 +21963,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -21894,7 +21974,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 690,
+          lineNumber: 698,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21905,7 +21985,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 699,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21918,14 +21998,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 692,
+          lineNumber: 700,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 703,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21937,7 +22017,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 704,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21945,7 +22025,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 697,
+          lineNumber: 705,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21957,7 +22037,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 698,
+          lineNumber: 706,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21965,7 +22045,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 712,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21974,7 +22054,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 705,
+          lineNumber: 713,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21982,7 +22062,7 @@
         __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'}`)))));
@@ -21998,7 +22078,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 727,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -22007,7 +22087,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 730,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -22341,7 +22421,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronLgLeftOutline, {
-          color: colors.btnPrimary
+          color: colors$1.btnPrimary
         }, void 0)
       }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
         align: "center",
@@ -22401,7 +22481,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
-          color: colors.btnPrimary
+          color: colors$1.btnPrimary
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -25386,7 +25466,7 @@
             marginRight: 9
           },
           size: "24",
-          color: colors.bgGreen,
+          color: colors$1.bgGreen,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25407,7 +25487,7 @@
             margin: '0 9px'
           },
           size: "20",
-          color: colors.iconSecondary,
+          color: colors$1.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25433,7 +25513,7 @@
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
           size: "24",
-          color: colors.bgGreen,
+          color: colors$1.bgGreen,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25478,7 +25558,7 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           size: "20",
-          color: colors.iconSecondary,
+          color: colors$1.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29106,6 +29186,7 @@
   exports.InputLeftElement = InputLeftElement;
   exports.InputMapPicker = InputMapPicker;
   exports.InputNumber = InputNumber;
+  exports.InputOTP = InputOTP;
   exports.InputPrefix = InputPrefix;
   exports.InputRadio = InputRadio;
   exports.InputRadioGroup = InputRadioGroup;
@@ -29157,6 +29238,7 @@
   exports.Progress = Progress$1;
   exports.ProgressIndicator = ProgressIndicator;
   exports.RANGE_PICKER = RANGE_PICKER;
+  exports.ResendOTP = ResendOTP;
   exports.RightSlot = RightSlot;
   exports.RowExpanderColumn = rowExpanderColumn;
   exports.RowMenuColumn = rowMenuColumn;