@majoo-ui/react 1.54.1-rc.2 → 1.54.2-rc.1

package/index.esm.js

@@ -49,7 +49,7 @@ import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
 
-var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$11 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -59,7 +59,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$10,
+      fileName: _jsxFileName$11,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -78,7 +78,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$U =
+var global$s =
   // eslint-disable-next-line es-x/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -172,31 +172,28 @@ var classofRaw$1 = function (it) {
   return stringSlice$b(toString$j(it), 8, -1);
 };
 
-var global$T = global$U;
 var uncurryThis$v = functionUncurryThis;
 var fails$q = fails$t;
 var classof$8 = classofRaw$1;
 
-var Object$5 = global$T.Object;
+var $Object$4 = Object;
 var split$3 = uncurryThis$v(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
 var indexedObject = fails$q(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);
+  return !$Object$4('z').propertyIsEnumerable(0);
 }) ? function (it) {
-  return classof$8(it) == 'String' ? split$3(it, '') : Object$5(it);
-} : Object$5;
-
-var global$S = global$U;
+  return classof$8(it) == 'String' ? split$3(it, '') : $Object$4(it);
+} : $Object$4;
 
-var TypeError$j = global$S.TypeError;
+var $TypeError$f = TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
 var requireObjectCoercible$a = function (it) {
-  if (it == undefined) throw TypeError$j("Can't call method on " + it);
+  if (it == undefined) throw $TypeError$f("Can't call method on " + it);
   return it;
 };
 
@@ -220,7 +217,7 @@ var isObject$d = function (it) {
   return typeof it == 'object' ? it !== null : isCallable$o(it);
 };
 
-var global$R = global$U;
+var global$r = global$s;
 var isCallable$n = isCallable$p;
 
 var aFunction = function (argument) {
@@ -228,7 +225,7 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$8 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$R[namespace]) : global$R[namespace] && global$R[namespace][method];
+  return arguments.length < 2 ? aFunction(global$r[namespace]) : global$r[namespace] && global$r[namespace][method];
 };
 
 var uncurryThis$u = functionUncurryThis;
@@ -239,11 +236,11 @@ var getBuiltIn$7 = getBuiltIn$8;
 
 var engineUserAgent = getBuiltIn$7('navigator', 'userAgent') || '';
 
-var global$Q = global$U;
+var global$q = global$s;
 var userAgent$5 = engineUserAgent;
 
-var process$3 = global$Q.process;
-var Deno$1 = global$Q.Deno;
+var process$3 = global$q.process;
+var Deno$1 = global$q.Deno;
 var versions = process$3 && process$3.versions || Deno$1 && Deno$1.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -290,43 +287,39 @@ var useSymbolAsUid = NATIVE_SYMBOL$2
   && !Symbol.sham
   && typeof Symbol.iterator == 'symbol';
 
-var global$P = global$U;
 var getBuiltIn$6 = getBuiltIn$8;
 var isCallable$m = isCallable$p;
 var isPrototypeOf$5 = objectIsPrototypeOf;
 var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
-var Object$4 = global$P.Object;
+var $Object$3 = Object;
 
 var isSymbol$6 = USE_SYMBOL_AS_UID$1 ? function (it) {
   return typeof it == 'symbol';
 } : function (it) {
   var $Symbol = getBuiltIn$6('Symbol');
-  return isCallable$m($Symbol) && isPrototypeOf$5($Symbol.prototype, Object$4(it));
+  return isCallable$m($Symbol) && isPrototypeOf$5($Symbol.prototype, $Object$3(it));
 };
 
-var global$O = global$U;
-
-var String$6 = global$O.String;
+var $String$4 = String;
 
-var tryToString$4 = function (argument) {
+var tryToString$5 = function (argument) {
   try {
-    return String$6(argument);
+    return $String$4(argument);
   } catch (error) {
     return 'Object';
   }
 };
 
-var global$N = global$U;
 var isCallable$l = isCallable$p;
-var tryToString$3 = tryToString$4;
+var tryToString$4 = tryToString$5;
 
-var TypeError$i = global$N.TypeError;
+var $TypeError$e = TypeError;
 
 // `Assert: IsCallable(argument) is true`
 var aCallable$9 = function (argument) {
   if (isCallable$l(argument)) return argument;
-  throw TypeError$i(tryToString$3(argument) + ' is not a function');
+  throw $TypeError$e(tryToString$4(argument) + ' is not a function');
 };
 
 var aCallable$8 = aCallable$9;
@@ -338,12 +331,11 @@ var getMethod$6 = function (V, P) {
   return func == null ? undefined : aCallable$8(func);
 };
 
-var global$M = global$U;
 var call$l = functionCall;
 var isCallable$k = isCallable$p;
 var isObject$c = isObject$d;
 
-var TypeError$h = global$M.TypeError;
+var $TypeError$d = TypeError;
 
 // `OrdinaryToPrimitive` abstract operation
 // https://tc39.es/ecma262/#sec-ordinarytoprimitive
@@ -352,31 +344,31 @@ var ordinaryToPrimitive$1 = function (input, pref) {
   if (pref === 'string' && isCallable$k(fn = input.toString) && !isObject$c(val = call$l(fn, input))) return val;
   if (isCallable$k(fn = input.valueOf) && !isObject$c(val = call$l(fn, input))) return val;
   if (pref !== 'string' && isCallable$k(fn = input.toString) && !isObject$c(val = call$l(fn, input))) return val;
-  throw TypeError$h("Can't convert object to primitive value");
+  throw $TypeError$d("Can't convert object to primitive value");
 };
 
 var shared$4 = {exports: {}};
 
 var isPure = false;
 
-var global$L = global$U;
+var global$p = global$s;
 
 // eslint-disable-next-line es-x/no-object-defineproperty -- safe
-var defineProperty$7 = Object.defineProperty;
+var defineProperty$8 = Object.defineProperty;
 
-var setGlobal$3 = function (key, value) {
+var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$7(global$L, key, { value: value, configurable: true, writable: true });
+    defineProperty$8(global$p, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$L[key] = value;
+    global$p[key] = value;
   } return value;
 };
 
-var global$K = global$U;
-var setGlobal$2 = setGlobal$3;
+var global$o = global$s;
+var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = global$K[SHARED] || setGlobal$2(SHARED, {});
+var store$3 = global$o[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 var sharedStore = store$3;
 
@@ -385,22 +377,21 @@ var store$2 = sharedStore;
 (shared$4.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.22.5',
+  version: '3.24.1',
   mode: 'global',
   copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.22.5/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.24.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
-var global$J = global$U;
 var requireObjectCoercible$8 = requireObjectCoercible$a;
 
-var Object$3 = global$J.Object;
+var $Object$2 = Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
 var toObject$7 = function (argument) {
-  return Object$3(requireObjectCoercible$8(argument));
+  return $Object$2(requireObjectCoercible$8(argument));
 };
 
 var uncurryThis$t = functionUncurryThis;
@@ -425,7 +416,7 @@ var uid$2 = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$i(++id + postfix, 36);
 };
 
-var global$I = global$U;
+var global$n = global$s;
 var shared$3 = shared$4.exports;
 var hasOwn$e = hasOwnProperty_1;
 var uid$1 = uid$2;
@@ -433,7 +424,7 @@ var NATIVE_SYMBOL$1 = nativeSymbol;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
 var WellKnownSymbolsStore = shared$3('wks');
-var Symbol$7 = global$I.Symbol;
+var Symbol$7 = global$n.Symbol;
 var symbolFor = Symbol$7 && Symbol$7['for'];
 var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$7 : Symbol$7 && Symbol$7.withoutSetter || uid$1;
 
@@ -450,7 +441,6 @@ var wellKnownSymbol$l = function (name) {
   } return WellKnownSymbolsStore[name];
 };
 
-var global$H = global$U;
 var call$k = functionCall;
 var isObject$b = isObject$d;
 var isSymbol$5 = isSymbol$6;
@@ -458,7 +448,7 @@ var getMethod$5 = getMethod$6;
 var ordinaryToPrimitive = ordinaryToPrimitive$1;
 var wellKnownSymbol$k = wellKnownSymbol$l;
 
-var TypeError$g = global$H.TypeError;
+var $TypeError$c = TypeError;
 var TO_PRIMITIVE = wellKnownSymbol$k('toPrimitive');
 
 // `ToPrimitive` abstract operation
@@ -471,7 +461,7 @@ var toPrimitive$1 = function (input, pref) {
     if (pref === undefined) pref = 'default';
     result = call$k(exoticToPrim, input, pref);
     if (!isObject$b(result) || isSymbol$5(result)) return result;
-    throw TypeError$g("Can't convert object to primitive value");
+    throw $TypeError$c("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
   return ordinaryToPrimitive(input, pref);
@@ -487,10 +477,10 @@ var toPropertyKey$3 = function (argument) {
   return isSymbol$4(key) ? key : key + '';
 };
 
-var global$G = global$U;
+var global$m = global$s;
 var isObject$a = isObject$d;
 
-var document$3 = global$G.document;
+var document$3 = global$m.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$a(document$3) && isObject$a(document$3.createElement);
 
@@ -548,26 +538,24 @@ var v8PrototypeDefineBug = DESCRIPTORS$c && fails$n(function () {
   }).prototype != 42;
 });
 
-var global$F = global$U;
 var isObject$9 = isObject$d;
 
-var String$5 = global$F.String;
-var TypeError$f = global$F.TypeError;
+var $String$3 = String;
+var $TypeError$b = TypeError;
 
 // `Assert: Type(argument) is Object`
 var anObject$i = function (argument) {
   if (isObject$9(argument)) return argument;
-  throw TypeError$f(String$5(argument) + ' is not an object');
+  throw $TypeError$b($String$3(argument) + ' is not an object');
 };
 
-var global$E = global$U;
 var DESCRIPTORS$b = descriptors;
 var IE8_DOM_DEFINE = ie8DomDefine;
 var V8_PROTOTYPE_DEFINE_BUG$1 = v8PrototypeDefineBug;
 var anObject$h = anObject$i;
 var toPropertyKey$1 = toPropertyKey$3;
 
-var TypeError$e = global$E.TypeError;
+var $TypeError$a = TypeError;
 // eslint-disable-next-line es-x/no-object-defineproperty -- safe
 var $defineProperty = Object.defineProperty;
 // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
@@ -600,7 +588,7 @@ objectDefineProperty.f = DESCRIPTORS$b ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
   if (IE8_DOM_DEFINE) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
-  if ('get' in Attributes || 'set' in Attributes) throw TypeError$e('Accessors not supported');
+  if ('get' in Attributes || 'set' in Attributes) throw $TypeError$a('Accessors not supported');
   if ('value' in Attributes) O[P] = Attributes.value;
   return O;
 };
@@ -609,7 +597,7 @@ var DESCRIPTORS$a = descriptors;
 var definePropertyModule$5 = objectDefineProperty;
 var createPropertyDescriptor$3 = createPropertyDescriptor$5;
 
-var createNonEnumerableProperty$7 = DESCRIPTORS$a ? function (object, key, value) {
+var createNonEnumerableProperty$6 = DESCRIPTORS$a ? function (object, key, value) {
   return definePropertyModule$5.f(object, key, createPropertyDescriptor$3(1, value));
 } : function (object, key, value) {
   object[key] = value;
@@ -651,11 +639,11 @@ if (!isCallable$j(store$1.inspectSource)) {
 
 var inspectSource$4 = store$1.inspectSource;
 
-var global$D = global$U;
+var global$l = global$s;
 var isCallable$i = isCallable$p;
 var inspectSource$3 = inspectSource$4;
 
-var WeakMap$1 = global$D.WeakMap;
+var WeakMap$1 = global$l.WeakMap;
 
 var nativeWeakMap = isCallable$i(WeakMap$1) && /native code/.test(inspectSource$3(WeakMap$1));
 
@@ -671,18 +659,18 @@ var sharedKey$3 = function (key) {
 var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = nativeWeakMap;
-var global$C = global$U;
+var global$k = global$s;
 var uncurryThis$q = functionUncurryThis;
 var isObject$8 = isObject$d;
-var createNonEnumerableProperty$6 = createNonEnumerableProperty$7;
+var createNonEnumerableProperty$5 = createNonEnumerableProperty$6;
 var hasOwn$b = hasOwnProperty_1;
 var shared$1 = sharedStore;
 var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$d = global$C.TypeError;
-var WeakMap = global$C.WeakMap;
+var TypeError$4 = global$k.TypeError;
+var WeakMap = global$k.WeakMap;
 var set$1, get$1, has;
 
 var enforce = function (it) {
@@ -693,7 +681,7 @@ var getterFor = function (TYPE) {
   return function (it) {
     var state;
     if (!isObject$8(it) || (state = get$1(it)).type !== TYPE) {
-      throw TypeError$d('Incompatible receiver, ' + TYPE + ' required');
+      throw TypeError$4('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
 };
@@ -704,7 +692,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
   var wmhas = uncurryThis$q(store.has);
   var wmset = uncurryThis$q(store.set);
   set$1 = function (it, metadata) {
-    if (wmhas(store, it)) throw new TypeError$d(OBJECT_ALREADY_INITIALIZED);
+    if (wmhas(store, it)) throw new TypeError$4(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
     wmset(store, it, metadata);
     return metadata;
@@ -719,9 +707,9 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
   var STATE = sharedKey$2('state');
   hiddenKeys$3[STATE] = true;
   set$1 = function (it, metadata) {
-    if (hasOwn$b(it, STATE)) throw new TypeError$d(OBJECT_ALREADY_INITIALIZED);
+    if (hasOwn$b(it, STATE)) throw new TypeError$4(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
-    createNonEnumerableProperty$6(it, STATE, metadata);
+    createNonEnumerableProperty$5(it, STATE, metadata);
     return metadata;
   };
   get$1 = function (it) {
@@ -751,10 +739,10 @@ var InternalStateModule$5 = internalState;
 var enforceInternalState$1 = InternalStateModule$5.enforce;
 var getInternalState$3 = InternalStateModule$5.get;
 // eslint-disable-next-line es-x/no-object-defineproperty -- safe
-var defineProperty$6 = Object.defineProperty;
+var defineProperty$7 = Object.defineProperty;
 
 var CONFIGURABLE_LENGTH = DESCRIPTORS$8 && !fails$m(function () {
-  return defineProperty$6(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
+  return defineProperty$7(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
 });
 
 var TEMPLATE = String(String).split('String');
@@ -766,16 +754,18 @@ var makeBuiltIn$2 = makeBuiltIn$3.exports = function (value, name, options) {
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
   if (!hasOwn$a(value, 'name') || (CONFIGURABLE_FUNCTION_NAME$1 && value.name !== name)) {
-    defineProperty$6(value, 'name', { value: name, configurable: true });
+    if (DESCRIPTORS$8) defineProperty$7(value, 'name', { value: name, configurable: true });
+    else value.name = name;
   }
   if (CONFIGURABLE_LENGTH && options && hasOwn$a(options, 'arity') && value.length !== options.arity) {
-    defineProperty$6(value, 'length', { value: options.arity });
+    defineProperty$7(value, 'length', { value: options.arity });
   }
-  if (options && hasOwn$a(options, 'constructor') && options.constructor) {
-    if (DESCRIPTORS$8) try {
-      defineProperty$6(value, 'prototype', { writable: false });
-    } catch (error) { /* empty */ }
-  } else value.prototype = undefined;
+  try {
+    if (options && hasOwn$a(options, 'constructor') && options.constructor) {
+      if (DESCRIPTORS$8) defineProperty$7(value, 'prototype', { writable: false });
+    // in V8 ~ Chrome 53, prototypes of some methods, like `Array.prototype.values`, are non-writable
+    } else if (value.prototype) value.prototype = undefined;
+  } catch (error) { /* empty */ }
   var state = enforceInternalState$1(value);
   if (!hasOwn$a(state, 'source')) {
     state.source = TEMPLATE.join(typeof name == 'string' ? name : '');
@@ -788,30 +778,32 @@ Function.prototype.toString = makeBuiltIn$2(function toString() {
   return isCallable$h(this) && getInternalState$3(this).source || inspectSource$2(this);
 }, 'toString');
 
-var global$B = global$U;
 var isCallable$g = isCallable$p;
-var createNonEnumerableProperty$5 = createNonEnumerableProperty$7;
+var definePropertyModule$4 = objectDefineProperty;
 var makeBuiltIn$1 = makeBuiltIn$3.exports;
-var setGlobal$1 = setGlobal$3;
+var defineGlobalProperty$1 = defineGlobalProperty$3;
 
 var defineBuiltIn$b = function (O, key, value, options) {
-  var unsafe = options ? !!options.unsafe : false;
-  var simple = options ? !!options.enumerable : false;
-  var noTargetGet = options ? !!options.noTargetGet : false;
-  var name = options && options.name !== undefined ? options.name : key;
+  if (!options) options = {};
+  var simple = options.enumerable;
+  var name = options.name !== undefined ? options.name : key;
   if (isCallable$g(value)) makeBuiltIn$1(value, name, options);
-  if (O === global$B) {
+  if (options.global) {
     if (simple) O[key] = value;
-    else setGlobal$1(key, value);
-    return O;
-  } else if (!unsafe) {
-    delete O[key];
-  } else if (!noTargetGet && O[key]) {
-    simple = true;
-  }
-  if (simple) O[key] = value;
-  else createNonEnumerableProperty$5(O, key, value);
-  return O;
+    else defineGlobalProperty$1(key, value);
+  } else {
+    try {
+      if (!options.unsafe) delete O[key];
+      else if (O[key]) simple = true;
+    } catch (error) { /* empty */ }
+    if (simple) O[key] = value;
+    else definePropertyModule$4.f(O, key, {
+      value: value,
+      enumerable: false,
+      configurable: !options.nonConfigurable,
+      writable: !options.nonWritable
+    });
+  } return O;
 };
 
 var objectGetOwnPropertyNames = {};
@@ -819,12 +811,22 @@ var objectGetOwnPropertyNames = {};
 var ceil = Math.ceil;
 var floor$5 = Math.floor;
 
+// `Math.trunc` method
+// https://tc39.es/ecma262/#sec-math.trunc
+// eslint-disable-next-line es-x/no-math-trunc -- safe
+var mathTrunc = Math.trunc || function trunc(x) {
+  var n = +x;
+  return (n > 0 ? floor$5 : ceil)(n);
+};
+
+var trunc = mathTrunc;
+
 // `ToIntegerOrInfinity` abstract operation
 // https://tc39.es/ecma262/#sec-tointegerorinfinity
 var toIntegerOrInfinity$6 = function (argument) {
   var number = +argument;
-  // eslint-disable-next-line no-self-compare -- safe
-  return number !== number || number === 0 ? 0 : (number > 0 ? floor$5 : ceil)(number);
+  // eslint-disable-next-line no-self-compare -- NaN check
+  return number !== number || number === 0 ? 0 : trunc(number);
 };
 
 var toIntegerOrInfinity$5 = toIntegerOrInfinity$6;
@@ -958,11 +960,11 @@ var ownKeys$1 = getBuiltIn$5('Reflect', 'ownKeys') || function ownKeys(it) {
 var hasOwn$8 = hasOwnProperty_1;
 var ownKeys = ownKeys$1;
 var getOwnPropertyDescriptorModule = objectGetOwnPropertyDescriptor;
-var definePropertyModule$4 = objectDefineProperty;
+var definePropertyModule$3 = objectDefineProperty;
 
 var copyConstructorProperties$2 = function (target, source, exceptions) {
   var keys = ownKeys(source);
-  var defineProperty = definePropertyModule$4.f;
+  var defineProperty = definePropertyModule$3.f;
   var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule.f;
   for (var i = 0; i < keys.length; i++) {
     var key = keys[i];
@@ -995,28 +997,28 @@ var POLYFILL = isForced$3.POLYFILL = 'P';
 
 var isForced_1 = isForced$3;
 
-var global$A = global$U;
+var global$j = global$s;
 var getOwnPropertyDescriptor$3 = objectGetOwnPropertyDescriptor.f;
-var createNonEnumerableProperty$4 = createNonEnumerableProperty$7;
+var createNonEnumerableProperty$4 = createNonEnumerableProperty$6;
 var defineBuiltIn$a = defineBuiltIn$b;
-var setGlobal = setGlobal$3;
+var defineGlobalProperty = defineGlobalProperty$3;
 var copyConstructorProperties$1 = copyConstructorProperties$2;
 var isForced$2 = isForced_1;
 
 /*
-  options.target      - name of the target object
-  options.global      - target is the global object
-  options.stat        - export as static methods of target
-  options.proto       - export as prototype methods of target
-  options.real        - real prototype method for the `pure` version
-  options.forced      - export even if the native feature is available
-  options.bind        - bind methods to the target, required for the `pure` version
-  options.wrap        - wrap constructors to preventing global pollution, required for the `pure` version
-  options.unsafe      - use the simple assignment of property instead of delete + defineProperty
-  options.sham        - add a flag to not completely full polyfills
-  options.enumerable  - export as enumerable property
-  options.noTargetGet - prevent calling a getter on target
-  options.name        - the .name of the function if it does not match the key
+  options.target         - name of the target object
+  options.global         - target is the global object
+  options.stat           - export as static methods of target
+  options.proto          - export as prototype methods of target
+  options.real           - real prototype method for the `pure` version
+  options.forced         - export even if the native feature is available
+  options.bind           - bind methods to the target, required for the `pure` version
+  options.wrap           - wrap constructors to preventing global pollution, required for the `pure` version
+  options.unsafe         - use the simple assignment of property instead of delete + defineProperty
+  options.sham           - add a flag to not completely full polyfills
+  options.enumerable     - export as enumerable property
+  options.dontCallGetSet - prevent calling a getter on target
+  options.name           - the .name of the function if it does not match the key
 */
 var _export = function (options, source) {
   var TARGET = options.target;
@@ -1024,15 +1026,15 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$A;
+    target = global$j;
   } else if (STATIC) {
-    target = global$A[TARGET] || setGlobal(TARGET, {});
+    target = global$j[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = (global$A[TARGET] || {}).prototype;
+    target = (global$j[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
-    if (options.noTargetGet) {
+    if (options.dontCallGetSet) {
       descriptor = getOwnPropertyDescriptor$3(target, key);
       targetProperty = descriptor && descriptor.value;
     } else targetProperty = target[key];
@@ -1073,17 +1075,17 @@ var IndexedObject$1 = indexedObject;
 // eslint-disable-next-line es-x/no-object-assign -- safe
 var $assign = Object.assign;
 // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
-var defineProperty$5 = Object.defineProperty;
+var defineProperty$6 = Object.defineProperty;
 var concat$1 = uncurryThis$n([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
 var objectAssign = !$assign || fails$k(function () {
   // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS$7 && $assign({ b: 1 }, $assign(defineProperty$5({}, 'a', {
+  if (DESCRIPTORS$7 && $assign({ b: 1 }, $assign(defineProperty$6({}, 'a', {
     enumerable: true,
     get: function () {
-      defineProperty$5(this, 'b', {
+      defineProperty$6(this, 'b', {
         value: 3,
         enumerable: false
       });
@@ -1403,7 +1405,7 @@ var objectDefineProperties = {};
 
 var DESCRIPTORS$6 = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
-var definePropertyModule$3 = objectDefineProperty;
+var definePropertyModule$2 = objectDefineProperty;
 var anObject$f = anObject$i;
 var toIndexedObject$1 = toIndexedObject$5;
 var objectKeys = objectKeys$2;
@@ -1418,7 +1420,7 @@ objectDefineProperties.f = DESCRIPTORS$6 && !V8_PROTOTYPE_DEFINE_BUG ? Object.de
   var length = keys.length;
   var index = 0;
   var key;
-  while (length > index) definePropertyModule$3.f(O, key = keys[index++], props[key]);
+  while (length > index) definePropertyModule$2.f(O, key = keys[index++], props[key]);
   return O;
 };
 
@@ -1513,7 +1515,7 @@ var objectCreate = Object.create || function create(O, Properties) {
 
 var wellKnownSymbol$j = wellKnownSymbol$l;
 var create$3 = objectCreate;
-var definePropertyModule$2 = objectDefineProperty;
+var defineProperty$5 = objectDefineProperty.f;
 
 var UNSCOPABLES = wellKnownSymbol$j('unscopables');
 var ArrayPrototype$1 = Array.prototype;
@@ -1521,7 +1523,7 @@ var ArrayPrototype$1 = Array.prototype;
 // Array.prototype[@@unscopables]
 // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
 if (ArrayPrototype$1[UNSCOPABLES] == undefined) {
-  definePropertyModule$2.f(ArrayPrototype$1, UNSCOPABLES, {
+  defineProperty$5(ArrayPrototype$1, UNSCOPABLES, {
     configurable: true,
     value: create$3(null)
   });
@@ -1543,7 +1545,6 @@ var correctPrototypeGetter = !fails$j(function () {
   return Object.getPrototypeOf(new F()) !== F.prototype;
 });
 
-var global$z = global$U;
 var hasOwn$7 = hasOwnProperty_1;
 var isCallable$e = isCallable$p;
 var toObject$4 = toObject$7;
@@ -1551,18 +1552,19 @@ var sharedKey = sharedKey$3;
 var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
 
 var IE_PROTO = sharedKey('IE_PROTO');
-var Object$2 = global$z.Object;
-var ObjectPrototype = Object$2.prototype;
+var $Object$1 = Object;
+var ObjectPrototype = $Object$1.prototype;
 
 // `Object.getPrototypeOf` method
 // https://tc39.es/ecma262/#sec-object.getprototypeof
-var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? Object$2.getPrototypeOf : function (O) {
+// eslint-disable-next-line es-x/no-object-getprototypeof -- safe
+var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf : function (O) {
   var object = toObject$4(O);
   if (hasOwn$7(object, IE_PROTO)) return object[IE_PROTO];
   var constructor = object.constructor;
   if (isCallable$e(constructor) && object instanceof constructor) {
     return constructor.prototype;
-  } return object instanceof Object$2 ? ObjectPrototype : null;
+  } return object instanceof $Object$1 ? ObjectPrototype : null;
 };
 
 var fails$i = fails$t;
@@ -1639,15 +1641,14 @@ var createIteratorConstructor$2 = function (IteratorConstructor, NAME, next, ENU
   return IteratorConstructor;
 };
 
-var global$y = global$U;
 var isCallable$c = isCallable$p;
 
-var String$4 = global$y.String;
-var TypeError$c = global$y.TypeError;
+var $String$2 = String;
+var $TypeError$9 = TypeError;
 
 var aPossiblePrototype$1 = function (argument) {
   if (typeof argument == 'object' || isCallable$c(argument)) return argument;
-  throw TypeError$c("Can't set " + String$4(argument) + ' as a prototype');
+  throw $TypeError$9("Can't set " + $String$2(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
@@ -1687,7 +1688,7 @@ var createIteratorConstructor$1 = createIteratorConstructor$2;
 var getPrototypeOf = objectGetPrototypeOf;
 var setPrototypeOf$2 = objectSetPrototypeOf;
 var setToStringTag$3 = setToStringTag$5;
-var createNonEnumerableProperty$3 = createNonEnumerableProperty$7;
+var createNonEnumerableProperty$3 = createNonEnumerableProperty$6;
 var defineBuiltIn$8 = defineBuiltIn$b;
 var wellKnownSymbol$g = wellKnownSymbol$l;
 var Iterators$3 = iterators;
@@ -1880,11 +1881,11 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$x = global$U;
+var global$i = global$s;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
-var createNonEnumerableProperty$2 = createNonEnumerableProperty$7;
+var createNonEnumerableProperty$2 = createNonEnumerableProperty$6;
 var wellKnownSymbol$f = wellKnownSymbol$l;
 
 var ITERATOR$7 = wellKnownSymbol$f('iterator');
@@ -1914,7 +1915,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$x[COLLECTION_NAME] && global$x[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(global$i[COLLECTION_NAME] && global$i[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -1928,14 +1929,13 @@ test$1[TO_STRING_TAG$1] = 'z';
 
 var toStringTagSupport = String(test$1) === '[object z]';
 
-var global$w = global$U;
 var TO_STRING_TAG_SUPPORT = toStringTagSupport;
 var isCallable$a = isCallable$p;
 var classofRaw = classofRaw$1;
 var wellKnownSymbol$d = wellKnownSymbol$l;
 
 var TO_STRING_TAG = wellKnownSymbol$d('toStringTag');
-var Object$1 = global$w.Object;
+var $Object = Object;
 
 // ES3 wrong here
 var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
@@ -1952,26 +1952,25 @@ var classof$7 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
   var O, tag, result;
   return it === undefined ? 'Undefined' : it === null ? 'Null'
     // @@toStringTag case
-    : typeof (tag = tryGet(O = Object$1(it), TO_STRING_TAG)) == 'string' ? tag
+    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
     // builtinTag case
     : CORRECT_ARGUMENTS ? classofRaw(O)
     // ES3 arguments fallback
     : (result = classofRaw(O)) == 'Object' && isCallable$a(O.callee) ? 'Arguments' : result;
 };
 
-var global$v = global$U;
 var classof$6 = classof$7;
 
-var String$3 = global$v.String;
+var $String$1 = String;
 
 var toString$h = function (argument) {
   if (classof$6(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return String$3(argument);
+  return $String$1(argument);
 };
 
 var $$k = _export;
 var DESCRIPTORS$4 = descriptors;
-var global$u = global$U;
+var global$h = global$s;
 var uncurryThis$l = functionUncurryThis;
 var hasOwn$5 = hasOwnProperty_1;
 var isCallable$9 = isCallable$p;
@@ -1980,7 +1979,7 @@ var toString$g = toString$h;
 var defineProperty$2 = objectDefineProperty.f;
 var copyConstructorProperties = copyConstructorProperties$2;
 
-var NativeSymbol = global$u.Symbol;
+var NativeSymbol = global$h.Symbol;
 var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
 
 if (DESCRIPTORS$4 && isCallable$9(NativeSymbol) && (!('description' in SymbolPrototype) ||
@@ -2060,14 +2059,13 @@ var isRegexp = function (it) {
   return isObject$7(it) && ((isRegExp = it[MATCH$2]) !== undefined ? !!isRegExp : classof$5(it) == 'RegExp');
 };
 
-var global$t = global$U;
 var isRegExp$2 = isRegexp;
 
-var TypeError$b = global$t.TypeError;
+var $TypeError$8 = TypeError;
 
 var notARegexp = function (it) {
   if (isRegExp$2(it)) {
-    throw TypeError$b("The method doesn't accept regular expressions");
+    throw $TypeError$8("The method doesn't accept regular expressions");
   } return it;
 };
 
@@ -2239,9 +2237,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$A = ["children"],
+const _excluded$B = ["children"],
       _excluded2$2 = ["children"];
-var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$10 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/grid/Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2415,7 +2413,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2426,7 +2424,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2482,7 +2480,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2499,8 +2497,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$z = ["children", "isCollapse", "css", "contentHeader"];
-var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
+var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
 const StyledDiv$3 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
@@ -2529,7 +2527,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2539,7 +2537,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$$,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2855,8 +2853,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$y = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+const _excluded$z = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+var _jsxFileName$_ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/Toast.js";
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
 const TOP_RIGHT_POSITION = 'top-right';
@@ -3028,7 +3026,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3057,7 +3055,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 212,
       columnNumber: 5
     }
@@ -3069,7 +3067,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 223,
       columnNumber: 9
     }
@@ -3079,7 +3077,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 230,
       columnNumber: 11
     }
@@ -3087,7 +3085,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 231,
       columnNumber: 13
     }
@@ -3095,7 +3093,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 232,
       columnNumber: 15
     }
@@ -3103,7 +3101,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 233,
       columnNumber: 17
     }
@@ -3115,7 +3113,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 234,
       columnNumber: 17
     }
@@ -3123,7 +3121,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 242,
       columnNumber: 21
     }
@@ -3138,7 +3136,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 243,
       columnNumber: 23
     }
@@ -3147,7 +3145,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 257,
       columnNumber: 19
     }
@@ -3162,7 +3160,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 261,
       columnNumber: 17
     }
@@ -3171,7 +3169,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 271,
       columnNumber: 19
     }
@@ -3186,7 +3184,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 275,
       columnNumber: 17
     }
@@ -3210,7 +3208,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+var _jsxFileName$Z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -3258,7 +3256,7 @@ const ToastContainer = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3266,7 +3264,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3277,7 +3275,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3285,8 +3283,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$x = ["id"];
-var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+const _excluded$y = ["id"];
+var _jsxFileName$Y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -3298,7 +3296,7 @@ const ToastProvider = ({
     const {
       id
     } = toast,
-          rest = _objectWithoutPropertiesLoose(toast, _excluded$x); // eslint-disable-next-line no-plusplus
+          rest = _objectWithoutPropertiesLoose(toast, _excluded$y); // eslint-disable-next-line no-plusplus
 
 
     const uniqueId = ++toastCount;
@@ -3328,7 +3326,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3337,7 +3335,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3346,7 +3344,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3355,7 +3353,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3364,14 +3362,14 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 57,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$X = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -3384,14 +3382,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3405,8 +3403,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-const _excluded$w = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+const _excluded$x = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+var _jsxFileName$W = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3492,19 +3490,19 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 95,
     columnNumber: 3
   }
 }), props.children);
 BannerTitle.propTypes = {
-  /**
-   Additional styles of title
+  /**
+   Additional styles of title
   */
   css: PropTypes.object,
 
-  /**
-   Title of the Banner to be displayed
+  /**
+   Title of the Banner to be displayed
   */
   children: PropTypes.string
 };
@@ -3514,19 +3512,19 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 112,
     columnNumber: 3
   }
 }), props.children);
 BannerDescription.propTypes = {
-  /**
-   Additional styles of description
+  /**
+   Additional styles of description
   */
   css: PropTypes.object,
 
-  /**
-   Description of the Banner to be displayed
+  /**
+   Description of the Banner to be displayed
   */
   children: PropTypes.string
 };
@@ -3537,7 +3535,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 129,
     columnNumber: 3
   }
@@ -3549,24 +3547,24 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 131,
     columnNumber: 7
   }
 }, children));
 BannerLink.propTypes = {
-  /**
-   The purpose of a clickable link, presented in url
+  /**
+   The purpose of a clickable link, presented in url
   */
   link: PropTypes.string,
 
-  /**
-   Text of BannerLink to be displayed
+  /**
+   Text of BannerLink to be displayed
   */
   children: PropTypes.string,
 
-  /**
-   Additional theme of BannerLink is presented by color variants
+  /**
+   Additional theme of BannerLink is presented by color variants
   */
   variant: PropTypes.oneOf(['info', 'warning', 'success', 'failed'])
 };
@@ -3576,7 +3574,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 158,
     columnNumber: 3
   }
@@ -3588,7 +3586,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 160,
     columnNumber: 7
   }
@@ -3597,7 +3595,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$V,
+    fileName: _jsxFileName$W,
     lineNumber: 167,
     columnNumber: 9
   }
@@ -3607,7 +3605,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 175,
       columnNumber: 5
     }
@@ -3617,7 +3615,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 176,
       columnNumber: 7
     }
@@ -3630,21 +3628,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 177,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 185,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 186,
       columnNumber: 33
     }
@@ -3653,7 +3651,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 189,
       columnNumber: 11
     }
@@ -3666,7 +3664,7 @@ const SingleTagBanner = props => {
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 194,
       columnNumber: 7
     }
@@ -3675,7 +3673,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 202,
       columnNumber: 9
     }
@@ -3694,7 +3692,7 @@ const Banner = _ref => {
     children,
     bannerBlock
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
@@ -3704,7 +3702,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 210,
       columnNumber: 5
     }
@@ -3721,7 +3719,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 212,
       columnNumber: 9
     }
@@ -3732,7 +3730,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 219,
       columnNumber: 11
     }
@@ -3746,7 +3744,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 222,
       columnNumber: 9
     }
@@ -3757,43 +3755,43 @@ Banner.displayName = 'Banner';
 BannerTitle.displayName = 'BannerTitle';
 BannerDescription.displayName = 'BannerDescription';
 Banner.propTypes = {
-  /**
-   Title of banner to be displayed
+  /**
+   Title of banner to be displayed
   */
   title: PropTypes.string,
 
-  /**
-   Description of banner to be displayed
+  /**
+   Description of banner to be displayed
   */
   description: PropTypes.string,
 
-  /**
-   The banner theme is presented in color variants
+  /**
+   The banner theme is presented in color variants
   */
   variant: PropTypes.oneOf(['info', 'warning', 'success', 'failed']),
 
-  /**
-   The purpose of a clickable link, presented in url
+  /**
+   The purpose of a clickable link, presented in url
   */
   link: PropTypes.string,
 
-  /**
-   Text of button link to be displayed
+  /**
+   Text of button link to be displayed
   */
   linkText: PropTypes.string,
 
-  /**
-   Clickable event handler
+  /**
+   Clickable event handler
   */
   onClick: PropTypes.func,
 
-  /**
-   Closable event handler
+  /**
+   Closable event handler
   */
   onRemove: PropTypes.func,
 
-  /**
-  Block type banner to display in full width
+  /**
+  Block type banner to display in full width
   */
   bannerBlock: PropTypes.bool
 };
@@ -4089,8 +4087,8 @@ const Button$3 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$v = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+const _excluded$w = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/card/Card.js";
 const CardComponent = styled('div', {
   padding: '12px',
   height: 'auto',
@@ -4227,7 +4225,7 @@ const Card$1 = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -4240,7 +4238,7 @@ const Card$1 = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 102,
       columnNumber: 5
     }
@@ -4248,14 +4246,14 @@ const Card$1 = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 113,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 117,
       columnNumber: 13
     }
@@ -4264,14 +4262,14 @@ const Card$1 = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 118,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 124,
       columnNumber: 13
     }
@@ -4297,8 +4295,8 @@ Card$1.defaultProps = {
   title: ''
 };
 
-const _excluded$u = ["children"];
-var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+const _excluded$v = ["children"];
+var _jsxFileName$U = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -4344,7 +4342,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -4355,20 +4353,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4573,8 +4571,8 @@ Badge.defaultProps = {
 };
 Badge.displayName = 'Badge';
 
-const _excluded$t = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+const _excluded$u = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+var _jsxFileName$T = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/avatar/Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -4618,7 +4616,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4627,7 +4625,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4637,7 +4635,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4645,21 +4643,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4676,8 +4674,8 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-const _excluded$s = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
-var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+const _excluded$t = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+var _jsxFileName$S = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/image/Image.js";
 const ContainerFallback = styled(Flex$1, {
   boxSizing: 'border-box',
   border: '2px dashed #C0C4C4',
@@ -4726,7 +4724,7 @@ function Image(_ref) {
     cssFallback,
     rounded
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   if (src || fallback) {
     return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
@@ -4743,7 +4741,7 @@ function Image(_ref) {
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 59,
         columnNumber: 7
       }
@@ -4759,14 +4757,14 @@ function Image(_ref) {
       }, cssFallback),
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 73,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TextFallback, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 74,
         columnNumber: 9
       }
@@ -4774,58 +4772,58 @@ function Image(_ref) {
   }
 }
 Image.propTypes = {
-  /**
-   Additional className for img element.
+  /**
+   Additional className for img element.
    */
   className: PropTypes.string,
 
-  /**
-   Which is used to specify the source of an image.
+  /**
+   Which is used to specify the source of an image.
    */
   src: PropTypes.string,
 
-  /**
-   The written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
+  /**
+   The written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
    */
   alt: PropTypes.string,
 
-  /**
-   Additional css for img element.
+  /**
+   Additional css for img element.
    */
   css: PropTypes.object,
 
-  /**
-   Additional css for default fallback element.
+  /**
+   Additional css for default fallback element.
    */
   cssFallback: PropTypes.object,
 
-  /**
-   Custom width of img element.
+  /**
+   Custom width of img element.
    */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   Custom height of img element.
+  /**
+   Custom height of img element.
    */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   Set image to circle.
+  /**
+   Set image to circle.
    */
   rounded: PropTypes.bool,
 
-  /**
-   Used to specify how an <img> should be resized to fit its container.
+  /**
+   Used to specify how an <img> should be resized to fit its container.
    */
   objectFit: PropTypes.string,
 
-  /**
-   Custom fallback if image url doesn't exist.
+  /**
+   Custom fallback if image url doesn't exist.
    */
   fallback: PropTypes.string,
 
-  /**
-   Custom fallback title for default fallback.
+  /**
+   Custom fallback title for default fallback.
    */
   fallbackTitle: PropTypes.string
 };
@@ -4834,8 +4832,8 @@ Image.defaultProps = {
   fallbackTitle: 'Tidak ada foto'
 };
 
-const _excluded$r = ["children", "label", "color", "css", "withClick", "side", "align"];
-var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+const _excluded$s = ["children", "label", "color", "css", "withClick", "side", "align"];
+var _jsxFileName$R = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
 const {
   zIndices: zIndices$1
 } = foundations;
@@ -4949,13 +4947,13 @@ const Tooltip$1 = _ref => {
     side,
     align
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(Provider, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 91,
       columnNumber: 5
     }
@@ -4963,7 +4961,7 @@ const Tooltip$1 = _ref => {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 92,
       columnNumber: 7
     }
@@ -4971,7 +4969,7 @@ const Tooltip$1 = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 93,
       columnNumber: 9
     }
@@ -4979,14 +4977,14 @@ const Tooltip$1 = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 94,
       columnNumber: 11
     }
   }, children)), /*#__PURE__*/React__default.createElement(TooltipPrimitive.Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 96,
       columnNumber: 9
     }
@@ -4997,7 +4995,7 @@ const Tooltip$1 = _ref => {
     css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 97,
       columnNumber: 11
     }
@@ -5006,7 +5004,7 @@ const Tooltip$1 = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 104,
       columnNumber: 13
     }
@@ -5028,15 +5026,15 @@ Tooltip$1.defaultProps = {
   children: /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 125,
       columnNumber: 13
     }
   })
 };
 
-const _excluded$q = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+const _excluded$r = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+var _jsxFileName$Q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/progress/Progress.js";
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -5154,7 +5152,7 @@ function Progress$1(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
@@ -5170,7 +5168,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -5183,7 +5181,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5206,33 +5204,49 @@ Progress$1.defaultProps = {
   rounded: true
 };
 
-const formLabelStyle = {
-  '& > .form-label': {
-    alignItems: 'start !important',
-    '& > div': {
-      width: 175
-    },
-    '& > div > span[role="label"]': {
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
+
+const _excluded$q = ["count", "maxCount", "css"];
+var _jsxFileName$P = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
+const formLabelClassStyle = {
+  alignItems: 'start !important',
+  '& > div': {
+    width: 175
+  },
+  '& > div > span[role="label"]': {
+    color: '$textPrimary',
+    fontSize: '$label',
+    fontWeight: 500,
+    lineHeight: '$label',
+    letterSpacings: '$label',
+    '@md': {
       color: '$textPrimary',
-      fontSize: '$label',
-      fontWeight: 500,
-      lineHeight: '$label',
-      letterSpacings: '$label',
-      '@md': {
-        color: '$textPrimary',
-        fontSize: '$section-sub-title',
-        fontWeight: 600,
-        lineHeight: '$section-sub-title',
-        letterSpacings: '$section-sub-title'
-      }
+      fontSize: '$section-sub-title',
+      fontWeight: 600,
+      lineHeight: '$section-sub-title',
+      letterSpacings: '$section-sub-title'
     }
   }
 };
-const FormGroup = styled('div', {
+const formLabelStyle = {
+  '& > .form-label': Object.assign({}, formLabelClassStyle)
+};
+const StyledFormGroup = styled('div', {
   display: 'grid',
   gridTemplateColumns: '1fr',
   rowGap: '$spacing-03',
   variants: {
+    withCounter: {
+      true: {
+        '& > .form-label': Object.assign({
+          marginTop: '-24px'
+        }, formLabelClassStyle)
+      }
+    },
     responsive: {
       input: Object.assign({
         display: 'grid',
@@ -5294,10 +5308,64 @@ const FormGroup = styled('div', {
     }
   }
 });
+
+const FormGroup = _ref => {
+  let {
+    count,
+    maxCount,
+    css
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+
+  const withCounter = Boolean(count || maxCount);
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: withCounter,
+    wrapper: children => /*#__PURE__*/React__default.createElement(Flex$1, {
+      direction: "column",
+      css: css,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 115,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "label",
+      color: "disable",
+      css: {
+        alignSelf: 'end',
+        marginBottom: '$spacing-03'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$P,
+        lineNumber: 116,
+        columnNumber: 11
+      }
+    }, count, "/", maxCount), children),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 112,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledFormGroup, _extends({
+    withCounter: withCounter,
+    css: Object.assign({}, !withCounter && Object.assign({}, css))
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$P,
+      lineNumber: 123,
+      columnNumber: 7
+    }
+  })));
+};
+
 FormGroup.displayName = 'FormGroup';
 
 const _excluded$p = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
-var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
+var _jsxFileName$O = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -5417,7 +5485,7 @@ FormLabel.defaultProps = {
 FormLabel.displayName = 'FormLabel';
 
 const _excluded$o = ["children", "error", "errorMessage"];
-var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+var _jsxFileName$N = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -5478,7 +5546,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+var _jsxFileName$M = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/CheckboxGroup.js";
 const CheckboxContext = /*#__PURE__*/createContext();
 
 const CheckboxGroup = ({
@@ -5541,7 +5609,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$L = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
 
 const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5589,7 +5657,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   }
 }));
 
-var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+var _jsxFileName$K = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
 
 const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5638,7 +5706,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }));
 
 const _excluded$n = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+var _jsxFileName$J = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -5804,7 +5872,7 @@ InputCheckbox.propTypes = {
 InputCheckbox.displayName = 'InputCheckbox';
 
 const _excluded$m = ["children", "size"];
-var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+var _jsxFileName$I = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -5951,13 +6019,13 @@ const InputGroup = _ref => {
   }));
 };
 InputGroup.propTypes = {
-  /**
-    Adjust Input Text Size
+  /**
+    Adjust Input Text Size
    */
   size: PropTypes.oneOf(['sm', 'lg']),
 
-  /**
-    Children must be InputText, InputAddon, or InputPrefixes
+  /**
+    Children must be InputText, InputAddon, or InputPrefixes
    */
   children: PropTypes.node.isRequired,
 
@@ -6123,7 +6191,7 @@ InputSuffix.propTypes = {
 };
 
 const _excluded$l = ["disabled", "readOnly"];
-var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
+var _jsxFileName$H = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputText/InputText.js";
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -6201,6 +6269,8 @@ const StyledInput$1 = styled('input', {
     },
     inputGroup: {
       true: {
+        paddingLeft: 0,
+        paddingRight: 0,
         border: 'none',
         borderRadius: '$lg',
         '&:focus': {
@@ -6220,7 +6290,7 @@ const StyledInput$1 = styled('input', {
             color: '$textDisable'
           },
           '&:hover': {
-            border: '1px solid $colors$gray300'
+            border: 'none'
           }
         }
       }
@@ -6277,7 +6347,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$H,
-      lineNumber: 151,
+      lineNumber: 153,
       columnNumber: 3
     }
   }));
@@ -6285,7 +6355,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 InputText.displayName = 'InputText';
 
 const _excluded$k = ["disabled", "readOnly"];
-var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
+var _jsxFileName$G = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTextArea/InputTextArea.js";
 const StyledTextArea = styled(StyledInput$1, {
   variants: {
     size: {
@@ -6311,15 +6381,15 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const textareaRef = useRef(null);
   useEffect(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '60px';
+      textareaRef.current.style.height = '50px';
       const scrollHeight = textareaRef == null ? void 0 : textareaRef.current.scrollHeight;
-      textareaRef.current.style.height = scrollHeight + 20 + 'px';
+      textareaRef.current.style.height = scrollHeight + 5 + 'px';
     }
   }, []);
 
   function handleKeyDown(e) {
-    e.target.style.height = '60px';
-    e.target.style.height = `${e.target.scrollHeight + 20}px`;
+    e.target.style.height = '50px';
+    e.target.style.height = `${e.target.scrollHeight + 5}px`;
   }
 
   return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
@@ -6351,7 +6421,7 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__default.createContext();
 
-var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+var _jsxFileName$F = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
   return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
@@ -6384,7 +6454,7 @@ InputRadioGroup.propTypes = {
 InputRadioGroup.displayName = 'InputRadioGroup';
 
 const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
-var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+var _jsxFileName$E = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -6475,8 +6545,8 @@ const Container$8 = styled(Flex$1, {
     outlined: {
       true: {
         border: '1px solid $gray300',
-        borderRadius: 8,
-        padding: 8,
+        borderRadius: '$lg',
+        padding: '$spacing-03',
         '& > input': {
           border: 'none !important',
           padding: '0px !important',
@@ -6508,8 +6578,20 @@ const Container$8 = styled(Flex$1, {
           color: '$textSecondary !important'
         }
       }
+    },
+    withInputProps: {
+      true: {
+        padding: '0 $spacing-03'
+      }
     }
-  }
+  },
+  compoundVariants: [{
+    outlined: true,
+    withInputProps: true,
+    css: {
+      padding: '0 $spacing-03'
+    }
+  }]
 });
 const InputRadio = _ref => {
   let {
@@ -6527,12 +6609,12 @@ const InputRadio = _ref => {
     switch (type) {
       case 'number':
         return /*#__PURE__*/React__default.createElement(InputNumber, _extends({}, inputProps, {
-          disabled: disabled || checked !== props.value,
           readOnly: readOnly || checked !== props.value,
+          inputGroup: true,
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 146,
+            lineNumber: 160,
             columnNumber: 11
           }
         }));
@@ -6541,10 +6623,11 @@ const InputRadio = _ref => {
         return /*#__PURE__*/React__default.createElement(InputText, _extends({}, inputProps, {
           disabled: disabled || checked !== props.value,
           readOnly: readOnly || checked !== props.value,
+          inputGroup: true,
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 155,
+            lineNumber: 169,
             columnNumber: 11
           }
         }));
@@ -6564,7 +6647,7 @@ const InputRadio = _ref => {
           __self: this,
           __source: {
             fileName: _jsxFileName$E,
-            lineNumber: 164,
+            lineNumber: 179,
             columnNumber: 11
           }
         }, props.label);
@@ -6575,7 +6658,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 183,
+      lineNumber: 198,
       columnNumber: 5
     }
   }, ({
@@ -6590,11 +6673,12 @@ const InputRadio = _ref => {
       disabledOutlined: outlined && (readOnly || disabled),
       disabled: disabled,
       active: outlined && checked === props.value && !disabled && !readOnly,
+      withInputProps: !!inputProps,
       css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 188,
+        lineNumber: 203,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -6603,7 +6687,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 196,
+        lineNumber: 212,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
@@ -6614,14 +6698,14 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 197,
+        lineNumber: 213,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 198,
+        lineNumber: 214,
         columnNumber: 17
       }
     })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
@@ -6633,7 +6717,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 203,
+        lineNumber: 219,
         columnNumber: 15
       }
     }, description));
@@ -6682,7 +6766,7 @@ InputRightElement.propTypes = {
 InputRightElement.name = 'InputRightElement';
 
 const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled"];
-var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputNumber\\InputNumber.js";
+var _jsxFileName$D = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputNumber/InputNumber.js";
 const StyledInput = styled(NumberFormat, {
   // Reset
   appearance: 'none',
@@ -6753,6 +6837,8 @@ const StyledInput = styled(NumberFormat, {
     },
     inputGroup: {
       true: {
+        paddingLeft: 0,
+        paddingRight: 0,
         border: 'none',
         borderRadius: '$lg',
         '&:focus': {
@@ -6772,7 +6858,7 @@ const StyledInput = styled(NumberFormat, {
             color: '$textDisable'
           },
           '&:hover': {
-            border: '1px solid $colors$gray300'
+            border: 'none'
           }
         }
       }
@@ -6839,7 +6925,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 150,
+      lineNumber: 152,
       columnNumber: 3
     }
   }));
@@ -6892,6 +6978,7 @@ var regexpFlags$1 = function () {
   if (that.multiline) result += 'm';
   if (that.dotAll) result += 's';
   if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
   if (that.sticky) result += 'y';
   return result;
 };
@@ -6910,10 +6997,10 @@ var regexpGetFlags = function (R) {
 };
 
 var fails$g = fails$t;
-var global$s = global$U;
+var global$g = global$s;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
-var $RegExp$2 = global$s.RegExp;
+var $RegExp$2 = global$g.RegExp;
 
 var UNSUPPORTED_Y$3 = fails$g(function () {
   var re = $RegExp$2('a', 'y');
@@ -6970,10 +7057,10 @@ var setSpecies$2 = function (CONSTRUCTOR_NAME) {
 };
 
 var fails$f = fails$t;
-var global$r = global$U;
+var global$f = global$s;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
-var $RegExp$1 = global$r.RegExp;
+var $RegExp$1 = global$f.RegExp;
 
 var regexpUnsupportedDotAll = fails$f(function () {
   var re = $RegExp$1('.', 's');
@@ -6981,10 +7068,10 @@ var regexpUnsupportedDotAll = fails$f(function () {
 });
 
 var fails$e = fails$t;
-var global$q = global$U;
+var global$e = global$s;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
-var $RegExp = global$q.RegExp;
+var $RegExp = global$e.RegExp;
 
 var regexpUnsupportedNcg = fails$e(function () {
   var re = $RegExp('(?<a>b)', 'g');
@@ -6993,11 +7080,11 @@ var regexpUnsupportedNcg = fails$e(function () {
 });
 
 var DESCRIPTORS$2 = descriptors;
-var global$p = global$U;
+var global$d = global$s;
 var uncurryThis$j = functionUncurryThis;
 var isForced$1 = isForced_1;
 var inheritIfRequired = inheritIfRequired$1;
-var createNonEnumerableProperty$1 = createNonEnumerableProperty$7;
+var createNonEnumerableProperty$1 = createNonEnumerableProperty$6;
 var getOwnPropertyNames = objectGetOwnPropertyNames.f;
 var isPrototypeOf$2 = objectIsPrototypeOf;
 var isRegExp$1 = isRegexp;
@@ -7015,15 +7102,15 @@ var UNSUPPORTED_DOT_ALL$1 = regexpUnsupportedDotAll;
 var UNSUPPORTED_NCG$1 = regexpUnsupportedNcg;
 
 var MATCH = wellKnownSymbol$9('match');
-var NativeRegExp = global$p.RegExp;
+var NativeRegExp = global$d.RegExp;
 var RegExpPrototype$2 = NativeRegExp.prototype;
-var SyntaxError = global$p.SyntaxError;
+var SyntaxError = global$d.SyntaxError;
 var exec$6 = uncurryThis$j(RegExpPrototype$2.exec);
 var charAt$8 = uncurryThis$j(''.charAt);
 var replace$6 = uncurryThis$j(''.replace);
 var stringIndexOf$1 = uncurryThis$j(''.indexOf);
 var stringSlice$9 = uncurryThis$j(''.slice);
-// TODO: Use only propper RegExpIdentifierName
+// TODO: Use only proper RegExpIdentifierName
 var IS_NCG = /^\?<[^\s\d!#%&*+<=>@^][^\s!#%&*+<=>@^]*>/;
 var re1 = /a/g;
 var re2 = /a/g;
@@ -7177,7 +7264,7 @@ if (isForced$1('RegExp', BASE_FORCED)) {
 
   RegExpPrototype$2.constructor = RegExpWrapper;
   RegExpWrapper.prototype = RegExpPrototype$2;
-  defineBuiltIn$7(global$p, 'RegExp', RegExpWrapper, { constructor: true });
+  defineBuiltIn$7(global$d, 'RegExp', RegExpWrapper, { constructor: true });
 }
 
 // https://tc39.es/ecma262/#sec-get-regexp-@@species
@@ -7278,7 +7365,7 @@ if (PATCH) {
     }
     if (NPCG_INCLUDED && match && match.length > 1) {
       // Fix browsers whose `exec` methods don't consistently return `undefined`
-      // for NPCG, like IE8. NOTE: This doesn' work for /(.?)?/
+      // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
       call$f(nativeReplace, match[0], reCopy, function () {
         for (i = 1; i < arguments.length - 2; i++) {
           if (arguments[i] === undefined) match[i] = undefined;
@@ -7336,7 +7423,7 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 }
 
 const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
-var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
+var _jsxFileName$C = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tag/Tag.js";
 const TagWrapper$3 = styled('div', {
   boxSizing: 'border-box',
   listStyle: 'none',
@@ -7513,7 +7600,7 @@ Tag.defaultProps = {
 };
 
 const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
-var _jsxFileName$B = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
+var _jsxFileName$B = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
 const Wrapper$2 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -7813,7 +7900,7 @@ TagsInput.defaultProps = {
 };
 
 const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
+var _jsxFileName$A = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
 const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
   display: 'block',
   width: '16px',
@@ -7921,7 +8008,7 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
-var _jsxFileName$z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
+var _jsxFileName$z = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
 
 const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
@@ -7982,7 +8069,7 @@ SvgCloseFilled.defaultProps = {
   size: 24
 };
 
-var _jsxFileName$y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
+var _jsxFileName$y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
 
 const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
@@ -8025,7 +8112,7 @@ SvgSearchOutline.defaultProps = {
 };
 
 const _excluded$e = ["size", "onChange", "css", "disabled"];
-var _jsxFileName$x = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
+var _jsxFileName$x = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 
 const InputSearchbox = _ref => {
   let {
@@ -8140,7 +8227,7 @@ var defineBuiltIn$5 = defineBuiltIn$b;
 var regexpExec$2 = regexpExec$3;
 var fails$b = fails$t;
 var wellKnownSymbol$8 = wellKnownSymbol$l;
-var createNonEnumerableProperty = createNonEnumerableProperty$7;
+var createNonEnumerableProperty = createNonEnumerableProperty$6;
 
 var SPECIES$2 = wellKnownSymbol$8('species');
 var RegExpPrototype = RegExp.prototype;
@@ -8215,14 +8302,13 @@ var sameValue$1 = Object.is || function is(x, y) {
   return x === y ? x !== 0 || 1 / x === 1 / y : x != x && y != y;
 };
 
-var global$o = global$U;
 var call$e = functionCall;
 var anObject$a = anObject$i;
 var isCallable$7 = isCallable$p;
 var classof$4 = classofRaw$1;
 var regexpExec$1 = regexpExec$3;
 
-var TypeError$a = global$o.TypeError;
+var $TypeError$7 = TypeError;
 
 // `RegExpExec` abstract operation
 // https://tc39.es/ecma262/#sec-regexpexec
@@ -8234,7 +8320,7 @@ var regexpExecAbstract = function (R, S) {
     return result;
   }
   if (classof$4(R) === 'RegExp') return call$e(regexpExec$1, R, S);
-  throw TypeError$a('RegExp#exec called on incompatible receiver');
+  throw $TypeError$7('RegExp#exec called on incompatible receiver');
 };
 
 var call$d = functionCall;
@@ -8274,12 +8360,6 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-const ConditionalWrapper = ({
-  condition,
-  wrapper,
-  children
-}) => condition ? wrapper(children) : children;
-
 const SelectContainer = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -8788,7 +8868,8 @@ function InputSelect(_a) {
           suppressRefError: true
         }), {
           css: {
-            display: isOpen ? 'block' : 'none'
+            display: isOpen ? 'block' : 'none',
+            zIndex: '$popover'
           },
           placement: placement
         }, {
@@ -8865,6 +8946,14 @@ function InputSelect(_a) {
   }), void 0);
 }
 
+var tryToString$3 = tryToString$5;
+
+var $TypeError$6 = TypeError;
+
+var deletePropertyOrThrow$1 = function (O, P) {
+  if (!delete O[P]) throw $TypeError$6('Cannot delete property ' + tryToString$3(P) + ' of ' + tryToString$3(O));
+};
+
 var toPropertyKey = toPropertyKey$3;
 var definePropertyModule = objectDefineProperty;
 var createPropertyDescriptor$1 = createPropertyDescriptor$5;
@@ -8875,19 +8964,18 @@ var createProperty$2 = function (object, key, value) {
   else object[propertyKey] = value;
 };
 
-var global$n = global$U;
 var toAbsoluteIndex = toAbsoluteIndex$2;
 var lengthOfArrayLike$4 = lengthOfArrayLike$6;
 var createProperty$1 = createProperty$2;
 
-var Array$2 = global$n.Array;
+var $Array$1 = Array;
 var max$1 = Math.max;
 
 var arraySliceSimple = function (O, start, end) {
   var length = lengthOfArrayLike$4(O);
   var k = toAbsoluteIndex(start, length);
   var fin = toAbsoluteIndex(end === undefined ? length : end, length);
-  var result = Array$2(max$1(fin - k, 0));
+  var result = $Array$1(max$1(fin - k, 0));
   for (var n = 0; k < fin; k++, n++) createProperty$1(result, n, O[k]);
   result.length = n;
   return result;
@@ -8969,6 +9057,7 @@ var uncurryThis$g = functionUncurryThis;
 var aCallable$7 = aCallable$9;
 var toObject$3 = toObject$7;
 var lengthOfArrayLike$3 = lengthOfArrayLike$6;
+var deletePropertyOrThrow = deletePropertyOrThrow$1;
 var toString$b = toString$h;
 var fails$9 = fails$t;
 var internalSort = arraySort$1;
@@ -9063,19 +9152,18 @@ $$g({ target: 'Array', proto: true, forced: FORCED$3 }, {
     index = 0;
 
     while (index < itemsLength) array[index] = items[index++];
-    while (index < arrayLength) delete array[index++];
+    while (index < arrayLength) deletePropertyOrThrow(array, index++);
 
     return array;
   }
 });
 
-var global$m = global$U;
 var aCallable$6 = aCallable$9;
 var toObject$2 = toObject$7;
 var IndexedObject = indexedObject;
 var lengthOfArrayLike$2 = lengthOfArrayLike$6;
 
-var TypeError$9 = global$m.TypeError;
+var $TypeError$5 = TypeError;
 
 // `Array.prototype.{ reduce, reduceRight }` methods implementation
 var createMethod$2 = function (IS_RIGHT) {
@@ -9094,7 +9182,7 @@ var createMethod$2 = function (IS_RIGHT) {
       }
       index += i;
       if (IS_RIGHT ? index < 0 : length <= index) {
-        throw TypeError$9('Reduce of empty array with no initial value');
+        throw $TypeError$5('Reduce of empty array with no initial value');
       }
     }
     for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
@@ -9114,20 +9202,20 @@ var arrayReduce = {
 };
 
 var classof$3 = classofRaw$1;
-var global$l = global$U;
+var global$c = global$s;
 
-var engineIsNode = classof$3(global$l.process) == 'process';
+var engineIsNode = classof$3(global$c.process) == 'process';
 
 var $$f = _export;
 var $reduce = arrayReduce.left;
 var arrayMethodIsStrict = arrayMethodIsStrict$2;
 var CHROME_VERSION = engineV8Version;
-var IS_NODE$3 = engineIsNode;
+var IS_NODE$4 = engineIsNode;
 
 var STRICT_METHOD = arrayMethodIsStrict('reduce');
 // Chrome 80-82 has a critical bug
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
-var CHROME_BUG = !IS_NODE$3 && CHROME_VERSION > 79 && CHROME_VERSION < 83;
+var CHROME_BUG = !IS_NODE$4 && CHROME_VERSION > 79 && CHROME_VERSION < 83;
 
 // `Array.prototype.reduce` method
 // https://tc39.es/ecma262/#sec-array.prototype.reduce
@@ -9138,7 +9226,7 @@ $$f({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\icon\\CheckOutline.js";
+var _jsxFileName$w = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/icon/CheckOutline.js";
 
 const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -9187,7 +9275,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }));
 
 const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter"];
-var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
+var _jsxFileName$v = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -10033,7 +10121,7 @@ InputSelectCheck.defaultProps = {
   labelCounter: 'Item terpilih'
 };
 
-var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
+var _jsxFileName$u = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
 const InputSelectTag = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InputSelectCheck, _extends({
     ref: ref,
@@ -10084,7 +10172,7 @@ InputSelectTag.defaultProps = {
   labelCounter: 'Item terpilih'
 };
 
-var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
+var _jsxFileName$t = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
 const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -10849,15 +10937,15 @@ var stringTrim = {
   trim: createMethod$1(3)
 };
 
-var global$k = global$U;
+var global$b = global$s;
 var fails$8 = fails$t;
 var uncurryThis$d = functionUncurryThis;
 var toString$8 = toString$h;
 var trim$1 = stringTrim.trim;
 var whitespaces$2 = whitespaces$4;
 
-var $parseInt$1 = global$k.parseInt;
-var Symbol$6 = global$k.Symbol;
+var $parseInt$1 = global$b.parseInt;
+var Symbol$6 = global$b.Symbol;
 var ITERATOR$6 = Symbol$6 && Symbol$6.iterator;
 var hex = /^[+-]?0x/i;
 var exec$4 = uncurryThis$d(hex.exec);
@@ -11076,7 +11164,7 @@ InputCounter.defaultProps = {
 };
 
 const _excluded$c = ["children"];
-var _jsxFileName$s = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+var _jsxFileName$s = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/popover/Popover.js";
 const {
   zIndices
 } = foundations;
@@ -11210,7 +11298,7 @@ Popover.propTypes = {
 Popover.displayName = 'Popover';
 
 const _excluded$b = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-var _jsxFileName$r = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
+var _jsxFileName$r = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/slider/Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -11555,7 +11643,7 @@ Slider.defaultProps = {
 };
 
 const _excluded$a = ["className", "children", "onClick", "type", "size"];
-var _jsxFileName$q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tagStatus\\TagStatus.js";
+var _jsxFileName$q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tagStatus/TagStatus.js";
 const TagWrapper = styled('div', {
   boxSizing: 'border-box',
   fontSize: '12px',
@@ -11721,7 +11809,7 @@ const _excluded$9 = ["children"],
       _excluded2$1 = ["children", "activeTabs"],
       _excluded3 = ["children", "icon", "activeTabs", "value"],
       _excluded4 = ["activeTabs"];
-var _jsxFileName$p = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tabs\\Tabs.js";
+var _jsxFileName$p = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tabs/Tabs.js";
 const StyledTabs = styled(TabsPrimitive.Root, {
   display: 'flex',
   flexDirection: 'column',
@@ -12072,7 +12160,7 @@ Separator$2.displayName = 'Separator';
 
 const _excluded$8 = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
       _excluded2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-var _jsxFileName$o = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
+var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
 const ButtonGroupComponent = styled(ToggleGroupPrimitive.Root, {
   display: 'inline-flex',
   borderRadius: '$md',
@@ -12300,7 +12388,7 @@ ButtonGroupItem.defaultProps = {
 };
 
 const _excluded$7 = ["children"];
-var _jsxFileName$n = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
+var _jsxFileName$n = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
   display: 'inline-flex',
@@ -12444,7 +12532,7 @@ NotificationBadge.propTypes = {
 };
 
 const _excluded$6 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$m = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
+var _jsxFileName$m = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/paper/Paper.js";
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -12655,14 +12743,13 @@ DialogClose.displayName = 'DialogClose';
 DialogOverlay.displayName = 'DialogOverlay';
 DialogPortal.displayName = 'DialogPortal';
 
-var global$j = global$U;
 var isPrototypeOf$1 = objectIsPrototypeOf;
 
-var TypeError$8 = global$j.TypeError;
+var $TypeError$4 = TypeError;
 
 var anInstance$3 = function (it, Prototype) {
   if (isPrototypeOf$1(Prototype, it)) return it;
-  throw TypeError$8('Incorrect invocation');
+  throw $TypeError$4('Incorrect invocation');
 };
 
 var uncurryThis$c = functionUncurryThis;
@@ -12718,16 +12805,15 @@ var isConstructor$2 = !construct || fails$7(function () {
     || called;
 }) ? isConstructorLegacy : isConstructorModern;
 
-var global$i = global$U;
 var isConstructor$1 = isConstructor$2;
-var tryToString$2 = tryToString$4;
+var tryToString$2 = tryToString$5;
 
-var TypeError$7 = global$i.TypeError;
+var $TypeError$3 = TypeError;
 
 // `Assert: IsConstructor(argument) is true`
 var aConstructor$1 = function (argument) {
   if (isConstructor$1(argument)) return argument;
-  throw TypeError$7(tryToString$2(argument) + ' is not a constructor');
+  throw $TypeError$3(tryToString$2(argument) + ' is not a constructor');
 };
 
 var anObject$8 = anObject$i;
@@ -12773,12 +12859,10 @@ var uncurryThis$a = functionUncurryThis;
 
 var arraySlice$3 = uncurryThis$a([].slice);
 
-var global$h = global$U;
-
-var TypeError$6 = global$h.TypeError;
+var $TypeError$2 = TypeError;
 
 var validateArgumentsLength$3 = function (passed, required) {
-  if (passed < required) throw TypeError$6('Not enough arguments');
+  if (passed < required) throw $TypeError$2('Not enough arguments');
   return passed;
 };
 
@@ -12786,7 +12870,7 @@ var userAgent$2 = engineUserAgent;
 
 var engineIsIos = /(?:ipad|iphone|ipod).*applewebkit/i.test(userAgent$2);
 
-var global$g = global$U;
+var global$a = global$s;
 var apply$2 = functionApply;
 var bind$6 = functionBindContext;
 var isCallable$5 = isCallable$p;
@@ -12797,15 +12881,15 @@ var arraySlice$2 = arraySlice$3;
 var createElement = documentCreateElement$2;
 var validateArgumentsLength$2 = validateArgumentsLength$3;
 var IS_IOS$1 = engineIsIos;
-var IS_NODE$2 = engineIsNode;
+var IS_NODE$3 = engineIsNode;
 
-var set = global$g.setImmediate;
-var clear = global$g.clearImmediate;
-var process$2 = global$g.process;
-var Dispatch = global$g.Dispatch;
-var Function$1 = global$g.Function;
-var MessageChannel = global$g.MessageChannel;
-var String$2 = global$g.String;
+var set = global$a.setImmediate;
+var clear = global$a.clearImmediate;
+var process$2 = global$a.process;
+var Dispatch = global$a.Dispatch;
+var Function$1 = global$a.Function;
+var MessageChannel = global$a.MessageChannel;
+var String$1 = global$a.String;
 var counter = 0;
 var queue$1 = {};
 var ONREADYSTATECHANGE = 'onreadystatechange';
@@ -12813,7 +12897,7 @@ var location, defer, channel, port;
 
 try {
   // Deno throws a ReferenceError on `location` access without `--location` flag
-  location = global$g.location;
+  location = global$a.location;
 } catch (error) { /* empty */ }
 
 var run = function (id) {
@@ -12836,7 +12920,7 @@ var listener = function (event) {
 
 var post = function (id) {
   // old engines have not location.origin
-  global$g.postMessage(String$2(id), location.protocol + '//' + location.host);
+  global$a.postMessage(String$1(id), location.protocol + '//' + location.host);
 };
 
 // Node.js 0.9+ & IE10+ has setImmediate, otherwise:
@@ -12855,7 +12939,7 @@ if (!set || !clear) {
     delete queue$1[id];
   };
   // Node.js 0.8-
-  if (IS_NODE$2) {
+  if (IS_NODE$3) {
     defer = function (id) {
       process$2.nextTick(runner(id));
     };
@@ -12874,14 +12958,14 @@ if (!set || !clear) {
   // Browsers with postMessage, skip WebWorkers
   // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
   } else if (
-    global$g.addEventListener &&
-    isCallable$5(global$g.postMessage) &&
-    !global$g.importScripts &&
+    global$a.addEventListener &&
+    isCallable$5(global$a.postMessage) &&
+    !global$a.importScripts &&
     location && location.protocol !== 'file:' &&
     !fails$6(post)
   ) {
     defer = post;
-    global$g.addEventListener('message', listener, false);
+    global$a.addEventListener('message', listener, false);
   // IE8-
   } else if (ONREADYSTATECHANGE in createElement('script')) {
     defer = function (id) {
@@ -12904,29 +12988,29 @@ var task$1 = {
 };
 
 var userAgent$1 = engineUserAgent;
-var global$f = global$U;
+var global$9 = global$s;
 
-var engineIsIosPebble = /ipad|iphone|ipod/i.test(userAgent$1) && global$f.Pebble !== undefined;
+var engineIsIosPebble = /ipad|iphone|ipod/i.test(userAgent$1) && global$9.Pebble !== undefined;
 
 var userAgent = engineUserAgent;
 
 var engineIsWebosWebkit = /web0s(?!.*chrome)/i.test(userAgent);
 
-var global$e = global$U;
+var global$8 = global$s;
 var bind$5 = functionBindContext;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var macrotask = task$1.set;
 var IS_IOS = engineIsIos;
 var IS_IOS_PEBBLE = engineIsIosPebble;
 var IS_WEBOS_WEBKIT = engineIsWebosWebkit;
-var IS_NODE$1 = engineIsNode;
+var IS_NODE$2 = engineIsNode;
 
-var MutationObserver = global$e.MutationObserver || global$e.WebKitMutationObserver;
-var document$2 = global$e.document;
-var process$1 = global$e.process;
-var Promise$1 = global$e.Promise;
+var MutationObserver = global$8.MutationObserver || global$8.WebKitMutationObserver;
+var document$2 = global$8.document;
+var process$1 = global$8.process;
+var Promise$1 = global$8.Promise;
 // Node.js 11 shows ExperimentalWarning on getting `queueMicrotask`
-var queueMicrotaskDescriptor = getOwnPropertyDescriptor$1(global$e, 'queueMicrotask');
+var queueMicrotaskDescriptor = getOwnPropertyDescriptor$1(global$8, 'queueMicrotask');
 var queueMicrotask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value;
 
 var flush, head, last, notify$1, toggle, node, promise, then;
@@ -12935,7 +13019,7 @@ var flush, head, last, notify$1, toggle, node, promise, then;
 if (!queueMicrotask) {
   flush = function () {
     var parent, fn;
-    if (IS_NODE$1 && (parent = process$1.domain)) parent.exit();
+    if (IS_NODE$2 && (parent = process$1.domain)) parent.exit();
     while (head) {
       fn = head.fn;
       head = head.next;
@@ -12952,7 +13036,7 @@ if (!queueMicrotask) {
 
   // browsers with MutationObserver, except iOS - https://github.com/zloirock/core-js/issues/339
   // also except WebOS Webkit https://github.com/zloirock/core-js/issues/898
-  if (!IS_IOS && !IS_NODE$1 && !IS_WEBOS_WEBKIT && MutationObserver && document$2) {
+  if (!IS_IOS && !IS_NODE$2 && !IS_WEBOS_WEBKIT && MutationObserver && document$2) {
     toggle = true;
     node = document$2.createTextNode('');
     new MutationObserver(flush).observe(node, { characterData: true });
@@ -12970,7 +13054,7 @@ if (!queueMicrotask) {
       then(flush);
     };
   // Node.js without promises
-  } else if (IS_NODE$1) {
+  } else if (IS_NODE$2) {
     notify$1 = function () {
       process$1.nextTick(flush);
     };
@@ -12982,7 +13066,7 @@ if (!queueMicrotask) {
   // - setTimeout
   } else {
     // strange IE + webpack dev server bug - use .bind(global)
-    macrotask = bind$5(macrotask, global$e);
+    macrotask = bind$5(macrotask, global$8);
     notify$1 = function () {
       macrotask(flush);
     };
@@ -12998,10 +13082,10 @@ var microtask$1 = queueMicrotask || function (fn) {
   } last = task;
 };
 
-var global$d = global$U;
+var global$7 = global$s;
 
 var hostReportErrors$1 = function (a, b) {
-  var console = global$d.console;
+  var console = global$7.console;
   if (console && console.error) {
     arguments.length == 1 ? console.error(a) : console.error(a, b);
   }
@@ -13039,25 +13123,35 @@ Queue$1.prototype = {
 
 var queue = Queue$1;
 
-var global$c = global$U;
+var global$6 = global$s;
+
+var promiseNativeConstructor = global$6.Promise;
+
+/* global Deno -- Deno case */
 
-var promiseNativeConstructor = global$c.Promise;
+var engineIsDeno = typeof Deno == 'object' && Deno && typeof Deno.version == 'object';
+
+var IS_DENO$1 = engineIsDeno;
+var IS_NODE$1 = engineIsNode;
 
-var engineIsBrowser = typeof window == 'object' && typeof Deno != 'object';
+var engineIsBrowser = !IS_DENO$1 && !IS_NODE$1
+  && typeof window == 'object'
+  && typeof document == 'object';
 
-var global$b = global$U;
+var global$5 = global$s;
 var NativePromiseConstructor$3 = promiseNativeConstructor;
 var isCallable$4 = isCallable$p;
 var isForced = isForced_1;
 var inspectSource = inspectSource$4;
 var wellKnownSymbol$6 = wellKnownSymbol$l;
 var IS_BROWSER = engineIsBrowser;
+var IS_DENO = engineIsDeno;
 var V8_VERSION = engineV8Version;
 
 NativePromiseConstructor$3 && NativePromiseConstructor$3.prototype;
 var SPECIES = wellKnownSymbol$6('species');
 var SUBCLASSING = false;
-var NATIVE_PROMISE_REJECTION_EVENT$1 = isCallable$4(global$b.PromiseRejectionEvent);
+var NATIVE_PROMISE_REJECTION_EVENT$1 = isCallable$4(global$5.PromiseRejectionEvent);
 
 var FORCED_PROMISE_CONSTRUCTOR$5 = isForced('Promise', function () {
   var PROMISE_CONSTRUCTOR_SOURCE = inspectSource(NativePromiseConstructor$3);
@@ -13069,18 +13163,18 @@ var FORCED_PROMISE_CONSTRUCTOR$5 = isForced('Promise', function () {
   // We can't use @@species feature detection in V8 since it causes
   // deoptimization and performance degradation
   // https://github.com/zloirock/core-js/issues/679
-  if (V8_VERSION >= 51 && /native code/.test(PROMISE_CONSTRUCTOR_SOURCE)) return false;
-  // Detect correctness of subclassing with @@species support
-  var promise = new NativePromiseConstructor$3(function (resolve) { resolve(1); });
-  var FakePromise = function (exec) {
-    exec(function () { /* empty */ }, function () { /* empty */ });
-  };
-  var constructor = promise.constructor = {};
-  constructor[SPECIES] = FakePromise;
-  SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise;
-  if (!SUBCLASSING) return true;
+  if (!V8_VERSION || V8_VERSION < 51 || !/native code/.test(PROMISE_CONSTRUCTOR_SOURCE)) {
+    // Detect correctness of subclassing with @@species support
+    var promise = new NativePromiseConstructor$3(function (resolve) { resolve(1); });
+    var FakePromise = function (exec) {
+      exec(function () { /* empty */ }, function () { /* empty */ });
+    };
+    var constructor = promise.constructor = {};
+    constructor[SPECIES] = FakePromise;
+    SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise;
+    if (!SUBCLASSING) return true;
   // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test
-  return !GLOBAL_CORE_JS_PROMISE && IS_BROWSER && !NATIVE_PROMISE_REJECTION_EVENT$1;
+  } return !GLOBAL_CORE_JS_PROMISE && (IS_BROWSER || IS_DENO) && !NATIVE_PROMISE_REJECTION_EVENT$1;
 });
 
 var promiseConstructorDetection = {
@@ -13112,7 +13206,7 @@ newPromiseCapability$2.f = function (C) {
 
 var $$c = _export;
 var IS_NODE = engineIsNode;
-var global$a = global$U;
+var global$4 = global$s;
 var call$b = functionCall;
 var defineBuiltIn$4 = defineBuiltIn$b;
 var setPrototypeOf = objectSetPrototypeOf;
@@ -13142,13 +13236,13 @@ var setInternalState$3 = InternalStateModule$3.set;
 var NativePromisePrototype$1 = NativePromiseConstructor$2 && NativePromiseConstructor$2.prototype;
 var PromiseConstructor = NativePromiseConstructor$2;
 var PromisePrototype = NativePromisePrototype$1;
-var TypeError$5 = global$a.TypeError;
-var document$1 = global$a.document;
-var process = global$a.process;
+var TypeError$3 = global$4.TypeError;
+var document$1 = global$4.document;
+var process = global$4.process;
 var newPromiseCapability$1 = newPromiseCapabilityModule$3.f;
 var newGenericPromiseCapability = newPromiseCapability$1;
 
-var DISPATCH_EVENT = !!(document$1 && document$1.createEvent && global$a.dispatchEvent);
+var DISPATCH_EVENT = !!(document$1 && document$1.createEvent && global$4.dispatchEvent);
 var UNHANDLED_REJECTION = 'unhandledrejection';
 var REJECTION_HANDLED = 'rejectionhandled';
 var PENDING = 0;
@@ -13189,7 +13283,7 @@ var callReaction = function (reaction, state) {
         }
       }
       if (result === reaction.promise) {
-        reject(TypeError$5('Promise-chain cycle'));
+        reject(TypeError$3('Promise-chain cycle'));
       } else if (then = isThenable(result)) {
         call$b(then, result, resolve, reject);
       } else resolve(result);
@@ -13221,14 +13315,14 @@ var dispatchEvent = function (name, promise, reason) {
     event.promise = promise;
     event.reason = reason;
     event.initEvent(name, false, true);
-    global$a.dispatchEvent(event);
+    global$4.dispatchEvent(event);
   } else event = { promise: promise, reason: reason };
-  if (!NATIVE_PROMISE_REJECTION_EVENT && (handler = global$a['on' + name])) handler(event);
+  if (!NATIVE_PROMISE_REJECTION_EVENT && (handler = global$4['on' + name])) handler(event);
   else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);
 };
 
 var onUnhandled = function (state) {
-  call$b(task, global$a, function () {
+  call$b(task, global$4, function () {
     var promise = state.facade;
     var value = state.value;
     var IS_UNHANDLED = isUnhandled(state);
@@ -13251,7 +13345,7 @@ var isUnhandled = function (state) {
 };
 
 var onHandleUnhandled = function (state) {
-  call$b(task, global$a, function () {
+  call$b(task, global$4, function () {
     var promise = state.facade;
     if (IS_NODE) {
       process.emit('rejectionHandled', promise);
@@ -13279,7 +13373,7 @@ var internalResolve = function (state, value, unwrap) {
   state.done = true;
   if (unwrap) state = unwrap;
   try {
-    if (state.facade === value) throw TypeError$5("Promise can't be resolved itself");
+    if (state.facade === value) throw TypeError$3("Promise can't be resolved itself");
     var then = isThenable(value);
     if (then) {
       microtask(function () {
@@ -13421,19 +13515,18 @@ var getIteratorMethod$4 = function (it) {
     || Iterators[classof$1(it)];
 };
 
-var global$9 = global$U;
 var call$a = functionCall;
 var aCallable$2 = aCallable$9;
 var anObject$7 = anObject$i;
-var tryToString$1 = tryToString$4;
+var tryToString$1 = tryToString$5;
 var getIteratorMethod$3 = getIteratorMethod$4;
 
-var TypeError$4 = global$9.TypeError;
+var $TypeError$1 = TypeError;
 
 var getIterator$3 = function (argument, usingIterator) {
   var iteratorMethod = arguments.length < 2 ? getIteratorMethod$3(argument) : usingIterator;
   if (aCallable$2(iteratorMethod)) return anObject$7(call$a(iteratorMethod, argument));
-  throw TypeError$4(tryToString$1(argument) + ' is not iterable');
+  throw $TypeError$1(tryToString$1(argument) + ' is not iterable');
 };
 
 var call$9 = functionCall;
@@ -13460,11 +13553,10 @@ var iteratorClose$2 = function (iterator, kind, value) {
   return value;
 };
 
-var global$8 = global$U;
 var bind$3 = functionBindContext;
 var call$8 = functionCall;
 var anObject$5 = anObject$i;
-var tryToString = tryToString$4;
+var tryToString = tryToString$5;
 var isArrayIteratorMethod$1 = isArrayIteratorMethod$2;
 var lengthOfArrayLike$1 = lengthOfArrayLike$6;
 var isPrototypeOf = objectIsPrototypeOf;
@@ -13472,7 +13564,7 @@ var getIterator$2 = getIterator$3;
 var getIteratorMethod$2 = getIteratorMethod$4;
 var iteratorClose$1 = iteratorClose$2;
 
-var TypeError$3 = global$8.TypeError;
+var $TypeError = TypeError;
 
 var Result = function (stopped, result) {
   this.stopped = stopped;
@@ -13484,6 +13576,7 @@ var ResultPrototype = Result.prototype;
 var iterate$2 = function (iterable, unboundFunction, options) {
   var that = options && options.that;
   var AS_ENTRIES = !!(options && options.AS_ENTRIES);
+  var IS_RECORD = !!(options && options.IS_RECORD);
   var IS_ITERATOR = !!(options && options.IS_ITERATOR);
   var INTERRUPTED = !!(options && options.INTERRUPTED);
   var fn = bind$3(unboundFunction, that);
@@ -13501,11 +13594,13 @@ var iterate$2 = function (iterable, unboundFunction, options) {
     } return INTERRUPTED ? fn(value, stop) : fn(value);
   };
 
-  if (IS_ITERATOR) {
+  if (IS_RECORD) {
+    iterator = iterable.iterator;
+  } else if (IS_ITERATOR) {
     iterator = iterable;
   } else {
     iterFn = getIteratorMethod$2(iterable);
-    if (!iterFn) throw TypeError$3(tryToString(iterable) + ' is not iterable');
+    if (!iterFn) throw $TypeError(tryToString(iterable) + ' is not iterable');
     // optimisation for array iterators
     if (isArrayIteratorMethod$1(iterFn)) {
       for (index = 0, length = lengthOfArrayLike$1(iterable); length > index; index++) {
@@ -13516,7 +13611,7 @@ var iterate$2 = function (iterable, unboundFunction, options) {
     iterator = getIterator$2(iterable, iterFn);
   }
 
-  next = iterator.next;
+  next = IS_RECORD ? iterable.next : iterator.next;
   while (!(step = call$8(next, iterator)).done) {
     try {
       result = callFn(step.value);
@@ -13943,7 +14038,7 @@ ModalDialog.defaultProps = {
 };
 
 const _excluded$5 = ["children"];
-var _jsxFileName$l = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
+var _jsxFileName$l = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/drawer/Drawer.js";
 const Context$1 = /*#__PURE__*/React__default.createContext();
 const {
   sizes
@@ -15635,7 +15730,7 @@ const MobileCalendarBox = ({
   return null;
 };
 
-var _jsxFileName$k = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\TimePicker.js";
+var _jsxFileName$k = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/TimePicker.js";
 const Input$3 = styled('input', {
   display: 'none'
 });
@@ -15892,33 +15987,33 @@ const NativeTimePicker = ({
   })));
 };
 NativeTimePicker.propTypes = {
-  /**
-   Resize time picker.
+  /**
+   Resize time picker.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
 
-  /**
-   Change handler.
+  /**
+   Change handler.
   */
   onChange: PropTypes.func,
 
-  /**
-   Time picker default value, support moment format.
+  /**
+   Time picker default value, support moment format.
   */
   defaultValue: PropTypes.instanceOf(Date),
 
-  /**
-   Time picker value, support moment format.
+  /**
+   Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
 
-  /**
-    Specify the minimum date.
+  /**
+    Specify the minimum date.
    */
   minDate: PropTypes.instanceOf(Date),
 
-  /**
-       Specify the maximum date.
+  /**
+       Specify the maximum date.
       */
   maxDate: PropTypes.instanceOf(Date)
 };
@@ -15963,49 +16058,49 @@ const TimePicker = ({
 };
 TimePicker.displayName = 'TimePicker';
 TimePicker.propTypes = {
-  /**
-   Additional styles.
+  /**
+   Additional styles.
   */
   css: PropTypes.object,
 
-  /**
-   Resize time picker.
+  /**
+   Resize time picker.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
 
-  /**
-   Change handler.
+  /**
+   Change handler.
   */
   onChange: PropTypes.func,
 
-  /**
-   Time picker default value, support moment format.
+  /**
+   Time picker default value, support moment format.
   */
   defaultValue: PropTypes.instanceOf(Date),
 
-  /**
-   Time picker value, support moment format.
+  /**
+   Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
 
-  /**
-   Disabled state.
+  /**
+   Disabled state.
   */
   disabled: PropTypes.bool,
 
-  /**
-    Specify the minimum date.
+  /**
+    Specify the minimum date.
    */
   minDate: PropTypes.instanceOf(Date),
 
-  /**
-     Specify the maximum date.
+  /**
+     Specify the maximum date.
     */
   maxDate: PropTypes.instanceOf(Date)
 };
 NativeTimePicker.displayName = 'NativeTimePicker';
 
-var _jsxFileName$j = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\InputTimePicker.js";
+var _jsxFileName$j = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/datePicker/timePicker/InputTimePicker.js";
 
 const getInputPickerValue$1 = date => {
   if (!date) return;
@@ -16181,63 +16276,63 @@ InputTimePicker.defaultProps = {
   placeholder: 'Select Time'
 };
 InputTimePicker.propTypes = {
-  /**
-   Additional styles.
+  /**
+   Additional styles.
   */
   css: PropTypes.object,
 
-  /**
-   Disabled state.
+  /**
+   Disabled state.
   */
   disabled: PropTypes.bool,
 
-  /**
-   ReadOnly state.
+  /**
+   ReadOnly state.
   */
   readOnly: PropTypes.bool,
 
-  /**
-   Resize time picker.
+  /**
+   Resize time picker.
   */
   size: PropTypes.oneOf(['sm', 'lg']),
 
-  /**
-   Custom placeholder input time picker.
+  /**
+   Custom placeholder input time picker.
   */
   placeholder: PropTypes.string,
 
-  /**
-   Time picker default value, support moment format.
+  /**
+   Time picker default value, support moment format.
   */
   defaultValue: PropTypes.instanceOf(Date),
 
-  /**
-   Time picker value, support moment format.
+  /**
+   Time picker value, support moment format.
   */
   value: PropTypes.instanceOf(Date),
 
-  /**
-   Change handler.
+  /**
+   Change handler.
   */
   onChange: PropTypes.func,
 
-  /**
-   Placement popover input time picker.
+  /**
+   Placement popover input time picker.
   */
   placement: PropTypes.string,
 
-  /**
-    Specify the minimum date.
+  /**
+    Specify the minimum date.
    */
   minDate: PropTypes.instanceOf(Date),
 
-  /**
-       Specify the maximum date.
+  /**
+       Specify the maximum date.
   */
   maxDate: PropTypes.instanceOf(Date),
 
-  /**
-   * Invalid state input.
+  /**
+   * Invalid state input.
    */
   isInvalid: PropTypes.bool
 };
@@ -16772,7 +16867,7 @@ const removeUndefinedFields = obj => {
 };
 
 const _excluded$4 = ["isActive", "onClick"];
-var _jsxFileName$i = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationButton.js";
+var _jsxFileName$i = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
 const PrevNextButton = styled(Text$1, {
   padding: '$spacing-01',
   cursor: 'pointer',
@@ -17042,7 +17137,7 @@ const PaginationButton = ({
 };
 
 const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
-var _jsxFileName$h = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationInfo.js";
+var _jsxFileName$h = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
 const LimitContainer = styled(Flex$1, {
   cursor: 'pointer'
 });
@@ -17179,7 +17274,7 @@ function PaginationInfo(_ref) {
 }
 
 const _excluded$2 = ["limit", "currentPage", "totalData", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
-var _jsxFileName$g = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\pagination\\Pagination.js";
+var _jsxFileName$g = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
 
 function Pagination(_ref) {
   let {
@@ -17796,7 +17891,7 @@ const stickyPositionStyling = column => {
   return {};
 };
 
-const stickyShadowStyling = column => {
+const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
   const cssAfter = {
     position: 'absolute',
     top: 0,
@@ -17812,12 +17907,12 @@ const stickyShadowStyling = column => {
     return column.sticky === 'left' ? {
       '&::after': Object.assign(Object.assign({}, cssAfter), {
         right: 0,
-        boxShadow: 'inset 10px 0 10px -10px #00000026'
+        boxShadow: tableScrollPosition === 'start' || scrollAreaWidth <= 0 ? 'none' : 'inset 10px 0 10px -10px #00000026'
       })
     } : {
       '&::after': Object.assign(Object.assign({}, cssAfter), {
         left: 0,
-        boxShadow: 'inset -10px 0 10px -10px #00000026'
+        boxShadow: tableScrollPosition === 'end' || scrollAreaWidth <= 0 ? 'none' : 'inset -10px 0 10px -10px #00000026'
       })
     };
   }
@@ -17872,6 +17967,8 @@ function Table({
 }) {
   const [limit, setLimit] = useState(rowLimit);
   const [dataRow, setDataRow] = useState({});
+  const [tableScrollPosition, setTableScrollPosition] = useState('start');
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
 
   const getInitialState = () => {
     const initialState = {};
@@ -17905,6 +18002,8 @@ function Table({
     autoResetSelectedRows: false,
     getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row)
   }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
+  const scrollerRef = useRef(null);
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const {
     getTableProps,
     getTableBodyProps,
@@ -17936,9 +18035,6 @@ function Table({
     if (fetchData) fetchData(fetchParams);
   };
 
-  const scrollerRef = useRef(null);
-  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
-
   const renderFooter = () => jsx(Pagination, {
     limit: pageSize,
     currentPage: pageIndex + 1,
@@ -17980,43 +18076,6 @@ function Table({
     children: children
   }), void 0);
 
-  useEffect(() => {
-    if (hiddenColumns) setHiddenColumns(hiddenColumns);
-  }, [hiddenColumns]);
-  useEffect(() => {
-    if (columnOrder) setColumnOrder(columnOrder);
-  }, [columnOrder]);
-  useEffect(() => {
-    setPageSize(rowLimit);
-  }, [rowLimit]);
-  useEffect(() => {
-    gotoPage(controlledPageIndex);
-  }, [controlledPageIndex]);
-  useEffect(() => {
-    if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
-  }, [sortBy]);
-  useMountedLayoutEffect(() => {
-    if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
-  }, [selectedRowIds]);
-  useEffect(() => {
-    var _a;
-
-    if (isInfiniteScroll && data.length <= rowLimit) {
-      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-        top: 0
-      });
-    }
-  }, [data]);
-  useEffect(() => {
-    if (selectedIds && data.length > 0) {
-      const selectedIdsKeys = Object.keys(selectedIds);
-      selectedIdsKeys.map(key => {
-        toggleRowSelected(key, true);
-        return key;
-      });
-    }
-  }, [data, selectedIds]);
-
   const getOptionsMenu = () => {
     var _a, _b;
 
@@ -18064,6 +18123,47 @@ function Table({
     setDataRow(row);
   };
 
+  useLayoutEffect(() => {
+    if (scrollerRef && scrollerRef.current) {
+      setScrollAreaWidth(scrollerRef.current.scrollWidth - scrollerRef.current.clientWidth);
+    }
+  }, [scrollerRef, visibleColumns]);
+  useEffect(() => {
+    if (hiddenColumns) setHiddenColumns(hiddenColumns);
+  }, [hiddenColumns]);
+  useEffect(() => {
+    if (columnOrder) setColumnOrder(columnOrder);
+  }, [columnOrder]);
+  useEffect(() => {
+    setPageSize(rowLimit);
+  }, [rowLimit]);
+  useEffect(() => {
+    gotoPage(controlledPageIndex);
+  }, [controlledPageIndex]);
+  useEffect(() => {
+    if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
+  }, [sortBy]);
+  useMountedLayoutEffect(() => {
+    if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
+  }, [selectedRowIds]);
+  useEffect(() => {
+    var _a;
+
+    if (isInfiniteScroll && data.length <= rowLimit) {
+      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        top: 0
+      });
+    }
+  }, [data]);
+  useEffect(() => {
+    if (selectedIds && data.length > 0) {
+      const selectedIdsKeys = Object.keys(selectedIds);
+      selectedIdsKeys.map(key => {
+        toggleRowSelected(key, true);
+        return key;
+      });
+    }
+  }, [data, selectedIds]);
   return jsxs(Box, Object.assign({
     css: {
       position: 'relative',
@@ -18093,7 +18193,18 @@ function Table({
     }), void 0), !isMobile ? jsxs(Fragment, {
       children: [jsxs(TableContainer$3, Object.assign({
         css: css,
-        ref: scrollerRef
+        ref: scrollerRef,
+        onScroll: e => {
+          const scrollPosition = e.currentTarget.scrollLeft;
+
+          if (scrollPosition < 3) {
+            setTableScrollPosition('start');
+          } else if (scrollPosition > scrollAreaWidth - 3) {
+            setTableScrollPosition('end');
+          } else {
+            setTableScrollPosition('between');
+          }
+        }
       }, {
         children: [renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
           children: [jsx(TableHead$3, Object.assign({
@@ -18113,7 +18224,7 @@ function Table({
                       minWidth: column.colMinWidth
                     }
                   }]), {
-                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column))
+                    css: Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth))
                   }, {
                     children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                       isSortedDesc: column.isSortedDesc,
@@ -18168,7 +18279,7 @@ function Table({
                         padding: !isContextMenu || ['expander', 'selection', 'menu', 'eye'].includes((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) ? cell.column.accessor ? '20px 8px' : '20px 20px' : '',
                         verticalAlign: cell.column.accessor ? cellAlign : 'center',
                         cursor: onRowClick ? 'pointer' : 'unset'
-                      }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column)),
+                      }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)),
                       onClick: () => handleRowClick(row, i)
                     }, {
                       children: jsx(ConditionalWrapper, Object.assign({
@@ -18273,7 +18384,7 @@ const TableColumn = _a => {
   return jsx("div", {}, void 0);
 };
 
-var _jsxFileName$f = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\DateColumn.js";
+var _jsxFileName$f = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
 
 const DateColumn = ({
   value,
@@ -18309,12 +18420,11 @@ var uncurryThis$9 = functionUncurryThis;
 // https://tc39.es/ecma262/#sec-thisnumbervalue
 var thisNumberValue$1 = uncurryThis$9(1.0.valueOf);
 
-var global$7 = global$U;
 var toIntegerOrInfinity$3 = toIntegerOrInfinity$6;
 var toString$7 = toString$h;
 var requireObjectCoercible$3 = requireObjectCoercible$a;
 
-var RangeError$2 = global$7.RangeError;
+var $RangeError$2 = RangeError;
 
 // `String.prototype.repeat` method implementation
 // https://tc39.es/ecma262/#sec-string.prototype.repeat
@@ -18322,21 +18432,20 @@ var stringRepeat = function repeat(count) {
   var str = toString$7(requireObjectCoercible$3(this));
   var result = '';
   var n = toIntegerOrInfinity$3(count);
-  if (n < 0 || n == Infinity) throw RangeError$2('Wrong number of repetitions');
+  if (n < 0 || n == Infinity) throw $RangeError$2('Wrong number of repetitions');
   for (;n > 0; (n >>>= 1) && (str += str)) if (n & 1) result += str;
   return result;
 };
 
 var $$6 = _export;
-var global$6 = global$U;
 var uncurryThis$8 = functionUncurryThis;
 var toIntegerOrInfinity$2 = toIntegerOrInfinity$6;
 var thisNumberValue = thisNumberValue$1;
 var $repeat = stringRepeat;
 var fails$5 = fails$t;
 
-var RangeError$1 = global$6.RangeError;
-var String$1 = global$6.String;
+var $RangeError$1 = RangeError;
+var $String = String;
 var floor$3 = Math.floor;
 var repeat = uncurryThis$8($repeat);
 var stringSlice$6 = uncurryThis$8(''.slice);
@@ -18384,7 +18493,7 @@ var dataToString = function (data) {
   var s = '';
   while (--index >= 0) {
     if (s !== '' || index === 0 || data[index] !== 0) {
-      var t = String$1(data[index]);
+      var t = $String(data[index]);
       s = s === '' ? t : s + repeat('0', 7 - t.length) + t;
     }
   } return s;
@@ -18412,10 +18521,10 @@ $$6({ target: 'Number', proto: true, forced: FORCED$1 }, {
     var e, z, j, k;
 
     // TODO: ES2018 increased the maximum number of fraction digits to 100, need to improve the implementation
-    if (fractDigits < 0 || fractDigits > 20) throw RangeError$1('Incorrect fraction digits');
+    if (fractDigits < 0 || fractDigits > 20) throw $RangeError$1('Incorrect fraction digits');
     // eslint-disable-next-line no-self-compare -- NaN check
     if (number != number) return 'NaN';
-    if (number <= -1e21 || number >= 1e21) return String$1(number);
+    if (number <= -1e21 || number >= 1e21) return $String(number);
     if (number < 0) {
       sign = '-';
       number = -number;
@@ -18459,7 +18568,7 @@ $$6({ target: 'Number', proto: true, forced: FORCED$1 }, {
   }
 });
 
-var global$5 = global$U;
+var global$3 = global$s;
 var fails$4 = fails$t;
 var uncurryThis$7 = functionUncurryThis;
 var toString$6 = toString$h;
@@ -18467,8 +18576,8 @@ var trim = stringTrim.trim;
 var whitespaces$1 = whitespaces$4;
 
 var charAt$6 = uncurryThis$7(''.charAt);
-var n$ParseFloat = global$5.parseFloat;
-var Symbol$5 = global$5.Symbol;
+var n$ParseFloat = global$3.parseFloat;
+var Symbol$5 = global$3.Symbol;
 var ITERATOR$2 = Symbol$5 && Symbol$5.iterator;
 var FORCED = 1 / n$ParseFloat(whitespaces$1 + '-0') !== -Infinity
   // MS Edge 18- broken with boxed symbols
@@ -18957,7 +19066,7 @@ const PriceColumn = props => {
   return addThousandSeparator(param);
 };
 
-var _jsxFileName$e = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowExpanderColumn.js";
+var _jsxFileName$e = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
 const rowExpanderColumn = {
   id: 'expander',
   Header: () => null,
@@ -18999,7 +19108,7 @@ const rowExpanderColumn = {
   unsortable: true
 };
 
-var _jsxFileName$d = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowMenuColumn.js";
+var _jsxFileName$d = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
 
 const rowMenuColumn = (options, icon, config) => ({
   id: 'menu',
@@ -19251,7 +19360,7 @@ const rowMenuColumn = (options, icon, config) => ({
   unsortable: true
 });
 
-var _jsxFileName$c = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowSelectionColumn.js";
+var _jsxFileName$c = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
 const rowSelectionColumn = {
   id: 'selection',
   Header: ({
@@ -19554,7 +19663,7 @@ PageDialog.defaultProps = {
 };
 
 const _excluded$1 = ["children"];
-var _jsxFileName$b = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\alertDialog\\AlertDialog.js";
+var _jsxFileName$b = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/alertDialog/AlertDialog.js";
 const overlayShow = keyframes({
   '0%': {
     opacity: 0
@@ -20153,7 +20262,7 @@ const AlertDialogCancel = ADialog.Cancel;
 const AlertDialogConfirm = ADialog.Action;
 
 const _excluded = ["side", "align", "children"];
-var _jsxFileName$a = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\dropdownMenu\\DropdownMenu.js";
+var _jsxFileName$a = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/dropdownMenu/DropdownMenu.js";
 const Context = /*#__PURE__*/React__default.createContext();
 const slideUpAndFade = keyframes({
   '0%': {
@@ -20490,7 +20599,6 @@ var callWithSafeIterationClosing$1 = function (iterator, fn, value, ENTRIES) {
   }
 };
 
-var global$4 = global$U;
 var bind$2 = functionBindContext;
 var call$2 = functionCall;
 var toObject = toObject$7;
@@ -20502,7 +20610,7 @@ var createProperty = createProperty$2;
 var getIterator$1 = getIterator$3;
 var getIteratorMethod$1 = getIteratorMethod$4;
 
-var Array$1 = global$4.Array;
+var $Array = Array;
 
 // `Array.from` method implementation
 // https://tc39.es/ecma262/#sec-array.from
@@ -20517,7 +20625,7 @@ var arrayFrom$1 = function from(arrayLike /* , mapfn = undefined, thisArg = unde
   var index = 0;
   var length, result, step, iterator, next, value;
   // if the target is not iterable or it's an array with the default iterator - use a simple case
-  if (iteratorMethod && !(this == Array$1 && isArrayIteratorMethod(iteratorMethod))) {
+  if (iteratorMethod && !(this === $Array && isArrayIteratorMethod(iteratorMethod))) {
     iterator = getIterator$1(O, iteratorMethod);
     next = iterator.next;
     result = IS_CONSTRUCTOR ? new this() : [];
@@ -20527,7 +20635,7 @@ var arrayFrom$1 = function from(arrayLike /* , mapfn = undefined, thisArg = unde
     }
   } else {
     length = lengthOfArrayLike(O);
-    result = IS_CONSTRUCTOR ? new this(length) : Array$1(length);
+    result = IS_CONSTRUCTOR ? new this(length) : $Array(length);
     for (;length > index; index++) {
       value = mapping ? mapfn(O[index], index) : O[index];
       createProperty(result, index, value);
@@ -20538,7 +20646,6 @@ var arrayFrom$1 = function from(arrayLike /* , mapfn = undefined, thisArg = unde
 };
 
 // based on https://github.com/bestiejs/punycode.js/blob/master/punycode.js
-var global$3 = global$U;
 var uncurryThis$2 = functionUncurryThis;
 
 var maxInt = 2147483647; // aka. 0x7FFFFFFF or 2^31-1
@@ -20555,7 +20662,7 @@ var regexSeparators = /[.\u3002\uFF0E\uFF61]/g; // RFC 3490 separators
 var OVERFLOW_ERROR = 'Overflow: input needs wider integers to process';
 var baseMinusTMin = base - tMin;
 
-var RangeError = global$3.RangeError;
+var $RangeError = RangeError;
 var exec$1 = uncurryThis$2(regexSeparators.exec);
 var floor$1 = Math.floor;
 var fromCharCode = String.fromCharCode;
@@ -20670,7 +20777,7 @@ var encode = function (input) {
     // Increase `delta` enough to advance the decoder's <n,i> state to <m,0>, but guard against overflow.
     var handledCPCountPlusOne = handledCPCount + 1;
     if (m - n > floor$1((maxInt - delta) / handledCPCountPlusOne)) {
-      throw RangeError(OVERFLOW_ERROR);
+      throw $RangeError(OVERFLOW_ERROR);
     }
 
     delta += (m - n) * handledCPCountPlusOne;
@@ -20679,7 +20786,7 @@ var encode = function (input) {
     for (i = 0; i < input.length; i++) {
       currentValue = input[i];
       if (currentValue < n && ++delta > maxInt) {
-        throw RangeError(OVERFLOW_ERROR);
+        throw $RangeError(OVERFLOW_ERROR);
       }
       if (currentValue == n) {
         // Represent delta as a generalized variable-length integer.
@@ -20729,7 +20836,7 @@ var defineBuiltIns$1 = function (target, src, options) {
 // TODO: in core-js@4, move /modules/ dependencies to public entries for better optimization by tools like `preset-env`
 
 var $$4 = _export;
-var global$2 = global$U;
+var global$2 = global$s;
 var call$1 = functionCall;
 var uncurryThis$1 = functionUncurryThis;
 var DESCRIPTORS$1 = descriptors;
@@ -21091,7 +21198,7 @@ if (!USE_NATIVE_URL$1 && isCallable(Headers)) {
   };
 
   if (isCallable(nativeFetch)) {
-    $$4({ global: true, enumerable: true, noTargetGet: true, forced: true }, {
+    $$4({ global: true, enumerable: true, dontCallGetSet: true, forced: true }, {
       fetch: function fetch(input /* , init */) {
         return nativeFetch(input, arguments.length > 1 ? wrapRequestOptions(arguments[1]) : {});
       }
@@ -21107,7 +21214,7 @@ if (!USE_NATIVE_URL$1 && isCallable(Headers)) {
     RequestPrototype.constructor = RequestConstructor;
     RequestConstructor.prototype = RequestPrototype;
 
-    $$4({ global: true, constructor: true, noTargetGet: true, forced: true }, {
+    $$4({ global: true, constructor: true, dontCallGetSet: true, forced: true }, {
       Request: RequestConstructor
     });
   }
@@ -21123,7 +21230,7 @@ var web_urlSearchParams_constructor = {
 var $$3 = _export;
 var DESCRIPTORS = descriptors;
 var USE_NATIVE_URL = nativeUrl;
-var global$1 = global$U;
+var global$1 = global$s;
 var bind = functionBindContext;
 var uncurryThis = functionUncurryThis;
 var defineBuiltIn = defineBuiltIn$b;
@@ -22267,7 +22374,7 @@ function upload({
   return promise;
 }
 
-var _jsxFileName$9 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\upload\\Upload.js";
+var _jsxFileName$9 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/upload/Upload.js";
 const Input$2 = styled('input', {
   display: 'none !important'
 });
@@ -23456,176 +23563,176 @@ Upload.defaultProps = {
   imageCompression: true
 };
 Upload.propTypes = {
-  /**
-   Placeholder label of upload.
+  /**
+   Placeholder label of upload.
   */
   placeholder: PropTypes.string,
 
-  /**
-   Disabled state of upload.
+  /**
+   Disabled state of upload.
   */
   disabled: PropTypes.bool,
 
-  /**
-   Built-in stylesheets, support for two types.
+  /**
+   Built-in stylesheets, support for two types.
   */
   listType: PropTypes.oneOf(['file', 'picture']),
 
-  /**
-   Whether to support selected multiple file.
+  /**
+   Whether to support selected multiple file.
    */
   multiple: PropTypes.bool,
 
-  /**
-   List of files to be uploaded.
+  /**
+   List of files to be uploaded.
    */
   fileList: PropTypes.array,
 
-  /**
-   A callback function, can be executed when uploading state is changing.
+  /**
+   A callback function, can be executed when uploading state is changing.
    */
   onChange: PropTypes.func,
 
-  /**
-   A callback function, can be executed when uploading in progress.
-   `(progress) => void`
+  /**
+   A callback function, can be executed when uploading in progress.
+   `(progress) => void`
    */
   onProgress: PropTypes.func,
 
-  /**
-   A callback function, can be executed when uploading is success.
-   `(response) => void`
+  /**
+   A callback function, can be executed when uploading is success.
+   `(response) => void`
    */
   onSuccess: PropTypes.func,
 
-  /**
-   A callback function, can be executed when uploading is error.
-   `(error, response) => void`
+  /**
+   A callback function, can be executed when uploading is error.
+   `(error, response) => void`
    */
   onError: PropTypes.func,
 
-  /**
-   A callback function, can be executed when preview icon in picture type is clicked.
+  /**
+   A callback function, can be executed when preview icon in picture type is clicked.
    */
   onPreview: PropTypes.func,
 
-  /**
-   A callback function, can be executed when remove icon is clicked.
+  /**
+   A callback function, can be executed when remove icon is clicked.
    */
   onRemove: PropTypes.func,
 
-  /**
-   A custom element inside upload container.
+  /**
+   A custom element inside upload container.
    */
   children: PropTypes.element,
 
-  /**
-   Limit the number of uploaded files.
+  /**
+   Limit the number of uploaded files.
    */
   max: PropTypes.number,
 
-  /**
-   Limit the maximum image size in MB.
+  /**
+   Limit the maximum image size in MB.
    */
   maxSizeMB: PropTypes.number,
 
-  /**
-   Limit file type of upload.
+  /**
+   Limit file type of upload.
    */
   accept: PropTypes.string,
 
-  /**
-   Custom label for replace button.
+  /**
+   Custom label for replace button.
    */
   replaceLabel: PropTypes.string,
 
-  /**
-   Custom width of upload container.
+  /**
+   Custom width of upload container.
    */
   width: PropTypes.number,
 
-  /**
-   Custom height of upload container.
+  /**
+   Custom height of upload container.
    */
   height: PropTypes.number,
 
-  /**
-   Additional css.
+  /**
+   Additional css.
    */
   css: PropTypes.object,
 
-  /**
-   Custom title header of cropper modal.
+  /**
+   Custom title header of cropper modal.
    */
   cropperTitle: PropTypes.string,
 
-  /**
-   Add image cropper on upload.
+  /**
+   Add image cropper on upload.
    */
   showCropper: PropTypes.bool,
 
-  /**
-   Hidden toggle aspect ratio image cropper.
+  /**
+   Hidden toggle aspect ratio image cropper.
    */
   hiddenToggleAspect: PropTypes.bool,
 
-  /**
-   The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
+  /**
+   The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
    */
   ratio: PropTypes.number,
 
-  /**
-   Can set error message to the upload.
+  /**
+   Can set error message to the upload.
    */
   errorMessage: PropTypes.string,
 
-  /**
-   Progress of upload process.
+  /**
+   Progress of upload process.
   */
   progress: PropTypes.number,
 
-  /**
-    Auto increment progress of upload process.
+  /**
+    Auto increment progress of upload process.
    */
   loading: PropTypes.bool,
 
-  /**
-   API upload url, allows components to automatically upload directly to API service.
+  /**
+   API upload url, allows components to automatically upload directly to API service.
    */
   action: PropTypes.string,
 
-  /**
-   Custom body request to upload action.
+  /**
+   Custom body request to upload action.
    */
   customBodyRequest: PropTypes.func,
 
-  /**
-   Contains an authentication token for upload API.
+  /**
+   Contains an authentication token for upload API.
    */
   token: PropTypes.string,
 
-  /**
-   Referencing the headers key to attach the token.
+  /**
+   Referencing the headers key to attach the token.
    */
   tokenKey: PropTypes.string,
 
-  /**
-   Referencing the key to attach the file to be sent.
+  /**
+   Referencing the key to attach the file to be sent.
    */
   reqKey: PropTypes.string,
 
-  /**
-   Referencing the key to get the file from the API response.
+  /**
+   Referencing the key to get the file from the API response.
    */
   resKey: PropTypes.string,
 
-  /**
-   To compression image if file size > 1MB.
+  /**
+   To compression image if file size > 1MB.
    */
   imageCompression: PropTypes.bool,
 
-  /**
-   Callback to handle before crop image.
+  /**
+   Callback to handle before crop image.
    */
   onBeforeCrop: PropTypes.func
 };
@@ -23674,6 +23781,8 @@ const CardMessage = styled('div', {
   color: '$textPrimary',
   fontSize: 12,
   fontWeight: 400,
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
   variants: {
     variant: {
       sms: {
@@ -23901,8 +24010,7 @@ const Device = props => {
               border: 'none',
               width: '100%',
               height: '100%',
-              overflow: 'hidden',
-              zIndex: 1
+              zIndex: 3
             }
           }, {
             children: jsxs(Box, Object.assign({
@@ -23915,13 +24023,29 @@ const Device = props => {
                 height: "100%",
                 objectFit: props.typeDevice === 'android' ? 'fill' : 'cover',
                 src: img$g,
-                alt: "whatsapp-preview"
+                alt: "whatsapp-preview",
+                css: {
+                  borderRadius: 8
+                }
               }, void 0), jsx(Box, Object.assign({
+                className: "mobile-scrollbar",
                 css: {
                   position: 'absolute',
                   right: '5%',
                   bottom: '12%',
-                  left: '10%'
+                  left: '10%',
+                  top: '10%',
+                  overflow: 'auto',
+                  '&::-webkit-scrollbar': {
+                    width: 3
+                  },
+                  '&::-webkit-scrollbar-track': {
+                    boxShadow: 'inset 0 0 6px $gray200'
+                  },
+                  '&::-webkit-scrollbar-thumb': {
+                    backgroundColor: '$gray150',
+                    outline: '1px solid $gray150'
+                  }
                 }
               }, {
                 children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? jsx(CardMessage, Object.assign({
@@ -24037,7 +24161,9 @@ const Device = props => {
                     css: {
                       fontSize: 12,
                       color: '$textPrimary',
-                      lineHeight: '16px'
+                      lineHeight: '16px',
+                      overflowWrap: 'break-word',
+                      wordWrap: 'break-word'
                     }
                   }, {
                     children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? content === null || content === void 0 ? void 0 : content.message : (_f = content === null || content === void 0 ? void 0 : content.message) === null || _f === void 0 ? void 0 : _f.call(content)
@@ -24136,7 +24262,9 @@ const Device = props => {
                     css: {
                       fontSize: 9,
                       color: '$textSecondary',
-                      lineHeight: '14px !important'
+                      lineHeight: '14px !important',
+                      overflowWrap: 'break-word',
+                      wordWrap: 'break-word'
                     }
                   }, {
                     children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? content === null || content === void 0 ? void 0 : content.message : (_j = content === null || content === void 0 ? void 0 : content.message) === null || _j === void 0 ? void 0 : _j.call(content)
@@ -24180,7 +24308,7 @@ const Device = props => {
         style: {
           width: props.size ? props.size : undefined,
           position: 'relative',
-          zIndex: withComponent ? 1 : 2
+          zIndex: withComponent || (props === null || props === void 0 ? void 0 : props.variant) === 'whatsapp' ? 1 : 2
         },
         src: properties.typeDevice,
         alt: "device-preview"
@@ -24231,7 +24359,7 @@ const Device = props => {
 
 Device.displayName = 'DevicePreview';
 
-var _jsxFileName$8 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\InputColorPicker.js";
+var _jsxFileName$8 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/InputColorPicker.js";
 const Separator$1 = styled('div', {
   height: 20,
   width: 1,
@@ -24343,28 +24471,28 @@ function InputColorPicker(props) {
 
 InputColorPicker.displayName = 'InputColorPicker';
 InputColorPicker.propTypes = {
-  /**
-   Color code to be displayed.
+  /**
+   Color code to be displayed.
   */
   color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 
-  /**
-   Additional color list.
+  /**
+   Additional color list.
   */
   presetColors: PropTypes.array,
 
-  /**
-   Change event handler.
+  /**
+   Change event handler.
   */
   onChange: PropTypes.func,
 
-  /**
-   Add preset color event handler.
+  /**
+   Add preset color event handler.
   */
   onAddColor: PropTypes.func,
 
-  /**
-   Disable opacity selector.
+  /**
+   Disable opacity selector.
   */
   disableAlpha: PropTypes.bool
 };
@@ -24374,7 +24502,7 @@ InputColorPicker.defaultProps = {
 
 var img$d = "data:image/gif;base64,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";
 
-var _jsxFileName$7 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorMap.js";
+var _jsxFileName$7 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorMap.js";
 const Container$6 = styled('div', {
   userSelect: 'none',
   margin: 'auto',
@@ -26338,7 +26466,7 @@ function ColorMap({
   })));
 }
 
-var _jsxFileName$6 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorFields.js";
+var _jsxFileName$6 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/components/ColorFields.js";
 const CheckBoard = styled(Flex$1, {
   background: '$bgwhite',
   border: '1px solid #E5E7EB',
@@ -26539,7 +26667,7 @@ function ColorFields({
   }, "%")));
 }
 
-var _jsxFileName$5 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\ColorPicker.js";
+var _jsxFileName$5 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/colorPicker/ColorPicker.js";
 const Container$5 = styled(Flex$1, {
   background: '$white',
   padding: 16,
@@ -27042,28 +27170,28 @@ function ColorPicker({
 }
 
 ColorPicker.propTypes = {
-  /**
-   Color code to be displayed.
+  /**
+   Color code to be displayed.
   */
   color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 
-  /**
-   Additional color list
+  /**
+   Additional color list
   */
   presetColors: PropTypes.array,
 
-  /**
-   Change event handler
+  /**
+   Change event handler
   */
   onChange: PropTypes.func,
 
-  /**
-   Add preset color event handler
+  /**
+   Add preset color event handler
   */
   onAddColor: PropTypes.func,
 
-  /**
-   Disable opacity selector
+  /**
+   Disable opacity selector
   */
   disableAlpha: PropTypes.bool
 };
@@ -27072,7 +27200,7 @@ ColorPicker.defaultProps = {
 };
 var ColorPicker$1 = ColorWrap(ColorPicker);
 
-var _jsxFileName$4 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\stepWizard\\StepWizard.js";
+var _jsxFileName$4 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/stepWizard/StepWizard.js";
 const StepWizardContext = /*#__PURE__*/React__default.createContext({});
 const Stepper = StepWizard$1;
 Stepper.displayName = 'Stepper';
@@ -27158,7 +27286,8 @@ const Navigation = props => {
     data,
     cssNav,
     isHide,
-    forbidClickNav
+    forbidClickNav,
+    hideCheckedIcon
   } = React__default.useContext(StepWizardContext);
   const mobileHidden = isMobile && isHide && {
     height: 'unset',
@@ -27206,7 +27335,7 @@ const Navigation = props => {
           lineNumber: 119,
           columnNumber: 15
         }
-      }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
+      }), isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
         css: {
           marginRight: 9
         },
@@ -27216,7 +27345,7 @@ const Navigation = props => {
         __source: {
           fileName: _jsxFileName$4,
           lineNumber: 120,
-          columnNumber: 30
+          columnNumber: 50
         }
       }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
@@ -27276,14 +27405,14 @@ const Navigation = props => {
           lineNumber: 137,
           columnNumber: 13
         }
-      }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
+      }, isComplete && !hideCheckedIcon && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
         size: "24",
         color: colors$4.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
           lineNumber: 149,
-          columnNumber: 30
+          columnNumber: 50
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
         justify: "center",
@@ -27511,7 +27640,8 @@ const Default = props => {
       data: props.navContents,
       cssNav: props.cssNav,
       getIsComplete,
-      getTitleStep
+      getTitleStep,
+      hideCheckedIcon: props.hideCheckedIcon
     },
     __self: undefined,
     __source: {
@@ -27529,7 +27659,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 320,
+        lineNumber: 321,
         columnNumber: 16
       }
     }),
@@ -27539,7 +27669,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 315,
+      lineNumber: 316,
       columnNumber: 9
     }
   }), props.children)));
@@ -27551,7 +27681,7 @@ const StepWizard = props => {
   }), void 0);
 };
 
-var _jsxFileName$3 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tableOfContent\\transition.js";
+var _jsxFileName$3 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/transition.js";
 
 function Collapse({
   children,
@@ -27596,7 +27726,7 @@ Collapse.defaultProps = {
   isOpen: false
 };
 
-var _jsxFileName$2 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tableOfContent\\TableOfContent.js";
+var _jsxFileName$2 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tableOfContent/TableOfContent.js";
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
@@ -27882,23 +28012,23 @@ TableOfContent.defaultProps = {
   isDialog: false
 };
 TableOfContent.propTypes = {
-  /**
-   List of contents containing the title and id of a content.
+  /**
+   List of contents containing the title and id of a content.
    */
   content: PropTypes.array,
 
-  /**
-   Components devoted to mobile viewing only.
+  /**
+   Components devoted to mobile viewing only.
    */
   isMobile: PropTypes.bool,
 
-  /**
-   Condition when table of content is inside a component dialog.
+  /**
+   Condition when table of content is inside a component dialog.
    */
   isDialog: PropTypes.bool,
 
-  /**
-   The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
+  /**
+   The active ID to reference the active content on the mobile view obtained from onUpdateCallback.
    */
   activeId: PropTypes.string
 };
@@ -27918,7 +28048,7 @@ TableOfContentPage.defaultProps = {
   useBoxMethod: true
 };
 
-var _jsxFileName$1 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\editableTable\\transition.js";
+var _jsxFileName$1 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/editableTable/transition.js";
 
 function Collapalse({
   children,
@@ -28044,7 +28174,8 @@ function EditableTableMobile(props) {
     instance,
     emptyDataMessage,
     showCheckbox,
-    customRows
+    customRows,
+    onExpand
   } = props;
   const {
     getTableProps,
@@ -28126,6 +28257,7 @@ function EditableTableMobile(props) {
               }
 
               row.toggleRowExpanded(!row.isExpanded);
+              onExpand === null || onExpand === void 0 ? void 0 : onExpand(!row.isExpanded);
             }
           }, {
             children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
@@ -28572,7 +28704,8 @@ function EditableTable(props) {
     onSelectedChange,
     getCheckboxProps,
     keyId = 'id',
-    selectedIds
+    selectedIds,
+    onExpand
   } = props;
   const [selectedIndex, setSelectedIndex] = useState(null);
 
@@ -28821,7 +28954,8 @@ function EditableTable(props) {
     instance: instance,
     emptyDataMessage: emptyDataMessage,
     showCheckbox: showCheckbox,
-    customRows: customRows
+    customRows: customRows,
+    onExpand: onExpand
   }, void 0);
 }
 
@@ -28847,7 +28981,16 @@ const StyledProgress = styled$1(ProgressPrimitive.Root, {
   background: '$gray150',
   borderRadius: '99999px',
   width: '100%',
-  height: 8
+  variants: {
+    size: {
+      sm: {
+        height: 4
+      },
+      md: {
+        height: 8
+      }
+    }
+  }
 });
 const StyledIndicator = styled$1(ProgressPrimitive.Indicator, {
   background: 'linear-gradient(90deg, rgba(1,174,136,1) 35%, rgba(4,201,158,1) 100%)',
@@ -28864,13 +29007,15 @@ function PrimitiveLoadingBar({
   showProgressOnly,
   css,
   visibility,
-  colors
+  colors,
+  size
 }) {
   return visibility && jsxs(Container$4, Object.assign({
     css: css
   }, {
     children: [jsx(Progress, Object.assign({
-      value: 66
+      value: 66,
+      size: size
     }, {
       children: jsx(ProgressIndicator$1, {
         style: {
@@ -28931,7 +29076,8 @@ function LoadingBar(props) {
 LoadingBar.defaultProps = {
   showProgressOnly: false,
   show: false,
-  description: 'Loading...'
+  description: 'Loading...',
+  size: 'md'
 };
 
 const Container$3 = styled(Flex$1, {
@@ -31591,7 +31737,7 @@ function Skeleton() {
   }
 }
 
-var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
+var _jsxFileName = "/home/alfiantryp/Project/majoo-ui/packages/react/src/colors/Colors.js";
 const StyledPaper = styled(Paper, {
   borderRadius: '10px 10px 0 0',
   padding: 15,