@majoo-ui/react 1.46.6 → 1.46.8-rc.2

package/index.umd.js

@@ -171,11 +171,11 @@
 
   var uncurryThis$w = functionUncurryThis;
 
-  var toString$h = uncurryThis$w({}.toString);
+  var toString$j = uncurryThis$w({}.toString);
   var stringSlice$b = uncurryThis$w(''.slice);
 
   var classofRaw$1 = function (it) {
-    return stringSlice$b(toString$h(it), 8, -1);
+    return stringSlice$b(toString$j(it), 8, -1);
   };
 
   var uncurryThis$v = functionUncurryThis;
@@ -300,7 +300,7 @@
 
   var $Object$3 = Object;
 
-  var isSymbol$2 = USE_SYMBOL_AS_UID$1 ? function (it) {
+  var isSymbol$6 = USE_SYMBOL_AS_UID$1 ? function (it) {
     return typeof it == 'symbol';
   } : function (it) {
     var $Symbol = getBuiltIn$6('Symbol');
@@ -416,10 +416,10 @@
 
   var id = 0;
   var postfix = Math.random();
-  var toString$g = uncurryThis$s(1.0.toString);
+  var toString$i = uncurryThis$s(1.0.toString);
 
   var uid$2 = function (key) {
-    return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$g(++id + postfix, 36);
+    return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$i(++id + postfix, 36);
   };
 
   var global$n = global$s;
@@ -449,7 +449,7 @@
 
   var call$j = functionCall;
   var isObject$b = isObject$d;
-  var isSymbol$1 = isSymbol$2;
+  var isSymbol$5 = isSymbol$6;
   var getMethod$5 = getMethod$6;
   var ordinaryToPrimitive = ordinaryToPrimitive$1;
   var wellKnownSymbol$k = wellKnownSymbol$l;
@@ -460,13 +460,13 @@
   // `ToPrimitive` abstract operation
   // https://tc39.es/ecma262/#sec-toprimitive
   var toPrimitive$1 = function (input, pref) {
-    if (!isObject$b(input) || isSymbol$1(input)) return input;
+    if (!isObject$b(input) || isSymbol$5(input)) return input;
     var exoticToPrim = getMethod$5(input, TO_PRIMITIVE);
     var result;
     if (exoticToPrim) {
       if (pref === undefined) pref = 'default';
       result = call$j(exoticToPrim, input, pref);
-      if (!isObject$b(result) || isSymbol$1(result)) return result;
+      if (!isObject$b(result) || isSymbol$5(result)) return result;
       throw $TypeError$c("Can't convert object to primitive value");
     }
     if (pref === undefined) pref = 'number';
@@ -474,13 +474,13 @@
   };
 
   var toPrimitive = toPrimitive$1;
-  var isSymbol = isSymbol$2;
+  var isSymbol$4 = isSymbol$6;
 
   // `ToPropertyKey` abstract operation
   // https://tc39.es/ecma262/#sec-topropertykey
   var toPropertyKey$3 = function (argument) {
     var key = toPrimitive(argument, 'string');
-    return isSymbol(key) ? key : key + '';
+    return isSymbol$4(key) ? key : key + '';
   };
 
   var global$m = global$s;
@@ -677,16 +677,16 @@
   var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
   var TypeError$4 = global$k.TypeError;
   var WeakMap = global$k.WeakMap;
-  var set$1, get, has;
+  var set$1, get$1, has;
 
   var enforce = function (it) {
-    return has(it) ? get(it) : set$1(it, {});
+    return has(it) ? get$1(it) : set$1(it, {});
   };
 
   var getterFor = function (TYPE) {
     return function (it) {
       var state;
-      if (!isObject$8(it) || (state = get(it)).type !== TYPE) {
+      if (!isObject$8(it) || (state = get$1(it)).type !== TYPE) {
         throw TypeError$4('Incompatible receiver, ' + TYPE + ' required');
       } return state;
     };
@@ -703,7 +703,7 @@
       wmset(store, it, metadata);
       return metadata;
     };
-    get = function (it) {
+    get$1 = function (it) {
       return wmget(store, it) || {};
     };
     has = function (it) {
@@ -718,7 +718,7 @@
       createNonEnumerableProperty$5(it, STATE, metadata);
       return metadata;
     };
-    get = function (it) {
+    get$1 = function (it) {
       return hasOwn$b(it, STATE) ? it[STATE] : {};
     };
     has = function (it) {
@@ -728,7 +728,7 @@
 
   var internalState = {
     set: set$1,
-    get: get,
+    get: get$1,
     has: has,
     enforce: enforce,
     getterFor: getterFor
@@ -2072,7 +2072,7 @@
 
   var $String$1 = String;
 
-  var toString$f = function (argument) {
+  var toString$h = function (argument) {
     if (classof$6(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
     return $String$1(argument);
   };
@@ -2084,7 +2084,7 @@
   var hasOwn$5 = hasOwnProperty_1;
   var isCallable$9 = isCallable$p;
   var isPrototypeOf$4 = objectIsPrototypeOf;
-  var toString$e = toString$f;
+  var toString$g = toString$h;
   var defineProperty$2 = objectDefineProperty.f;
   var copyConstructorProperties = copyConstructorProperties$2;
 
@@ -2098,7 +2098,7 @@
     var EmptyStringDescriptionStore = {};
     // wrap Symbol constructor for correct work with undefined description
     var SymbolWrapper = function Symbol() {
-      var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$e(arguments[0]);
+      var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString$g(arguments[0]);
       var result = isPrototypeOf$4(SymbolPrototype, this)
         ? new NativeSymbol(description)
         // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
@@ -2112,7 +2112,7 @@
     SymbolPrototype.constructor = SymbolWrapper;
 
     var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
-    var symbolToString = uncurryThis$l(SymbolPrototype.toString);
+    var symbolToString$1 = uncurryThis$l(SymbolPrototype.toString);
     var symbolValueOf = uncurryThis$l(SymbolPrototype.valueOf);
     var regexp = /^Symbol\((.*)\)[^)]+$/;
     var replace$7 = uncurryThis$l(''.replace);
@@ -2122,7 +2122,7 @@
       configurable: true,
       get: function description() {
         var symbol = symbolValueOf(this);
-        var string = symbolToString(symbol);
+        var string = symbolToString$1(symbol);
         if (hasOwn$5(EmptyStringDescriptionStore, symbol)) return '';
         var desc = NATIVE_SYMBOL ? stringSlice$a(string, 7, -1) : replace$7(string, regexp, '$1');
         return desc === '' ? undefined : desc;
@@ -2198,7 +2198,7 @@
   var uncurryThis$k = functionUncurryThis;
   var notARegExp$1 = notARegexp;
   var requireObjectCoercible$7 = requireObjectCoercible$a;
-  var toString$d = toString$f;
+  var toString$f = toString$h;
   var correctIsRegExpLogic$1 = correctIsRegexpLogic;
 
   var stringIndexOf$2 = uncurryThis$k(''.indexOf);
@@ -2208,8 +2208,8 @@
   $$f({ target: 'String', proto: true, forced: !correctIsRegExpLogic$1('includes') }, {
     includes: function includes(searchString /* , position = 0 */) {
       return !!~stringIndexOf$2(
-        toString$d(requireObjectCoercible$7(this)),
-        toString$d(notARegExp$1(searchString)),
+        toString$f(requireObjectCoercible$7(this)),
+        toString$f(notARegExp$1(searchString)),
         arguments.length > 1 ? arguments[1] : undefined
       );
     }
@@ -2347,7 +2347,7 @@
   Flex$1.displayName = 'Flex';
 
   const _excluded$z = ["children"],
-        _excluded2$2 = ["children"];
+        _excluded2$1 = ["children"];
   var _jsxFileName$_ = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
@@ -2577,7 +2577,7 @@
     let {
       children
     } = _ref2,
-        props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
     return /*#__PURE__*/React__default["default"].createElement(GridItemComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -4695,8 +4695,30 @@
     delayMs: 0
   };
 
-  const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
+  const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
   var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+  const ContainerFallback = styled(Flex$1, {
+    boxSizing: 'border-box',
+    border: '2px dashed #C0C4C4',
+    borderRadius: 8,
+    backgroundColor: '$gray50',
+    minHeight: 120,
+    minWidth: 188,
+    variants: {
+      rounded: {
+        true: {
+          borderRadius: '100%'
+        }
+      }
+    }
+  });
+  const TextFallback = styled('p', {
+    fontSize: 12,
+    fontWeight: 400,
+    fontStyle: 'normal',
+    textAlign: 'center',
+    color: '$textDisable'
+  });
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4717,41 +4739,118 @@
       width,
       height,
       objectFit,
-      fallback
+      fallback,
+      fallbackTitle,
+      css,
+      cssFallback,
+      rounded
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
-      className: className,
-      src: src,
-      alt: alt,
-      width: width,
-      height: height,
-      srcSet: fallback,
-      css: Object.assign({
-        objectFit: objectFit
-      }, props.css)
-    }, props, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$Q,
-        lineNumber: 20,
-        columnNumber: 9
-      }
-    }));
+    if (src || fallback) {
+      return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
+        className: className,
+        src: src,
+        alt: alt,
+        width: width,
+        height: height,
+        srcSet: fallback,
+        rounded: rounded,
+        css: Object.assign({
+          objectFit: objectFit
+        }, css)
+      }, props, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$Q,
+          lineNumber: 59,
+          columnNumber: 7
+        }
+      }));
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement(ContainerFallback, {
+        rounded: rounded,
+        align: "center",
+        justify: "center",
+        css: Object.assign({
+          width,
+          height
+        }, cssFallback),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$Q,
+          lineNumber: 73,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(TextFallback, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$Q,
+          lineNumber: 74,
+          columnNumber: 9
+        }
+      }, fallbackTitle));
+    }
   }
   Image.propTypes = {
+    /**
+     Additional className for img element.
+     */
     className: PropTypes__default["default"].string,
+
+    /**
+     Which is used to specify the source of an image.
+     */
     src: PropTypes__default["default"].string,
+
+    /**
+     The written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
+     */
     alt: PropTypes__default["default"].string,
+
+    /**
+     Additional css for img element.
+     */
+    css: PropTypes__default["default"].object,
+
+    /**
+     Additional css for default fallback element.
+     */
+    cssFallback: PropTypes__default["default"].object,
+
+    /**
+     Custom width of img element.
+     */
     width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+    /**
+     Custom height of img element.
+     */
     height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+    /**
+     Set image to circle.
+     */
     rounded: PropTypes__default["default"].bool,
+
+    /**
+     Used to specify how an <img> should be resized to fit its container.
+     */
     objectFit: PropTypes__default["default"].string,
-    fallback: PropTypes__default["default"].string
+
+    /**
+     Custom fallback if image url doesn't exist.
+     */
+    fallback: PropTypes__default["default"].string,
+
+    /**
+     Custom fallback title for default fallback.
+     */
+    fallbackTitle: PropTypes__default["default"].string
   };
   Image.defaultProps = {
-    rounded: false
+    rounded: false,
+    fallbackTitle: 'Tidak ada foto'
   };
 
   const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
@@ -5905,7 +6004,7 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
 
-  const _excluded$j = ["disabled"];
+  const _excluded$j = ["disabled", "readOnly"];
   var _jsxFileName$F = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
   const disabledStyle = {
     backgroundColor: '$formDisable',
@@ -5977,7 +6076,7 @@
       isDisabled: {
         true: disabledStyle
       },
-      readOnly: {
+      isReadOnly: {
         true: {
           backgroundColor: '$formDisable'
         }
@@ -6045,14 +6144,17 @@
   });
   const InputText = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     let {
-      disabled
+      disabled,
+      readOnly
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
       ref: ref,
       disabled: disabled,
-      isDisabled: disabled
+      isDisabled: disabled,
+      readOnly: readOnly,
+      isReadOnly: readOnly
     }, props, {
       __self: undefined,
       __source: {
@@ -6064,7 +6166,9 @@
   });
   InputText.displayName = 'InputText';
 
-  const InputTextArea = styled(StyledInput, {
+  const _excluded$i = ["disabled", "readOnly"];
+  var _jsxFileName$E = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
+  const StyledTextArea = styled(StyledInput, {
     variants: {
       size: {
         sm: {
@@ -6079,6 +6183,28 @@
       size: 'lg'
     }
   });
+  const InputTextArea = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+    let {
+      disabled,
+      readOnly
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledTextArea, _extends({
+      ref: ref,
+      disabled: disabled,
+      isDisabled: disabled,
+      readOnly: readOnly,
+      isReadOnly: readOnly
+    }, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 22,
+        columnNumber: 3
+      }
+    }));
+  });
   InputTextArea.defaultProps = {
     as: 'textarea',
     size: 'lg'
@@ -6086,21 +6212,21 @@
 
   const InputRadioContext = /*#__PURE__*/React__default["default"].createContext();
 
-  var _jsxFileName$E = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+  var _jsxFileName$D = "C:\\Project\\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 || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$D,
         lineNumber: 13,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(RadioGroup, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$D,
         lineNumber: 14,
         columnNumber: 9
       }
@@ -6118,8 +6244,8 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$i = ["id", "disabled", "css", "inputType", "inputProps"];
-  var _jsxFileName$D = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+  const _excluded$h = ["id", "disabled", "css", "inputType", "inputProps"];
+  var _jsxFileName$C = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -6235,7 +6361,7 @@
       inputType,
       inputProps
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
     function renderInputType(type, checked) {
       switch (type) {
@@ -6244,7 +6370,7 @@
             disabled: disabled || checked !== props.value,
             __self: this,
             __source: {
-              fileName: _jsxFileName$D,
+              fileName: _jsxFileName$C,
               lineNumber: 124,
               columnNumber: 16
             }
@@ -6255,7 +6381,7 @@
             disabled: disabled || checked !== props.value,
             __self: this,
             __source: {
-              fileName: _jsxFileName$D,
+              fileName: _jsxFileName$C,
               lineNumber: 127,
               columnNumber: 16
             }
@@ -6275,7 +6401,7 @@
             },
             __self: this,
             __source: {
-              fileName: _jsxFileName$D,
+              fileName: _jsxFileName$C,
               lineNumber: 131,
               columnNumber: 11
             }
@@ -6286,7 +6412,7 @@
     return /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$C,
         lineNumber: 150,
         columnNumber: 5
       }
@@ -6305,7 +6431,7 @@
         css: css,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$D,
+          fileName: _jsxFileName$C,
           lineNumber: 155,
           columnNumber: 11
         }
@@ -6315,14 +6441,14 @@
       }, props, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$D,
+          fileName: _jsxFileName$C,
           lineNumber: 163,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$D,
+          fileName: _jsxFileName$C,
           lineNumber: 164,
           columnNumber: 15
         }
@@ -6656,7 +6782,7 @@
   var getOwnPropertyNames = objectGetOwnPropertyNames.f;
   var isPrototypeOf$2 = objectIsPrototypeOf;
   var isRegExp$1 = isRegexp;
-  var toString$c = toString$f;
+  var toString$e = toString$h;
   var getRegExpFlags$1 = regexpGetFlags;
   var stickyHelpers$2 = regexpStickyHelpers;
   var proxyAccessor = proxyAccessor$1;
@@ -6784,8 +6910,8 @@
         if (flagsAreUndefined) flags = getRegExpFlags$1(rawPattern);
       }
 
-      pattern = pattern === undefined ? '' : toString$c(pattern);
-      flags = flags === undefined ? '' : toString$c(flags);
+      pattern = pattern === undefined ? '' : toString$e(pattern);
+      flags = flags === undefined ? '' : toString$e(flags);
       rawPattern = pattern;
 
       if (UNSUPPORTED_DOT_ALL$1 && 'dotAll' in re1) {
@@ -6842,7 +6968,7 @@
   /* eslint-disable regexp/no-useless-quantifier -- testing */
   var call$e = functionCall;
   var uncurryThis$i = functionUncurryThis;
-  var toString$b = toString$f;
+  var toString$d = toString$h;
   var regexpFlags = regexpFlags$1;
   var stickyHelpers$1 = regexpStickyHelpers;
   var shared = shared$4.exports;
@@ -6878,7 +7004,7 @@
     patchedExec = function exec(string) {
       var re = this;
       var state = getInternalState$1(re);
-      var str = toString$b(string);
+      var str = toString$d(string);
       var raw = state.raw;
       var result, reCopy, lastIndex, match, i, object, group;
 
@@ -6967,7 +7093,7 @@
   var PROPER_FUNCTION_NAME = functionName.PROPER;
   var defineBuiltIn$6 = defineBuiltIn$b;
   var anObject$b = anObject$i;
-  var $toString$2 = toString$f;
+  var $toString$2 = toString$h;
   var fails$b = fails$s;
   var getRegExpFlags = regexpGetFlags;
 
@@ -6990,8 +7116,8 @@
     }, { unsafe: true });
   }
 
-  const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
-  var _jsxFileName$C = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
+  const _excluded$g = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+  var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
   const TagWrapper$3 = styled('div', {
     boxSizing: 'border-box',
     listStyle: 'none',
@@ -7095,7 +7221,7 @@
       onRemove,
       readOnly
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
     return /*#__PURE__*/React__default["default"].createElement(TagWrapper$3, _extends({
       ref: ref,
@@ -7108,21 +7234,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$B,
         lineNumber: 84,
         columnNumber: 7
       }
     }), icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$B,
         lineNumber: 94,
         columnNumber: 31
       }
     }, icon) : null, /*#__PURE__*/React__default["default"].createElement(TagComponent$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$B,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -7132,7 +7258,7 @@
       readOnly: readOnly,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$B,
         lineNumber: 97,
         columnNumber: 11
       }
@@ -7144,7 +7270,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$B,
         lineNumber: 98,
         columnNumber: 13
       }
@@ -7167,8 +7293,8 @@
     readOnly: false
   };
 
-  const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern"];
-  var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
+  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern"];
+  var _jsxFileName$A = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -7286,7 +7412,7 @@
       maxChar,
       pattern
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
     const [tags, setTags] = React__default["default"].useState(value);
     const [regexError, setRegexError] = React__default["default"].useState(false);
@@ -7337,7 +7463,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 163,
         columnNumber: 5
       }
@@ -7350,7 +7476,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 164,
         columnNumber: 7
       }
@@ -7365,7 +7491,7 @@
       ,
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 172,
         columnNumber: 9
       }
@@ -7373,7 +7499,7 @@
       color: "red",
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 186,
         columnNumber: 11
       }
@@ -7381,14 +7507,14 @@
       color: "red",
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 188,
         columnNumber: 11
       }
     }, "Invalid Input")), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 191,
         columnNumber: 7
       }
@@ -7401,7 +7527,7 @@
       onRemove: () => removeTags(index, 'removeTag'),
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$A,
         lineNumber: 193,
         columnNumber: 11
       }
@@ -7431,8 +7557,8 @@
     readOnly: false
   };
 
-  const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$A = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
+  const _excluded$e = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+  var _jsxFileName$z = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -7504,7 +7630,7 @@
       dataOffLabel,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
@@ -7515,14 +7641,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$z,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$z,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -7540,7 +7666,7 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
-  var _jsxFileName$z = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
+  var _jsxFileName$y = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
 
   const SvgCloseFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
@@ -7550,7 +7676,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$y,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -7559,7 +7685,7 @@
     fill: "white",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$y,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -7569,7 +7695,7 @@
     d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$y,
       lineNumber: 6,
       columnNumber: 7
     }
@@ -7580,7 +7706,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$y,
       lineNumber: 12,
       columnNumber: 5
     }
@@ -7590,7 +7716,7 @@
     mask: "url(#path-1-inside-1_2883_7918)",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$y,
       lineNumber: 18,
       columnNumber: 5
     }
@@ -7601,7 +7727,7 @@
     size: 24
   };
 
-  var _jsxFileName$y = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
+  var _jsxFileName$x = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
 
   const SvgSearchOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
@@ -7611,7 +7737,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$x,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -7623,7 +7749,7 @@
     strokeWidth: 2,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$x,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -7632,7 +7758,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$x,
       lineNumber: 6,
       columnNumber: 5
     }
@@ -7643,8 +7769,8 @@
     size: 24
   };
 
-  const _excluded$e = ["size", "onChange", "css", "disabled"];
-  var _jsxFileName$x = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
+  const _excluded$d = ["size", "onChange", "css", "disabled"];
+  var _jsxFileName$w = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
 
   const InputSearchbox = _ref => {
     let {
@@ -7653,7 +7779,7 @@
       css,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
     const [value, setValue] = React__default["default"].useState('');
     const handleChange = React__default["default"].useCallback(e => {
@@ -7679,7 +7805,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 30,
         columnNumber: 5
       }
@@ -7687,14 +7813,14 @@
       children: /*#__PURE__*/React__default["default"].createElement(SvgSearchOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$x,
+          fileName: _jsxFileName$w,
           lineNumber: 31,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 31,
         columnNumber: 7
       }
@@ -7708,7 +7834,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 32,
         columnNumber: 7
       }
@@ -7716,14 +7842,14 @@
       children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$x,
+          fileName: _jsxFileName$w,
           lineNumber: 41,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$x,
+          fileName: _jsxFileName$w,
           lineNumber: 41,
           columnNumber: 73
         }
@@ -7731,7 +7857,7 @@
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 41,
         columnNumber: 7
       }
@@ -7860,7 +7986,7 @@
   var anObject$9 = anObject$i;
   var requireObjectCoercible$6 = requireObjectCoercible$a;
   var sameValue = sameValue$1;
-  var toString$a = toString$f;
+  var toString$c = toString$h;
   var getMethod$4 = getMethod$6;
   var regExpExec$1 = regexpExecAbstract;
 
@@ -7872,13 +7998,13 @@
       function search(regexp) {
         var O = requireObjectCoercible$6(this);
         var searcher = regexp == undefined ? undefined : getMethod$4(regexp, SEARCH);
-        return searcher ? call$c(searcher, regexp, O) : new RegExp(regexp)[SEARCH](toString$a(O));
+        return searcher ? call$c(searcher, regexp, O) : new RegExp(regexp)[SEARCH](toString$c(O));
       },
       // `RegExp.prototype[@@search]` method
       // https://tc39.es/ecma262/#sec-regexp.prototype-@@search
       function (string) {
         var rx = anObject$9(this);
-        var S = toString$a(string);
+        var S = toString$c(string);
         var res = maybeCallNative(nativeSearch, rx, S);
 
         if (res.done) return res.value;
@@ -7892,10 +8018,13 @@
     ];
   });
 
-  const _excluded$d = ["showLeadingIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"],
-        _excluded2$1 = ["placeholder", "searchPlaceholder", "embedSearch", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly", "isInvalid", "noOptionIcon"];
-  var _jsxFileName$w = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
-  const SelectContainer = styled('div', {
+  const ConditionalWrapper = ({
+    condition,
+    wrapper,
+    children
+  }) => condition ? wrapper(children) : children;
+
+  var SelectContainer = styled('div', {
     margin: 0,
     flexDirection: 'column',
     display: 'block',
@@ -7911,7 +8040,7 @@
     color: '$textPrimary',
     width: '100%'
   });
-  const SelectBox = styled(Flex$1, {
+  var SelectBox = styled(Flex$1, {
     margin: 0,
     position: 'relative',
     appearance: 'none',
@@ -7952,7 +8081,6 @@
         true: {
           backgroundColor: '$formDisable',
           color: '$textPrimary',
-          cursor: 'not-allowed',
           '&:hover': {
             border: '1px solid $gray300'
           },
@@ -7974,7 +8102,7 @@
       }
     }
   });
-  const Button$1 = styled('button', {
+  var Button$1 = styled('button', {
     display: 'flex',
     width: '100%',
     height: '100%',
@@ -8001,13 +8129,12 @@
       },
       readOnly: {
         true: {
-          cursor: 'not-allowed',
           color: '$textPrimary'
         }
       }
     }
   });
-  const Input$5 = styled('input', {
+  var Input$5 = styled('input', {
     marginLeft: '$spacing-05',
     display: 'flex',
     width: '100%',
@@ -8026,15 +8153,14 @@
       opacity: 1
     },
     variants: {
-      readOnly: {
+      isReadOnly: {
         true: {
-          cursor: 'not-allowed',
           color: '$textPrimary'
         }
       }
     }
   });
-  const IconContainer = styled('div', {
+  var IconContainer = styled('div', {
     flex: ' 0 0 auto',
     width: 'auto',
     display: 'flex',
@@ -8046,15 +8172,10 @@
         true: {
           cursor: 'not-allowed'
         }
-      },
-      readOnly: {
-        true: {
-          cursor: 'not-allowed'
-        }
       }
     }
   });
-  const OptionWrapper$2 = styled('div', {
+  var OptionWrapper$2 = styled('div', {
     display: 'none',
     overflow: 'auto',
     zIndex: 1,
@@ -8085,7 +8206,7 @@
       placement: 'bottom'
     }
   });
-  const SelectOption = styled('div', {
+  var SelectOption = styled('div', {
     flexDirection: 'column',
     display: 'block',
     borderRadius: '$lg',
@@ -8093,7 +8214,7 @@
     overflowY: 'auto',
     height: '100%'
   });
-  const SelectItem = styled('div', {
+  var SelectItem = styled('div', {
     overflow: 'hidden',
     borderBottom: '1px solid $bgBorder',
     padding: '$spacing-05 0',
@@ -8101,29 +8222,31 @@
     cursor: 'pointer',
     lineHeight: '20px'
   });
-  const StyledDiv$2 = styled('div', {
+  var StyledDiv$2 = styled('div', {
     color: '$textDisable',
     display: 'inline-flex'
   });
-  const StyledText$1 = {
+  var StyledText$1 = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   };
-  const SelectInputSearch = /*#__PURE__*/React__namespace.forwardRef((_ref, forwardedRef) => {
-    let {
-      showLeadingIcon = true,
-      disabled,
-      placeholder,
-      readOnly,
-      inputProps,
-      handleInputValue,
-      noStyling
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-
-    const inputRef = React__namespace.useRef(null);
-    return /*#__PURE__*/React__namespace.createElement(InputGroup, {
+  var SelectInputSearch = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.showLeadingIcon,
+        showLeadingIcon = _b === void 0 ? true : _b,
+        _c = _a.showClearIcon,
+        showClearIcon = _c === void 0 ? true : _c,
+        disabled = _a.disabled,
+        placeholder = _a.placeholder,
+        readOnly = _a.readOnly,
+        inputProps = _a.inputProps,
+        handleInputValue = _a.handleInputValue,
+        noStyling = _a.noStyling;
+        _a.onChange;
+        var props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
+
+    var inputRef = React__namespace.useRef(null);
+    return jsxRuntime.jsxs(InputGroup, __assign({
       css: !noStyling && {
         height: '100%',
         border: 'none',
@@ -8131,135 +8254,148 @@
           border: 'none'
         }
       },
-      disabled: disabled,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 236,
-        columnNumber: 7
-      }
-    }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
-      children: showLeadingIcon && /*#__PURE__*/React__namespace.createElement(icons.SearchOutline, {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 249,
-          columnNumber: 40
-        }
-      }),
-      css: !showLeadingIcon && {
-        width: '$spacing-05',
-        padding: 0
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 248,
-        columnNumber: 9
-      }
-    }), /*#__PURE__*/React__namespace.createElement(Input$5, _extends({}, inputProps, props, {
-      placeholder: placeholder,
-      readOnly: readOnly,
-      ref: e => {
-        if (forwardedRef) forwardedRef(e);
-        inputRef.current = e;
-      },
-      disabled: disabled,
-      css: {
-        marginLeft: 0,
-        height: 'fit-content'
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 257,
-        columnNumber: 9
-      }
-    })), /*#__PURE__*/React__namespace.createElement(InputRightElement, {
-      children: (inputProps.value || '').length > 0 && !disabled ? /*#__PURE__*/React__namespace.createElement(icons.CloseFilled, {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 273,
-          columnNumber: 72
-        }
-      }) : /*#__PURE__*/React__namespace.createElement("div", {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 273,
-          columnNumber: 90
-        }
-      }),
-      onClick: e => {
-        if (!disabled) {
-          inputProps.onChange(Object.assign({}, e, {
-            target: Object.assign({}, e.target, {
-              value: ''
-            })
-          }));
-          if (handleInputValue) handleInputValue('');
-          if (inputRef.current) inputRef.current.focus();
+      disabled: disabled
+    }, {
+      children: [jsxRuntime.jsx(InputLeftElement, {
+        children: showLeadingIcon && jsxRuntime.jsx(icons.SearchOutline, {}, void 0),
+        css: !showLeadingIcon ? {
+          width: '$spacing-05',
+          padding: 0
+        } : undefined
+      }, void 0), jsxRuntime.jsx(Input$5, __assign({}, inputProps, props, {
+        placeholder: placeholder,
+        readOnly: readOnly,
+        isReadOnly: readOnly,
+        ref: function (node) {
+          if (forwardedRef) {
+            if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
+          }
+
+          inputRef.current = node;
+        },
+        disabled: disabled,
+        css: {
+          marginLeft: 0,
+          height: 'fit-content'
+        }
+      }), void 0), jsxRuntime.jsx(InputRightElement, {
+        children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsxRuntime.jsx(icons.CloseFilled, {}, void 0) : jsxRuntime.jsx("div", {}, void 0),
+        onClick: function (e) {
+          if (!disabled) {
+            inputProps.onChange(__assign(__assign({}, e), {
+              target: __assign(__assign({}, e.target), {
+                value: ''
+              })
+            }));
+            if (handleInputValue) handleInputValue('');
+            if (inputRef.current) inputRef.current.focus();
+          }
         }
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 272,
-        columnNumber: 9
-      }
-    }));
+      }, void 0)]
+    }), void 0);
   });
-  function Select$1(_ref2) {
-    let {
-      placeholder,
-      searchPlaceholder,
-      embedSearch,
-      option,
-      onChange,
-      size,
-      disabled,
-      search,
-      value,
-      iconColor,
-      icon,
-      placement,
-      valueSelector,
-      textSelector,
-      disabledOptions,
-      css,
-      onSearch,
-      readOnly,
-      isInvalid,
-      noOptionIcon
-    } = _ref2,
-        props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  function InputSelect(_a) {
+    var _this = this;
 
-    const [options, setOptions] = React__namespace.useState(option || []);
-    const [item, setItem] = React__namespace.useState(option || []);
-    const [selectedValue, setSelectedValue] = React__namespace.useState(value);
+    var option = _a.option,
+        onChange = _a.onChange,
+        value = _a.value,
+        _b = _a.placeholder,
+        placeholder = _b === void 0 ? 'Select Item' : _b,
+        _c = _a.searchPlaceholder,
+        searchPlaceholder = _c === void 0 ? 'Cari..' : _c,
+        _d = _a.embedSearch,
+        embedSearch = _d === void 0 ? false : _d,
+        _e = _a.size,
+        size = _e === void 0 ? 'lg' : _e,
+        _f = _a.disabled,
+        disabled = _f === void 0 ? false : _f,
+        _g = _a.search,
+        search = _g === void 0 ? false : _g,
+        _h = _a.iconColor,
+        iconColor = _h === void 0 ? 'currentColor' : _h,
+        _j = _a.hideArrowicon,
+        hideArrowicon = _j === void 0 ? false : _j,
+        showLeadingIcon = _a.showLeadingIcon,
+        _k = _a.placement,
+        placement = _k === void 0 ? 'bottom' : _k,
+        disabledOptions = _a.disabledOptions,
+        _l = _a.textSelector,
+        textSelector = _l === void 0 ? 'name' : _l,
+        _m = _a.valueSelector,
+        valueSelector = _m === void 0 ? 'value' : _m,
+        _o = _a.readOnly,
+        readOnly = _o === void 0 ? false : _o,
+        _p = _a.isInvalid,
+        isInvalid = _p === void 0 ? false : _p,
+        _q = _a.noOptionIcon,
+        noOptionIcon = _q === void 0 ? false : _q,
+        fetchData = _a.fetchData,
+        onSearch = _a.onSearch,
+        _r = _a.isLoading,
+        isLoading = _r === void 0 ? false : _r,
+        css = _a.css,
+        props = __rest(_a, ["option", "onChange", "value", "placeholder", "searchPlaceholder", "embedSearch", "size", "disabled", "search", "iconColor", "hideArrowicon", "showLeadingIcon", "placement", "disabledOptions", "textSelector", "valueSelector", "readOnly", "isInvalid", "noOptionIcon", "fetchData", "onSearch", "isLoading", "css"]);
+
+    var _s = React.useState([]),
+        options = _s[0],
+        setOptions = _s[1];
+
+    var _t = React.useState([]),
+        item = _t[0],
+        setItem = _t[1];
+
+    var _u = React.useState(value),
+        selectedValue = _u[0],
+        setSelectedValue = _u[1];
+
+    var _v = React.useState(),
+        query = _v[0],
+        setQuery = _v[1];
+
+    var scrollerRef = React.useRef(null);
+    React.useEffect(function () {
+      var _a;
+
+      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        top: 0
+      });
+    }, [query]);
+
+    var handleInputValue = function handleInputValue(value, isReset) {
+      if (isReset === void 0) {
+        isReset = false;
+      }
 
-    const handleInputValue = (value, isReset) => {
       if (onSearch && !isReset) onSearch(value);
 
       if (value === '') {
         return setItem(options);
       } else {
-        let filterItems = options.filter(item => item.name.toLowerCase().includes(value.toLocaleLowerCase()));
-        setItem(filterItems);
+        setItem(options.filter(function (item) {
+          return item.name.toLowerCase().includes(value.toLocaleLowerCase());
+        }));
       }
     };
 
-    const generateOptions = (data, valueSelector = '', textSelector = '') => {
-      return data.map(option => {
+    var generateOptions = function generateOptions(data, valueSelector, textSelector) {
+      if (valueSelector === void 0) {
+        valueSelector = '';
+      }
+
+      if (textSelector === void 0) {
+        textSelector = '';
+      }
+
+      return data.map(function (option) {
         if (typeof option === 'object') {
-          const name = textSelector ? option[textSelector] : Object.values(option)[0];
-          const value = valueSelector ? option[valueSelector] : Object.values(option)[1];
+          var name_1 = textSelector ? option[textSelector] : Object.values(option)[0];
+          var value_1 = valueSelector ? option[valueSelector] : Object.values(option)[1];
           return {
-            name,
-            value,
+            name: name_1,
+            value: value_1,
             render: option.render,
-            isDisabled: disabledOptions.length > 0 ? disabledOptions.includes(value) : option.isDisabled
+            isDisabled: option.isDisabled === undefined && disabledOptions && disabledOptions.length > 0 ? disabledOptions.includes(value_1) : option.isDisabled
           };
         }
 
@@ -8267,313 +8403,240 @@
           name: option,
           value: option,
           render: option.render,
-          isDisabled: disabledOptions.includes(option)
+          isDisabled: disabledOptions && disabledOptions.includes(option)
         };
       });
     };
 
-    React__namespace.useEffect(() => {
+    React.useEffect(function () {
       setSelectedValue(value);
     }, [value]);
-    React__namespace.useEffect(() => {
-      // if (valueSelector) {
-      const generatedOption = generateOptions(option, valueSelector, textSelector);
+    React.useEffect(function () {
+      var generatedOption = generateOptions(option, valueSelector, textSelector);
       setItem(generatedOption);
-      setOptions(generatedOption); // }
-    }, [option, valueSelector, textSelector]);
-    return /*#__PURE__*/React__namespace.createElement(Downshift__default["default"], _extends({}, props, {
+      setOptions(generatedOption);
+    }, [option, disabledOptions, valueSelector, textSelector]);
+    var debouncedSearch = React__namespace.useRef(debounce__default["default"](function (query) {
+      return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          setQuery(query);
+          if (onSearch) onSearch(query);
+          return [2
+          /*return*/
+          ];
+        });
+      });
+    }, 1000)).current;
+    React__namespace.useEffect(function () {
+      return function () {
+        debouncedSearch.cancel();
+      };
+    }, [debouncedSearch]);
+    return jsxRuntime.jsx(Downshift__default["default"], __assign({}, props, {
       onChange: onChange,
-      itemToString: item => item ? item.name : '',
+      itemToString: function (item) {
+        return item ? item.name : '';
+      },
       selectedItem: selectedValue !== undefined ? selectedValue : null,
-      onSelect: setSelectedValue,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 364,
-        columnNumber: 5
-      }
-    }), ({
-      getRootProps,
-      getToggleButtonProps,
-      getMenuProps,
-      getInputProps,
-      getItemProps,
-      isOpen,
-      selectedItem,
-      highlightedIndex,
-      initialSelectedItem,
-      inputValue
-    }) => {
-      if (!isOpen) {
-        handleInputValue('', true);
-      }
+      onSelect: function (selectedItem, _) {
+        return setSelectedValue(selectedItem);
+      },
+      onStateChange: function (state) {
+        if (!('isOpen' in state)) return;
+        if (state.isOpen && embedSearch) handleInputValue('', true);
 
-      const handleDownOption = () => {
-        if (icon || noOptionIcon) {
-          return null;
+        if (!state.isOpen && fetchData && query && query.length > 0 && onSearch) {
+          onSearch('');
+          setQuery('');
         }
-
-        return /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps({
-          disabled: disabled || readOnly
-        }), {
-          disabled: disabled,
-          readOnly: readOnly,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 393,
-            columnNumber: 13
-          }
-        }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
-          color: iconColor,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 398,
-            columnNumber: 15
+      }
+    }, {
+      children: function (_a) {
+        var getRootProps = _a.getRootProps,
+            getToggleButtonProps = _a.getToggleButtonProps,
+            getMenuProps = _a.getMenuProps,
+            getInputProps = _a.getInputProps,
+            getItemProps = _a.getItemProps,
+            isOpen = _a.isOpen,
+            selectedItem = _a.selectedItem,
+            highlightedIndex = _a.highlightedIndex;
+
+        var handleDownOption = function handleDownOption() {
+          if (hideArrowicon || noOptionIcon) {
+            return null;
           }
-        }));
-      };
 
-      return /*#__PURE__*/React__namespace.createElement(SelectContainer, {
-        css: css,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 404,
-          columnNumber: 11
-        }
-      }, /*#__PURE__*/React__namespace.createElement(SelectBox, _extends({}, getRootProps({}, {
-        suppressRefError: true
-      }), {
-        size: size,
-        disabled: disabled,
-        readOnly: readOnly,
-        isInvalid: isInvalid,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 405,
-          columnNumber: 13
-        }
-      }), search ? /*#__PURE__*/React__namespace.createElement(Box, {
-        style: {
-          width: '100%',
-          flex: 1
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 413,
-          columnNumber: 17
-        }
-      }, icon ? /*#__PURE__*/React__namespace.createElement(SelectInputSearch, {
-        disabled: disabled,
-        placeholder: placeholder,
-        readOnly: readOnly,
-        handleInputValue: handleInputValue,
-        inputProps: getInputProps({
-          onChange: event => handleInputValue(event.target.value),
-          disabled
+          return jsxRuntime.jsx(IconContainer, __assign({}, getToggleButtonProps({
+            disabled: disabled || readOnly
+          }), {
+            disabled: disabled,
+            readOnly: readOnly
+          }, {
+            children: jsxRuntime.jsx(icons.CaretDownOutline, {
+              color: iconColor
+            }, void 0)
+          }), void 0);
+        };
+
+        return jsxRuntime.jsxs(SelectContainer, __assign({
+          css: css
         }, {
-          suppressRefError: true
-        }),
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 418,
-          columnNumber: 21
-        }
-      }) : /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
-        placeholder: placeholder,
-        disabled: disabled,
-        readOnly: readOnly
-      }, getInputProps({
-        onChange: event => handleInputValue(event.target.value),
-        disabled
-      }), {
-        css: {
-          width: 'calc(100% - $spacing-05)'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 429,
-          columnNumber: 21
-        }
-      }))) : /*#__PURE__*/React__namespace.createElement(Button$1, _extends({}, getToggleButtonProps({
-        disabled: disabled || readOnly
-      }), {
-        disabled: disabled,
-        size: size,
-        readOnly: readOnly,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 441,
-          columnNumber: 17
-        }
-      }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text$1, {
-        color: "primary",
-        css: StyledText$1,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 448,
-          columnNumber: 21
-        }
-      }, selectedItem.render ? selectedItem.render() : selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text$1, {
-        color: "disable",
-        css: StyledText$1,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 452,
-          columnNumber: 21
-        }
-      }, placeholder)), handleDownOption()), /*#__PURE__*/React__namespace.createElement(OptionWrapper$2, _extends({}, getMenuProps(), {
-        css: {
-          display: isOpen ? 'block' : 'none'
-        },
-        placement: placement,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 460,
-          columnNumber: 13
-        }
-      }), !search && embedSearch && isOpen && /*#__PURE__*/React__namespace.createElement(SelectContainer, {
-        css: {
-          position: 'sticky',
-          top: 0,
-          zIndex: '$sticky',
-          padding: '$spacing-04 $spacing-05 0',
-          backgroundColor: '$bgWhite'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 462,
-          columnNumber: 17
-        }
-      }, /*#__PURE__*/React__namespace.createElement(InputSearchbox, {
-        size: size,
-        onChange: handleInputValue,
-        placeholder: searchPlaceholder,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 471,
-          columnNumber: 19
-        }
-      })), item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 475,
-          columnNumber: 17
-        }
-      }, item.map((item, index) => {
-        var _item$value;
+          children: [jsxRuntime.jsxs(SelectBox, __assign({}, getRootProps({
+            refKey: 'ref'
+          }, {
+            suppressRefError: true
+          }), {
+            size: size,
+            disabled: disabled,
+            readOnly: readOnly,
+            isInvalid: isInvalid
+          }, {
+            children: [search ? jsxRuntime.jsx(Box, __assign({
+              style: {
+                width: '100%',
+                flex: 1
+              }
+            }, {
+              children: jsxRuntime.jsx(SelectInputSearch, {
+                showLeadingIcon: showLeadingIcon,
+                showClearIcon: hideArrowicon,
+                disabled: disabled,
+                placeholder: placeholder,
+                readOnly: readOnly,
+                handleInputValue: !fetchData ? handleInputValue : function (query) {
+                  if (onSearch) onSearch(query);
+                  setQuery(query);
+                },
+                inputProps: getInputProps({
+                  onChange: function (event) {
+                    if (event.type !== 'change') return;
+                    var query = event.target.value;
+                    if (!fetchData) handleInputValue(query);else debouncedSearch(query);
+                  },
+                  disabled: disabled
+                }),
+                onClick: getToggleButtonProps().onClick
+              }, void 0)
+            }), void 0) : jsxRuntime.jsx(Button$1, __assign({}, getToggleButtonProps({
+              disabled: disabled || readOnly
+            }), {
+              disabled: disabled,
+              size: size,
+              readOnly: readOnly
+            }, {
+              children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsxRuntime.jsx(Text$1, __assign({
+                color: "primary",
+                css: StyledText$1
+              }, {
+                children: selectedItem.name
+              }), void 0) : jsxRuntime.jsx(Text$1, __assign({
+                color: "disable",
+                css: StyledText$1
+              }, {
+                children: placeholder
+              }), void 0)
+            }), void 0), handleDownOption()]
+          }), void 0), jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({}, {
+            suppressRefError: true
+          }), {
+            css: {
+              display: isOpen ? 'block' : 'none'
+            },
+            placement: placement,
+            ref: scrollerRef
+          }, {
+            children: [!search && embedSearch && isOpen && jsxRuntime.jsx(SelectContainer, __assign({
+              css: {
+                position: 'sticky',
+                top: 0,
+                zIndex: '$sticky',
+                padding: '$spacing-04 $spacing-05 0',
+                backgroundColor: '$bgWhite'
+              }
+            }, {
+              children: jsxRuntime.jsx(InputSearchbox, {
+                size: 'sm',
+                onChange: handleInputValue,
+                placeholder: searchPlaceholder
+              }, void 0)
+            }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
+              justify: "center",
+              align: "center",
+              css: {
+                position: 'absolute',
+                inset: 0,
+                zIndex: '$sticky',
+                width: '100%',
+                height: '100%',
+                backgroundColor: '$bgWhite',
+                opacity: 0.8
+              }
+            }, {
+              children: jsxRuntime.jsx(Text$1, __assign({
+                variant: "caption"
+              }, {
+                children: "Loading .... "
+              }), void 0)
+            }), void 0), item.length > 0 ? jsxRuntime.jsx(ConditionalWrapper, __assign({
+              condition: !!fetchData && item.length > 0,
+              wrapper: function (children) {
+                return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
+                  loadMore: function (_) {
+                    if (!isLoading && fetchData) fetchData({
+                      query: query
+                    });
+                  },
+                  hasMore: true,
+                  threshold: 5,
+                  useWindow: false
+                }, {
+                  children: children
+                }), void 0);
+              }
+            }, {
+              children: jsxRuntime.jsx(SelectOption, {
+                children: item.map(function (item, index) {
+                  var _a;
 
-        return /*#__PURE__*/React__namespace.createElement(SelectItem, _extends({}, getItemProps({
-          item,
-          disabled: item.isDisabled
-        }), {
-          key: (_item$value = item.value) != null ? _item$value : index,
-          css: item.isDisabled ? {
-            backgroundColor: 'unset',
-            cursor: 'not-allowed',
-            color: '$textDisable'
-          } : {
-            backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-            fontWeight: 'normal',
-            color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
-          },
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 477,
-            columnNumber: 21
-          }
-        }), item.render ? item.render() : item.name);
-      })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 499,
-          columnNumber: 17
-        }
-      }, /*#__PURE__*/React__namespace.createElement(StyledDiv$2, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 500,
-          columnNumber: 19
-        }
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          marginRight: '6px'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 501,
-          columnNumber: 21
-        }
-      }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
-        size: "16px",
-        color: colors.iconDisable,
-        style: {
-          verticalAlign: 'text-bottom'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 502,
-          columnNumber: 23
-        }
-      })), "Item tidak ditemukan"))));
-    });
+                  return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
+                    item: item,
+                    disabled: item.isDisabled
+                  }), {
+                    key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                    css: item.isDisabled ? {
+                      backgroundColor: 'unset',
+                      cursor: 'not-allowed',
+                      color: '$textDisable'
+                    } : {
+                      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                      fontWeight: 'normal',
+                      color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
+                    }
+                  }), item.render ? item.render(selectedItem) : item.name);
+                })
+              }, void 0)
+            }), void 0) : jsxRuntime.jsx(SelectOption, {
+              children: jsxRuntime.jsxs(StyledDiv$2, {
+                children: [jsxRuntime.jsx("div", __assign({
+                  style: {
+                    marginRight: '6px'
+                  }
+                }, {
+                  children: jsxRuntime.jsx(icons.CircleInfoOutline, {
+                    size: "16px",
+                    color: colors.iconDisable,
+                    style: {
+                      verticalAlign: 'text-bottom'
+                    }
+                  }, void 0)
+                }), void 0), "Item tidak ditemukan"]
+              }, void 0)
+            }, void 0)]
+          }), void 0)]
+        }), void 0);
+      }
+    }), void 0);
   }
-  Select$1.propTypes = {
-    placeholder: PropTypes__default["default"].string,
-    searchPlaceholder: PropTypes__default["default"].string,
-    embedSearch: PropTypes__default["default"].bool,
-    option: PropTypes__default["default"].array.isRequired,
-    onChange: PropTypes__default["default"].func,
-    size: PropTypes__default["default"].string,
-    disabled: PropTypes__default["default"].bool,
-    search: PropTypes__default["default"].bool,
-    value: PropTypes__default["default"].object,
-    iconColor: PropTypes__default["default"].string,
-    icon: PropTypes__default["default"].bool,
-    placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
-    textSelector: PropTypes__default["default"].string,
-    valueSelector: PropTypes__default["default"].string,
-    disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    onSearch: PropTypes__default["default"].func,
-    readOnly: PropTypes__default["default"].bool,
-    isInvalid: PropTypes__default["default"].bool,
-    noOptionIcon: PropTypes__default["default"].bool
-  };
-  Select$1.defaultProps = {
-    placeholder: 'Select Item',
-    searchPlaceholder: 'Cari..',
-    embedSearch: false,
-    size: 'lg',
-    disabled: false,
-    search: false,
-    iconColor: 'currentColor',
-    icon: false,
-    placement: 'bottom',
-    disabledOptions: [],
-    textSelector: 'name',
-    valueSelector: 'value',
-    readOnly: false,
-    isInvalid: false,
-    noOptionIcon: false
-  };
 
   var tryToString$3 = tryToString$5;
 
@@ -8687,7 +8750,7 @@
   var toObject$3 = toObject$7;
   var lengthOfArrayLike$3 = lengthOfArrayLike$6;
   var deletePropertyOrThrow = deletePropertyOrThrow$1;
-  var toString$9 = toString$f;
+  var toString$b = toString$h;
   var fails$8 = fails$s;
   var internalSort = arraySort$1;
   var arrayMethodIsStrict$1 = arrayMethodIsStrict$2;
@@ -8753,7 +8816,7 @@
       if (y === undefined) return -1;
       if (x === undefined) return 1;
       if (comparefn !== undefined) return +comparefn(x, y) || 0;
-      return toString$9(x) > toString$9(y) ? 1 : -1;
+      return toString$b(x) > toString$b(y) ? 1 : -1;
     };
   };
 
@@ -8859,7 +8922,7 @@
   var uncurryThis$f = functionUncurryThis;
   var getOwnPropertyDescriptor$2 = objectGetOwnPropertyDescriptor.f;
   var toLength$2 = toLength$4;
-  var toString$8 = toString$f;
+  var toString$a = toString$h;
   var notARegExp = notARegexp;
   var requireObjectCoercible$5 = requireObjectCoercible$a;
   var correctIsRegExpLogic = correctIsRegexpLogic;
@@ -8880,10 +8943,10 @@
   // https://tc39.es/ecma262/#sec-string.prototype.startswith
   $$b({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
     startsWith: function startsWith(searchString /* , position = 0 */) {
-      var that = toString$8(requireObjectCoercible$5(this));
+      var that = toString$a(requireObjectCoercible$5(this));
       notARegExp(searchString);
       var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
-      var search = toString$8(searchString);
+      var search = toString$a(searchString);
       return un$StartsWith
         ? un$StartsWith(that, search, index)
         : stringSlice$7(that, index, index + search.length) === search;
@@ -9902,12 +9965,6 @@
     value: ''
   };
 
-  const ConditionalWrapper = ({
-    condition,
-    wrapper,
-    children
-  }) => condition ? wrapper(children) : children;
-
   function InputResourceList(_a) {
     var data = _a.data,
         _b = _a.disabled,
@@ -9931,13 +9988,9 @@
         checkedResources = _g[0],
         setCheckedResources = _g[1];
 
-    var _h = React.useState(value);
-        _h[0];
-        _h[1];
-
-    var _j = React.useState(),
-        query = _j[0],
-        setQuery = _j[1];
+    var _h = React.useState(),
+        query = _h[0],
+        setQuery = _h[1];
 
     var scrollerRef = React.useRef(null);
     React.useEffect(function () {
@@ -11110,7 +11163,7 @@
 
   var uncurryThis$e = functionUncurryThis;
   var requireObjectCoercible$4 = requireObjectCoercible$a;
-  var toString$7 = toString$f;
+  var toString$9 = toString$h;
   var whitespaces$2 = whitespaces$3;
 
   var replace$4 = uncurryThis$e(''.replace);
@@ -11121,7 +11174,7 @@
   // `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
   var createMethod$1 = function (TYPE) {
     return function ($this) {
-      var string = toString$7(requireObjectCoercible$4($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;
@@ -11143,7 +11196,7 @@
   var global$b = global$s;
   var fails$7 = fails$s;
   var uncurryThis$d = functionUncurryThis;
-  var toString$6 = toString$f;
+  var toString$8 = toString$h;
   var trim$1 = stringTrim.trim;
   var whitespaces$1 = whitespaces$3;
 
@@ -11159,7 +11212,7 @@
   // `parseInt` method
   // https://tc39.es/ecma262/#sec-parseint-string-radix
   var numberParseInt = FORCED$2 ? function parseInt(string, radix) {
-    var S = trim$1(toString$6(string));
+    var S = trim$1(toString$8(string));
     return $parseInt$1(S, (radix >>> 0) || (exec$4(hex, S) ? 16 : 10));
   } : $parseInt$1;
 
@@ -14549,9 +14602,6 @@
     variants: {
       size: {
         sm: {
-          fontSize: 24
-        },
-        md: {
           fontSize: 28
         },
         lg: {
@@ -14569,10 +14619,6 @@
     variants: {
       size: {
         sm: {
-          width: 180,
-          height: 115
-        },
-        md: {
           width: 200,
           height: 130
         },
@@ -14639,7 +14685,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 107,
+        lineNumber: 100,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(IconDown, _extends({}, props, {
@@ -14649,7 +14695,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 114,
+        lineNumber: 107,
         columnNumber: 5
       }
     }));
@@ -14697,7 +14743,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 149,
+        lineNumber: 142,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14706,7 +14752,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 150,
+        lineNumber: 143,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -14716,7 +14762,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 151,
+        lineNumber: 144,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -14726,7 +14772,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 152,
+        lineNumber: 145,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -14737,7 +14783,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 154,
+        lineNumber: 147,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -14745,7 +14791,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 155,
+        lineNumber: 148,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14754,7 +14800,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 156,
+        lineNumber: 149,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -14764,7 +14810,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 157,
+        lineNumber: 150,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -14774,7 +14820,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 158,
+        lineNumber: 151,
         columnNumber: 9
       }
     })));
@@ -14783,7 +14829,7 @@
     /**
      Resize time picker.
     */
-    size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+    size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
     /**
      Change handler.
@@ -14819,7 +14865,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 185,
+        lineNumber: 178,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
@@ -14831,7 +14877,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 186,
+        lineNumber: 179,
         columnNumber: 7
       }
     }));
@@ -14846,7 +14892,7 @@
     /**
      Resize time picker.
     */
-    size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+    size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
     /**
      Change handler.
@@ -14862,9 +14908,13 @@
      Time picker value, support moment format.
     */
     value: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+     Disabled state.
+    */
     disabled: PropTypes__default["default"].bool
   };
-  NativeTimePicker.displayName = 'TimePicker';
+  NativeTimePicker.displayName = 'NativeTimePicker';
 
   var _jsxFileName$j = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\InputTimePicker.js";
 
@@ -14893,7 +14943,7 @@
     }
 
     const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
-      size: "sm",
+      size: size,
       disabled: disabled,
       onClick: handleChange,
       __self: this,
@@ -15037,12 +15087,16 @@
      Additional styles.
     */
     css: PropTypes__default["default"].object,
+
+    /**
+     Disabled state.
+    */
     disabled: PropTypes__default["default"].bool,
 
     /**
      Resize time picker.
     */
-    size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+    size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
     /**
      Custom placeholder input time picker.
@@ -16062,8 +16116,9 @@
         footer = _a.footer,
         infiniteScrollWrapper = _a.infiniteScrollWrapper,
         isLoading = _a.isLoading,
-        rowGroup = _a.rowGroup,
-        css = _a.css;
+        rowGroup = _a.rowGroup;
+        _a.hiddenColumns;
+        var css = _a.css;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -16081,10 +16136,11 @@
         children: [jsxRuntime.jsx(TableHead$2, {
           children: headerGroups.map(function (headerGroup) {
             return jsxRuntime.jsx(TableHeadRow$3, __assign({}, headerGroup.getHeaderGroupProps(), {
-              children: headerGroup.headers.map(function (column) {
+              children: headerGroup.headers.filter(function (column) {
+                return column.isMobileHeader || column.id === 'selection';
+              }).map(function (column) {
                 var headerRender = column.render('Header');
-                return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps( // column.getSortByToggleProps && !column.unsortable
-                !column.unsortable ? column.getSortByToggleProps({
+                return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
                   title: 'Urutkan'
                 }) : {}), {
                   children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
@@ -16121,7 +16177,9 @@
                   children: row.cells[0].render('Cell')
                 }), void 0)
               }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({}, row.getRowProps(), {
-                children: row.cells.map(function (cell) {
+                children: row.cells.filter(function (cell) {
+                  return cell.column.isMobileHeader || cell.column.id === 'selection';
+                }).map(function (cell) {
                   return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                     children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
                       justify: "between",
@@ -16148,7 +16206,7 @@
                   children: [jsxRuntime.jsx(Flex$1, __assign({
                     direction: "column"
                   }, {
-                    children: row.allCells.filter(function (cell) {
+                    children: row.cells.filter(function (cell) {
                       return !cell.column.isMobileHeader && cell.column.accessor;
                     }).map(function (cell) {
                       var _a;
@@ -16158,7 +16216,7 @@
                         justify: "between",
                         css: {
                           backgroundColor: colors.bgGray,
-                          padding: '$spacing-03 $spacing-05',
+                          padding: "$spacing-03 $spacing-05 ".concat('selection' in row.values ? '$spacing-03 $spacing-07' : ''),
                           borderBottom: '1pt solid $bgBorder'
                         }
                       }, {
@@ -16465,7 +16523,9 @@
         _m = _a.cellAlign,
         cellAlign = _m === void 0 ? 'center' : _m,
         selectedIds = _a.selectedIds,
-        rowGroup = _a.rowGroup;
+        rowGroup = _a.rowGroup,
+        hiddenColumns = _a.hiddenColumns,
+        columnOrder = _a.columnOrder;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
@@ -16504,12 +16564,12 @@
       getRowId: function (row) {
         return row[keyId] || JSON.stringify(row);
       }
-    }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky);
+    }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky, reactTable.useColumnOrder);
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
-        headerGroups = instance.headerGroups,
-        allColumns = instance.allColumns,
-        visibleColumns = instance.visibleColumns,
+        headerGroups = instance.headerGroups;
+        instance.allColumns;
+        var visibleColumns = instance.visibleColumns,
         prepareRow = instance.prepareRow,
         page = instance.page,
         gotoPage = instance.gotoPage,
@@ -16519,7 +16579,9 @@
         pageIndex = _p.pageIndex,
         pageSize = _p.pageSize,
         sortBy = _p.sortBy,
-        selectedRowIds = _p.selectedRowIds;
+        selectedRowIds = _p.selectedRowIds,
+        setHiddenColumns = instance.setHiddenColumns,
+        setColumnOrder = instance.setColumnOrder;
 
     var doFetchData = function doFetchData(pageIndex, pageSize, sortAccessor, sortDirection) {
       if (sortAccessor === void 0) {
@@ -16589,25 +16651,15 @@
       }), void 0);
     };
 
+    React.useEffect(function () {
+      if (hiddenColumns) setHiddenColumns(hiddenColumns);
+    }, [hiddenColumns]);
+    React.useEffect(function () {
+      if (columnOrder) setColumnOrder(columnOrder);
+    }, [columnOrder]);
     React.useEffect(function () {
       setPageSize(rowLimit);
     }, [rowLimit]);
-    React.useEffect(function () {
-      if (isMobile) {
-        allColumns.map(function (column) {
-          if (!column.isMobileHeader && column.id !== 'selection') {
-            column.toggleHidden(true);
-          }
-
-          return column;
-        });
-      } else {
-        allColumns.map(function (column) {
-          column.toggleHidden(false);
-          return column;
-        });
-      }
-    }, [allColumns, isMobile]);
     React.useEffect(function () {
       gotoPage(controlledPageIndex);
     }, [controlledPageIndex]);
@@ -16753,7 +16805,8 @@
                   }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({}, row.getRowProps(), {
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
-                    }).map(function (cell, index) {
+                    }).map(function (cell) {
+                      console.log(cell);
                       return jsxRuntime.jsx(TableCell$2, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign({
                           padding: cell.column.accessor ? '20px 8px' : '20px 20px',
@@ -16835,6 +16888,7 @@
         infiniteScrollWrapper: renderInfiniteScrollWrapper,
         isLoading: isLoading,
         rowGroup: rowGroup,
+        hiddenColumns: hiddenColumns,
         css: css
       }, void 0)]
     }), void 0);
@@ -16889,7 +16943,7 @@
   var thisNumberValue$1 = uncurryThis$9(1.0.valueOf);
 
   var toIntegerOrInfinity$3 = toIntegerOrInfinity$6;
-  var toString$5 = toString$f;
+  var toString$7 = toString$h;
   var requireObjectCoercible$3 = requireObjectCoercible$a;
 
   var $RangeError$2 = RangeError;
@@ -16897,7 +16951,7 @@
   // `String.prototype.repeat` method implementation
   // https://tc39.es/ecma262/#sec-string.prototype.repeat
   var stringRepeat = function repeat(count) {
-    var str = toString$5(requireObjectCoercible$3(this));
+    var str = toString$7(requireObjectCoercible$3(this));
     var result = '';
     var n = toIntegerOrInfinity$3(count);
     if (n < 0 || n == Infinity) throw $RangeError$2('Wrong number of repetitions');
@@ -17039,7 +17093,7 @@
   var global$3 = global$s;
   var fails$3 = fails$s;
   var uncurryThis$7 = functionUncurryThis;
-  var toString$4 = toString$f;
+  var toString$6 = toString$h;
   var trim = stringTrim.trim;
   var whitespaces = whitespaces$3;
 
@@ -17054,7 +17108,7 @@
   // `parseFloat` method
   // https://tc39.es/ecma262/#sec-parsefloat-string
   var numberParseFloat = FORCED ? function parseFloat(string) {
-    var trimmedString = trim(toString$4(string));
+    var trimmedString = trim(toString$6(string));
     var result = n$ParseFloat(trimmedString);
     return result === 0 && charAt$6(trimmedString, 0) == '-' ? -0 : result;
   } : n$ParseFloat;
@@ -17070,7 +17124,7 @@
 
   var uncurryThis$6 = functionUncurryThis;
   var toIntegerOrInfinity$1 = toIntegerOrInfinity$6;
-  var toString$3 = toString$f;
+  var toString$5 = toString$h;
   var requireObjectCoercible$2 = requireObjectCoercible$a;
 
   var charAt$5 = uncurryThis$6(''.charAt);
@@ -17079,7 +17133,7 @@
 
   var createMethod = function (CONVERT_TO_STRING) {
     return function ($this, pos) {
-      var S = toString$3(requireObjectCoercible$2($this));
+      var S = toString$5(requireObjectCoercible$2($this));
       var position = toIntegerOrInfinity$1(pos);
       var size = S.length;
       var first, second;
@@ -17123,7 +17177,7 @@
   var speciesConstructor = speciesConstructor$2;
   var advanceStringIndex$1 = advanceStringIndex$2;
   var toLength$1 = toLength$4;
-  var toString$2 = toString$f;
+  var toString$4 = toString$h;
   var getMethod$1 = getMethod$6;
   var arraySlice$1 = arraySliceSimple;
   var callRegExpExec = regexpExecAbstract;
@@ -17165,7 +17219,7 @@
     ) {
       // based on es5-shim implementation, need to rework it
       internalSplit = function (separator, limit) {
-        var string = toString$2(requireObjectCoercible$1(this));
+        var string = toString$4(requireObjectCoercible$1(this));
         var lim = limit === undefined ? MAX_UINT32 : limit >>> 0;
         if (lim === 0) return [];
         if (separator === undefined) return [string];
@@ -17213,7 +17267,7 @@
         var splitter = separator == undefined ? undefined : getMethod$1(separator, SPLIT);
         return splitter
           ? call$3(splitter, separator, O, limit)
-          : call$3(internalSplit, toString$2(O), separator, limit);
+          : call$3(internalSplit, toString$4(O), separator, limit);
       },
       // `RegExp.prototype[@@split]` method
       // https://tc39.es/ecma262/#sec-regexp.prototype-@@split
@@ -17222,7 +17276,7 @@
       // the 'y' flag.
       function (string, limit) {
         var rx = anObject$3(this);
-        var S = toString$2(string);
+        var S = toString$4(string);
         var res = maybeCallNative(internalSplit, rx, S, limit, internalSplit !== nativeSplit);
 
         if (res.done) return res.value;
@@ -17323,7 +17377,7 @@
   var isCallable$1 = isCallable$p;
   var toIntegerOrInfinity = toIntegerOrInfinity$6;
   var toLength = toLength$4;
-  var toString$1 = toString$f;
+  var toString$3 = toString$h;
   var requireObjectCoercible = requireObjectCoercible$a;
   var advanceStringIndex = advanceStringIndex$2;
   var getMethod = getMethod$6;
@@ -17381,13 +17435,13 @@
         var replacer = searchValue == undefined ? undefined : getMethod(searchValue, REPLACE);
         return replacer
           ? call$2(replacer, searchValue, O, replaceValue)
-          : call$2(nativeReplace, toString$1(O), searchValue, replaceValue);
+          : call$2(nativeReplace, toString$3(O), searchValue, replaceValue);
       },
       // `RegExp.prototype[@@replace]` method
       // https://tc39.es/ecma262/#sec-regexp.prototype-@@replace
       function (string, replaceValue) {
         var rx = anObject$2(this);
-        var S = toString$1(string);
+        var S = toString$3(string);
 
         if (
           typeof replaceValue == 'string' &&
@@ -17399,7 +17453,7 @@
         }
 
         var functionalReplace = isCallable$1(replaceValue);
-        if (!functionalReplace) replaceValue = toString$1(replaceValue);
+        if (!functionalReplace) replaceValue = toString$3(replaceValue);
 
         var global = rx.global;
         if (global) {
@@ -17414,7 +17468,7 @@
           push$3(results, result);
           if (!global) break;
 
-          var matchStr = toString$1(result[0]);
+          var matchStr = toString$3(result[0]);
           if (matchStr === '') rx.lastIndex = advanceStringIndex(S, toLength(rx.lastIndex), fullUnicode);
         }
 
@@ -17423,7 +17477,7 @@
         for (var i = 0; i < results.length; i++) {
           result = results[i];
 
-          var matched = toString$1(result[0]);
+          var matched = toString$3(result[0]);
           var position = max(min(toIntegerOrInfinity(result.index), S.length), 0);
           var captures = [];
           // NOTE: This is equivalent to
@@ -17436,7 +17490,7 @@
           if (functionalReplace) {
             var replacerArgs = concat([matched], captures, position, S);
             if (namedCaptures !== undefined) push$3(replacerArgs, namedCaptures);
-            var replacement = toString$1(apply(replaceValue, undefined, replacerArgs));
+            var replacement = toString$3(apply(replaceValue, undefined, replacerArgs));
           } else {
             replacement = getSubstitution(matched, S, position, captures, namedCaptures, replaceValue);
           }
@@ -17785,6 +17839,9 @@
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
         type: "button",
         role: "button",
+        css: {
+          cursor: 'pointer'
+        },
         onClick: () => {
           setOpenModal(false);
           option.onClick(props);
@@ -17801,7 +17858,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 95,
+          lineNumber: 98,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -17809,7 +17866,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 99,
+          lineNumber: 102,
           columnNumber: 19
         }
       })))))));
@@ -18156,7 +18213,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 74,
+        lineNumber: 75,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
@@ -18166,14 +18223,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 75,
+        lineNumber: 76,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 76,
+        lineNumber: 77,
         columnNumber: 7
       }
     }), children));
@@ -18187,14 +18244,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 85,
+          lineNumber: 86,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TemplateAlertFunction, _extends({}, props, {
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 86,
+          lineNumber: 87,
           columnNumber: 9
         }
       }))), document.getElementById('a-dialog'));
@@ -18238,7 +18295,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 127,
+        lineNumber: 128,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18249,14 +18306,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 128,
+        lineNumber: 129,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 129,
+        lineNumber: 130,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18264,7 +18321,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 130,
+        lineNumber: 131,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18272,7 +18329,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 131,
+        lineNumber: 132,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18283,7 +18340,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 132,
+        lineNumber: 133,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18291,7 +18348,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 133,
+        lineNumber: 134,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18299,14 +18356,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 137,
+        lineNumber: 138,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 138,
+        lineNumber: 139,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18316,7 +18373,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 139,
+        lineNumber: 140,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18328,7 +18385,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 141,
+        lineNumber: 142,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18336,7 +18393,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 142,
+        lineNumber: 143,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18350,7 +18407,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 143,
+        lineNumber: 144,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18358,28 +18415,30 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 145,
+        lineNumber: 146,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
+      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,
-        lineNumber: 146,
+        lineNumber: 147,
         columnNumber: 17
       }
-    }, props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+    }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 152,
+        lineNumber: 159,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: buttonCancel,
       css: {
@@ -18387,34 +18446,38 @@
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
+      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,
-        lineNumber: 153,
+        lineNumber: 160,
         columnNumber: 19
       }
-    }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
+    }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
       asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 162,
+        lineNumber: 171,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
       css: {
         flex: props.isMobile && 1
       },
+      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,
-        lineNumber: 163,
+        lineNumber: 172,
         columnNumber: 19
       }
-    }, props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
+    }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
   };
 
   function AlertDialog(props) {
@@ -18436,7 +18499,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 192,
+        lineNumber: 203,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18447,14 +18510,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 193,
+        lineNumber: 204,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 194,
+        lineNumber: 205,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18462,7 +18525,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 195,
+        lineNumber: 206,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
@@ -18470,7 +18533,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 196,
+        lineNumber: 207,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18481,7 +18544,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 197,
+        lineNumber: 208,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18489,7 +18552,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 198,
+        lineNumber: 209,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18497,14 +18560,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 202,
+        lineNumber: 213,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 203,
+        lineNumber: 214,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18514,7 +18577,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 204,
+        lineNumber: 215,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18526,7 +18589,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 206,
+        lineNumber: 217,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18534,7 +18597,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 207,
+        lineNumber: 218,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18548,7 +18611,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 208,
+        lineNumber: 219,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18556,31 +18619,33 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 210,
+        lineNumber: 221,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: props.onConfirm,
       buttonType: props.dialogType,
       css: {
         flex: props.isMobile && 1
       },
+      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,
-        lineNumber: 211,
+        lineNumber: 222,
         columnNumber: 17
       }
-    }, props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+    }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 222,
+        lineNumber: 235,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: props.onCancel,
       css: {
@@ -18588,58 +18653,70 @@
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
+      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,
-        lineNumber: 223,
+        lineNumber: 236,
         columnNumber: 19
       }
-    }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
+    }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 232,
+        lineNumber: 247,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
       size: "sm",
       onClick: props.onConfirm,
       buttonType: props.dialogType,
       css: {
         flex: props.isMobile && 1
       },
+      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,
-        lineNumber: 233,
+        lineNumber: 248,
         columnNumber: 19
       }
-    }, props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
+    }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
   }
   TemplateAlertFunction.propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    dialogType: PropTypes.string,
-    onCancel: PropTypes.func,
-    onConfirm: PropTypes.func
+    title: PropTypes__default["default"].string.isRequired,
+    description: PropTypes__default["default"].string.isRequired,
+    dialogType: PropTypes__default["default"].string,
+    onCancel: PropTypes__default["default"].func,
+    onConfirm: PropTypes__default["default"].func,
+    disabledButton: PropTypes__default["default"].bool,
+    actionButtonProps: PropTypes__default["default"].object,
+    cancelButtonProps: PropTypes__default["default"].object
   };
   TemplateAlertFunction.defaultProps = {
     dialogType: 'primary',
     onCancel: () => {},
-    onConfirm: () => {}
+    onConfirm: () => {},
+    disabledButton: false
   };
   AlertDialog.propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    dialogType: PropTypes.string,
-    onCancel: PropTypes.func,
-    onConfirm: PropTypes.func
+    title: PropTypes__default["default"].string.isRequired,
+    description: PropTypes__default["default"].string.isRequired,
+    dialogType: PropTypes__default["default"].string,
+    onCancel: PropTypes__default["default"].func,
+    onConfirm: PropTypes__default["default"].func,
+    disabledButton: PropTypes__default["default"].bool,
+    actionButtonProps: PropTypes__default["default"].object,
+    cancelButtonProps: PropTypes__default["default"].object
   };
   AlertDialog.defaultProps = {
     dialogType: 'primary',
     onCancel: () => {},
-    onConfirm: () => {}
+    onConfirm: () => {},
+    disabledButton: false
   };
   const AlertDialogRoot = ADialog__namespace.Root;
   const AlertDialogTrigger = ADialog__namespace.Trigger;
@@ -18899,7 +18976,7 @@
   DropdownMenuArrow.displayName = 'DropdownMenuArrow';
 
   var charAt$2 = stringMultibyte.charAt;
-  var toString = toString$f;
+  var toString$2 = toString$h;
   var InternalStateModule$2 = internalState;
   var defineIterator = defineIterator$2;
 
@@ -18912,7 +18989,7 @@
   defineIterator(String, 'String', function (iterated) {
     setInternalState$2(this, {
       type: STRING_ITERATOR,
-      string: toString(iterated),
+      string: toString$2(iterated),
       index: 0
     });
   // `%StringIteratorPrototype%.next` method
@@ -19238,7 +19315,7 @@
   var classof = classof$7;
   var anObject = anObject$i;
   var isObject$3 = isObject$d;
-  var $toString$1 = toString$f;
+  var $toString$1 = toString$h;
   var create = objectCreate;
   var createPropertyDescriptor = createPropertyDescriptor$5;
   var getIterator = getIterator$3;
@@ -19627,7 +19704,7 @@
   var arraySlice = arraySliceSimple;
   var codeAt = stringMultibyte.codeAt;
   var toASCII = stringPunycodeToAscii;
-  var $toString = toString$f;
+  var $toString = toString$h;
   var setToStringTag = setToStringTag$5;
   var validateArgumentsLength = validateArgumentsLength$3;
   var URLSearchParamsModule = web_urlSearchParams_constructor;
@@ -20741,19 +20818,26 @@
         token = _a.token,
         progress = _a.progress,
         reqKey = _a.reqKey,
-        resKey = _a.resKey;
+        resKey = _a.resKey,
+        onError = _a.onError,
+        onSuccess = _a.onSuccess,
+        onProgress = _a.onProgress;
     var promise = new Promise(function (resolve, reject) {
       var formdata = new FormData();
       formdata.append(reqKey, file);
       request__default["default"].post(url).set(tokenKey, token).send(formdata).on('progress', function (e) {
-        return progress && progress(Math.round(e.percent));
+        onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
+        progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
       }).end(function (err, res) {
         if (err) {
+          var error = new Error(err.message);
+          onError === null || onError === void 0 ? void 0 : onError(error, (res === null || res === void 0 ? void 0 : res.text) && JSON.parse(res.text));
           reject(err.message);
         }
 
         if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
           var response = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+          onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
           resolve(response[resKey]);
         }
       });
@@ -20785,13 +20869,19 @@
       }
     }
   });
+  const FileExtension = styled('p', {
+    color: '#C1C1C1',
+    fontSize: 40,
+    fontWeight: 700,
+    fontStyle: 'normal'
+  });
   const ErrorMessage = styled('p', {
     color: '$red400',
     fontSize: 12,
     fontWeight: 400,
     fontStyle: 'normal',
     textAlign: 'center',
-    width: 190,
+    width: 135,
     marginTop: '$spacing-02'
   });
   const IconCard = styled('div', {
@@ -20826,16 +20916,9 @@
     cursor: 'pointer',
     background: 'rgba(39, 42, 42, 0.6)',
     borderRadius: 50,
-    width: 40,
-    height: 40,
-    padding: '$spacing-03'
-  });
-  const CheckIcon = styled(icons.CheckFilled, {
-    background: '$white',
-    borderRadius: 50,
-    width: 40,
-    height: 40,
-    padding: '$spacing-03'
+    width: 32,
+    height: 32,
+    padding: '$spacing-02'
   });
 
   const IconStateFull = props => {
@@ -20850,7 +20933,7 @@
     }
 
     return props.type === 'close' ? /*#__PURE__*/React__default["default"].createElement(CloseIcon, _extends({}, props, {
-      color: isHover ? '#E13743' : '#A5ABAB',
+      color: isHover ? '#E13743' : '#DF2A36',
       onMouseEnter: handleEnter,
       onMouseLeave: handleLeave,
       __self: undefined,
@@ -20877,6 +20960,9 @@
     multiple,
     fileList,
     onChange,
+    onError,
+    onSuccess,
+    onProgress,
     onPreview,
     onRemove,
     children,
@@ -20895,7 +20981,9 @@
     tokenKey,
     reqKey,
     resKey,
-    ratio
+    ratio,
+    disabled,
+    errorMessage
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -20905,7 +20993,7 @@
     const [dragActive, setDragActive] = React.useState(false);
     const [previewImage, setPreviewImage] = React.useState('');
     const [fileState, setFileState] = React.useState({});
-    const [errorMessage, setErrorMessage] = React.useState(null);
+    const [error, setError] = React.useState(null);
     const [crop, setCrop] = React.useState(null);
     const [completedCrop, setCompletedCrop] = React.useState(null);
     const [aspect, setAspect] = React.useState(ratio);
@@ -20919,7 +21007,15 @@
         setIsLoading(false);
       }
     }, [loading, progress]);
-    React.useEffect(() => {}, [ratio]);
+    React.useEffect(() => {
+      if (errorMessage && typeof errorMessage === 'string') {
+        setError(errorMessage);
+      }
+
+      return () => {
+        setError(null);
+      };
+    }, [errorMessage]);
     const ContainerUpload = styled('div', {
       border: '2px dashed $gray300',
       borderRadius: 8,
@@ -20955,6 +21051,17 @@
             height: height + 16,
             width: width + 16
           }
+        },
+        disabled: {
+          true: {
+            border: 'none',
+            background: '$formDisable',
+            cursor: 'not-allowed',
+            '&:hover': {
+              border: 'none',
+              background: '$formDisable'
+            }
+          }
         }
       }
     });
@@ -20998,11 +21105,13 @@
       borderRadius: 8,
       width: width,
       height: height - 36,
-      background: 'rgba(39, 42, 42, 0.6);'
+      background: '$gray50'
     });
 
     function handleClick() {
-      hiddenFileInput.current.click();
+      if (!disabled) {
+        hiddenFileInput.current.click();
+      }
     }
 
     function toggleModal() {
@@ -21029,6 +21138,9 @@
             tokenKey,
             reqKey,
             resKey,
+            onError,
+            onSuccess,
+            onProgress,
             progress: percent => {
               var _onChange, _onChange$then;
 
@@ -21049,7 +21161,7 @@
                 file: fileProgress,
                 indexReplace: indexReplace.current,
                 isReplace: indexReplace.current !== null
-              })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setErrorMessage(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setErrorMessage(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;
@@ -21071,14 +21183,14 @@
               file: fileSuccess,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setErrorMessage(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setErrorMessage(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;
 
             let fileError = Object.assign({}, newFile);
             let uid = fileError.uid;
             fileError.status = 'error';
-            fileError.errorMessage = error;
+            fileError.error = error;
             let arrError = [...arrFile];
 
             for (let i = 0; i < arrError.length; i++) {
@@ -21092,7 +21204,7 @@
               file: fileError,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setErrorMessage(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setErrorMessage(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;
@@ -21102,7 +21214,7 @@
             file: newFile,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setErrorMessage(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setErrorMessage(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) {
@@ -21196,6 +21308,33 @@
       }
     }
 
+    function handleOpenFile(file) {
+      var _String, _file$name;
+
+      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 || file === void 0 ? void 0 : file.url);
+      } else {
+        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 !== 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 || file === void 0 ? void 0 : file.name);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          }
+        });
+      }
+    }
+
     function handleDragEnter(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -21240,7 +21379,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 484,
+          lineNumber: 537,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21250,7 +21389,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 485,
+          lineNumber: 538,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21266,7 +21405,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 495,
+              lineNumber: 548,
               columnNumber: 16
             }
           });
@@ -21278,7 +21417,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 498,
+            lineNumber: 551,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21288,7 +21427,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 499,
+            lineNumber: 552,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21297,7 +21436,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 500,
+            lineNumber: 553,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21310,7 +21449,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 501,
+            lineNumber: 554,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21319,7 +21458,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 509,
+            lineNumber: 562,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21327,7 +21466,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 511,
+            lineNumber: 564,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21336,6 +21475,8 @@
 
     const renderFile = () => {
       return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+        var _item$name;
+
         if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
@@ -21344,7 +21485,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 522,
+              lineNumber: 575,
               columnNumber: 16
             }
           });
@@ -21355,7 +21496,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 525,
+            lineNumber: 578,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21365,7 +21506,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 526,
+            lineNumber: 579,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21374,7 +21515,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 527,
+            lineNumber: 580,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21387,7 +21528,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 528,
+            lineNumber: 581,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21397,37 +21538,58 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 536,
+            lineNumber: 589,
             columnNumber: 15
           }
-        }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
-          color: "#04C99E",
+        }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 537,
+            lineNumber: 590,
             columnNumber: 17
           }
-        }), /*#__PURE__*/React__default["default"].createElement(Text, {
+        }, ".", 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(Text, {
           css: {
-            color: '$textWhite',
+            color: '$textPrimary',
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             width: 180,
             whiteSpace: 'nowrap',
-            margin: '$spacing-07 $spacing-07 0 $spacing-07'
+            margin: '0 $spacing-07 0 $spacing-07'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$9,
+            lineNumber: 591,
+            columnNumber: 17
+          }
+        }, item.name))), /*#__PURE__*/React__default["default"].createElement(Box, {
+          css: {
+            position: 'absolute',
+            top: '45%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 538,
-            columnNumber: 17
+            lineNumber: 605,
+            columnNumber: 13
           }
-        }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
+        }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+          type: "eye",
+          onClick: () => handleOpenFile(item),
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 552,
+            lineNumber: 613,
+            columnNumber: 15
+          }
+        })), /*#__PURE__*/React__default["default"].createElement(Blank, {
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$9,
+            lineNumber: 615,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21443,7 +21605,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 563,
+          lineNumber: 626,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21457,7 +21619,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 564,
+          lineNumber: 627,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21483,7 +21645,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 565,
+          lineNumber: 628,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21491,14 +21653,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 578,
+          lineNumber: 641,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 579,
+          lineNumber: 642,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21511,12 +21673,13 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 650,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
         hidden: max ? fileList.length >= max ? true : false : false,
-        showError: errorMessage !== null,
+        disabled: disabled,
+        showError: error !== null,
         onClick: handleClick,
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
@@ -21526,7 +21689,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 588,
+          lineNumber: 651,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
@@ -21538,55 +21701,56 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 598,
+          lineNumber: 662,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 663,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 601,
+          lineNumber: 665,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 602,
+          lineNumber: 666,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
+        color: disabled ? '#C0C4C4' : '#404545',
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 603,
+          lineNumber: 667,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
         css: {
-          margin: '$spacing-07 $spacing-07 0 $spacing-07'
+          margin: '$spacing-04 $spacing-05 0 $spacing-05'
         },
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 605,
+          lineNumber: 669,
           columnNumber: 17
         }
-      }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 612,
-          columnNumber: 26
+          lineNumber: 676,
+          columnNumber: 19
         }
-      }, errorMessage));
+      }, error));
     }
 
     function renderCropper() {
@@ -21594,7 +21758,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 619,
+          lineNumber: 683,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21602,7 +21766,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 620,
+          lineNumber: 684,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21610,7 +21774,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 621,
+          lineNumber: 685,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21623,7 +21787,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 687,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -21634,7 +21798,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 690,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21645,7 +21809,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 691,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21658,14 +21822,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 692,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 631,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21677,7 +21841,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 632,
+          lineNumber: 696,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21685,7 +21849,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 633,
+          lineNumber: 697,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21697,7 +21861,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 698,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21705,7 +21869,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 640,
+          lineNumber: 704,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21714,7 +21878,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 641,
+          lineNumber: 705,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21722,7 +21886,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 708,
           columnNumber: 15
         }
       }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21738,7 +21902,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 655,
+        lineNumber: 719,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -21747,7 +21911,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 658,
+        lineNumber: 722,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -21756,25 +21920,21 @@
   Upload.defaultProps = {
     listType: 'file',
     fileList: [],
-    height: 200,
-    width: 200,
+    height: 140,
+    width: 140,
     cropperTitle: 'Potong Gambar',
     showCropper: true,
     tokenKey: 'Token',
     reqKey: 'file',
     resKey: 'url',
-    ratio: 16 / 9
+    ratio: 16 / 9,
+    disabled: false
   };
   Upload.propTypes = {
     /**
-     Progress of upload process
-    */
-    progress: PropTypes__default["default"].number,
-
-    /**
-     Auto increment progress of upload process
+     Disabled state of upload.
     */
-    loading: PropTypes__default["default"].bool,
+    disabled: PropTypes__default["default"].bool,
 
     /**
      Built-in stylesheets, support for two types.
@@ -21796,6 +21956,24 @@
      */
     onChange: PropTypes__default["default"].func,
 
+    /**
+     A callback function, can be executed when uploading in progress.
+     `(progress) => void`
+     */
+    onProgress: PropTypes__default["default"].func,
+
+    /**
+     A callback function, can be executed when uploading is success.
+     `(response) => void`
+     */
+    onSuccess: PropTypes__default["default"].func,
+
+    /**
+     A callback function, can be executed when uploading is error.
+     `(error, response) => void`
+     */
+    onError: PropTypes__default["default"].func,
+
     /**
      A callback function, can be executed when preview icon in picture type is clicked.
      */
@@ -21852,10 +22030,25 @@
     showCropper: PropTypes__default["default"].bool,
 
     /**
-     The aspect ratio of the crop, e.g. 1 for a square or 16 / 9 for landscape. Omit/pass undefined for a free-form crop.
+     The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
      */
     ratio: PropTypes__default["default"].number,
 
+    /**
+     Can set error message to the upload.
+     */
+    errorMessage: PropTypes__default["default"].string,
+
+    /**
+     Progress of upload process.
+    */
+    progress: PropTypes__default["default"].number,
+
+    /**
+      Auto increment progress of upload process.
+     */
+    loading: PropTypes__default["default"].bool,
+
     /**
      API upload url, allows components to automatically upload directly to API service.
      */
@@ -26794,6 +26987,34 @@
     }, i.hex))));
   };
 
+  /**
+   * Checks if `value` is classified as an `Array` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+   * @example
+   *
+   * _.isArray([1, 2, 3]);
+   * // => true
+   *
+   * _.isArray(document.body.children);
+   * // => false
+   *
+   * _.isArray('abc');
+   * // => false
+   *
+   * _.isArray(_.noop);
+   * // => false
+   */
+
+  var isArray$3 = Array.isArray;
+
+  var isArray_1 = isArray$3;
+
   /** Detect free variable `global` from Node.js. */
 
   var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
@@ -26906,7 +27127,7 @@
    * @param {*} value The value to query.
    * @returns {string} Returns the `toStringTag`.
    */
-  function baseGetTag$1(value) {
+  function baseGetTag$2(value) {
     if (value == null) {
       return value === undefined ? undefinedTag : nullTag;
     }
@@ -26915,7 +27136,7 @@
       : objectToString(value);
   }
 
-  var _baseGetTag = baseGetTag$1;
+  var _baseGetTag = baseGetTag$2;
 
   /**
    * Checks if `value` is the
@@ -26950,7 +27171,7 @@
 
   var isObject_1 = isObject$2;
 
-  var baseGetTag = _baseGetTag,
+  var baseGetTag$1 = _baseGetTag,
       isObject$1 = isObject_1;
 
   /** `Object#toString` result references. */
@@ -26982,12 +27203,103 @@
     }
     // The use of `Object#toString` avoids issues with the `typeof` operator
     // in Safari 9 which returns 'object' for typed arrays and other constructors.
-    var tag = baseGetTag(value);
+    var tag = baseGetTag$1(value);
     return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
   }
 
   var isFunction_1 = isFunction$1;
 
+  /**
+   * Checks if `value` is object-like. A value is object-like if it's not `null`
+   * and has a `typeof` result of "object".
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+   * @example
+   *
+   * _.isObjectLike({});
+   * // => true
+   *
+   * _.isObjectLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isObjectLike(_.noop);
+   * // => false
+   *
+   * _.isObjectLike(null);
+   * // => false
+   */
+
+  function isObjectLike$1(value) {
+    return value != null && typeof value == 'object';
+  }
+
+  var isObjectLike_1 = isObjectLike$1;
+
+  var baseGetTag = _baseGetTag,
+      isObjectLike = isObjectLike_1;
+
+  /** `Object#toString` result references. */
+  var symbolTag = '[object Symbol]';
+
+  /**
+   * Checks if `value` is classified as a `Symbol` primitive or object.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+   * @example
+   *
+   * _.isSymbol(Symbol.iterator);
+   * // => true
+   *
+   * _.isSymbol('abc');
+   * // => false
+   */
+  function isSymbol$3(value) {
+    return typeof value == 'symbol' ||
+      (isObjectLike(value) && baseGetTag(value) == symbolTag);
+  }
+
+  var isSymbol_1 = isSymbol$3;
+
+  var isArray$2 = isArray_1,
+      isSymbol$2 = isSymbol_1;
+
+  /** Used to match property names within property paths. */
+  var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
+      reIsPlainProp = /^\w*$/;
+
+  /**
+   * Checks if `value` is a property name and not a property path.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @param {Object} [object] The object to query keys on.
+   * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
+   */
+  function isKey$1(value, object) {
+    if (isArray$2(value)) {
+      return false;
+    }
+    var type = typeof value;
+    if (type == 'number' || type == 'symbol' || type == 'boolean' ||
+        value == null || isSymbol$2(value)) {
+      return true;
+    }
+    return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||
+      (object != null && value in Object(object));
+  }
+
+  var _isKey = isKey$1;
+
   var root$1 = _root;
 
   /** Used to detect overreaching core-js shims. */
@@ -27779,7 +28091,7 @@
    * @param {string} string The string to convert.
    * @returns {Array} Returns the property path array.
    */
-  memoizeCapped(function(string) {
+  var stringToPath$1 = memoizeCapped(function(string) {
     var result = [];
     if (string.charCodeAt(0) === 46 /* . */) {
       result.push('');
@@ -27790,11 +28102,282 @@
     return result;
   });
 
-  var Symbol$1 = _Symbol;
+  var _stringToPath = stringToPath$1;
+
+  /**
+   * A specialized version of `_.map` for arrays without support for iteratee
+   * shorthands.
+   *
+   * @private
+   * @param {Array} [array] The array to iterate over.
+   * @param {Function} iteratee The function invoked per iteration.
+   * @returns {Array} Returns the new mapped array.
+   */
+
+  function arrayMap$1(array, iteratee) {
+    var index = -1,
+        length = array == null ? 0 : array.length,
+        result = Array(length);
+
+    while (++index < length) {
+      result[index] = iteratee(array[index], index, array);
+    }
+    return result;
+  }
+
+  var _arrayMap = arrayMap$1;
+
+  var Symbol$1 = _Symbol,
+      arrayMap = _arrayMap,
+      isArray$1 = isArray_1,
+      isSymbol$1 = isSymbol_1;
+
+  /** Used as references for various `Number` constants. */
+  var INFINITY$1 = 1 / 0;
 
   /** Used to convert symbols to primitives and strings. */
-  var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined;
-      symbolProto ? symbolProto.toString : undefined;
+  var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined,
+      symbolToString = symbolProto ? symbolProto.toString : undefined;
+
+  /**
+   * The base implementation of `_.toString` which doesn't convert nullish
+   * values to empty strings.
+   *
+   * @private
+   * @param {*} value The value to process.
+   * @returns {string} Returns the string.
+   */
+  function baseToString$1(value) {
+    // Exit early for strings to avoid a performance hit in some environments.
+    if (typeof value == 'string') {
+      return value;
+    }
+    if (isArray$1(value)) {
+      // Recursively convert values (susceptible to call stack limits).
+      return arrayMap(value, baseToString$1) + '';
+    }
+    if (isSymbol$1(value)) {
+      return symbolToString ? symbolToString.call(value) : '';
+    }
+    var result = (value + '');
+    return (result == '0' && (1 / value) == -INFINITY$1) ? '-0' : result;
+  }
+
+  var _baseToString = baseToString$1;
+
+  var baseToString = _baseToString;
+
+  /**
+   * Converts `value` to a string. An empty string is returned for `null`
+   * and `undefined` values. The sign of `-0` is preserved.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to convert.
+   * @returns {string} Returns the converted string.
+   * @example
+   *
+   * _.toString(null);
+   * // => ''
+   *
+   * _.toString(-0);
+   * // => '-0'
+   *
+   * _.toString([1, 2, 3]);
+   * // => '1,2,3'
+   */
+  function toString$1(value) {
+    return value == null ? '' : baseToString(value);
+  }
+
+  var toString_1 = toString$1;
+
+  var isArray = isArray_1,
+      isKey = _isKey,
+      stringToPath = _stringToPath,
+      toString = toString_1;
+
+  /**
+   * Casts `value` to a path array if it's not one.
+   *
+   * @private
+   * @param {*} value The value to inspect.
+   * @param {Object} [object] The object to query keys on.
+   * @returns {Array} Returns the cast property path array.
+   */
+  function castPath$1(value, object) {
+    if (isArray(value)) {
+      return value;
+    }
+    return isKey(value, object) ? [value] : stringToPath(toString(value));
+  }
+
+  var _castPath = castPath$1;
+
+  var isSymbol = isSymbol_1;
+
+  /** Used as references for various `Number` constants. */
+  var INFINITY = 1 / 0;
+
+  /**
+   * Converts `value` to a string key if it's not a string or symbol.
+   *
+   * @private
+   * @param {*} value The value to inspect.
+   * @returns {string|symbol} Returns the key.
+   */
+  function toKey$1(value) {
+    if (typeof value == 'string' || isSymbol(value)) {
+      return value;
+    }
+    var result = (value + '');
+    return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+  }
+
+  var _toKey = toKey$1;
+
+  var castPath = _castPath,
+      toKey = _toKey;
+
+  /**
+   * The base implementation of `_.get` without support for default values.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @param {Array|string} path The path of the property to get.
+   * @returns {*} Returns the resolved value.
+   */
+  function baseGet$1(object, path) {
+    path = castPath(path, object);
+
+    var index = 0,
+        length = path.length;
+
+    while (object != null && index < length) {
+      object = object[toKey(path[index++])];
+    }
+    return (index && index == length) ? object : undefined;
+  }
+
+  var _baseGet = baseGet$1;
+
+  var baseGet = _baseGet;
+
+  /**
+   * Gets the value at `path` of `object`. If the resolved value is
+   * `undefined`, the `defaultValue` is returned in its place.
+   *
+   * @static
+   * @memberOf _
+   * @since 3.7.0
+   * @category Object
+   * @param {Object} object The object to query.
+   * @param {Array|string} path The path of the property to get.
+   * @param {*} [defaultValue] The value returned for `undefined` resolved values.
+   * @returns {*} Returns the resolved value.
+   * @example
+   *
+   * var object = { 'a': [{ 'b': { 'c': 3 } }] };
+   *
+   * _.get(object, 'a[0].b.c');
+   * // => 3
+   *
+   * _.get(object, ['a', '0', 'b', 'c']);
+   * // => 3
+   *
+   * _.get(object, 'a.b.c', 'default');
+   * // => 'default'
+   */
+  function get(object, path, defaultValue) {
+    var result = object == null ? undefined : baseGet(object, path);
+    return result === undefined ? defaultValue : result;
+  }
+
+  var get_1 = get;
+
+  /**
+   * Checks if `value` is `null` or `undefined`.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
+   * @example
+   *
+   * _.isNil(null);
+   * // => true
+   *
+   * _.isNil(void 0);
+   * // => true
+   *
+   * _.isNil(NaN);
+   * // => false
+   */
+
+  function isNil(value) {
+    return value == null;
+  }
+
+  var isNil_1 = isNil;
+
+  function useListOption(list, nameKey, valueKey, disableList, separator) {
+    if (!list) return [];
+    return list.map(function (item, index) {
+      var name = [];
+
+      if (isArray_1(nameKey)) {
+        nameKey.forEach(function (key) {
+          name.push(get_1(item, key));
+        });
+      } else if (isNil_1(nameKey)) {
+        name.push(item);
+      } else {
+        name.push(get_1(item, nameKey));
+      }
+
+      var value;
+
+      if (isNil_1(valueKey)) {
+        value = item;
+      } else if (isArray_1(valueKey)) {
+        for (var i = 0; i < valueKey.length; i += 1) {
+          var val = get_1(item, valueKey[i]);
+
+          if (val !== undefined) {
+            value = val; // stop loop jika value ada
+
+            break;
+          }
+        }
+      } else {
+        value = get_1(item, valueKey);
+      }
+
+      var isDisabled = disableList ? disableList === null || disableList === void 0 ? void 0 : disableList.includes(value) : false;
+      var label = isFunction_1(separator) ? // @ts-ignore
+      separator(name.length <= 1 ? name[0] : name, item, index) : // @ts-ignore
+      name.join(separator || ' - ');
+      return {
+        name: label,
+        rec: item,
+        value: value,
+        key: value,
+        isDisabled: isDisabled
+      };
+    });
+  }
+
+  var toggleReducer = function toggleReducer(state, nextValue) {
+    return typeof nextValue === 'boolean' ? nextValue : !state;
+  };
+
+  var useToggle = function useToggle(initialValue) {
+    return React.useReducer(toggleReducer, initialValue);
+  };
 
   exports.ADVANCE_PICKER = ADVANCE_PICKER;
   exports.Accordion = Accordion;
@@ -27897,7 +28480,7 @@
   exports.InputRightAddon = InputRightAddon;
   exports.InputRightElement = InputRightElement;
   exports.InputSearchbox = InputSearchbox;
-  exports.InputSelect = Select$1;
+  exports.InputSelect = InputSelect;
   exports.InputSelectCheck = InputSelectCheck;
   exports.InputSelectTag = InputSelectTag;
   exports.InputSuffix = InputSuffix;
@@ -27945,7 +28528,6 @@
   exports.RowMenuColumn = rowMenuColumn;
   exports.RowSelectionColumn = rowSelectionColumn;
   exports.SINGLE_PICKER = SINGLE_PICKER;
-  exports.Select = Select$1;
   exports.SelectBox = SelectBox;
   exports.SelectContainer = SelectContainer;
   exports.SelectInputSearch = SelectInputSearch;
@@ -27995,6 +28577,8 @@
   exports.advancePickerOptions = advancePickerOptions;
   exports.defaultFetchDataParams = defaultFetchDataParams;
   exports.pickerReducer = pickerReducer;
+  exports.useListOption = useListOption;
+  exports.useToggle = useToggle;
 
   Object.defineProperty(exports, '__esModule', { value: true });