@majoo-ui/react 1.49.3 → 1.50.0

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, cloneElement, useCallback, useReducer } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useCallback, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, PlusOutline, MinusOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -3564,7 +3564,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   onClick: e => {
     e.preventDefault();
     e.stopPropagation();
-    value == null ? void 0 : value.onRemove();
+    value === null || value === void 0 ? void 0 : value.onRemove();
   },
   __self: undefined,
   __source: {
@@ -3641,7 +3641,7 @@ const SingleTagBanner = props => {
     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,
@@ -3998,7 +3998,7 @@ const ButtonPrimitive = styled('button', {
     }
   }
 });
-const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+const Button$3 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
     children,
     type,
@@ -5634,7 +5634,7 @@ const Checkbox = _ref => {
   const [isChecked, setChecked] = useState(false);
   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.createElement(StyledCheckbox, _extends({
     id: id,
@@ -6232,7 +6232,7 @@ const InputRadioContext = /*#__PURE__*/React__default.createContext();
 var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
-  return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
+  return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
@@ -6247,7 +6247,7 @@ function InputRadioGroup(props) {
       lineNumber: 14,
       columnNumber: 9
     }
-  }), React__default.Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+  }), React__default.Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
     style: Object.assign({}, child.props.style, {
       opacity: 1
     })
@@ -6438,7 +6438,7 @@ const InputRadio = _ref => {
     value,
     outlined
   }) => {
-    const checked = value != null ? value : defaultValue;
+    const checked = value !== null && value !== void 0 ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$7, {
       align: "center",
       gap: 4,
@@ -7340,7 +7340,7 @@ Tag.defaultProps = {
   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,
@@ -7414,7 +7414,7 @@ const InputTagsComponent = styled('div', {
     }
   }
 });
-const Input$7 = styled('input', {
+const Input$8 = styled('input', {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
@@ -7451,6 +7451,7 @@ function TagsInput(_ref) {
     isInvalid,
     placeholder,
     onChange,
+    onEnter,
     onInputChange,
     value,
     disabled,
@@ -7474,19 +7475,31 @@ function TagsInput(_ref) {
   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 = '';
     }
@@ -7512,7 +7525,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 164,
+      lineNumber: 168,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputTagsComponent, _extends({
@@ -7525,10 +7538,10 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 165,
+      lineNumber: 169,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(Input$7, {
+  }), /*#__PURE__*/React__default.createElement(Input$8, {
     type: "text",
     onKeyUp: event => addTags(event) // onKeyDown={event => removeTags(tags.length - 1, event.key)}
     ,
@@ -7540,15 +7553,15 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 173,
+      lineNumber: 177,
       columnNumber: 9
     }
-  })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
+  })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
     color: "red",
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 187,
+      lineNumber: 191,
       columnNumber: 11
     }
   }, pattern.errorMessage) : /*#__PURE__*/React__default.createElement(FormHelper, {
@@ -7556,7 +7569,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 189,
+      lineNumber: 193,
       columnNumber: 11
     }
   }, "Invalid Input")), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -7570,14 +7583,14 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 193,
+      lineNumber: 197,
       columnNumber: 9
     }
   }, helperText), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 197,
+      lineNumber: 201,
       columnNumber: 7
     }
   }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
@@ -7590,7 +7603,7 @@ function TagsInput(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$A,
-      lineNumber: 199,
+      lineNumber: 203,
       columnNumber: 11
     }
   }, tag))));
@@ -7600,6 +7613,7 @@ TagsInput.propTypes = {
   size: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.arrayOf(PropTypes.string),
+  onEnter: PropTypes.func,
   onInputChange: PropTypes.func,
   max: PropTypes.number,
   maxChar: PropTypes.number,
@@ -8166,7 +8180,7 @@ const SelectBox = styled(Flex$1, {
     }
   }
 });
-const Button$1 = styled('button', {
+const Button$2 = styled('button', {
   display: 'flex',
   width: '100%',
   height: '100%',
@@ -8198,7 +8212,7 @@ const Button$1 = styled('button', {
     }
   }
 });
-const Input$6 = styled('input', {
+const Input$7 = styled('input', {
   marginLeft: '$spacing-05',
   display: 'flex',
   width: '100%',
@@ -8330,7 +8344,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
         width: '$spacing-05',
         padding: 0
       } : undefined
-    }, void 0), jsx(Input$6, Object.assign({}, inputProps, props, {
+    }, void 0), jsx(Input$7, Object.assign({}, inputProps, props, {
       placeholder: placeholder,
       readOnly: readOnly,
       isReadOnly: readOnly,
@@ -8535,7 +8549,7 @@ function InputSelect(_a) {
                 disabled: disabled || readOnly
               }).onClick : undefined
             }, void 0)
-          }), void 0) : jsx(Button$1, Object.assign({}, getToggleButtonProps({
+          }), void 0) : jsx(Button$2, Object.assign({}, getToggleButtonProps({
             disabled: disabled || readOnly
           }), {
             disabled: disabled,
@@ -9105,7 +9119,7 @@ const InputWrapper$1 = styled('div', {
     }
   }
 });
-const Input$5 = styled('input', {
+const Input$6 = styled('input', {
   width: '100%',
   textAlign: 'left',
   background: 'unset',
@@ -9116,7 +9130,7 @@ const Input$5 = styled('input', {
     cursor: 'not-allowed'
   }
 });
-const Button = styled('button', {
+const Button$1 = styled('button', {
   background: 'none',
   outline: 'none',
   border: 'none',
@@ -9240,12 +9254,15 @@ function InputSelectCheck(_ref) {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
-  const [initItem, setInitItem] = React.useState(option); //init filter selectedItems on useMultipleSelection
+  const [initItem, setInitItem] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
 
-  const [item, setItem] = React.useState(option);
-  const [selectedValue, setSelectedValue] = React.useState(value);
-  const [inputValue, setInputValue] = React.useState('');
-  const sortItem = React.useCallback(() => {
+  const [item, setItem] = React__default.useState([]);
+  const [selectedValue, setSelectedValue] = React__default.useState([]);
+  const [inputValue, setInputValue] = React__default.useState('');
+  useEffect(() => {
+    setItem(option);
+  }, [option]);
+  const sortItem = React__default.useCallback(() => {
     if (sortBy === 'id') {
       option.sort(function (a, b) {
         const idA = a.id.toUpperCase(); // ignore upper and lowercase
@@ -9302,27 +9319,24 @@ function InputSelectCheck(_ref) {
       return [...res, ...filterOption]; // add the missing elements
     }
   }, []) : option;
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItem(sortValue);
       setItem(sortValue);
     }
   }, []);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     sortItem();
   }, [sortBy]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (disabledOptions.length > 0) {
       setInitItem(generateOptions(sortDisabled));
       setItem(generateOptions(sortDisabled)); // setItem(generateOptions(option));
     }
   }, [disabledOptions]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     setSelectedValue(value);
   }, [value]);
-  React.useEffect(() => {
-    onChange && onChange(selectedValue);
-  }, [selectedValue]);
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -9373,6 +9387,7 @@ function InputSelectCheck(_ref) {
       let filterItems = selectedValue.filter(item => item !== selected.id);
       removeSelectedItem(selected);
       setSelectedValue(filterItems);
+      onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
     }
   };
 
@@ -9417,6 +9432,7 @@ function InputSelectCheck(_ref) {
               openMenu();
               addSelectedItem(selectedItem);
               setSelectedValue([...selectedValue, selectedItem.id]);
+              onChange === null || onChange === void 0 ? void 0 : onChange([...selectedValue, selectedItem.id]);
               selectItem(null);
             }
           }
@@ -9427,26 +9443,26 @@ function InputSelectCheck(_ref) {
       }
     }
   });
-  return /*#__PURE__*/React.createElement(Wrapper$1, _extends({
+  return /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     css: css
   }, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 402,
+      lineNumber: 404,
       columnNumber: 5
     }
-  }), /*#__PURE__*/React.createElement(Select, {
+  }), /*#__PURE__*/React__default.createElement(Select, {
     size: size,
     disabled: disabled || readOnly,
     isInvalid: isInvalid,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 403,
+      lineNumber: 405,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
+  }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
     preventKeyAction: isOpen,
     disabled: disabled || readOnly
   })), {
@@ -9454,10 +9470,10 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 404,
+      lineNumber: 406,
       columnNumber: 9
     }
-  }), search ? /*#__PURE__*/React.createElement(Input$5, _extends({}, getInputProps({
+  }), search ? /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
     disabled: disabled || readOnly
   }), {
     placeholder: placeholder,
@@ -9465,10 +9481,10 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 409,
+      lineNumber: 411,
       columnNumber: 13
     }
-  })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
+  })) : /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
     disabled: disabled || readOnly
   }), {
     disabled: disabled || readOnly,
@@ -9477,10 +9493,10 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 415,
+      lineNumber: 417,
       columnNumber: 13
     }
-  }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
+  }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
     disabled: disabled || readOnly
   }), {
     disabled: disabled,
@@ -9488,18 +9504,18 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 425,
+      lineNumber: 427,
       columnNumber: 9
     }
-  }), /*#__PURE__*/React.createElement(IconCaretDown, {
+  }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
     color: disabled || readOnly ? colors$4.iconDisable : colors$4.iconPrimary,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 430,
+      lineNumber: 432,
       columnNumber: 11
     }
-  }))), helperText && /*#__PURE__*/React.createElement(Paragraph, {
+  }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
     shortContentRegular: true,
     css: {
       paddingTop: 8,
@@ -9509,18 +9525,18 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 434,
+      lineNumber: 436,
       columnNumber: 9
     }
-  }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
+  }, helperText), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 439,
+      lineNumber: 441,
       columnNumber: 9
     }
-  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
+  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
     isRemovable: readOnly || disabled ? false : true,
     disabled: disabled,
     size: "lg",
@@ -9541,10 +9557,10 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 441,
+      lineNumber: 443,
       columnNumber: 13
     }
-  }), selectedItem.name))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
+  }), selectedItem.name))), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -9553,17 +9569,17 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 462,
+      lineNumber: 464,
       columnNumber: 7
     }
-  }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
+  }, item.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 467,
+      lineNumber: 469,
       columnNumber: 11
     }
-  }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper$1, _extends({
+  }), isOpen && item.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
     key: item.id
   }, getItemProps({
     item,
@@ -9578,10 +9594,10 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 470,
+      lineNumber: 472,
       columnNumber: 17
     }
-  }), /*#__PURE__*/React.createElement(IconWrapper, {
+  }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     css: {
       width: '16px',
       height: '16px',
@@ -9591,36 +9607,36 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 483,
+      lineNumber: 485,
       columnNumber: 19
     }
-  }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
+  }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
     color: colors$4.iconDisable,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 492,
+      lineNumber: 494,
       columnNumber: 23
     }
-  }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
+  }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
     color: colors$4.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 496,
+      lineNumber: 498,
       columnNumber: 25
     }
-  })), /*#__PURE__*/React.createElement(Item$2, {
+  })), /*#__PURE__*/React__default.createElement(Item$2, {
     css: {
       backgroundColor: 'unset'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 500,
+      lineNumber: 502,
       columnNumber: 19
     }
-  }, item.name)))) : /*#__PURE__*/React.createElement(Option, _extends({
+  }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
     css: {
       height: 'auto'
     }
@@ -9628,27 +9644,27 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 505,
+      lineNumber: 507,
       columnNumber: 11
     }
-  }), /*#__PURE__*/React.createElement(StyledDiv$1, {
+  }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 506,
+      lineNumber: 508,
       columnNumber: 13
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginRight: '6px'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 507,
+      lineNumber: 509,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
+  }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
     size: "16px",
     color: colors$4.iconDisable,
     style: {
@@ -9657,7 +9673,7 @@ function InputSelectCheck(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 508,
+      lineNumber: 510,
       columnNumber: 17
     }
   })), textEmptyItem))));
@@ -9812,7 +9828,7 @@ const InputWrapper = styled('div', {
     }
   }
 });
-const Input$4 = styled('input', {
+const Input$5 = styled('input', {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
@@ -9924,7 +9940,7 @@ function InputCreatable({
       lineNumber: 168,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(Input$4, {
+  }, /*#__PURE__*/React__default.createElement(Input$5, {
     type: "text",
     placeholder: placeholder,
     disabled: disabled,
@@ -10299,6 +10315,220 @@ ResendOTP.defaultProps = {
   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
+});
+
+const 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'
+    }
+  }
+});
+const 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`
+        }
+      }
+    }
+  }
+});
+const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
+  var _a;
+
+  const {
+    css,
+    value,
+    onChange,
+    allowNegative,
+    min,
+    max,
+    disabled
+  } = props;
+  const [inputValue, setInputValue] = useState((_a = min !== null && min !== void 0 ? min : value) !== null && _a !== void 0 ? _a : 0);
+  useEffect(() => {
+    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 jsxs(Flex$1, Object.assign({
+    direction: "row",
+    align: "center",
+    css: css
+  }, {
+    children: [jsx(Button, Object.assign({
+      disabled: disabled,
+      buttonType: "secondary",
+      counterType: "minus",
+      icon: true,
+      onClick: handleDown
+    }, {
+      children: jsx(MinusOutline, {
+        color: disabled ? colors$4.iconDisable : colors$4.primary500
+      }, void 0)
+    }), void 0), jsx(Input$4, {
+      ref: ref,
+      disabled: disabled,
+      value: inputValue,
+      allowNegative: allowNegative,
+      onChange: handleChange
+    }, void 0), jsx(Button, Object.assign({
+      disabled: disabled,
+      buttonType: "secondary",
+      counterType: "plus",
+      icon: true,
+      onClick: handleUp
+    }, {
+      children: jsx(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 {
@@ -10390,8 +10620,8 @@ const PopoverContent = ({
     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)
   }), {
@@ -11216,74 +11446,6 @@ ButtonGroupItem.defaultProps = {
   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', {
@@ -11385,7 +11547,7 @@ const NotificationBadge = _ref => {
       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) {
@@ -13980,7 +14142,7 @@ const CalendarBox = ({
         }), void 0), jsxs(Flex$1, Object.assign({
           gap: 3
         }, {
-          children: [jsx(Button$2, Object.assign({
+          children: [jsx(Button$3, Object.assign({
             buttonType: "ghost",
             css: {
               fontWeight: 600
@@ -13990,7 +14152,7 @@ const CalendarBox = ({
             size: "sm"
           }, {
             children: "Batal"
-          }), void 0), jsx(Button$2, Object.assign({
+          }), void 0), jsx(Button$3, Object.assign({
             css: {
               fontWeight: 600
             },
@@ -14557,7 +14719,7 @@ const MobileCalendarBox = ({
       }), void 0), jsxs(Flex$1, Object.assign({
         gap: 3
       }, {
-        children: [jsx(Button$2, Object.assign({
+        children: [jsx(Button$3, Object.assign({
           buttonType: "ghost",
           size: "sm",
           css: {
@@ -14570,7 +14732,7 @@ const MobileCalendarBox = ({
           disabled: disabled
         }, {
           children: "Batal"
-        }), void 0), jsx(Button$2, Object.assign({
+        }), void 0), jsx(Button$3, Object.assign({
           size: "sm",
           css: {
             width: '160px',
@@ -15761,7 +15923,7 @@ const PageButton = _ref => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
-  return /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  return /*#__PURE__*/React__default.createElement(Button$3, _extends({
     onClick: onClick,
     buttonType: !isActive ? 'ghost' : 'primary',
     css: {
@@ -16109,7 +16271,7 @@ function PaginationInfo(_ref) {
       lineNumber: 40,
       columnNumber: 11
     }
-  }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
+  }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
     key: limit,
     css: limitItemContainerStyle(selectedLimit === limit),
     onClick: () => onChange(limit),
@@ -18449,7 +18611,7 @@ const TemplateAlertFunction = props => {
       if (!props.onOpenAutoFocus) {
         e.preventDefault();
       } else {
-        props == null ? void 0 : props.onOpenAutoFocus();
+        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
       }
     },
     __self: undefined,
@@ -18566,12 +18728,12 @@ const TemplateAlertFunction = props => {
       lineNumber: 157,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  }, /*#__PURE__*/React__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,
@@ -18586,16 +18748,16 @@ const TemplateAlertFunction = props => {
       lineNumber: 170,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  }, /*#__PURE__*/React__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,
@@ -18610,15 +18772,15 @@ const TemplateAlertFunction = props => {
       lineNumber: 185,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  }, /*#__PURE__*/React__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,
@@ -18770,15 +18932,15 @@ function AlertDialog(props) {
       lineNumber: 242,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  }, /*#__PURE__*/React__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,
@@ -18793,16 +18955,16 @@ function AlertDialog(props) {
       lineNumber: 256,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  }, /*#__PURE__*/React__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,
@@ -18817,15 +18979,15 @@ function AlertDialog(props) {
       lineNumber: 271,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  }, /*#__PURE__*/React__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,
@@ -21306,7 +21468,7 @@ const Upload = ({
               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;
@@ -21328,7 +21490,7 @@ const Upload = ({
             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;
 
@@ -21349,7 +21511,7 @@ const Upload = ({
             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;
@@ -21359,7 +21521,7 @@ const Upload = ({
           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) {
@@ -21386,9 +21548,9 @@ const Upload = ({
   }
 
   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]);
@@ -21456,22 +21618,22 @@ const Upload = ({
   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.get(file == null ? void 0 : file.url).end((err, res) => {
+      request.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);
@@ -21541,12 +21703,12 @@ const Upload = ({
   }
 
   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.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,
@@ -21621,14 +21783,14 @@ const Upload = ({
   };
 
   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.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,
@@ -21695,7 +21857,7 @@ const Upload = ({
           lineNumber: 611,
           columnNumber: 17
         }
-      }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__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.createElement(Tooltip$1, {
         label: item.name,
         __self: undefined,
         __source: {
@@ -21867,7 +22029,7 @@ const Upload = ({
         lineNumber: 686,
         columnNumber: 11
       }
-    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -21901,7 +22063,7 @@ const Upload = ({
         lineNumber: 692,
         columnNumber: 17
       }
-    }, placeholder != null ? placeholder : `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -22031,7 +22193,7 @@ const Upload = ({
         lineNumber: 727,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default.createElement(Button$2, {
+    }, /*#__PURE__*/React__default.createElement(Button$3, {
       buttonType: "secondary",
       onClick: toggleModal,
       __self: this,
@@ -22040,7 +22202,7 @@ const Upload = ({
         lineNumber: 728,
         columnNumber: 15
       }
-    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
+    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
       onClick: handleCrop,
       __self: this,
       __source: {
@@ -22048,12 +22210,12 @@ const Upload = ({
         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.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'
@@ -22475,10 +22637,10 @@ function InputColorPicker(props) {
   const [isPopover, setIsPopover] = 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})`;
@@ -25448,9 +25610,9 @@ const Navigation = props => {
           lineNumber: 119,
           columnNumber: 30
         }
-      }), data[i - 1].title, ((_data = data[i - 1]) == null ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__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,
@@ -25521,10 +25683,10 @@ const Navigation = props => {
           lineNumber: 155,
           columnNumber: 15
         }
-      }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__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.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,
@@ -25592,30 +25754,38 @@ const Navigation = props => {
 const Default = props => {
   const [state, updateState] = React__default.useState(Object.assign({
     isComplete: [],
-    hide: false
+    hide: props.hide || false
   }, props.state));
   useEffect(() => {
     updateState(current => Object.assign({}, current, {
       isComplete: props.completedSteps || []
     }));
   }, [props.completedSteps]);
+  useEffect(() => {
+    updateState(prev => Object.assign({}, prev, {
+      hide: props.hide
+    }));
+  }, [props.hide]);
+  useEffect(() => {
+    props.onChangeVisibility(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 => {
@@ -25661,17 +25831,17 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 265,
+      lineNumber: 273,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__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,
@@ -25683,7 +25853,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 266,
+      lineNumber: 274,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -25695,7 +25865,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 288,
+        lineNumber: 296,
         columnNumber: 16
       }
     }),
@@ -25705,7 +25875,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 283,
+      lineNumber: 291,
       columnNumber: 9
     }
   }), props.children)));
@@ -25843,10 +26013,10 @@ function Content({
   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]);
@@ -25886,7 +26056,7 @@ function Content({
       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.createElement(List, {
       key: index,
       __self: this,
@@ -25903,11 +26073,11 @@ function Content({
         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,
@@ -25916,8 +26086,8 @@ function Content({
       }
     }, /*#__PURE__*/React__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]);
@@ -25946,7 +26116,7 @@ function Content({
         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));
   })));
 }
 
@@ -27506,7 +27676,7 @@ function InputMapPicker(props) {
             isTruncated: true
           }, {
             children: inputValue
-          }), void 0), jsx(Button$2, Object.assign({
+          }), void 0), jsx(Button$3, Object.assign({
             type: "button",
             size: "sm",
             buttonType: "secondary",
@@ -27951,7 +28121,7 @@ const ComparatorController = ({
         }
       }
     }, {
-      children: jsx(Button$2, Object.assign({
+      children: jsx(Button$3, Object.assign({
         buttonType: "ghost",
         css: {
           fontWeight: 600,
@@ -30135,4 +30305,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };