@majoo-ui/react 1.48.1 → 1.48.2

package/index.umd.js

@@ -5211,7 +5211,7 @@
   };
 
   const formLabelStyle = {
-    '& .form-label': {
+    '& > .form-label': {
       alignItems: 'start !important',
       '& > div': {
         width: 175
@@ -5232,7 +5232,10 @@
       }
     }
   };
-  const FormGroup = styled(Flex$1, {
+  const FormGroup = styled('div', {
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    rowGap: '$spacing-03',
     variants: {
       responsive: {
         input: Object.assign({
@@ -5287,7 +5290,7 @@
             '& *:nth-child(3)': {
               gridColumn: 'unset'
             },
-            '& .retina-error': {
+            '& > *:nth-child(n+4)': {
               gridColumn: '2/3'
             }
           }
@@ -5296,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";
@@ -8301,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',
@@ -12931,7 +12928,7 @@
             if (!onOpenAutoFocus) {
               e.preventDefault();
             } else {
-              onOpenAutoFocus();
+              onOpenAutoFocus(e);
             }
           }
         }, {
@@ -13434,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(() => {
@@ -13508,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',
@@ -13649,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)',
@@ -14578,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);
@@ -15700,6 +15698,8 @@
     }
   }
 
+  moment__default["default"].locale('id');
+
   var getInputPickerValue = function getInputPickerValue(type, date) {
     if (!date) return '';
 
@@ -15708,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'));
     }
   };
 
@@ -16296,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",
@@ -16337,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 = {
@@ -16398,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,
@@ -16445,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
@@ -16456,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) {
@@ -16505,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));
                     })
@@ -16806,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],
@@ -17068,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,
@@ -17083,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) {
@@ -17169,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
@@ -18294,7 +18336,7 @@
             if (!onOpenAutoFocus) {
               e.preventDefault();
             } else {
-              onOpenAutoFocus();
+              onOpenAutoFocus(e);
             }
           }
         }, {
@@ -18804,7 +18846,7 @@
         minHeight: 230
       }, isMobileCss, props.css),
       onOpenAutoFocus: e => {
-        if (!props.onOpenAutoFocus) e.preventDefault();
+        if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
       },
       __self: this,
       __source: {
@@ -21402,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() {
@@ -21691,7 +21747,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 543,
+          lineNumber: 557,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21701,7 +21757,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 544,
+          lineNumber: 558,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21717,7 +21773,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 554,
+              lineNumber: 568,
               columnNumber: 16
             }
           });
@@ -21729,7 +21785,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 557,
+            lineNumber: 571,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21739,17 +21795,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 558,
+            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: 559,
-            columnNumber: 13
+            lineNumber: 573,
+            columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
@@ -21761,7 +21817,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 560,
+            lineNumber: 574,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21770,18 +21826,20 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 568,
+            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: 570,
+            lineNumber: 584,
             columnNumber: 13
           }
-        })), renderButtonReplace(index));
+        })), !disabled && renderButtonReplace(index));
       });
     };
 
@@ -21797,7 +21855,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 581,
+              lineNumber: 595,
               columnNumber: 16
             }
           });
@@ -21808,7 +21866,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 584,
+            lineNumber: 598,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21818,17 +21876,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 585,
+            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: 586,
-            columnNumber: 13
+            lineNumber: 600,
+            columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
@@ -21840,7 +21898,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 587,
+            lineNumber: 601,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21850,14 +21908,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 595,
+            lineNumber: 609,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["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["default"].createElement(Tooltip, {
@@ -21865,7 +21923,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 597,
+            lineNumber: 611,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21880,7 +21938,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 598,
+            lineNumber: 612,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21893,7 +21951,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 627,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21902,17 +21960,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 621,
+            lineNumber: 635,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
+          disabled: disabled,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 637,
             columnNumber: 13
           }
-        })), renderButtonReplace(index));
+        })), !disabled && renderButtonReplace(index));
       });
     };
 
@@ -21925,7 +21984,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 648,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21939,7 +21998,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 635,
+          lineNumber: 649,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21965,7 +22024,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 636,
+          lineNumber: 650,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21973,14 +22032,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 663,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 664,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21993,7 +22052,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
+          lineNumber: 672,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -22009,7 +22068,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 659,
+          lineNumber: 673,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -22021,21 +22080,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 670,
+          lineNumber: 684,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 671,
+          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: 673,
+          lineNumber: 687,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -22044,7 +22103,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 674,
+          lineNumber: 688,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -22052,7 +22111,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 675,
+          lineNumber: 689,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22062,14 +22121,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 677,
+          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: 684,
+          lineNumber: 698,
           columnNumber: 19
         }
       }, error));
@@ -22080,7 +22139,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 705,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -22088,7 +22147,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 692,
+          lineNumber: 706,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22096,7 +22155,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 693,
+          lineNumber: 707,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -22109,7 +22168,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 709,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -22120,7 +22179,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 698,
+          lineNumber: 712,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -22131,7 +22190,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 713,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22145,14 +22204,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 700,
+          lineNumber: 714,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 717,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22164,7 +22223,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 718,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -22172,7 +22231,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 705,
+          lineNumber: 719,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -22184,7 +22243,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 706,
+          lineNumber: 720,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22192,7 +22251,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 712,
+          lineNumber: 726,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -22201,7 +22260,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 713,
+          lineNumber: 727,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -22209,7 +22268,7 @@
         __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'}`)))));
@@ -22217,7 +22276,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 ? 0 : 3,
+      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -22225,7 +22284,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 741,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -22234,7 +22293,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 730,
+        lineNumber: 744,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -27626,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;
 
@@ -27728,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";