@majoo-ui/react 1.49.3 → 1.50.1

package/index.umd.js

@@ -3645,7 +3645,7 @@
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      value == null ? void 0 : value.onRemove();
+      value === null || value === void 0 ? void 0 : value.onRemove();
     },
     __self: undefined,
     __source: {
@@ -3722,7 +3722,7 @@
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
-        props == null ? void 0 : props.onRemove();
+        props === null || props === void 0 ? void 0 : props.onRemove();
       },
       closeCenter: !props.title && !props.link,
       __self: undefined,
@@ -4079,7 +4079,7 @@
       }
     }
   });
-  var Button$2 = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+  var Button$3 = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
         type = _a.type,
         _b = _a.buttonType,
@@ -5716,7 +5716,7 @@
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
       const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-      setChecked(checkValue != null ? checkValue : false);
+      setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
     }, [checked, indeterminate, context]);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -6314,7 +6314,7 @@
   var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
   const RadioGroup = styled(RadioGroupPrimitive__namespace.Root, Flex$1);
   function InputRadioGroup(props) {
-    return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+    return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
@@ -6329,7 +6329,7 @@
         lineNumber: 14,
         columnNumber: 9
       }
-    }), React__default["default"].Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
       style: Object.assign({}, child.props.style, {
         opacity: 1
       })
@@ -6520,7 +6520,7 @@
       value,
       outlined
     }) => {
-      const checked = value != null ? value : defaultValue;
+      const checked = value !== null && value !== void 0 ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$7, {
         align: "center",
         gap: 4,
@@ -7422,7 +7422,7 @@
     readOnly: false
   };
 
-  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText"];
+  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "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,
@@ -7496,7 +7496,7 @@
       }
     }
   });
-  const Input$7 = styled('input', {
+  const Input$8 = styled('input', {
     display: 'flex',
     position: 'relative',
     flex: 'auto',
@@ -7533,6 +7533,7 @@
       isInvalid,
       placeholder,
       onChange,
+      onEnter,
       onInputChange,
       value,
       disabled,
@@ -7556,19 +7557,31 @@
     const addTags = event => {
       if (event.key === 'Enter' && event.target.value !== '' && max !== tags.length) {
         if (tags.find(tag => tag.toLowerCase() === event.target.value.toLowerCase())) {
+          onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+            key: 'duplicate',
+            value: event.target.value
+          });
           return;
         }
 
-        if (pattern && pattern != null && pattern.regex) {
+        if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
           const regex = new RegExp(pattern.regex);
 
           if (!regex.test(event.target.value)) {
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+              key: 'error',
+              value: event.target.value
+            });
             setRegexError(true);
             return;
           }
         }
 
         setRegexError(false);
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+          key: 'success',
+          value: event.target.value
+        });
         setTags([...tags, event.target.value]);
         event.target.value = '';
       }
@@ -7594,7 +7607,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 164,
+        lineNumber: 168,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputTagsComponent, _extends({
@@ -7607,10 +7620,10 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 165,
+        lineNumber: 169,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Input$7, {
+    }), /*#__PURE__*/React__default["default"].createElement(Input$8, {
       type: "text",
       onKeyUp: event => addTags(event) // onKeyDown={event => removeTags(tags.length - 1, event.key)}
       ,
@@ -7622,15 +7635,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 173,
+        lineNumber: 177,
         columnNumber: 9
       }
-    })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
+    })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
       color: "red",
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 187,
+        lineNumber: 191,
         columnNumber: 11
       }
     }, pattern.errorMessage) : /*#__PURE__*/React__default["default"].createElement(FormHelper, {
@@ -7638,7 +7651,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 189,
+        lineNumber: 193,
         columnNumber: 11
       }
     }, "Invalid Input")), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -7652,14 +7665,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 193,
+        lineNumber: 197,
         columnNumber: 9
       }
     }, helperText), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 197,
+        lineNumber: 201,
         columnNumber: 7
       }
     }, tags.map((tag, index) => /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -7672,7 +7685,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$A,
-        lineNumber: 199,
+        lineNumber: 203,
         columnNumber: 11
       }
     }, tag))));
@@ -7682,6 +7695,7 @@
     size: PropTypes__default["default"].string,
     value: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     onChange: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+    onEnter: PropTypes__default["default"].func,
     onInputChange: PropTypes__default["default"].func,
     max: PropTypes__default["default"].number,
     maxChar: PropTypes__default["default"].number,
@@ -8248,7 +8262,7 @@
       }
     }
   });
-  var Button$1 = styled('button', {
+  var Button$2 = styled('button', {
     display: 'flex',
     width: '100%',
     height: '100%',
@@ -8280,7 +8294,7 @@
       }
     }
   });
-  var Input$6 = styled('input', {
+  var Input$7 = styled('input', {
     marginLeft: '$spacing-05',
     display: 'flex',
     width: '100%',
@@ -8412,7 +8426,7 @@
           width: '$spacing-05',
           padding: 0
         } : undefined
-      }, void 0), jsxRuntime.jsx(Input$6, __assign({}, inputProps, props, {
+      }, void 0), jsxRuntime.jsx(Input$7, __assign({}, inputProps, props, {
         placeholder: placeholder,
         readOnly: readOnly,
         isReadOnly: readOnly,
@@ -8669,7 +8683,7 @@
                   disabled: disabled || readOnly
                 }).onClick : undefined
               }, void 0)
-            }), void 0) : jsxRuntime.jsx(Button$1, __assign({}, getToggleButtonProps({
+            }), void 0) : jsxRuntime.jsx(Button$2, __assign({}, getToggleButtonProps({
               disabled: disabled || readOnly
             }), {
               disabled: disabled,
@@ -9241,7 +9255,7 @@
       }
     }
   });
-  const Input$5 = styled('input', {
+  const Input$6 = styled('input', {
     width: '100%',
     textAlign: 'left',
     background: 'unset',
@@ -9250,9 +9264,16 @@
     cursor: 'text',
     '&:disabled': {
       cursor: 'not-allowed'
+    },
+    variants: {
+      hiddden: {
+        true: {
+          display: 'none'
+        }
+      }
     }
   });
-  const Button = styled('button', {
+  const Button$1 = styled('button', {
     background: 'none',
     outline: 'none',
     border: 'none',
@@ -9262,6 +9283,13 @@
     textAlign: 'left',
     '&:disabled': {
       cursor: 'not-allowed'
+    },
+    variants: {
+      hiddden: {
+        true: {
+          display: 'none'
+        }
+      }
     }
   });
   const IconWrapper = styled('div', {
@@ -9354,7 +9382,7 @@
     color: '$textDisable',
     display: 'inline-flex'
   });
-  function InputSelectCheck(_ref) {
+  const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       placeholder,
       option,
@@ -9376,12 +9404,15 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
-    const [initItem, setInitItem] = React__namespace.useState(option); //init filter selectedItems on useMultipleSelection
+    const [initItem, setInitItem] = React__default["default"].useState(option); //init filter selectedItems on useMultipleSelection
 
-    const [item, setItem] = React__namespace.useState(option);
-    const [selectedValue, setSelectedValue] = React__namespace.useState(value);
-    const [inputValue, setInputValue] = React__namespace.useState('');
-    const sortItem = React__namespace.useCallback(() => {
+    const [item, setItem] = React__default["default"].useState([]);
+    const [selectedValue, setSelectedValue] = React__default["default"].useState([]);
+    const [inputValue, setInputValue] = React__default["default"].useState('');
+    React.useEffect(() => {
+      setItem(option);
+    }, [option]);
+    const sortItem = React__default["default"].useCallback(() => {
       if (sortBy === 'id') {
         option.sort(function (a, b) {
           const idA = a.id.toUpperCase(); // ignore upper and lowercase
@@ -9438,27 +9469,24 @@
         return [...res, ...filterOption]; // add the missing elements
       }
     }, []) : option;
-    React__namespace.useEffect(() => {
+    React__default["default"].useEffect(() => {
       if (selectedValue.length > 0 && disabledOptions.length === 0) {
         setInitItem(sortValue);
         setItem(sortValue);
       }
     }, []);
-    React__namespace.useEffect(() => {
+    React__default["default"].useEffect(() => {
       sortItem();
     }, [sortBy]);
-    React__namespace.useEffect(() => {
+    React__default["default"].useEffect(() => {
       if (disabledOptions.length > 0) {
         setInitItem(generateOptions(sortDisabled));
         setItem(generateOptions(sortDisabled)); // setItem(generateOptions(option));
       }
     }, [disabledOptions]);
-    React__namespace.useEffect(() => {
+    React__default["default"].useEffect(() => {
       setSelectedValue(value);
     }, [value]);
-    React__namespace.useEffect(() => {
-      onChange && onChange(selectedValue);
-    }, [selectedValue]);
     const {
       getSelectedItemProps,
       getDropdownProps,
@@ -9509,6 +9537,7 @@
         let filterItems = selectedValue.filter(item => item !== selected.id);
         removeSelectedItem(selected);
         setSelectedValue(filterItems);
+        onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
       }
     };
 
@@ -9520,7 +9549,6 @@
       getItemProps,
       selectItem,
       openMenu,
-      closeMenu,
       highlightedIndex,
       isOpen
     } = Downshift.useCombobox({
@@ -9553,6 +9581,7 @@
                 openMenu();
                 addSelectedItem(selectedItem);
                 setSelectedValue([...selectedValue, selectedItem.id]);
+                onChange === null || onChange === void 0 ? void 0 : onChange([...selectedValue, selectedItem.id]);
                 selectItem(null);
               }
             }
@@ -9563,100 +9592,110 @@
         }
       }
     });
-    return /*#__PURE__*/React__namespace.createElement(Wrapper$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, _extends({
       css: css
     }, props, {
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 402,
-        columnNumber: 5
+        lineNumber: 421,
+        columnNumber: 7
       }
-    }), /*#__PURE__*/React__namespace.createElement(Select, {
+    }), /*#__PURE__*/React__default["default"].createElement(Select, {
       size: size,
       disabled: disabled || readOnly,
       isInvalid: isInvalid,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 403,
-        columnNumber: 7
+        lineNumber: 422,
+        columnNumber: 9
       }
-    }, /*#__PURE__*/React__namespace.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
+    }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
       preventKeyAction: isOpen,
       disabled: disabled || readOnly
-    })), {
+    }, {
+      suppressRefError: true
+    }), {
+      suppressRefError: true
+    }), {
       disabled: disabled || readOnly,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 404,
-        columnNumber: 9
+        lineNumber: 423,
+        columnNumber: 11
       }
-    }), search ? /*#__PURE__*/React__namespace.createElement(Input$5, _extends({}, getInputProps({
-      disabled: disabled || readOnly
+    }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
+      disabled: disabled || readOnly,
+      refKey: 'ref',
+      ref
+    }, {
+      suppressRefError: true
     }), {
       placeholder: placeholder,
       disabled: disabled || readOnly,
-      __self: this,
+      hiddden: !search,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 409,
+        lineNumber: 433,
         columnNumber: 13
       }
-    })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
+    })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
       disabled: disabled || readOnly
     }), {
       disabled: disabled || readOnly,
       size: size,
       type: "button",
-      __self: this,
+      hiddden: search,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 415,
+        lineNumber: 439,
         columnNumber: 13
       }
-    }), placeholder)), /*#__PURE__*/React__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
+    }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
       disabled: disabled || readOnly
     }), {
       disabled: disabled,
       readOnly: readOnly,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 425,
-        columnNumber: 9
+        lineNumber: 449,
+        columnNumber: 11
       }
-    }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
+    }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
       color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 430,
-        columnNumber: 11
+        lineNumber: 454,
+        columnNumber: 13
       }
-    }))), helperText && /*#__PURE__*/React__namespace.createElement(Paragraph, {
+    }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
       shortContentRegular: true,
       css: {
         paddingTop: 8,
         fontSize: 12,
         color: '$textSecondary'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 434,
-        columnNumber: 9
+        lineNumber: 458,
+        columnNumber: 11
       }
-    }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
+    }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 439,
-        columnNumber: 9
+        lineNumber: 463,
+        columnNumber: 11
       }
-    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
+    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       isRemovable: readOnly || disabled ? false : true,
       disabled: disabled,
       size: "lg",
@@ -9674,32 +9713,34 @@
           removeItem(selectedItem);
         }
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 441,
-        columnNumber: 13
+        lineNumber: 465,
+        columnNumber: 15
       }
-    }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
+    }), selectedItem.name))), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
         top: size === 'lg' ? '45px' : '35px'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 462,
-        columnNumber: 7
+        lineNumber: 486,
+        columnNumber: 9
       }
-    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
-      __self: this,
+    }, item.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
+      suppressRefError: true
+    }), {
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 467,
-        columnNumber: 11
+        lineNumber: 491,
+        columnNumber: 13
       }
-    }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
+    }), isOpen && item.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
       key: item.id
     }, getItemProps({
       item,
@@ -9711,93 +9752,95 @@
         cursor: item.isDisabled ? 'not-allowed' : 'pointer',
         color: item.isDisabled ? '$textDisable' : 'textPrimary'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 470,
-        columnNumber: 17
+        lineNumber: 494,
+        columnNumber: 19
       }
-    }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
+    }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
       css: {
         width: '16px',
         height: '16px',
         border: '1px solid $bgBorder',
         cursor: item.isDisabled ? 'not-allowed' : 'pointer'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 483,
-        columnNumber: 19
+        lineNumber: 507,
+        columnNumber: 21
       }
-    }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
+    }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
       color: colors$4.iconDisable,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 492,
-        columnNumber: 23
+        lineNumber: 516,
+        columnNumber: 25
       }
-    }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
+    }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
       color: colors$4.iconGreen,
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 496,
-        columnNumber: 25
+        lineNumber: 520,
+        columnNumber: 27
       }
-    })), /*#__PURE__*/React__namespace.createElement(Item$2, {
+    })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
       css: {
         backgroundColor: 'unset'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 500,
-        columnNumber: 19
+        lineNumber: 524,
+        columnNumber: 21
       }
-    }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
+    }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
       css: {
         height: 'auto'
       }
-    }, getMenuProps(), {
-      __self: this,
+    }, getMenuProps({}, {
+      suppressRefError: true
+    }), {
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 505,
-        columnNumber: 11
+        lineNumber: 529,
+        columnNumber: 13
       }
-    }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
-      __self: this,
+    }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 506,
-        columnNumber: 13
+        lineNumber: 530,
+        columnNumber: 15
       }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginRight: '6px'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 507,
-        columnNumber: 15
+        lineNumber: 531,
+        columnNumber: 17
       }
-    }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
+    }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
       size: "16px",
       color: colors$4.iconDisable,
       style: {
         verticalAlign: 'text-bottom'
       },
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 508,
-        columnNumber: 17
+        lineNumber: 532,
+        columnNumber: 19
       }
     })), textEmptyItem))));
-  }
+  });
   InputSelectCheck.propTypes = {
     placeholder: PropTypes__default["default"].string,
     option: PropTypes__default["default"].array.isRequired,
@@ -9831,18 +9874,19 @@
   };
 
   var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
-  function InputSelectTag(props) {
+  const InputSelectTag = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     return /*#__PURE__*/React__namespace.createElement(InputSelectCheck, _extends({
+      ref: ref,
       showSelectedTag: true
     }, props, {
-      __self: this,
+      __self: undefined,
       __source: {
         fileName: _jsxFileName$t,
         lineNumber: 6,
         columnNumber: 10
       }
     }));
-  }
+  });
   InputSelectTag.propTypes = {
     placeholder: PropTypes__default["default"].string,
     option: PropTypes__default["default"].array.isRequired,
@@ -9948,7 +9992,7 @@
       }
     }
   });
-  const Input$4 = styled('input', {
+  const Input$5 = styled('input', {
     display: 'flex',
     position: 'relative',
     flex: 'auto',
@@ -10060,7 +10104,7 @@
         lineNumber: 168,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Input$4, {
+    }, /*#__PURE__*/React__default["default"].createElement(Input$5, {
       type: "text",
       placeholder: placeholder,
       disabled: disabled,
@@ -10467,6 +10511,222 @@
     timeInterval: 1000
   };
 
+  // a string of all valid unicode whitespaces
+  var whitespaces$4 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+    '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+  var uncurryThis$e = functionUncurryThis;
+  var requireObjectCoercible$4 = requireObjectCoercible$a;
+  var toString$9 = toString$h;
+  var whitespaces$3 = whitespaces$4;
+
+  var replace$4 = uncurryThis$e(''.replace);
+  var whitespace = '[' + whitespaces$3 + ']';
+  var ltrim = RegExp('^' + whitespace + whitespace + '*');
+  var rtrim = RegExp(whitespace + whitespace + '*$');
+
+  // `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+  var createMethod$1 = function (TYPE) {
+    return function ($this) {
+      var string = toString$9(requireObjectCoercible$4($this));
+      if (TYPE & 1) string = replace$4(string, ltrim, '');
+      if (TYPE & 2) string = replace$4(string, rtrim, '');
+      return string;
+    };
+  };
+
+  var stringTrim = {
+    // `String.prototype.{ trimLeft, trimStart }` methods
+    // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+    start: createMethod$1(1),
+    // `String.prototype.{ trimRight, trimEnd }` methods
+    // https://tc39.es/ecma262/#sec-string.prototype.trimend
+    end: createMethod$1(2),
+    // `String.prototype.trim` method
+    // https://tc39.es/ecma262/#sec-string.prototype.trim
+    trim: createMethod$1(3)
+  };
+
+  var global$k = global$U;
+  var fails$8 = fails$t;
+  var uncurryThis$d = functionUncurryThis;
+  var toString$8 = toString$h;
+  var trim$1 = stringTrim.trim;
+  var whitespaces$2 = whitespaces$4;
+
+  var $parseInt$1 = global$k.parseInt;
+  var Symbol$6 = global$k.Symbol;
+  var ITERATOR$6 = Symbol$6 && Symbol$6.iterator;
+  var hex = /^[+-]?0x/i;
+  var exec$4 = uncurryThis$d(hex.exec);
+  var FORCED$2 = $parseInt$1(whitespaces$2 + '08') !== 8 || $parseInt$1(whitespaces$2 + '0x16') !== 22
+    // MS Edge 18- broken with boxed symbols
+    || (ITERATOR$6 && !fails$8(function () { $parseInt$1(Object(ITERATOR$6)); }));
+
+  // `parseInt` method
+  // https://tc39.es/ecma262/#sec-parseint-string-radix
+  var numberParseInt = FORCED$2 ? function parseInt(string, radix) {
+    var S = trim$1(toString$8(string));
+    return $parseInt$1(S, (radix >>> 0) || (exec$4(hex, S) ? 16 : 10));
+  } : $parseInt$1;
+
+  var $$d = _export;
+  var $parseInt = numberParseInt;
+
+  // `parseInt` method
+  // https://tc39.es/ecma262/#sec-parseint-string-radix
+  $$d({ global: true, forced: parseInt != $parseInt }, {
+    parseInt: $parseInt
+  });
+
+  var Input$4 = styled(InputNumber, {
+    border: "1px solid $gray150",
+    borderLeft: 'none',
+    borderRight: 'none',
+    borderRadius: 0,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: 600,
+    color: '$textPrimary',
+    userSelect: 'none',
+    '&:disabled': {
+      backgroundColor: '$btnDisable',
+      border: "1px solid $gray150",
+      '&:hover': {
+        borderColor: '$gray150'
+      }
+    }
+  });
+  var Button = styled(Button$3, {
+    border: "1px solid $gray150 !important",
+    paddingRight: '16px !important',
+    paddingLeft: '16px !important',
+    '&:hover': {
+      backgroundColor: '$primary50',
+      border: '1px solid $btnPrimary !important'
+    },
+    '&:active': {
+      backgroundColor: '$primary100',
+      border: '1px solid $btnPrimary !important'
+    },
+    '&:focus': {
+      outline: 0,
+      backgroundColor: '$primary50',
+      border: '1px solid $btnPrimary !important'
+    },
+    '&:disabled': {
+      '&:hover': {
+        borderColor: '$gray150 !important'
+      }
+    },
+    variants: {
+      counterType: {
+        minus: {
+          borderRight: 'none !important',
+          borderTopRightRadius: '0px !important',
+          borderBottomRightRadius: '0px !important',
+          '&:disabled': {
+            border: "1px solid $gray150 !important"
+          }
+        },
+        plus: {
+          borderLeft: 'none !important',
+          borderTopLeftRadius: '0px !important',
+          borderBottomLeftRadius: '0px !important',
+          '&:disabled': {
+            border: "1px solid $gray150 !important"
+          }
+        }
+      }
+    }
+  });
+  var InputCounter = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var _a;
+
+    var css = props.css,
+        value = props.value,
+        onChange = props.onChange,
+        allowNegative = props.allowNegative,
+        min = props.min,
+        max = props.max,
+        disabled = props.disabled;
+
+    var _b = React.useState((_a = min !== null && min !== void 0 ? min : value) !== null && _a !== void 0 ? _a : 0),
+        inputValue = _b[0],
+        setInputValue = _b[1];
+
+    React.useEffect(function () {
+      if (min && inputValue < min) {
+        setInputValue(min);
+        onChange === null || onChange === void 0 ? void 0 : onChange(min);
+      }
+
+      if (max && inputValue > max) {
+        setInputValue(max);
+        onChange === null || onChange === void 0 ? void 0 : onChange(max);
+      }
+    }, [inputValue, min, max, onChange]);
+
+    function handleUp() {
+      if (!max || inputValue < max) {
+        setInputValue(inputValue + 1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(inputValue + 1);
+      }
+    }
+
+    function handleDown() {
+      if (inputValue !== 0 || allowNegative) {
+        if (!min || inputValue > min) {
+          setInputValue(inputValue - 1);
+          onChange === null || onChange === void 0 ? void 0 : onChange(inputValue - 1);
+        }
+      }
+    }
+
+    function handleChange(e) {
+      setInputValue(parseInt(e.target.value));
+      onChange === null || onChange === void 0 ? void 0 : onChange(parseInt(e.target.value));
+    }
+
+    return jsxRuntime.jsxs(Flex$1, __assign({
+      direction: "row",
+      align: "center",
+      css: css
+    }, {
+      children: [jsxRuntime.jsx(Button, __assign({
+        disabled: disabled,
+        buttonType: "secondary",
+        counterType: "minus",
+        icon: true,
+        onClick: handleDown
+      }, {
+        children: jsxRuntime.jsx(icons.MinusOutline, {
+          color: disabled ? colors$4.iconDisable : colors$4.primary500
+        }, void 0)
+      }), void 0), jsxRuntime.jsx(Input$4, {
+        ref: ref,
+        disabled: disabled,
+        value: inputValue,
+        allowNegative: allowNegative,
+        onChange: handleChange
+      }, void 0), jsxRuntime.jsx(Button, __assign({
+        disabled: disabled,
+        buttonType: "secondary",
+        counterType: "plus",
+        icon: true,
+        onClick: handleUp
+      }, {
+        children: jsxRuntime.jsx(icons.PlusOutline, {
+          color: disabled ? colors$4.iconDisable : colors$4.primary500
+        }, void 0)
+      }), void 0)]
+    }), void 0);
+  });
+  InputCounter.defaultProps = {
+    allowNegative: false,
+    disabled: false
+  };
+
   const _excluded$b = ["children"];
   var _jsxFileName$r = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
   const {
@@ -10558,8 +10818,8 @@
       ref: floating,
       style: Object.assign({
         position: strategy,
-        top: isMobile ? 0 : y != null ? y : '',
-        left: isMobile ? 0 : x != null ? x : '',
+        top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
+        left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
         zIndex: zIndices.popover
       }, style)
     }), {
@@ -11384,74 +11644,6 @@
     isToggle: true
   };
 
-  // a string of all valid unicode whitespaces
-  var whitespaces$4 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
-    '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
-
-  var uncurryThis$e = functionUncurryThis;
-  var requireObjectCoercible$4 = requireObjectCoercible$a;
-  var toString$9 = toString$h;
-  var whitespaces$3 = whitespaces$4;
-
-  var replace$4 = uncurryThis$e(''.replace);
-  var whitespace = '[' + whitespaces$3 + ']';
-  var ltrim = RegExp('^' + whitespace + whitespace + '*');
-  var rtrim = RegExp(whitespace + whitespace + '*$');
-
-  // `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-  var createMethod$1 = function (TYPE) {
-    return function ($this) {
-      var string = toString$9(requireObjectCoercible$4($this));
-      if (TYPE & 1) string = replace$4(string, ltrim, '');
-      if (TYPE & 2) string = replace$4(string, rtrim, '');
-      return string;
-    };
-  };
-
-  var stringTrim = {
-    // `String.prototype.{ trimLeft, trimStart }` methods
-    // https://tc39.es/ecma262/#sec-string.prototype.trimstart
-    start: createMethod$1(1),
-    // `String.prototype.{ trimRight, trimEnd }` methods
-    // https://tc39.es/ecma262/#sec-string.prototype.trimend
-    end: createMethod$1(2),
-    // `String.prototype.trim` method
-    // https://tc39.es/ecma262/#sec-string.prototype.trim
-    trim: createMethod$1(3)
-  };
-
-  var global$k = global$U;
-  var fails$8 = fails$t;
-  var uncurryThis$d = functionUncurryThis;
-  var toString$8 = toString$h;
-  var trim$1 = stringTrim.trim;
-  var whitespaces$2 = whitespaces$4;
-
-  var $parseInt$1 = global$k.parseInt;
-  var Symbol$6 = global$k.Symbol;
-  var ITERATOR$6 = Symbol$6 && Symbol$6.iterator;
-  var hex = /^[+-]?0x/i;
-  var exec$4 = uncurryThis$d(hex.exec);
-  var FORCED$2 = $parseInt$1(whitespaces$2 + '08') !== 8 || $parseInt$1(whitespaces$2 + '0x16') !== 22
-    // MS Edge 18- broken with boxed symbols
-    || (ITERATOR$6 && !fails$8(function () { $parseInt$1(Object(ITERATOR$6)); }));
-
-  // `parseInt` method
-  // https://tc39.es/ecma262/#sec-parseint-string-radix
-  var numberParseInt = FORCED$2 ? function parseInt(string, radix) {
-    var S = trim$1(toString$8(string));
-    return $parseInt$1(S, (radix >>> 0) || (exec$4(hex, S) ? 16 : 10));
-  } : $parseInt$1;
-
-  var $$d = _export;
-  var $parseInt = numberParseInt;
-
-  // `parseInt` method
-  // https://tc39.es/ecma262/#sec-parseint-string-radix
-  $$d({ global: true, forced: parseInt != $parseInt }, {
-    parseInt: $parseInt
-  });
-
   const _excluded$7 = ["children"];
   var _jsxFileName$n = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
@@ -11553,7 +11745,7 @@
         props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
     const getValue = () => {
-      let value = props == null ? void 0 : props.value;
+      let value = props === null || props === void 0 ? void 0 : props.value;
 
       if (typeof value === 'number' || parseInt(value)) {
         if (Math.sign(value) === 1 || Math.sign(value) === 0) {
@@ -14179,7 +14371,7 @@
           }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
             gap: 3
           }, {
-            children: [jsxRuntime.jsx(Button$2, __assign({
+            children: [jsxRuntime.jsx(Button$3, __assign({
               buttonType: "ghost",
               css: {
                 fontWeight: 600
@@ -14189,7 +14381,7 @@
               size: "sm"
             }, {
               children: "Batal"
-            }), void 0), jsxRuntime.jsx(Button$2, __assign({
+            }), void 0), jsxRuntime.jsx(Button$3, __assign({
               css: {
                 fontWeight: 600
               },
@@ -14799,7 +14991,7 @@
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
         }, {
-          children: [jsxRuntime.jsx(Button$2, __assign({
+          children: [jsxRuntime.jsx(Button$3, __assign({
             buttonType: "ghost",
             size: "sm",
             css: {
@@ -14812,7 +15004,7 @@
             disabled: disabled
           }, {
             children: "Batal"
-          }), void 0), jsxRuntime.jsx(Button$2, __assign({
+          }), void 0), jsxRuntime.jsx(Button$3, __assign({
             size: "sm",
             css: {
               width: '160px',
@@ -16035,7 +16227,7 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
-    return /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       onClick: onClick,
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
@@ -16383,7 +16575,7 @@
         lineNumber: 40,
         columnNumber: 11
       }
-    }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
       css: limitItemContainerStyle(selectedLimit === limit),
       onClick: () => onChange(limit),
@@ -16601,18 +16793,10 @@
             }
 
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$3, __assign({
-                css: customStyle
-              }, row.getRowProps(), {
-                key: "".concat(row.id, "-group_header")
-              }), jsxRuntime.jsx(TableCell$3, __assign({
-                colSpan: 100
+              children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
+                variant: "contentButton"
               }, {
-                children: (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
-                  variant: "contentButton"
-                }, {
-                  children: row.cells[0].render('Cell')
-                }), void 0)
+                children: row.cells[0].render('Cell')
               }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
                 css: customStyle
               }, row.getRowProps(), {
@@ -16638,7 +16822,7 @@
                     }), void 0) : cell.render('Cell')
                   }), void 0);
                 })
-              }), void 0), row.isExpanded ? jsxRuntime.jsx(TableRow$3, {
+              }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsxRuntime.jsx(TableRow$3, {
                 children: jsxRuntime.jsxs(TableCell$3, __assign({
                   colSpan: visibleColumns.length
                 }, {
@@ -16929,7 +17113,8 @@
           var newElement = item[groupKey].map(function (childItem, index) {
             return __assign(__assign({}, childItem), {
               isTopChild: index === 0,
-              parentOriginal: item
+              parentOriginal: item,
+              isBottomChild: index === item[groupKey].length - 1
             });
           });
           rawData.splice(index, 1);
@@ -17249,22 +17434,10 @@
                 }
 
                 return jsxRuntime.jsxs(React__namespace.Fragment, {
-                  children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$2, __assign({
-                    css: customStyle
-                  }, row.getRowProps(), {
-                    key: "".concat(row.id, "-group_header")
-                  }), jsxRuntime.jsx(TableCell$2, __assign({
-                    colSpan: 100,
-                    css: {
-                      padding: '20px 8px',
-                      verticalAlign: cellAlign
-                    }
+                  children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
+                    variant: "contentButton"
                   }, {
-                    children: (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
-                      variant: "contentButton"
-                    }, {
-                      children: row.cells[0].render('Cell')
-                    }), void 0)
+                    children: row.cells[0].render('Cell')
                   }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({
                     css: customStyle
                   }, row.getRowProps(), {
@@ -17280,7 +17453,7 @@
                         children: cell.render('Cell')
                       }), void 0);
                     })
-                  }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
+                  }), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? subRowCells.map(function (cell, index) {
                     return jsxRuntime.jsxs(TableRow$2, __assign({
                       subRow: true
                     }, {
@@ -18779,7 +18952,7 @@
         if (!props.onOpenAutoFocus) {
           e.preventDefault();
         } else {
-          props == null ? void 0 : props.onOpenAutoFocus();
+          props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
         }
       },
       __self: undefined,
@@ -18896,12 +19069,12 @@
         lineNumber: 157,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
-      disabled: props == null ? void 0 : props.disabledButton
-    }, props == null ? void 0 : props.actionButtonProps, {
+      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -18916,16 +19089,16 @@
         lineNumber: 170,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       size: "sm",
       onClick: buttonCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
-      disabled: props == null ? void 0 : props.disabledButton
-    }, props == null ? void 0 : props.cancelButtonProps, {
+      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -18940,15 +19113,15 @@
         lineNumber: 185,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props == null ? void 0 : props.disabledButton
-    }, props == null ? void 0 : props.actionButtonProps, {
+      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -19100,15 +19273,15 @@
         lineNumber: 242,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       size: "sm",
       onClick: props.onConfirm,
       buttonType: props.dialogType,
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props == null ? void 0 : props.disabledButton
-    }, props == null ? void 0 : props.actionButtonProps, {
+      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -19123,16 +19296,16 @@
         lineNumber: 256,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       size: "sm",
       onClick: props.onCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
-      disabled: props == null ? void 0 : props.disabledButton
-    }, props == null ? void 0 : props.cancelButtonProps, {
+      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -19147,15 +19320,15 @@
         lineNumber: 271,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
       size: "sm",
       onClick: props.onConfirm,
       buttonType: props.dialogType,
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props == null ? void 0 : props.disabledButton
-    }, props == null ? void 0 : props.actionButtonProps, {
+      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
+    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -21670,7 +21843,7 @@
                 file: fileProgress,
                 indexReplace: indexReplace.current,
                 isReplace: indexReplace.current !== null
-              })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
+              })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
             }
           }).then(result => {
             var _onChange2, _onChange2$then;
@@ -21692,7 +21865,7 @@
               file: fileSuccess,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
+            })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
           }).catch(error => {
             var _onChange3, _onChange3$then;
 
@@ -21713,7 +21886,7 @@
               file: fileError,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
+            })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
           });
         } else {
           var _onChange4, _onChange4$then;
@@ -21723,7 +21896,7 @@
             file: newFile,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
+          })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
         }
 
         if (indexReplace.current !== null) {
@@ -21750,9 +21923,9 @@
     }
 
     function handleCrop() {
-      if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
+      if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
         imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-          const file = new File([blob], fileState == null ? void 0 : fileState.name, {
+          const file = new File([blob], fileState === null || fileState === void 0 ? void 0 : fileState.name, {
             type: blob.type
           });
           handleUpload([file]);
@@ -21820,22 +21993,22 @@
     function handleOpenFile(file) {
       var _String, _file$name;
 
-      let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
+      let extension = (_String = String(file === null || file === void 0 ? void 0 : (_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop())) === null || _String === void 0 ? void 0 : _String.toLowerCase();
 
       if (extension === 'pdf') {
-        window.open(file == null ? void 0 : file.url);
+        window.open(file === null || file === void 0 ? void 0 : file.url);
       } else {
-        request__default["default"].get(file == null ? void 0 : file.url).end((err, res) => {
+        request__default["default"].get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
           if (err) {
             console.error(err.message);
           }
 
-          if (res && res != null && res.ok) {
-            const response = res == null ? void 0 : res.text;
+          if (res && res !== null && res !== void 0 && res.ok) {
+            const response = res === null || res === void 0 ? void 0 : res.text;
             const url = window.URL.createObjectURL(new Blob([response]));
             const link = document.createElement('a');
             link.href = url;
-            link.setAttribute('download', file == null ? void 0 : file.name);
+            link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -21905,12 +22078,12 @@
     }
 
     const renderPicture = () => {
-      return fileList == null ? void 0 : fileList.map((item, index) => {
-        if ((item == null ? void 0 : item.status) === 'uploading') {
+      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item == null ? void 0 : item.percent,
-            loading: item == null ? void 0 : item.loading,
+            progress: item === null || item === void 0 ? void 0 : item.percent,
+            loading: item === null || item === void 0 ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -21985,14 +22158,14 @@
     };
 
     const renderFile = () => {
-      return fileList == null ? void 0 : fileList.map((item, index) => {
+      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
         var _item$name;
 
-        if ((item == null ? void 0 : item.status) === 'uploading') {
+        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item == null ? void 0 : item.percent,
-            loading: item == null ? void 0 : item.loading,
+            progress: item === null || item === void 0 ? void 0 : item.percent,
+            loading: item === null || item === void 0 ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -22059,7 +22232,7 @@
             lineNumber: 611,
             columnNumber: 17
           }
-        }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           label: item.name,
           __self: undefined,
           __source: {
@@ -22231,7 +22404,7 @@
           lineNumber: 686,
           columnNumber: 11
         }
-      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -22265,7 +22438,7 @@
           lineNumber: 692,
           columnNumber: 17
         }
-      }, placeholder != null ? placeholder : `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -22315,7 +22488,8 @@
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
         css: {
           padding: '$spacing-03',
-          overflowY: 'auto'
+          overflowY: 'auto',
+          textAlign: 'center'
         },
         __self: this,
         __source: {
@@ -22395,7 +22569,7 @@
           lineNumber: 727,
           columnNumber: 13
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
         buttonType: "secondary",
         onClick: toggleModal,
         __self: this,
@@ -22404,7 +22578,7 @@
           lineNumber: 728,
           columnNumber: 15
         }
-      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
         onClick: handleCrop,
         __self: this,
         __source: {
@@ -22412,12 +22586,12 @@
           lineNumber: 731,
           columnNumber: 15
         }
-      }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
+      }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
     }
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
+      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -22853,10 +23027,10 @@
     const [isPopover, setIsPopover] = React.useState(false);
 
     function getColor() {
-      const color = props == null ? void 0 : props.color;
+      const color = props === null || props === void 0 ? void 0 : props.color;
 
       if (typeof color === 'string') {
-        return color == null ? void 0 : color.toUpperCase();
+        return color === null || color === void 0 ? void 0 : color.toUpperCase();
       }
 
       return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -25826,9 +26000,9 @@
             lineNumber: 119,
             columnNumber: 30
           }
-        }), data[i - 1].title, ((_data = data[i - 1]) == null ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data2 = data[i - 1]) == null ? void 0 : _data2.tooltipsContents,
+          label: (_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25899,10 +26073,10 @@
             lineNumber: 155,
             columnNumber: 15
           }
-        }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
+          label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -25970,30 +26144,40 @@
   const Default = props => {
     const [state, updateState] = React__default["default"].useState(Object.assign({
       isComplete: [],
-      hide: false
+      hide: props.hide || false
     }, props.state));
     React.useEffect(() => {
       updateState(current => Object.assign({}, current, {
         isComplete: props.completedSteps || []
       }));
     }, [props.completedSteps]);
+    React.useEffect(() => {
+      updateState(prev => Object.assign({}, prev, {
+        hide: props.hide
+      }));
+    }, [props.hide]);
+    React.useEffect(() => {
+      var _props$onChangeVisibi;
+
+      props === null || props === void 0 ? void 0 : (_props$onChangeVisibi = props.onChangeVisibility) === null || _props$onChangeVisibi === void 0 ? void 0 : _props$onChangeVisibi.call(props, state.hide);
+    }, [state.hide]);
 
     const toogleVisibility = value => {
-      updateState(Object.assign({}, state, {
-        hide: !state.hide
+      updateState(prev => Object.assign({}, prev, {
+        hide: !prev.hide
       }));
     };
 
     const getIsComplete = currentStep => {
       var _state$isComplete;
 
-      return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
+      return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
     };
 
     const getTitleStep = currentStep => {
       var _props$navContents, _props$navContents2;
 
-      return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
+      return props === null || props === void 0 ? void 0 : (_props$navContents = props.navContents) === null || _props$navContents === void 0 ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) === null || _props$navContents2 === void 0 ? void 0 : _props$navContents2.title;
     };
 
     const setState = value => {
@@ -26039,17 +26223,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 265,
+        lineNumber: 273,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
       value: {
         toogleVisibility,
-        isHide: state == null ? void 0 : state.hide,
+        isHide: state === null || state === void 0 ? void 0 : state.hide,
         setComplete,
         setState,
         state,
-        SW: state == null ? void 0 : state.SW,
+        SW: state === null || state === void 0 ? void 0 : state.SW,
         forbidClickNav: props.forbidClickNav,
         titles: props.titles,
         isMobile: props.isMobile,
@@ -26061,7 +26245,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 266,
+        lineNumber: 274,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -26073,7 +26257,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 288,
+          lineNumber: 296,
           columnNumber: 16
         }
       }),
@@ -26083,7 +26267,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 283,
+        lineNumber: 291,
         columnNumber: 9
       }
     }), props.children)));
@@ -26221,10 +26405,10 @@
     function getDatasets(content, activeId, isCollapse) {
       const datasets = [];
 
-      for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
+      for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
         var _content$i;
 
-        if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
+        if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
           datasets.unshift(content[i]);
         } else {
           datasets.push(content[i]);
@@ -26264,7 +26448,7 @@
         lineNumber: 99,
         columnNumber: 7
       }
-    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
+    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
       return /*#__PURE__*/React__default["default"].createElement(List, {
         key: index,
         __self: this,
@@ -26281,11 +26465,11 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
-        "data-to-scrollspy-id": item == null ? void 0 : item.id,
+        "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
@@ -26294,8 +26478,8 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
         className: "link-title",
-        active: (item == null ? void 0 : item.id) === activeId,
-        href: `#${item == null ? void 0 : item.id}`,
+        active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
+        href: `#${item === null || item === void 0 ? void 0 : item.id}`,
         onClick: e => {
           e.preventDefault();
           const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
@@ -26324,7 +26508,7 @@
           lineNumber: 117,
           columnNumber: 17
         }
-      }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
+      }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
     })));
   }
 
@@ -27909,7 +28093,7 @@
               isTruncated: true
             }, {
               children: inputValue
-            }), void 0), jsxRuntime.jsx(Button$2, __assign({
+            }), void 0), jsxRuntime.jsx(Button$3, __assign({
               type: "button",
               size: "sm",
               buttonType: "secondary",
@@ -28372,7 +28556,7 @@
           }
         }
       }, {
-        children: jsxRuntime.jsx(Button$2, __assign({
+        children: jsxRuntime.jsx(Button$3, __assign({
           buttonType: "ghost",
           css: {
             fontWeight: 600,
@@ -30655,7 +30839,7 @@
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
   exports.BreadcrumbLink = BreadcrumbLink;
-  exports.Button = Button$2;
+  exports.Button = Button$3;
   exports.ButtonDropdown = ButtonDropdown;
   exports.ButtonGroup = ButtonGroup$1;
   exports.ButtonGroupItem = ButtonGroupItem;
@@ -30714,6 +30898,7 @@
   exports.InputCheckbox = InputCheckbox;
   exports.InputColorPicker = InputColorPicker;
   exports.InputCombobox = InputCombobox;
+  exports.InputCounter = InputCounter;
   exports.InputCreatable = InputCreatable;
   exports.InputDatePicker = InputDatePicker;
   exports.InputGroup = InputGroup;
@@ -30801,6 +30986,7 @@
   exports.TOP_RIGHT_POSITION = TOP_RIGHT_POSITION;
   exports.Table = Table;
   exports.TableBody = TableBody$2;
+  exports.TableCell = TableCell$2;
   exports.TableColumn = TableColumn;
   exports.TableContent = TableContent$2;
   exports.TableFoot = TableFoot$2;
@@ -30811,6 +30997,7 @@
   exports.TableHeaderCellContainer = TableHeaderCellContainer;
   exports.TableOfContent = TableOfContent;
   exports.TableOfContentPage = TableOfContentPage;
+  exports.TableRow = TableRow$2;
   exports.Tabs = Tabs$1;
   exports.TabsContent = TabsContent$1;
   exports.TabsList = TabsList$1;