@majoo-ui/react 1.47.0 → 1.48.2

package/index.esm.js

@@ -18,6 +18,7 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
+import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -1189,7 +1190,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-const colors = foundations.colors;
+const colors$1 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -3140,7 +3141,8 @@ const Toast = _ref => {
       e.stopPropagation();
       close();
     },
-    center: true,
+    align: "center",
+    justify: "center",
     hasTitle: !!title,
     __self: undefined,
     __source: {
@@ -3149,12 +3151,12 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 263,
+      lineNumber: 264,
       columnNumber: 19
     }
   }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React.createElement(Link, {
@@ -3169,7 +3171,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 267,
+      lineNumber: 268,
       columnNumber: 17
     }
   }, captionOfAction)))));
@@ -3565,7 +3567,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
-  color: colors.iconSecondary,
+  color: colors$1.iconSecondary,
   size: "16px",
   __self: undefined,
   __source: {
@@ -3643,7 +3645,7 @@ const SingleTagBanner = props => {
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -5126,7 +5128,7 @@ Progress$1.defaultProps = {
 };
 
 const formLabelStyle = {
-  '& .form-label': {
+  '& > .form-label': {
     alignItems: 'start !important',
     '& > div': {
       width: 175
@@ -5147,7 +5149,10 @@ const formLabelStyle = {
     }
   }
 };
-const FormGroup = styled(Flex$1, {
+const FormGroup = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  rowGap: '$spacing-03',
   variants: {
     responsive: {
       input: Object.assign({
@@ -5202,7 +5207,7 @@ const FormGroup = styled(Flex$1, {
           '& *:nth-child(3)': {
             gridColumn: 'unset'
           },
-          '& .retina-error': {
+          '& > *:nth-child(n+4)': {
             gridColumn: '2/3'
           }
         }
@@ -5211,14 +5216,6 @@ const FormGroup = styled(Flex$1, {
   }
 });
 FormGroup.displayName = 'FormGroup';
-FormGroup.propTypes = {
-  gap: PropTypes.number,
-  direction: PropTypes.string
-};
-FormGroup.defaultProps = {
-  gap: 3,
-  direction: 'column'
-};
 
 const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
 var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
@@ -7246,7 +7243,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 14,
-    color: colors.iconSecondary,
+    color: colors$1.iconSecondary,
     style: {
       verticalAlign: 'middle'
     },
@@ -7275,7 +7272,7 @@ Tag.defaultProps = {
   readOnly: false
 };
 
-const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern"];
+const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText"];
 var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
 const Wrapper$2 = styled('div', {
   margin: 0,
@@ -7392,7 +7389,8 @@ function TagsInput(_ref) {
     readOnly,
     max,
     maxChar,
-    pattern
+    pattern,
+    helperText
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
@@ -7446,7 +7444,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 163,
+      lineNumber: 164,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputTagsComponent, _extends({
@@ -7459,7 +7457,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 164,
+      lineNumber: 165,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Input$7, {
@@ -7474,7 +7472,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 172,
+      lineNumber: 173,
       columnNumber: 9
     }
   })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7482,7 +7480,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 11
     }
   }, pattern.errorMessage) : /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7490,14 +7488,28 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 188,
+      lineNumber: 189,
       columnNumber: 11
     }
-  }, "Invalid Input")), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
+  }, "Invalid Input")), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
+    shortContentRegular: true,
+    css: {
+      paddingTop: 8,
+      paddingBottom: 3,
+      fontSize: 12,
+      color: '$textSecondary'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 191,
+      lineNumber: 193,
+      columnNumber: 9
+    }
+  }, helperText), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$A,
+      lineNumber: 197,
       columnNumber: 7
     }
   }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
@@ -7510,7 +7522,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 193,
+      lineNumber: 199,
       columnNumber: 11
     }
   }, tag))));
@@ -7526,6 +7538,7 @@ TagsInput.propTypes = {
   isInvalid: PropTypes.bool,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
+  helperText: PropTypes.string,
   pattern: PropTypes.shape({
     regex: PropTypes.string.isRequired,
     errorMessage: PropTypes.string
@@ -8200,11 +8213,13 @@ const SelectOption = styled('div', {
 });
 const SelectItem = styled('div', {
   overflow: 'hidden',
-  borderBottom: '1px solid $bgBorder',
   padding: '$spacing-05 0',
   backgroundColor: 'rgb(235, 245, 255)',
   cursor: 'pointer',
-  lineHeight: '20px'
+  lineHeight: '20px',
+  '&:not(:last-child)': {
+    borderBottom: '1px solid $bgBorder'
+  }
 });
 const StyledDiv$2 = styled('div', {
   color: '$textDisable',
@@ -8561,7 +8576,7 @@ function InputSelect(_a) {
               }, {
                 children: jsx(CircleInfoOutline, {
                   size: "16px",
-                  color: colors.iconDisable,
+                  color: colors$1.iconDisable,
                   style: {
                     verticalAlign: 'text-bottom'
                   }
@@ -8931,7 +8946,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "css"];
+const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "helperText", "css"];
 var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -9151,6 +9166,7 @@ function InputSelectCheck(_ref) {
     isInvalid,
     sortBy,
     showSelectedTag,
+    helperText,
     css
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -9348,7 +9364,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 401,
+      lineNumber: 402,
       columnNumber: 5
     }
   }), /*#__PURE__*/React.createElement(Select, {
@@ -9358,7 +9374,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 402,
+      lineNumber: 403,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9369,7 +9385,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 403,
+      lineNumber: 404,
       columnNumber: 9
     }
   }), search ? /*#__PURE__*/React.createElement(Input$5, _extends({}, getInputProps({
@@ -9380,7 +9396,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 408,
+      lineNumber: 409,
       columnNumber: 13
     }
   })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9392,7 +9408,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 414,
+      lineNumber: 415,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9403,23 +9419,36 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 424,
+      lineNumber: 425,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(IconCaretDown, {
-    color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary,
+    color: disabled || readOnly ? colors$1.iconDisable : colors$1.iconPrimary,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 429,
+      lineNumber: 430,
       columnNumber: 11
     }
-  }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
+  }))), helperText && /*#__PURE__*/React.createElement(Paragraph, {
+    shortContentRegular: true,
+    css: {
+      paddingTop: 8,
+      fontSize: 12,
+      color: '$textSecondary'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$u,
+      lineNumber: 434,
+      columnNumber: 9
+    }
+  }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 433,
+      lineNumber: 439,
       columnNumber: 9
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
@@ -9443,7 +9472,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 435,
+      lineNumber: 441,
       columnNumber: 13
     }
   }), selectedItem.name))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
@@ -9455,14 +9484,14 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 456,
+      lineNumber: 462,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 461,
+      lineNumber: 467,
       columnNumber: 11
     }
   }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper$1, _extends({
@@ -9480,7 +9509,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 464,
+      lineNumber: 470,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(IconWrapper, {
@@ -9493,23 +9522,23 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 477,
+      lineNumber: 483,
       columnNumber: 19
     }
   }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
-    color: colors.iconDisable,
+    color: colors$1.iconDisable,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 486,
+      lineNumber: 492,
       columnNumber: 23
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
-    color: colors.iconGreen,
+    color: colors$1.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 490,
+      lineNumber: 496,
       columnNumber: 25
     }
   })), /*#__PURE__*/React.createElement(Item$2, {
@@ -9519,7 +9548,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 494,
+      lineNumber: 500,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, _extends({
@@ -9530,14 +9559,14 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 499,
+      lineNumber: 505,
       columnNumber: 11
     }
   }), /*#__PURE__*/React.createElement(StyledDiv$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 500,
+      lineNumber: 506,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -9547,19 +9576,19 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 501,
+      lineNumber: 507,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
     size: "16px",
-    color: colors.iconDisable,
+    color: colors$1.iconDisable,
     style: {
       verticalAlign: 'text-bottom'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 502,
+      lineNumber: 508,
       columnNumber: 17
     }
   })), textEmptyItem))));
@@ -9579,7 +9608,8 @@ InputSelectCheck.propTypes = {
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   textEmptyItem: PropTypes.string,
-  css: PropTypes.object
+  css: PropTypes.object,
+  helperText: PropTypes.string
 };
 InputSelectCheck.defaultProps = {
   placeholder: 'Select Item',
@@ -9622,7 +9652,8 @@ InputSelectTag.propTypes = {
   search: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  textEmptyItem: PropTypes.string
+  textEmptyItem: PropTypes.string,
+  helperText: PropTypes.string
 };
 InputSelectTag.defaultProps = {
   placeholder: 'Select Item',
@@ -9856,7 +9887,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors.iconGreen,
+    color: colors$1.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$s,
@@ -10134,6 +10165,71 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
+const {
+  colors
+} = foundations;
+function InputOTP(props) {
+  const {
+    isError
+  } = props;
+  const inputStyles = {
+    width: 48,
+    height: 48,
+    border: `1px solid ${isError ? colors.textRed : colors.gray300}`,
+    borderRadius: 4,
+    fontWeight: 600,
+    fontSize: 24,
+    textAlign: 'center',
+    color: colors.textPrimary
+  };
+  return jsx(OTPInput, Object.assign({
+    inputStyles: inputStyles
+  }, props), void 0);
+}
+InputOTP.defaultProps = {
+  OTPLength: 4,
+  value: '',
+  disabled: false,
+  autoFocus: false,
+  otpType: 'any',
+  secure: false
+};
+function ResendOTP(props) {
+  function renderButton() {
+    return;
+  }
+
+  function renderTime(time) {
+    function handleClick() {
+      var _a;
+
+      if (time < 1) {
+        (_a = props === null || props === void 0 ? void 0 : props.onResendClick) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+
+    return jsx(Paragraph, Object.assign({
+      color: "green",
+      css: {
+        cursor: time > 0 ? 'not-allowed' : 'pointer',
+        userSelect: 'none'
+      },
+      onClick: handleClick
+    }, {
+      children: `Kirim Ulang ${time > 0 ? `(${time}s)` : ''}`
+    }), void 0);
+  }
+
+  return jsx(ResendOTP$1, Object.assign({
+    renderButton: renderButton,
+    renderTime: renderTime
+  }, props), void 0);
+}
+ResendOTP.defaultProps = {
+  maxTime: 60,
+  timeInterval: 1000
+};
+
 const _excluded$b = ["children"];
 var _jsxFileName$r = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
 const {
@@ -12600,23 +12696,23 @@ const findNodeChild$1 = (array, displayName) => {
   return result;
 };
 /**
-* ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
-* https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-* @param size - default fullsize
-* @param layer - z-index default 1400
-* @param isMobile - force mobile/desktop view, default is responsive
-* @param onOpenAutoFocus - set default open behaviour
-*
-* @example
-* // Uncontrolled Example
-*  <ModalDialog>
-*    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
-*    <ModalDialogTitle>Title</ModalDialogTitle>
-*    <ModalDialogContent>Content</ModalDialogContent>
-*    <ModalDialogFooter>Footer</ModalDialogFooter>
-*  </ModalDialog>
-* @component
-*/
+ * ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
+ * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+ * @param size - default fullsize
+ * @param layer - z-index default 1400
+ * @param isMobile - force mobile/desktop view, default is responsive
+ * @param onOpenAutoFocus - set default open behaviour
+ *
+ * @example
+ * // Uncontrolled Example
+ *  <ModalDialog>
+ *    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
+ *    <ModalDialogTitle>Title</ModalDialogTitle>
+ *    <ModalDialogContent>Content</ModalDialogContent>
+ *    <ModalDialogFooter>Footer</ModalDialogFooter>
+ *  </ModalDialog>
+ * @component
+ */
 
 
 const ModalDialog = props => {
@@ -12637,7 +12733,7 @@ const ModalDialog = props => {
   const modalDialogContent = findNodeChild$1(childArray, 'ModalDialogContent');
   const modalDialogTrigger = findNodeChild$1(childArray, 'ModalDialogTrigger');
   const ref = useCallback(node => {
-    const appElement = document.getElementById("app");
+    const appElement = document.getElementById('app');
 
     if (appElement) {
       if (node !== null) {
@@ -12662,7 +12758,13 @@ const ModalDialog = props => {
         }),
         ref: ref,
         isMobile: isMobile,
-        onOpenAutoFocus: onOpenAutoFocus
+        onOpenAutoFocus: e => {
+          if (!onOpenAutoFocus) {
+            e.preventDefault();
+          } else {
+            onOpenAutoFocus(e);
+          }
+        }
       }, {
         children: jsxs(Box, Object.assign({
           css: {
@@ -12702,7 +12804,7 @@ const ModalDialog = props => {
                   as: "p",
                   heading: "pageTitle"
                 }, modalDialogTitle.props), void 0)
-              }), void 0), jsx(DialogClose, Object.assign({
+              }), void 0), !props.hideCloseButton && jsx(DialogClose, Object.assign({
                 asChild: true
               }, {
                 children: jsx(Box, Object.assign({
@@ -13164,27 +13266,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.Content;
 
-const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
-const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
-const yearRangesList = rangeStart => {
-  let start = rangeStart;
-  let end = start + 9;
-  return new Array(10).fill(undefined).map(_ => {
-    const yearRange = {
-      start,
-      end
-    };
-    start = end + 1;
-    end = end + 10;
-    return yearRange;
-  });
-};
-const getCalendarStartYear = year => year - year % 10 + 1;
-const getCalendarStartYearRange = year => year - year % 100 + 1;
-const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
-  dateStyle
-}).format(date);
-
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
@@ -13234,6 +13315,27 @@ const AdvancedOption = ({
   }), void 0);
 };
 
+const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
+const yearRangesList = rangeStart => {
+  let start = rangeStart;
+  let end = start + 9;
+  return new Array(10).fill(undefined).map(_ => {
+    const yearRange = {
+      start,
+      end
+    };
+    start = end + 1;
+    end = end + 10;
+    return yearRange;
+  });
+};
+const getCalendarStartYear = year => year - year % 10 + 1;
+const getCalendarStartYearRange = year => year - year % 100 + 1;
+const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
+  dateStyle
+}).format(date);
+
 const DateNumber = styled('div', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -13290,6 +13392,11 @@ const DateNumber = styled('div', {
         height: '32px',
         width: '45.5px'
       }
+    },
+    isSunday: {
+      true: {
+        color: '$textDisable'
+      }
     }
   },
   compoundVariants: [{
@@ -13371,7 +13478,7 @@ const WeekdayBox$1 = styled(Box, {
 });
 const CalendarsContainer$1 = styled(Box, {
   width: '100%',
-  padding: '$spacing-01',
+  padding: '$spacing-03',
   display: 'inline-flex',
   borderRadius: '$lg',
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
@@ -13676,7 +13783,8 @@ const CalendarBox = ({
         });
         dateProps = dateProps['disabled'] ? {} : dateProps;
         return jsx(DateNumber, Object.assign({}, dateProps, {
-          variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected)
+          variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
+          isSunday: date.getDay() === 0
         }, {
           children: date.getDate()
         }), key);
@@ -13769,7 +13877,8 @@ const CalendarBox = ({
         paragraph: "shortContentBold",
         css: {
           color: '$textSecondary',
-          fontSize: '$label'
+          fontSize: '$label',
+          textAlign: 'center !important'
         }
       }, {
         children: weekday
@@ -14241,7 +14350,8 @@ const MobileCalendarBox = ({
         return jsx(DateNumber, Object.assign({
           size: "small"
         }, dateProps, {
-          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected)
+          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          isSunday: date.getDay() === 0
         }, {
           children: date.getDate()
         }), key);
@@ -14330,7 +14440,8 @@ const MobileCalendarBox = ({
         children: jsx(Paragraph, Object.assign({
           paragraph: "shortContentBold",
           css: {
-            color: '$textSecondary'
+            color: '$textSecondary',
+            textAlign: 'center !important'
           }
         }, {
           children: weekday
@@ -14364,7 +14475,7 @@ const MobileCalendarBox = ({
         }, void 0)]
       }, void 0), jsx(Text$1, Object.assign({
         css: {
-          textAlign: 'center'
+          textAlign: 'center !important'
         },
         variant: "status",
         color: selected && selected.length > 1 ? 'primary' : 'disable'
@@ -15262,6 +15373,77 @@ function pickerReducer(state, action) {
       }
   }
 }
+function advancePickerDate(type) {
+  const tempDate = new Date();
+  const today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
+
+  switch (type) {
+    case TODAY:
+      {
+        return [today, today];
+      }
+
+    case YESTERDAY:
+      {
+        const yesterday = new Date(today);
+        yesterday.setDate(today.getDate() - 1);
+        return [yesterday, yesterday];
+      }
+
+    case LAST_7_DAYS:
+      {
+        const last7Days = new Date(today);
+        last7Days.setDate(today.getDate() - 7);
+        return [last7Days, today];
+      }
+
+    case LAST_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+        return [startThisWeek, endThisWeek];
+      }
+
+    case THIS_WEEK:
+      {
+        const startThisWeek = new Date(today);
+        startThisWeek.setDate(today.getDate() - today.getDay());
+        const endThisWeek = new Date(today);
+        endThisWeek.setDate(today.getDate() - today.getDay() + 6);
+        return [startThisWeek, endThisWeek];
+      }
+
+    case LAST_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+        const endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+        return [startThisMonth, endThisMonth];
+      }
+
+    case LAST_TWO_MONTHS:
+      {
+        const last2Months = new Date(today);
+        last2Months.setDate(today.getDate() - 60);
+        return [last2Months, today];
+      }
+
+    case THIS_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+        const endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+        return [startThisMonth, endThisMonth];
+      }
+
+    default:
+      {
+        throw new Error(`Unhandled action type: ${type}`);
+      }
+  }
+}
+
+moment.locale('id');
 
 const getInputPickerValue = (type, date) => {
   if (!date) return '';
@@ -15271,7 +15453,7 @@ const getInputPickerValue = (type, date) => {
       dateStyle: 'long'
     }).format(date);
   } else {
-    return `${toDateFormat(date[0], 'medium')} - ${toDateFormat(date[1], 'medium')}`;
+    return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
 };
 
@@ -15342,9 +15524,14 @@ function InputDatePicker({
     advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
       options: advancePickerOptions,
       disabled: disabled,
-      optionHandler: value => dispatch({
-        type: value
-      })
+      optionHandler: value => {
+        dispatch({
+          type: 'UPDATE',
+          payload: advancePickerDate(value)
+        });
+        if (onChange) onChange(advancePickerDate(value));
+        setOpenPicker(false);
+      }
     }, void 0) : {
       advanceView
     }),
@@ -15522,15 +15709,18 @@ const PaginationButton = ({
     return pageButtons;
   };
 
+  const isMobilePagination = useMediaQuery('(max-width: 360px)');
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
+    direction: isMobilePagination ? 'column' : 'row',
+    gap: isMobilePagination ? 2 : 0,
     css: {
-      height: 28
+      height: isMobilePagination ? 'unset' : 28
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 99,
+      lineNumber: 101,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15539,7 +15729,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 100,
+      lineNumber: 107,
       columnNumber: 7
     }
   }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15549,15 +15739,15 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 104,
+      lineNumber: 111,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: currentPage === 1 ? colors.iconDisable : colors.iconPrimary,
+    color: currentPage === 1 ? colors$1.iconDisable : colors$1.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 105,
+      lineNumber: 112,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -15568,7 +15758,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 108,
+      lineNumber: 115,
       columnNumber: 13
     }
   }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -15579,7 +15769,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 120,
+        lineNumber: 127,
         columnNumber: 13
       }
     }, page);
@@ -15591,7 +15781,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 131,
+      lineNumber: 138,
       columnNumber: 13
     }
   }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15601,39 +15791,41 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 140,
+      lineNumber: 147,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: currentPage === totalPages ? colors.iconDisable : colors.iconPrimary,
+    color: currentPage === totalPages ? colors$1.iconDisable : colors$1.iconPrimary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 145,
+      lineNumber: 152,
       columnNumber: 17
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "vertical",
     css: {
       height: '100%',
-      margin: '0 $spacing-03 0 $spacing-01'
+      margin: '0 $spacing-03 0 $spacing-01',
+      display: isMobilePagination ? 'none' : 'inherit'
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 152,
+      lineNumber: 159,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       display: 'flex',
       alignItems: 'center',
-      gap: 8
+      gap: 8,
+      flex: isMobilePagination ? 1 : 'unset'
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 154,
+      lineNumber: 168,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -15641,12 +15833,15 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 155,
+      lineNumber: 169,
       columnNumber: 9
     }
-  }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputText, {
+  }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputNumber, {
     ref: inputPageRef,
-    type: "number",
+    isAllowed: ({
+      floatValue
+    }) => floatValue === undefined || floatValue > 0 && floatValue <= totalPages,
+    allowNegative: false,
     onChange: e => {
       if (e.target.value) {
         debouncedGoToPage(Number(e.target.value));
@@ -15665,7 +15860,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 156,
+      lineNumber: 170,
       columnNumber: 9
     }
   })));
@@ -15750,7 +15945,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors.gray400,
+    color: colors$1.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
@@ -15825,7 +16020,7 @@ function Pagination(_ref) {
 
   const totalPages = Math.ceil(totalData / limit);
   const isMobile = useMediaQuery('(max-width: 700px)');
-  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
+  return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: isMobile ? 'columnReverse' : 'row',
     align: "center",
     justify: "between",
@@ -15866,7 +16061,14 @@ function Pagination(_ref) {
       lineNumber: 33,
       columnNumber: 26
     }
-  }));
+  })) : /*#__PURE__*/React__default.createElement(Box, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  });
 }
 
 Pagination.propTypes = {
@@ -15927,7 +16129,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   isLoading,
   rowGroup,
   hiddenColumns,
-  css
+  css,
+  customRowsStyle
 }, ref) => {
   const {
     getTableProps,
@@ -15973,8 +16176,22 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         children: page.map(row => {
           prepareRow(row);
           const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
+          let customStyle = {};
+
+          if (customRowsStyle && customRowsStyle(row.values).length) {
+            for (let i = 0; i < customRowsStyle(row.values).length; i++) {
+              console.log(customRowsStyle(row.values)[i]);
+
+              if (customRowsStyle(row.values)[i].predicate) {
+                customStyle = customRowsStyle(row.values)[i].css;
+              }
+            }
+          }
+
           return jsxs(React__default.Fragment, {
-            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({}, row.getRowProps(), {
+            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               key: `${row.id}-group_header`
             }), jsx(TableCell$3, Object.assign({
               colSpan: 100
@@ -15984,7 +16201,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               }, {
                 children: row.cells[0].render('Cell')
               }), void 0)
-            }), void 0)), jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
+            }), void 0)), jsx(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
                 return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
@@ -16018,8 +16237,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                     return jsxs(Flex$1, Object.assign({
                       align: "center",
                       justify: "between",
+                      gap: 5,
                       css: {
-                        backgroundColor: colors.bgGray,
+                        backgroundColor: colors$1.bgGray,
                         padding: `$spacing-03 $spacing-05 ${'selection' in row.values ? '$spacing-03 $spacing-07' : ''}`,
                         borderBottom: '1pt solid $bgBorder'
                       }
@@ -16028,7 +16248,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                         heading: "headerTable",
                         color: "secondary"
                       }, {
-                        children: (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase()
+                        children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
                       }), void 0), cell.render('Cell')]
                     }), `${cell.column.id}-${row.id}`);
                   })
@@ -16314,7 +16534,8 @@ function Table({
   selectedIds,
   rowGroup,
   hiddenColumns,
-  columnOrder
+  columnOrder,
+  customRowsStyle
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -16551,8 +16772,22 @@ function Table({
               const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+              let customStyle = {};
+
+              if (customRowsStyle && customRowsStyle(row.values).length) {
+                for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
+                  console.log(customRowsStyle(row.values)[_i]);
+
+                  if (customRowsStyle(row.values)[_i].predicate) {
+                    customStyle = customRowsStyle(row.values)[_i].css;
+                  }
+                }
+              }
+
               return jsxs(React.Fragment, {
-                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
+                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   key: `${row.id}-group_header`
                 }), jsx(TableCell$2, Object.assign({
                   colSpan: 100,
@@ -16566,7 +16801,9 @@ function Table({
                   }, {
                     children: row.cells[0].render('Cell')
                   }), void 0)
-                }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
+                }), void 0)), jsx(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
                     return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign({
@@ -16577,7 +16814,7 @@ function Table({
                       children: cell.render('Cell')
                     }), void 0);
                   })
-                }), void 0), row.isExpanded ? subRowCells.map(cell => jsxs(TableRow$2, Object.assign({
+                }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$2, Object.assign({
                   subRow: true
                 }, {
                   children: [leftAddOnCells.map((_, index) => jsx("td", {}, index)), jsxs(React.Fragment, {
@@ -16586,8 +16823,8 @@ function Table({
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
                       css: {
-                        paddingTop: '$spacing-03 !important',
-                        paddingBottom: '$spacing-03 !important'
+                        paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
                       }
                     }, {
                       children: jsx(Paragraph, Object.assign({
@@ -16599,8 +16836,8 @@ function Table({
                       subCell: true,
                       colSpan: visibleColumns.length - subRowCells.length,
                       css: {
-                        paddingTop: '$spacing-03 !important',
-                        paddingBottom: '$spacing-03 !important'
+                        paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
                       }
                     }, {
                       children: jsx(Paragraph, Object.assign({
@@ -16646,7 +16883,8 @@ function Table({
       isLoading: isLoading,
       rowGroup: rowGroup,
       hiddenColumns: hiddenColumns,
-      css: css
+      css: css,
+      customRowsStyle: customRowsStyle
     }, void 0)]
   }), void 0);
 } //Dummy component for mdx docs purpose only
@@ -17709,23 +17947,23 @@ const FOOTER_HEIGHT = 64;
 const HEADER_HEIGHT = 56;
 const HEADER_HEIGHT_MOBILE = 76;
 /**
-* PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
-* https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
-* @param size - default fullsize
-* @param layer - z-index default 1400
-* @param isMobile - force mobile/desktop view, default is responsive
-* @param onOpenAutoFocus - set default open behaviour
-*
-* @example
-* // Uncontrolled Example
-*  <PageDialog>
-*    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
-*    <PageDialogTitle>Title</PageDialogTitle>
-*    <PageDialogContent>Content</PageDialogContent>
-*    <PageDialogFooter>Footer</PageDialogFooter>
-*  </PageDialog>
-* @component
-*/
+ * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
+ * https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+ * @param size - default fullsize
+ * @param layer - z-index default 1400
+ * @param isMobile - force mobile/desktop view, default is responsive
+ * @param onOpenAutoFocus - set default open behaviour
+ *
+ * @example
+ * // Uncontrolled Example
+ *  <PageDialog>
+ *    <PageDialogTrigger>Button Trigger</PageDialogTrigger>
+ *    <PageDialogTitle>Title</PageDialogTitle>
+ *    <PageDialogContent>Content</PageDialogContent>
+ *    <PageDialogFooter>Footer</PageDialogFooter>
+ *  </PageDialog>
+ * @component
+ */
 
 const PageDialog = props => {
   const {
@@ -17762,7 +18000,13 @@ const PageDialog = props => {
           zIndex: layer
         }),
         ref: ref,
-        onOpenAutoFocus: onOpenAutoFocus
+        onOpenAutoFocus: e => {
+          if (!onOpenAutoFocus) {
+            e.preventDefault();
+          } else {
+            onOpenAutoFocus(e);
+          }
+        }
       }, {
         children: jsxs(Box, Object.assign({
           css: {
@@ -17909,7 +18153,7 @@ const contentShow = keyframes({
 });
 const StyledOverlay = styled(ADialog.Overlay, {
   zIndex: 1,
-  backgroundColor: colors.bgDimmer,
+  backgroundColor: colors$1.bgDimmer,
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -17942,14 +18186,14 @@ const StyledTitle = styled(ADialog.Title, {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  color: colors.gray900,
+  color: colors$1.gray900,
   fontSize: 17,
   fontWeight: 500
 });
 const StyledDescription = styled(ADialog.Description, {
   mx: 24,
   my: 20,
-  color: colors.gray900,
+  color: colors$1.gray900,
   fontSize: 15,
   lineHeight: 1.5
 });
@@ -18057,6 +18301,13 @@ const TemplateAlertFunction = props => {
       zIndex: '$tooltip',
       minHeight: 230
     }, isMobileCss, props.css),
+    onOpenAutoFocus: e => {
+      if (!props.onOpenAutoFocus) {
+        e.preventDefault();
+      } else {
+        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+      }
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
@@ -18067,7 +18318,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 130,
+      lineNumber: 140,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18075,7 +18326,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 131,
+      lineNumber: 141,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18083,7 +18334,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 132,
+      lineNumber: 142,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18094,7 +18345,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 133,
+      lineNumber: 143,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18102,7 +18353,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 134,
+      lineNumber: 144,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18110,24 +18361,25 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 138,
+      lineNumber: 148,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 139,
+      lineNumber: 149,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    paragraph: "longContentRegular",
     css: {
       textAlign: 'justify'
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 140,
+      lineNumber: 150,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18139,7 +18391,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 142,
+      lineNumber: 152,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18147,7 +18399,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 143,
+      lineNumber: 153,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18161,7 +18413,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 144,
+      lineNumber: 154,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18169,7 +18421,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 146,
+      lineNumber: 156,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18181,7 +18433,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 147,
+      lineNumber: 157,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18189,7 +18441,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 159,
+      lineNumber: 169,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18205,7 +18457,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 160,
+      lineNumber: 170,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18213,7 +18465,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 171,
+      lineNumber: 181,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18228,7 +18480,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 172,
+      lineNumber: 182,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18253,7 +18505,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 203,
+      lineNumber: 213,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18261,17 +18513,20 @@ function AlertDialog(props) {
       zIndex: '$tooltip',
       minHeight: 230
     }, isMobileCss, props.css),
+    onOpenAutoFocus: e => {
+      if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 204,
+      lineNumber: 214,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 205,
+      lineNumber: 221,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18279,7 +18534,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 206,
+      lineNumber: 222,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -18287,7 +18542,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 207,
+      lineNumber: 223,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18298,7 +18553,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 208,
+      lineNumber: 224,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18306,7 +18561,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 209,
+      lineNumber: 225,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18314,14 +18569,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 213,
+      lineNumber: 229,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 214,
+      lineNumber: 230,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18331,7 +18586,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 215,
+      lineNumber: 231,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18343,7 +18598,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 217,
+      lineNumber: 233,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18351,7 +18606,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 218,
+      lineNumber: 234,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18365,7 +18620,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 219,
+      lineNumber: 235,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18373,7 +18628,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 221,
+      lineNumber: 237,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18388,7 +18643,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 222,
+      lineNumber: 238,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18396,7 +18651,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 235,
+      lineNumber: 251,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18412,7 +18667,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 236,
+      lineNumber: 252,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18420,7 +18675,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 247,
+      lineNumber: 263,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18435,7 +18690,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 248,
+      lineNumber: 264,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18564,17 +18819,17 @@ const itemStyles = {
   position: 'relative',
   userSelect: 'none',
   '&[data-disabled]': {
-    color: colors.gray400,
+    color: colors$1.gray400,
     pointerEvents: 'none'
   },
   '&:hover': {
     cursor: 'pointer'
   },
   '&:active': {
-    backgroundColor: colors.gray150
+    backgroundColor: colors$1.gray150
   },
   '&:focus': {
-    backgroundColor: colors.gray100
+    backgroundColor: colors$1.gray100
   }
 };
 const StyledItem = styled(DropdownMenuPrimitive.Item, Object.assign({}, itemStyles));
@@ -18582,18 +18837,18 @@ const StyledCheckboxItem = styled(DropdownMenuPrimitive.CheckboxItem, Object.ass
 const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, Object.assign({}, itemStyles));
 const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, Object.assign({
   '&[data-state="open"]': {
-    backgroundColor: colors.gray50
+    backgroundColor: colors$1.gray50
   }
 }, itemStyles));
 const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
   lineHeight: '25px',
-  color: colors.gray700
+  color: colors$1.gray700
 });
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: colors.gray150,
+  backgroundColor: colors$1.gray150,
   margin: 5
 });
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
@@ -18673,7 +18928,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors.gray400
+    color: colors$1.gray400
   }
 });
 const StyledDropdown = styled(ButtonPrimitive, {
@@ -20525,6 +20780,8 @@ function toBlob(canvas) {
 
 function imgPreview(image, crop, scale = 1, rotate = 0) {
   return __awaiter(this, void 0, void 0, function* () {
+    crop.height = Math.ceil(crop.height);
+    crop.width = Math.ceil(crop.width);
     const canvas = document.createElement('canvas');
     canvasPreview(image, canvas, crop, scale, rotate);
     const blob = yield toBlob(canvas);
@@ -20821,13 +21078,27 @@ const Upload = ({
     borderRadius: 8,
     width: width,
     height: height - 36,
-    objectFit: 'cover'
+    objectFit: 'cover',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
   });
   const Blank = styled('div', {
     borderRadius: 8,
     width: width,
     height: height - 36,
-    background: '$gray50'
+    background: '$gray50',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
   });
 
   function handleClick() {
@@ -20838,6 +21109,15 @@ 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) {
@@ -21101,7 +21381,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 537,
+        lineNumber: 557,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -21111,7 +21391,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 538,
+        lineNumber: 558,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21127,7 +21407,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 548,
+            lineNumber: 568,
             columnNumber: 16
           }
         });
@@ -21139,7 +21419,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 551,
+          lineNumber: 571,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21149,17 +21429,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 552,
+          lineNumber: 572,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 553,
-          columnNumber: 13
+          lineNumber: 573,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21171,7 +21451,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 554,
+          lineNumber: 574,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21180,18 +21460,20 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 562,
+          lineNumber: 582,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
         src: item.url,
+        alt: "upload-content",
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 564,
+          lineNumber: 584,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21207,7 +21489,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 575,
+            lineNumber: 595,
             columnNumber: 16
           }
         });
@@ -21218,7 +21500,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 578,
+          lineNumber: 598,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21228,17 +21510,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 579,
+          lineNumber: 599,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 580,
-          columnNumber: 13
+          lineNumber: 600,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21250,7 +21532,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 581,
+          lineNumber: 601,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21260,32 +21542,40 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 589,
+          lineNumber: 609,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 590,
+          lineNumber: 610,
+          columnNumber: 17
+        }
+      }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
+        label: item.name,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 611,
           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(Text, {
+      }, /*#__PURE__*/React__default.createElement(Text, {
         css: {
           color: '$textPrimary',
           textOverflow: 'ellipsis',
           overflow: 'hidden',
-          width: 180,
+          width: 120,
           whiteSpace: 'nowrap',
           margin: '0 $spacing-07 0 $spacing-07'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 591,
-          columnNumber: 17
+          lineNumber: 612,
+          columnNumber: 19
         }
-      }, item.name))), /*#__PURE__*/React__default.createElement(Box, {
+      }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'absolute',
           top: '45%',
@@ -21295,7 +21585,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 605,
+          lineNumber: 627,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21304,17 +21594,18 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 635,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 637,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21327,7 +21618,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 626,
+        lineNumber: 648,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21341,7 +21632,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 627,
+        lineNumber: 649,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21367,7 +21658,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 628,
+        lineNumber: 650,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21375,14 +21666,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 641,
+        lineNumber: 663,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 642,
+        lineNumber: 664,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21395,7 +21686,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 672,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21411,7 +21702,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 651,
+        lineNumber: 673,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -21423,21 +21714,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 662,
+        lineNumber: 684,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 663,
+        lineNumber: 685,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 687,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -21446,7 +21737,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 666,
+        lineNumber: 688,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -21454,7 +21745,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 667,
+        lineNumber: 689,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21464,14 +21755,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 669,
+        lineNumber: 691,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 676,
+        lineNumber: 698,
         columnNumber: 19
       }
     }, error));
@@ -21482,7 +21773,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 683,
+        lineNumber: 705,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21490,7 +21781,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 684,
+        lineNumber: 706,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21498,7 +21789,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 685,
+        lineNumber: 707,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21511,7 +21802,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 709,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21522,7 +21813,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 690,
+        lineNumber: 712,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21533,7 +21824,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 691,
+        lineNumber: 713,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21543,17 +21834,18 @@ const Upload = ({
         height: '100%'
       },
       src: previewImage,
+      alt: "cropper-content",
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 692,
+        lineNumber: 714,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 717,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21565,7 +21857,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 696,
+        lineNumber: 718,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21573,7 +21865,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 697,
+        lineNumber: 719,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21585,7 +21877,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 720,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21593,7 +21885,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 726,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21602,7 +21894,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 705,
+        lineNumber: 727,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21610,7 +21902,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 708,
+        lineNumber: 730,
         columnNumber: 15
       }
     }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21618,7 +21910,7 @@ const Upload = ({
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
-    gap: 3,
+    gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
     wrap: "wrap",
     css: {
       userSelect: 'none'
@@ -21626,7 +21918,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 719,
+      lineNumber: 741,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21635,7 +21927,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 722,
+      lineNumber: 744,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21955,7 +22247,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronLgLeftOutline, {
-        color: colors.btnPrimary
+        color: colors$1.btnPrimary
       }, void 0)
     }), void 0), jsxs(Flex$1, Object.assign({
       align: "center",
@@ -22015,7 +22307,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors.btnPrimary
+        color: colors$1.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -25000,7 +25292,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors.bgGreen,
+        color: colors$1.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -25021,7 +25313,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors.iconSecondary,
+        color: colors$1.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -25047,7 +25339,7 @@ const Navigation = props => {
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
         size: "24",
-        color: colors.bgGreen,
+        color: colors$1.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -25092,7 +25384,7 @@ const Navigation = props => {
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: colors.iconSecondary,
+        color: colors$1.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -26984,6 +27276,33 @@ function InputMapPicker(props) {
   } = props;
   const modalTrigger = React__default.useRef(null);
   const [inputValue, setInputValue] = useState(placeholder);
+  useEffect(() => {
+    const handleGeoCode = e => {
+      const defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
+      const {
+        lat,
+        lng
+      } = e;
+      request.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${mapsApiKey !== null && mapsApiKey !== void 0 ? mapsApiKey : defaultApiKey}`).end((err, res) => {
+        var _a;
+
+        if (err) {
+          console.error(err.message);
+        }
+
+        if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+          const {
+            results
+          } = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+          setInputValue((_a = results === null || results === void 0 ? void 0 : results[0]) === null || _a === void 0 ? void 0 : _a.formatted_address);
+        }
+      });
+    };
+
+    if (value && value.lat && value.lng) {
+      handleGeoCode(value);
+    }
+  }, [mapsApiKey, onChange, value]);
 
   function handleClick() {
     var _a;
@@ -27087,11 +27406,7 @@ function InputMapPicker(props) {
 InputMapPicker.defaultProps = {
   modalTitle: 'Tambah Lokasi di Map',
   buttonLabel: 'Ubah Lokasi',
-  placeholder: 'Tandai lokasi dalam peta',
-  value: {
-    lat: -6.175392,
-    lng: 106.827153
-  }
+  placeholder: 'Tandai lokasi dalam peta'
 };
 
 var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
@@ -28595,4 +28910,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };