@majoo-ui/react 1.57.2 → 1.57.4

package/index.esm.js

@@ -16365,44 +16365,29 @@ const MobileCalendarBox = ({
         children: [allowReset ? jsx(Button$4, Object.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) : jsx(Button$4, Object.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), jsx(Button$4, Object.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'
@@ -17990,6 +17975,7 @@ const PageButton = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(Button$4, _extends({
+    type: "button",
     onClick: onClick,
     buttonType: !isActive ? 'ghost' : 'primary',
     css: {
@@ -18074,7 +18060,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 108,
+      lineNumber: 109,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -18083,7 +18069,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 114,
+      lineNumber: 115,
       columnNumber: 7
     }
   }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18094,7 +18080,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
@@ -18102,7 +18088,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 124,
+      lineNumber: 125,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -18113,7 +18099,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 127,
+      lineNumber: 128,
       columnNumber: 13
     }
   }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -18124,7 +18110,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 139,
+        lineNumber: 140,
         columnNumber: 13
       }
     }, page);
@@ -18136,7 +18122,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 150,
+      lineNumber: 151,
       columnNumber: 13
     }
   }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18147,7 +18133,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 159,
+      lineNumber: 160,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
@@ -18155,7 +18141,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 165,
+      lineNumber: 166,
       columnNumber: 17
     }
   })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18168,7 +18154,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 174,
+      lineNumber: 175,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -18181,7 +18167,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -18194,7 +18180,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 183,
+      lineNumber: 184,
       columnNumber: 13
     }
   }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default.createElement(InputNumber, {
@@ -18221,7 +18207,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 13
     }
   }))));
@@ -21125,13 +21111,13 @@ const TemplateAlertFunction = props => {
       lineNumber: 154,
       columnNumber: 11
     }
-  }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+  }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 155,
-      columnNumber: 11
+      lineNumber: 156,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: buttonClose,
@@ -21141,30 +21127,30 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 156,
-      columnNumber: 13
+      lineNumber: 157,
+      columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 22,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 157,
-      columnNumber: 15
+      lineNumber: 158,
+      columnNumber: 17
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "horizontal",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 161,
+      lineNumber: 163,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 162,
+      lineNumber: 164,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -21175,7 +21161,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 163,
+      lineNumber: 165,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -21185,7 +21171,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 167,
+      lineNumber: 169,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21193,7 +21179,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 168,
+      lineNumber: 170,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21207,7 +21193,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 169,
+      lineNumber: 171,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21215,7 +21201,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 171,
+      lineNumber: 173,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21227,7 +21213,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 172,
+      lineNumber: 174,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -21235,7 +21221,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 184,
+      lineNumber: 186,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21251,7 +21237,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 185,
+      lineNumber: 187,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21259,7 +21245,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 199,
+      lineNumber: 201,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21274,7 +21260,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 200,
+      lineNumber: 202,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21311,7 +21297,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 244,
+      lineNumber: 246,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({
@@ -21326,14 +21312,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 245,
+      lineNumber: 247,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 254,
+      lineNumber: 256,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -21341,16 +21327,16 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 255,
+      lineNumber: 257,
       columnNumber: 11
     }
-  }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
+  }, props.title), !props.hideCloseButton && /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 256,
-      columnNumber: 11
+      lineNumber: 259,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: props.onClose || props.onCancel,
@@ -21360,30 +21346,30 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 257,
-      columnNumber: 13
+      lineNumber: 260,
+      columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 22,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 258,
-      columnNumber: 15
+      lineNumber: 261,
+      columnNumber: 17
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "horizontal",
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 262,
+      lineNumber: 266,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 263,
+      lineNumber: 267,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -21394,7 +21380,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 264,
+      lineNumber: 268,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -21404,7 +21390,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 268,
+      lineNumber: 272,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -21412,7 +21398,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 269,
+      lineNumber: 273,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -21426,7 +21412,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 270,
+      lineNumber: 274,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21434,7 +21420,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 272,
+      lineNumber: 276,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21449,7 +21435,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 273,
+      lineNumber: 277,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -21457,7 +21443,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 286,
+      lineNumber: 290,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21473,7 +21459,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 287,
+      lineNumber: 291,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : t('label.cancel', 'Batal'))), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -21481,7 +21467,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 301,
+      lineNumber: 305,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
@@ -21496,7 +21482,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 302,
+      lineNumber: 306,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : t('label.continue', 'Ya, Lanjutkan'))))))));
@@ -21510,14 +21496,16 @@ TemplateAlertFunction.propTypes = {
   onConfirm: PropTypes.func,
   disabledButton: PropTypes.bool,
   actionButtonProps: PropTypes.object,
-  cancelButtonProps: PropTypes.object
+  cancelButtonProps: PropTypes.object,
+  hideCloseButton: PropTypes.bool
 };
 TemplateAlertFunction.defaultProps = {
   dialogType: 'primary',
   btnSize: 'md',
   onCancel: () => {},
   onConfirm: () => {},
-  disabledButton: false
+  disabledButton: false,
+  hideCloseButton: false
 };
 AlertDialog.propTypes = {
   title: PropTypes.string.isRequired,
@@ -21528,14 +21516,16 @@ AlertDialog.propTypes = {
   onConfirm: PropTypes.func,
   disabledButton: PropTypes.bool,
   actionButtonProps: PropTypes.object,
-  cancelButtonProps: PropTypes.object
+  cancelButtonProps: PropTypes.object,
+  hideCloseButton: PropTypes.bool
 };
 AlertDialog.defaultProps = {
   dialogType: 'primary',
   btnSize: 'md',
   onCancel: () => {},
   onConfirm: () => {},
-  disabledButton: false
+  disabledButton: false,
+  hideCloseButton: false
 };
 const AlertDialogRoot = ADialog.Root;
 const AlertDialogTrigger = ADialog.Trigger;
@@ -23826,7 +23816,8 @@ const Upload = ({
   maxSizeMB,
   imageCompression,
   hiddenToggleAspect,
-  hiddenPreview
+  hiddenPreview,
+  fullAspectCrop
 }) => {
   const {
     t
@@ -23842,8 +23833,9 @@ const Upload = ({
   const [error, setError] = useState(null);
   const [crop, setCrop] = useState(null);
   const [completedCrop, setCompletedCrop] = useState(null);
-  const [aspect, setAspect] = useState(ratio);
+  const [aspect, setAspect] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
+  const [cropperImgRatio, setCropperImgRatio] = useState(null);
   useEffect(() => {
     if (loading) {
       setIsLoading(true);
@@ -23972,15 +23964,6 @@ const Upload = ({
   }
   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];
@@ -24080,31 +24063,52 @@ const Upload = ({
       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));
+        };
       }
     }
   }
@@ -24146,7 +24150,8 @@ const Upload = ({
   function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
     return centerCrop(makeAspectCrop({
       unit: '%',
-      width: 90
+      width: fullAspectCrop ? 100 : 90,
+      height: fullAspectCrop ? 100 : 90
     }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
   }
   function toggleAspect() {
@@ -24157,8 +24162,8 @@ const Upload = ({
         width,
         height
       } = imgRef.current;
-      setAspect(ratio);
-      setCrop(centerAspectCrop(width, height, ratio));
+      setAspect(ratio || cropperImgRatio);
+      setCrop(centerAspectCrop(width, height, ratio || cropperImgRatio));
     }
   }
   function handleClose(file) {
@@ -24241,7 +24246,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 599,
+        lineNumber: 611,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -24251,7 +24256,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 600,
+        lineNumber: 612,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -24266,7 +24271,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 622,
             columnNumber: 16
           }
         });
@@ -24277,7 +24282,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 625,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24287,7 +24292,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 614,
+          lineNumber: 626,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24296,7 +24301,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 627,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -24309,7 +24314,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 617,
+          lineNumber: 629,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24318,7 +24323,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 625,
+          lineNumber: 637,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -24328,7 +24333,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 640,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24345,7 +24350,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 639,
+            lineNumber: 651,
             columnNumber: 16
           }
         });
@@ -24355,7 +24360,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 654,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -24365,7 +24370,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 643,
+          lineNumber: 655,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24374,7 +24379,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 656,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -24387,7 +24392,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 645,
+          lineNumber: 657,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24397,14 +24402,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 653,
+          lineNumber: 665,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -24412,7 +24417,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 655,
+          lineNumber: 667,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -24427,7 +24432,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 656,
+          lineNumber: 668,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -24440,7 +24445,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 672,
+          lineNumber: 684,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -24449,7 +24454,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 680,
+          lineNumber: 692,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -24457,7 +24462,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 695,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -24472,7 +24477,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 694,
+        lineNumber: 706,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24486,7 +24491,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 707,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -24512,7 +24517,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 696,
+        lineNumber: 708,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -24520,14 +24525,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 709,
+        lineNumber: 721,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 722,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -24539,7 +24544,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 718,
+        lineNumber: 730,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -24555,7 +24560,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 731,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -24567,21 +24572,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 730,
+        lineNumber: 742,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 731,
+        lineNumber: 743,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 733,
+        lineNumber: 745,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -24590,7 +24595,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 746,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -24598,7 +24603,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 747,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -24608,7 +24613,7 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
@@ -24618,17 +24623,18 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 744,
+        lineNumber: 756,
         columnNumber: 19
       }
     }, error));
   }
   function renderCropper() {
     return /*#__PURE__*/React__default.createElement(ModalDialog, {
+      onOpenChange: () => setCrop(null),
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 751,
+        lineNumber: 763,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -24636,7 +24642,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 752,
+        lineNumber: 764,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -24644,7 +24650,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 753,
+        lineNumber: 765,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -24657,7 +24663,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 755,
+        lineNumber: 767,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -24669,7 +24675,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 758,
+        lineNumber: 770,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -24680,7 +24686,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 771,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -24694,14 +24700,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 772,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 763,
+        lineNumber: 775,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24713,14 +24719,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 776,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 766,
+        lineNumber: 778,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -24728,7 +24734,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 780,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -24740,7 +24746,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 781,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24748,7 +24754,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 776,
+        lineNumber: 788,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -24757,7 +24763,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 777,
+        lineNumber: 789,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -24767,7 +24773,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 792,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -24784,7 +24790,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 789,
+      lineNumber: 801,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -24793,7 +24799,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 792,
+      lineNumber: 804,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -24807,7 +24813,6 @@ Upload.defaultProps = {
   tokenKey: 'Token',
   reqKey: 'file',
   resKey: 'url',
-  ratio: 16 / 9,
   disabled: false,
   maxSizeMB: 1,
   imageCompression: true
@@ -24955,7 +24960,11 @@ Upload.propTypes = {
   /**
    Hidden preview icon in upload.
    */
-  hiddenPreview: PropTypes.bool
+  hiddenPreview: PropTypes.bool,
+  /**
+   Auto full aspect ratio cropper.
+   */
+  fullAspectCrop: PropTypes.bool
 };
 Upload.displayName = 'Upload';
 
@@ -47706,6 +47715,7 @@ function LoadingBar(props) {
         setProgress(0);
       }, 1000);
     }
+    return () => setProgress(0);
   }, [show, intervalTime]);
   useEffect(() => {
     if (progress === 100) {
@@ -50364,16 +50374,14 @@ function BarChartComponent({
   };
   return jsxs(Box, {
     children: [title && jsx(Heading, Object.assign({
-      css: {
-        marginBottom: '$spacing-07'
-      },
       heading: "sectionTitle"
     }, {
       children: title
     }), void 0), jsx(Box, Object.assign({
       css: Object.assign({
         width: MIN_WIDTH,
-        height: MIN_HEIGHT
+        height: MIN_HEIGHT,
+        marginTop: '$spacing-07'
       }, css)
     }, {
       children: jsx(ResponsiveContainer, {
@@ -50462,8 +50470,8 @@ const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
     endAngle,
     fill
   } = props;
-  const IMG_WIDHT = 40;
-  const IMG_HEIGHT = 40;
+  const IMG_WIDHT = 75;
+  const IMG_HEIGHT = 75;
   return jsx(React__default.Fragment, {
     children: jsxs("g", {
       children: [jsx("clipPath", Object.assign({
@@ -50502,7 +50510,7 @@ const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
         cx: cx,
         cy: cy,
         innerRadius: innerRadius,
-        outerRadius: activeRef.current ? outerRadius + 10 : outerRadius,
+        outerRadius: activeRef.current ? outerRadius + 12 : outerRadius,
         startAngle: startAngle,
         endAngle: endAngle,
         fill: fill,
@@ -50516,7 +50524,7 @@ const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
 const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
   children: [subtitle && jsx(Flex$1, Object.assign({
     css: {
-      margin: '$spacing-06'
+      marginTop: '$spacing-06'
     },
     justify: "center"
   }, {
@@ -50526,6 +50534,9 @@ const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
       children: subtitle
     }), void 0)
   }), void 0), formattedData.length > 0 && jsx(Flex$1, Object.assign({
+    css: {
+      marginTop: '$spacing-06'
+    },
     direction: "column",
     gap: 5
   }, {
@@ -50583,9 +50594,9 @@ const PieChartComponent = ({
   legend,
   isMobile,
   tooltip,
-  showPercentage,
   title,
-  subtitle
+  subtitle,
+  label
 }) => {
   var _a;
   const emptyData = [{
@@ -50600,7 +50611,7 @@ const PieChartComponent = ({
   const activeRef = useRef();
   const formattedData = data.length > 0 ? dataChart : emptyData;
   const [activeIndex, setActiveIndex] = useState(0);
-  const CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? 350 : 180;
+  const CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? subtitle ? 420 : 380 : 230;
   const CONTAINER_WIDTH = isMobile ? 350 : 450;
   const CHART_HEIGHT = 150;
   const CHART_WIDTH = 450;
@@ -50644,34 +50655,8 @@ const PieChartComponent = ({
     }
     return null;
   };
-  const RADIAN = Math.PI / 180;
-  const renderCustomizedLabel = ({
-    cx,
-    cy,
-    midAngle,
-    innerRadius,
-    outerRadius,
-    percent,
-    index
-  }) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-    const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    const y = cy + radius * Math.sin(-midAngle * RADIAN);
-    return jsx("text", Object.assign({
-      x: x,
-      y: y,
-      fill: "white",
-      textAnchor: x > cx ? 'start' : 'end',
-      dominantBaseline: "central"
-    }, {
-      children: `${(percent * 100).toFixed(0)}%`
-    }), void 0);
-  };
   return jsxs(Box, {
     children: [title && jsx(Heading, Object.assign({
-      css: {
-        marginBottom: '$spacing-06'
-      },
       heading: "sectionTitle"
     }, {
       children: title
@@ -50679,7 +50664,8 @@ const PieChartComponent = ({
       css: Object.assign({
         position: 'relative',
         width: CONTAINER_WIDTH,
-        height: CONTAINER_HEIGHT
+        height: CONTAINER_HEIGHT,
+        marginTop: '$spacing-07'
       }, css)
     }, {
       children: jsx(ResponsiveContainer, Object.assign({
@@ -50690,27 +50676,36 @@ const PieChartComponent = ({
           width: CHART_WIDTH,
           height: CHART_HEIGHT
         }, {
-          children: [jsx(Pie, Object.assign({
+          children: [jsxs(Pie, Object.assign({
             activeIndex: activeIndex,
             activeShape: shape => renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef),
             data: formattedData,
             cx: "50%",
             cy: "50%",
-            innerRadius: 50,
-            outerRadius: 80,
+            innerRadius: 70,
+            outerRadius: 100,
             dataKey: "total",
             onMouseEnter: x => {
               setActiveIndex(formattedData.findIndex(y => y.name === x.name));
               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: 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(item => jsx(Cell, {
+            children: [formattedData.map(item => jsx(Cell, {
               fill: item.color || colors.chartGreen
-            }, item.name))
+            }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsx(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 && jsx(Tooltip$2, {
             wrapperStyle: {
               outline: 'none'
@@ -50735,6 +50730,8 @@ PieChartComponent.defaultProps = {
   avatarAcronym: '',
   validAvatar: false,
   legend: {
+    show: true,
+    showTotal: true,
     data: [],
     position: 'right'
   },