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

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, cloneElement, useCallback, useReducer } from 'react';
-import PropTypes, { string, func } from 'prop-types';
+import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, CheckFilled, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, RemoveOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -27,7 +27,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import moment from 'moment';
-import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useMountedLayoutEffect } from 'react-table';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
 import ReactDOM, { createPortal } from 'react-dom';
 import * as ADialog from '@radix-ui/react-alert-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -156,11 +156,11 @@ var functionUncurryThis = NATIVE_BIND$2 ? function (fn) {
 
 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;
@@ -285,7 +285,7 @@ var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
 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');
@@ -401,10 +401,10 @@ var uncurryThis$s = functionUncurryThis;
 
 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;
@@ -434,7 +434,7 @@ var wellKnownSymbol$l = function (name) {
 
 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;
@@ -445,13 +445,13 @@ var TO_PRIMITIVE = wellKnownSymbol$k('toPrimitive');
 // `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';
@@ -459,13 +459,13 @@ var toPrimitive$1 = function (input, pref) {
 };
 
 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;
@@ -662,16 +662,16 @@ var hiddenKeys$3 = hiddenKeys$4;
 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;
   };
@@ -688,7 +688,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
     wmset(store, it, metadata);
     return metadata;
   };
-  get = function (it) {
+  get$1 = function (it) {
     return wmget(store, it) || {};
   };
   has = function (it) {
@@ -703,7 +703,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
     createNonEnumerableProperty$5(it, STATE, metadata);
     return metadata;
   };
-  get = function (it) {
+  get$1 = function (it) {
     return hasOwn$b(it, STATE) ? it[STATE] : {};
   };
   has = function (it) {
@@ -713,7 +713,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
 
 var internalState = {
   set: set$1,
-  get: get,
+  get: get$1,
   has: has,
   enforce: enforce,
   getterFor: getterFor
@@ -1954,7 +1954,7 @@ var classof$6 = classof$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);
 };
@@ -1966,7 +1966,7 @@ var uncurryThis$l = functionUncurryThis;
 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;
 
@@ -1980,7 +1980,7 @@ if (DESCRIPTORS$4 && isCallable$9(NativeSymbol) && (!('description' in SymbolPro
   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)'
@@ -1994,7 +1994,7 @@ if (DESCRIPTORS$4 && isCallable$9(NativeSymbol) && (!('description' in SymbolPro
   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);
@@ -2004,7 +2004,7 @@ if (DESCRIPTORS$4 && isCallable$9(NativeSymbol) && (!('description' in SymbolPro
     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;
@@ -2080,7 +2080,7 @@ var $$f = _export;
 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);
@@ -2090,8 +2090,8 @@ var stringIndexOf$2 = uncurryThis$k(''.indexOf);
 $$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
     );
   }
@@ -2229,7 +2229,7 @@ Flex$1.defaultProps = {
 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',
@@ -2459,7 +2459,7 @@ const GridItem = _ref2 => {
   let {
     children
   } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
   return /*#__PURE__*/React__default.createElement(GridItemComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -4611,8 +4611,30 @@ Avatar.defaultProps = {
   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',
@@ -4633,41 +4655,118 @@ function Image(_ref) {
     width,
     height,
     objectFit,
-    fallback
+    fallback,
+    fallbackTitle,
+    css,
+    cssFallback,
+    rounded
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
-  return /*#__PURE__*/React__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.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.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.createElement(TextFallback, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$Q,
+        lineNumber: 74,
+        columnNumber: 9
+      }
+    }, fallbackTitle));
+  }
 }
 Image.propTypes = {
+  /**
+   Additional className for img element.
+   */
   className: PropTypes.string,
+
+  /**
+   Which is used to specify the source of an image.
+   */
   src: PropTypes.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.string,
+
+  /**
+   Additional css for img element.
+   */
+  css: PropTypes.object,
+
+  /**
+   Additional css for default fallback element.
+   */
+  cssFallback: PropTypes.object,
+
+  /**
+   Custom width of img element.
+   */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   Custom height of img element.
+   */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   Set image to circle.
+   */
   rounded: PropTypes.bool,
+
+  /**
+   Used to specify how an <img> should be resized to fit its container.
+   */
   objectFit: PropTypes.string,
-  fallback: PropTypes.string
+
+  /**
+   Custom fallback if image url doesn't exist.
+   */
+  fallback: PropTypes.string,
+
+  /**
+   Custom fallback title for default fallback.
+   */
+  fallbackTitle: PropTypes.string
 };
 Image.defaultProps = {
-  rounded: false
+  rounded: false,
+  fallbackTitle: 'Tidak ada foto'
 };
 
 const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
@@ -5821,7 +5920,7 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.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',
@@ -5893,7 +5992,7 @@ const StyledInput = styled('input', {
     isDisabled: {
       true: disabledStyle
     },
-    readOnly: {
+    isReadOnly: {
       true: {
         backgroundColor: '$formDisable'
       }
@@ -5961,14 +6060,17 @@ const StyledInput = styled('input', {
 });
 const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
-    disabled
+    disabled,
+    readOnly
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
     ref: ref,
     disabled: disabled,
-    isDisabled: disabled
+    isDisabled: disabled,
+    readOnly: readOnly,
+    isReadOnly: readOnly
   }, props, {
     __self: undefined,
     __source: {
@@ -5980,7 +6082,9 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 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: {
@@ -5995,6 +6099,28 @@ const InputTextArea = styled(StyledInput, {
     size: 'lg'
   }
 });
+const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    readOnly
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+
+  return /*#__PURE__*/React__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'
@@ -6002,21 +6128,21 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__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.Root, Flex$1);
 function InputRadioGroup(props) {
   return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$D,
       lineNumber: 13,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(RadioGroup, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$D,
       lineNumber: 14,
       columnNumber: 9
     }
@@ -6034,8 +6160,8 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -6151,7 +6277,7 @@ const InputRadio = _ref => {
     inputType,
     inputProps
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
   function renderInputType(type, checked) {
     switch (type) {
@@ -6160,7 +6286,7 @@ const InputRadio = _ref => {
           disabled: disabled || checked !== props.value,
           __self: this,
           __source: {
-            fileName: _jsxFileName$D,
+            fileName: _jsxFileName$C,
             lineNumber: 124,
             columnNumber: 16
           }
@@ -6171,7 +6297,7 @@ const InputRadio = _ref => {
           disabled: disabled || checked !== props.value,
           __self: this,
           __source: {
-            fileName: _jsxFileName$D,
+            fileName: _jsxFileName$C,
             lineNumber: 127,
             columnNumber: 16
           }
@@ -6191,7 +6317,7 @@ const InputRadio = _ref => {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$D,
+            fileName: _jsxFileName$C,
             lineNumber: 131,
             columnNumber: 11
           }
@@ -6202,7 +6328,7 @@ const InputRadio = _ref => {
   return /*#__PURE__*/React__default.createElement(InputRadioContext.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$C,
       lineNumber: 150,
       columnNumber: 5
     }
@@ -6221,7 +6347,7 @@ const InputRadio = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$C,
         lineNumber: 155,
         columnNumber: 11
       }
@@ -6231,14 +6357,14 @@ const InputRadio = _ref => {
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$C,
         lineNumber: 163,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$C,
         lineNumber: 164,
         columnNumber: 15
       }
@@ -6572,7 +6698,7 @@ var createNonEnumerableProperty$1 = createNonEnumerableProperty$6;
 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;
@@ -6700,8 +6826,8 @@ if (isForced$1('RegExp', BASE_FORCED)) {
       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) {
@@ -6758,7 +6884,7 @@ setSpecies$1('RegExp');
 /* 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;
@@ -6794,7 +6920,7 @@ if (PATCH) {
   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;
 
@@ -6883,7 +7009,7 @@ $$e({ target: 'RegExp', proto: true, forced: /./.exec !== exec$5 }, {
 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;
 
@@ -6906,8 +7032,8 @@ if (NOT_GENERIC || INCORRECT_NAME) {
   }, { 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',
@@ -7011,7 +7137,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onRemove,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   return /*#__PURE__*/React__default.createElement(TagWrapper$3, _extends({
     ref: ref,
@@ -7024,21 +7150,21 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$B,
       lineNumber: 84,
       columnNumber: 7
     }
   }), icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$B,
       lineNumber: 94,
       columnNumber: 31
     }
   }, icon) : null, /*#__PURE__*/React__default.createElement(TagComponent$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$B,
       lineNumber: 95,
       columnNumber: 9
     }
@@ -7048,7 +7174,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     readOnly: readOnly,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$B,
       lineNumber: 97,
       columnNumber: 11
     }
@@ -7060,7 +7186,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$B,
       lineNumber: 98,
       columnNumber: 13
     }
@@ -7083,8 +7209,8 @@ Tag.defaultProps = {
   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',
@@ -7202,7 +7328,7 @@ function TagsInput(_ref) {
     maxChar,
     pattern
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   const [tags, setTags] = React__default.useState(value);
   const [regexError, setRegexError] = React__default.useState(false);
@@ -7253,7 +7379,7 @@ function TagsInput(_ref) {
   return /*#__PURE__*/React__default.createElement(Wrapper$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 163,
       columnNumber: 5
     }
@@ -7266,7 +7392,7 @@ function TagsInput(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 164,
       columnNumber: 7
     }
@@ -7281,7 +7407,7 @@ function TagsInput(_ref) {
     ,
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 172,
       columnNumber: 9
     }
@@ -7289,7 +7415,7 @@ function TagsInput(_ref) {
     color: "red",
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 186,
       columnNumber: 11
     }
@@ -7297,14 +7423,14 @@ function TagsInput(_ref) {
     color: "red",
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 188,
       columnNumber: 11
     }
   }, "Invalid Input")), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 191,
       columnNumber: 7
     }
@@ -7317,7 +7443,7 @@ function TagsInput(_ref) {
     onRemove: () => removeTags(index, 'removeTag'),
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$A,
       lineNumber: 193,
       columnNumber: 11
     }
@@ -7347,8 +7473,8 @@ TagsInput.defaultProps = {
   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.Thumb, {
   display: 'block',
   width: '16px',
@@ -7420,7 +7546,7 @@ const InputSwitch = _ref => {
     dataOffLabel,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
     defaultChecked: defaultChecked,
@@ -7431,14 +7557,14 @@ const InputSwitch = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$z,
       lineNumber: 66,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledThumb$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$z,
       lineNumber: 74,
       columnNumber: 5
     }
@@ -7456,7 +7582,7 @@ InputSwitch.propTypes = {
 };
 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.createElement("svg", _extends({
   width: props.size,
@@ -7466,7 +7592,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$z,
+    fileName: _jsxFileName$y,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -7475,7 +7601,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: "white",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$z,
+    fileName: _jsxFileName$y,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -7485,7 +7611,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   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
   }
@@ -7496,7 +7622,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$z,
+    fileName: _jsxFileName$y,
     lineNumber: 12,
     columnNumber: 5
   }
@@ -7506,7 +7632,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   mask: "url(#path-1-inside-1_2883_7918)",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$z,
+    fileName: _jsxFileName$y,
     lineNumber: 18,
     columnNumber: 5
   }
@@ -7517,7 +7643,7 @@ SvgCloseFilled.defaultProps = {
   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.createElement("svg", _extends({
   width: props.size,
@@ -7527,7 +7653,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$y,
+    fileName: _jsxFileName$x,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -7539,7 +7665,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   strokeWidth: 2,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$y,
+    fileName: _jsxFileName$x,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -7548,7 +7674,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$y,
+    fileName: _jsxFileName$x,
     lineNumber: 6,
     columnNumber: 5
   }
@@ -7559,8 +7685,8 @@ SvgSearchOutline.defaultProps = {
   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 {
@@ -7569,7 +7695,7 @@ const InputSearchbox = _ref => {
     css,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   const [value, setValue] = React__default.useState('');
   const handleChange = React__default.useCallback(e => {
@@ -7595,7 +7721,7 @@ const InputSearchbox = _ref => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 30,
       columnNumber: 5
     }
@@ -7603,14 +7729,14 @@ const InputSearchbox = _ref => {
     children: /*#__PURE__*/React__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
     }
@@ -7624,7 +7750,7 @@ const InputSearchbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 32,
       columnNumber: 7
     }
@@ -7632,14 +7758,14 @@ const InputSearchbox = _ref => {
     children: value.length > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 41,
         columnNumber: 55
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$w,
         lineNumber: 41,
         columnNumber: 73
       }
@@ -7647,7 +7773,7 @@ const InputSearchbox = _ref => {
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$w,
       lineNumber: 41,
       columnNumber: 7
     }
@@ -7776,7 +7902,7 @@ var fixRegExpWellKnownSymbolLogic$2 = fixRegexpWellKnownSymbolLogic;
 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;
 
@@ -7788,13 +7914,13 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
     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;
@@ -7808,9 +7934,12 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-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 ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
+
 const SelectContainer = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -7868,7 +7997,6 @@ const SelectBox = styled(Flex$1, {
       true: {
         backgroundColor: '$formDisable',
         color: '$textPrimary',
-        cursor: 'not-allowed',
         '&:hover': {
           border: '1px solid $gray300'
         },
@@ -7917,7 +8045,6 @@ const Button$1 = styled('button', {
     },
     readOnly: {
       true: {
-        cursor: 'not-allowed',
         color: '$textPrimary'
       }
     }
@@ -7942,9 +8069,8 @@ const Input$5 = styled('input', {
     opacity: 1
   },
   variants: {
-    readOnly: {
+    isReadOnly: {
       true: {
-        cursor: 'not-allowed',
         color: '$textPrimary'
       }
     }
@@ -7962,11 +8088,6 @@ const IconContainer = styled('div', {
       true: {
         cursor: 'not-allowed'
       }
-    },
-    readOnly: {
-      true: {
-        cursor: 'not-allowed'
-      }
     }
   }
 });
@@ -8026,20 +8147,22 @@ const StyledText$1 = {
   overflow: 'hidden',
   textOverflow: 'ellipsis'
 };
-const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
-  let {
+const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
     showLeadingIcon = true,
+    showClearIcon = true,
     disabled,
     placeholder,
     readOnly,
     inputProps,
     handleInputValue,
-    noStyling
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    noStyling,
+    onChange
+  } = _a,
+      props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
 
   const inputRef = React.useRef(null);
-  return /*#__PURE__*/React.createElement(InputGroup, {
+  return jsxs(InputGroup, Object.assign({
     css: !noStyling && {
       height: '100%',
       border: 'none',
@@ -8047,122 +8170,94 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
         border: 'none'
       }
     },
-    disabled: disabled,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 236,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/React.createElement(InputLeftElement, {
-    children: showLeadingIcon && /*#__PURE__*/React.createElement(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.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.createElement(InputRightElement, {
-    children: (inputProps.value || '').length > 0 && !disabled ? /*#__PURE__*/React.createElement(CloseFilled, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 273,
-        columnNumber: 72
-      }
-    }) : /*#__PURE__*/React.createElement("div", {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 273,
-        columnNumber: 90
+    disabled: disabled
+  }, {
+    children: [jsx(InputLeftElement, {
+      children: showLeadingIcon && jsx(SearchOutline, {}, void 0),
+      css: !showLeadingIcon ? {
+        width: '$spacing-05',
+        padding: 0
+      } : undefined
+    }, void 0), jsx(Input$5, Object.assign({}, inputProps, props, {
+      placeholder: placeholder,
+      readOnly: readOnly,
+      isReadOnly: readOnly,
+      ref: node => {
+        if (forwardedRef) {
+          if (typeof forwardedRef === 'function') forwardedRef(node);else forwardedRef.current = node;
+        }
+
+        inputRef.current = node;
+      },
+      disabled: disabled,
+      css: {
+        marginLeft: 0,
+        height: 'fit-content'
       }
-    }),
-    onClick: e => {
-      if (!disabled) {
-        inputProps.onChange(Object.assign({}, e, {
-          target: Object.assign({}, e.target, {
-            value: ''
-          })
-        }));
-        if (handleInputValue) handleInputValue('');
-        if (inputRef.current) inputRef.current.focus();
+    }), void 0), jsx(InputRightElement, {
+      children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsx(CloseFilled, {}, void 0) : jsx("div", {}, void 0),
+      onClick: e => {
+        if (!disabled) {
+          inputProps.onChange(Object.assign(Object.assign({}, e), {
+            target: Object.assign(Object.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,
+function InputSelect(_a) {
+  var {
     option,
     onChange,
-    size,
-    disabled,
-    search,
     value,
-    iconColor,
-    icon,
-    placement,
-    valueSelector,
-    textSelector,
+    placeholder = 'Select Item',
+    searchPlaceholder = 'Cari..',
+    embedSearch = false,
+    size = 'lg',
+    disabled = false,
+    search = false,
+    iconColor = 'currentColor',
+    hideArrowicon = false,
+    showLeadingIcon,
+    placement = 'bottom',
     disabledOptions,
-    css,
+    textSelector = 'name',
+    valueSelector = 'value',
+    readOnly = false,
+    isInvalid = false,
+    noOptionIcon = false,
+    fetchData,
     onSearch,
-    readOnly,
-    isInvalid,
-    noOptionIcon
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    isLoading = false,
+    css
+  } = _a,
+      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"]);
 
-  const [options, setOptions] = React.useState(option || []);
-  const [item, setItem] = React.useState(option || []);
-  const [selectedValue, setSelectedValue] = React.useState(value);
+  const [options, setOptions] = useState([]);
+  const [item, setItem] = useState([]);
+  const [selectedValue, setSelectedValue] = useState(value);
+  const [query, setQuery] = useState();
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    var _a;
+
+    (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+      top: 0
+    });
+  }, [query]);
 
-  const handleInputValue = (value, isReset) => {
+  const handleInputValue = (value, isReset = false) => {
     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(item => item.name.toLowerCase().includes(value.toLocaleLowerCase())));
     }
   };
 
@@ -8175,7 +8270,7 @@ function Select$1(_ref2) {
           name,
           value,
           render: option.render,
-          isDisabled: disabledOptions.length > 0 ? disabledOptions.includes(value) : option.isDisabled
+          isDisabled: option.isDisabled === undefined && disabledOptions && disabledOptions.length > 0 ? disabledOptions.includes(value) : option.isDisabled
         };
       }
 
@@ -8183,313 +8278,227 @@ function Select$1(_ref2) {
         name: option,
         value: option,
         render: option.render,
-        isDisabled: disabledOptions.includes(option)
+        isDisabled: disabledOptions && disabledOptions.includes(option)
       };
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     setSelectedValue(value);
   }, [value]);
-  React.useEffect(() => {
-    // if (valueSelector) {
+  useEffect(() => {
     const generatedOption = generateOptions(option, valueSelector, textSelector);
     setItem(generatedOption);
-    setOptions(generatedOption); // }
-  }, [option, valueSelector, textSelector]);
-  return /*#__PURE__*/React.createElement(Downshift, _extends({}, props, {
+    setOptions(generatedOption);
+  }, [option, disabledOptions, valueSelector, textSelector]);
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(this, void 0, void 0, function* () {
+    setQuery(query);
+    if (onSearch) onSearch(query);
+  }), 1000)).current;
+  React.useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  return jsx(Downshift, Object.assign({}, props, {
     onChange: onChange,
     itemToString: item => 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: (selectedItem, _) => setSelectedValue(selectedItem),
+    onStateChange: state => {
+      if (!('isOpen' in state)) return;
+      if (state.isOpen && embedSearch) handleInputValue('', true);
 
-    const handleDownOption = () => {
-      if (icon || noOptionIcon) {
-        return null;
-      }
-
-      return /*#__PURE__*/React.createElement(IconContainer, _extends({}, getToggleButtonProps({
-        disabled: disabled || readOnly
-      }), {
-        disabled: disabled,
-        readOnly: readOnly,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 393,
-          columnNumber: 13
-        }
-      }), /*#__PURE__*/React.createElement(CaretDownOutline, {
-        color: iconColor,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$w,
-          lineNumber: 398,
-          columnNumber: 15
-        }
-      }));
-    };
-
-    return /*#__PURE__*/React.createElement(SelectContainer, {
-      css: css,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 404,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/React.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.createElement(Box, {
-      style: {
-        width: '100%',
-        flex: 1
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 413,
-        columnNumber: 17
-      }
-    }, icon ? /*#__PURE__*/React.createElement(SelectInputSearch, {
-      disabled: disabled,
-      placeholder: placeholder,
-      readOnly: readOnly,
-      handleInputValue: handleInputValue,
-      inputProps: getInputProps({
-        onChange: event => handleInputValue(event.target.value),
-        disabled
-      }, {
-        suppressRefError: true
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 418,
-        columnNumber: 21
-      }
-    }) : /*#__PURE__*/React.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.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.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.createElement(Text$1, {
-      color: "disable",
-      css: StyledText$1,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 452,
-        columnNumber: 21
-      }
-    }, placeholder)), handleDownOption()), /*#__PURE__*/React.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.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.createElement(InputSearchbox, {
-      size: size,
-      onChange: handleInputValue,
-      placeholder: searchPlaceholder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 471,
-        columnNumber: 19
-      }
-    })), item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 475,
-        columnNumber: 17
-      }
-    }, item.map((item, index) => {
-      var _item$value;
-
-      return /*#__PURE__*/React.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.createElement(SelectOption, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 499,
-        columnNumber: 17
-      }
-    }, /*#__PURE__*/React.createElement(StyledDiv$2, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 500,
-        columnNumber: 19
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginRight: '6px'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 501,
-        columnNumber: 21
-      }
-    }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
-      size: "16px",
-      color: colors.iconDisable,
-      style: {
-        verticalAlign: 'text-bottom'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 502,
-        columnNumber: 23
+      if (!state.isOpen && fetchData && query && query.length > 0 && onSearch) {
+        onSearch('');
+        setQuery('');
       }
-    })), "Item tidak ditemukan"))));
-  });
+    }
+  }, {
+    children: ({
+      getRootProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getInputProps,
+      getItemProps,
+      isOpen,
+      selectedItem,
+      highlightedIndex
+    }) => {
+      const handleDownOption = () => {
+        if (hideArrowicon || noOptionIcon) {
+          return null;
+        }
+
+        return jsx(IconContainer, Object.assign({}, getToggleButtonProps({
+          disabled: disabled || readOnly
+        }), {
+          disabled: disabled,
+          readOnly: readOnly
+        }, {
+          children: jsx(CaretDownOutline, {
+            color: iconColor
+          }, void 0)
+        }), void 0);
+      };
+
+      return jsxs(SelectContainer, Object.assign({
+        css: css
+      }, {
+        children: [jsxs(SelectBox, Object.assign({}, getRootProps({
+          refKey: 'ref'
+        }, {
+          suppressRefError: true
+        }), {
+          size: size,
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid
+        }, {
+          children: [search ? jsx(Box, Object.assign({
+            style: {
+              width: '100%',
+              flex: 1
+            }
+          }, {
+            children: jsx(SelectInputSearch, {
+              showLeadingIcon: showLeadingIcon,
+              showClearIcon: hideArrowicon,
+              disabled: disabled,
+              placeholder: placeholder,
+              readOnly: readOnly,
+              handleInputValue: !fetchData ? handleInputValue : query => {
+                if (onSearch) onSearch(query);
+                setQuery(query);
+              },
+              inputProps: getInputProps({
+                onChange: event => {
+                  if (event.type !== 'change') return;
+                  const query = event.target.value;
+                  if (!fetchData) handleInputValue(query);else debouncedSearch(query);
+                },
+                disabled
+              }),
+              onClick: getToggleButtonProps().onClick
+            }, void 0)
+          }), void 0) : jsx(Button$1, Object.assign({}, getToggleButtonProps({
+            disabled: disabled || readOnly
+          }), {
+            disabled: disabled,
+            size: size,
+            readOnly: readOnly
+          }, {
+            children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsx(Text$1, Object.assign({
+              color: "primary",
+              css: StyledText$1
+            }, {
+              children: selectedItem.name
+            }), void 0) : jsx(Text$1, Object.assign({
+              color: "disable",
+              css: StyledText$1
+            }, {
+              children: placeholder
+            }), void 0)
+          }), void 0), handleDownOption()]
+        }), void 0), jsxs(OptionWrapper$2, Object.assign({}, getMenuProps({}, {
+          suppressRefError: true
+        }), {
+          css: {
+            display: isOpen ? 'block' : 'none'
+          },
+          placement: placement,
+          ref: scrollerRef
+        }, {
+          children: [!search && embedSearch && isOpen && jsx(SelectContainer, Object.assign({
+            css: {
+              position: 'sticky',
+              top: 0,
+              zIndex: '$sticky',
+              padding: '$spacing-04 $spacing-05 0',
+              backgroundColor: '$bgWhite'
+            }
+          }, {
+            children: jsx(InputSearchbox, {
+              size: 'sm',
+              onChange: handleInputValue,
+              placeholder: searchPlaceholder
+            }, void 0)
+          }), void 0), isLoading && jsx(Flex$1, Object.assign({
+            justify: "center",
+            align: "center",
+            css: {
+              position: 'absolute',
+              inset: 0,
+              zIndex: '$sticky',
+              width: '100%',
+              height: '100%',
+              backgroundColor: '$bgWhite',
+              opacity: 0.8
+            }
+          }, {
+            children: jsx(Text$1, Object.assign({
+              variant: "caption"
+            }, {
+              children: "Loading .... "
+            }), void 0)
+          }), void 0), item.length > 0 ? jsx(ConditionalWrapper, Object.assign({
+            condition: !!fetchData && item.length > 0,
+            wrapper: children => jsx(InfiniteScroll, Object.assign({
+              loadMore: _ => {
+                if (!isLoading && fetchData) fetchData({
+                  query
+                });
+              },
+              hasMore: true,
+              threshold: 5,
+              useWindow: false
+            }, {
+              children: children
+            }), void 0)
+          }, {
+            children: jsx(SelectOption, {
+              children: item.map((item, index) => {
+                var _a;
+
+                return /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
+                  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) : jsx(SelectOption, {
+            children: jsxs(StyledDiv$2, {
+              children: [jsx("div", Object.assign({
+                style: {
+                  marginRight: '6px'
+                }
+              }, {
+                children: jsx(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.string,
-  searchPlaceholder: PropTypes.string,
-  embedSearch: PropTypes.bool,
-  option: PropTypes.array.isRequired,
-  onChange: PropTypes.func,
-  size: PropTypes.string,
-  disabled: PropTypes.bool,
-  search: PropTypes.bool,
-  value: PropTypes.object,
-  iconColor: PropTypes.string,
-  icon: PropTypes.bool,
-  placement: PropTypes.oneOf(['top', 'bottom']),
-  textSelector: PropTypes.string,
-  valueSelector: PropTypes.string,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  onSearch: PropTypes.func,
-  readOnly: PropTypes.bool,
-  isInvalid: PropTypes.bool,
-  noOptionIcon: PropTypes.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;
 
@@ -8603,7 +8612,7 @@ var aCallable$7 = aCallable$9;
 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;
@@ -8669,7 +8678,7 @@ var getSortCompare = function (comparefn) {
     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;
   };
 };
 
@@ -8775,7 +8784,7 @@ var $$b = _export;
 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;
@@ -8796,10 +8805,10 @@ var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
 // 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;
@@ -9818,12 +9827,6 @@ InputCreatable.defaultProps = {
   value: ''
 };
 
-const ConditionalWrapper = ({
-  condition,
-  wrapper,
-  children
-}) => condition ? wrapper(children) : children;
-
 function InputResourceList({
   data,
   disabled = false,
@@ -9839,7 +9842,6 @@ function InputResourceList({
   css
 }) {
   const [checkedResources, setCheckedResources] = useState([]);
-  useState(value);
   const [query, setQuery] = useState();
   const scrollerRef = useRef(null);
   useEffect(() => {
@@ -10986,7 +10988,7 @@ var whitespaces$3 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u200
 
 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);
@@ -10997,7 +10999,7 @@ var rtrim = RegExp(whitespace + whitespace + '*$');
 // `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
 var createMethod$1 = function (TYPE) {
   return function ($this) {
-    var string = toString$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;
@@ -11019,7 +11021,7 @@ var stringTrim = {
 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;
 
@@ -11035,7 +11037,7 @@ var FORCED$2 = $parseInt$1(whitespaces$1 + '08') !== 8 || $parseInt$1(whitespace
 // `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;
 
@@ -14349,9 +14351,6 @@ const Time = styled('p', {
   variants: {
     size: {
       sm: {
-        fontSize: 24
-      },
-      md: {
         fontSize: 28
       },
       lg: {
@@ -14369,10 +14368,6 @@ const Container$4 = styled(Flex$1, {
   variants: {
     size: {
       sm: {
-        width: 180,
-        height: 115
-      },
-      md: {
         width: 200,
         height: 130
       },
@@ -14439,7 +14434,7 @@ const IconStateFull$1 = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 107,
+      lineNumber: 100,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(IconDown, _extends({}, props, {
@@ -14449,7 +14444,7 @@ const IconStateFull$1 = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 114,
+      lineNumber: 107,
       columnNumber: 5
     }
   }));
@@ -14497,7 +14492,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 149,
+      lineNumber: 142,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14506,7 +14501,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 150,
+      lineNumber: 143,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14516,7 +14511,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 151,
+      lineNumber: 144,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14526,7 +14521,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 152,
+      lineNumber: 145,
       columnNumber: 9
     }
   })), /*#__PURE__*/React__default.createElement(Input$2, {
@@ -14537,7 +14532,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 154,
+      lineNumber: 147,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -14545,7 +14540,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 155,
+      lineNumber: 148,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14554,7 +14549,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 156,
+      lineNumber: 149,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14564,7 +14559,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 157,
+      lineNumber: 150,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -14574,7 +14569,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 158,
+      lineNumber: 151,
       columnNumber: 9
     }
   })));
@@ -14583,7 +14578,7 @@ NativeTimePicker.propTypes = {
   /**
    Resize time picker.
   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'lg']),
 
   /**
    Change handler.
@@ -14619,7 +14614,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 185,
+      lineNumber: 178,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(NativeTimePicker, {
@@ -14631,7 +14626,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 186,
+      lineNumber: 179,
       columnNumber: 7
     }
   }));
@@ -14646,7 +14641,7 @@ TimePicker.propTypes = {
   /**
    Resize time picker.
   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'lg']),
 
   /**
    Change handler.
@@ -14662,9 +14657,13 @@ TimePicker.propTypes = {
    Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
+
+  /**
+   Disabled state.
+  */
   disabled: PropTypes.bool
 };
-NativeTimePicker.displayName = 'TimePicker';
+NativeTimePicker.displayName = 'NativeTimePicker';
 
 var _jsxFileName$j = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\InputTimePicker.js";
 
@@ -14693,7 +14692,7 @@ function InputTimePicker({
   }
 
   const renderInputGroup = () => /*#__PURE__*/React__default.createElement(InputGroup, {
-    size: "sm",
+    size: size,
     disabled: disabled,
     onClick: handleChange,
     __self: this,
@@ -14837,12 +14836,16 @@ InputTimePicker.propTypes = {
    Additional styles.
   */
   css: PropTypes.object,
+
+  /**
+   Disabled state.
+  */
   disabled: PropTypes.bool,
 
   /**
    Resize time picker.
   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'lg']),
 
   /**
    Custom placeholder input time picker.
@@ -15831,6 +15834,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   infiniteScrollWrapper,
   isLoading,
   rowGroup,
+  hiddenColumns,
   css
 }, ref) => {
   const {
@@ -15853,10 +15857,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
     children: infiniteScrollWrapper(jsxs(TableContent$2, Object.assign({}, getTableProps(), {
       children: [jsx(TableHead$2, {
         children: headerGroups.map(headerGroup => jsx(TableHeadRow$3, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-          children: headerGroup.headers.map(column => {
+          children: headerGroup.headers.filter(column => column.isMobileHeader || column.id === 'selection').map(column => {
             const headerRender = column.render('Header');
-            return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps( // column.getSortByToggleProps && !column.unsortable
-            !column.unsortable ? column.getSortByToggleProps({
+            return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
               title: 'Urutkan'
             }) : {}), {
               children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
@@ -15890,7 +15893,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 children: row.cells[0].render('Cell')
               }), void 0)
             }), void 0)), jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
-              children: row.cells.map(cell => {
+              children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
                 return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
                     justify: "between",
@@ -15917,7 +15920,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 children: [jsx(Flex$1, Object.assign({
                   direction: "column"
                 }, {
-                  children: row.allCells.filter(cell => !cell.column.isMobileHeader && cell.column.accessor).map(cell => {
+                  children: row.cells.filter(cell => !cell.column.isMobileHeader && cell.column.accessor).map(cell => {
                     var _a;
 
                     return jsxs(Flex$1, Object.assign({
@@ -15925,7 +15928,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       justify: "between",
                       css: {
                         backgroundColor: colors.bgGray,
-                        padding: '$spacing-03 $spacing-05',
+                        padding: `$spacing-03 $spacing-05 ${'selection' in row.values ? '$spacing-03 $spacing-07' : ''}`,
                         borderBottom: '1pt solid $bgBorder'
                       }
                     }, {
@@ -16217,7 +16220,9 @@ function Table({
   rowLimit = 10,
   cellAlign = 'center',
   selectedIds,
-  rowGroup
+  rowGroup,
+  hiddenColumns,
+  columnOrder
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -16252,7 +16257,7 @@ function Table({
     autoResetPage: false,
     autoResetSelectedRows: false,
     getRowId: row => row[keyId] || JSON.stringify(row)
-  }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky);
+  }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
   const {
     getTableProps,
     getTableBodyProps,
@@ -16269,7 +16274,9 @@ function Table({
       pageSize,
       sortBy,
       selectedRowIds
-    }
+    },
+    setHiddenColumns,
+    setColumnOrder
   } = instance;
 
   const doFetchData = (pageIndex, pageSize, sortAccessor = sortBy.length > 0 ? sortBy[0].id : undefined, sortDirection = sortBy.length > 0 ? sortBy[0].desc ? 'DESC' : 'ASC' : undefined) => {
@@ -16326,25 +16333,15 @@ function Table({
     children: children
   }), void 0);
 
+  useEffect(() => {
+    if (hiddenColumns) setHiddenColumns(hiddenColumns);
+  }, [hiddenColumns]);
+  useEffect(() => {
+    if (columnOrder) setColumnOrder(columnOrder);
+  }, [columnOrder]);
   useEffect(() => {
     setPageSize(rowLimit);
   }, [rowLimit]);
-  useEffect(() => {
-    if (isMobile) {
-      allColumns.map(column => {
-        if (!column.isMobileHeader && column.id !== 'selection') {
-          column.toggleHidden(true);
-        }
-
-        return column;
-      });
-    } else {
-      allColumns.map(column => {
-        column.toggleHidden(false);
-        return column;
-      });
-    }
-  }, [allColumns, isMobile]);
   useEffect(() => {
     gotoPage(controlledPageIndex);
   }, [controlledPageIndex]);
@@ -16478,14 +16475,17 @@ function Table({
                     children: row.cells[0].render('Cell')
                   }), void 0)
                 }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
-                  children: row.cells.filter(cell => !cell.column.isSubRow).map((cell, index) => jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                    css: Object.assign({
-                      padding: cell.column.accessor ? '20px 8px' : '20px 20px',
-                      verticalAlign: cell.column.accessor ? cellAlign : 'center'
-                    }, stickyPositionStyling(cell.column))
-                  }, {
-                    children: cell.render('Cell')
-                  }), void 0))
+                  children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+                    console.log(cell);
+                    return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                      css: Object.assign({
+                        padding: cell.column.accessor ? '20px 8px' : '20px 20px',
+                        verticalAlign: cell.column.accessor ? cellAlign : 'center'
+                      }, stickyPositionStyling(cell.column))
+                    }, {
+                      children: cell.render('Cell')
+                    }), void 0);
+                  })
                 }), void 0), row.isExpanded ? subRowCells.map(cell => jsxs(TableRow$2, Object.assign({
                   subRow: true
                 }, {
@@ -16554,6 +16554,7 @@ function Table({
       infiniteScrollWrapper: renderInfiniteScrollWrapper,
       isLoading: isLoading,
       rowGroup: rowGroup,
+      hiddenColumns: hiddenColumns,
       css: css
     }, void 0)]
   }), void 0);
@@ -16601,7 +16602,7 @@ var uncurryThis$9 = functionUncurryThis;
 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;
@@ -16609,7 +16610,7 @@ var $RangeError$2 = RangeError;
 // `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');
@@ -16751,7 +16752,7 @@ $$3({ target: 'Number', proto: true, forced: FORCED$1 }, {
 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;
 
@@ -16766,7 +16767,7 @@ var FORCED = 1 / n$ParseFloat(whitespaces + '-0') !== -Infinity
 // `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;
@@ -16782,7 +16783,7 @@ $$2({ global: true, forced: parseFloat != $parseFloat }, {
 
 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);
@@ -16791,7 +16792,7 @@ var stringSlice$5 = uncurryThis$6(''.slice);
 
 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;
@@ -16835,7 +16836,7 @@ var requireObjectCoercible$1 = requireObjectCoercible$a;
 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;
@@ -16877,7 +16878,7 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
   ) {
     // 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];
@@ -16925,7 +16926,7 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
       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
@@ -16934,7 +16935,7 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
     // 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;
@@ -17035,7 +17036,7 @@ var anObject$2 = anObject$i;
 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;
@@ -17093,13 +17094,13 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
       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' &&
@@ -17111,7 +17112,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
       }
 
       var functionalReplace = isCallable$1(replaceValue);
-      if (!functionalReplace) replaceValue = toString$1(replaceValue);
+      if (!functionalReplace) replaceValue = toString$3(replaceValue);
 
       var global = rx.global;
       if (global) {
@@ -17126,7 +17127,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
         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);
       }
 
@@ -17135,7 +17136,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
       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
@@ -17148,7 +17149,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
         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);
         }
@@ -17497,6 +17498,9 @@ const rowMenuColumn = (options, icon, config) => ({
     }, /*#__PURE__*/React__default.createElement(Box, {
       type: "button",
       role: "button",
+      css: {
+        cursor: 'pointer'
+      },
       onClick: () => {
         setOpenModal(false);
         option.onClick(props);
@@ -17513,7 +17517,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 95,
+        lineNumber: 98,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -17521,7 +17525,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 99,
+        lineNumber: 102,
         columnNumber: 19
       }
     })))))));
@@ -17870,7 +17874,7 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 74,
+      lineNumber: 75,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
@@ -17880,14 +17884,14 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 75,
+      lineNumber: 76,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 76,
+      lineNumber: 77,
       columnNumber: 7
     }
   }), children));
@@ -17901,14 +17905,14 @@ function AlertDialogFunction(properties) {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 85,
+        lineNumber: 86,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 86,
+        lineNumber: 87,
         columnNumber: 9
       }
     }))), document.getElementById('a-dialog'));
@@ -17952,7 +17956,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 127,
+      lineNumber: 128,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -17963,14 +17967,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 128,
+      lineNumber: 129,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 129,
+      lineNumber: 130,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -17978,7 +17982,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 130,
+      lineNumber: 131,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -17986,7 +17990,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 131,
+      lineNumber: 132,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -17997,7 +18001,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 132,
+      lineNumber: 133,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18005,7 +18009,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 133,
+      lineNumber: 134,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18013,14 +18017,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 137,
+      lineNumber: 138,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 138,
+      lineNumber: 139,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18030,7 +18034,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 139,
+      lineNumber: 140,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18042,7 +18046,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 141,
+      lineNumber: 142,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18050,7 +18054,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 142,
+      lineNumber: 143,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18064,7 +18068,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 143,
+      lineNumber: 144,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18072,28 +18076,30 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 145,
+      lineNumber: 146,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+  }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 152,
+      lineNumber: 159,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
     size: "sm",
     onClick: buttonCancel,
     css: {
@@ -18101,34 +18107,38 @@ const TemplateAlertFunction = props => {
       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.createElement(ADialog.Action, {
+  }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
     asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 162,
+      lineNumber: 171,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__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) {
@@ -18150,7 +18160,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 192,
+      lineNumber: 203,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18161,14 +18171,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 193,
+      lineNumber: 204,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 194,
+      lineNumber: 205,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18176,7 +18186,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 195,
+      lineNumber: 206,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -18184,7 +18194,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 196,
+      lineNumber: 207,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18195,7 +18205,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 197,
+      lineNumber: 208,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18203,7 +18213,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 198,
+      lineNumber: 209,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18211,14 +18221,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 202,
+      lineNumber: 213,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 203,
+      lineNumber: 214,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18228,7 +18238,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 204,
+      lineNumber: 215,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18240,7 +18250,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 206,
+      lineNumber: 217,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18248,7 +18258,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 207,
+      lineNumber: 218,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18262,7 +18272,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 208,
+      lineNumber: 219,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18270,31 +18280,33 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 210,
+      lineNumber: 221,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+  }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 222,
+      lineNumber: 235,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
     size: "sm",
     onClick: props.onCancel,
     css: {
@@ -18302,58 +18314,70 @@ function AlertDialog(props) {
       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.createElement(ADialog.Action, {
+  }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 232,
+      lineNumber: 247,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__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: string.isRequired,
-  description: string.isRequired,
-  dialogType: string,
-  onCancel: func,
-  onConfirm: func
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  dialogType: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  disabledButton: PropTypes.bool,
+  actionButtonProps: PropTypes.object,
+  cancelButtonProps: PropTypes.object
 };
 TemplateAlertFunction.defaultProps = {
   dialogType: 'primary',
   onCancel: () => {},
-  onConfirm: () => {}
+  onConfirm: () => {},
+  disabledButton: false
 };
 AlertDialog.propTypes = {
-  title: string.isRequired,
-  description: string.isRequired,
-  dialogType: string,
-  onCancel: func,
-  onConfirm: func
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  dialogType: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  disabledButton: PropTypes.bool,
+  actionButtonProps: PropTypes.object,
+  cancelButtonProps: PropTypes.object
 };
 AlertDialog.defaultProps = {
   dialogType: 'primary',
   onCancel: () => {},
-  onConfirm: () => {}
+  onConfirm: () => {},
+  disabledButton: false
 };
 const AlertDialogRoot = ADialog.Root;
 const AlertDialogTrigger = ADialog.Trigger;
@@ -18613,7 +18637,7 @@ DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
 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;
 
@@ -18626,7 +18650,7 @@ var getInternalState = InternalStateModule$2.getterFor(STRING_ITERATOR);
 defineIterator(String, 'String', function (iterated) {
   setInternalState$2(this, {
     type: STRING_ITERATOR,
-    string: toString(iterated),
+    string: toString$2(iterated),
     index: 0
   });
 // `%StringIteratorPrototype%.next` method
@@ -18952,7 +18976,7 @@ var bind$1 = functionBindContext;
 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;
@@ -19341,7 +19365,7 @@ var arrayFrom = arrayFrom$1;
 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;
@@ -20420,18 +20444,27 @@ function upload({
   token,
   progress,
   reqKey,
-  resKey
+  resKey,
+  onError,
+  onSuccess,
+  onProgress
 }) {
   const promise = new Promise((resolve, reject) => {
     const formdata = new FormData();
     formdata.append(reqKey, file);
-    request.post(url).set(tokenKey, token).send(formdata).on('progress', e => progress && progress(Math.round(e.percent))).end((err, res) => {
+    request.post(url).set(tokenKey, token).send(formdata).on('progress', e => {
+      onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
+      progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
+    }).end((err, res) => {
       if (err) {
+        const 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)) {
         const response = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
         resolve(response[resKey]);
       }
     });
@@ -20463,13 +20496,19 @@ const Text = styled('p', {
     }
   }
 });
+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', {
@@ -20504,16 +20543,9 @@ const EyeIcon = styled(EyeOutline, {
   cursor: 'pointer',
   background: 'rgba(39, 42, 42, 0.6)',
   borderRadius: 50,
-  width: 40,
-  height: 40,
-  padding: '$spacing-03'
-});
-const CheckIcon = styled(CheckFilled, {
-  background: '$white',
-  borderRadius: 50,
-  width: 40,
-  height: 40,
-  padding: '$spacing-03'
+  width: 32,
+  height: 32,
+  padding: '$spacing-02'
 });
 
 const IconStateFull = props => {
@@ -20528,7 +20560,7 @@ const IconStateFull = props => {
   }
 
   return props.type === 'close' ? /*#__PURE__*/React__default.createElement(CloseIcon, _extends({}, props, {
-    color: isHover ? '#E13743' : '#A5ABAB',
+    color: isHover ? '#E13743' : '#DF2A36',
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave,
     __self: undefined,
@@ -20555,6 +20587,9 @@ const Upload = ({
   multiple,
   fileList,
   onChange,
+  onError,
+  onSuccess,
+  onProgress,
   onPreview,
   onRemove,
   children,
@@ -20573,7 +20608,9 @@ const Upload = ({
   tokenKey,
   reqKey,
   resKey,
-  ratio
+  ratio,
+  disabled,
+  errorMessage
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -20583,7 +20620,7 @@ const Upload = ({
   const [dragActive, setDragActive] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
   const [fileState, setFileState] = useState({});
-  const [errorMessage, setErrorMessage] = useState(null);
+  const [error, setError] = useState(null);
   const [crop, setCrop] = useState(null);
   const [completedCrop, setCompletedCrop] = useState(null);
   const [aspect, setAspect] = useState(ratio);
@@ -20597,7 +20634,15 @@ const Upload = ({
       setIsLoading(false);
     }
   }, [loading, progress]);
-  useEffect(() => {}, [ratio]);
+  useEffect(() => {
+    if (errorMessage && typeof errorMessage === 'string') {
+      setError(errorMessage);
+    }
+
+    return () => {
+      setError(null);
+    };
+  }, [errorMessage]);
   const ContainerUpload = styled('div', {
     border: '2px dashed $gray300',
     borderRadius: 8,
@@ -20633,6 +20678,17 @@ const Upload = ({
           height: height + 16,
           width: width + 16
         }
+      },
+      disabled: {
+        true: {
+          border: 'none',
+          background: '$formDisable',
+          cursor: 'not-allowed',
+          '&:hover': {
+            border: 'none',
+            background: '$formDisable'
+          }
+        }
       }
     }
   });
@@ -20676,11 +20732,13 @@ const Upload = ({
     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() {
@@ -20707,6 +20765,9 @@ const Upload = ({
           tokenKey,
           reqKey,
           resKey,
+          onError,
+          onSuccess,
+          onProgress,
           progress: percent => {
             var _onChange, _onChange$then;
 
@@ -20727,7 +20788,7 @@ const Upload = ({
               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;
@@ -20749,14 +20810,14 @@ const Upload = ({
             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++) {
@@ -20770,7 +20831,7 @@ const Upload = ({
             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;
@@ -20780,7 +20841,7 @@ const Upload = ({
           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) {
@@ -20874,6 +20935,33 @@ const Upload = ({
     }
   }
 
+  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.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();
@@ -20918,7 +21006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 484,
+        lineNumber: 537,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -20928,7 +21016,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 485,
+        lineNumber: 538,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -20944,7 +21032,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 495,
+            lineNumber: 548,
             columnNumber: 16
           }
         });
@@ -20956,7 +21044,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 498,
+          lineNumber: 551,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -20966,7 +21054,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 499,
+          lineNumber: 552,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20975,7 +21063,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 500,
+          lineNumber: 553,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -20988,7 +21076,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 501,
+          lineNumber: 554,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20997,7 +21085,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 509,
+          lineNumber: 562,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -21005,7 +21093,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 511,
+          lineNumber: 564,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21014,6 +21102,8 @@ const Upload = ({
 
   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.createElement(UploadProgress, {
           key: index,
@@ -21022,7 +21112,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 522,
+            lineNumber: 575,
             columnNumber: 16
           }
         });
@@ -21033,7 +21123,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 525,
+          lineNumber: 578,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21043,7 +21133,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 526,
+          lineNumber: 579,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21052,7 +21142,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 527,
+          lineNumber: 580,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21065,7 +21155,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 528,
+          lineNumber: 581,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21075,37 +21165,58 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 536,
+          lineNumber: 589,
           columnNumber: 15
         }
-      }, /*#__PURE__*/React__default.createElement(CheckIcon, {
-        color: "#04C99E",
+      }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 537,
+          lineNumber: 590,
           columnNumber: 17
         }
-      }), /*#__PURE__*/React__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.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.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.createElement(Blank, {
+      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+        type: "eye",
+        onClick: () => handleOpenFile(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 552,
+          lineNumber: 613,
+          columnNumber: 15
+        }
+      })), /*#__PURE__*/React__default.createElement(Blank, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 615,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21121,7 +21232,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 563,
+        lineNumber: 626,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21135,7 +21246,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 564,
+        lineNumber: 627,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21161,7 +21272,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 565,
+        lineNumber: 628,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21169,14 +21280,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 578,
+        lineNumber: 641,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 579,
+        lineNumber: 642,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21189,12 +21300,13 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 587,
+        lineNumber: 650,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__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,
@@ -21204,7 +21316,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 588,
+        lineNumber: 651,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$1, {
@@ -21216,55 +21328,56 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 598,
+        lineNumber: 662,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 599,
+        lineNumber: 663,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 601,
+        lineNumber: 665,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 602,
+        lineNumber: 666,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
+      color: disabled ? '#C0C4C4' : '#404545',
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 603,
+        lineNumber: 667,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__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.createElement(ErrorMessage, {
+    }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 612,
-        columnNumber: 26
+        lineNumber: 676,
+        columnNumber: 19
       }
-    }, errorMessage));
+    }, error));
   }
 
   function renderCropper() {
@@ -21272,7 +21385,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 619,
+        lineNumber: 683,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21280,7 +21393,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 620,
+        lineNumber: 684,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21288,7 +21401,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 621,
+        lineNumber: 685,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21301,7 +21414,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 623,
+        lineNumber: 687,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21312,7 +21425,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 626,
+        lineNumber: 690,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21323,7 +21436,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 627,
+        lineNumber: 691,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21336,14 +21449,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 628,
+        lineNumber: 692,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 631,
+        lineNumber: 695,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21355,7 +21468,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 632,
+        lineNumber: 696,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21363,7 +21476,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 633,
+        lineNumber: 697,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21375,7 +21488,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 634,
+        lineNumber: 698,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21383,7 +21496,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 640,
+        lineNumber: 704,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21392,7 +21505,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 641,
+        lineNumber: 705,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21400,7 +21513,7 @@ const Upload = ({
       __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'}`)))));
@@ -21416,7 +21529,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 655,
+      lineNumber: 719,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21425,7 +21538,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 658,
+      lineNumber: 722,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21434,25 +21547,21 @@ const Upload = ({
 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.number,
-
-  /**
-   Auto increment progress of upload process
+   Disabled state of upload.
   */
-  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
 
   /**
    Built-in stylesheets, support for two types.
@@ -21474,6 +21583,24 @@ Upload.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   A callback function, can be executed when uploading in progress.
+   `(progress) => void`
+   */
+  onProgress: PropTypes.func,
+
+  /**
+   A callback function, can be executed when uploading is success.
+   `(response) => void`
+   */
+  onSuccess: PropTypes.func,
+
+  /**
+   A callback function, can be executed when uploading is error.
+   `(error, response) => void`
+   */
+  onError: PropTypes.func,
+
   /**
    A callback function, can be executed when preview icon in picture type is clicked.
    */
@@ -21530,10 +21657,25 @@ Upload.propTypes = {
   showCropper: PropTypes.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.number,
 
+  /**
+   Can set error message to the upload.
+   */
+  errorMessage: PropTypes.string,
+
+  /**
+   Progress of upload process.
+  */
+  progress: PropTypes.number,
+
+  /**
+    Auto increment progress of upload process.
+   */
+  loading: PropTypes.bool,
+
   /**
    API upload url, allows components to automatically upload directly to API service.
    */
@@ -26449,6 +26591,34 @@ const Colors = props => {
   }, 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;
@@ -26561,7 +26731,7 @@ var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
  * @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;
   }
@@ -26570,7 +26740,7 @@ function baseGetTag$1(value) {
     : objectToString(value);
 }
 
-var _baseGetTag = baseGetTag$1;
+var _baseGetTag = baseGetTag$2;
 
 /**
  * Checks if `value` is the
@@ -26605,7 +26775,7 @@ function isObject$2(value) {
 
 var isObject_1 = isObject$2;
 
-var baseGetTag = _baseGetTag,
+var baseGetTag$1 = _baseGetTag,
     isObject$1 = isObject_1;
 
 /** `Object#toString` result references. */
@@ -26637,12 +26807,103 @@ function isFunction$1(value) {
   }
   // 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. */
@@ -27434,7 +27695,7 @@ var reEscapeChar = /\\(\\)?/g;
  * @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('');
@@ -27445,10 +27706,279 @@ memoizeCapped(function(string) {
   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((item, index) => {
+    const name = [];
+
+    if (isArray_1(nameKey)) {
+      nameKey.forEach(key => {
+        name.push(get_1(item, key));
+      });
+    } else if (isNil_1(nameKey)) {
+      name.push(item);
+    } else {
+      name.push(get_1(item, nameKey));
+    }
+
+    let value;
+
+    if (isNil_1(valueKey)) {
+      value = item;
+    } else if (isArray_1(valueKey)) {
+      for (let i = 0; i < valueKey.length; i += 1) {
+        const val = get_1(item, valueKey[i]);
+
+        if (val !== undefined) {
+          value = val; // stop loop jika value ada
+
+          break;
+        }
+      }
+    } else {
+      value = get_1(item, valueKey);
+    }
+
+    const isDisabled = disableList ? disableList === null || disableList === void 0 ? void 0 : disableList.includes(value) : false;
+    const 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,
+      key: value,
+      isDisabled
+    };
+  });
+}
+
+const toggleReducer = (state, nextValue) => typeof nextValue === 'boolean' ? nextValue : !state;
+
+const useToggle = initialValue => {
+  return useReducer(toggleReducer, initialValue);
+};
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Select$1 as Select, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };