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

package/index.umd.js

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('@majoo-ui/helpers'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-dom'), require('react-table'), require('lodash.debounce'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', '@majoo-ui/helpers', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-dom', 'react-table', 'lodash.debounce', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.helpers, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.debounce, global.ADialog, global.DropdownMenuPrimitive));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactDom, reactTable, debounce, ADialog, DropdownMenuPrimitive) { 'use strict';
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, debounce, ADialog, DropdownMenuPrimitive) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,6 +42,7 @@
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
   var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -75,7 +76,7 @@
   };
 
   // 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) ||
@@ -87,7 +88,7 @@
 
   var objectGetOwnPropertyDescriptor = {};
 
-  var fails$n = function (exec) {
+  var fails$m = function (exec) {
     try {
       return !!exec();
     } catch (error) {
@@ -95,17 +96,17 @@
     }
   };
 
-  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');
@@ -168,16 +169,16 @@
     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);
@@ -185,9 +186,9 @@
     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
@@ -216,7 +217,7 @@
     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) {
@@ -224,7 +225,7 @@
   };
 
   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;
@@ -235,11 +236,11 @@
 
   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;
@@ -253,10 +254,10 @@
 
   // 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];
     }
   }
@@ -266,10 +267,10 @@
   /* 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
@@ -286,13 +287,13 @@
     && !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';
@@ -301,9 +302,9 @@
     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 {
@@ -313,33 +314,33 @@
     }
   };
 
-  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
@@ -355,24 +356,24 @@
 
   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;
 
@@ -388,26 +389,26 @@
     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;
@@ -420,7 +421,7 @@
     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;
@@ -428,15 +429,15 @@
   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 {
@@ -445,7 +446,7 @@
     } 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;
@@ -453,7 +454,7 @@
   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
@@ -482,10 +483,10 @@
     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);
 
@@ -494,11 +495,11 @@
   };
 
   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; }
@@ -531,11 +532,11 @@
   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,
@@ -543,11 +544,11 @@
     }).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) {
@@ -555,14 +556,14 @@
     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
@@ -628,11 +629,11 @@
 
   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));
 
@@ -648,7 +649,7 @@
   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;
@@ -658,8 +659,8 @@
   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) {
@@ -735,7 +736,7 @@
     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;
@@ -766,7 +767,7 @@
         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;
@@ -822,19 +823,19 @@
 
   // `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
@@ -865,17 +866,17 @@
   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;
   };
@@ -940,7 +941,7 @@
     }
   };
 
-  var fails$g = fails$n;
+  var fails$f = fails$m;
   var isCallable$a = isCallable$j;
 
   var replacement = /#|\.prototype\./;
@@ -949,7 +950,7 @@
     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;
   };
 
@@ -963,7 +964,7 @@
 
   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;
@@ -992,11 +993,11 @@
     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];
@@ -1032,11 +1033,11 @@
   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
@@ -1047,7 +1048,7 @@
 
   // `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,
@@ -1068,7 +1069,7 @@
     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;
@@ -1504,30 +1505,30 @@
 
   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) {
@@ -1535,13 +1536,13 @@
     } 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
@@ -1559,18 +1560,18 @@
     }
   }
 
-  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;
     });
   }
@@ -1609,11 +1610,11 @@
     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;
@@ -1667,7 +1668,7 @@
   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';
@@ -1690,7 +1691,7 @@
     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);
@@ -1704,8 +1705,8 @@
         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
@@ -1738,8 +1739,8 @@
     }
 
     // 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;
 
@@ -1850,24 +1851,24 @@
 
   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);
@@ -1884,7 +1885,7 @@
   };
 
   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');
@@ -1892,20 +1893,20 @@
   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';
@@ -1929,10 +1930,10 @@
       : (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');
@@ -1941,7 +1942,7 @@
 
   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;
@@ -1950,7 +1951,7 @@
   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) ||
@@ -2009,10 +2010,10 @@
     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)) {
@@ -2444,12 +2445,12 @@
 
   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%'
     },
@@ -2474,7 +2475,7 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledDiv$2, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, _extends({
       id: "retina-container",
       css: Object.assign({
         maxWidth: isCollapse ? '1206px' : '1006px'
@@ -2913,7 +2914,7 @@
     }
   });
   const ButtonPrimitive = ButtonComponent;
-  const Button$2 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  const Button$1 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
     let {
       className,
       children,
@@ -2973,7 +2974,7 @@
       }
     }, rightIcon) : null);
   });
-  Button$2.propTypes = {
+  Button$1.propTypes = {
     className: PropTypes__default["default"].string,
     buttonType: PropTypes__default["default"].string,
     size: PropTypes__default["default"].string,
@@ -2985,7 +2986,7 @@
     rightIcon: PropTypes__default["default"].element,
     icon: PropTypes__default["default"].bool
   };
-  Button$2.defaultProps = {
+  Button$1.defaultProps = {
     buttonType: 'primary',
     size: 'md',
     disabled: false,
@@ -4537,7 +4538,7 @@
       }
     }
   });
-  function Image$1(_ref) {
+  function Image(_ref) {
     let {
       className,
       src,
@@ -4568,7 +4569,7 @@
       }
     }));
   }
-  Image$1.propTypes = {
+  Image.propTypes = {
     className: PropTypes__default["default"].string,
     src: PropTypes__default["default"].string,
     alt: PropTypes__default["default"].string,
@@ -4578,7 +4579,7 @@
     objectFit: PropTypes__default["default"].string,
     fallback: PropTypes__default["default"].string
   };
-  Image$1.defaultProps = {
+  Image.defaultProps = {
     rounded: false
   };
 
@@ -5999,9 +6000,9 @@
   };
   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',
@@ -6013,8 +6014,6 @@
     fontWeight: 500,
     lineHeight: '16px',
     borderRadius: '$sm',
-    background: '$bgGray',
-    color: '$textPrimary',
     variants: {
       size: {
         sm: {
@@ -6030,19 +6029,18 @@
           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'
@@ -6072,16 +6070,11 @@
     alignItems: 'center',
     cursor: 'pointer',
     variants: {
-      disabled: {
+      disable: {
         true: {
           background: '$bgInactive',
           cursor: 'not-allowed'
         }
-      },
-      readOnly: {
-        true: {
-          cursor: 'not-allowed'
-        }
       }
     }
   });
@@ -6099,50 +6092,47 @@
       size,
       icon,
       isRemovable,
-      disabled,
+      disable,
       type,
-      onRemove,
-      readOnly
+      onRemove
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
-    return /*#__PURE__*/React__default["default"].createElement(TagWrapper$3, _extends({
+    return /*#__PURE__*/React__default["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["default"].createElement(StyledIconLeft$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 94,
+        lineNumber: 89,
         columnNumber: 31
       }
     }, icon) : null, /*#__PURE__*/React__default["default"].createElement(TagComponent$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 95,
+        lineNumber: 90,
         columnNumber: 9
       }
     }, children), isRemovable ? /*#__PURE__*/React__default["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["default"].createElement(icons.CloseOutline, {
@@ -6154,46 +6144,29 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 98,
+        lineNumber: 93,
         columnNumber: 13
       }
     })) : null);
   });
   Tag.propTypes = {
     size: PropTypes__default["default"].string,
-    disabled: PropTypes__default["default"].bool,
+    disable: PropTypes__default["default"].bool,
     type: PropTypes__default["default"].string,
     icon: PropTypes__default["default"].element,
     isRemovable: PropTypes__default["default"].bool,
     onRemove: PropTypes__default["default"].func,
-    onClick: PropTypes__default["default"].func,
-    readOnly: PropTypes__default["default"].bool
+    onClick: PropTypes__default["default"].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',
@@ -6209,20 +6182,28 @@
     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'
           }
         }
       },
@@ -6230,27 +6211,33 @@
         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',
@@ -6272,35 +6259,35 @@
       '&::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["default"].useState(value || []);
-    React__default["default"].useEffect(() => {
-      onChange && onChange(tags);
-    }, [tags]);
 
     const addTags = event => {
       if (event.key === 'Enter' && event.target.value !== '' && readOnly === false && max !== tags.length) {
@@ -6317,79 +6304,85 @@
       }
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$B,
-        lineNumber: 135,
-        columnNumber: 5
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(InputTagsComponent, _extends({
+    return /*#__PURE__*/React__default["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["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["default"].createElement(TagContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 144,
-        columnNumber: 9
+        lineNumber: 139,
+        columnNumber: 7
       }
-    })), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
+    }, tags.map((tag, index) => /*#__PURE__*/React__default["default"].createElement(Tag, {
+      key: index,
+      onClick: () => removeTags(index, 'removeTag'),
+      rightIcon: /*#__PURE__*/React__default["default"].createElement(icons.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["default"].createElement(Tag, {
-      key: index,
+    }, tag))), /*#__PURE__*/React__default["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__default["default"].string,
+    className: PropTypes__default["default"].string,
     size: PropTypes__default["default"].string,
-    value: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    onChange: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    onInputChange: PropTypes__default["default"].func,
-    max: PropTypes__default["default"].number,
-    maxChar: PropTypes__default["default"].number,
     isInvalid: PropTypes__default["default"].bool,
     disabled: PropTypes__default["default"].bool,
-    readOnly: PropTypes__default["default"].bool
+    value: PropTypes__default["default"].array,
+    placeholder: PropTypes__default["default"].string,
+    onChange: PropTypes__default["default"].func,
+    readOnly: PropTypes__default["default"].bool,
+    max: PropTypes__default["default"].number
   };
   TagsInput.defaultProps = {
-    placeholder: 'Placeholder',
     size: 'lg',
     isInvalid: false,
     disabled: false,
+    value: [],
     readOnly: false
   };
 
@@ -6720,13 +6713,13 @@
     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;
@@ -6734,11 +6727,11 @@
 
   // 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;
@@ -6751,24 +6744,24 @@
     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';
@@ -6892,12 +6885,12 @@
   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
@@ -6905,7 +6898,7 @@
   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;
 
@@ -6915,14 +6908,14 @@
   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/;
@@ -6982,14 +6975,14 @@
     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
@@ -7112,7 +7105,7 @@
       }
     }
   });
-  const Button$1 = styled('button', {
+  const Button = styled('button', {
     display: 'flex',
     width: '100%',
     height: '100%',
@@ -7233,7 +7226,7 @@
     cursor: 'pointer',
     lineHeight: '20px'
   });
-  const StyledDiv$1 = styled('div', {
+  const StyledDiv = styled('div', {
     color: '$textDisable',
     display: 'inline-flex'
   });
@@ -7264,6 +7257,10 @@
         props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
     const [item, setItem] = React__namespace.useState(option || []);
+    const [selectedValue, setSelectedValue] = React__namespace.useState(value);
+    React__namespace.useEffect(() => {
+      setSelectedValue(value);
+    }, [value]);
 
     const handleInputValue = value => {
       onSearch(value);
@@ -7304,11 +7301,12 @@
     return /*#__PURE__*/React__namespace.createElement(Downshift__default["default"], _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
       }
     }), ({
@@ -7327,7 +7325,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 278,
+        lineNumber: 285,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -7339,7 +7337,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 279,
+        lineNumber: 286,
         columnNumber: 11
       }
     }), search ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -7349,7 +7347,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 286,
+        lineNumber: 293,
         columnNumber: 15
       }
     }, icon ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -7360,7 +7358,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 288,
+        lineNumber: 295,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
@@ -7368,14 +7366,14 @@
         __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__namespace.createElement(Input$3, _extends({
@@ -7389,7 +7387,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 290,
+        lineNumber: 297,
         columnNumber: 21
       }
     }))) : /*#__PURE__*/React__namespace.createElement(Input$3, _extends({
@@ -7403,10 +7401,10 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 298,
+        lineNumber: 305,
         columnNumber: 19
       }
-    }))) : /*#__PURE__*/React__namespace.createElement(Button$1, _extends({}, getToggleButtonProps({
+    }))) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
       disabled: disabled || readOnly
     }), {
       disabled: disabled,
@@ -7415,7 +7413,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 307,
+        lineNumber: 314,
         columnNumber: 15
       }
     }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -7424,7 +7422,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 314,
+        lineNumber: 321,
         columnNumber: 19
       }
     }, selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -7433,7 +7431,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 318,
+        lineNumber: 325,
         columnNumber: 19
       }
     }, placeholder)), !icon ? /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps({
@@ -7444,7 +7442,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 325,
+        lineNumber: 332,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
@@ -7452,7 +7450,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 330,
+        lineNumber: 337,
         columnNumber: 17
       }
     })) : null), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -7463,14 +7461,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 334,
+        lineNumber: 341,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 336,
+        lineNumber: 343,
         columnNumber: 15
       }
     }), item.map((item, index) => {
@@ -7493,7 +7491,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 338,
+          lineNumber: 345,
           columnNumber: 19
         }
       }), item.name);
@@ -7501,14 +7499,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 360,
+        lineNumber: 367,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
+    }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 361,
+        lineNumber: 368,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -7518,7 +7516,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 362,
+        lineNumber: 369,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -7530,7 +7528,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 363,
+        lineNumber: 370,
         columnNumber: 21
       }
     })), "Item tidak ditemukan")))));
@@ -7566,239 +7564,35 @@
     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;
@@ -7867,7 +7661,7 @@
     alignItems: 'center',
     letterSpacing: '$short-content-regular',
     lineHeight: '$short-content-regular',
-    color: '$textDisable',
+    color: '$textPrimary',
     width: '100%'
   });
   const Select = styled('div', {
@@ -7880,25 +7674,25 @@
     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: {
@@ -7916,80 +7710,40 @@
       }
     }
   });
+  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(icons.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',
@@ -7998,36 +7752,20 @@
     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',
@@ -8036,20 +7774,15 @@
     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,
@@ -8058,56 +7791,10 @@
     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__namespace.useState('');
-    const [item, setItem] = React__namespace.useState(sortItem || []);
-    React__namespace.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__namespace.useState(option || []);
     const {
       getSelectedItemProps,
       getDropdownProps,
@@ -8122,9 +7809,9 @@
 
     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);
       }
     };
@@ -8142,8 +7829,7 @@
       isOpen
     } = Downshift.useCombobox({
       inputValue,
-      items: item,
-      // items: option,
+      items: option,
       itemToString: item => item ? item.name : '',
       onStateChange: ({
         inputValue,
@@ -8159,14 +7845,13 @@
           case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
           case Downshift.useCombobox.stateChangeTypes.ItemClick:
           case Downshift.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);
               }
@@ -8183,245 +7868,186 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 324,
+        lineNumber: 209,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Select, {
       size: size,
-      disabled: disabled || readOnly,
+      disabled: disabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 325,
+        lineNumber: 210,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__namespace.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__namespace.createElement(Input$2, _extends({}, getInputProps({
-      disabled: disabled || readOnly
-    }), {
-      placeholder: placeholder,
-      disabled: disabled || readOnly,
+    }, selectedItems.length !== 0 ? /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
+      disabled: disabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 331,
-        columnNumber: 13
+        lineNumber: 212,
+        columnNumber: 11
       }
-    })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
-      disabled: disabled || readOnly
+    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.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__namespace.createElement(icons.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__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
-      disabled: disabled || readOnly
-    }), {
-      disabled: disabled,
-      readOnly: readOnly,
+    }), selectedItem.name))) : null, /*#__PURE__*/React__namespace.createElement(InputWrapper, _extends({}, getComboboxProps(getToggleButtonProps({
+      tabIndex: 0
+    })), {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 346,
+        lineNumber: 237,
         columnNumber: 9
       }
-    }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
-      color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary,
+    }), /*#__PURE__*/React__namespace.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__namespace.createElement(TagWrapper$1, {
-      disabled: disabled,
+    }))), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 355,
+        lineNumber: 244,
         columnNumber: 9
       }
-    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.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__namespace.createElement(IconCaretDown, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 357,
-        columnNumber: 13
+        lineNumber: 245,
+        columnNumber: 11
       }
-    }), selectedItem.name))) : null, /*#__PURE__*/React__namespace.createElement(OptionWrapper, {
-      placement: placement,
+    }))), /*#__PURE__*/React__namespace.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__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 382,
+        lineNumber: 250,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement(CheckOutline, {
-      color: colors.iconDisable,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 406,
-        columnNumber: 40
-      }
-    }) : null, selectedItems.includes(item) ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
+    }, selectedItems.includes(item) ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
       color: colors.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 407,
+        lineNumber: 261,
         columnNumber: 53
       }
     }) : null), /*#__PURE__*/React__namespace.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__namespace.createElement(Option, {
-      css: {
-        height: 'auto'
-      },
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 421,
+        lineNumber: 275,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 422,
-        columnNumber: 13
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        marginRight: '6px'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 423,
-        columnNumber: 15
-      }
-    }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
-      size: "16px",
-      color: colors.iconDisable,
-      style: {
-        verticalAlign: 'text-bottom'
+    }, /*#__PURE__*/React__namespace.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__default["default"].string,
     option: PropTypes__default["default"].array,
     size: PropTypes__default["default"].string,
     disabled: PropTypes__default["default"].bool,
-    readOnly: PropTypes__default["default"].bool,
     value: PropTypes__default["default"].object,
-    onChange: PropTypes__default["default"].func,
-    search: PropTypes__default["default"].bool,
-    placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
-    disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    valueSelector: PropTypes__default["default"].string,
-    textSelector: PropTypes__default["default"].string,
-    textEmptyItem: PropTypes__default["default"].string
+    onChange: PropTypes__default["default"].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"];
@@ -9337,7 +8963,75 @@
     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',
@@ -9432,45 +9126,38 @@
   });
 
   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["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 103,
+        lineNumber: 106,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__default["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 = {
@@ -9478,14 +9165,12 @@
     anchorVertical: 'top',
     variant: 'important',
     value: undefined,
-    type: 'default',
     dot: false
   };
   NotificationBadge.propTypes = {
     anchorHorizontal: PropTypes__default["default"].oneOf(['left', 'right']),
     anchorVertical: PropTypes__default["default"].oneOf(['top', 'bottom']),
     variant: PropTypes__default["default"].oneOf(['info', 'important', 'warning', 'success']),
-    type: PropTypes__default["default"].oneOf(['default', 'increase', 'decrease']),
     value: PropTypes__default["default"].number,
     dot: PropTypes__default["default"].bool
   };
@@ -11015,7 +10700,7 @@
           lineNumber: 560,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
         buttonType: "ghost",
         css: {
           fontWeight: 600
@@ -11029,7 +10714,7 @@
           lineNumber: 561,
           columnNumber: 13
         }
-      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
         css: {
           fontWeight: 600
         },
@@ -11762,7 +11447,7 @@
           lineNumber: 521,
           columnNumber: 9
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
         buttonType: "ghost",
         size: "lg",
         css: {
@@ -11779,7 +11464,7 @@
           lineNumber: 522,
           columnNumber: 11
         }
-      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
         size: "lg",
         css: {
           width: '160px',
@@ -11872,7 +11557,7 @@
       }
     }
   });
-  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,
@@ -12060,7 +11745,7 @@
     defaultValue,
     value
   }) => {
-    return /*#__PURE__*/React__default["default"].createElement(Container$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Container, {
       size: size,
       direction: "column",
       gap: 3,
@@ -12467,6 +12152,12 @@
       selectedDate: defaultDate != null ? defaultDate : date
     });
     const [openPicker, setOpenPicker] = React.useState(false);
+    React.useEffect(() => {
+      dispatch({
+        type: UPDATE,
+        payload: date
+      });
+    }, [date]);
     const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
     const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
@@ -12475,7 +12166,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 115,
+        lineNumber: 120,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -12483,14 +12174,14 @@
         __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["default"].createElement(InputText, {
@@ -12499,10 +12190,11 @@
       onChange: () => {},
       defaultValue: defaultDate,
       isDatePicker: true,
+      tabIndex: "-1",
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 117,
+        lineNumber: 122,
         columnNumber: 7
       }
     }));
@@ -12517,7 +12209,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 131,
+          lineNumber: 137,
           columnNumber: 11
         }
       }) : {
@@ -12528,19 +12220,19 @@
       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
       }
     });
@@ -12552,14 +12244,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 150,
+        lineNumber: 156,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 151,
+        lineNumber: 157,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -12567,14 +12259,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 152,
+        lineNumber: 158,
         columnNumber: 9
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 154,
+        lineNumber: 160,
         columnNumber: 7
       }
     }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -12582,7 +12274,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 158,
+        lineNumber: 164,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -12592,7 +12284,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 159,
+        lineNumber: 165,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -12603,7 +12295,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 160,
+        lineNumber: 166,
         columnNumber: 9
       }
     }, renderDatePicker())));
@@ -12630,19 +12322,19 @@
     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
@@ -12689,7 +12381,7 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
-    return /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({
       onClick: onClick,
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
@@ -13037,6 +12729,7 @@
         columnNumber: 11
       }
     }, limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+      key: limit,
       css: limitItemContainerStyle(selectedLimit === limit),
       onClick: () => onChange(limit),
       __self: this,
@@ -13050,7 +12743,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 50,
+        lineNumber: 54,
         columnNumber: 17
       }
     }, limit.toString())))))), /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -13059,7 +12752,7 @@
       __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`));
@@ -13752,26 +13445,27 @@
       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["default"].createElement(React__default["default"].Fragment, {
         key: row.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 343,
+          lineNumber: 346,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["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["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["default"].createElement(TableRow, {
@@ -13780,7 +13474,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 355,
+          lineNumber: 358,
           columnNumber: 23
         }
       }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
@@ -13788,7 +13482,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 357,
+          lineNumber: 360,
           columnNumber: 27
         }
       })), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -13796,16 +13490,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 359,
+          lineNumber: 362,
           columnNumber: 25
         }
       }, /*#__PURE__*/React__default["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["default"].createElement(Paragraph, {
@@ -13813,16 +13512,20 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 361,
+          lineNumber: 372,
           columnNumber: 29
         }
       }, cell.column.Header)), /*#__PURE__*/React__default["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["default"].createElement(Paragraph, {
@@ -13830,7 +13533,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 364,
+          lineNumber: 382,
           columnNumber: 29
         }
       }, cell.render('Cell')))))) : null);
@@ -13838,14 +13541,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 374,
+        lineNumber: 392,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 375,
+        lineNumber: 393,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
@@ -13853,7 +13556,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 376,
+        lineNumber: 394,
         columnNumber: 13
       }
     }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -13865,7 +13568,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 380,
+        lineNumber: 398,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -13874,7 +13577,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 387,
+        lineNumber: 405,
         columnNumber: 19
       }
     }, emptyDataMessage || 'Tidak ada data'))))))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
@@ -13884,7 +13587,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 398,
+        lineNumber: 416,
         columnNumber: 5
       }
     });
@@ -13937,23 +13640,23 @@
     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');
@@ -13962,19 +13665,19 @@
   };
 
   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);
@@ -13999,7 +13702,7 @@
     while (++index < 6) {
       c2 += n * data[index];
       data[index] = c2 % 1e7;
-      c2 = floor$3(c2 / 1e7);
+      c2 = floor$4(c2 / 1e7);
     }
   };
 
@@ -14008,7 +13711,7 @@
     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;
     }
   };
@@ -14093,52 +13796,16 @@
     }
   });
 
-  // 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
@@ -14173,7 +13840,7 @@
   });
 
   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;
@@ -14225,11 +13892,11 @@
       || 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) {
@@ -14296,6 +13963,34 @@
     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;
@@ -14308,11 +14003,11 @@
   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;
@@ -14369,7 +14064,7 @@
           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;
@@ -14379,7 +14074,7 @@
         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) {
@@ -14453,9 +14148,9 @@
   }, !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);
@@ -14486,7 +14181,7 @@
           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;
@@ -14501,7 +14196,7 @@
   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;
@@ -14816,7 +14511,7 @@
           lineNumber: 27,
           columnNumber: 11
         }
-      }, options.map(option => /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      }, options.map(option => /*#__PURE__*/React__default["default"].createElement(Button$1, {
         key: option.title,
         buttonType: "tableMenu",
         onClick: () => {
@@ -15077,7 +14772,7 @@
         lineNumber: 121,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Image$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Image, {
       src: img,
       __self: undefined,
       __source: {
@@ -15306,26 +15001,161 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 65,
+        lineNumber: 66,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 66,
+        lineNumber: 67,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["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__default["default"].render( /*#__PURE__*/React__default["default"].createElement(React__default["default"].StrictMode, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 77,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["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["default"].useState(true);
+    const onCancelFunc = props.onCancel ? props.onCancel : () => {};
+    const onConfirmFunc = props.onConfirm ? props.onConfirm : () => {};
+
+    const buttonCancel = () => {
+      onCancelFunc();
+      setOpen(false);
+      ReactDOM__default["default"].unmountComponentAtNode(document.getElementById('a-dialog'));
+    };
+
+    const buttonConfirm = () => {
+      onConfirmFunc();
+      setOpen(false);
+      ReactDOM__default["default"].unmountComponentAtNode(document.getElementById('a-dialog'));
+    };
+
+    return /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Root, _extends({
+      open: open
+    }, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 104,
+        columnNumber: 5
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Content, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 105,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 106,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Heading, {
+      heading: "pageTitle",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 107,
+        columnNumber: 11
+      }
+    }, props.title)), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 109,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 110,
+        columnNumber: 11
+      }
+    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Flex, {
+      css: {
+        gap: 10,
+        justifyContent: 'flex-end'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 112,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+      asChild: true,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 113,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["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["default"].createElement(ADialog__namespace.Action, {
+      asChild: true,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 122,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["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["default"].createElement(ADialog__namespace.Root, _extends({
       open: props.open
@@ -15333,21 +15163,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 74,
+        lineNumber: 134,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Content, {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 78,
+        lineNumber: 135,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 79,
+        lineNumber: 136,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -15355,21 +15185,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 80,
+        lineNumber: 137,
         columnNumber: 11
       }
     }, props.title)), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 82,
+        lineNumber: 139,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 83,
+        lineNumber: 140,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -15380,7 +15210,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 85,
+        lineNumber: 142,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -15388,10 +15218,10 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 86,
+        lineNumber: 143,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
       onClick: props.onCancel,
       css: {
         color: props.dialogType === 'negative' && '$gray900 !important'
@@ -15400,27 +15230,27 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 87,
+        lineNumber: 144,
         columnNumber: 13
       }
-    }, props.labelCancel)), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
+    }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
       asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 95,
+        lineNumber: 152,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+    }, /*#__PURE__*/React__default["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: PropTypes.string.isRequired,
@@ -15700,7 +15530,7 @@
     return { value: point, done: false };
   });
 
-  var fails = fails$n;
+  var fails = fails$m;
   var wellKnownSymbol$3 = wellKnownSymbol$h;
   var IS_PURE = isPure;
 
@@ -15736,7 +15566,7 @@
   });
 
   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);
@@ -15749,7 +15579,7 @@
     };
   };
 
-  var global$7 = global$I;
+  var global$7 = global$J;
   var isPrototypeOf = objectIsPrototypeOf;
 
   var TypeError$5 = global$7.TypeError;
@@ -15819,9 +15649,9 @@
       || 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;
@@ -15834,14 +15664,14 @@
     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;
@@ -15882,7 +15712,7 @@
   };
 
   // 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
@@ -15901,7 +15731,7 @@
 
   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);
@@ -15956,13 +15786,13 @@
    */
   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));
   };
 
   /**
@@ -16013,7 +15843,7 @@
 
       // 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);
       }
 
@@ -16035,7 +15865,7 @@
             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;
           }
 
@@ -16063,7 +15893,7 @@
     return join$2(encoded, '.');
   };
 
-  var global$3 = global$I;
+  var global$3 = global$J;
 
   var TypeError$3 = global$3.TypeError;
 
@@ -16079,10 +15909,55 @@
     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;
@@ -16467,7 +16342,7 @@
   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;
@@ -16492,7 +16367,7 @@
 
   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);
@@ -16551,7 +16426,7 @@
         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);
     }
@@ -16598,7 +16473,7 @@
       }
       value = length = 0;
       while (length < 4 && exec(HEX, chr())) {
-        value = value * 16 + parseInt(chr(), 16);
+        value = value * 16 + parseInt$1(chr(), 16);
         pointer++;
         length++;
       }
@@ -16615,7 +16490,7 @@
           }
           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;
@@ -17040,7 +16915,7 @@
               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 = '';
@@ -17510,45 +17385,6 @@
   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',
@@ -17594,12 +17430,6 @@
       background: '$bgSuccess'
     }
   });
-  const Blank = styled('div', {
-    borderRadius: 8,
-    width: 200,
-    height: 164,
-    background: 'rgba(39, 42, 42, 0.6);'
-  });
   const CloseIcon = styled(icons.CloseFilled, {
     cursor: 'pointer',
     position: 'absolute',
@@ -17636,7 +17466,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 137,
+        lineNumber: 92,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -17646,7 +17476,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 144,
+        lineNumber: 99,
         columnNumber: 5
       }
     }));
@@ -17661,12 +17491,59 @@
     onRemove,
     children,
     max,
-    replaceLabel
+    replaceLabel,
+    width,
+    height
   }) => {
     const isFile = listType === 'file';
     const hiddenFileInput = React__default["default"].useRef(null);
     const [indexReplace, setIndexReplace] = React.useState(null);
     const [errorMessage, setErrorMessage] = React.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();
@@ -17744,7 +17621,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 218,
+          lineNumber: 235,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -17753,7 +17630,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 219,
+          lineNumber: 236,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -17766,38 +17643,39 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 229,
+            lineNumber: 246,
             columnNumber: 9
           }
+        }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+          css: {
+            position: 'relative'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$1,
+            lineNumber: 247,
+            columnNumber: 11
+          }
         }, /*#__PURE__*/React__default["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["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["default"].createElement(Flex$1, {
-          justify: "center",
-          align: "center",
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$1,
-            lineNumber: 232,
+            lineNumber: 249,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -17806,18 +17684,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 233,
+            lineNumber: 257,
             columnNumber: 15
           }
-        }))), /*#__PURE__*/React__default["default"].createElement(Image, {
+        })), /*#__PURE__*/React__default["default"].createElement(Image, {
           src: item.url,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 236,
-            columnNumber: 11
+            lineNumber: 259,
+            columnNumber: 13
           }
-        }), renderButtonReplace(index));
+        })), renderButtonReplace(index));
       });
     };
 
@@ -17828,30 +17706,40 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 246,
+            lineNumber: 270,
             columnNumber: 9
           }
+        }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+          css: {
+            position: 'relative'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$1,
+            lineNumber: 271,
+            columnNumber: 11
+          }
         }, /*#__PURE__*/React__default["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["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["default"].createElement(Flex$1, {
           justify: "center",
@@ -17860,16 +17748,16 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 249,
-            columnNumber: 13
+            lineNumber: 281,
+            columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
           color: "#04C99E",
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 250,
-            columnNumber: 15
+            lineNumber: 282,
+            columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(Text, {
           css: {
@@ -17882,17 +17770,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 251,
-            columnNumber: 15
+            lineNumber: 283,
+            columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 264,
-            columnNumber: 11
+            lineNumber: 296,
+            columnNumber: 13
           }
-        }), renderButtonReplace(index));
+        })), renderButtonReplace(index));
       });
     };
 
@@ -17901,7 +17789,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 273,
+          lineNumber: 306,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -17910,7 +17798,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 274,
+          lineNumber: 307,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input, {
@@ -17921,49 +17809,49 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 275,
+          lineNumber: 308,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 276,
+          lineNumber: 309,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 278,
+          lineNumber: 311,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 279,
+          lineNumber: 312,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 280,
+          lineNumber: 313,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["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["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 287,
+          lineNumber: 320,
           columnNumber: 26
         }
       }, errorMessage));
@@ -17979,7 +17867,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293,
+        lineNumber: 326,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), max ? fileList.length >= max ? null : renderUpload() : renderUpload());
@@ -17998,7 +17886,9 @@
     onRemove: PropTypes__default["default"].func,
     children: PropTypes__default["default"].element,
     max: PropTypes__default["default"].number,
-    replaceLabel: PropTypes__default["default"].string
+    replaceLabel: PropTypes__default["default"].string,
+    width: PropTypes__default["default"].number,
+    height: PropTypes__default["default"].number
   };
   Upload.displayName = 'Upload';
 
@@ -18122,6 +18012,7 @@
   exports.AlertDialogConfirm = AlertDialogConfirm;
   exports.AlertDialogContent = AlertDialogContent;
   exports.AlertDialogDescription = AlertDialogDescription;
+  exports.AlertDialogFunction = AlertDialogFunction;
   exports.AlertDialogRoot = AlertDialogRoot;
   exports.AlertDialogTitle = AlertDialogTitle;
   exports.AlertDialogTrigger = AlertDialogTrigger;
@@ -18138,7 +18029,7 @@
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
   exports.BreadcrumbLink = BreadcrumbLink;
-  exports.Button = Button$2;
+  exports.Button = Button$1;
   exports.ButtonDropdown = ButtonDropdown;
   exports.ButtonGroup = ButtonGroup$1;
   exports.ButtonGroupItem = ButtonGroupItem;
@@ -18189,7 +18080,7 @@
   exports.GridItem = GridItem;
   exports.Heading = Heading;
   exports.IconButton = IconButton;
-  exports.Image = Image$1;
+  exports.Image = Image;
   exports.InputCheckbox = InputCheckbox;
   exports.InputDatePicker = InputDatePicker;
   exports.InputGroup = InputGroup;