@majoo-ui/react 1.47.0 → 1.48.2

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: {
@@ -5209,7 +5211,7 @@
   };
 
   const formLabelStyle = {
-    '& .form-label': {
+    '& > .form-label': {
       alignItems: 'start !important',
       '& > div': {
         width: 175
@@ -5230,7 +5232,10 @@
       }
     }
   };
-  const FormGroup = styled(Flex$1, {
+  const FormGroup = styled('div', {
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    rowGap: '$spacing-03',
     variants: {
       responsive: {
         input: Object.assign({
@@ -5285,7 +5290,7 @@
             '& *:nth-child(3)': {
               gridColumn: 'unset'
             },
-            '& .retina-error': {
+            '& > *:nth-child(n+4)': {
               gridColumn: '2/3'
             }
           }
@@ -5294,14 +5299,6 @@
     }
   });
   FormGroup.displayName = 'FormGroup';
-  FormGroup.propTypes = {
-    gap: PropTypes__default["default"].number,
-    direction: PropTypes__default["default"].string
-  };
-  FormGroup.defaultProps = {
-    gap: 3,
-    direction: 'column'
-  };
 
   const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
   var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
@@ -7329,7 +7326,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 14,
-      color: colors.iconSecondary,
+      color: colors$1.iconSecondary,
       style: {
         verticalAlign: 'middle'
       },
@@ -7358,7 +7355,7 @@
     readOnly: false
   };
 
-  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern"];
+  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText"];
   var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
@@ -7475,7 +7472,8 @@
       readOnly,
       max,
       maxChar,
-      pattern
+      pattern,
+      helperText
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
@@ -7529,7 +7527,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 163,
+        lineNumber: 164,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputTagsComponent, _extends({
@@ -7542,7 +7540,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 164,
+        lineNumber: 165,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$7, {
@@ -7557,7 +7555,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 172,
+        lineNumber: 173,
         columnNumber: 9
       }
     })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7565,7 +7563,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 186,
+        lineNumber: 187,
         columnNumber: 11
       }
     }, pattern.errorMessage) : /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7573,14 +7571,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 188,
+        lineNumber: 189,
         columnNumber: 11
       }
-    }, "Invalid Input")), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
+    }, "Invalid Input")), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      shortContentRegular: true,
+      css: {
+        paddingTop: 8,
+        paddingBottom: 3,
+        fontSize: 12,
+        color: '$textSecondary'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 191,
+        lineNumber: 193,
+        columnNumber: 9
+      }
+    }, helperText), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$A,
+        lineNumber: 197,
         columnNumber: 7
       }
     }, tags.map((tag, index) => /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -7593,7 +7605,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 193,
+        lineNumber: 199,
         columnNumber: 11
       }
     }, tag))));
@@ -7609,6 +7621,7 @@
     isInvalid: PropTypes__default["default"].bool,
     disabled: PropTypes__default["default"].bool,
     readOnly: PropTypes__default["default"].bool,
+    helperText: PropTypes__default["default"].string,
     pattern: PropTypes__default["default"].shape({
       regex: PropTypes__default["default"].string.isRequired,
       errorMessage: PropTypes__default["default"].string
@@ -8283,11 +8296,13 @@
   });
   var SelectItem = styled('div', {
     overflow: 'hidden',
-    borderBottom: '1px solid $bgBorder',
     padding: '$spacing-05 0',
     backgroundColor: 'rgb(235, 245, 255)',
     cursor: 'pointer',
-    lineHeight: '20px'
+    lineHeight: '20px',
+    '&:not(:last-child)': {
+      borderBottom: '1px solid $bgBorder'
+    }
   });
   var StyledDiv$2 = styled('div', {
     color: '$textDisable',
@@ -8698,7 +8713,7 @@
                 }, {
                   children: jsxRuntime.jsx(icons.CircleInfoOutline, {
                     size: "16px",
-                    color: colors.iconDisable,
+                    color: colors$1.iconDisable,
                     style: {
                       verticalAlign: 'text-bottom'
                     }
@@ -9068,7 +9083,7 @@
     }
   }));
 
-  const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "css"];
+  const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "helperText", "css"];
   var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -9288,6 +9303,7 @@
       isInvalid,
       sortBy,
       showSelectedTag,
+      helperText,
       css
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -9485,7 +9501,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 401,
+        lineNumber: 402,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__namespace.createElement(Select, {
@@ -9495,7 +9511,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 402,
+        lineNumber: 403,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9506,7 +9522,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 403,
+        lineNumber: 404,
         columnNumber: 9
       }
     }), search ? /*#__PURE__*/React__namespace.createElement(Input$5, _extends({}, getInputProps({
@@ -9517,7 +9533,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 408,
+        lineNumber: 409,
         columnNumber: 13
       }
     })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9529,7 +9545,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 414,
+        lineNumber: 415,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9540,23 +9556,36 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 424,
+        lineNumber: 425,
         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,
-        lineNumber: 429,
+        lineNumber: 430,
         columnNumber: 11
       }
-    }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
+    }))), helperText && /*#__PURE__*/React__namespace.createElement(Paragraph, {
+      shortContentRegular: true,
+      css: {
+        paddingTop: 8,
+        fontSize: 12,
+        color: '$textSecondary'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$u,
+        lineNumber: 434,
+        columnNumber: 9
+      }
+    }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
       disabled: disabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 433,
+        lineNumber: 439,
         columnNumber: 9
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
@@ -9580,7 +9609,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 435,
+        lineNumber: 441,
         columnNumber: 13
       }
     }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -9592,14 +9621,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 456,
+        lineNumber: 462,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 461,
+        lineNumber: 467,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
@@ -9617,7 +9646,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 464,
+        lineNumber: 470,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
@@ -9630,23 +9659,23 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 477,
+        lineNumber: 483,
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
-      color: colors.iconDisable,
+      color: colors$1.iconDisable,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 486,
+        lineNumber: 492,
         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,
-        lineNumber: 490,
+        lineNumber: 496,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__namespace.createElement(Item$2, {
@@ -9656,7 +9685,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 494,
+        lineNumber: 500,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
@@ -9667,14 +9696,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 499,
+        lineNumber: 505,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 500,
+        lineNumber: 506,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -9684,19 +9713,19 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 501,
+        lineNumber: 507,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
       size: "16px",
-      color: colors.iconDisable,
+      color: colors$1.iconDisable,
       style: {
         verticalAlign: 'text-bottom'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 502,
+        lineNumber: 508,
         columnNumber: 17
       }
     })), textEmptyItem))));
@@ -9716,7 +9745,8 @@
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
-    css: PropTypes__default["default"].object
+    css: PropTypes__default["default"].object,
+    helperText: PropTypes__default["default"].string
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -9759,7 +9789,8 @@
     search: PropTypes__default["default"].bool,
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    textEmptyItem: PropTypes__default["default"].string
+    textEmptyItem: PropTypes__default["default"].string,
+    helperText: PropTypes__default["default"].string
   };
   InputSelectTag.defaultProps = {
     placeholder: 'Select Item',
@@ -9993,7 +10024,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 +10339,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 {
@@ -12772,23 +12864,23 @@
     return result;
   };
   /**
-  * ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
-  * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-  * @param size - default fullsize
-  * @param layer - z-index default 1400
-  * @param isMobile - force mobile/desktop view, default is responsive
-  * @param onOpenAutoFocus - set default open behaviour
-  *
-  * @example
-  * // Uncontrolled Example
-  *  <ModalDialog>
-  *    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
-  *    <ModalDialogTitle>Title</ModalDialogTitle>
-  *    <ModalDialogContent>Content</ModalDialogContent>
-  *    <ModalDialogFooter>Footer</ModalDialogFooter>
-  *  </ModalDialog>
-  * @component
-  */
+   * ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
+   * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+   * @param size - default fullsize
+   * @param layer - z-index default 1400
+   * @param isMobile - force mobile/desktop view, default is responsive
+   * @param onOpenAutoFocus - set default open behaviour
+   *
+   * @example
+   * // Uncontrolled Example
+   *  <ModalDialog>
+   *    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
+   *    <ModalDialogTitle>Title</ModalDialogTitle>
+   *    <ModalDialogContent>Content</ModalDialogContent>
+   *    <ModalDialogFooter>Footer</ModalDialogFooter>
+   *  </ModalDialog>
+   * @component
+   */
 
 
   var ModalDialog = function ModalDialog(props) {
@@ -12807,7 +12899,7 @@
     var modalDialogContent = findNodeChild$1(childArray, 'ModalDialogContent');
     var modalDialogTrigger = findNodeChild$1(childArray, 'ModalDialogTrigger');
     var ref = React.useCallback(function (node) {
-      var appElement = document.getElementById("app");
+      var appElement = document.getElementById('app');
 
       if (appElement) {
         if (node !== null) {
@@ -12832,7 +12924,13 @@
           }),
           ref: ref,
           isMobile: isMobile,
-          onOpenAutoFocus: onOpenAutoFocus
+          onOpenAutoFocus: function (e) {
+            if (!onOpenAutoFocus) {
+              e.preventDefault();
+            } else {
+              onOpenAutoFocus(e);
+            }
+          }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
             css: {
@@ -12872,7 +12970,7 @@
                     as: "p",
                     heading: "pageTitle"
                   }, modalDialogTitle.props), void 0)
-                }), void 0), jsxRuntime.jsx(DialogClose, __assign({
+                }), void 0), !props.hideCloseButton && jsxRuntime.jsx(DialogClose, __assign({
                   asChild: true
                 }, {
                   children: jsxRuntime.jsx(Box, __assign({
@@ -13333,27 +13431,6 @@
   var AccordionItem = StyledItem$1;
   var AccordionContent = AccordionPrimitive__namespace.Content;
 
-  const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
-  const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
-  const yearRangesList = rangeStart => {
-    let start = rangeStart;
-    let end = start + 9;
-    return new Array(10).fill(undefined).map(_ => {
-      const yearRange = {
-        start,
-        end
-      };
-      start = end + 1;
-      end = end + 10;
-      return yearRange;
-    });
-  };
-  const getCalendarStartYear = year => year - year % 10 + 1;
-  const getCalendarStartYearRange = year => year - year % 100 + 1;
-  const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
-    dateStyle
-  }).format(date);
-
   function useMediaQuery(query) {
     const [matches, setMatches] = React.useState(false);
     React.useEffect(() => {
@@ -13407,6 +13484,27 @@
     }), void 0);
   };
 
+  const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+  const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
+  const yearRangesList = rangeStart => {
+    let start = rangeStart;
+    let end = start + 9;
+    return new Array(10).fill(undefined).map(_ => {
+      const yearRange = {
+        start,
+        end
+      };
+      start = end + 1;
+      end = end + 10;
+      return yearRange;
+    });
+  };
+  const getCalendarStartYear = year => year - year % 10 + 1;
+  const getCalendarStartYearRange = year => year - year % 100 + 1;
+  const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
+    dateStyle
+  }).format(date);
+
   var DateNumber = styled('div', {
     display: 'inline-flex',
     alignItems: 'center',
@@ -13463,6 +13561,11 @@
           height: '32px',
           width: '45.5px'
         }
+      },
+      isSunday: {
+        true: {
+          color: '$textDisable'
+        }
       }
     },
     compoundVariants: [{
@@ -13543,7 +13646,7 @@
   });
   var CalendarsContainer$1 = styled(Box, {
     width: '100%',
-    padding: '$spacing-01',
+    padding: '$spacing-03',
     display: 'inline-flex',
     borderRadius: '$lg',
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
@@ -13864,7 +13967,8 @@
             });
             dateProps = dateProps['disabled'] ? {} : dateProps;
             return jsxRuntime.jsx(DateNumber, __assign({}, dateProps, {
-              variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected)
+              variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
+              isSunday: date.getDay() === 0
             }, {
               children: date.getDate()
             }), key);
@@ -13973,7 +14077,8 @@
             paragraph: "shortContentBold",
             css: {
               color: '$textSecondary',
-              fontSize: '$label'
+              fontSize: '$label',
+              textAlign: 'center !important'
             }
           }, {
             children: weekday
@@ -14470,7 +14575,8 @@
             return jsxRuntime.jsx(DateNumber, __assign({
               size: "small"
             }, dateProps, {
-              variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected)
+              variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+              isSunday: date.getDay() === 0
             }, {
               children: date.getDate()
             }), key);
@@ -14575,7 +14681,8 @@
             children: jsxRuntime.jsx(Paragraph, __assign({
               paragraph: "shortContentBold",
               css: {
-                color: '$textSecondary'
+                color: '$textSecondary',
+                textAlign: 'center !important'
               }
             }, {
               children: weekday
@@ -14612,7 +14719,7 @@
           }, void 0)]
         }, void 0), jsxRuntime.jsx(Text$1, __assign({
           css: {
-            textAlign: 'center'
+            textAlign: 'center !important'
           },
           variant: "status",
           color: selected && selected.length > 1 ? 'primary' : 'disable'
@@ -15521,6 +15628,77 @@
         }
     }
   }
+  function advancePickerDate(type) {
+    var tempDate = new Date();
+    var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
+
+    switch (type) {
+      case TODAY:
+        {
+          return [today, today];
+        }
+
+      case YESTERDAY:
+        {
+          var yesterday = new Date(today);
+          yesterday.setDate(today.getDate() - 1);
+          return [yesterday, yesterday];
+        }
+
+      case LAST_7_DAYS:
+        {
+          var last7Days = new Date(today);
+          last7Days.setDate(today.getDate() - 7);
+          return [last7Days, today];
+        }
+
+      case LAST_WEEK:
+        {
+          var startThisWeek = new Date(today);
+          startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+          var endThisWeek = new Date(today);
+          endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+          return [startThisWeek, endThisWeek];
+        }
+
+      case THIS_WEEK:
+        {
+          var startThisWeek = new Date(today);
+          startThisWeek.setDate(today.getDate() - today.getDay());
+          var endThisWeek = new Date(today);
+          endThisWeek.setDate(today.getDate() - today.getDay() + 6);
+          return [startThisWeek, endThisWeek];
+        }
+
+      case LAST_MONTH:
+        {
+          var startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+          var endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+          return [startThisMonth, endThisMonth];
+        }
+
+      case LAST_TWO_MONTHS:
+        {
+          var last2Months = new Date(today);
+          last2Months.setDate(today.getDate() - 60);
+          return [last2Months, today];
+        }
+
+      case THIS_MONTH:
+        {
+          var startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+          var endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+          return [startThisMonth, endThisMonth];
+        }
+
+      default:
+        {
+          throw new Error("Unhandled action type: ".concat(type));
+        }
+    }
+  }
+
+  moment__default["default"].locale('id');
 
   var getInputPickerValue = function getInputPickerValue(type, date) {
     if (!date) return '';
@@ -15530,7 +15708,7 @@
         dateStyle: 'long'
       }).format(date);
     } else {
-      return "".concat(toDateFormat(date[0], 'medium'), " - ").concat(toDateFormat(date[1], 'medium'));
+      return "".concat(moment__default["default"](date[0]).format('ll'), " - ").concat(moment__default["default"](date[1]).format('ll'));
     }
   };
 
@@ -15620,9 +15798,12 @@
           options: advancePickerOptions,
           disabled: disabled,
           optionHandler: function (value) {
-            return dispatch({
-              type: value
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate(value)
             });
+            if (onChange) onChange(advancePickerDate(value));
+            setOpenPicker(false);
           }
         }, void 0) : {
           advanceView: advanceView
@@ -15804,15 +15985,18 @@
       return pageButtons;
     };
 
+    const isMobilePagination = useMediaQuery('(max-width: 360px)');
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
+      direction: isMobilePagination ? 'column' : 'row',
+      gap: isMobilePagination ? 2 : 0,
       css: {
-        height: 28
+        height: isMobilePagination ? 'unset' : 28
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 99,
+        lineNumber: 101,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15821,7 +16005,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 100,
+        lineNumber: 107,
         columnNumber: 7
       }
     }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15831,15 +16015,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 104,
+        lineNumber: 111,
         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,
-        lineNumber: 105,
+        lineNumber: 112,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -15850,7 +16034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 108,
+        lineNumber: 115,
         columnNumber: 13
       }
     }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -15861,7 +16045,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 120,
+          lineNumber: 127,
           columnNumber: 13
         }
       }, page);
@@ -15873,7 +16057,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 131,
+        lineNumber: 138,
         columnNumber: 13
       }
     }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15883,39 +16067,41 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 140,
+        lineNumber: 147,
         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,
-        lineNumber: 145,
+        lineNumber: 152,
         columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "vertical",
       css: {
         height: '100%',
-        margin: '0 $spacing-03 0 $spacing-01'
+        margin: '0 $spacing-03 0 $spacing-01',
+        display: isMobilePagination ? 'none' : 'inherit'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 152,
+        lineNumber: 159,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         display: 'flex',
         alignItems: 'center',
-        gap: 8
+        gap: 8,
+        flex: isMobilePagination ? 1 : 'unset'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 154,
+        lineNumber: 168,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -15923,12 +16109,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 155,
+        lineNumber: 169,
         columnNumber: 9
       }
-    }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputText, {
+    }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
       ref: inputPageRef,
-      type: "number",
+      isAllowed: ({
+        floatValue
+      }) => floatValue === undefined || floatValue > 0 && floatValue <= totalPages,
+      allowNegative: false,
       onChange: e => {
         if (e.target.value) {
           debouncedGoToPage(Number(e.target.value));
@@ -15947,7 +16136,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 156,
+        lineNumber: 170,
         columnNumber: 9
       }
     })));
@@ -16032,7 +16221,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,
@@ -16107,7 +16296,7 @@
 
     const totalPages = Math.ceil(totalData / limit);
     const isMobile = useMediaQuery('(max-width: 700px)');
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
+    return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
       direction: isMobile ? 'columnReverse' : 'row',
       align: "center",
       justify: "between",
@@ -16148,7 +16337,14 @@
         lineNumber: 33,
         columnNumber: 26
       }
-    }));
+    })) : /*#__PURE__*/React__default["default"].createElement(Box, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 36,
+        columnNumber: 5
+      }
+    });
   }
 
   Pagination.propTypes = {
@@ -16209,7 +16405,8 @@
         isLoading = _a.isLoading,
         rowGroup = _a.rowGroup;
         _a.hiddenColumns;
-        var css = _a.css;
+        var css = _a.css,
+        customRowsStyle = _a.customRowsStyle;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -16256,8 +16453,22 @@
             var actionCells = row.allCells.filter(function (cell) {
               return cell.column.id === 'menu' || cell.column.isAction;
             });
+            var customStyle = {};
+
+            if (customRowsStyle && customRowsStyle(row.values).length) {
+              for (var i = 0; i < customRowsStyle(row.values).length; i++) {
+                console.log(customRowsStyle(row.values)[i]);
+
+                if (customRowsStyle(row.values)[i].predicate) {
+                  customStyle = customRowsStyle(row.values)[i].css;
+                }
+              }
+            }
+
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$3, __assign({}, row.getRowProps(), {
+              children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$3, __assign({
+                css: customStyle
+              }, row.getRowProps(), {
                 key: "".concat(row.id, "-group_header")
               }), jsxRuntime.jsx(TableCell$3, __assign({
                 colSpan: 100
@@ -16267,7 +16478,9 @@
                 }, {
                   children: row.cells[0].render('Cell')
                 }), void 0)
-              }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({}, row.getRowProps(), {
+              }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
+                css: customStyle
+              }, row.getRowProps(), {
                 children: row.cells.filter(function (cell) {
                   return cell.column.isMobileHeader || cell.column.id === 'selection';
                 }).map(function (cell) {
@@ -16305,8 +16518,9 @@
                       return jsxRuntime.jsxs(Flex$1, __assign({
                         align: "center",
                         justify: "between",
+                        gap: 5,
                         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'
                         }
@@ -16315,7 +16529,7 @@
                           heading: "headerTable",
                           color: "secondary"
                         }, {
-                          children: (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase()
+                          children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
                         }), void 0), cell.render('Cell')]
                       }), "".concat(cell.column.id, "-").concat(row.id));
                     })
@@ -16616,7 +16830,8 @@
         selectedIds = _a.selectedIds,
         rowGroup = _a.rowGroup,
         hiddenColumns = _a.hiddenColumns,
-        columnOrder = _a.columnOrder;
+        columnOrder = _a.columnOrder,
+        customRowsStyle = _a.customRowsStyle;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
@@ -16878,8 +17093,22 @@
                 var notNullHeaderColumns = visibleColumns.filter(function (column) {
                   return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
                 });
+                var customStyle = {};
+
+                if (customRowsStyle && customRowsStyle(row.values).length) {
+                  for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
+                    console.log(customRowsStyle(row.values)[i_1]);
+
+                    if (customRowsStyle(row.values)[i_1].predicate) {
+                      customStyle = customRowsStyle(row.values)[i_1].css;
+                    }
+                  }
+                }
+
                 return jsxRuntime.jsxs(React__namespace.Fragment, {
-                  children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
+                  children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$2, __assign({
+                    css: customStyle
+                  }, row.getRowProps(), {
                     key: "".concat(row.id, "-group_header")
                   }), jsxRuntime.jsx(TableCell$2, __assign({
                     colSpan: 100,
@@ -16893,7 +17122,9 @@
                     }, {
                       children: row.cells[0].render('Cell')
                     }), void 0)
-                  }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({}, row.getRowProps(), {
+                  }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({
+                    css: customStyle
+                  }, row.getRowProps(), {
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
@@ -16906,7 +17137,7 @@
                         children: cell.render('Cell')
                       }), void 0);
                     })
-                  }), void 0), row.isExpanded ? subRowCells.map(function (cell) {
+                  }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
                     return jsxRuntime.jsxs(TableRow$2, __assign({
                       subRow: true
                     }, {
@@ -16918,8 +17149,8 @@
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
                           css: {
-                            paddingTop: '$spacing-03 !important',
-                            paddingBottom: '$spacing-03 !important'
+                            paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
+                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
                           }
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
@@ -16931,8 +17162,8 @@
                           subCell: true,
                           colSpan: visibleColumns.length - subRowCells.length,
                           css: {
-                            paddingTop: '$spacing-03 !important',
-                            paddingBottom: '$spacing-03 !important'
+                            paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
+                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
                           }
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
@@ -16979,7 +17210,8 @@
         isLoading: isLoading,
         rowGroup: rowGroup,
         hiddenColumns: hiddenColumns,
-        css: css
+        css: css,
+        customRowsStyle: customRowsStyle
       }, void 0)]
     }), void 0);
   } //Dummy component for mdx docs purpose only
@@ -18049,23 +18281,23 @@
   var HEADER_HEIGHT = 56;
   var HEADER_HEIGHT_MOBILE = 76;
   /**
-  * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
-  * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-  * @param size - default fullsize
-  * @param layer - z-index default 1400
-  * @param isMobile - force mobile/desktop view, default is responsive
-  * @param onOpenAutoFocus - set default open behaviour
-  *
-  * @example
-  * // Uncontrolled Example
-  *  <PageDialog>
-  *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
-  *    <PageDialogTitle>Title</PageDialogTitle>
-  *    <PageDialogContent>Content</PageDialogContent>
-  *    <PageDialogFooter>Footer</PageDialogFooter>
-  *  </PageDialog>
-  * @component
-  */
+   * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
+   * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+   * @param size - default fullsize
+   * @param layer - z-index default 1400
+   * @param isMobile - force mobile/desktop view, default is responsive
+   * @param onOpenAutoFocus - set default open behaviour
+   *
+   * @example
+   * // Uncontrolled Example
+   *  <PageDialog>
+   *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
+   *    <PageDialogTitle>Title</PageDialogTitle>
+   *    <PageDialogContent>Content</PageDialogContent>
+   *    <PageDialogFooter>Footer</PageDialogFooter>
+   *  </PageDialog>
+   * @component
+   */
 
   var PageDialog = function PageDialog(props) {
     var children = props.children,
@@ -18100,7 +18332,13 @@
             zIndex: layer
           }),
           ref: ref,
-          onOpenAutoFocus: onOpenAutoFocus
+          onOpenAutoFocus: function (e) {
+            if (!onOpenAutoFocus) {
+              e.preventDefault();
+            } else {
+              onOpenAutoFocus(e);
+            }
+          }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
             css: {
@@ -18247,7 +18485,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 +18518,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
   });
@@ -18395,6 +18633,13 @@
         zIndex: '$tooltip',
         minHeight: 230
       }, isMobileCss, props.css),
+      onOpenAutoFocus: e => {
+        if (!props.onOpenAutoFocus) {
+          e.preventDefault();
+        } else {
+          props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+        }
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -18405,7 +18650,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 130,
+        lineNumber: 140,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18413,7 +18658,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 131,
+        lineNumber: 141,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18421,7 +18666,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 132,
+        lineNumber: 142,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18432,7 +18677,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 133,
+        lineNumber: 143,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18440,7 +18685,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 134,
+        lineNumber: 144,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18448,24 +18693,25 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 138,
+        lineNumber: 148,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 139,
+        lineNumber: 149,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      paragraph: "longContentRegular",
       css: {
         textAlign: 'justify'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 140,
+        lineNumber: 150,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18477,7 +18723,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 142,
+        lineNumber: 152,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18485,7 +18731,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 143,
+        lineNumber: 153,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18499,7 +18745,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 144,
+        lineNumber: 154,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18507,7 +18753,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 146,
+        lineNumber: 156,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18519,7 +18765,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 147,
+        lineNumber: 157,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18527,7 +18773,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 159,
+        lineNumber: 169,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18543,7 +18789,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 160,
+        lineNumber: 170,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18551,7 +18797,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 171,
+        lineNumber: 181,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18566,7 +18812,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 172,
+        lineNumber: 182,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18591,7 +18837,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 203,
+        lineNumber: 213,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18599,17 +18845,20 @@
         zIndex: '$tooltip',
         minHeight: 230
       }, isMobileCss, props.css),
+      onOpenAutoFocus: e => {
+        if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 204,
+        lineNumber: 214,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 205,
+        lineNumber: 221,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18617,7 +18866,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 206,
+        lineNumber: 222,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
@@ -18625,7 +18874,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 207,
+        lineNumber: 223,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18636,7 +18885,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 208,
+        lineNumber: 224,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18644,7 +18893,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 209,
+        lineNumber: 225,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18652,14 +18901,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 213,
+        lineNumber: 229,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 214,
+        lineNumber: 230,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18669,7 +18918,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 215,
+        lineNumber: 231,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18681,7 +18930,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 217,
+        lineNumber: 233,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18689,7 +18938,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 218,
+        lineNumber: 234,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18703,7 +18952,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 219,
+        lineNumber: 235,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18711,7 +18960,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 221,
+        lineNumber: 237,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18726,7 +18975,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 222,
+        lineNumber: 238,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18734,7 +18983,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 235,
+        lineNumber: 251,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18750,7 +18999,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 236,
+        lineNumber: 252,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18758,7 +19007,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 247,
+        lineNumber: 263,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18773,7 +19022,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 248,
+        lineNumber: 264,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18902,17 +19151,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 +19169,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 +19260,7 @@
       color: 'white'
     },
     '[data-disabled] &': {
-      color: colors.gray400
+      color: colors$1.gray400
     }
   });
   const StyledDropdown = styled(ButtonPrimitive, {
@@ -20889,6 +21138,8 @@
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
+            crop.height = Math.ceil(crop.height);
+            crop.width = Math.ceil(crop.width);
             canvas = document.createElement('canvas');
             canvasPreview(image, canvas, crop, scale, rotate);
             return [4
@@ -21193,13 +21444,27 @@
       borderRadius: 8,
       width: width,
       height: height - 36,
-      objectFit: 'cover'
+      objectFit: 'cover',
+      variants: {
+        disabled: {
+          true: {
+            height
+          }
+        }
+      }
     });
     const Blank = styled('div', {
       borderRadius: 8,
       width: width,
       height: height - 36,
-      background: '$gray50'
+      background: '$gray50',
+      variants: {
+        disabled: {
+          true: {
+            height
+          }
+        }
+      }
     });
 
     function handleClick() {
@@ -21210,6 +21475,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 +21747,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 537,
+          lineNumber: 557,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21483,7 +21757,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 538,
+          lineNumber: 558,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21499,7 +21773,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 548,
+              lineNumber: 568,
               columnNumber: 16
             }
           });
@@ -21511,7 +21785,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 551,
+            lineNumber: 571,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21521,17 +21795,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 552,
+            lineNumber: 572,
             columnNumber: 11
           }
-        }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+        }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "close",
           onClick: () => handleRemove(item),
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 553,
-            columnNumber: 13
+            lineNumber: 573,
+            columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
@@ -21543,7 +21817,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 554,
+            lineNumber: 574,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21552,18 +21826,20 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 562,
+            lineNumber: 582,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
           src: item.url,
+          alt: "upload-content",
+          disabled: disabled,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 564,
+            lineNumber: 584,
             columnNumber: 13
           }
-        })), renderButtonReplace(index));
+        })), !disabled && renderButtonReplace(index));
       });
     };
 
@@ -21579,7 +21855,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 575,
+              lineNumber: 595,
               columnNumber: 16
             }
           });
@@ -21590,7 +21866,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 578,
+            lineNumber: 598,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21600,17 +21876,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 579,
+            lineNumber: 599,
             columnNumber: 11
           }
-        }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+        }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
           type: "close",
           onClick: () => handleRemove(item),
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 580,
-            columnNumber: 13
+            lineNumber: 600,
+            columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
@@ -21622,7 +21898,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 581,
+            lineNumber: 601,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21632,32 +21908,40 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 589,
+            lineNumber: 609,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 590,
+            lineNumber: 610,
             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: 611,
+            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: 612,
+            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 +21951,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 605,
+            lineNumber: 627,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21676,17 +21960,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 635,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
+          disabled: disabled,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 637,
             columnNumber: 13
           }
-        })), renderButtonReplace(index));
+        })), !disabled && renderButtonReplace(index));
       });
     };
 
@@ -21699,7 +21984,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 648,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21713,7 +21998,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 649,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21739,7 +22024,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 650,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21747,14 +22032,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 641,
+          lineNumber: 663,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 664,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21767,7 +22052,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 672,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -21783,7 +22068,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 673,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -21795,21 +22080,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 662,
+          lineNumber: 684,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 685,
           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: 687,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -21818,7 +22103,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 688,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -21826,7 +22111,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 667,
+          lineNumber: 689,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21836,14 +22121,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 669,
+          lineNumber: 691,
           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: 698,
           columnNumber: 19
         }
       }, error));
@@ -21854,7 +22139,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 705,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21862,7 +22147,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 684,
+          lineNumber: 706,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21870,7 +22155,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 707,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21883,7 +22168,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 709,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -21894,7 +22179,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 690,
+          lineNumber: 712,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21905,7 +22190,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 713,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21915,17 +22200,18 @@
           height: '100%'
         },
         src: previewImage,
+        alt: "cropper-content",
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 692,
+          lineNumber: 714,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 717,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21937,7 +22223,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 718,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21945,7 +22231,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 697,
+          lineNumber: 719,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21957,7 +22243,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 698,
+          lineNumber: 720,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21965,7 +22251,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 726,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21974,7 +22260,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 705,
+          lineNumber: 727,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21982,7 +22268,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 708,
+          lineNumber: 730,
           columnNumber: 15
         }
       }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21990,7 +22276,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: 3,
+      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -21998,7 +22284,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 741,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -22007,7 +22293,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 744,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -22341,7 +22627,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 +22687,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
-          color: colors.btnPrimary
+          color: colors$1.btnPrimary
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -25386,7 +25672,7 @@
             marginRight: 9
           },
           size: "24",
-          color: colors.bgGreen,
+          color: colors$1.bgGreen,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25407,7 +25693,7 @@
             margin: '0 9px'
           },
           size: "20",
-          color: colors.iconSecondary,
+          color: colors$1.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25433,7 +25719,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 +25764,7 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           size: "20",
-          color: colors.iconSecondary,
+          color: colors$1.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -27399,6 +27685,30 @@
         inputValue = _a[0],
         setInputValue = _a[1];
 
+    React.useEffect(function () {
+      var handleGeoCode = function handleGeoCode(e) {
+        var defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
+        var lat = e.lat,
+            lng = e.lng;
+        request__default["default"].get("https://maps.googleapis.com/maps/api/geocode/json?latlng=".concat(lat, ",").concat(lng, "&key=").concat(mapsApiKey !== null && mapsApiKey !== void 0 ? mapsApiKey : defaultApiKey)).end(function (err, res) {
+          var _a;
+
+          if (err) {
+            console.error(err.message);
+          }
+
+          if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+            var results = JSON.parse(res === null || res === void 0 ? void 0 : res.text).results;
+            setInputValue((_a = results === null || results === void 0 ? void 0 : results[0]) === null || _a === void 0 ? void 0 : _a.formatted_address);
+          }
+        });
+      };
+
+      if (value && value.lat && value.lng) {
+        handleGeoCode(value);
+      }
+    }, [mapsApiKey, onChange, value]);
+
     function handleClick() {
       var _a;
 
@@ -27501,11 +27811,7 @@
   InputMapPicker.defaultProps = {
     modalTitle: 'Tambah Lokasi di Map',
     buttonLabel: 'Ubah Lokasi',
-    placeholder: 'Tandai lokasi dalam peta',
-    value: {
-      lat: -6.175392,
-      lng: 106.827153
-    }
+    placeholder: 'Tandai lokasi dalam peta'
   };
 
   var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
@@ -29106,6 +29412,7 @@
   exports.InputLeftElement = InputLeftElement;
   exports.InputMapPicker = InputMapPicker;
   exports.InputNumber = InputNumber;
+  exports.InputOTP = InputOTP;
   exports.InputPrefix = InputPrefix;
   exports.InputRadio = InputRadio;
   exports.InputRadioGroup = InputRadioGroup;
@@ -29157,6 +29464,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;
@@ -29208,6 +29516,7 @@
   exports.Upload = Upload;
   exports.YESTERDAY = YESTERDAY;
   exports.addOnCellStyle = addOnCellStyle;
+  exports.advancePickerDate = advancePickerDate;
   exports.advancePickerOptions = advancePickerOptions;
   exports.defaultFetchDataParams = defaultFetchDataParams;
   exports.pickerReducer = pickerReducer;