@majoo-ui/react 1.57.2 → 1.57.4

package/index.umd.js

@@ -16612,44 +16612,29 @@
           children: [allowReset ? jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
             size: "md",
-            css: {
-              width: '160px',
-              fontWeight: 600,
-              display: 'flex',
-              flex: 1
-            },
             onClick: onReset,
             disabled: disabled || !selected || selected.length <= 1,
-            type: "button"
+            type: "button",
+            block: true
           }, {
             children: "Reset"
           }), void 0) : jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
             size: "md",
-            css: {
-              width: '160px',
-              fontWeight: 600,
-              display: 'flex',
-              flex: 1
-            },
             onClick: onCancel,
             disabled: disabled,
-            type: "button"
+            type: "button",
+            block: true
           }, {
             children: t('label.cancel', 'Batal', {
               ns: 'translation'
             })
           }), void 0), jsxRuntime.jsx(Button$4, __assign({
             size: "md",
-            css: {
-              width: '160px',
-              fontWeight: 600,
-              display: 'flex',
-              flex: 1
-            },
             onClick: onUpdate,
             disabled: disabled || !selected || selected.length <= 1,
-            type: "button"
+            type: "button",
+            block: true
           }, {
             children: t('label.process', 'Proses', {
               ns: 'translation'
@@ -18273,6 +18258,7 @@
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     return /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
+      type: "button",
       onClick: onClick,
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
@@ -18357,7 +18343,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 108,
+        lineNumber: 109,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -18366,7 +18352,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 114,
+        lineNumber: 115,
         columnNumber: 7
       }
     }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18377,7 +18363,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 118,
+        lineNumber: 119,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
@@ -18385,7 +18371,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 124,
+        lineNumber: 125,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -18396,7 +18382,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 127,
+        lineNumber: 128,
         columnNumber: 13
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -18407,7 +18393,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$k,
-          lineNumber: 139,
+          lineNumber: 140,
           columnNumber: 13
         }
       }, page);
@@ -18419,7 +18405,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 150,
+        lineNumber: 151,
         columnNumber: 13
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18430,7 +18416,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 159,
+        lineNumber: 160,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
@@ -18438,7 +18424,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 165,
+        lineNumber: 166,
         columnNumber: 17
       }
     })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18451,7 +18437,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 174,
+        lineNumber: 175,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18464,7 +18450,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 182,
+        lineNumber: 183,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -18477,7 +18463,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 183,
+        lineNumber: 184,
         columnNumber: 13
       }
     }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -18504,7 +18490,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 186,
+        lineNumber: 187,
         columnNumber: 13
       }
     }))));
@@ -21507,13 +21493,13 @@
         lineNumber: 154,
         columnNumber: 11
       }
-    }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+    }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 155,
-        columnNumber: 11
+        lineNumber: 156,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
       onClick: buttonClose,
@@ -21523,30 +21509,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 156,
-        columnNumber: 13
+        lineNumber: 157,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 22,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 157,
-        columnNumber: 15
+        lineNumber: 158,
+        columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "horizontal",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 161,
+        lineNumber: 163,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 162,
+        lineNumber: 164,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -21557,7 +21543,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 163,
+        lineNumber: 165,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21567,7 +21553,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 167,
+        lineNumber: 169,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21575,7 +21561,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 168,
+        lineNumber: 170,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -21589,7 +21575,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 169,
+        lineNumber: 171,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21597,7 +21583,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 171,
+        lineNumber: 173,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21609,7 +21595,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 172,
+        lineNumber: 174,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -21617,7 +21603,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 184,
+        lineNumber: 186,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21633,7 +21619,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 185,
+        lineNumber: 187,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21641,7 +21627,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 199,
+        lineNumber: 201,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21656,7 +21642,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 200,
+        lineNumber: 202,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21693,7 +21679,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 244,
+        lineNumber: 246,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({
@@ -21708,14 +21694,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 245,
+        lineNumber: 247,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 254,
+        lineNumber: 256,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -21723,16 +21709,16 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 255,
+        lineNumber: 257,
         columnNumber: 11
       }
-    }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
+    }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 256,
-        columnNumber: 11
+        lineNumber: 259,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
       onClick: props.onClose || props.onCancel,
@@ -21742,30 +21728,30 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 257,
-        columnNumber: 13
+        lineNumber: 260,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 22,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 258,
-        columnNumber: 15
+        lineNumber: 261,
+        columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "horizontal",
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 262,
+        lineNumber: 266,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 263,
+        lineNumber: 267,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -21776,7 +21762,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 264,
+        lineNumber: 268,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21786,7 +21772,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 268,
+        lineNumber: 272,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -21794,7 +21780,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 269,
+        lineNumber: 273,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -21808,7 +21794,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 270,
+        lineNumber: 274,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21816,7 +21802,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 272,
+        lineNumber: 276,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21831,7 +21817,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 273,
+        lineNumber: 277,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -21839,7 +21825,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 286,
+        lineNumber: 290,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21855,7 +21841,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 287,
+        lineNumber: 291,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -21863,7 +21849,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 301,
+        lineNumber: 305,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
@@ -21878,7 +21864,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 302,
+        lineNumber: 306,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21892,14 +21878,16 @@
     onConfirm: PropTypes__default["default"].func,
     disabledButton: PropTypes__default["default"].bool,
     actionButtonProps: PropTypes__default["default"].object,
-    cancelButtonProps: PropTypes__default["default"].object
+    cancelButtonProps: PropTypes__default["default"].object,
+    hideCloseButton: PropTypes__default["default"].bool
   };
   TemplateAlertFunction.defaultProps = {
     dialogType: 'primary',
     btnSize: 'md',
     onCancel: () => {},
     onConfirm: () => {},
-    disabledButton: false
+    disabledButton: false,
+    hideCloseButton: false
   };
   AlertDialog.propTypes = {
     title: PropTypes__default["default"].string.isRequired,
@@ -21910,14 +21898,16 @@
     onConfirm: PropTypes__default["default"].func,
     disabledButton: PropTypes__default["default"].bool,
     actionButtonProps: PropTypes__default["default"].object,
-    cancelButtonProps: PropTypes__default["default"].object
+    cancelButtonProps: PropTypes__default["default"].object,
+    hideCloseButton: PropTypes__default["default"].bool
   };
   AlertDialog.defaultProps = {
     dialogType: 'primary',
     btnSize: 'md',
     onCancel: () => {},
     onConfirm: () => {},
-    disabledButton: false
+    disabledButton: false,
+    hideCloseButton: false
   };
   const AlertDialogRoot = ADialog__namespace.Root;
   const AlertDialogTrigger = ADialog__namespace.Trigger;
@@ -24231,7 +24221,8 @@
     maxSizeMB,
     imageCompression,
     hiddenToggleAspect,
-    hiddenPreview
+    hiddenPreview,
+    fullAspectCrop
   }) => {
     const {
       t
@@ -24247,8 +24238,9 @@
     const [error, setError] = React.useState(null);
     const [crop, setCrop] = React.useState(null);
     const [completedCrop, setCompletedCrop] = React.useState(null);
-    const [aspect, setAspect] = React.useState(ratio);
+    const [aspect, setAspect] = React.useState(1);
     const [isLoading, setIsLoading] = React.useState(false);
+    const [cropperImgRatio, setCropperImgRatio] = React.useState(null);
     React.useEffect(() => {
       if (loading) {
         setIsLoading(true);
@@ -24377,15 +24369,6 @@
     }
     function toggleModal() {
       modalTrigger.current.click();
-      setTimeout(() => {
-        if (imgRef.current) {
-          const {
-            width,
-            height
-          } = imgRef.current;
-          setCrop(centerAspectCrop(width, height, ratio));
-        }
-      }, 300);
     }
     function handleUpload(files) {
       const arrFile = [...fileList];
@@ -24485,31 +24468,52 @@
         if (isFile || !showCropper) {
           handleUpload(files);
         } else {
-          if (onBeforeCrop) {
-            var _files$, _files$2;
-            // program to get the dimensions of an image
-            const img = document.createElement('img');
-            img.src = URL.createObjectURL(files[0]);
-            img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
-            img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
-            img.onload = () => {
+          var _files$, _files$2;
+          // program to get the dimensions of an image
+          const img = document.createElement('img');
+          img.src = URL.createObjectURL(files[0]);
+          img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
+          img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
+          img.onload = () => {
+            const imgRatio = img.width / img.height;
+            setAspect(ratio || imgRatio);
+            setCropperImgRatio(imgRatio);
+            if (onBeforeCrop) {
               var _onBeforeCrop, _onBeforeCrop$then;
               onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
                 setError(null);
                 toggleModal();
+                setTimeout(() => {
+                  if (imgRef.current) {
+                    const {
+                      width,
+                      height
+                    } = imgRef.current;
+                    setCrop(centerAspectCrop(width, height, ratio || imgRatio));
+                  }
+                }, 300);
                 setFileState(files[0]);
                 setPreviewImage(URL.createObjectURL(files[0]));
               })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
-            };
-            img.onerror = error => {
-              var _onBeforeCrop2, _onBeforeCrop2$then;
-              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
-            };
-          } else {
-            toggleModal();
-            setFileState(files[0]);
-            setPreviewImage(URL.createObjectURL(files[0]));
-          }
+            } else {
+              toggleModal();
+              setTimeout(() => {
+                if (imgRef.current) {
+                  const {
+                    width,
+                    height
+                  } = imgRef.current;
+                  setCrop(centerAspectCrop(width, height, ratio || imgRatio));
+                }
+              }, 300);
+              setFileState(files[0]);
+              setPreviewImage(URL.createObjectURL(files[0]));
+            }
+          };
+          img.onerror = error => {
+            var _onBeforeCrop2, _onBeforeCrop2$then;
+            onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+          };
         }
       }
     }
@@ -24551,7 +24555,8 @@
     function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
       return ReactCrop.centerCrop(ReactCrop.makeAspectCrop({
         unit: '%',
-        width: 90
+        width: fullAspectCrop ? 100 : 90,
+        height: fullAspectCrop ? 100 : 90
       }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
     }
     function toggleAspect() {
@@ -24562,8 +24567,8 @@
           width,
           height
         } = imgRef.current;
-        setAspect(ratio);
-        setCrop(centerAspectCrop(width, height, ratio));
+        setAspect(ratio || cropperImgRatio);
+        setCrop(centerAspectCrop(width, height, ratio || cropperImgRatio));
       }
     }
     function handleClose(file) {
@@ -24646,7 +24651,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 611,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -24656,7 +24661,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 600,
+          lineNumber: 612,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -24671,7 +24676,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 610,
+              lineNumber: 622,
               columnNumber: 16
             }
           });
@@ -24682,7 +24687,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 625,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24692,7 +24697,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 614,
+            lineNumber: 626,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24701,7 +24706,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 615,
+            lineNumber: 627,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24714,7 +24719,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 617,
+            lineNumber: 629,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24723,7 +24728,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 625,
+            lineNumber: 637,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24733,7 +24738,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 640,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24750,7 +24755,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 639,
+              lineNumber: 651,
               columnNumber: 16
             }
           });
@@ -24760,7 +24765,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 642,
+            lineNumber: 654,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24770,7 +24775,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 643,
+            lineNumber: 655,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24779,7 +24784,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 644,
+            lineNumber: 656,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24792,7 +24797,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 645,
+            lineNumber: 657,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24802,14 +24807,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 653,
+            lineNumber: 665,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 654,
+            lineNumber: 666,
             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$1, {
@@ -24817,7 +24822,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 667,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24832,7 +24837,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 656,
+            lineNumber: 668,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24845,7 +24850,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 672,
+            lineNumber: 684,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24854,7 +24859,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 680,
+            lineNumber: 692,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -24862,7 +24867,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 695,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24877,7 +24882,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 694,
+          lineNumber: 706,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24891,7 +24896,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 707,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -24917,7 +24922,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 708,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24925,14 +24930,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 709,
+          lineNumber: 721,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 722,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -24944,7 +24949,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 730,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -24960,7 +24965,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 731,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -24972,21 +24977,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 742,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 743,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 745,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -24995,7 +25000,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 746,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -25003,7 +25008,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 747,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -25013,7 +25018,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 737,
+          lineNumber: 749,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -25023,17 +25028,18 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 756,
           columnNumber: 19
         }
       }, error));
     }
     function renderCropper() {
       return /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
+        onOpenChange: () => setCrop(null),
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 751,
+          lineNumber: 763,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -25041,7 +25047,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 752,
+          lineNumber: 764,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25049,7 +25055,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 765,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -25062,7 +25068,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 755,
+          lineNumber: 767,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -25074,7 +25080,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 758,
+          lineNumber: 770,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -25085,7 +25091,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 759,
+          lineNumber: 771,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -25099,14 +25105,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 772,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 763,
+          lineNumber: 775,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25118,14 +25124,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 776,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 766,
+          lineNumber: 778,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -25133,7 +25139,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 780,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -25145,7 +25151,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 781,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25153,7 +25159,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 776,
+          lineNumber: 788,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -25162,7 +25168,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 777,
+          lineNumber: 789,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -25172,7 +25178,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 780,
+          lineNumber: 792,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -25189,7 +25195,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 789,
+        lineNumber: 801,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -25198,7 +25204,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 792,
+        lineNumber: 804,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -25212,7 +25218,6 @@
     tokenKey: 'Token',
     reqKey: 'file',
     resKey: 'url',
-    ratio: 16 / 9,
     disabled: false,
     maxSizeMB: 1,
     imageCompression: true
@@ -25360,7 +25365,11 @@
     /**
      Hidden preview icon in upload.
      */
-    hiddenPreview: PropTypes__default["default"].bool
+    hiddenPreview: PropTypes__default["default"].bool,
+    /**
+     Auto full aspect ratio cropper.
+     */
+    fullAspectCrop: PropTypes__default["default"].bool
   };
   Upload.displayName = 'Upload';
 
@@ -48126,6 +48135,9 @@
           setProgress(0);
         }, 1000);
       }
+      return function () {
+        return setProgress(0);
+      };
     }, [show, intervalTime]);
     React.useEffect(function () {
       if (progress === 100) {
@@ -50885,16 +50897,14 @@
     };
     return jsxRuntime.jsxs(Box, {
       children: [title && jsxRuntime.jsx(Heading, __assign({
-        css: {
-          marginBottom: '$spacing-07'
-        },
         heading: "sectionTitle"
       }, {
         children: title
       }), void 0), jsxRuntime.jsx(Box, __assign({
         css: __assign({
           width: MIN_WIDTH,
-          height: MIN_HEIGHT
+          height: MIN_HEIGHT,
+          marginTop: '$spacing-07'
         }, css)
       }, {
         children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
@@ -50981,8 +50991,8 @@
       startAngle = props.startAngle,
       endAngle = props.endAngle,
       fill = props.fill;
-    var IMG_WIDHT = 40;
-    var IMG_HEIGHT = 40;
+    var IMG_WIDHT = 75;
+    var IMG_HEIGHT = 75;
     return jsxRuntime.jsx(React__default["default"].Fragment, {
       children: jsxRuntime.jsxs("g", {
         children: [jsxRuntime.jsx("clipPath", __assign({
@@ -51021,7 +51031,7 @@
           cx: cx,
           cy: cy,
           innerRadius: innerRadius,
-          outerRadius: activeRef.current ? outerRadius + 10 : outerRadius,
+          outerRadius: activeRef.current ? outerRadius + 12 : outerRadius,
           startAngle: startAngle,
           endAngle: endAngle,
           fill: fill,
@@ -51036,7 +51046,7 @@
     return jsxRuntime.jsxs(Box, {
       children: [subtitle && jsxRuntime.jsx(Flex$1, __assign({
         css: {
-          margin: '$spacing-06'
+          marginTop: '$spacing-06'
         },
         justify: "center"
       }, {
@@ -51046,6 +51056,9 @@
           children: subtitle
         }), void 0)
       }), void 0), formattedData.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
+        css: {
+          marginTop: '$spacing-06'
+        },
         direction: "column",
         gap: 5
       }, {
@@ -51105,9 +51118,9 @@
       legend = _a.legend,
       isMobile = _a.isMobile,
       tooltip = _a.tooltip,
-      showPercentage = _a.showPercentage,
       title = _a.title,
-      subtitle = _a.subtitle;
+      subtitle = _a.subtitle,
+      label = _a.label;
     var emptyData = [{
       id: '0',
       name: '',
@@ -51124,7 +51137,7 @@
     var _c = React.useState(0),
       activeIndex = _c[0],
       setActiveIndex = _c[1];
-    var CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? 350 : 180;
+    var CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? subtitle ? 420 : 380 : 230;
     var CONTAINER_WIDTH = isMobile ? 350 : 450;
     var CHART_HEIGHT = 150;
     var CHART_WIDTH = 450;
@@ -51168,33 +51181,8 @@
       }
       return null;
     };
-    var RADIAN = Math.PI / 180;
-    var renderCustomizedLabel = function renderCustomizedLabel(_a) {
-      var cx = _a.cx,
-        cy = _a.cy,
-        midAngle = _a.midAngle,
-        innerRadius = _a.innerRadius,
-        outerRadius = _a.outerRadius,
-        percent = _a.percent;
-        _a.index;
-      var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-      var x = cx + radius * Math.cos(-midAngle * RADIAN);
-      var y = cy + radius * Math.sin(-midAngle * RADIAN);
-      return jsxRuntime.jsx("text", __assign({
-        x: x,
-        y: y,
-        fill: "white",
-        textAnchor: x > cx ? 'start' : 'end',
-        dominantBaseline: "central"
-      }, {
-        children: "".concat((percent * 100).toFixed(0), "%")
-      }), void 0);
-    };
     return jsxRuntime.jsxs(Box, {
       children: [title && jsxRuntime.jsx(Heading, __assign({
-        css: {
-          marginBottom: '$spacing-06'
-        },
         heading: "sectionTitle"
       }, {
         children: title
@@ -51202,7 +51190,8 @@
         css: __assign({
           position: 'relative',
           width: CONTAINER_WIDTH,
-          height: CONTAINER_HEIGHT
+          height: CONTAINER_HEIGHT,
+          marginTop: '$spacing-07'
         }, css)
       }, {
         children: jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({
@@ -51213,7 +51202,7 @@
             width: CHART_WIDTH,
             height: CHART_HEIGHT
           }, {
-            children: [jsxRuntime.jsx(recharts.Pie, __assign({
+            children: [jsxRuntime.jsxs(recharts.Pie, __assign({
               activeIndex: activeIndex,
               activeShape: function (shape) {
                 return renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef);
@@ -51221,8 +51210,8 @@
               data: formattedData,
               cx: "50%",
               cy: "50%",
-              innerRadius: 50,
-              outerRadius: 80,
+              innerRadius: 70,
+              outerRadius: 100,
               dataKey: "total",
               onMouseEnter: function (x) {
                 setActiveIndex(formattedData.findIndex(function (y) {
@@ -51231,15 +51220,24 @@
                 activeRef.current = true;
               },
               blendStroke: true
-            }, showPercentage && {
-              label: renderCustomizedLabel,
+            }, (label === null || label === void 0 ? void 0 : label.show) && (label === null || label === void 0 ? void 0 : label.render) && {
+              label: function (e) {
+                var _a;
+                return (_a = label === null || label === void 0 ? void 0 : label.render) === null || _a === void 0 ? void 0 : _a.call(label, e);
+              },
               labelLine: false
             }, {
-              children: formattedData.map(function (item) {
+              children: [formattedData.map(function (item) {
                 return jsxRuntime.jsx(recharts.Cell, {
                   fill: item.color || colors.chartGreen
                 }, item.name);
-              })
+              }), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsxRuntime.jsx(recharts.LabelList, {
+                stroke: "0",
+                fill: colors.textWhite,
+                dataKey: (label === null || label === void 0 ? void 0 : label.dataKey) || 'total',
+                formatter: label === null || label === void 0 ? void 0 : label.formatter,
+                position: label === null || label === void 0 ? void 0 : label.position
+              }, void 0)]
             }), void 0), data.length > 0 && jsxRuntime.jsx(recharts.Tooltip, {
               wrapperStyle: {
                 outline: 'none'
@@ -51264,6 +51262,8 @@
     avatarAcronym: '',
     validAvatar: false,
     legend: {
+      show: true,
+      showTotal: true,
       data: [],
       position: 'right'
     },