@majoo-ui/react 1.48.0 → 1.48.3

package/index.esm.js

@@ -4033,7 +4033,7 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
 var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
 const CardComponent = styled('div', {
-  padding: '20px',
+  padding: '12px',
   height: 'auto',
   width: 'auto',
   borderRadius: '$lg',
@@ -4182,7 +4182,7 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$S,
-      lineNumber: 103,
+      lineNumber: 102,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(CardLineColor, {
@@ -4190,14 +4190,14 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$S,
-      lineNumber: 114,
+      lineNumber: 113,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$S,
-      lineNumber: 118,
+      lineNumber: 117,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
@@ -4206,14 +4206,14 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$S,
-      lineNumber: 119,
+      lineNumber: 118,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$S,
-      lineNumber: 125,
+      lineNumber: 124,
       columnNumber: 13
     }
   }, title)) : null, children);
@@ -5128,7 +5128,7 @@ Progress$1.defaultProps = {
 };
 
 const formLabelStyle = {
-  '& .form-label': {
+  '& > .form-label': {
     alignItems: 'start !important',
     '& > div': {
       width: 175
@@ -5149,7 +5149,10 @@ const formLabelStyle = {
     }
   }
 };
-const FormGroup = styled(Flex$1, {
+const FormGroup = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  rowGap: '$spacing-03',
   variants: {
     responsive: {
       input: Object.assign({
@@ -5204,7 +5207,7 @@ const FormGroup = styled(Flex$1, {
           '& *:nth-child(3)': {
             gridColumn: 'unset'
           },
-          '& .retina-error': {
+          '& > *:nth-child(n+4)': {
             gridColumn: '2/3'
           }
         }
@@ -5213,14 +5216,6 @@ const FormGroup = styled(Flex$1, {
   }
 });
 FormGroup.displayName = 'FormGroup';
-FormGroup.propTypes = {
-  gap: PropTypes.number,
-  direction: PropTypes.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";
@@ -7277,7 +7272,7 @@ Tag.defaultProps = {
   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,
@@ -7394,7 +7389,8 @@ function TagsInput(_ref) {
     readOnly,
     max,
     maxChar,
-    pattern
+    pattern,
+    helperText
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
@@ -7448,7 +7444,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 163,
+      lineNumber: 164,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputTagsComponent, _extends({
@@ -7461,7 +7457,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 164,
+      lineNumber: 165,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Input$7, {
@@ -7476,7 +7472,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 172,
+      lineNumber: 173,
       columnNumber: 9
     }
   })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7484,7 +7480,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 11
     }
   }, pattern.errorMessage) : /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7492,14 +7488,28 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 188,
+      lineNumber: 189,
       columnNumber: 11
     }
-  }, "Invalid Input")), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
+  }, "Invalid Input")), helperText && /*#__PURE__*/React__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.createElement(TagWrapper$2, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$A,
+      lineNumber: 197,
       columnNumber: 7
     }
   }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
@@ -7512,7 +7522,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 193,
+      lineNumber: 199,
       columnNumber: 11
     }
   }, tag))));
@@ -7528,6 +7538,7 @@ TagsInput.propTypes = {
   isInvalid: PropTypes.bool,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
+  helperText: PropTypes.string,
   pattern: PropTypes.shape({
     regex: PropTypes.string.isRequired,
     errorMessage: PropTypes.string
@@ -8202,11 +8213,13 @@ const SelectOption = styled('div', {
 });
 const 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'
+  }
 });
 const StyledDiv$2 = styled('div', {
   color: '$textDisable',
@@ -8933,7 +8946,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-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,
@@ -9153,6 +9166,7 @@ function InputSelectCheck(_ref) {
     isInvalid,
     sortBy,
     showSelectedTag,
+    helperText,
     css
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -9350,7 +9364,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 401,
+      lineNumber: 402,
       columnNumber: 5
     }
   }), /*#__PURE__*/React.createElement(Select, {
@@ -9360,7 +9374,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 402,
+      lineNumber: 403,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9371,7 +9385,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 403,
+      lineNumber: 404,
       columnNumber: 9
     }
   }), search ? /*#__PURE__*/React.createElement(Input$5, _extends({}, getInputProps({
@@ -9382,7 +9396,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 408,
+      lineNumber: 409,
       columnNumber: 13
     }
   })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9394,7 +9408,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 414,
+      lineNumber: 415,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9405,7 +9419,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 424,
+      lineNumber: 425,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(IconCaretDown, {
@@ -9413,15 +9427,28 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 429,
+      lineNumber: 430,
       columnNumber: 11
     }
-  }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
+  }))), helperText && /*#__PURE__*/React.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.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 433,
+      lineNumber: 439,
       columnNumber: 9
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
@@ -9445,7 +9472,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 435,
+      lineNumber: 441,
       columnNumber: 13
     }
   }), selectedItem.name))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
@@ -9457,14 +9484,14 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 456,
+      lineNumber: 462,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 461,
+      lineNumber: 467,
       columnNumber: 11
     }
   }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper$1, _extends({
@@ -9482,7 +9509,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 464,
+      lineNumber: 470,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(IconWrapper, {
@@ -9495,7 +9522,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 477,
+      lineNumber: 483,
       columnNumber: 19
     }
   }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
@@ -9503,7 +9530,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 486,
+      lineNumber: 492,
       columnNumber: 23
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
@@ -9511,7 +9538,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 490,
+      lineNumber: 496,
       columnNumber: 25
     }
   })), /*#__PURE__*/React.createElement(Item$2, {
@@ -9521,7 +9548,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 494,
+      lineNumber: 500,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, _extends({
@@ -9532,14 +9559,14 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 499,
+      lineNumber: 505,
       columnNumber: 11
     }
   }), /*#__PURE__*/React.createElement(StyledDiv$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 500,
+      lineNumber: 506,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -9549,7 +9576,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 501,
+      lineNumber: 507,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -9561,7 +9588,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 502,
+      lineNumber: 508,
       columnNumber: 17
     }
   })), textEmptyItem))));
@@ -9581,7 +9608,8 @@ InputSelectCheck.propTypes = {
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
-  css: PropTypes.object
+  css: PropTypes.object,
+  helperText: PropTypes.string
 };
 InputSelectCheck.defaultProps = {
   placeholder: 'Select Item',
@@ -9624,7 +9652,8 @@ InputSelectTag.propTypes = {
   search: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  textEmptyItem: PropTypes.string
+  textEmptyItem: PropTypes.string,
+  helperText: PropTypes.string
 };
 InputSelectTag.defaultProps = {
   placeholder: 'Select Item',
@@ -11398,7 +11427,7 @@ const IconButton = styled('button', {
   borderRadius: '$round',
   size: '24px',
   padding: '$spacing-01',
-  display: 'inline-flex',
+  display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   border: 'none',
@@ -12667,23 +12696,23 @@ const findNodeChild$1 = (array, displayName) => {
   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
+ */
 
 
 const ModalDialog = props => {
@@ -12704,7 +12733,7 @@ const ModalDialog = props => {
   const modalDialogContent = findNodeChild$1(childArray, 'ModalDialogContent');
   const modalDialogTrigger = findNodeChild$1(childArray, 'ModalDialogTrigger');
   const ref = useCallback(node => {
-    const appElement = document.getElementById("app");
+    const appElement = document.getElementById('app');
 
     if (appElement) {
       if (node !== null) {
@@ -12729,7 +12758,13 @@ const ModalDialog = props => {
         }),
         ref: ref,
         isMobile: isMobile,
-        onOpenAutoFocus: onOpenAutoFocus
+        onOpenAutoFocus: e => {
+          if (!onOpenAutoFocus) {
+            e.preventDefault();
+          } else {
+            onOpenAutoFocus(e);
+          }
+        }
       }, {
         children: jsxs(Box, Object.assign({
           css: {
@@ -12769,7 +12804,7 @@ const ModalDialog = props => {
                   as: "p",
                   heading: "pageTitle"
                 }, modalDialogTitle.props), void 0)
-              }), void 0), jsx(DialogClose, Object.assign({
+              }), void 0), !props.hideCloseButton && jsx(DialogClose, Object.assign({
                 asChild: true
               }, {
                 children: jsx(Box, Object.assign({
@@ -13231,27 +13266,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.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] = useState(false);
   useEffect(() => {
@@ -13301,6 +13315,27 @@ const AdvancedOption = ({
   }), 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);
+
 const DateNumber = styled('div', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -13357,6 +13392,11 @@ const DateNumber = styled('div', {
         height: '32px',
         width: '45.5px'
       }
+    },
+    isSunday: {
+      true: {
+        color: '$textDisable'
+      }
     }
   },
   compoundVariants: [{
@@ -13438,7 +13478,7 @@ const WeekdayBox$1 = styled(Box, {
 });
 const 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)',
@@ -13743,7 +13783,8 @@ const CalendarBox = ({
         });
         dateProps = dateProps['disabled'] ? {} : dateProps;
         return jsx(DateNumber, Object.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);
@@ -13836,7 +13877,8 @@ const CalendarBox = ({
         paragraph: "shortContentBold",
         css: {
           color: '$textSecondary',
-          fontSize: '$label'
+          fontSize: '$label',
+          textAlign: 'center !important'
         }
       }, {
         children: weekday
@@ -14090,6 +14132,7 @@ const FooterContainer = styled(Flex$1, {
 });
 const TitleButton = styled(Heading, {
   padding: '2px $spacing-04',
+  color: '$textPrimary',
   '&:hover': {
     backgroundColor: '$bgSuccess',
     color: '$textGreen'
@@ -14308,7 +14351,8 @@ const MobileCalendarBox = ({
         return jsx(DateNumber, Object.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);
@@ -14397,7 +14441,8 @@ const MobileCalendarBox = ({
         children: jsx(Paragraph, Object.assign({
           paragraph: "shortContentBold",
           css: {
-            color: '$textSecondary'
+            color: '$textSecondary',
+            textAlign: 'center !important'
           }
         }, {
           children: weekday
@@ -14420,7 +14465,10 @@ const MobileCalendarBox = ({
           onClick: () => setExpandAdvanceView(!expandAdvanceView)
         }, {
           children: [jsx(Text$1, Object.assign({
-            variant: "contentButton"
+            variant: "contentButton",
+            css: {
+              color: '$textPrimary'
+            }
           }, {
             children: "Pilih Rentang Waktu"
           }), void 0), expandAdvanceView ? jsx(ChevronDownOutline, {}, void 0) : jsx(ChevronUpOutline, {}, void 0)]
@@ -14431,7 +14479,7 @@ const MobileCalendarBox = ({
         }, void 0)]
       }, void 0), jsx(Text$1, Object.assign({
         css: {
-          textAlign: 'center'
+          textAlign: 'center !important'
         },
         variant: "status",
         color: selected && selected.length > 1 ? 'primary' : 'disable'
@@ -15329,6 +15377,77 @@ function pickerReducer(state, action) {
       }
   }
 }
+function advancePickerDate(type) {
+  const tempDate = new Date();
+  const today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
+
+  switch (type) {
+    case TODAY:
+      {
+        return [today, today];
+      }
+
+    case YESTERDAY:
+      {
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        return [yesterday, yesterday];
+      }
+
+    case LAST_7_DAYS:
+      {
+        const last7Days = new Date(today);
+        last7Days.setDate(today.getDate() - 7);
+        return [last7Days, today];
+      }
+
+    case LAST_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+        return [startThisWeek, endThisWeek];
+      }
+
+    case THIS_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay());
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() + 6);
+        return [startThisWeek, endThisWeek];
+      }
+
+    case LAST_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+        const endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+        return [startThisMonth, endThisMonth];
+      }
+
+    case LAST_TWO_MONTHS:
+      {
+        const last2Months = new Date(today);
+        last2Months.setDate(today.getDate() - 60);
+        return [last2Months, today];
+      }
+
+    case THIS_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+        const endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+        return [startThisMonth, endThisMonth];
+      }
+
+    default:
+      {
+        throw new Error(`Unhandled action type: ${type}`);
+      }
+  }
+}
+
+moment.locale('id');
 
 const getInputPickerValue = (type, date) => {
   if (!date) return '';
@@ -15338,7 +15457,7 @@ const getInputPickerValue = (type, date) => {
       dateStyle: 'long'
     }).format(date);
   } else {
-    return `${toDateFormat(date[0], 'medium')} - ${toDateFormat(date[1], 'medium')}`;
+    return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
 };
 
@@ -15409,9 +15528,14 @@ function InputDatePicker({
     advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
       options: advancePickerOptions,
       disabled: disabled,
-      optionHandler: value => dispatch({
-        type: value
-      })
+      optionHandler: value => {
+        dispatch({
+          type: 'UPDATE',
+          payload: advancePickerDate(value)
+        });
+        if (onChange) onChange(advancePickerDate(value));
+        setOpenPicker(false);
+      }
     }, void 0) : {
       advanceView
     }),
@@ -15589,15 +15713,18 @@ const PaginationButton = ({
     return pageButtons;
   };
 
+  const isMobilePagination = useMediaQuery('(max-width: 360px)');
   return /*#__PURE__*/React__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.createElement(Flex$1, {
@@ -15606,7 +15733,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 100,
+      lineNumber: 107,
       columnNumber: 7
     }
   }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15616,7 +15743,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 104,
+      lineNumber: 111,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
@@ -15624,7 +15751,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 105,
+      lineNumber: 112,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -15635,7 +15762,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 108,
+      lineNumber: 115,
       columnNumber: 13
     }
   }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -15646,7 +15773,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 120,
+        lineNumber: 127,
         columnNumber: 13
       }
     }, page);
@@ -15658,7 +15785,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 131,
+      lineNumber: 138,
       columnNumber: 13
     }
   }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15668,7 +15795,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 140,
+      lineNumber: 147,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
@@ -15676,31 +15803,33 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 145,
+      lineNumber: 152,
       columnNumber: 17
     }
   })))), /*#__PURE__*/React__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.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.createElement(Text$1, {
@@ -15708,12 +15837,15 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 155,
+      lineNumber: 169,
       columnNumber: 9
     }
-  }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputText, {
+  }, "Ke Halaman"), /*#__PURE__*/React__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));
@@ -15732,7 +15864,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 156,
+      lineNumber: 170,
       columnNumber: 9
     }
   })));
@@ -15892,7 +16024,7 @@ function Pagination(_ref) {
 
   const totalPages = Math.ceil(totalData / limit);
   const isMobile = useMediaQuery('(max-width: 700px)');
-  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
+  return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: isMobile ? 'columnReverse' : 'row',
     align: "center",
     justify: "between",
@@ -15933,7 +16065,14 @@ function Pagination(_ref) {
       lineNumber: 33,
       columnNumber: 26
     }
-  }));
+  })) : /*#__PURE__*/React__default.createElement(Box, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  });
 }
 
 Pagination.propTypes = {
@@ -15994,7 +16133,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   isLoading,
   rowGroup,
   hiddenColumns,
-  css
+  css,
+  customRowsStyle
 }, ref) => {
   const {
     getTableProps,
@@ -16040,8 +16180,22 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         children: page.map(row => {
           prepareRow(row);
           const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
+          let customStyle = {};
+
+          if (customRowsStyle && customRowsStyle(row.values).length) {
+            for (let 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 jsxs(React__default.Fragment, {
-            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({}, row.getRowProps(), {
+            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               key: `${row.id}-group_header`
             }), jsx(TableCell$3, Object.assign({
               colSpan: 100
@@ -16051,7 +16205,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               }, {
                 children: row.cells[0].render('Cell')
               }), void 0)
-            }), void 0)), jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
+            }), void 0)), jsx(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
                 return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
@@ -16085,6 +16241,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                     return jsxs(Flex$1, Object.assign({
                       align: "center",
                       justify: "between",
+                      gap: 5,
                       css: {
                         backgroundColor: colors$1.bgGray,
                         padding: `$spacing-03 $spacing-05 ${'selection' in row.values ? '$spacing-03 $spacing-07' : ''}`,
@@ -16095,7 +16252,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                         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')]
                     }), `${cell.column.id}-${row.id}`);
                   })
@@ -16381,7 +16538,8 @@ function Table({
   selectedIds,
   rowGroup,
   hiddenColumns,
-  columnOrder
+  columnOrder,
+  customRowsStyle
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -16618,8 +16776,22 @@ function Table({
               const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+              let customStyle = {};
+
+              if (customRowsStyle && customRowsStyle(row.values).length) {
+                for (let _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 jsxs(React.Fragment, {
-                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
+                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   key: `${row.id}-group_header`
                 }), jsx(TableCell$2, Object.assign({
                   colSpan: 100,
@@ -16633,7 +16805,9 @@ function Table({
                   }, {
                     children: row.cells[0].render('Cell')
                   }), void 0)
-                }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
+                }), void 0)), jsx(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
                     return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign({
@@ -16644,7 +16818,7 @@ function Table({
                       children: cell.render('Cell')
                     }), void 0);
                   })
-                }), void 0), row.isExpanded ? subRowCells.map(cell => jsxs(TableRow$2, Object.assign({
+                }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$2, Object.assign({
                   subRow: true
                 }, {
                   children: [leftAddOnCells.map((_, index) => jsx("td", {}, index)), jsxs(React.Fragment, {
@@ -16653,8 +16827,8 @@ function Table({
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
                       css: {
-                        paddingTop: '$spacing-03 !important',
-                        paddingBottom: '$spacing-03 !important'
+                        paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
                       }
                     }, {
                       children: jsx(Paragraph, Object.assign({
@@ -16666,8 +16840,8 @@ function Table({
                       subCell: true,
                       colSpan: visibleColumns.length - subRowCells.length,
                       css: {
-                        paddingTop: '$spacing-03 !important',
-                        paddingBottom: '$spacing-03 !important'
+                        paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
                       }
                     }, {
                       children: jsx(Paragraph, Object.assign({
@@ -16713,7 +16887,8 @@ function Table({
       isLoading: isLoading,
       rowGroup: rowGroup,
       hiddenColumns: hiddenColumns,
-      css: css
+      css: css,
+      customRowsStyle: customRowsStyle
     }, void 0)]
   }), void 0);
 } //Dummy component for mdx docs purpose only
@@ -17776,23 +17951,23 @@ const FOOTER_HEIGHT = 64;
 const HEADER_HEIGHT = 56;
 const 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
+ */
 
 const PageDialog = props => {
   const {
@@ -17829,7 +18004,13 @@ const PageDialog = props => {
           zIndex: layer
         }),
         ref: ref,
-        onOpenAutoFocus: onOpenAutoFocus
+        onOpenAutoFocus: e => {
+          if (!onOpenAutoFocus) {
+            e.preventDefault();
+          } else {
+            onOpenAutoFocus(e);
+          }
+        }
       }, {
         children: jsxs(Box, Object.assign({
           css: {
@@ -17992,7 +18173,7 @@ const StyledContent$1 = styled(ADialog.Content, {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '90vw',
-  maxWidth: '500px',
+  maxWidth: '422px',
   maxHeight: '100vh',
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
@@ -18034,7 +18215,7 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 75,
+      lineNumber: 74,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
@@ -18044,14 +18225,14 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 76,
+      lineNumber: 75,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 77,
+      lineNumber: 76,
       columnNumber: 7
     }
   }), children));
@@ -18065,14 +18246,14 @@ function AlertDialogFunction(properties) {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 86,
+        lineNumber: 85,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 87,
+        lineNumber: 86,
         columnNumber: 9
       }
     }))), document.getElementById('a-dialog'));
@@ -18116,7 +18297,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 128,
+      lineNumber: 127,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18124,17 +18305,24 @@ const TemplateAlertFunction = props => {
       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,
-      lineNumber: 129,
+      lineNumber: 128,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 130,
+      lineNumber: 139,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18142,7 +18330,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 131,
+      lineNumber: 140,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18150,7 +18338,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 132,
+      lineNumber: 141,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18161,7 +18349,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 133,
+      lineNumber: 142,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18169,7 +18357,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 134,
+      lineNumber: 143,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18177,24 +18365,25 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 138,
+      lineNumber: 147,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 139,
+      lineNumber: 148,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    paragraph: "longContentRegular",
     css: {
       textAlign: 'justify'
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 140,
+      lineNumber: 149,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18206,7 +18395,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 142,
+      lineNumber: 153,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18214,7 +18403,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 143,
+      lineNumber: 154,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18228,7 +18417,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 144,
+      lineNumber: 155,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18236,7 +18425,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 146,
+      lineNumber: 157,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18248,7 +18437,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 147,
+      lineNumber: 158,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18256,7 +18445,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 159,
+      lineNumber: 170,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18272,7 +18461,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 160,
+      lineNumber: 171,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18280,7 +18469,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 171,
+      lineNumber: 182,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18295,7 +18484,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 172,
+      lineNumber: 183,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18320,7 +18509,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 203,
+      lineNumber: 214,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18328,17 +18517,20 @@ function AlertDialog(props) {
       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: 215,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 205,
+      lineNumber: 223,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18346,7 +18538,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 206,
+      lineNumber: 224,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -18354,7 +18546,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 207,
+      lineNumber: 225,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18365,7 +18557,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 208,
+      lineNumber: 226,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18373,7 +18565,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 209,
+      lineNumber: 227,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18381,14 +18573,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 213,
+      lineNumber: 231,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 214,
+      lineNumber: 232,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18398,7 +18590,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 215,
+      lineNumber: 233,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18410,7 +18602,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 217,
+      lineNumber: 235,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18418,7 +18610,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 218,
+      lineNumber: 236,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18432,7 +18624,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 219,
+      lineNumber: 237,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18440,7 +18632,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 221,
+      lineNumber: 239,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18455,7 +18647,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 222,
+      lineNumber: 240,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18463,7 +18655,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 235,
+      lineNumber: 253,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18479,7 +18671,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 236,
+      lineNumber: 254,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18487,7 +18679,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 247,
+      lineNumber: 265,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18502,7 +18694,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 248,
+      lineNumber: 266,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -20592,6 +20784,8 @@ function toBlob(canvas) {
 
 function imgPreview(image, crop, scale = 1, rotate = 0) {
   return __awaiter(this, void 0, void 0, function* () {
+    crop.height = Math.ceil(crop.height);
+    crop.width = Math.ceil(crop.width);
     const canvas = document.createElement('canvas');
     canvasPreview(image, canvas, crop, scale, rotate);
     const blob = yield toBlob(canvas);
@@ -20888,13 +21082,27 @@ const Upload = ({
     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() {
@@ -21177,7 +21385,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 543,
+        lineNumber: 557,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -21187,7 +21395,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 544,
+        lineNumber: 558,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21203,7 +21411,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 554,
+            lineNumber: 568,
             columnNumber: 16
           }
         });
@@ -21215,7 +21423,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 557,
+          lineNumber: 571,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21225,17 +21433,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 558,
+          lineNumber: 572,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 559,
-          columnNumber: 13
+          lineNumber: 573,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21247,7 +21455,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 560,
+          lineNumber: 574,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21256,18 +21464,20 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 568,
+          lineNumber: 582,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
         src: item.url,
+        alt: "upload-content",
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 570,
+          lineNumber: 584,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21283,7 +21493,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 581,
+            lineNumber: 595,
             columnNumber: 16
           }
         });
@@ -21294,7 +21504,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 584,
+          lineNumber: 598,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21304,17 +21514,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 585,
+          lineNumber: 599,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 586,
-          columnNumber: 13
+          lineNumber: 600,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21326,7 +21536,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 601,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21336,14 +21546,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 595,
+          lineNumber: 609,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 596,
+          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.createElement(Tooltip, {
@@ -21351,7 +21561,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 597,
+          lineNumber: 611,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -21366,7 +21576,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 598,
+          lineNumber: 612,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -21379,7 +21589,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 627,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21388,17 +21598,18 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 621,
+          lineNumber: 635,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 637,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21411,7 +21622,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 634,
+        lineNumber: 648,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21425,7 +21636,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 635,
+        lineNumber: 649,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21451,7 +21662,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 636,
+        lineNumber: 650,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21459,14 +21670,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 649,
+        lineNumber: 663,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 664,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21479,7 +21690,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 658,
+        lineNumber: 672,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21495,7 +21706,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 659,
+        lineNumber: 673,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -21507,21 +21718,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 670,
+        lineNumber: 684,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 671,
+        lineNumber: 685,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 687,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -21530,7 +21741,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 674,
+        lineNumber: 688,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -21538,7 +21749,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 675,
+        lineNumber: 689,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21548,14 +21759,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 677,
+        lineNumber: 691,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 684,
+        lineNumber: 698,
         columnNumber: 19
       }
     }, error));
@@ -21566,7 +21777,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 691,
+        lineNumber: 705,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21574,7 +21785,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 692,
+        lineNumber: 706,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21582,7 +21793,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 693,
+        lineNumber: 707,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21595,7 +21806,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 709,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21606,7 +21817,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 712,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21617,7 +21828,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 713,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21627,17 +21838,18 @@ const Upload = ({
         height: '100%'
       },
       src: previewImage,
+      alt: "cropper-content",
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 714,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 717,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21649,7 +21861,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 718,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21657,7 +21869,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 705,
+        lineNumber: 719,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21669,7 +21881,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 720,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21677,7 +21889,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 712,
+        lineNumber: 726,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21686,7 +21898,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 727,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21694,7 +21906,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 716,
+        lineNumber: 730,
         columnNumber: 15
       }
     }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21702,7 +21914,7 @@ const Upload = ({
 
   return /*#__PURE__*/React__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'
@@ -21710,7 +21922,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 727,
+      lineNumber: 741,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21719,7 +21931,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 730,
+      lineNumber: 744,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -27068,6 +27280,33 @@ function InputMapPicker(props) {
   } = props;
   const modalTrigger = React__default.useRef(null);
   const [inputValue, setInputValue] = useState(placeholder);
+  useEffect(() => {
+    const handleGeoCode = e => {
+      const defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
+      const {
+        lat,
+        lng
+      } = e;
+      request.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${mapsApiKey !== null && mapsApiKey !== void 0 ? mapsApiKey : defaultApiKey}`).end((err, res) => {
+        var _a;
+
+        if (err) {
+          console.error(err.message);
+        }
+
+        if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+          const {
+            results
+          } = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+          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;
@@ -27171,11 +27410,7 @@ function InputMapPicker(props) {
 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";
@@ -28679,4 +28914,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };