@majoo-ui/react 1.38.2-alpha → 1.39.1-alpha

package/index.esm.js

@@ -24,7 +24,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 'react-dom';
+import ReactDOM from 'react-dom';
 import { useTable, useSortBy, useExpanded, usePagination, useRowSelect } from 'react-table';
 import debounce from 'lodash.debounce';
 import * as ADialog from '@radix-ui/react-alert-dialog';
@@ -59,7 +59,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$I =
+var global$J =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -71,7 +71,7 @@ var global$I =
 
 var objectGetOwnPropertyDescriptor = {};
 
-var fails$n = function (exec) {
+var fails$m = function (exec) {
   try {
     return !!exec();
   } catch (error) {
@@ -79,17 +79,17 @@ var fails$n = function (exec) {
   }
 };
 
-var fails$m = fails$n;
+var fails$l = fails$m;
 
 // Detect IE8's incomplete defineProperty implementation
-var descriptors = !fails$m(function () {
+var descriptors = !fails$l(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
-var fails$l = fails$n;
+var fails$k = fails$m;
 
-var functionBindNative = !fails$l(function () {
+var functionBindNative = !fails$k(function () {
   var test = (function () { /* empty */ }).bind();
   // eslint-disable-next-line no-prototype-builtins -- safe
   return typeof test != 'function' || test.hasOwnProperty('prototype');
@@ -152,16 +152,16 @@ var classofRaw$1 = function (it) {
   return stringSlice$a(toString$f(it), 8, -1);
 };
 
-var global$H = global$I;
+var global$I = global$J;
 var uncurryThis$t = functionUncurryThis;
-var fails$k = fails$n;
+var fails$j = fails$m;
 var classof$7 = classofRaw$1;
 
-var Object$5 = global$H.Object;
+var Object$5 = global$I.Object;
 var split$3 = uncurryThis$t(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
-var indexedObject = fails$k(function () {
+var indexedObject = fails$j(function () {
   // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
   // eslint-disable-next-line no-prototype-builtins -- safe
   return !Object$5('z').propertyIsEnumerable(0);
@@ -169,9 +169,9 @@ var indexedObject = fails$k(function () {
   return classof$7(it) == 'String' ? split$3(it, '') : Object$5(it);
 } : Object$5;
 
-var global$G = global$I;
+var global$H = global$J;
 
-var TypeError$g = global$G.TypeError;
+var TypeError$g = global$H.TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
@@ -200,7 +200,7 @@ var isObject$7 = function (it) {
   return typeof it == 'object' ? it !== null : isCallable$i(it);
 };
 
-var global$F = global$I;
+var global$G = global$J;
 var isCallable$h = isCallable$j;
 
 var aFunction = function (argument) {
@@ -208,7 +208,7 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$6 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$F[namespace]) : global$F[namespace] && global$F[namespace][method];
+  return arguments.length < 2 ? aFunction(global$G[namespace]) : global$G[namespace] && global$G[namespace][method];
 };
 
 var uncurryThis$s = functionUncurryThis;
@@ -219,11 +219,11 @@ var getBuiltIn$5 = getBuiltIn$6;
 
 var engineUserAgent = getBuiltIn$5('navigator', 'userAgent') || '';
 
-var global$E = global$I;
-var userAgent$2 = engineUserAgent;
+var global$F = global$J;
+var userAgent = engineUserAgent;
 
-var process = global$E.process;
-var Deno = global$E.Deno;
+var process = global$F.process;
+var Deno = global$F.Deno;
 var versions = process && process.versions || Deno && Deno.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -237,10 +237,10 @@ if (v8) {
 
 // BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
 // so check `userAgent` even if `.v8` exists, but 0
-if (!version && userAgent$2) {
-  match = userAgent$2.match(/Edge\/(\d+)/);
+if (!version && userAgent) {
+  match = userAgent.match(/Edge\/(\d+)/);
   if (!match || match[1] >= 74) {
-    match = userAgent$2.match(/Chrome\/(\d+)/);
+    match = userAgent.match(/Chrome\/(\d+)/);
     if (match) version = +match[1];
   }
 }
@@ -250,10 +250,10 @@ var engineV8Version = version;
 /* eslint-disable es/no-symbol -- required for testing */
 
 var V8_VERSION = engineV8Version;
-var fails$j = fails$n;
+var fails$i = fails$m;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
-var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$j(function () {
+var nativeSymbol = !!Object.getOwnPropertySymbols && !fails$i(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
@@ -270,13 +270,13 @@ var useSymbolAsUid = NATIVE_SYMBOL$2
   && !Symbol.sham
   && typeof Symbol.iterator == 'symbol';
 
-var global$D = global$I;
+var global$E = global$J;
 var getBuiltIn$4 = getBuiltIn$6;
 var isCallable$g = isCallable$j;
 var isPrototypeOf$3 = objectIsPrototypeOf;
 var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
-var Object$4 = global$D.Object;
+var Object$4 = global$E.Object;
 
 var isSymbol$2 = USE_SYMBOL_AS_UID$1 ? function (it) {
   return typeof it == 'symbol';
@@ -285,9 +285,9 @@ var isSymbol$2 = USE_SYMBOL_AS_UID$1 ? function (it) {
   return isCallable$g($Symbol) && isPrototypeOf$3($Symbol.prototype, Object$4(it));
 };
 
-var global$C = global$I;
+var global$D = global$J;
 
-var String$5 = global$C.String;
+var String$5 = global$D.String;
 
 var tryToString$3 = function (argument) {
   try {
@@ -297,33 +297,33 @@ var tryToString$3 = function (argument) {
   }
 };
 
-var global$B = global$I;
+var global$C = global$J;
 var isCallable$f = isCallable$j;
 var tryToString$2 = tryToString$3;
 
-var TypeError$f = global$B.TypeError;
+var TypeError$f = global$C.TypeError;
 
 // `Assert: IsCallable(argument) is true`
-var aCallable$4 = function (argument) {
+var aCallable$3 = function (argument) {
   if (isCallable$f(argument)) return argument;
   throw TypeError$f(tryToString$2(argument) + ' is not a function');
 };
 
-var aCallable$3 = aCallable$4;
+var aCallable$2 = aCallable$3;
 
 // `GetMethod` abstract operation
 // https://tc39.es/ecma262/#sec-getmethod
 var getMethod$6 = function (V, P) {
   var func = V[P];
-  return func == null ? undefined : aCallable$3(func);
+  return func == null ? undefined : aCallable$2(func);
 };
 
-var global$A = global$I;
+var global$B = global$J;
 var call$e = functionCall;
 var isCallable$e = isCallable$j;
 var isObject$6 = isObject$7;
 
-var TypeError$e = global$A.TypeError;
+var TypeError$e = global$B.TypeError;
 
 // `OrdinaryToPrimitive` abstract operation
 // https://tc39.es/ecma262/#sec-ordinarytoprimitive
@@ -339,24 +339,24 @@ var shared$4 = {exports: {}};
 
 var isPure = false;
 
-var global$z = global$I;
+var global$A = global$J;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$4 = Object.defineProperty;
 
 var setGlobal$3 = function (key, value) {
   try {
-    defineProperty$4(global$z, key, { value: value, configurable: true, writable: true });
+    defineProperty$4(global$A, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$z[key] = value;
+    global$A[key] = value;
   } return value;
 };
 
-var global$y = global$I;
+var global$z = global$J;
 var setGlobal$2 = setGlobal$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = global$y[SHARED] || setGlobal$2(SHARED, {});
+var store$3 = global$z[SHARED] || setGlobal$2(SHARED, {});
 
 var sharedStore = store$3;
 
@@ -372,26 +372,26 @@ var store$2 = sharedStore;
   source: 'https://github.com/zloirock/core-js'
 });
 
-var global$x = global$I;
+var global$y = global$J;
 var requireObjectCoercible$8 = requireObjectCoercible$a;
 
-var Object$3 = global$x.Object;
+var Object$3 = global$y.Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
-var toObject$6 = function (argument) {
+var toObject$5 = function (argument) {
   return Object$3(requireObjectCoercible$8(argument));
 };
 
 var uncurryThis$r = functionUncurryThis;
-var toObject$5 = toObject$6;
+var toObject$4 = toObject$5;
 
 var hasOwnProperty = uncurryThis$r({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
-  return hasOwnProperty(toObject$5(it), key);
+  return hasOwnProperty(toObject$4(it), key);
 };
 
 var uncurryThis$q = functionUncurryThis;
@@ -404,7 +404,7 @@ var uid$2 = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$e(++id + postfix, 36);
 };
 
-var global$w = global$I;
+var global$x = global$J;
 var shared$3 = shared$4.exports;
 var hasOwn$b = hasOwnProperty_1;
 var uid$1 = uid$2;
@@ -412,15 +412,15 @@ var NATIVE_SYMBOL$1 = nativeSymbol;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
 var WellKnownSymbolsStore = shared$3('wks');
-var Symbol$2 = global$w.Symbol;
-var symbolFor = Symbol$2 && Symbol$2['for'];
-var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$2 : Symbol$2 && Symbol$2.withoutSetter || uid$1;
+var Symbol$3 = global$x.Symbol;
+var symbolFor = Symbol$3 && Symbol$3['for'];
+var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$3 : Symbol$3 && Symbol$3.withoutSetter || uid$1;
 
 var wellKnownSymbol$h = function (name) {
   if (!hasOwn$b(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL$1 || typeof WellKnownSymbolsStore[name] == 'string')) {
     var description = 'Symbol.' + name;
-    if (NATIVE_SYMBOL$1 && hasOwn$b(Symbol$2, name)) {
-      WellKnownSymbolsStore[name] = Symbol$2[name];
+    if (NATIVE_SYMBOL$1 && hasOwn$b(Symbol$3, name)) {
+      WellKnownSymbolsStore[name] = Symbol$3[name];
     } else if (USE_SYMBOL_AS_UID && symbolFor) {
       WellKnownSymbolsStore[name] = symbolFor(description);
     } else {
@@ -429,7 +429,7 @@ var wellKnownSymbol$h = function (name) {
   } return WellKnownSymbolsStore[name];
 };
 
-var global$v = global$I;
+var global$w = global$J;
 var call$d = functionCall;
 var isObject$5 = isObject$7;
 var isSymbol$1 = isSymbol$2;
@@ -437,7 +437,7 @@ var getMethod$5 = getMethod$6;
 var ordinaryToPrimitive = ordinaryToPrimitive$1;
 var wellKnownSymbol$g = wellKnownSymbol$h;
 
-var TypeError$d = global$v.TypeError;
+var TypeError$d = global$w.TypeError;
 var TO_PRIMITIVE = wellKnownSymbol$g('toPrimitive');
 
 // `ToPrimitive` abstract operation
@@ -466,10 +466,10 @@ var toPropertyKey$3 = function (argument) {
   return isSymbol(key) ? key : key + '';
 };
 
-var global$u = global$I;
+var global$v = global$J;
 var isObject$4 = isObject$7;
 
-var document$1 = global$u.document;
+var document$1 = global$v.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$4(document$1) && isObject$4(document$1.createElement);
 
@@ -478,11 +478,11 @@ var documentCreateElement$2 = function (it) {
 };
 
 var DESCRIPTORS$a = descriptors;
-var fails$i = fails$n;
+var fails$h = fails$m;
 var createElement = documentCreateElement$2;
 
 // Thanks to IE8 for its funny defineProperty
-var ie8DomDefine = !DESCRIPTORS$a && !fails$i(function () {
+var ie8DomDefine = !DESCRIPTORS$a && !fails$h(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
@@ -515,11 +515,11 @@ objectGetOwnPropertyDescriptor.f = DESCRIPTORS$9 ? $getOwnPropertyDescriptor$1 :
 var objectDefineProperty = {};
 
 var DESCRIPTORS$8 = descriptors;
-var fails$h = fails$n;
+var fails$g = fails$m;
 
 // V8 ~ Chrome 36-
 // https://bugs.chromium.org/p/v8/issues/detail?id=3334
-var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$h(function () {
+var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$g(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
@@ -527,11 +527,11 @@ var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$h(function () {
   }).prototype != 42;
 });
 
-var global$t = global$I;
+var global$u = global$J;
 var isObject$3 = isObject$7;
 
-var String$4 = global$t.String;
-var TypeError$c = global$t.TypeError;
+var String$4 = global$u.String;
+var TypeError$c = global$u.TypeError;
 
 // `Assert: Type(argument) is Object`
 var anObject$g = function (argument) {
@@ -539,14 +539,14 @@ var anObject$g = function (argument) {
   throw TypeError$c(String$4(argument) + ' is not an object');
 };
 
-var global$s = global$I;
+var global$t = global$J;
 var DESCRIPTORS$7 = descriptors;
 var IE8_DOM_DEFINE = ie8DomDefine;
 var V8_PROTOTYPE_DEFINE_BUG$1 = v8PrototypeDefineBug;
 var anObject$f = anObject$g;
 var toPropertyKey$1 = toPropertyKey$3;
 
-var TypeError$b = global$s.TypeError;
+var TypeError$b = global$t.TypeError;
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var $defineProperty = Object.defineProperty;
 // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
@@ -612,11 +612,11 @@ if (!isCallable$d(store$1.inspectSource)) {
 
 var inspectSource$3 = store$1.inspectSource;
 
-var global$r = global$I;
+var global$s = global$J;
 var isCallable$c = isCallable$j;
 var inspectSource$2 = inspectSource$3;
 
-var WeakMap$1 = global$r.WeakMap;
+var WeakMap$1 = global$s.WeakMap;
 
 var nativeWeakMap = isCallable$c(WeakMap$1) && /native code/.test(inspectSource$2(WeakMap$1));
 
@@ -632,7 +632,7 @@ var sharedKey$3 = function (key) {
 var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = nativeWeakMap;
-var global$q = global$I;
+var global$r = global$J;
 var uncurryThis$o = functionUncurryThis;
 var isObject$2 = isObject$7;
 var createNonEnumerableProperty$5 = createNonEnumerableProperty$6;
@@ -642,8 +642,8 @@ var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$a = global$q.TypeError;
-var WeakMap = global$q.WeakMap;
+var TypeError$a = global$r.TypeError;
+var WeakMap = global$r.WeakMap;
 var set, get, has;
 
 var enforce = function (it) {
@@ -719,7 +719,7 @@ var functionName = {
   CONFIGURABLE: CONFIGURABLE
 };
 
-var global$p = global$I;
+var global$q = global$J;
 var isCallable$b = isCallable$j;
 var hasOwn$7 = hasOwnProperty_1;
 var createNonEnumerableProperty$4 = createNonEnumerableProperty$6;
@@ -750,7 +750,7 @@ var TEMPLATE = String(String).split('String');
       state.source = TEMPLATE.join(typeof name == 'string' ? name : '');
     }
   }
-  if (O === global$p) {
+  if (O === global$q) {
     if (simple) O[key] = value;
     else setGlobal$1(key, value);
     return;
@@ -806,19 +806,19 @@ var toLength$3 = toLength$4;
 
 // `LengthOfArrayLike` abstract operation
 // https://tc39.es/ecma262/#sec-lengthofarraylike
-var lengthOfArrayLike$4 = function (obj) {
+var lengthOfArrayLike$3 = function (obj) {
   return toLength$3(obj.length);
 };
 
 var toIndexedObject$3 = toIndexedObject$5;
 var toAbsoluteIndex$1 = toAbsoluteIndex$2;
-var lengthOfArrayLike$3 = lengthOfArrayLike$4;
+var lengthOfArrayLike$2 = lengthOfArrayLike$3;
 
 // `Array.prototype.{ indexOf, includes }` methods implementation
 var createMethod$2 = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIndexedObject$3($this);
-    var length = lengthOfArrayLike$3(O);
+    var length = lengthOfArrayLike$2(O);
     var index = toAbsoluteIndex$1(fromIndex, length);
     var value;
     // Array#includes uses SameValueZero equality algorithm
@@ -849,17 +849,17 @@ var toIndexedObject$2 = toIndexedObject$5;
 var indexOf$1 = arrayIncludes.indexOf;
 var hiddenKeys$2 = hiddenKeys$4;
 
-var push$6 = uncurryThis$n([].push);
+var push$5 = uncurryThis$n([].push);
 
 var objectKeysInternal = function (object, names) {
   var O = toIndexedObject$2(object);
   var i = 0;
   var result = [];
   var key;
-  for (key in O) !hasOwn$6(hiddenKeys$2, key) && hasOwn$6(O, key) && push$6(result, key);
+  for (key in O) !hasOwn$6(hiddenKeys$2, key) && hasOwn$6(O, key) && push$5(result, key);
   // Don't enum bug & hidden keys
   while (names.length > i) if (hasOwn$6(O, key = names[i++])) {
-    ~indexOf$1(result, key) || push$6(result, key);
+    ~indexOf$1(result, key) || push$5(result, key);
   }
   return result;
 };
@@ -924,7 +924,7 @@ var copyConstructorProperties$2 = function (target, source, exceptions) {
   }
 };
 
-var fails$g = fails$n;
+var fails$f = fails$m;
 var isCallable$a = isCallable$j;
 
 var replacement = /#|\.prototype\./;
@@ -933,7 +933,7 @@ var isForced$1 = function (feature, detection) {
   var value = data[normalize$1(feature)];
   return value == POLYFILL ? true
     : value == NATIVE ? false
-    : isCallable$a(detection) ? fails$g(detection)
+    : isCallable$a(detection) ? fails$f(detection)
     : !!detection;
 };
 
@@ -947,7 +947,7 @@ var POLYFILL = isForced$1.POLYFILL = 'P';
 
 var isForced_1 = isForced$1;
 
-var global$o = global$I;
+var global$p = global$J;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$6;
 var redefine$7 = redefine$8.exports;
@@ -976,11 +976,11 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$o;
+    target = global$p;
   } else if (STATIC) {
-    target = global$o[TARGET] || setGlobal(TARGET, {});
+    target = global$p[TARGET] || setGlobal(TARGET, {});
   } else {
-    target = (global$o[TARGET] || {}).prototype;
+    target = (global$p[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -1016,11 +1016,11 @@ var objectKeys$2 = Object.keys || function keys(O) {
 var DESCRIPTORS$4 = descriptors;
 var uncurryThis$l = functionUncurryThis;
 var call$b = functionCall;
-var fails$f = fails$n;
+var fails$e = fails$m;
 var objectKeys$1 = objectKeys$2;
 var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
 var propertyIsEnumerableModule = objectPropertyIsEnumerable;
-var toObject$4 = toObject$6;
+var toObject$3 = toObject$5;
 var IndexedObject = indexedObject;
 
 // eslint-disable-next-line es/no-object-assign -- safe
@@ -1031,7 +1031,7 @@ var concat$1 = uncurryThis$l([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$f(function () {
+var objectAssign = !$assign || fails$e(function () {
   // should have correct order of operations (Edge bug)
   if (DESCRIPTORS$4 && $assign({ b: 1 }, $assign(defineProperty$3({}, 'a', {
     enumerable: true,
@@ -1052,7 +1052,7 @@ var objectAssign = !$assign || fails$f(function () {
   alphabet.split('').forEach(function (chr) { B[chr] = chr; });
   return $assign({}, A)[symbol] != 7 || objectKeys$1($assign({}, B)).join('') != alphabet;
 }) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
-  var T = toObject$4(target);
+  var T = toObject$3(target);
   var argumentsLength = arguments.length;
   var index = 1;
   var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
@@ -1488,30 +1488,30 @@ var addToUnscopables$1 = function (key) {
 
 var iterators = {};
 
-var fails$e = fails$n;
+var fails$d = fails$m;
 
-var correctPrototypeGetter = !fails$e(function () {
+var correctPrototypeGetter = !fails$d(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
   return Object.getPrototypeOf(new F()) !== F.prototype;
 });
 
-var global$n = global$I;
+var global$o = global$J;
 var hasOwn$4 = hasOwnProperty_1;
 var isCallable$9 = isCallable$j;
-var toObject$3 = toObject$6;
+var toObject$2 = toObject$5;
 var sharedKey = sharedKey$3;
 var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
 
 var IE_PROTO = sharedKey('IE_PROTO');
-var Object$2 = global$n.Object;
+var Object$2 = global$o.Object;
 var ObjectPrototype = Object$2.prototype;
 
 // `Object.getPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.getprototypeof
 var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? Object$2.getPrototypeOf : function (O) {
-  var object = toObject$3(O);
+  var object = toObject$2(O);
   if (hasOwn$4(object, IE_PROTO)) return object[IE_PROTO];
   var constructor = object.constructor;
   if (isCallable$9(constructor) && object instanceof constructor) {
@@ -1519,13 +1519,13 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? Object$2.getPrototypeOf :
   } return object instanceof Object$2 ? ObjectPrototype : null;
 };
 
-var fails$d = fails$n;
+var fails$c = fails$m;
 var isCallable$8 = isCallable$j;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var redefine$6 = redefine$8.exports;
 var wellKnownSymbol$e = wellKnownSymbol$h;
 
-var ITERATOR$7 = wellKnownSymbol$e('iterator');
+var ITERATOR$8 = wellKnownSymbol$e('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -1543,18 +1543,18 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = IteratorPrototype$2 == undefined || fails$d(function () {
+var NEW_ITERATOR_PROTOTYPE = IteratorPrototype$2 == undefined || fails$c(function () {
   var test = {};
   // FF44- legacy iterators case
-  return IteratorPrototype$2[ITERATOR$7].call(test) !== test;
+  return IteratorPrototype$2[ITERATOR$8].call(test) !== test;
 });
 
 if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype$2 = {};
 
 // `%IteratorPrototype%[@@iterator]()` method
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-@@iterator
-if (!isCallable$8(IteratorPrototype$2[ITERATOR$7])) {
-  redefine$6(IteratorPrototype$2, ITERATOR$7, function () {
+if (!isCallable$8(IteratorPrototype$2[ITERATOR$8])) {
+  redefine$6(IteratorPrototype$2, ITERATOR$8, function () {
     return this;
   });
 }
@@ -1593,11 +1593,11 @@ var createIteratorConstructor$2 = function (IteratorConstructor, NAME, next, ENU
   return IteratorConstructor;
 };
 
-var global$m = global$I;
+var global$n = global$J;
 var isCallable$7 = isCallable$j;
 
-var String$3 = global$m.String;
-var TypeError$9 = global$m.TypeError;
+var String$3 = global$n.String;
+var TypeError$9 = global$n.TypeError;
 
 var aPossiblePrototype$1 = function (argument) {
   if (typeof argument == 'object' || isCallable$7(argument)) return argument;
@@ -1651,7 +1651,7 @@ var PROPER_FUNCTION_NAME$1 = FunctionName.PROPER;
 var CONFIGURABLE_FUNCTION_NAME = FunctionName.CONFIGURABLE;
 var IteratorPrototype = IteratorsCore.IteratorPrototype;
 var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;
-var ITERATOR$6 = wellKnownSymbol$c('iterator');
+var ITERATOR$7 = wellKnownSymbol$c('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -1674,7 +1674,7 @@ var defineIterator$2 = function (Iterable, NAME, IteratorConstructor, next, DEFA
   var TO_STRING_TAG = NAME + ' Iterator';
   var INCORRECT_VALUES_NAME = false;
   var IterablePrototype = Iterable.prototype;
-  var nativeIterator = IterablePrototype[ITERATOR$6]
+  var nativeIterator = IterablePrototype[ITERATOR$7]
     || IterablePrototype['@@iterator']
     || DEFAULT && IterablePrototype[DEFAULT];
   var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT);
@@ -1688,8 +1688,8 @@ var defineIterator$2 = function (Iterable, NAME, IteratorConstructor, next, DEFA
       if (getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {
         if (setPrototypeOf) {
           setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype);
-        } else if (!isCallable$6(CurrentIteratorPrototype[ITERATOR$6])) {
-          redefine$5(CurrentIteratorPrototype, ITERATOR$6, returnThis);
+        } else if (!isCallable$6(CurrentIteratorPrototype[ITERATOR$7])) {
+          redefine$5(CurrentIteratorPrototype, ITERATOR$7, returnThis);
         }
       }
       // Set @@toStringTag to native iterators
@@ -1722,8 +1722,8 @@ var defineIterator$2 = function (Iterable, NAME, IteratorConstructor, next, DEFA
   }
 
   // define iterator
-  if (IterablePrototype[ITERATOR$6] !== defaultIterator) {
-    redefine$5(IterablePrototype, ITERATOR$6, defaultIterator, { name: DEFAULT });
+  if (IterablePrototype[ITERATOR$7] !== defaultIterator) {
+    redefine$5(IterablePrototype, ITERATOR$7, defaultIterator, { name: DEFAULT });
   }
   Iterators$3[NAME] = defaultIterator;
 
@@ -1834,24 +1834,24 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$l = global$I;
+var global$m = global$J;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$6;
 var wellKnownSymbol$b = wellKnownSymbol$h;
 
-var ITERATOR$5 = wellKnownSymbol$b('iterator');
+var ITERATOR$6 = wellKnownSymbol$b('iterator');
 var TO_STRING_TAG$2 = wellKnownSymbol$b('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
   if (CollectionPrototype) {
     // some Chrome versions have non-configurable methods on DOMTokenList
-    if (CollectionPrototype[ITERATOR$5] !== ArrayValues) try {
-      createNonEnumerableProperty$1(CollectionPrototype, ITERATOR$5, ArrayValues);
+    if (CollectionPrototype[ITERATOR$6] !== ArrayValues) try {
+      createNonEnumerableProperty$1(CollectionPrototype, ITERATOR$6, ArrayValues);
     } catch (error) {
-      CollectionPrototype[ITERATOR$5] = ArrayValues;
+      CollectionPrototype[ITERATOR$6] = ArrayValues;
     }
     if (!CollectionPrototype[TO_STRING_TAG$2]) {
       createNonEnumerableProperty$1(CollectionPrototype, TO_STRING_TAG$2, COLLECTION_NAME);
@@ -1868,7 +1868,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$l[COLLECTION_NAME] && global$l[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(global$m[COLLECTION_NAME] && global$m[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -1876,20 +1876,20 @@ handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 var wellKnownSymbol$a = wellKnownSymbol$h;
 
 var TO_STRING_TAG$1 = wellKnownSymbol$a('toStringTag');
-var test$1 = {};
+var test = {};
 
-test$1[TO_STRING_TAG$1] = 'z';
+test[TO_STRING_TAG$1] = 'z';
 
-var toStringTagSupport = String(test$1) === '[object z]';
+var toStringTagSupport = String(test) === '[object z]';
 
-var global$k = global$I;
+var global$l = global$J;
 var TO_STRING_TAG_SUPPORT = toStringTagSupport;
 var isCallable$5 = isCallable$j;
 var classofRaw = classofRaw$1;
 var wellKnownSymbol$9 = wellKnownSymbol$h;
 
 var TO_STRING_TAG = wellKnownSymbol$9('toStringTag');
-var Object$1 = global$k.Object;
+var Object$1 = global$l.Object;
 
 // ES3 wrong here
 var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
@@ -1913,10 +1913,10 @@ var classof$6 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
     : (result = classofRaw(O)) == 'Object' && isCallable$5(O.callee) ? 'Arguments' : result;
 };
 
-var global$j = global$I;
+var global$k = global$J;
 var classof$5 = classof$6;
 
-var String$2 = global$j.String;
+var String$2 = global$k.String;
 
 var toString$d = function (argument) {
   if (classof$5(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
@@ -1925,7 +1925,7 @@ var toString$d = function (argument) {
 
 var $$8 = _export;
 var DESCRIPTORS$1 = descriptors;
-var global$i = global$I;
+var global$j = global$J;
 var uncurryThis$j = functionUncurryThis;
 var hasOwn$2 = hasOwnProperty_1;
 var isCallable$4 = isCallable$j;
@@ -1934,7 +1934,7 @@ var toString$c = toString$d;
 var defineProperty = objectDefineProperty.f;
 var copyConstructorProperties = copyConstructorProperties$2;
 
-var NativeSymbol = global$i.Symbol;
+var NativeSymbol = global$j.Symbol;
 var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
 
 if (DESCRIPTORS$1 && isCallable$4(NativeSymbol) && (!('description' in SymbolPrototype) ||
@@ -1993,10 +1993,10 @@ var isRegexp = function (it) {
   return isObject$1(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof$4(it) == 'RegExp');
 };
 
-var global$h = global$I;
+var global$i = global$J;
 var isRegExp$1 = isRegexp;
 
-var TypeError$8 = global$h.TypeError;
+var TypeError$8 = global$i.TypeError;
 
 var notARegexp = function (it) {
   if (isRegExp$1(it)) {
@@ -2428,12 +2428,12 @@ GridItem.displayName = 'Grid Item';
 
 const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
 var _jsxFileName$Y = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
-const StyledDiv$2 = styled(Flex$1, {
+const StyledDiv$1 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
   marginRight: 'auto',
   '@sm': {
-    padding: '$spacing-04',
+    padding: '$spacing-04 $spacing-05',
     backgroundColor: '$white',
     width: '100%'
   },
@@ -2458,7 +2458,7 @@ const PageContainer = _ref => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
 
-  return /*#__PURE__*/React__default.createElement(StyledDiv$2, _extends({
+  return /*#__PURE__*/React__default.createElement(StyledDiv$1, _extends({
     id: "retina-container",
     css: Object.assign({
       maxWidth: isCollapse ? '1206px' : '1006px'
@@ -2897,7 +2897,7 @@ const ButtonComponent = styled('button', {
   }
 });
 const ButtonPrimitive = ButtonComponent;
-const Button$2 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+const Button$1 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className,
     children,
@@ -2957,7 +2957,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, rightIcon) : null);
 });
-Button$2.propTypes = {
+Button$1.propTypes = {
   className: PropTypes.string,
   buttonType: PropTypes.string,
   size: PropTypes.string,
@@ -2969,7 +2969,7 @@ Button$2.propTypes = {
   rightIcon: PropTypes.element,
   icon: PropTypes.bool
 };
-Button$2.defaultProps = {
+Button$1.defaultProps = {
   buttonType: 'primary',
   size: 'md',
   disabled: false,
@@ -4512,7 +4512,7 @@ const StyledImage = styled('img', {
     }
   }
 });
-function Image$1(_ref) {
+function Image(_ref) {
   let {
     className,
     src,
@@ -4543,7 +4543,7 @@ function Image$1(_ref) {
     }
   }));
 }
-Image$1.propTypes = {
+Image.propTypes = {
   className: PropTypes.string,
   src: PropTypes.string,
   alt: PropTypes.string,
@@ -4553,7 +4553,7 @@ Image$1.propTypes = {
   objectFit: PropTypes.string,
   fallback: PropTypes.string
 };
-Image$1.defaultProps = {
+Image.defaultProps = {
   rounded: false
 };
 
@@ -5968,9 +5968,9 @@ InputRightElement.propTypes = {
 };
 InputRightElement.name = 'InputRightElement';
 
-const _excluded$k = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+const _excluded$k = ["className", "children", "onClick", "size", "icon", "isRemovable", "disable", "type", "onRemove"];
 var _jsxFileName$C = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
-const TagWrapper$3 = styled('div', {
+const TagWrapper$2 = styled('div', {
   boxSizing: 'border-box',
   listStyle: 'none',
   display: 'inline-flex',
@@ -5982,8 +5982,6 @@ const TagWrapper$3 = styled('div', {
   fontWeight: 500,
   lineHeight: '16px',
   borderRadius: '$sm',
-  background: '$bgGray',
-  color: '$textPrimary',
   variants: {
     size: {
       sm: {
@@ -5999,19 +5997,18 @@ const TagWrapper$3 = styled('div', {
         padding: '4px 8px'
       }
     },
-    disabled: {
+    disable: {
       true: {
         background: '$bgInactive',
         cursor: 'not-allowed',
         color: '$textDisable'
       }
     },
-    readOnly: {
-      true: {
-        cursor: 'not-allowed'
-      }
-    },
     type: {
+      default: {
+        background: '$bgGray',
+        color: '$textPrimary'
+      },
       success: {
         background: '$bgSuccess',
         color: '$textGreen'
@@ -6041,16 +6038,11 @@ const StyledIconRight$1 = styled('div', {
   alignItems: 'center',
   cursor: 'pointer',
   variants: {
-    disabled: {
+    disable: {
       true: {
         background: '$bgInactive',
         cursor: 'not-allowed'
       }
-    },
-    readOnly: {
-      true: {
-        cursor: 'not-allowed'
-      }
     }
   }
 });
@@ -6068,50 +6060,47 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     size,
     icon,
     isRemovable,
-    disabled,
+    disable,
     type,
-    onRemove,
-    readOnly
+    onRemove
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
-  return /*#__PURE__*/React__default.createElement(TagWrapper$3, _extends({
+  return /*#__PURE__*/React__default.createElement(TagWrapper$2, _extends({
     ref: ref,
     onClick: onClick,
     size: size,
-    disabled: disabled,
+    disable: disable,
     type: type,
-    readOnly: readOnly,
     css: Object.assign({}, props.css)
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$C,
-      lineNumber: 84,
+      lineNumber: 80,
       columnNumber: 7
     }
   }), icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$C,
-      lineNumber: 94,
+      lineNumber: 89,
       columnNumber: 31
     }
   }, icon) : null, /*#__PURE__*/React__default.createElement(TagComponent$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$C,
-      lineNumber: 95,
+      lineNumber: 90,
       columnNumber: 9
     }
   }, children), isRemovable ? /*#__PURE__*/React__default.createElement(StyledIconRight$1, {
-    disabled: disabled,
+    disable: disable,
     onClick: onRemove,
-    readOnly: readOnly,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$C,
-      lineNumber: 97,
+      lineNumber: 92,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -6123,46 +6112,29 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$C,
-      lineNumber: 98,
+      lineNumber: 93,
       columnNumber: 13
     }
   })) : null);
 });
 Tag.propTypes = {
   size: PropTypes.string,
-  disabled: PropTypes.bool,
+  disable: PropTypes.bool,
   type: PropTypes.string,
   icon: PropTypes.element,
   isRemovable: PropTypes.bool,
   onRemove: PropTypes.func,
-  onClick: PropTypes.func,
-  readOnly: PropTypes.bool
+  onClick: PropTypes.func
 };
 Tag.defaultProps = {
   size: 'sm',
   isRemovable: false,
-  disabled: false,
-  readOnly: false
+  disable: false,
+  type: 'default'
 };
 
-const _excluded$j = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar"];
+const _excluded$j = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
 var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
-const Wrapper$1 = styled('div', {
-  margin: 0,
-  flexDirection: 'column',
-  display: 'block',
-  position: 'relative',
-  fontFamily: 'inherit',
-  fontVariantNumeric: 'tabular-nums',
-  fontSize: '$short-content-regular',
-  fontWeight: '400',
-  textAlign: 'left',
-  alignItems: 'center',
-  letterSpacing: '$short-content-regular',
-  lineHeight: '$short-content-regular',
-  color: '$textDisable',
-  width: '100%'
-});
 const InputTagsComponent = styled('div', {
   display: 'flex',
   position: 'relative',
@@ -6178,20 +6150,28 @@ const InputTagsComponent = styled('div', {
   lineHeight: '$short-content-regular',
   fontSize: '$short-content-regular',
   fontWeight: '400',
-  '&:focus-within': {
-    border: '1px solid $formActive'
+  '&:focus': {
+    border: '1px solid $colors$primary400'
+  },
+  '&:active': {
+    border: '1px solid $colors$primary400'
   },
   '&:hover': {
-    border: '1px solid $gray500'
+    border: '1px solid $colors$primary600'
   },
   variants: {
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
     disabled: {
       true: {
         backgroundColor: '$formDisable',
         color: '$textDisable',
         cursor: 'not-allowed',
         '&:hover': {
-          border: '1px solid $formDefault'
+          border: '1px solid $colors$gray300'
         }
       }
     },
@@ -6199,27 +6179,33 @@ const InputTagsComponent = styled('div', {
       sm: {
         height: 'auto',
         minheight: 32,
-        padding: '8px 16px'
+        padding: '2px $spacing-05'
       },
       lg: {
         height: 'auto',
         minheight: 40,
-        padding: '8px 16px'
+        padding: '6px $spacing-05'
       }
     },
     isInvalid: {
       true: {
-        border: '1px solid $formError',
-        '&:focus-within': {
-          border: '1px solid $formError'
+        border: '1px solid $colors$red400',
+        '&:focus': {
+          border: '1px solid $colors$red400'
         },
         '&:hover': {
-          border: '1px solid $formError'
+          border: '1px solid $colors$red400'
         }
       }
     }
   }
 });
+const TagContainer = styled(Box$1, {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%'
+});
 const Input$4 = styled('input', {
   display: 'flex',
   position: 'relative',
@@ -6241,35 +6227,35 @@ const Input$4 = styled('input', {
     '&::placeholder': {
       color: '$textDisable'
     }
+  },
+  variants: {
+    readOnly: {
+      true: {
+        backgroundColor: 'transparent',
+        color: '$textDisable',
+        cursor: 'default',
+        '&::placeholder': {
+          color: '$textDisable'
+        }
+      }
+    }
   }
 });
-const TagWrapper$2 = styled(Box$1, {
-  display: 'flex',
-  position: 'relative',
-  flexWrap: 'wrap',
-  maxWidth: '100%',
-  marginTop: '5px',
-  gap: '5px'
-});
 function TagsInput(_ref) {
   let {
+    className,
     size,
     isInvalid,
     placeholder,
     onChange,
-    onInputChange,
     value,
     disabled,
     readOnly,
-    max,
-    maxChar
+    max
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   const [tags, setTags] = React__default.useState(value || []);
-  React__default.useEffect(() => {
-    onChange && onChange(tags);
-  }, [tags]);
 
   const addTags = event => {
     if (event.key === 'Enter' && event.target.value !== '' && readOnly === false && max !== tags.length) {
@@ -6286,79 +6272,85 @@ function TagsInput(_ref) {
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(Wrapper$1, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$B,
-      lineNumber: 135,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/React__default.createElement(InputTagsComponent, _extends({
+  return /*#__PURE__*/React__default.createElement(InputTagsComponent, _extends({
+    className: className,
     size: size,
     isInvalid: isInvalid,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     value: value,
+    readOnly: readOnly,
     css: Object.assign({}, props.css)
   }, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 136,
-      columnNumber: 7
+      lineNumber: 129,
+      columnNumber: 5
     }
-  }), /*#__PURE__*/React__default.createElement(Input$4, {
-    type: "text",
-    onKeyUp: event => addTags(event) // onKeyDown={event => removeTags(tags.length - 1, event.key)}
-    ,
-    placeholder: placeholder,
-    onChange: onInputChange,
-    disabled: disabled || readOnly,
-    maxLength: maxChar,
+  }), /*#__PURE__*/React__default.createElement(TagContainer, {
     __self: this,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 144,
-      columnNumber: 9
+      lineNumber: 139,
+      columnNumber: 7
     }
-  })), /*#__PURE__*/React__default.createElement(TagWrapper$2, {
+  }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
+    key: index,
+    onClick: () => removeTags(index, 'removeTag'),
+    rightIcon: /*#__PURE__*/React__default.createElement(CloseOutline, {
+      size: 10,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 144,
+        columnNumber: 24
+      }
+    }),
+    css: {
+      background: disabled ? '$btnDisable' : '$bgGray',
+      border: 'none',
+      color: '$textContent',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      margin: '0 5px 2px 0'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 154,
-      columnNumber: 7
+      lineNumber: 141,
+      columnNumber: 11
     }
-  }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
-    key: index,
+  }, tag))), /*#__PURE__*/React__default.createElement(Input$4, {
+    type: "text",
+    onKeyUp: event => addTags(event),
+    onKeyDown: event => removeTags(tags.length - 1, event.key),
+    placeholder: placeholder,
+    onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
-    size: size === 'lg' ? 'sm' : 'lg',
-    isRemovable: disabled || readOnly ? false : true,
-    onRemove: () => removeTags(index, 'removeTag'),
     __self: this,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 156,
-      columnNumber: 11
+      lineNumber: 157,
+      columnNumber: 7
     }
-  }, tag))));
+  }));
 }
 TagsInput.propTypes = {
-  placeholder: PropTypes.string,
+  className: PropTypes.string,
   size: PropTypes.string,
-  value: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.arrayOf(PropTypes.string),
-  onInputChange: PropTypes.func,
-  max: PropTypes.number,
-  maxChar: PropTypes.number,
   isInvalid: PropTypes.bool,
   disabled: PropTypes.bool,
-  readOnly: PropTypes.bool
+  value: PropTypes.array,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  max: PropTypes.number
 };
 TagsInput.defaultProps = {
-  placeholder: 'Placeholder',
   size: 'lg',
   isInvalid: false,
   disabled: false,
+  value: [],
   readOnly: false
 };
 
@@ -6689,13 +6681,13 @@ var regexpFlags$1 = function () {
   return result;
 };
 
-var fails$c = fails$n;
-var global$g = global$I;
+var fails$b = fails$m;
+var global$h = global$J;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
-var $RegExp$2 = global$g.RegExp;
+var $RegExp$2 = global$h.RegExp;
 
-var UNSUPPORTED_Y$2 = fails$c(function () {
+var UNSUPPORTED_Y$2 = fails$b(function () {
   var re = $RegExp$2('a', 'y');
   re.lastIndex = 2;
   return re.exec('abcd') != null;
@@ -6703,11 +6695,11 @@ var UNSUPPORTED_Y$2 = fails$c(function () {
 
 // UC Browser bug
 // https://github.com/zloirock/core-js/issues/1008
-var MISSED_STICKY = UNSUPPORTED_Y$2 || fails$c(function () {
+var MISSED_STICKY = UNSUPPORTED_Y$2 || fails$b(function () {
   return !$RegExp$2('a', 'y').sticky;
 });
 
-var BROKEN_CARET = UNSUPPORTED_Y$2 || fails$c(function () {
+var BROKEN_CARET = UNSUPPORTED_Y$2 || fails$b(function () {
   // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
   var re = $RegExp$2('^r', 'gy');
   re.lastIndex = 2;
@@ -6720,24 +6712,24 @@ var regexpStickyHelpers = {
   UNSUPPORTED_Y: UNSUPPORTED_Y$2
 };
 
-var fails$b = fails$n;
-var global$f = global$I;
+var fails$a = fails$m;
+var global$g = global$J;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
-var $RegExp$1 = global$f.RegExp;
+var $RegExp$1 = global$g.RegExp;
 
-var regexpUnsupportedDotAll = fails$b(function () {
+var regexpUnsupportedDotAll = fails$a(function () {
   var re = $RegExp$1('.', 's');
   return !(re.dotAll && re.exec('\n') && re.flags === 's');
 });
 
-var fails$a = fails$n;
-var global$e = global$I;
+var fails$9 = fails$m;
+var global$f = global$J;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
-var $RegExp = global$e.RegExp;
+var $RegExp = global$f.RegExp;
 
-var regexpUnsupportedNcg = fails$a(function () {
+var regexpUnsupportedNcg = fails$9(function () {
   var re = $RegExp('(?<a>b)', 'g');
   return re.exec('b').groups.a !== 'b' ||
     'b'.replace(re, '$<a>c') !== 'bc';
@@ -6861,12 +6853,12 @@ if (PATCH) {
 var regexpExec$3 = patchedExec;
 
 var $$6 = _export;
-var exec$4 = regexpExec$3;
+var exec$5 = regexpExec$3;
 
 // `RegExp.prototype.exec` method
 // https://tc39.es/ecma262/#sec-regexp.prototype.exec
-$$6({ target: 'RegExp', proto: true, forced: /./.exec !== exec$4 }, {
-  exec: exec$4
+$$6({ target: 'RegExp', proto: true, forced: /./.exec !== exec$5 }, {
+  exec: exec$5
 });
 
 // TODO: Remove from `core-js@4` since it's moved to entry points
@@ -6874,7 +6866,7 @@ $$6({ target: 'RegExp', proto: true, forced: /./.exec !== exec$4 }, {
 var uncurryThis$g = functionUncurryThis;
 var redefine$4 = redefine$8.exports;
 var regexpExec$2 = regexpExec$3;
-var fails$9 = fails$n;
+var fails$8 = fails$m;
 var wellKnownSymbol$6 = wellKnownSymbol$h;
 var createNonEnumerableProperty = createNonEnumerableProperty$6;
 
@@ -6884,14 +6876,14 @@ var RegExpPrototype$1 = RegExp.prototype;
 var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
   var SYMBOL = wellKnownSymbol$6(KEY);
 
-  var DELEGATES_TO_SYMBOL = !fails$9(function () {
+  var DELEGATES_TO_SYMBOL = !fails$8(function () {
     // String methods call symbol-named RegEp methods
     var O = {};
     O[SYMBOL] = function () { return 7; };
     return ''[KEY](O) != 7;
   });
 
-  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$9(function () {
+  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$8(function () {
     // Symbol-named RegExp methods call .exec
     var execCalled = false;
     var re = /a/;
@@ -6951,14 +6943,14 @@ var sameValue$1 = Object.is || function is(x, y) {
   return x === y ? x !== 0 || 1 / x === 1 / y : x != x && y != y;
 };
 
-var global$d = global$I;
+var global$e = global$J;
 var call$8 = functionCall;
 var anObject$9 = anObject$g;
 var isCallable$3 = isCallable$j;
 var classof$3 = classofRaw$1;
 var regexpExec$1 = regexpExec$3;
 
-var TypeError$7 = global$d.TypeError;
+var TypeError$7 = global$e.TypeError;
 
 // `RegExpExec` abstract operation
 // https://tc39.es/ecma262/#sec-regexpexec
@@ -7081,7 +7073,7 @@ const BoxSelect = styled('div', {
     }
   }
 });
-const Button$1 = styled('button', {
+const Button = styled('button', {
   display: 'flex',
   width: '100%',
   height: '100%',
@@ -7202,7 +7194,7 @@ const SelectItem = styled('div', {
   cursor: 'pointer',
   lineHeight: '20px'
 });
-const StyledDiv$1 = styled('div', {
+const StyledDiv = styled('div', {
   color: '$textDisable',
   display: 'inline-flex'
 });
@@ -7233,6 +7225,10 @@ function Select$1(_ref) {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   const [item, setItem] = React.useState(option || []);
+  const [selectedValue, setSelectedValue] = React.useState(value);
+  React.useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
 
   const handleInputValue = value => {
     onSearch(value);
@@ -7273,11 +7269,12 @@ function Select$1(_ref) {
   return /*#__PURE__*/React.createElement(Downshift, _extends({}, props, {
     onChange: onChange,
     itemToString: item => item ? item.name : '',
-    initialSelectedItem: value !== undefined ? value : null,
+    selectedItem: selectedValue !== undefined ? selectedValue : null,
+    onSelect: setSelectedValue,
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 260,
+      lineNumber: 266,
       columnNumber: 5
     }
   }), ({
@@ -7296,7 +7293,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 278,
+      lineNumber: 285,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -7308,7 +7305,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 279,
+      lineNumber: 286,
       columnNumber: 11
     }
   }), search ? /*#__PURE__*/React.createElement("div", {
@@ -7318,7 +7315,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 286,
+      lineNumber: 293,
       columnNumber: 15
     }
   }, icon ? /*#__PURE__*/React.createElement("div", {
@@ -7329,7 +7326,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 288,
+      lineNumber: 295,
       columnNumber: 19
     }
   }, /*#__PURE__*/React.createElement(InputLeftElement, {
@@ -7337,14 +7334,14 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 289,
+        lineNumber: 296,
         columnNumber: 49
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 289,
+      lineNumber: 296,
       columnNumber: 21
     }
   }), /*#__PURE__*/React.createElement(Input$3, _extends({
@@ -7358,7 +7355,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 290,
+      lineNumber: 297,
       columnNumber: 21
     }
   }))) : /*#__PURE__*/React.createElement(Input$3, _extends({
@@ -7372,10 +7369,10 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 298,
+      lineNumber: 305,
       columnNumber: 19
     }
-  }))) : /*#__PURE__*/React.createElement(Button$1, _extends({}, getToggleButtonProps({
+  }))) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
     disabled: disabled || readOnly
   }), {
     disabled: disabled,
@@ -7384,7 +7381,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 307,
+      lineNumber: 314,
       columnNumber: 15
     }
   }), selectedItem ? /*#__PURE__*/React.createElement(Text$1, {
@@ -7393,7 +7390,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 314,
+      lineNumber: 321,
       columnNumber: 19
     }
   }, selectedItem.name) : /*#__PURE__*/React.createElement(Text$1, {
@@ -7402,7 +7399,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 318,
+      lineNumber: 325,
       columnNumber: 19
     }
   }, placeholder)), !icon ? /*#__PURE__*/React.createElement(IconContainer, _extends({}, getToggleButtonProps({
@@ -7413,7 +7410,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 325,
+      lineNumber: 332,
       columnNumber: 15
     }
   }), /*#__PURE__*/React.createElement(CaretDownOutline, {
@@ -7421,7 +7418,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 330,
+      lineNumber: 337,
       columnNumber: 17
     }
   })) : null), /*#__PURE__*/React.createElement(OptionWrapper$1, {
@@ -7432,14 +7429,14 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 334,
+      lineNumber: 341,
       columnNumber: 11
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 336,
+      lineNumber: 343,
       columnNumber: 15
     }
   }), item.map((item, index) => {
@@ -7462,7 +7459,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 338,
+        lineNumber: 345,
         columnNumber: 19
       }
     }), item.name);
@@ -7470,14 +7467,14 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 360,
+      lineNumber: 367,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv$1, {
+  }, /*#__PURE__*/React.createElement(StyledDiv, {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 361,
+      lineNumber: 368,
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -7487,7 +7484,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 362,
+      lineNumber: 369,
       columnNumber: 19
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -7499,7 +7496,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 363,
+      lineNumber: 370,
       columnNumber: 21
     }
   })), "Item tidak ditemukan")))));
@@ -7535,239 +7532,35 @@ Select$1.defaultProps = {
   readOnly: false
 };
 
-var toPropertyKey = toPropertyKey$3;
-var definePropertyModule = objectDefineProperty;
-var createPropertyDescriptor$1 = createPropertyDescriptor$5;
-
-var createProperty$2 = function (object, key, value) {
-  var propertyKey = toPropertyKey(key);
-  if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor$1(0, value));
-  else object[propertyKey] = value;
-};
-
-var global$c = global$I;
-var toAbsoluteIndex = toAbsoluteIndex$2;
-var lengthOfArrayLike$2 = lengthOfArrayLike$4;
-var createProperty$1 = createProperty$2;
-
-var Array$2 = global$c.Array;
-var max$1 = Math.max;
-
-var arraySliceSimple = function (O, start, end) {
-  var length = lengthOfArrayLike$2(O);
-  var k = toAbsoluteIndex(start, length);
-  var fin = toAbsoluteIndex(end === undefined ? length : end, length);
-  var result = Array$2(max$1(fin - k, 0));
-  for (var n = 0; k < fin; k++, n++) createProperty$1(result, n, O[k]);
-  result.length = n;
-  return result;
-};
-
-var arraySlice$2 = arraySliceSimple;
-
-var floor$4 = Math.floor;
-
-var mergeSort = function (array, comparefn) {
-  var length = array.length;
-  var middle = floor$4(length / 2);
-  return length < 8 ? insertionSort(array, comparefn) : merge(
-    array,
-    mergeSort(arraySlice$2(array, 0, middle), comparefn),
-    mergeSort(arraySlice$2(array, middle), comparefn),
-    comparefn
-  );
-};
-
-var insertionSort = function (array, comparefn) {
-  var length = array.length;
-  var i = 1;
-  var element, j;
-
-  while (i < length) {
-    j = i;
-    element = array[i];
-    while (j && comparefn(array[j - 1], element) > 0) {
-      array[j] = array[--j];
-    }
-    if (j !== i++) array[j] = element;
-  } return array;
-};
-
-var merge = function (array, left, right, comparefn) {
-  var llength = left.length;
-  var rlength = right.length;
-  var lindex = 0;
-  var rindex = 0;
-
-  while (lindex < llength || rindex < rlength) {
-    array[lindex + rindex] = (lindex < llength && rindex < rlength)
-      ? comparefn(left[lindex], right[rindex]) <= 0 ? left[lindex++] : right[rindex++]
-      : lindex < llength ? left[lindex++] : right[rindex++];
-  } return array;
-};
-
-var arraySort$1 = mergeSort;
-
-var fails$8 = fails$n;
-
-var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
-  var method = [][METHOD_NAME];
-  return !!method && fails$8(function () {
-    // eslint-disable-next-line no-useless-call -- required for testing
-    method.call(null, argument || function () { return 1; }, 1);
-  });
-};
-
-var userAgent$1 = engineUserAgent;
-
-var firefox = userAgent$1.match(/firefox\/(\d+)/i);
-
-var engineFfVersion = !!firefox && +firefox[1];
-
-var UA = engineUserAgent;
-
-var engineIsIeOrEdge = /MSIE|Trident/.test(UA);
-
-var userAgent = engineUserAgent;
-
-var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
-
-var engineWebkitVersion = !!webkit && +webkit[1];
-
 var $$5 = _export;
 var uncurryThis$f = functionUncurryThis;
-var aCallable$2 = aCallable$4;
-var toObject$2 = toObject$6;
-var lengthOfArrayLike$1 = lengthOfArrayLike$4;
+var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
+var toLength$2 = toLength$4;
 var toString$8 = toString$d;
-var fails$7 = fails$n;
-var internalSort = arraySort$1;
-var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var FF = engineFfVersion;
-var IE_OR_EDGE = engineIsIeOrEdge;
-var V8 = engineV8Version;
-var WEBKIT = engineWebkitVersion;
-
-var test = [];
-var un$Sort = uncurryThis$f(test.sort);
-var push$5 = uncurryThis$f(test.push);
-
-// IE8-
-var FAILS_ON_UNDEFINED = fails$7(function () {
-  test.sort(undefined);
-});
-// V8 bug
-var FAILS_ON_NULL = fails$7(function () {
-  test.sort(null);
-});
-// Old WebKit
-var STRICT_METHOD = arrayMethodIsStrict('sort');
-
-var STABLE_SORT = !fails$7(function () {
-  // feature detection can be too slow, so check engines versions
-  if (V8) return V8 < 70;
-  if (FF && FF > 3) return;
-  if (IE_OR_EDGE) return true;
-  if (WEBKIT) return WEBKIT < 603;
-
-  var result = '';
-  var code, chr, value, index;
-
-  // generate an array with more 512 elements (Chakra and old V8 fails only in this case)
-  for (code = 65; code < 76; code++) {
-    chr = String.fromCharCode(code);
-
-    switch (code) {
-      case 66: case 69: case 70: case 72: value = 3; break;
-      case 68: case 71: value = 4; break;
-      default: value = 2;
-    }
+var notARegExp = notARegexp;
+var requireObjectCoercible$5 = requireObjectCoercible$a;
+var correctIsRegExpLogic = correctIsRegexpLogic;
 
-    for (index = 0; index < 47; index++) {
-      test.push({ k: chr + index, v: value });
-    }
-  }
+// eslint-disable-next-line es/no-string-prototype-startswith -- safe
+var un$StartsWith = uncurryThis$f(''.startsWith);
+var stringSlice$7 = uncurryThis$f(''.slice);
+var min$2 = Math.min;
 
-  test.sort(function (a, b) { return b.v - a.v; });
-
-  for (index = 0; index < test.length; index++) {
-    chr = test[index].k.charAt(0);
-    if (result.charAt(result.length - 1) !== chr) result += chr;
-  }
-
-  return result !== 'DGBEFHACIJK';
-});
-
-var FORCED$2 = FAILS_ON_UNDEFINED || !FAILS_ON_NULL || !STRICT_METHOD || !STABLE_SORT;
-
-var getSortCompare = function (comparefn) {
-  return function (x, y) {
-    if (y === undefined) return -1;
-    if (x === undefined) return 1;
-    if (comparefn !== undefined) return +comparefn(x, y) || 0;
-    return toString$8(x) > toString$8(y) ? 1 : -1;
-  };
-};
-
-// `Array.prototype.sort` method
-// https://tc39.es/ecma262/#sec-array.prototype.sort
-$$5({ target: 'Array', proto: true, forced: FORCED$2 }, {
-  sort: function sort(comparefn) {
-    if (comparefn !== undefined) aCallable$2(comparefn);
-
-    var array = toObject$2(this);
-
-    if (STABLE_SORT) return comparefn === undefined ? un$Sort(array) : un$Sort(array, comparefn);
-
-    var items = [];
-    var arrayLength = lengthOfArrayLike$1(array);
-    var itemsLength, index;
-
-    for (index = 0; index < arrayLength; index++) {
-      if (index in array) push$5(items, array[index]);
-    }
-
-    internalSort(items, getSortCompare(comparefn));
-
-    itemsLength = items.length;
-    index = 0;
-
-    while (index < itemsLength) array[index] = items[index++];
-    while (index < arrayLength) delete array[index++];
-
-    return array;
-  }
-});
-
-var $$4 = _export;
-var uncurryThis$e = functionUncurryThis;
-var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
-var toLength$2 = toLength$4;
-var toString$7 = toString$d;
-var notARegExp = notARegexp;
-var requireObjectCoercible$5 = requireObjectCoercible$a;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-// eslint-disable-next-line es/no-string-prototype-startswith -- safe
-var un$StartsWith = uncurryThis$e(''.startsWith);
-var stringSlice$7 = uncurryThis$e(''.slice);
-var min$2 = Math.min;
-
-var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
-// https://github.com/zloirock/core-js/pull/702
-var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
-  var descriptor = getOwnPropertyDescriptor(String.prototype, 'startsWith');
-  return descriptor && !descriptor.writable;
-}();
+var CORRECT_IS_REGEXP_LOGIC = correctIsRegExpLogic('startsWith');
+// https://github.com/zloirock/core-js/pull/702
+var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
+  var descriptor = getOwnPropertyDescriptor(String.prototype, 'startsWith');
+  return descriptor && !descriptor.writable;
+}();
 
 // `String.prototype.startsWith` method
 // https://tc39.es/ecma262/#sec-string.prototype.startswith
-$$4({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+$$5({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
   startsWith: function startsWith(searchString /* , position = 0 */) {
-    var that = toString$7(requireObjectCoercible$5(this));
+    var that = toString$8(requireObjectCoercible$5(this));
     notARegExp(searchString);
     var index = toLength$2(min$2(arguments.length > 1 ? arguments[1] : undefined, that.length));
-    var search = toString$7(searchString);
+    var search = toString$8(searchString);
     return un$StartsWith
       ? un$StartsWith(that, search, index)
       : stringSlice$7(that, index, index + search.length) === search;
@@ -7836,7 +7629,7 @@ const Wrapper = styled('div', {
   alignItems: 'center',
   letterSpacing: '$short-content-regular',
   lineHeight: '$short-content-regular',
-  color: '$textDisable',
+  color: '$textPrimary',
   width: '100%'
 });
 const Select = styled('div', {
@@ -7849,25 +7642,25 @@ const Select = styled('div', {
   background: 'none',
   boxSizing: 'border-box',
   border: '1px solid $gray300',
-  borderRadius: '$md',
+  borderRadius: '$lg',
   outline: 'none',
   '&:focus-within': {
     border: '1px solid $primary400'
   },
   '&:hover': {
-    border: '1px solid $primary400'
+    border: '1px solid $primary600'
   },
   variants: {
     size: {
       sm: {
         height: 'auto',
         minheight: 32,
-        padding: '2px 16px'
+        padding: '2px $spacing-05'
       },
       lg: {
         height: 'auto',
         minheight: 40,
-        padding: '8px 16px'
+        padding: '6px $spacing-05'
       }
     },
     disabled: {
@@ -7885,80 +7678,40 @@ const Select = styled('div', {
     }
   }
 });
+const TagWrapper$1 = styled(Box$1, {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%'
+});
 const InputWrapper = styled('div', {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
   flexWrap: 'wrap',
-  maxWidth: '100%',
-  cursor: 'pointer',
-  variants: {
-    disabled: {
-      true: {
-        cursor: 'not-allowed',
-        color: '$textDisable'
-      }
-    }
-  }
+  maxWidth: '100%'
 });
 const Input$2 = styled('input', {
-  width: '100%',
-  textAlign: 'left',
-  background: 'unset',
-  outline: 'none',
-  border: 'none',
-  cursor: 'text',
-  '&:disabled': {
-    cursor: 'not-allowed'
-  }
-});
-const Button = styled('button', {
   background: 'none',
   outline: 'none',
   border: 'none',
-  color: '$textDisable',
   cursor: 'pointer',
-  width: '100%',
-  textAlign: 'left',
+  color: '$textContent',
   '&:disabled': {
-    cursor: 'not-allowed'
-  } // variants: {
-  //   readOnly: {
-  //     true: { cursor: 'not-allowed' },
-  //   },
-  // },
-
+    cursor: 'not-allowed',
+    color: '$textDisable'
+  }
 });
 const IconWrapper = styled('div', {
   flex: ' 0 0 auto',
   width: 'auto',
   display: 'flex',
   alignItems: 'center',
-  cursor: 'pointer',
-  variants: {
-    disabled: {
-      true: {
-        cursor: 'not-allowed'
-      }
-    },
-    readOnly: {
-      true: {
-        cursor: 'not-allowed'
-      }
-    }
-  }
+  cursor: 'pointer'
 });
 const IconCaretDown = styled(CaretDownOutline, {
   size: '24px'
 });
-const TagWrapper$1 = styled(Box$1, {
-  display: 'flex',
-  position: 'relative',
-  flexWrap: 'wrap',
-  maxWidth: '100%',
-  margin: '10px 0',
-  gap: '5px'
-});
 const OptionWrapper = styled('div', {
   display: 'none',
   overflow: 'hidden',
@@ -7967,36 +7720,20 @@ const OptionWrapper = styled('div', {
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
   width: '100%',
-  // height: '160px',
+  height: '165px',
   position: 'absolute',
   float: 'left',
-  // top: '40px',
+  top: '100%',
   left: '0px',
-  color: '$textPrimary',
-  variants: {
-    placement: {
-      bottom: {
-        top: '100%',
-        left: '0',
-        transform: 'none'
-      },
-      top: {
-        top: '0',
-        left: '0',
-        transform: 'translate(0, -100%)'
-      }
-    }
-  }
+  padding: '0 8px'
 });
 const Option = styled('div', {
   flexDirection: 'column',
   display: 'block',
   borderRadius: '$lg',
+  padding: '12px 16px',
   overflowY: 'auto',
-  height: '100%',
-  padding: '8px 16px',
-  maxHeight: '160px',
-  height: 'auto'
+  height: '100%'
 });
 const ItemWrapper = styled(Box$1, {
   display: 'flex',
@@ -8005,20 +7742,15 @@ const ItemWrapper = styled(Box$1, {
   flexWrap: 'wrap',
   maxWidth: '100%',
   cursor: 'pointer',
-  alignItems: 'center',
-  borderBottom: '1px solid $bgBorder'
+  alignItems: 'center'
 });
 const Item$1 = styled('div', {
   overflow: 'hidden',
-  backgroundColor: '$bgWhite',
+  borderBottom: '1px solid $bgBorder',
+  padding: '8px 0',
+  backgroundColor: 'rgb(235, 245, 255)',
   lineHeight: '20px',
-  marginLeft: '10px',
-  padding: '12px 0'
-});
-const StyledDiv = styled('div', {
-  padding: '6px 0',
-  color: '$textDisable',
-  display: 'inline-flex'
+  marginLeft: '5px'
 });
 function SelectTag({
   placeholder,
@@ -8027,56 +7759,10 @@ function SelectTag({
   size,
   disabled,
   onChange,
-  search,
-  readOnly,
-  placement,
-  valueSelector,
-  textSelector,
-  disabledOptions,
-  textEmptyItem,
   props
 }) {
-  const sortItem = option.sort(function (a, b) {
-    const nameA = a.name.toUpperCase(); // ignore upper and lowercase
-
-    const nameB = b.name.toUpperCase(); // ignore upper and lowercase
-
-    if (nameA < nameB) {
-      return -1;
-    }
-
-    if (nameA > nameB) {
-      return 1;
-    }
-
-    return 0;
-  });
   const [inputValue, setInputValue] = React.useState('');
-  const [item, setItem] = React.useState(sortItem || []);
-  React.useEffect(() => {
-    if (valueSelector) setItem(generateOptions(option, valueSelector, textSelector));
-  }, [option, valueSelector, textSelector]);
-
-  const generateOptions = (data, valueSelector = '', textSelector = '') => {
-    return data.map(option => {
-      if (typeof option === 'object') {
-        const name = textSelector ? option[textSelector] : Object.values(option)[0];
-        const value = valueSelector ? option[valueSelector] : Object.values(option)[1];
-        return {
-          name,
-          value,
-          isDisabled: disabledOptions.length > 0 ? disabledOptions.includes(value) : option.isDisabled
-        };
-      }
-
-      return {
-        name: option,
-        value: option,
-        isDisabled: disabledOptions.includes(option)
-      };
-    });
-  };
-
+  const [item, setItem] = React.useState(option || []);
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -8091,9 +7777,9 @@ function SelectTag({
 
   const handleInputValue = value => {
     if (value === '') {
-      return setItem(sortItem);
+      return setItem(option);
     } else {
-      let filterItems = sortItem.filter(item => item.name.toLowerCase().startsWith(value.toLocaleLowerCase()));
+      let filterItems = option.filter(item => item.name.toLowerCase().startsWith(value.toLocaleLowerCase()));
       setItem(filterItems);
     }
   };
@@ -8111,8 +7797,7 @@ function SelectTag({
     isOpen
   } = useCombobox({
     inputValue,
-    items: item,
-    // items: option,
+    items: option,
     itemToString: item => item ? item.name : '',
     onStateChange: ({
       inputValue,
@@ -8128,14 +7813,13 @@ function SelectTag({
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
         case useCombobox.stateChangeTypes.InputBlur:
+          openMenu();
+
           if (selectedItem) {
             if (selectedItems.includes(selectedItem)) {
-              if (disabled === false && readOnly === false) {
-                removeSelectedItem(selectedItem);
-                selectItem(null);
-              }
+              removeSelectedItem(selectedItem);
+              selectItem(null);
             } else {
-              openMenu();
               addSelectedItem(selectedItem);
               selectItem(null);
             }
@@ -8152,245 +7836,186 @@ function SelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 324,
+      lineNumber: 209,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Select, {
     size: size,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 325,
+      lineNumber: 210,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React.createElement(InputWrapper, _extends({}, getComboboxProps(getDropdownProps({
-    preventKeyAction: isOpen,
-    disabled: disabled || readOnly
-  })), {
-    disabled: disabled || readOnly,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 326,
-      columnNumber: 9
-    }
-  }), search ? /*#__PURE__*/React.createElement(Input$2, _extends({}, getInputProps({
-    disabled: disabled || readOnly
-  }), {
-    placeholder: placeholder,
-    disabled: disabled || readOnly,
+  }, selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(TagWrapper$1, {
+    disabled: disabled,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 331,
-      columnNumber: 13
+      lineNumber: 212,
+      columnNumber: 11
     }
-  })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
-    disabled: disabled || readOnly
+  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: ref,
+    key: `selected-item-${selectedItem.value}`
+  }, getSelectedItemProps({
+    selectedItem,
+    index
   }), {
-    disabled: disabled || readOnly,
-    size: size,
+    onClick: event => {
+      if (disabled === false) {
+        event.stopPropagation();
+        removeSelectedItem(selectedItem);
+      }
+    },
+    rightIcon: /*#__PURE__*/React.createElement(CloseOutline, {
+      size: 10,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$u,
+        lineNumber: 224,
+        columnNumber: 28
+      }
+    }),
+    css: {
+      background: '$bgGray',
+      border: 'none',
+      color: '$textContent',
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 337,
-      columnNumber: 13
+      lineNumber: 214,
+      columnNumber: 15
     }
-  }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
-    disabled: disabled || readOnly
-  }), {
-    disabled: disabled,
-    readOnly: readOnly,
+  }), selectedItem.name))) : null, /*#__PURE__*/React.createElement(InputWrapper, _extends({}, getComboboxProps(getToggleButtonProps({
+    tabIndex: 0
+  })), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 346,
+      lineNumber: 237,
       columnNumber: 9
     }
-  }), /*#__PURE__*/React.createElement(IconCaretDown, {
-    color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary,
+  }), /*#__PURE__*/React.createElement(Input$2, _extends({
+    placeholder: selectedItems.length !== 0 ? '' : placeholder,
+    disabled: disabled
+  }, getInputProps(getDropdownProps({
+    preventKeyAction: isOpen
+  })), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 351,
+      lineNumber: 238,
       columnNumber: 11
     }
-  }))), selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(TagWrapper$1, {
-    disabled: disabled,
+  }))), /*#__PURE__*/React.createElement(IconWrapper, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 355,
+      lineNumber: 244,
       columnNumber: 9
     }
-  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
-    ref: ref,
-    isRemovable: readOnly || disabled ? false : true,
-    disabled: disabled,
-    size: size === 'sm' ? 'lg' : 'sm',
-    readOnly: readOnly,
-    key: `selected-item-${selectedItem.value}`
-  }, getSelectedItemProps({
-    selectedItem,
-    index
-  }), {
-    onRemove: event => {
-      if (disabled === false && readOnly === false) {
-        event.stopPropagation();
-        removeSelectedItem(selectedItem);
-      }
-    },
+  }, /*#__PURE__*/React.createElement(IconCaretDown, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 357,
-      columnNumber: 13
+      lineNumber: 245,
+      columnNumber: 11
     }
-  }), selectedItem.name))) : null, /*#__PURE__*/React.createElement(OptionWrapper, {
-    placement: placement,
+  }))), /*#__PURE__*/React.createElement(OptionWrapper, {
     css: {
-      display: isOpen && disabled === false ? 'block' : 'none',
-      top: size === 'lg' ? '45px' : '35px'
+      display: isOpen && disabled === false ? 'block' : 'none'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 377,
+      lineNumber: 248,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 382,
+      lineNumber: 250,
       columnNumber: 11
     }
   }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper, _extends({
     key: item.value
   }, getItemProps({
     item,
-    index: index,
-    disabled: item.isDisabled
+    index: item.value - 1
   }), {
-    css: {
-      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-      cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-      color: item.isDisabled ? '$textDisable' : 'textPrimary'
-    },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 385,
+      lineNumber: 253,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(IconWrapper, {
     css: {
       width: '16px',
       height: '16px',
-      border: '1px solid $bgBorder',
-      cursor: item.isDisabled ? 'not-allowed' : 'pointer'
+      border: '1px solid $bgBorder'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 398,
+      lineNumber: 260,
       columnNumber: 19
     }
-  }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
-    color: colors.iconDisable,
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 406,
-      columnNumber: 40
-    }
-  }) : null, selectedItems.includes(item) ? /*#__PURE__*/React.createElement(CheckOutline, {
+  }, selectedItems.includes(item) ? /*#__PURE__*/React.createElement(CheckOutline, {
     color: colors.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 407,
+      lineNumber: 261,
       columnNumber: 53
     }
   }) : null), /*#__PURE__*/React.createElement(Item$1, {
     css: {
-      backgroundColor: 'unset' // fontWeight: selectedItems.includes(item) ? 'bold' : 'normal',
-
+      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+      fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 409,
+      lineNumber: 263,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, {
-    css: {
-      height: 'auto'
-    },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 421,
+      lineNumber: 275,
       columnNumber: 11
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 422,
-      columnNumber: 13
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginRight: '6px'
-    },
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$u,
-      lineNumber: 423,
-      columnNumber: 15
-    }
-  }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
-    size: "16px",
-    color: colors.iconDisable,
-    style: {
-      verticalAlign: 'text-bottom'
+  }, /*#__PURE__*/React.createElement(Box$1, {
+    css: {
+      color: '$textDisable'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 424,
-      columnNumber: 17
+      lineNumber: 276,
+      columnNumber: 13
     }
-  })), textEmptyItem))));
+  }, "Item yang anda cari tidak ada"))));
 }
 SelectTag.propTypes = {
   placeholder: PropTypes.string,
   option: PropTypes.array,
   size: PropTypes.string,
   disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
   value: PropTypes.object,
-  onChange: PropTypes.func,
-  search: PropTypes.bool,
-  placement: PropTypes.oneOf(['top', 'bottom']),
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  valueSelector: PropTypes.string,
-  textSelector: PropTypes.string,
-  textEmptyItem: PropTypes.string
+  onChange: PropTypes.func
 };
 SelectTag.defaultProps = {
   placeholder: 'Select Item',
   size: 'lg',
-  disabled: false,
-  readOnly: false,
-  search: true,
-  placement: 'bottom',
-  disabledOptions: [],
-  valueSelector: 'value',
-  textSelector: 'name',
-  textEmptyItem: 'Item tidak ditemukan'
+  disabled: false
 };
 
 const _excluded$f = ["children"];
@@ -9306,7 +8931,75 @@ ButtonGroupItem.defaultProps = {
   isToggle: true
 };
 
-const _excluded$b = ["children", "type"];
+// a string of all valid unicode whitespaces
+var whitespaces$3 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+var uncurryThis$e = functionUncurryThis;
+var requireObjectCoercible$4 = requireObjectCoercible$a;
+var toString$7 = toString$d;
+var whitespaces$2 = whitespaces$3;
+
+var replace$4 = uncurryThis$e(''.replace);
+var whitespace = '[' + whitespaces$2 + ']';
+var ltrim = RegExp('^' + whitespace + whitespace + '*');
+var rtrim = RegExp(whitespace + whitespace + '*$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod$1 = function (TYPE) {
+  return function ($this) {
+    var string = toString$7(requireObjectCoercible$4($this));
+    if (TYPE & 1) string = replace$4(string, ltrim, '');
+    if (TYPE & 2) string = replace$4(string, rtrim, '');
+    return string;
+  };
+};
+
+var stringTrim = {
+  // `String.prototype.{ trimLeft, trimStart }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+  start: createMethod$1(1),
+  // `String.prototype.{ trimRight, trimEnd }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+  end: createMethod$1(2),
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod$1(3)
+};
+
+var global$d = global$J;
+var fails$7 = fails$m;
+var uncurryThis$d = functionUncurryThis;
+var toString$6 = toString$d;
+var trim$1 = stringTrim.trim;
+var whitespaces$1 = whitespaces$3;
+
+var $parseInt$1 = global$d.parseInt;
+var Symbol$2 = global$d.Symbol;
+var ITERATOR$5 = Symbol$2 && Symbol$2.iterator;
+var hex = /^[+-]?0x/i;
+var exec$4 = uncurryThis$d(hex.exec);
+var FORCED$2 = $parseInt$1(whitespaces$1 + '08') !== 8 || $parseInt$1(whitespaces$1 + '0x16') !== 22
+  // MS Edge 18- broken with boxed symbols
+  || (ITERATOR$5 && !fails$7(function () { $parseInt$1(Object(ITERATOR$5)); }));
+
+// `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));
+  return $parseInt$1(S, (radix >>> 0) || (exec$4(hex, S) ? 16 : 10));
+} : $parseInt$1;
+
+var $$4 = _export;
+var $parseInt = numberParseInt;
+
+// `parseInt` method
+// https://tc39.es/ecma262/#sec-parseint-string-radix
+$$4({ global: true, forced: parseInt != $parseInt }, {
+  parseInt: $parseInt
+});
+
+const _excluded$b = ["children"];
 var _jsxFileName$p = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
@@ -9401,45 +9094,38 @@ const NotificationBadgeStyle = styled('span', {
 });
 
 const NotificationBadge = _ref => {
-  var _typeBadge$type;
-
   let {
-    children,
-    type
+    children
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
-  const typeBadge = {
-    default: '',
-    increase: '+',
-    decrease: '-'
-  };
-
   const getValue = () => {
     let value = props === null || props === void 0 ? void 0 : props.value;
 
-    if (type === 'increase' || type === 'decrease') {
-      return Math.abs(value) > 99 ? 99 : Math.abs(value);
+    if (typeof value === 'number' || parseInt(value)) {
+      if (Math.sign(value) === 1 || Math.sign(value) === 0) {
+        return value > 99 ? '+99' : value;
+      } else {
+        return value < -99 ? -99 : value;
+      }
     }
-
-    return value;
   };
 
   return /*#__PURE__*/React__default.createElement(NotificationBadgeRootStyle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 103,
+      lineNumber: 106,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React__default.createElement(NotificationBadgeStyle, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 105,
+      lineNumber: 108,
       columnNumber: 7
     }
-  }), (_typeBadge$type = typeBadge[type]) != null ? _typeBadge$type : '', props.value && getValue()));
+  }), props.value && getValue()));
 };
 
 NotificationBadge.defaultProps = {
@@ -9447,14 +9133,12 @@ NotificationBadge.defaultProps = {
   anchorVertical: 'top',
   variant: 'important',
   value: undefined,
-  type: 'default',
   dot: false
 };
 NotificationBadge.propTypes = {
   anchorHorizontal: PropTypes.oneOf(['left', 'right']),
   anchorVertical: PropTypes.oneOf(['top', 'bottom']),
   variant: PropTypes.oneOf(['info', 'important', 'warning', 'success']),
-  type: PropTypes.oneOf(['default', 'increase', 'decrease']),
   value: PropTypes.number,
   dot: PropTypes.bool
 };
@@ -10984,7 +10668,7 @@ const CalendarBox = ({
         lineNumber: 560,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default.createElement(Button$2, {
+    }, /*#__PURE__*/React__default.createElement(Button$1, {
       buttonType: "ghost",
       css: {
         fontWeight: 600
@@ -10998,7 +10682,7 @@ const CalendarBox = ({
         lineNumber: 561,
         columnNumber: 13
       }
-    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
+    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$1, {
       css: {
         fontWeight: 600
       },
@@ -11731,7 +11415,7 @@ const MobileCalendarBox = ({
         lineNumber: 521,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__default.createElement(Button$2, {
+    }, /*#__PURE__*/React__default.createElement(Button$1, {
       buttonType: "ghost",
       size: "lg",
       css: {
@@ -11748,7 +11432,7 @@ const MobileCalendarBox = ({
         lineNumber: 522,
         columnNumber: 11
       }
-    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
+    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$1, {
       size: "lg",
       css: {
         width: '160px',
@@ -11841,7 +11525,7 @@ const Time = styled('p', {
     }
   }
 });
-const Container$1 = styled(Flex$1, {
+const Container = styled(Flex$1, {
   borderRadius: 8,
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
   width: 200,
@@ -12029,7 +11713,7 @@ const TimePicker = ({
   defaultValue,
   value
 }) => {
-  return /*#__PURE__*/React__default.createElement(Container$1, {
+  return /*#__PURE__*/React__default.createElement(Container, {
     size: size,
     direction: "column",
     gap: 3,
@@ -12436,6 +12120,12 @@ function InputDatePicker({
     selectedDate: defaultDate != null ? defaultDate : date
   });
   const [openPicker, setOpenPicker] = useState(false);
+  useEffect(() => {
+    dispatch({
+      type: UPDATE,
+      payload: date
+    });
+  }, [date]);
   const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
   const renderInputGroup = () => /*#__PURE__*/React__default.createElement(InputGroup, {
@@ -12444,7 +12134,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 115,
+      lineNumber: 120,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
@@ -12452,14 +12142,14 @@ function InputDatePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 116,
+        lineNumber: 121,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 116,
+      lineNumber: 121,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, {
@@ -12468,10 +12158,11 @@ function InputDatePicker({
     onChange: () => {},
     defaultValue: defaultDate,
     isDatePicker: true,
+    tabIndex: "-1",
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 117,
+      lineNumber: 122,
       columnNumber: 7
     }
   }));
@@ -12486,7 +12177,7 @@ function InputDatePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 131,
+        lineNumber: 137,
         columnNumber: 11
       }
     }) : {
@@ -12497,19 +12188,19 @@ function InputDatePicker({
     date: date ? date === null || date === void 0 ? void 0 : date[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
     selected: selectedDate,
     multiDatePicker: type !== SINGLE_PICKER,
-    onChange: date => {
+    onChange: value => {
       dispatch({
         type: 'UPDATE',
-        payload: date
+        payload: value
       });
-      if (onChange) onChange(date);
+      if (onChange) onChange(value);
     },
     onClose: () => setOpenPicker(false),
     showTimePicker: showTimePicker,
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 127,
+      lineNumber: 133,
       columnNumber: 5
     }
   });
@@ -12521,14 +12212,14 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 150,
+      lineNumber: 156,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 151,
+      lineNumber: 157,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -12536,14 +12227,14 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 152,
+      lineNumber: 158,
       columnNumber: 9
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 154,
+      lineNumber: 160,
       columnNumber: 7
     }
   }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -12551,7 +12242,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 158,
+      lineNumber: 164,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -12561,7 +12252,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 159,
+      lineNumber: 165,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -12572,7 +12263,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$f,
-      lineNumber: 160,
+      lineNumber: 166,
       columnNumber: 9
     }
   }, renderDatePicker())));
@@ -12599,19 +12290,19 @@ const removeUndefinedFields = obj => {
   return newObj;
 };
 
-var uncurryThis$d = functionUncurryThis;
+var uncurryThis$c = functionUncurryThis;
 var PROPER_FUNCTION_NAME = functionName.PROPER;
 var redefine$3 = redefine$8.exports;
 var anObject$7 = anObject$g;
 var isPrototypeOf$1 = objectIsPrototypeOf;
 var $toString$2 = toString$d;
-var fails$6 = fails$n;
+var fails$6 = fails$m;
 var regExpFlags = regexpFlags$1;
 
 var TO_STRING = 'toString';
 var RegExpPrototype = RegExp.prototype;
 var n$ToString = RegExpPrototype[TO_STRING];
-var getFlags = uncurryThis$d(regExpFlags);
+var getFlags = uncurryThis$c(regExpFlags);
 
 var NOT_GENERIC = fails$6(function () { return n$ToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
 // FF44- RegExp#toString has a wrong name
@@ -12658,7 +12349,7 @@ const PageButton = _ref => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
-  return /*#__PURE__*/React__default.createElement(Button$2, _extends({
+  return /*#__PURE__*/React__default.createElement(Button$1, _extends({
     onClick: onClick,
     buttonType: !isActive ? 'ghost' : 'primary',
     css: {
@@ -13006,6 +12697,7 @@ function PaginationInfo(_ref) {
       columnNumber: 11
     }
   }, limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
+    key: limit,
     css: limitItemContainerStyle(selectedLimit === limit),
     onClick: () => onChange(limit),
     __self: this,
@@ -13019,7 +12711,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 50,
+      lineNumber: 54,
       columnNumber: 17
     }
   }, limit.toString())))))), /*#__PURE__*/React__default.createElement(Text$1, {
@@ -13028,7 +12720,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 56,
+      lineNumber: 60,
       columnNumber: 7
     }
   }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1}-${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
@@ -13721,26 +13413,27 @@ function Table({
     prepareRow(row);
     const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
     const leftAddOnCells = (_row$cells$filter = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) != null ? _row$cells$filter : [];
+    const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: row.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 343,
+        lineNumber: 346,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, row.getRowProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 344,
+        lineNumber: 347,
         columnNumber: 17
       }
     }), row.cells.filter(cell => !cell.column.isSubRow).map(cell => /*#__PURE__*/React__default.createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 348,
+        lineNumber: 351,
         columnNumber: 23
       }
     }), cell.render('Cell')))), row.isExpanded ? subRowCells.map(cell => /*#__PURE__*/React__default.createElement(TableRow, {
@@ -13749,7 +13442,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 355,
+        lineNumber: 358,
         columnNumber: 23
       }
     }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
@@ -13757,7 +13450,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 357,
+        lineNumber: 360,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -13765,16 +13458,21 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 359,
+        lineNumber: 362,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(TableCell, {
       subCell: true,
+      colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
       headerSubCell: true,
+      css: {
+        paddingTop: '$spacing-03 !important',
+        paddingBottom: '$spacing-03 !important'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 360,
+        lineNumber: 363,
         columnNumber: 27
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13782,16 +13480,20 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 361,
+        lineNumber: 372,
         columnNumber: 29
       }
     }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell, {
       subCell: true,
       colSpan: visibleColumns.length - subRowCells.length,
+      css: {
+        paddingTop: '$spacing-03 !important',
+        paddingBottom: '$spacing-03 !important'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 363,
+        lineNumber: 374,
         columnNumber: 27
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13799,7 +13501,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 364,
+        lineNumber: 382,
         columnNumber: 29
       }
     }, cell.render('Cell')))))) : null);
@@ -13807,14 +13509,14 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 374,
+      lineNumber: 392,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 375,
+      lineNumber: 393,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
@@ -13822,7 +13524,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 376,
+      lineNumber: 394,
       columnNumber: 13
     }
   }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -13834,7 +13536,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 380,
+      lineNumber: 398,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -13843,7 +13545,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 387,
+      lineNumber: 405,
       columnNumber: 19
     }
   }, emptyDataMessage || 'Tidak ada data'))))))) : /*#__PURE__*/React__default.createElement(MobileTable, {
@@ -13853,7 +13555,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 398,
+      lineNumber: 416,
       columnNumber: 5
     }
   });
@@ -13906,23 +13608,23 @@ DateColumn.defaultProps = {
   value: undefined
 };
 
-var uncurryThis$c = functionUncurryThis;
+var uncurryThis$b = functionUncurryThis;
 
 // `thisNumberValue` abstract operation
 // https://tc39.es/ecma262/#sec-thisnumbervalue
-var thisNumberValue$1 = uncurryThis$c(1.0.valueOf);
+var thisNumberValue$1 = uncurryThis$b(1.0.valueOf);
 
-var global$b = global$I;
+var global$c = global$J;
 var toIntegerOrInfinity$3 = toIntegerOrInfinity$6;
-var toString$6 = toString$d;
-var requireObjectCoercible$4 = requireObjectCoercible$a;
+var toString$5 = toString$d;
+var requireObjectCoercible$3 = requireObjectCoercible$a;
 
-var RangeError$2 = global$b.RangeError;
+var RangeError$2 = global$c.RangeError;
 
 // `String.prototype.repeat` method implementation
 // https://tc39.es/ecma262/#sec-string.prototype.repeat
 var stringRepeat = function repeat(count) {
-  var str = toString$6(requireObjectCoercible$4(this));
+  var str = toString$5(requireObjectCoercible$3(this));
   var result = '';
   var n = toIntegerOrInfinity$3(count);
   if (n < 0 || n == Infinity) throw RangeError$2('Wrong number of repetitions');
@@ -13931,19 +13633,19 @@ var stringRepeat = function repeat(count) {
 };
 
 var $$3 = _export;
-var global$a = global$I;
-var uncurryThis$b = functionUncurryThis;
+var global$b = global$J;
+var uncurryThis$a = functionUncurryThis;
 var toIntegerOrInfinity$2 = toIntegerOrInfinity$6;
 var thisNumberValue = thisNumberValue$1;
 var $repeat = stringRepeat;
-var fails$5 = fails$n;
+var fails$5 = fails$m;
 
-var RangeError$1 = global$a.RangeError;
-var String$1 = global$a.String;
-var floor$3 = Math.floor;
-var repeat = uncurryThis$b($repeat);
-var stringSlice$6 = uncurryThis$b(''.slice);
-var un$ToFixed = uncurryThis$b(1.0.toFixed);
+var RangeError$1 = global$b.RangeError;
+var String$1 = global$b.String;
+var floor$4 = Math.floor;
+var repeat = uncurryThis$a($repeat);
+var stringSlice$6 = uncurryThis$a(''.slice);
+var un$ToFixed = uncurryThis$a(1.0.toFixed);
 
 var pow$1 = function (x, n, acc) {
   return n === 0 ? acc : n % 2 === 1 ? pow$1(x, n - 1, acc * x) : pow$1(x * x, n / 2, acc);
@@ -13968,7 +13670,7 @@ var multiply = function (data, n, c) {
   while (++index < 6) {
     c2 += n * data[index];
     data[index] = c2 % 1e7;
-    c2 = floor$3(c2 / 1e7);
+    c2 = floor$4(c2 / 1e7);
   }
 };
 
@@ -13977,7 +13679,7 @@ var divide = function (data, n) {
   var c = 0;
   while (--index >= 0) {
     c += data[index];
-    data[index] = floor$3(c / n);
+    data[index] = floor$4(c / n);
     c = (c % n) * 1e7;
   }
 };
@@ -14062,52 +13764,16 @@ $$3({ target: 'Number', proto: true, forced: FORCED$1 }, {
   }
 });
 
-// a string of all valid unicode whitespaces
-var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
-  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
-
-var uncurryThis$a = functionUncurryThis;
-var requireObjectCoercible$3 = requireObjectCoercible$a;
-var toString$5 = toString$d;
-var whitespaces$1 = whitespaces$2;
-
-var replace$4 = uncurryThis$a(''.replace);
-var whitespace = '[' + whitespaces$1 + ']';
-var ltrim = RegExp('^' + whitespace + whitespace + '*');
-var rtrim = RegExp(whitespace + whitespace + '*$');
-
-// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
-var createMethod$1 = function (TYPE) {
-  return function ($this) {
-    var string = toString$5(requireObjectCoercible$3($this));
-    if (TYPE & 1) string = replace$4(string, ltrim, '');
-    if (TYPE & 2) string = replace$4(string, rtrim, '');
-    return string;
-  };
-};
-
-var stringTrim = {
-  // `String.prototype.{ trimLeft, trimStart }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
-  start: createMethod$1(1),
-  // `String.prototype.{ trimRight, trimEnd }` methods
-  // https://tc39.es/ecma262/#sec-string.prototype.trimend
-  end: createMethod$1(2),
-  // `String.prototype.trim` method
-  // https://tc39.es/ecma262/#sec-string.prototype.trim
-  trim: createMethod$1(3)
-};
-
-var global$9 = global$I;
-var fails$4 = fails$n;
+var global$a = global$J;
+var fails$4 = fails$m;
 var uncurryThis$9 = functionUncurryThis;
 var toString$4 = toString$d;
 var trim = stringTrim.trim;
-var whitespaces = whitespaces$2;
+var whitespaces = whitespaces$3;
 
 var charAt$6 = uncurryThis$9(''.charAt);
-var n$ParseFloat = global$9.parseFloat;
-var Symbol$1 = global$9.Symbol;
+var n$ParseFloat = global$a.parseFloat;
+var Symbol$1 = global$a.Symbol;
 var ITERATOR$4 = Symbol$1 && Symbol$1.iterator;
 var FORCED = 1 / n$ParseFloat(whitespaces + '-0') !== -Infinity
   // MS Edge 18- broken with boxed symbols
@@ -14142,7 +13808,7 @@ var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$
 });
 
 var uncurryThis$8 = functionUncurryThis;
-var fails$3 = fails$n;
+var fails$3 = fails$m;
 var isCallable$2 = isCallable$j;
 var classof$2 = classof$6;
 var getBuiltIn$1 = getBuiltIn$6;
@@ -14194,11 +13860,11 @@ var isConstructor$2 = !construct || fails$3(function () {
     || called;
 }) ? isConstructorLegacy : isConstructorModern;
 
-var global$8 = global$I;
+var global$9 = global$J;
 var isConstructor$1 = isConstructor$2;
 var tryToString$1 = tryToString$3;
 
-var TypeError$6 = global$8.TypeError;
+var TypeError$6 = global$9.TypeError;
 
 // `Assert: IsConstructor(argument) is true`
 var aConstructor$1 = function (argument) {
@@ -14265,6 +13931,34 @@ var advanceStringIndex$2 = function (S, index, unicode) {
   return index + (unicode ? charAt$4(S, index).length : 1);
 };
 
+var toPropertyKey = toPropertyKey$3;
+var definePropertyModule = objectDefineProperty;
+var createPropertyDescriptor$1 = createPropertyDescriptor$5;
+
+var createProperty$2 = function (object, key, value) {
+  var propertyKey = toPropertyKey(key);
+  if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor$1(0, value));
+  else object[propertyKey] = value;
+};
+
+var global$8 = global$J;
+var toAbsoluteIndex = toAbsoluteIndex$2;
+var lengthOfArrayLike$1 = lengthOfArrayLike$3;
+var createProperty$1 = createProperty$2;
+
+var Array$2 = global$8.Array;
+var max$1 = Math.max;
+
+var arraySliceSimple = function (O, start, end) {
+  var length = lengthOfArrayLike$1(O);
+  var k = toAbsoluteIndex(start, length);
+  var fin = toAbsoluteIndex(end === undefined ? length : end, length);
+  var result = Array$2(max$1(fin - k, 0));
+  for (var n = 0; k < fin; k++, n++) createProperty$1(result, n, O[k]);
+  result.length = n;
+  return result;
+};
+
 var apply$1 = functionApply;
 var call$5 = functionCall;
 var uncurryThis$6 = functionUncurryThis;
@@ -14277,11 +13971,11 @@ var advanceStringIndex$1 = advanceStringIndex$2;
 var toLength$1 = toLength$4;
 var toString$2 = toString$d;
 var getMethod$3 = getMethod$6;
-var arraySlice$1 = arraySliceSimple;
+var arraySlice$2 = arraySliceSimple;
 var callRegExpExec = regexpExecAbstract;
 var regexpExec = regexpExec$3;
 var stickyHelpers = regexpStickyHelpers;
-var fails$2 = fails$n;
+var fails$2 = fails$m;
 
 var UNSUPPORTED_Y = stickyHelpers.UNSUPPORTED_Y;
 var MAX_UINT32 = 0xFFFFFFFF;
@@ -14338,7 +14032,7 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
         lastIndex = separatorCopy.lastIndex;
         if (lastIndex > lastLastIndex) {
           push$4(output, stringSlice$4(string, lastLastIndex, match.index));
-          if (match.length > 1 && match.index < string.length) apply$1($push, output, arraySlice$1(match, 1));
+          if (match.length > 1 && match.index < string.length) apply$1($push, output, arraySlice$2(match, 1));
           lastLength = match[0].length;
           lastLastIndex = lastIndex;
           if (output.length >= lim) break;
@@ -14348,7 +14042,7 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
       if (lastLastIndex === string.length) {
         if (lastLength || !exec$2(separatorCopy, '')) push$4(output, '');
       } else push$4(output, stringSlice$4(string, lastLastIndex));
-      return output.length > lim ? arraySlice$1(output, 0, lim) : output;
+      return output.length > lim ? arraySlice$2(output, 0, lim) : output;
     };
   // Chakra, V8
   } else if ('0'.split(undefined, 0).length) {
@@ -14422,9 +14116,9 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
 }, !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC, UNSUPPORTED_Y);
 
 var uncurryThis$5 = functionUncurryThis;
-var toObject$1 = toObject$6;
+var toObject$1 = toObject$5;
 
-var floor$2 = Math.floor;
+var floor$3 = Math.floor;
 var charAt$3 = uncurryThis$5(''.charAt);
 var replace$3 = uncurryThis$5(''.replace);
 var stringSlice$3 = uncurryThis$5(''.slice);
@@ -14455,7 +14149,7 @@ var getSubstitution$1 = function (matched, str, position, captures, namedCapture
         var n = +ch;
         if (n === 0) return match;
         if (n > m) {
-          var f = floor$2(n / 10);
+          var f = floor$3(n / 10);
           if (f === 0) return match;
           if (f <= m) return captures[f - 1] === undefined ? charAt$3(ch, 1) : captures[f - 1] + charAt$3(ch, 1);
           return match;
@@ -14470,7 +14164,7 @@ var apply = functionApply;
 var call$4 = functionCall;
 var uncurryThis$4 = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
-var fails$1 = fails$n;
+var fails$1 = fails$m;
 var anObject$4 = anObject$g;
 var isCallable$1 = isCallable$j;
 var toIntegerOrInfinity = toIntegerOrInfinity$6;
@@ -14785,7 +14479,7 @@ const rowMenuColumn = options => ({
         lineNumber: 27,
         columnNumber: 11
       }
-    }, options.map(option => /*#__PURE__*/React__default.createElement(Button$2, {
+    }, options.map(option => /*#__PURE__*/React__default.createElement(Button$1, {
       key: option.title,
       buttonType: "tableMenu",
       onClick: () => {
@@ -15046,7 +14740,7 @@ const PageDialog = _ref => {
       lineNumber: 121,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Image$1, {
+  }, /*#__PURE__*/React__default.createElement(Image, {
     src: img,
     __self: undefined,
     __source: {
@@ -15275,26 +14969,161 @@ function Content(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 65,
+      lineNumber: 66,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 66,
+      lineNumber: 67,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 67,
+      lineNumber: 68,
       columnNumber: 7
     }
   }), children));
 }
 
+function AlertDialogFunction(properties) {
+  let props = properties;
+
+  this.show = function () {
+    ReactDOM.render( /*#__PURE__*/React__default.createElement(React__default.StrictMode, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 77,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 78,
+        columnNumber: 9
+      }
+    }))), document.getElementById('a-dialog'));
+  };
+}
+
+const TemplateAlertFunction = props => {
+  const [open, setOpen] = React__default.useState(true);
+  const onCancelFunc = props.onCancel ? props.onCancel : () => {};
+  const onConfirmFunc = props.onConfirm ? props.onConfirm : () => {};
+
+  const buttonCancel = () => {
+    onCancelFunc();
+    setOpen(false);
+    ReactDOM.unmountComponentAtNode(document.getElementById('a-dialog'));
+  };
+
+  const buttonConfirm = () => {
+    onConfirmFunc();
+    setOpen(false);
+    ReactDOM.unmountComponentAtNode(document.getElementById('a-dialog'));
+  };
+
+  return /*#__PURE__*/React__default.createElement(ADialog.Root, _extends({
+    open: open
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 104,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__default.createElement(Content, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 105,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledTitle, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 106,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(Heading, {
+    heading: "pageTitle",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 107,
+      columnNumber: 11
+    }
+  }, props.title)), /*#__PURE__*/React__default.createElement(StyledDescription, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 109,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 110,
+      columnNumber: 11
+    }
+  }, props.description)), /*#__PURE__*/React__default.createElement(Flex, {
+    css: {
+      gap: 10,
+      justifyContent: 'flex-end'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 112,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+    asChild: true,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 113,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: buttonCancel,
+    css: {
+      color: props.dialogType === 'negative' && '$gray900 !important'
+    },
+    buttonType: "ghost",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 114,
+      columnNumber: 13
+    }
+  }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
+    asChild: true,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 122,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: buttonConfirm,
+    buttonType: props.dialogType,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 123,
+      columnNumber: 13
+    }
+  }, props.labelConfirm ? props.labelConfirm : 'Confirm')))));
+};
+
 function AlertDialog(props) {
   return /*#__PURE__*/React__default.createElement(ADialog.Root, _extends({
     open: props.open
@@ -15302,21 +15131,21 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 74,
+      lineNumber: 134,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Content, {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 78,
+      lineNumber: 135,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 79,
+      lineNumber: 136,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -15324,21 +15153,21 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 80,
+      lineNumber: 137,
       columnNumber: 11
     }
   }, props.title)), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 82,
+      lineNumber: 139,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 83,
+      lineNumber: 140,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Flex, {
@@ -15349,7 +15178,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 85,
+      lineNumber: 142,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -15357,10 +15186,10 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 86,
+      lineNumber: 143,
       columnNumber: 11
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
     onClick: props.onCancel,
     css: {
       color: props.dialogType === 'negative' && '$gray900 !important'
@@ -15369,27 +15198,27 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 87,
+      lineNumber: 144,
       columnNumber: 13
     }
-  }, props.labelCancel)), /*#__PURE__*/React__default.createElement(ADialog.Action, {
+  }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
     asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 95,
+      lineNumber: 152,
       columnNumber: 11
     }
-  }, /*#__PURE__*/React__default.createElement(Button$2, {
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
     onClick: props.onConfirm,
     buttonType: props.dialogType,
     __self: this,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 96,
+      lineNumber: 153,
       columnNumber: 13
     }
-  }, props.labelConfirm)))));
+  }, props.labelConfirm ? props.labelConfirm : 'Confirm')))));
 }
 AlertDialog.propTypes = {
   title: string.isRequired,
@@ -15669,7 +15498,7 @@ defineIterator(String, 'String', function (iterated) {
   return { value: point, done: false };
 });
 
-var fails = fails$n;
+var fails = fails$m;
 var wellKnownSymbol$3 = wellKnownSymbol$h;
 var IS_PURE = isPure;
 
@@ -15705,7 +15534,7 @@ var nativeUrl = !fails(function () {
 });
 
 var uncurryThis$3 = functionUncurryThis;
-var aCallable$1 = aCallable$4;
+var aCallable$1 = aCallable$3;
 var NATIVE_BIND = functionBindNative;
 
 var bind$3 = uncurryThis$3(uncurryThis$3.bind);
@@ -15718,7 +15547,7 @@ var functionBindContext = function (fn, that) {
   };
 };
 
-var global$7 = global$I;
+var global$7 = global$J;
 var isPrototypeOf = objectIsPrototypeOf;
 
 var TypeError$5 = global$7.TypeError;
@@ -15788,9 +15617,9 @@ var getIteratorMethod$3 = function (it) {
     || Iterators[classof$1(it)];
 };
 
-var global$6 = global$I;
+var global$6 = global$J;
 var call$2 = functionCall;
-var aCallable = aCallable$4;
+var aCallable = aCallable$3;
 var anObject$1 = anObject$g;
 var tryToString = tryToString$3;
 var getIteratorMethod$2 = getIteratorMethod$3;
@@ -15803,14 +15632,14 @@ var getIterator$2 = function (argument, usingIterator) {
   throw TypeError$4(tryToString(argument) + ' is not iterable');
 };
 
-var global$5 = global$I;
+var global$5 = global$J;
 var bind$2 = functionBindContext;
 var call$1 = functionCall;
-var toObject = toObject$6;
+var toObject = toObject$5;
 var callWithSafeIterationClosing = callWithSafeIterationClosing$1;
 var isArrayIteratorMethod = isArrayIteratorMethod$1;
 var isConstructor = isConstructor$2;
-var lengthOfArrayLike = lengthOfArrayLike$4;
+var lengthOfArrayLike = lengthOfArrayLike$3;
 var createProperty = createProperty$2;
 var getIterator$1 = getIterator$2;
 var getIteratorMethod$1 = getIteratorMethod$3;
@@ -15851,7 +15680,7 @@ var arrayFrom$1 = function from(arrayLike /* , mapfn = undefined, thisArg = unde
 };
 
 // based on https://github.com/bestiejs/punycode.js/blob/master/punycode.js
-var global$4 = global$I;
+var global$4 = global$J;
 var uncurryThis$2 = functionUncurryThis;
 
 var maxInt = 2147483647; // aka. 0x7FFFFFFF or 2^31-1
@@ -15870,7 +15699,7 @@ var baseMinusTMin = base - tMin;
 
 var RangeError = global$4.RangeError;
 var exec$1 = uncurryThis$2(regexSeparators.exec);
-var floor$1 = Math.floor;
+var floor$2 = Math.floor;
 var fromCharCode = String.fromCharCode;
 var charCodeAt = uncurryThis$2(''.charCodeAt);
 var join$2 = uncurryThis$2([].join);
@@ -15925,13 +15754,13 @@ var digitToBasic = function (digit) {
  */
 var adapt = function (delta, numPoints, firstTime) {
   var k = 0;
-  delta = firstTime ? floor$1(delta / damp) : delta >> 1;
-  delta += floor$1(delta / numPoints);
+  delta = firstTime ? floor$2(delta / damp) : delta >> 1;
+  delta += floor$2(delta / numPoints);
   while (delta > baseMinusTMin * tMax >> 1) {
-    delta = floor$1(delta / baseMinusTMin);
+    delta = floor$2(delta / baseMinusTMin);
     k += base;
   }
-  return floor$1(k + (baseMinusTMin + 1) * delta / (delta + skew));
+  return floor$2(k + (baseMinusTMin + 1) * delta / (delta + skew));
 };
 
 /**
@@ -15982,7 +15811,7 @@ var encode = function (input) {
 
     // Increase `delta` enough to advance the decoder's <n,i> state to <m,0>, but guard against overflow.
     var handledCPCountPlusOne = handledCPCount + 1;
-    if (m - n > floor$1((maxInt - delta) / handledCPCountPlusOne)) {
+    if (m - n > floor$2((maxInt - delta) / handledCPCountPlusOne)) {
       throw RangeError(OVERFLOW_ERROR);
     }
 
@@ -16004,7 +15833,7 @@ var encode = function (input) {
           var qMinusT = q - t;
           var baseMinusT = base - t;
           push$2(output, fromCharCode(digitToBasic(t + qMinusT % baseMinusT)));
-          q = floor$1(qMinusT / baseMinusT);
+          q = floor$2(qMinusT / baseMinusT);
           k += base;
         }
 
@@ -16032,7 +15861,7 @@ var stringPunycodeToAscii = function (input) {
   return join$2(encoded, '.');
 };
 
-var global$3 = global$I;
+var global$3 = global$J;
 
 var TypeError$3 = global$3.TypeError;
 
@@ -16048,10 +15877,55 @@ var redefineAll$1 = function (target, src, options) {
   return target;
 };
 
+var arraySlice$1 = arraySliceSimple;
+
+var floor$1 = Math.floor;
+
+var mergeSort = function (array, comparefn) {
+  var length = array.length;
+  var middle = floor$1(length / 2);
+  return length < 8 ? insertionSort(array, comparefn) : merge(
+    array,
+    mergeSort(arraySlice$1(array, 0, middle), comparefn),
+    mergeSort(arraySlice$1(array, middle), comparefn),
+    comparefn
+  );
+};
+
+var insertionSort = function (array, comparefn) {
+  var length = array.length;
+  var i = 1;
+  var element, j;
+
+  while (i < length) {
+    j = i;
+    element = array[i];
+    while (j && comparefn(array[j - 1], element) > 0) {
+      array[j] = array[--j];
+    }
+    if (j !== i++) array[j] = element;
+  } return array;
+};
+
+var merge = function (array, left, right, comparefn) {
+  var llength = left.length;
+  var rlength = right.length;
+  var lindex = 0;
+  var rindex = 0;
+
+  while (lindex < llength || rindex < rlength) {
+    array[lindex + rindex] = (lindex < llength && rindex < rlength)
+      ? comparefn(left[lindex], right[rindex]) <= 0 ? left[lindex++] : right[rindex++]
+      : lindex < llength ? left[lindex++] : right[rindex++];
+  } return array;
+};
+
+var arraySort$1 = mergeSort;
+
 // TODO: in core-js@4, move /modules/ dependencies to public entries for better optimization by tools like `preset-env`
 
 var $$1 = _export;
-var global$2 = global$I;
+var global$2 = global$J;
 var getBuiltIn = getBuiltIn$6;
 var call = functionCall;
 var uncurryThis$1 = functionUncurryThis;
@@ -16436,7 +16310,7 @@ var web_urlSearchParams = {
 var $ = _export;
 var DESCRIPTORS = descriptors;
 var USE_NATIVE_URL = nativeUrl;
-var global$1 = global$I;
+var global$1 = global$J;
 var bind = functionBindContext;
 var uncurryThis = functionUncurryThis;
 var defineProperties = objectDefineProperties.f;
@@ -16461,7 +16335,7 @@ var getInternalSearchParamsState = URLSearchParamsModule.getState;
 
 var NativeURL = global$1.URL;
 var TypeError$1 = global$1.TypeError;
-var parseInt = global$1.parseInt;
+var parseInt$1 = global$1.parseInt;
 var floor = Math.floor;
 var pow = Math.pow;
 var charAt = uncurryThis(''.charAt);
@@ -16520,7 +16394,7 @@ var parseIPv4 = function (input) {
       number = 0;
     } else {
       if (!exec(radix == 10 ? DEC : radix == 8 ? OCT : HEX, part)) return input;
-      number = parseInt(part, radix);
+      number = parseInt$1(part, radix);
     }
     push(numbers, number);
   }
@@ -16567,7 +16441,7 @@ var parseIPv6 = function (input) {
     }
     value = length = 0;
     while (length < 4 && exec(HEX, chr())) {
-      value = value * 16 + parseInt(chr(), 16);
+      value = value * 16 + parseInt$1(chr(), 16);
       pointer++;
       length++;
     }
@@ -16584,7 +16458,7 @@ var parseIPv6 = function (input) {
         }
         if (!exec(DIGIT, chr())) return;
         while (exec(DIGIT, chr())) {
-          number = parseInt(chr(), 10);
+          number = parseInt$1(chr(), 10);
           if (ipv4Piece === null) ipv4Piece = number;
           else if (ipv4Piece == 0) return;
           else ipv4Piece = ipv4Piece * 10 + number;
@@ -17009,7 +16883,7 @@ URLState.prototype = {
             stateOverride
           ) {
             if (buffer != '') {
-              var port = parseInt(buffer, 10);
+              var port = parseInt$1(buffer, 10);
               if (port > 0xFFFF) return INVALID_PORT;
               url.port = (url.isSpecial() && port === specialSchemes[url.scheme]) ? null : port;
               buffer = '';
@@ -17479,45 +17353,6 @@ var _jsxFileName$1 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\u
 const Input = styled('input', {
   display: 'none'
 });
-const ContainerUpload = styled('div', {
-  border: '2px dashed $gray300',
-  borderRadius: 8,
-  height: 200,
-  width: 200,
-  cursor: 'pointer',
-  transition: '0.2s',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  '&:hover': {
-    border: '2px dashed $primary400',
-    background: '$bgSuccess'
-  },
-  variants: {
-    showError: {
-      true: {
-        border: '2px dashed $red400',
-        '&:hover': {
-          border: '2px dashed  $red300',
-          background: '$bgFailed'
-        }
-      }
-    }
-  }
-});
-const Container = styled('div', {
-  height: 200,
-  width: 200,
-  background: '$white',
-  borderRadius: 8,
-  position: 'relative'
-});
-const Image = styled('img', {
-  borderRadius: 8,
-  width: 200,
-  height: 164,
-  objectFit: 'cover'
-});
 const Children = styled('div', {
   display: 'flex',
   justifyContent: 'center',
@@ -17563,12 +17398,6 @@ const ButtonText = styled('button', {
     background: '$bgSuccess'
   }
 });
-const Blank = styled('div', {
-  borderRadius: 8,
-  width: 200,
-  height: 164,
-  background: 'rgba(39, 42, 42, 0.6);'
-});
 const CloseIcon = styled(CloseFilled, {
   cursor: 'pointer',
   position: 'absolute',
@@ -17605,7 +17434,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 137,
+      lineNumber: 92,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
@@ -17615,7 +17444,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 144,
+      lineNumber: 99,
       columnNumber: 5
     }
   }));
@@ -17630,12 +17459,59 @@ const Upload = ({
   onRemove,
   children,
   max,
-  replaceLabel
+  replaceLabel,
+  width,
+  height
 }) => {
   const isFile = listType === 'file';
   const hiddenFileInput = React__default.useRef(null);
   const [indexReplace, setIndexReplace] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
+  const defaultSize = 200;
+  const ContainerUpload = styled('div', {
+    border: '2px dashed $gray300',
+    borderRadius: 8,
+    height: height != null ? height : defaultSize,
+    width: width != null ? width : defaultSize,
+    cursor: 'pointer',
+    transition: '0.2s',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&:hover': {
+      border: '2px dashed $primary400',
+      background: '$bgSuccess'
+    },
+    variants: {
+      showError: {
+        true: {
+          border: '2px dashed $red400',
+          '&:hover': {
+            border: '2px dashed  $red300',
+            background: '$bgFailed'
+          }
+        }
+      }
+    }
+  });
+  const Container = styled('div', {
+    height: height != null ? height : defaultSize,
+    width: width != null ? width : defaultSize,
+    background: '$white',
+    borderRadius: 8
+  });
+  const Image = styled('img', {
+    borderRadius: 8,
+    width: width != null ? width : defaultSize,
+    height: height ? height - 36 : defaultSize - 36,
+    objectFit: 'cover'
+  });
+  const Blank = styled('div', {
+    borderRadius: 8,
+    width: width != null ? width : defaultSize,
+    height: height ? height - 36 : defaultSize - 36,
+    background: 'rgba(39, 42, 42, 0.6);'
+  });
 
   function handleClick() {
     hiddenFileInput.current.click();
@@ -17713,7 +17589,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 218,
+        lineNumber: 235,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -17722,7 +17598,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 219,
+        lineNumber: 236,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -17735,38 +17611,39 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 229,
+          lineNumber: 246,
           columnNumber: 9
         }
+      }, /*#__PURE__*/React__default.createElement(Box$1, {
+        css: {
+          position: 'relative'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$1,
+          lineNumber: 247,
+          columnNumber: 11
+        }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 230,
-          columnNumber: 11
+          lineNumber: 248,
+          columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
         css: {
           position: 'absolute',
-          top: 56,
-          right: 0,
-          left: 0
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 231,
-          columnNumber: 11
-        }
-      }, /*#__PURE__*/React__default.createElement(Flex$1, {
-        justify: "center",
-        align: "center",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 232,
+          lineNumber: 249,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -17775,18 +17652,18 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 233,
+          lineNumber: 257,
           columnNumber: 15
         }
-      }))), /*#__PURE__*/React__default.createElement(Image, {
+      })), /*#__PURE__*/React__default.createElement(Image, {
         src: item.url,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 236,
-          columnNumber: 11
+          lineNumber: 259,
+          columnNumber: 13
         }
-      }), renderButtonReplace(index));
+      })), renderButtonReplace(index));
     });
   };
 
@@ -17797,30 +17674,40 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 246,
+          lineNumber: 270,
           columnNumber: 9
         }
+      }, /*#__PURE__*/React__default.createElement(Box$1, {
+        css: {
+          position: 'relative'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$1,
+          lineNumber: 271,
+          columnNumber: 11
+        }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 247,
-          columnNumber: 11
+          lineNumber: 272,
+          columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
         css: {
           position: 'absolute',
-          top: 56,
-          right: 0,
-          left: 0
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 248,
-          columnNumber: 11
+          lineNumber: 273,
+          columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
         justify: "center",
@@ -17829,16 +17716,16 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 249,
-          columnNumber: 13
+          lineNumber: 281,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
         color: "#04C99E",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 250,
-          columnNumber: 15
+          lineNumber: 282,
+          columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
         css: {
@@ -17851,17 +17738,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 251,
-          columnNumber: 15
+          lineNumber: 283,
+          columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 264,
-          columnNumber: 11
+          lineNumber: 296,
+          columnNumber: 13
         }
-      }), renderButtonReplace(index));
+      })), renderButtonReplace(index));
     });
   };
 
@@ -17870,7 +17757,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 273,
+        lineNumber: 306,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -17879,7 +17766,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274,
+        lineNumber: 307,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input, {
@@ -17890,49 +17777,49 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 275,
+        lineNumber: 308,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276,
+        lineNumber: 309,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278,
+        lineNumber: 311,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 279,
+        lineNumber: 312,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 280,
+        lineNumber: 313,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 282,
+        lineNumber: 315,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 287,
+        lineNumber: 320,
         columnNumber: 26
       }
     }, errorMessage));
@@ -17948,7 +17835,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 293,
+      lineNumber: 326,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), max ? fileList.length >= max ? null : renderUpload() : renderUpload());
@@ -17967,7 +17854,9 @@ Upload.propType = {
   onRemove: PropTypes.func,
   children: PropTypes.element,
   max: PropTypes.number,
-  replaceLabel: PropTypes.string
+  replaceLabel: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number
 };
 Upload.displayName = 'Upload';
 
@@ -18080,4 +17969,4 @@ const Colors = props => {
   }, i.hex))));
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, Colors, DateColumn, DatePicker, DecimalColumn, 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, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image$1 as Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, Link, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator, Slider, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagStatus, Text$1 as Text, TimePicker, ToastContext, Tooltip, Upload, addOnCellStyle, defaultFetchDataParams };
+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$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, Colors, DateColumn, DatePicker, DecimalColumn, 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, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, Link, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator, Slider, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagStatus, Text$1 as Text, TimePicker, ToastContext, Tooltip, Upload, addOnCellStyle, defaultFetchDataParams };