@majoo-ui/react 1.48.0 → 1.48.1

package/index.umd.js

@@ -7360,7 +7360,7 @@
     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,
@@ -7477,7 +7477,8 @@
       readOnly,
       max,
       maxChar,
-      pattern
+      pattern,
+      helperText
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
@@ -7531,7 +7532,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 163,
+        lineNumber: 164,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputTagsComponent, _extends({
@@ -7544,7 +7545,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 164,
+        lineNumber: 165,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$7, {
@@ -7559,7 +7560,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 172,
+        lineNumber: 173,
         columnNumber: 9
       }
     })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7567,7 +7568,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 186,
+        lineNumber: 187,
         columnNumber: 11
       }
     }, pattern.errorMessage) : /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7575,14 +7576,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 188,
+        lineNumber: 189,
         columnNumber: 11
       }
-    }, "Invalid Input")), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
+    }, "Invalid Input")), helperText && /*#__PURE__*/React__default["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["default"].createElement(TagWrapper$2, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$A,
+        lineNumber: 197,
         columnNumber: 7
       }
     }, tags.map((tag, index) => /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -7595,7 +7610,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 193,
+        lineNumber: 199,
         columnNumber: 11
       }
     }, tag))));
@@ -7611,6 +7626,7 @@
     isInvalid: PropTypes__default["default"].bool,
     disabled: PropTypes__default["default"].bool,
     readOnly: PropTypes__default["default"].bool,
+    helperText: PropTypes__default["default"].string,
     pattern: PropTypes__default["default"].shape({
       regex: PropTypes__default["default"].string.isRequired,
       errorMessage: PropTypes__default["default"].string
@@ -9070,7 +9086,7 @@
     }
   }));
 
-  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,
@@ -9290,6 +9306,7 @@
       isInvalid,
       sortBy,
       showSelectedTag,
+      helperText,
       css
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -9487,7 +9504,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 401,
+        lineNumber: 402,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__namespace.createElement(Select, {
@@ -9497,7 +9514,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 402,
+        lineNumber: 403,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9508,7 +9525,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 403,
+        lineNumber: 404,
         columnNumber: 9
       }
     }), search ? /*#__PURE__*/React__namespace.createElement(Input$5, _extends({}, getInputProps({
@@ -9519,7 +9536,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 408,
+        lineNumber: 409,
         columnNumber: 13
       }
     })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9531,7 +9548,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 414,
+        lineNumber: 415,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9542,7 +9559,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 424,
+        lineNumber: 425,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
@@ -9550,15 +9567,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 429,
+        lineNumber: 430,
         columnNumber: 11
       }
-    }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
+    }))), helperText && /*#__PURE__*/React__namespace.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__namespace.createElement(TagWrapper$1, {
       disabled: disabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 433,
+        lineNumber: 439,
         columnNumber: 9
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
@@ -9582,7 +9612,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 435,
+        lineNumber: 441,
         columnNumber: 13
       }
     }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -9594,14 +9624,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 456,
+        lineNumber: 462,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 461,
+        lineNumber: 467,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
@@ -9619,7 +9649,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 464,
+        lineNumber: 470,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
@@ -9632,7 +9662,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 477,
+        lineNumber: 483,
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9640,7 +9670,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 486,
+        lineNumber: 492,
         columnNumber: 23
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9648,7 +9678,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 490,
+        lineNumber: 496,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__namespace.createElement(Item$2, {
@@ -9658,7 +9688,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 494,
+        lineNumber: 500,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
@@ -9669,14 +9699,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 499,
+        lineNumber: 505,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 500,
+        lineNumber: 506,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -9686,7 +9716,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 501,
+        lineNumber: 507,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -9698,7 +9728,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 502,
+        lineNumber: 508,
         columnNumber: 17
       }
     })), textEmptyItem))));
@@ -9718,7 +9748,8 @@
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     textEmptyItem: PropTypes__default["default"].string,
-    css: PropTypes__default["default"].object
+    css: PropTypes__default["default"].object,
+    helperText: PropTypes__default["default"].string
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -9761,7 +9792,8 @@
     search: PropTypes__default["default"].bool,
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    textEmptyItem: PropTypes__default["default"].string
+    textEmptyItem: PropTypes__default["default"].string,
+    helperText: PropTypes__default["default"].string
   };
   InputSelectTag.defaultProps = {
     placeholder: 'Select Item',
@@ -12835,23 +12867,23 @@
     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
+   */
 
 
   var ModalDialog = function ModalDialog(props) {
@@ -12870,7 +12902,7 @@
     var modalDialogContent = findNodeChild$1(childArray, 'ModalDialogContent');
     var modalDialogTrigger = findNodeChild$1(childArray, 'ModalDialogTrigger');
     var ref = React.useCallback(function (node) {
-      var appElement = document.getElementById("app");
+      var appElement = document.getElementById('app');
 
       if (appElement) {
         if (node !== null) {
@@ -12895,7 +12927,13 @@
           }),
           ref: ref,
           isMobile: isMobile,
-          onOpenAutoFocus: onOpenAutoFocus
+          onOpenAutoFocus: function (e) {
+            if (!onOpenAutoFocus) {
+              e.preventDefault();
+            } else {
+              onOpenAutoFocus();
+            }
+          }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
             css: {
@@ -12935,7 +12973,7 @@
                     as: "p",
                     heading: "pageTitle"
                   }, modalDialogTitle.props), void 0)
-                }), void 0), jsxRuntime.jsx(DialogClose, __assign({
+                }), void 0), !props.hideCloseButton && jsxRuntime.jsx(DialogClose, __assign({
                   asChild: true
                 }, {
                   children: jsxRuntime.jsx(Box, __assign({
@@ -13526,6 +13564,11 @@
           height: '32px',
           width: '45.5px'
         }
+      },
+      isSunday: {
+        true: {
+          color: '$textDisable'
+        }
       }
     },
     compoundVariants: [{
@@ -13927,7 +13970,8 @@
             });
             dateProps = dateProps['disabled'] ? {} : dateProps;
             return jsxRuntime.jsx(DateNumber, __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);
@@ -14036,7 +14080,8 @@
             paragraph: "shortContentBold",
             css: {
               color: '$textSecondary',
-              fontSize: '$label'
+              fontSize: '$label',
+              textAlign: 'center !important'
             }
           }, {
             children: weekday
@@ -14638,7 +14683,8 @@
             children: jsxRuntime.jsx(Paragraph, __assign({
               paragraph: "shortContentBold",
               css: {
-                color: '$textSecondary'
+                color: '$textSecondary',
+                textAlign: 'center !important'
               }
             }, {
               children: weekday
@@ -14675,7 +14721,7 @@
           }, void 0)]
         }, void 0), jsxRuntime.jsx(Text$1, __assign({
           css: {
-            textAlign: 'center'
+            textAlign: 'center !important'
           },
           variant: "status",
           color: selected && selected.length > 1 ? 'primary' : 'disable'
@@ -15584,6 +15630,75 @@
         }
     }
   }
+  function advancePickerDate(type) {
+    var tempDate = new Date();
+    var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
+
+    switch (type) {
+      case TODAY:
+        {
+          return [today, today];
+        }
+
+      case YESTERDAY:
+        {
+          var yesterday = new Date(today);
+          yesterday.setDate(today.getDate() - 1);
+          return [yesterday, yesterday];
+        }
+
+      case LAST_7_DAYS:
+        {
+          var last7Days = new Date(today);
+          last7Days.setDate(today.getDate() - 7);
+          return [last7Days, today];
+        }
+
+      case LAST_WEEK:
+        {
+          var startThisWeek = new Date(today);
+          startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+          var endThisWeek = new Date(today);
+          endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+          return [startThisWeek, endThisWeek];
+        }
+
+      case THIS_WEEK:
+        {
+          var startThisWeek = new Date(today);
+          startThisWeek.setDate(today.getDate() - today.getDay());
+          var endThisWeek = new Date(today);
+          endThisWeek.setDate(today.getDate() - today.getDay() + 6);
+          return [startThisWeek, endThisWeek];
+        }
+
+      case LAST_MONTH:
+        {
+          var startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+          var endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+          return [startThisMonth, endThisMonth];
+        }
+
+      case LAST_TWO_MONTHS:
+        {
+          var last2Months = new Date(today);
+          last2Months.setDate(today.getDate() - 60);
+          return [last2Months, today];
+        }
+
+      case THIS_MONTH:
+        {
+          var startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+          var endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+          return [startThisMonth, endThisMonth];
+        }
+
+      default:
+        {
+          throw new Error("Unhandled action type: ".concat(type));
+        }
+    }
+  }
 
   var getInputPickerValue = function getInputPickerValue(type, date) {
     if (!date) return '';
@@ -15683,9 +15798,12 @@
           options: advancePickerOptions,
           disabled: disabled,
           optionHandler: function (value) {
-            return dispatch({
-              type: value
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate(value)
             });
+            if (onChange) onChange(advancePickerDate(value));
+            setOpenPicker(false);
           }
         }, void 0) : {
           advanceView: advanceView
@@ -15867,15 +15985,18 @@
       return pageButtons;
     };
 
+    const isMobilePagination = useMediaQuery('(max-width: 360px)');
     return /*#__PURE__*/React__default["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["default"].createElement(Flex$1, {
@@ -15884,7 +16005,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 100,
+        lineNumber: 107,
         columnNumber: 7
       }
     }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15894,7 +16015,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 104,
+        lineNumber: 111,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
@@ -15902,7 +16023,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 105,
+        lineNumber: 112,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -15913,7 +16034,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 108,
+        lineNumber: 115,
         columnNumber: 13
       }
     }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -15924,7 +16045,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 120,
+          lineNumber: 127,
           columnNumber: 13
         }
       }, page);
@@ -15936,7 +16057,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 131,
+        lineNumber: 138,
         columnNumber: 13
       }
     }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15946,7 +16067,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 140,
+        lineNumber: 147,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
@@ -15954,31 +16075,33 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 145,
+        lineNumber: 152,
         columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["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["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["default"].createElement(Text$1, {
@@ -15986,12 +16109,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 155,
+        lineNumber: 169,
         columnNumber: 9
       }
-    }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputText, {
+    }, "Ke Halaman"), /*#__PURE__*/React__default["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));
@@ -16010,7 +16136,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 156,
+        lineNumber: 170,
         columnNumber: 9
       }
     })));
@@ -16368,6 +16494,7 @@
                       return jsxRuntime.jsxs(Flex$1, __assign({
                         align: "center",
                         justify: "between",
+                        gap: 5,
                         css: {
                           backgroundColor: colors$1.bgGray,
                           padding: "$spacing-03 $spacing-05 ".concat('selection' in row.values ? '$spacing-03 $spacing-07' : ''),
@@ -16969,7 +17096,7 @@
                         children: cell.render('Cell')
                       }), void 0);
                     })
-                  }), void 0), row.isExpanded ? subRowCells.map(function (cell) {
+                  }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
                     return jsxRuntime.jsxs(TableRow$2, __assign({
                       subRow: true
                     }, {
@@ -16981,8 +17108,8 @@
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
                           css: {
-                            paddingTop: '$spacing-03 !important',
-                            paddingBottom: '$spacing-03 !important'
+                            paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
+                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
                           }
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
@@ -16994,8 +17121,8 @@
                           subCell: true,
                           colSpan: visibleColumns.length - subRowCells.length,
                           css: {
-                            paddingTop: '$spacing-03 !important',
-                            paddingBottom: '$spacing-03 !important'
+                            paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
+                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
                           }
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
@@ -18112,23 +18239,23 @@
   var HEADER_HEIGHT = 56;
   var 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
+   */
 
   var PageDialog = function PageDialog(props) {
     var children = props.children,
@@ -18163,7 +18290,13 @@
             zIndex: layer
           }),
           ref: ref,
-          onOpenAutoFocus: onOpenAutoFocus
+          onOpenAutoFocus: function (e) {
+            if (!onOpenAutoFocus) {
+              e.preventDefault();
+            } else {
+              onOpenAutoFocus();
+            }
+          }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
             css: {
@@ -18458,6 +18591,13 @@
         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,
@@ -18468,7 +18608,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 130,
+        lineNumber: 140,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18476,7 +18616,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 131,
+        lineNumber: 141,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18484,7 +18624,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 132,
+        lineNumber: 142,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18495,7 +18635,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 133,
+        lineNumber: 143,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18503,7 +18643,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 134,
+        lineNumber: 144,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18511,24 +18651,25 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 138,
+        lineNumber: 148,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 139,
+        lineNumber: 149,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["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["default"].createElement(Box, {
@@ -18540,7 +18681,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 142,
+        lineNumber: 152,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18548,7 +18689,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 143,
+        lineNumber: 153,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18562,7 +18703,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 144,
+        lineNumber: 154,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18570,7 +18711,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 146,
+        lineNumber: 156,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18582,7 +18723,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 147,
+        lineNumber: 157,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18590,7 +18731,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 159,
+        lineNumber: 169,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18606,7 +18747,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 160,
+        lineNumber: 170,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18614,7 +18755,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 171,
+        lineNumber: 181,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18629,7 +18770,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 172,
+        lineNumber: 182,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18654,7 +18795,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 203,
+        lineNumber: 213,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18662,17 +18803,20 @@
         zIndex: '$tooltip',
         minHeight: 230
       }, isMobileCss, props.css),
+      onOpenAutoFocus: e => {
+        if (!props.onOpenAutoFocus) e.preventDefault();
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 204,
+        lineNumber: 214,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 205,
+        lineNumber: 221,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18680,7 +18824,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 206,
+        lineNumber: 222,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
@@ -18688,7 +18832,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 207,
+        lineNumber: 223,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18699,7 +18843,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 208,
+        lineNumber: 224,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18707,7 +18851,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 209,
+        lineNumber: 225,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18715,14 +18859,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 213,
+        lineNumber: 229,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 214,
+        lineNumber: 230,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18732,7 +18876,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 215,
+        lineNumber: 231,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18744,7 +18888,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 217,
+        lineNumber: 233,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18752,7 +18896,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 218,
+        lineNumber: 234,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18766,7 +18910,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 219,
+        lineNumber: 235,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18774,7 +18918,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 221,
+        lineNumber: 237,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18789,7 +18933,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 222,
+        lineNumber: 238,
         columnNumber: 17
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18797,7 +18941,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 235,
+        lineNumber: 251,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18813,7 +18957,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 236,
+        lineNumber: 252,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18821,7 +18965,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 247,
+        lineNumber: 263,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18836,7 +18980,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 248,
+        lineNumber: 264,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -20952,6 +21096,8 @@
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
+            crop.height = Math.ceil(crop.height);
+            crop.width = Math.ceil(crop.width);
             canvas = document.createElement('canvas');
             canvasPreview(image, canvas, crop, scale, rotate);
             return [4
@@ -21995,6 +22141,7 @@
           height: '100%'
         },
         src: previewImage,
+        alt: "cropper-content",
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -22070,7 +22217,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: 3,
+      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -29290,6 +29437,7 @@
   exports.Upload = Upload;
   exports.YESTERDAY = YESTERDAY;
   exports.addOnCellStyle = addOnCellStyle;
+  exports.advancePickerDate = advancePickerDate;
   exports.advancePickerOptions = advancePickerOptions;
   exports.defaultFetchDataParams = defaultFetchDataParams;
   exports.pickerReducer = pickerReducer;