@majoo-ui/react 1.54.0 → 1.54.1-rc.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('react-loading-skeleton'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', 'react-loading-skeleton', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.ReactSkeleton, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, ReactSkeleton, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +27,6 @@
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-  var ReactSkeleton__default = /*#__PURE__*/_interopDefaultLegacy(ReactSkeleton);
   var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
   var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
   var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
@@ -55,10 +54,11 @@
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
+  var ReactSkeleton__default = /*#__PURE__*/_interopDefaultLegacy(ReactSkeleton);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
-  var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+  var _jsxFileName$10 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -87,7 +87,7 @@
   };
 
   // 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) ||
@@ -181,31 +181,28 @@
     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;
+    return classof$8(it) == 'String' ? split$3(it, '') : $Object$4(it);
+  } : $Object$4;
 
-  var global$S = global$U;
-
-  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;
   };
 
@@ -229,7 +226,7 @@
     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) {
@@ -237,7 +234,7 @@
   };
 
   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;
@@ -248,11 +245,11 @@
 
   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;
@@ -299,43 +296,39 @@
     && !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;
@@ -347,12 +340,11 @@
     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
@@ -361,31 +353,31 @@
     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;
 
@@ -394,22 +386,21 @@
   (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;
@@ -434,7 +425,7 @@
     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;
@@ -442,7 +433,7 @@
   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;
 
@@ -459,7 +450,6 @@
     } return WellKnownSymbolsStore[name];
   };
 
-  var global$H = global$U;
   var call$k = functionCall;
   var isObject$b = isObject$d;
   var isSymbol$5 = isSymbol$6;
@@ -467,7 +457,7 @@
   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
@@ -480,7 +470,7 @@
       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);
@@ -496,10 +486,10 @@
     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);
 
@@ -557,26 +547,24 @@
     }).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
@@ -609,7 +597,7 @@
     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;
   };
@@ -618,7 +606,7 @@
   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;
@@ -660,11 +648,11 @@
 
   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));
 
@@ -680,18 +668,18 @@
   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) {
@@ -702,7 +690,7 @@
     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;
     };
   };
@@ -713,7 +701,7 @@
     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;
@@ -728,9 +716,9 @@
     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) {
@@ -760,10 +748,10 @@
   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');
@@ -775,16 +763,18 @@
     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 : '');
@@ -797,30 +787,32 @@
     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 = {};
@@ -828,12 +820,22 @@
   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;
@@ -967,11 +969,11 @@
   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];
@@ -1004,28 +1006,28 @@
 
   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;
@@ -1033,15 +1035,15 @@
     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];
@@ -1082,17 +1084,17 @@
   // 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
         });
@@ -1515,7 +1517,7 @@
 
   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;
@@ -1530,7 +1532,7 @@
     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;
   };
 
@@ -1625,7 +1627,7 @@
 
   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;
@@ -1633,7 +1635,7 @@
   // 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)
     });
@@ -1655,7 +1657,6 @@
     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;
@@ -1663,18 +1664,19 @@
   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;
@@ -1751,15 +1753,14 @@
     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 */
@@ -1799,7 +1800,7 @@
   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;
@@ -1992,11 +1993,11 @@
 
   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');
@@ -2026,7 +2027,7 @@
   };
 
   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');
@@ -2040,14 +2041,13 @@
 
   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';
@@ -2064,26 +2064,25 @@
     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;
@@ -2092,7 +2091,7 @@
   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) ||
@@ -2172,14 +2171,13 @@
     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;
   };
 
@@ -2353,7 +2351,7 @@
 
   const _excluded$A = ["children"],
         _excluded2$2 = ["children"];
-  var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+  var _jsxFileName$$ = "/home/alfiantryp/Project/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2611,428 +2609,8 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  function useMediaQuery(query) {
-    const [matches, setMatches] = React.useState(false);
-    React.useEffect(() => {
-      const media = window.matchMedia(query);
-
-      if (media.matches !== matches) {
-        setMatches(media.matches);
-      }
-
-      const listener = () => {
-        setMatches(media.matches);
-      };
-
-      media.addEventListener('change', listener);
-      return () => media.removeEventListener('change', listener);
-    }, [matches, query]);
-    return matches;
-  }
-
-  var StyledSkeleton = function StyledSkeleton(props) {
-    var color = props.color,
-        count = props.count,
-        width = props.width,
-        size = props.size,
-        circle = props.circle;
-
-    function getBaseColor(color) {
-      switch (color) {
-        case 'primary':
-          return colors$4.gray300;
-
-        default:
-          return colors$4.gray150;
-      }
-    }
-
-    function getSize(size) {
-      switch (size) {
-        case 'md':
-          return 16;
-
-        case 'lg':
-          return 118;
-
-        default:
-          return 12;
-      }
-    }
-
-    return jsxRuntime.jsx(ReactSkeleton.SkeletonTheme, __assign({
-      width: width,
-      borderRadius: size === 'lg' ? 0 : 20,
-      baseColor: getBaseColor(color),
-      highlightColor: "#FAFAFA"
-    }, {
-      children: jsxRuntime.jsx(ReactSkeleton__default["default"], {
-        height: getSize(size),
-        count: count,
-        circle: circle
-      }, void 0)
-    }), void 0);
-  };
-
-  var Card$1 = styled('div', {
-    padding: 40,
-    borderRadius: 8,
-    background: '$bgWhite',
-    boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)',
-    position: 'relative'
-  });
-  var Space = styled('div', {
-    height: 8,
-    variants: {
-      size: {
-        sm: {
-          height: 8
-        },
-        md: {
-          height: 18
-        }
-      }
-    }
-  });
-  function Skeleton() {
-    var isDesktop = useMediaQuery('(min-width: 767px)');
-
-    if (isDesktop) {
-      return jsxRuntime.jsxs(Grid, __assign({
-        columns: 6,
-        gapY: 5
-      }, {
-        children: [jsxRuntime.jsx(GridItem, __assign({
-          colSpan: 6
-        }, {
-          children: jsxRuntime.jsxs(Grid, __assign({
-            columns: 6,
-            gapX: 2
-          }, {
-            children: [jsxRuntime.jsx(GridItem, __assign({
-              colSpan: 2
-            }, {
-              children: jsxRuntime.jsxs(Card$1, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  size: "md",
-                  color: "primary"
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0)]
-              }, void 0)
-            }), void 0), jsxRuntime.jsx(GridItem, __assign({
-              colSpan: 2
-            }, {
-              children: jsxRuntime.jsxs(Card$1, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  size: "md",
-                  color: "primary"
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0)]
-              }, void 0)
-            }), void 0), jsxRuntime.jsx(GridItem, __assign({
-              colSpan: 2
-            }, {
-              children: jsxRuntime.jsxs(Card$1, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  size: "md",
-                  color: "primary"
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0)]
-              }, void 0)
-            }), void 0)]
-          }), void 0)
-        }), void 0), jsxRuntime.jsx(GridItem, __assign({
-          colSpan: 6
-        }, {
-          children: jsxRuntime.jsx(Card$1, {
-            children: jsxRuntime.jsxs(Grid, __assign({
-              columns: 6,
-              gapY: 5
-            }, {
-              children: [jsxRuntime.jsx(GridItem, __assign({
-                colSpan: 6
-              }, {
-                children: jsxRuntime.jsxs(Grid, __assign({
-                  columns: 6,
-                  gapX: 2
-                }, {
-                  children: [jsxRuntime.jsxs(GridItem, __assign({
-                    colSpan: 2
-                  }, {
-                    children: [jsxRuntime.jsx(StyledSkeleton, {
-                      size: "lg"
-                    }, void 0), jsxRuntime.jsx(Space, {
-                      size: "md"
-                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                      size: "md",
-                      color: "primary",
-                      width: "85%"
-                    }, void 0), jsxRuntime.jsx(Space, {
-                      size: "md"
-                    }, void 0), jsxRuntime.jsxs(Box, {
-                      children: [jsxRuntime.jsx(StyledSkeleton, {
-                        width: "85%"
-                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                        width: "60%"
-                      }, void 0)]
-                    }, void 0)]
-                  }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-                    colSpan: 2
-                  }, {
-                    children: [jsxRuntime.jsx(StyledSkeleton, {
-                      size: "lg"
-                    }, void 0), jsxRuntime.jsx(Space, {
-                      size: "md"
-                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                      size: "md",
-                      color: "primary",
-                      width: "85%"
-                    }, void 0), jsxRuntime.jsx(Space, {
-                      size: "md"
-                    }, void 0), jsxRuntime.jsxs(Box, {
-                      children: [jsxRuntime.jsx(StyledSkeleton, {
-                        width: "85%"
-                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                        width: "60%"
-                      }, void 0)]
-                    }, void 0)]
-                  }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-                    colSpan: 2
-                  }, {
-                    children: [jsxRuntime.jsx(StyledSkeleton, {
-                      size: "lg"
-                    }, void 0), jsxRuntime.jsx(Space, {
-                      size: "md"
-                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                      size: "md",
-                      color: "primary",
-                      width: "85%"
-                    }, void 0), jsxRuntime.jsx(Space, {
-                      size: "md"
-                    }, void 0), jsxRuntime.jsxs(Box, {
-                      children: [jsxRuntime.jsx(StyledSkeleton, {
-                        width: "85%"
-                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                        width: "60%"
-                      }, void 0)]
-                    }, void 0)]
-                  }), void 0)]
-                }), void 0)
-              }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-                colSpan: 6
-              }, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  width: "50%"
-                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
-                  inline: true,
-                  borderRadius: 20,
-                  baseColor: colors$4.gray150,
-                  highlightColor: "#FAFAFA"
-                }, {
-                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    style: {
-                      marginRight: 8
-                    },
-                    height: 12,
-                    width: 12,
-                    circle: true
-                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    height: 12,
-                    width: "95%"
-                  }, void 0)]
-                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
-                  inline: true,
-                  borderRadius: 20,
-                  baseColor: colors$4.gray150,
-                  highlightColor: "#FAFAFA"
-                }, {
-                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    style: {
-                      marginRight: 8
-                    },
-                    height: 12,
-                    width: 12,
-                    circle: true
-                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    height: 12,
-                    width: "95%"
-                  }, void 0)]
-                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
-                  inline: true,
-                  borderRadius: 20,
-                  baseColor: colors$4.gray150,
-                  highlightColor: "#FAFAFA"
-                }, {
-                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    style: {
-                      marginRight: 8
-                    },
-                    height: 12,
-                    width: 12,
-                    circle: true
-                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    height: 12,
-                    width: "95%"
-                  }, void 0)]
-                }), void 0)]
-              }), void 0)]
-            }), void 0)
-          }, void 0)
-        }), void 0)]
-      }), void 0);
-    } else {
-      return jsxRuntime.jsxs(Grid, __assign({
-        columns: 6,
-        gapY: 4
-      }, {
-        children: [jsxRuntime.jsx(GridItem, __assign({
-          colSpan: 6
-        }, {
-          children: jsxRuntime.jsxs(Card$1, {
-            children: [jsxRuntime.jsx(StyledSkeleton, {
-              size: "md",
-              color: "primary"
-            }, void 0), jsxRuntime.jsx(Space, {
-              size: "md"
-            }, void 0), jsxRuntime.jsxs(Box, {
-              children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                width: "60%"
-              }, void 0)]
-            }, void 0), jsxRuntime.jsx(Space, {
-              size: "md"
-            }, void 0), jsxRuntime.jsxs(Box, {
-              children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                width: "60%"
-              }, void 0)]
-            }, void 0)]
-          }, void 0)
-        }), void 0), jsxRuntime.jsx(GridItem, __assign({
-          colSpan: 6
-        }, {
-          children: jsxRuntime.jsx(Card$1, {
-            children: jsxRuntime.jsxs(Grid, {
-              children: [jsxRuntime.jsxs(GridItem, __assign({
-                colSpan: 6
-              }, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  size: "lg"
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                  size: "md",
-                  color: "primary",
-                  width: "85%"
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0), jsxRuntime.jsxs(Box, {
-                  children: [jsxRuntime.jsx(StyledSkeleton, {
-                    width: "85%"
-                  }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                    width: "60%"
-                  }, void 0)]
-                }, void 0), jsxRuntime.jsx(Space, {
-                  size: "md"
-                }, void 0)]
-              }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-                colSpan: 6
-              }, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  width: "50%"
-                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
-                  inline: true,
-                  borderRadius: 20,
-                  baseColor: colors$4.gray150,
-                  highlightColor: "#FAFAFA"
-                }, {
-                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    style: {
-                      marginRight: 8
-                    },
-                    height: 12,
-                    width: 12,
-                    circle: true
-                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    height: 12,
-                    width: "85%"
-                  }, void 0)]
-                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
-                  inline: true,
-                  borderRadius: 20,
-                  baseColor: colors$4.gray150,
-                  highlightColor: "#FAFAFA"
-                }, {
-                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    style: {
-                      marginRight: 8
-                    },
-                    height: 12,
-                    width: 12,
-                    circle: true
-                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    height: 12,
-                    width: "85%"
-                  }, void 0)]
-                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
-                  inline: true,
-                  borderRadius: 20,
-                  baseColor: colors$4.gray150,
-                  highlightColor: "#FAFAFA"
-                }, {
-                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    style: {
-                      marginRight: 8
-                    },
-                    height: 12,
-                    width: 12,
-                    circle: true
-                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
-                    height: 12,
-                    width: "85%"
-                  }, void 0)]
-                }), void 0)]
-              }), void 0)]
-            }, void 0)
-          }, void 0)
-        }), void 0)]
-      }), void 0);
-    }
-  }
-
-  const _excluded$z = ["children", "isCollapse", "css", "contentHeader", "isLoading"];
-  var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+  const _excluded$z = ["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',
@@ -3059,8 +2637,7 @@
       children,
       isCollapse,
       css,
-      contentHeader,
-      isLoading
+      contentHeader
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
@@ -3073,17 +2650,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 29,
+        lineNumber: 28,
         columnNumber: 5
       }
-    }), isLoading ? /*#__PURE__*/React__default["default"].createElement(Skeleton, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$_,
-        lineNumber: 31,
-        columnNumber: 9
-      }
-    }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, contentHeader, children));
+    }), contentHeader, children);
   };
 
   PageContainer.displayName = 'PageContainer';
@@ -3361,7 +2931,7 @@
   });
 
   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";
+  var _jsxFileName$Z = "/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';
@@ -3715,7 +3285,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+  var _jsxFileName$Y = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -3791,7 +3361,7 @@
   };
 
   const _excluded$x = ["id"];
-  var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+  var _jsxFileName$X = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -3876,7 +3446,7 @@
     }));
   };
 
-  var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+  var _jsxFileName$W = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -3911,7 +3481,7 @@
   };
 
   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";
+  var _jsxFileName$V = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/banner/Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
@@ -4003,13 +3573,13 @@
     }
   }), props.children);
   BannerTitle.propTypes = {
-    /**
-     Additional styles of title
+    /**
+     Additional styles of title
     */
     css: PropTypes__default["default"].object,
 
-    /**
-     Title of the Banner to be displayed
+    /**
+     Title of the Banner to be displayed
     */
     children: PropTypes__default["default"].string
   };
@@ -4025,13 +3595,13 @@
     }
   }), props.children);
   BannerDescription.propTypes = {
-    /**
-     Additional styles of description
+    /**
+     Additional styles of description
     */
     css: PropTypes__default["default"].object,
 
-    /**
-     Description of the Banner to be displayed
+    /**
+     Description of the Banner to be displayed
     */
     children: PropTypes__default["default"].string
   };
@@ -4060,18 +3630,18 @@
     }
   }, children));
   BannerLink.propTypes = {
-    /**
-     The purpose of a clickable link, presented in url
+    /**
+     The purpose of a clickable link, presented in url
     */
     link: PropTypes__default["default"].string,
 
-    /**
-     Text of BannerLink to be displayed
+    /**
+     Text of BannerLink to be displayed
     */
     children: PropTypes__default["default"].string,
 
-    /**
-     Additional theme of BannerLink is presented by color variants
+    /**
+     Additional theme of BannerLink is presented by color variants
     */
     variant: PropTypes__default["default"].oneOf(['info', 'warning', 'success', 'failed'])
   };
@@ -4089,7 +3659,7 @@
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      value === null || value === void 0 ? void 0 : value.onRemove();
+      value == null ? void 0 : value.onRemove();
     },
     __self: undefined,
     __source: {
@@ -4166,7 +3736,7 @@
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
-        props === null || props === void 0 ? void 0 : props.onRemove();
+        props == null ? void 0 : props.onRemove();
       },
       closeCenter: !props.title && !props.link,
       __self: undefined,
@@ -4262,43 +3832,43 @@
   BannerTitle.displayName = 'BannerTitle';
   BannerDescription.displayName = 'BannerDescription';
   Banner.propTypes = {
-    /**
-     Title of banner to be displayed
+    /**
+     Title of banner to be displayed
     */
     title: PropTypes__default["default"].string,
 
-    /**
-     Description of banner to be displayed
+    /**
+     Description of banner to be displayed
     */
     description: PropTypes__default["default"].string,
 
-    /**
-     The banner theme is presented in color variants
+    /**
+     The banner theme is presented in color variants
     */
     variant: PropTypes__default["default"].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__default["default"].string,
 
-    /**
-     Text of button link to be displayed
+    /**
+     Text of button link to be displayed
     */
     linkText: PropTypes__default["default"].string,
 
-    /**
-     Clickable event handler
+    /**
+     Clickable event handler
     */
     onClick: PropTypes__default["default"].func,
 
-    /**
-     Closable event handler
+    /**
+     Closable event handler
     */
     onRemove: PropTypes__default["default"].func,
 
-    /**
-    Block type banner to display in full width
+    /**
+    Block type banner to display in full width
     */
     bannerBlock: PropTypes__default["default"].bool
   };
@@ -4598,7 +4168,7 @@
   });
 
   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";
+  var _jsxFileName$U = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/card/Card.js";
   const CardComponent = styled('div', {
     padding: '12px',
     height: 'auto',
@@ -4722,7 +4292,7 @@
       }
     }
   });
-  const Card = _ref => {
+  const Card$1 = _ref => {
     let {
       className,
       children,
@@ -4785,7 +4355,7 @@
       }
     }, title)) : null, children);
   };
-  Card.propTypes = {
+  Card$1.propTypes = {
     className: PropTypes__default["default"].string,
     color: PropTypes__default["default"].string,
     shadow: PropTypes__default["default"].bool,
@@ -4796,7 +4366,7 @@
     textColor: PropTypes__default["default"].string,
     icon: PropTypes__default["default"].element
   };
-  Card.defaultProps = {
+  Card$1.defaultProps = {
     className: '',
     color: 'green',
     shadow: false,
@@ -4806,7 +4376,7 @@
   };
 
   const _excluded$u = ["children"];
-  var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+  var _jsxFileName$T = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -5080,7 +4650,7 @@
   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";
+  var _jsxFileName$S = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -5183,7 +4753,7 @@
   };
 
   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";
+  var _jsxFileName$R = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/image/Image.js";
   const ContainerFallback = styled(Flex$1, {
     boxSizing: 'border-box',
     border: '2px dashed #C0C4C4',
@@ -5280,58 +4850,58 @@
     }
   }
   Image.propTypes = {
-    /**
-     Additional className for img element.
+    /**
+     Additional className for img element.
      */
     className: PropTypes__default["default"].string,
 
-    /**
-     Which is used to specify the source of an image.
+    /**
+     Which is used to specify the source of an image.
      */
     src: PropTypes__default["default"].string,
 
-    /**
-     The written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
+    /**
+     The written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.
      */
     alt: PropTypes__default["default"].string,
 
-    /**
-     Additional css for img element.
+    /**
+     Additional css for img element.
      */
     css: PropTypes__default["default"].object,
 
-    /**
-     Additional css for default fallback element.
+    /**
+     Additional css for default fallback element.
      */
     cssFallback: PropTypes__default["default"].object,
 
-    /**
-     Custom width of img element.
+    /**
+     Custom width of img element.
      */
     width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
 
-    /**
-     Custom height of img element.
+    /**
+     Custom height of img element.
      */
     height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
 
-    /**
-     Set image to circle.
+    /**
+     Set image to circle.
      */
     rounded: PropTypes__default["default"].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__default["default"].string,
 
-    /**
-     Custom fallback if image url doesn't exist.
+    /**
+     Custom fallback if image url doesn't exist.
      */
     fallback: PropTypes__default["default"].string,
 
-    /**
-     Custom fallback title for default fallback.
+    /**
+     Custom fallback title for default fallback.
      */
     fallbackTitle: PropTypes__default["default"].string
   };
@@ -5341,7 +4911,7 @@
   };
 
   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";
+  var _jsxFileName$Q = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const {
     zIndices: zIndices$1
   } = core.foundations;
@@ -5542,7 +5112,7 @@
   };
 
   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";
+  var _jsxFileName$P = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/progress/Progress.js";
   const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -5803,7 +5373,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__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
@@ -5923,7 +5493,7 @@
   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',
@@ -5984,7 +5554,7 @@
   };
   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__*/React.createContext();
 
   const CheckboxGroup = ({
@@ -6047,7 +5617,7 @@
   };
   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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6095,7 +5665,7 @@
     }
   }));
 
-  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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6144,7 +5714,7 @@
   }));
 
   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__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -6209,7 +5779,7 @@
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
       const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-      setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
+      setChecked(checkValue != null ? checkValue : false);
     }, [checked, indeterminate, context]);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -6310,7 +5880,7 @@
   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%',
@@ -6457,13 +6027,13 @@
     }));
   };
   InputGroup.propTypes = {
-    /**
-      Adjust Input Text Size
+    /**
+      Adjust Input Text Size
      */
     size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
-    /**
-      Children must be InputText, InputAddon, or InputPrefixes
+    /**
+      Children must be InputText, InputAddon, or InputPrefixes
      */
     children: PropTypes__default["default"].node.isRequired,
 
@@ -6629,7 +6199,7 @@
   };
 
   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',
@@ -6791,7 +6361,7 @@
   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: {
@@ -6818,7 +6388,7 @@
     React.useEffect(() => {
       if (textareaRef.current) {
         textareaRef.current.style.height = '60px';
-        const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+        const scrollHeight = textareaRef == null ? void 0 : textareaRef.current.scrollHeight;
         textareaRef.current.style.height = scrollHeight + 20 + 'px';
       }
     }, []);
@@ -6857,10 +6427,10 @@
 
   const InputRadioContext = /*#__PURE__*/React__default["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__namespace.Root, Flex$1);
   function InputRadioGroup(props) {
-    return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+    return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
@@ -6875,7 +6445,7 @@
         lineNumber: 14,
         columnNumber: 9
       }
-    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), React__default["default"].Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
       style: Object.assign({}, child.props.style, {
         opacity: 1
       })
@@ -6890,7 +6460,7 @@
   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',
@@ -7089,7 +6659,7 @@
       value,
       outlined
     }) => {
-      const checked = value !== null && value !== void 0 ? value : defaultValue;
+      const checked = value != null ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
         direction: "column",
         outlined: outlined,
@@ -7188,7 +6758,7 @@
   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__default["default"], {
     // Reset
     appearance: 'none',
@@ -7339,7 +6909,7 @@
       size: size,
       isInvalid: isInvalid,
       readOnly: readOnly,
-      isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
+      isReadOnly: readOnly && !(props != null && props.inputGroup),
       disabled: disabled
     }, props, {
       __self: undefined,
@@ -7398,6 +6968,7 @@
     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;
   };
@@ -7416,10 +6987,10 @@
   };
 
   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');
@@ -7476,10 +7047,10 @@
   };
 
   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');
@@ -7487,10 +7058,10 @@
   });
 
   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');
@@ -7499,11 +7070,11 @@
   });
 
   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;
@@ -7521,15 +7092,15 @@
   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;
@@ -7683,7 +7254,7 @@
 
     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
@@ -7784,7 +7355,7 @@
       }
       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;
@@ -7842,7 +7413,7 @@
   }
 
   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',
@@ -8019,7 +7590,7 @@
   };
 
   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',
@@ -8155,18 +7726,18 @@
     const addTags = event => {
       if (event.key === 'Enter' && event.target.value !== '' && max !== tags.length) {
         if (tags.find(tag => tag.toLowerCase() === event.target.value.toLowerCase())) {
-          onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+          onEnter == null ? void 0 : onEnter({
             key: 'duplicate',
             value: event.target.value
           });
           return;
         }
 
-        if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
+        if (pattern && pattern != null && pattern.regex) {
           const regex = new RegExp(pattern.regex);
 
           if (!regex.test(event.target.value)) {
-            onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+            onEnter == null ? void 0 : onEnter({
               key: 'error',
               value: event.target.value
             });
@@ -8176,7 +7747,7 @@
         }
 
         setRegexError(false);
-        onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+        onEnter == null ? void 0 : onEnter({
           key: 'success',
           value: event.target.value
         });
@@ -8189,7 +7760,7 @@
       if (disabled || readOnly) {
         return tags;
       } else if (key === 'removeTag' || key === 'Backspace') {
-        onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(tags[index]);
+        onRemoveItem == null ? void 0 : onRemoveItem(tags[index]);
         setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
       }
     }; // const handleErrorMessage = () => {
@@ -8237,7 +7808,7 @@
         lineNumber: 180,
         columnNumber: 9
       }
-    })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
+    })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
       color: "red",
       __self: this,
       __source: {
@@ -8319,7 +7890,7 @@
   };
 
   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__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -8427,7 +7998,7 @@
   };
   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__namespace.createElement("svg", _extends({
     width: props.size,
@@ -8488,7 +8059,7 @@
     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__namespace.createElement("svg", _extends({
     width: props.size,
@@ -8531,7 +8102,7 @@
   };
 
   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 {
@@ -8646,7 +8217,7 @@
   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;
@@ -8721,14 +8292,13 @@
     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
@@ -8740,7 +8310,7 @@
       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;
@@ -9428,6 +8998,14 @@
     }), 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;
@@ -9438,19 +9016,18 @@
     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;
@@ -9532,6 +9109,7 @@
   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;
@@ -9626,19 +9204,18 @@
       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) {
@@ -9657,7 +9234,7 @@
         }
         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) {
@@ -9677,20 +9254,20 @@
   };
 
   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
@@ -9701,7 +9278,7 @@
     }
   });
 
-  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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -9750,7 +9327,7 @@
   }));
 
   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',
@@ -10115,10 +9692,10 @@
           return setItems(sortValue);
         }
       } else {
-        let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
-          var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+        let filterItems = option == null ? void 0 : option.filter(item => {
+          var _item$name, _item$name$toLowerCas;
 
-          return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
+          return item == null ? void 0 : (_item$name = item.name) == null ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) == null ? void 0 : _item$name$toLowerCas.includes == null ? void 0 : _item$name$toLowerCas.includes(input == null ? void 0 : input.toLocaleLowerCase == null ? void 0 : input.toLocaleLowerCase());
         });
         setItems(filterItems);
       }
@@ -10128,9 +9705,9 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+        if ((selected == null ? void 0 : selected.id) === 'counter') {
           setSelectedValue([]);
-          onChange === null || onChange === void 0 ? void 0 : onChange([]);
+          onChange == null ? void 0 : onChange([]);
 
           for (let i = 0; i < selectedValue.length; i++) {
             removeSelectedItem(selectedValue[i]);
@@ -10141,7 +9718,7 @@
           setSelectedValue(filterItems);
 
           if (selected.id !== '!all') {
-            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+            onChange == null ? void 0 : onChange(filterItems);
           }
         }
       }
@@ -10186,7 +9763,7 @@
                       removeSelectedItem(item);
                     });
                     setSelectedValue([]);
-                    onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                    onChange == null ? void 0 : onChange([]);
                   } else {
                     removeItem(selectedItem);
                   }
@@ -10201,12 +9778,12 @@
                     itemIds.push(item.id);
                   });
                   setSelectedValue(itemIds);
-                  onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
+                  onChange == null ? void 0 : onChange(itemIds.slice(1));
                 } else {
                   addSelectedItem(selectedItem);
                   setSelectedValue([...selectedValue, selectedItem.id]);
                   const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
-                  onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
+                  onChange == null ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
                 }
 
                 selectItem(null);
@@ -10358,7 +9935,7 @@
         lineNumber: 559,
         columnNumber: 11
       }
-    }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+    }, selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
@@ -10382,7 +9959,7 @@
         lineNumber: 563,
         columnNumber: 17
       }
-    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
@@ -10395,7 +9972,7 @@
         maxWidth: '150px !important'
       },
       disabled: disabled,
-      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+      isRemovable: readOnly || disabled || Boolean(selectedItems == null ? void 0 : selectedItems.length),
       size: size,
       readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
       ,
@@ -10417,7 +9994,7 @@
         lineNumber: 586,
         columnNumber: 13
       }
-    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -10485,7 +10062,7 @@
         lineNumber: 640,
         columnNumber: 27
       }
-    }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
+    }), showSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < (items == null ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
@@ -10596,7 +10173,7 @@
     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__namespace.forwardRef((props, ref) => {
     return /*#__PURE__*/React__namespace.createElement(InputSelectCheck, _extends({
       ref: ref,
@@ -10647,7 +10224,7 @@
     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',
@@ -11449,15 +11026,15 @@
     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);
@@ -11678,7 +11255,7 @@
   };
 
   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
   } = core.foundations;
@@ -11768,8 +11345,8 @@
       ref: floating,
       style: Object.assign({
         position: strategy,
-        top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
-        left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
+        top: isMobile ? 0 : y != null ? y : '',
+        left: isMobile ? 0 : x != null ? x : '',
         zIndex: zIndices.popover
       }, style)
     }), {
@@ -11812,7 +11389,7 @@
   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 = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -12157,7 +11734,7 @@
   };
 
   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',
@@ -12323,7 +11900,7 @@
         _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__namespace.Root, {
     display: 'flex',
     flexDirection: 'column',
@@ -12674,7 +12251,7 @@
 
   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__namespace.Root, {
     display: 'inline-flex',
     borderRadius: '$md',
@@ -12902,7 +12479,7 @@
   };
 
   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',
@@ -13002,7 +12579,7 @@
         props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
     const getValue = () => {
-      let value = props === null || props === void 0 ? void 0 : props.value;
+      let value = props == null ? void 0 : props.value;
 
       if (typeof value === 'number' || parseInt(value)) {
         if (Math.sign(value) === 1 || Math.sign(value) === 0) {
@@ -13046,7 +12623,7 @@
   };
 
   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',
@@ -13255,14 +12832,13 @@
   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;
@@ -13318,16 +12894,15 @@
       || 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;
@@ -13373,12 +12948,10 @@
 
   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;
   };
 
@@ -13386,7 +12959,7 @@
 
   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;
@@ -13397,15 +12970,15 @@
   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';
@@ -13413,7 +12986,7 @@
 
   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) {
@@ -13436,7 +13009,7 @@
 
   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:
@@ -13455,7 +13028,7 @@
       delete queue$1[id];
     };
     // Node.js 0.8-
-    if (IS_NODE$2) {
+    if (IS_NODE$3) {
       defer = function (id) {
         process$2.nextTick(runner(id));
       };
@@ -13474,14 +13047,14 @@
     // 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) {
@@ -13504,29 +13077,29 @@
   };
 
   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;
@@ -13535,7 +13108,7 @@
   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;
@@ -13552,7 +13125,7 @@
 
     // 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 });
@@ -13570,7 +13143,7 @@
         then(flush);
       };
     // Node.js without promises
-    } else if (IS_NODE$1) {
+    } else if (IS_NODE$2) {
       notify$1 = function () {
         process$1.nextTick(flush);
       };
@@ -13582,7 +13155,7 @@
     // - 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);
       };
@@ -13598,10 +13171,10 @@
     } 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);
     }
@@ -13639,25 +13212,35 @@
 
   var queue = Queue$1;
 
-  var global$c = global$U;
+  var global$6 = global$s;
+
+  var promiseNativeConstructor = global$6.Promise;
 
-  var promiseNativeConstructor = global$c.Promise;
+  /* global Deno -- Deno case */
 
-  var engineIsBrowser = typeof window == 'object' && typeof Deno != 'object';
+  var engineIsDeno = typeof Deno == 'object' && Deno && typeof Deno.version == 'object';
 
-  var global$b = global$U;
+  var IS_DENO$1 = engineIsDeno;
+  var IS_NODE$1 = engineIsNode;
+
+  var engineIsBrowser = !IS_DENO$1 && !IS_NODE$1
+    && typeof window == 'object'
+    && typeof document == 'object';
+
+  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);
@@ -13669,18 +13252,18 @@
     // 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 = {
@@ -13712,7 +13295,7 @@
 
   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;
@@ -13742,13 +13325,13 @@
   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;
@@ -13789,7 +13372,7 @@
           }
         }
         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);
@@ -13821,14 +13404,14 @@
       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);
@@ -13851,7 +13434,7 @@
   };
 
   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);
@@ -13879,7 +13462,7 @@
     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 () {
@@ -14021,19 +13604,18 @@
       || 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;
@@ -14060,11 +13642,10 @@
     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;
@@ -14072,7 +13653,7 @@
   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;
@@ -14084,6 +13665,7 @@
   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);
@@ -14101,11 +13683,13 @@
       } 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++) {
@@ -14116,7 +13700,7 @@
       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);
@@ -14543,7 +14127,7 @@
   };
 
   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["default"].createContext();
   const {
     sizes
@@ -14956,6 +14540,25 @@
   var AccordionItem = StyledItem$1;
   var AccordionContent = AccordionPrimitive__namespace.Content;
 
+  function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(false);
+    React.useEffect(() => {
+      const media = window.matchMedia(query);
+
+      if (media.matches !== matches) {
+        setMatches(media.matches);
+      }
+
+      const listener = () => {
+        setMatches(media.matches);
+      };
+
+      media.addEventListener('change', listener);
+      return () => media.removeEventListener('change', listener);
+    }, [matches, query]);
+    return matches;
+  }
+
   var ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
   var Item$1 = styled(ButtonGroupItem, {
     fontSize: '$label',
@@ -16296,7 +15899,7 @@
     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'
   });
@@ -16553,33 +16156,33 @@
     })));
   };
   NativeTimePicker.propTypes = {
-    /**
-     Resize time picker.
+    /**
+     Resize time picker.
     */
     size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
-    /**
-     Change handler.
+    /**
+     Change handler.
     */
     onChange: PropTypes__default["default"].func,
 
-    /**
-     Time picker default value, support moment format.
+    /**
+     Time picker default value, support moment format.
     */
     defaultValue: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-     Time picker value, support moment format.
+    /**
+     Time picker value, support moment format.
     */
     value: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-      Specify the minimum date.
+    /**
+      Specify the minimum date.
      */
     minDate: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-         Specify the maximum date.
+    /**
+         Specify the maximum date.
         */
     maxDate: PropTypes__default["default"].instanceOf(Date)
   };
@@ -16624,49 +16227,49 @@
   };
   TimePicker.displayName = 'TimePicker';
   TimePicker.propTypes = {
-    /**
-     Additional styles.
+    /**
+     Additional styles.
     */
     css: PropTypes__default["default"].object,
 
-    /**
-     Resize time picker.
+    /**
+     Resize time picker.
     */
     size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
-    /**
-     Change handler.
+    /**
+     Change handler.
     */
     onChange: PropTypes__default["default"].func,
 
-    /**
-     Time picker default value, support moment format.
+    /**
+     Time picker default value, support moment format.
     */
     defaultValue: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-     Time picker value, support moment format.
+    /**
+     Time picker value, support moment format.
     */
     value: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-     Disabled state.
+    /**
+     Disabled state.
     */
     disabled: PropTypes__default["default"].bool,
 
-    /**
-      Specify the minimum date.
+    /**
+      Specify the minimum date.
      */
     minDate: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-       Specify the maximum date.
+    /**
+       Specify the maximum date.
       */
     maxDate: PropTypes__default["default"].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;
@@ -16842,63 +16445,63 @@
     placeholder: 'Select Time'
   };
   InputTimePicker.propTypes = {
-    /**
-     Additional styles.
+    /**
+     Additional styles.
     */
     css: PropTypes__default["default"].object,
 
-    /**
-     Disabled state.
+    /**
+     Disabled state.
     */
     disabled: PropTypes__default["default"].bool,
 
-    /**
-     ReadOnly state.
+    /**
+     ReadOnly state.
     */
     readOnly: PropTypes__default["default"].bool,
 
-    /**
-     Resize time picker.
+    /**
+     Resize time picker.
     */
     size: PropTypes__default["default"].oneOf(['sm', 'lg']),
 
-    /**
-     Custom placeholder input time picker.
+    /**
+     Custom placeholder input time picker.
     */
     placeholder: PropTypes__default["default"].string,
 
-    /**
-     Time picker default value, support moment format.
+    /**
+     Time picker default value, support moment format.
     */
     defaultValue: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-     Time picker value, support moment format.
+    /**
+     Time picker value, support moment format.
     */
     value: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-     Change handler.
+    /**
+     Change handler.
     */
     onChange: PropTypes__default["default"].func,
 
-    /**
-     Placement popover input time picker.
+    /**
+     Placement popover input time picker.
     */
     placement: PropTypes__default["default"].string,
 
-    /**
-      Specify the minimum date.
+    /**
+      Specify the minimum date.
      */
     minDate: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-         Specify the maximum date.
+    /**
+         Specify the maximum date.
     */
     maxDate: PropTypes__default["default"].instanceOf(Date),
 
-    /**
-     * Invalid state input.
+    /**
+     * Invalid state input.
      */
     isInvalid: PropTypes__default["default"].bool
   };
@@ -17463,7 +17066,7 @@
   };
 
   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',
@@ -17733,7 +17336,7 @@
   };
 
   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'
   });
@@ -17839,7 +17442,7 @@
         lineNumber: 40,
         columnNumber: 11
       }
-    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+    }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
       css: limitItemContainerStyle(selectedLimit === limit),
       onClick: () => onChange(limit),
@@ -17870,7 +17473,7 @@
   }
 
   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 {
@@ -19033,7 +18636,7 @@
     return jsxRuntime.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,
@@ -19069,12 +18672,11 @@
   // 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
@@ -19082,21 +18684,20 @@
     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);
@@ -19144,7 +18745,7 @@
     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;
@@ -19172,10 +18773,10 @@
       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;
@@ -19219,7 +18820,7 @@
     }
   });
 
-  var global$5 = global$U;
+  var global$3 = global$s;
   var fails$4 = fails$t;
   var uncurryThis$7 = functionUncurryThis;
   var toString$6 = toString$h;
@@ -19227,8 +18828,8 @@
   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
@@ -19717,7 +19318,7 @@
     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,
@@ -19759,7 +19360,7 @@
     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',
@@ -20011,7 +19612,7 @@
     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: ({
@@ -20316,7 +19917,7 @@
   };
 
   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
@@ -20488,7 +20089,7 @@
         if (!props.onOpenAutoFocus) {
           e.preventDefault();
         } else {
-          props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+          props == null ? void 0 : props.onOpenAutoFocus();
         }
       },
       __self: undefined,
@@ -20609,8 +20210,8 @@
       size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -20629,12 +20230,12 @@
       size: "sm",
       onClick: buttonCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.cancelButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -20656,8 +20257,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -20817,8 +20418,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -20837,12 +20438,12 @@
       size: "sm",
       onClick: props.onCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.cancelButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -20864,8 +20465,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -20915,7 +20516,7 @@
   const AlertDialogConfirm = ADialog__namespace.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["default"].createContext();
   const slideUpAndFade = keyframes({
     '0%': {
@@ -21252,7 +20853,6 @@
     }
   };
 
-  var global$4 = global$U;
   var bind$2 = functionBindContext;
   var call$2 = functionCall;
   var toObject = toObject$7;
@@ -21264,7 +20864,7 @@
   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
@@ -21279,7 +20879,7 @@
     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() : [];
@@ -21289,7 +20889,7 @@
       }
     } 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);
@@ -21300,7 +20900,6 @@
   };
 
   // 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
@@ -21317,7 +20916,7 @@
   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;
@@ -21432,7 +21031,7 @@
       // Increase `delta` enough to advance the decoder's <n,i> state to <m,0>, but guard against overflow.
       var handledCPCountPlusOne = handledCPCount + 1;
       if (m - n > floor$1((maxInt - delta) / handledCPCountPlusOne)) {
-        throw RangeError(OVERFLOW_ERROR);
+        throw $RangeError(OVERFLOW_ERROR);
       }
 
       delta += (m - n) * handledCPCountPlusOne;
@@ -21441,7 +21040,7 @@
       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.
@@ -21491,7 +21090,7 @@
   // 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;
@@ -21853,7 +21452,7 @@
     };
 
     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]) : {});
         }
@@ -21869,7 +21468,7 @@
       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
       });
     }
@@ -21885,7 +21484,7 @@
   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;
@@ -23063,7 +22662,7 @@
     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'
   });
@@ -23381,7 +22980,7 @@
           upload({
             url: action,
             file: newFile,
-            customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
+            customBody: customBodyRequest == null ? void 0 : customBodyRequest(newFile),
             token,
             tokenKey,
             reqKey,
@@ -23404,12 +23003,12 @@
                 }
               }
 
-              onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
+              onChange == null ? void 0 : (_onChange = onChange({
                 fileList: arrProgress,
                 file: fileProgress,
                 indexReplace: indexReplace.current,
                 isReplace: indexReplace.current !== null
-              })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
+              })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
             }
           }).then(result => {
             var _onChange2, _onChange2$then;
@@ -23426,12 +23025,12 @@
               }
             }
 
-            onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
+            onChange == null ? void 0 : (_onChange2 = onChange({
               fileList: arrSuccess,
               file: fileSuccess,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
+            })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
           }).catch(error => {
             var _onChange3, _onChange3$then;
 
@@ -23447,22 +23046,22 @@
               }
             }
 
-            onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
+            onChange == null ? void 0 : (_onChange3 = onChange({
               fileList: arrError,
               file: fileError,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
+            })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
           });
         } else {
           var _onChange4, _onChange4$then;
 
-          onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
+          onChange == null ? void 0 : (_onChange4 = onChange({
             fileList: arrFile,
             file: newFile,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
+          })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
         }
 
         if (indexReplace.current !== null) {
@@ -23487,24 +23086,24 @@
             // program to get the dimensions of an image
             const img = document.createElement('img');
             img.src = URL.createObjectURL(files[0]);
-            img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
-            img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
+            img.size = files == null ? void 0 : (_files$ = files[0]) == null ? void 0 : _files$.size;
+            img.type = files == null ? void 0 : (_files$2 = files[0]) == null ? void 0 : _files$2.type;
 
             img.onload = () => {
               var _onBeforeCrop, _onBeforeCrop$then;
 
-              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
+              onBeforeCrop == null ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) == null ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
                 setError(null);
                 toggleModal();
                 setFileState(files[0]);
                 setPreviewImage(URL.createObjectURL(files[0]));
-              })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+              })) == null ? void 0 : _onBeforeCrop$then.catch(error => setError(error == null ? void 0 : error.message));
             };
 
             img.onerror = error => {
               var _onBeforeCrop2, _onBeforeCrop2$then;
 
-              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+              onBeforeCrop == null ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) == null ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) == null ? void 0 : _onBeforeCrop2$then.catch(error => setError(error == null ? void 0 : error.message));
             };
           } else {
             toggleModal();
@@ -23516,15 +23115,15 @@
     }
 
     function handleCrop() {
-      if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
+      if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
         imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-          const sizeMB = (blob === null || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
+          const sizeMB = (blob == null ? void 0 : blob.size) / 1024 / 1024;
 
           if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
             var _fileState$name;
 
-            const file = new File([blob], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
-              type: blob === null || blob === void 0 ? void 0 : blob.type
+            const file = new File([blob], (fileState == null ? void 0 : (_fileState$name = fileState.name) == null ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+              type: blob == null ? void 0 : blob.type
             });
             handleUpload([file]);
             setCrop(null);
@@ -23539,17 +23138,17 @@
             }).then(compressedFile => {
               var _fileState$name2;
 
-              const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name2 = fileState.name) === null || _fileState$name2 === void 0 ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
-                type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+              const file = new File([compressedFile], (fileState == null ? void 0 : (_fileState$name2 = fileState.name) == null ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
+                type: compressedFile == null ? void 0 : compressedFile.type
               });
               handleUpload([file]);
               setCrop(null);
               setCompletedCrop(null);
-            }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+            }).catch(error => console.error(error == null ? void 0 : error.message));
           }
 
           toggleModal();
-        }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        }).catch(error => console.error(error == null ? void 0 : error.message));
       } else {
         handleUpload([fileState]);
         toggleModal();
@@ -23580,7 +23179,7 @@
       const index = fileList.indexOf(file);
       const newFileList = fileList.slice();
       newFileList.splice(index, 1);
-      onChange === null || onChange === void 0 ? void 0 : onChange({
+      onChange == null ? void 0 : onChange({
         fileList: newFileList,
         file
       });
@@ -23608,22 +23207,22 @@
     function handleOpenFile(file) {
       var _String, _file$name;
 
-      let extension = (_String = String(file === null || file === void 0 ? void 0 : (_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop())) === null || _String === void 0 ? void 0 : _String.toLowerCase();
+      let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
 
       if (extension === 'pdf') {
-        window.open(file === null || file === void 0 ? void 0 : file.url);
+        window.open(file == null ? void 0 : file.url);
       } else {
-        request__default["default"].get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+        request__default["default"].get(file == null ? void 0 : file.url).end((err, res) => {
           if (err) {
             console.error(err.message);
           }
 
-          if (res && res !== null && res !== void 0 && res.ok) {
-            const response = res === null || res === void 0 ? void 0 : res.text;
+          if (res && res != null && res.ok) {
+            const response = res == null ? void 0 : res.text;
             const url = window.URL.createObjectURL(new Blob([response]));
             const link = document.createElement('a');
             link.href = url;
-            link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
+            link.setAttribute('download', file == null ? void 0 : file.name);
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -23693,12 +23292,12 @@
     }
 
     const renderPicture = () => {
-      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+      return fileList == null ? void 0 : fileList.map((item, index) => {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item === null || item === void 0 ? void 0 : item.percent,
-            loading: item === null || item === void 0 ? void 0 : item.loading,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -23773,14 +23372,14 @@
     };
 
     const renderFile = () => {
-      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+      return fileList == null ? void 0 : fileList.map((item, index) => {
         var _item$name;
 
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item === null || item === void 0 ? void 0 : item.percent,
-            loading: item === null || item === void 0 ? void 0 : item.loading,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -23847,7 +23446,7 @@
             lineNumber: 661,
             columnNumber: 17
           }
-        }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           label: item.name,
           __self: undefined,
           __source: {
@@ -24019,7 +23618,7 @@
           lineNumber: 736,
           columnNumber: 11
         }
-      }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -24053,7 +23652,7 @@
           lineNumber: 742,
           columnNumber: 17
         }
-      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder != null ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -24213,7 +23812,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
+      gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -24252,176 +23851,176 @@
     imageCompression: true
   };
   Upload.propTypes = {
-    /**
-     Placeholder label of upload.
+    /**
+     Placeholder label of upload.
     */
     placeholder: PropTypes__default["default"].string,
 
-    /**
-     Disabled state of upload.
+    /**
+     Disabled state of upload.
     */
     disabled: PropTypes__default["default"].bool,
 
-    /**
-     Built-in stylesheets, support for two types.
+    /**
+     Built-in stylesheets, support for two types.
     */
     listType: PropTypes__default["default"].oneOf(['file', 'picture']),
 
-    /**
-     Whether to support selected multiple file.
+    /**
+     Whether to support selected multiple file.
      */
     multiple: PropTypes__default["default"].bool,
 
-    /**
-     List of files to be uploaded.
+    /**
+     List of files to be uploaded.
      */
     fileList: PropTypes__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].func,
 
-    /**
-     A custom element inside upload container.
+    /**
+     A custom element inside upload container.
      */
     children: PropTypes__default["default"].element,
 
-    /**
-     Limit the number of uploaded files.
+    /**
+     Limit the number of uploaded files.
      */
     max: PropTypes__default["default"].number,
 
-    /**
-     Limit the maximum image size in MB.
+    /**
+     Limit the maximum image size in MB.
      */
     maxSizeMB: PropTypes__default["default"].number,
 
-    /**
-     Limit file type of upload.
+    /**
+     Limit file type of upload.
      */
     accept: PropTypes__default["default"].string,
 
-    /**
-     Custom label for replace button.
+    /**
+     Custom label for replace button.
      */
     replaceLabel: PropTypes__default["default"].string,
 
-    /**
-     Custom width of upload container.
+    /**
+     Custom width of upload container.
      */
     width: PropTypes__default["default"].number,
 
-    /**
-     Custom height of upload container.
+    /**
+     Custom height of upload container.
      */
     height: PropTypes__default["default"].number,
 
-    /**
-     Additional css.
+    /**
+     Additional css.
      */
     css: PropTypes__default["default"].object,
 
-    /**
-     Custom title header of cropper modal.
+    /**
+     Custom title header of cropper modal.
      */
     cropperTitle: PropTypes__default["default"].string,
 
-    /**
-     Add image cropper on upload.
+    /**
+     Add image cropper on upload.
      */
     showCropper: PropTypes__default["default"].bool,
 
-    /**
-     Hidden toggle aspect ratio image cropper.
+    /**
+     Hidden toggle aspect ratio image cropper.
      */
     hiddenToggleAspect: PropTypes__default["default"].bool,
 
-    /**
-     The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
+    /**
+     The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
      */
     ratio: PropTypes__default["default"].number,
 
-    /**
-     Can set error message to the upload.
+    /**
+     Can set error message to the upload.
      */
     errorMessage: PropTypes__default["default"].string,
 
-    /**
-     Progress of upload process.
+    /**
+     Progress of upload process.
     */
     progress: PropTypes__default["default"].number,
 
-    /**
-      Auto increment progress of upload process.
+    /**
+      Auto increment progress of upload process.
      */
     loading: PropTypes__default["default"].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__default["default"].string,
 
-    /**
-     Custom body request to upload action.
+    /**
+     Custom body request to upload action.
      */
     customBodyRequest: PropTypes__default["default"].func,
 
-    /**
-     Contains an authentication token for upload API.
+    /**
+     Contains an authentication token for upload API.
      */
     token: PropTypes__default["default"].string,
 
-    /**
-     Referencing the headers key to attach the token.
+    /**
+     Referencing the headers key to attach the token.
      */
     tokenKey: PropTypes__default["default"].string,
 
-    /**
-     Referencing the key to attach the file to be sent.
+    /**
+     Referencing the key to attach the file to be sent.
      */
     reqKey: PropTypes__default["default"].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__default["default"].string,
 
-    /**
-     To compression image if file size > 1MB.
+    /**
+     To compression image if file size > 1MB.
      */
     imageCompression: PropTypes__default["default"].bool,
 
-    /**
-     Callback to handle before crop image.
+    /**
+     Callback to handle before crop image.
      */
     onBeforeCrop: PropTypes__default["default"].func
   };
@@ -25040,7 +24639,7 @@
 
   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,
@@ -25052,10 +24651,10 @@
     const [isPopover, setIsPopover] = React.useState(false);
 
     function getColor() {
-      const color = props === null || props === void 0 ? void 0 : props.color;
+      const color = props == null ? void 0 : props.color;
 
       if (typeof color === 'string') {
-        return color === null || color === void 0 ? void 0 : color.toUpperCase();
+        return color == null ? void 0 : color.toUpperCase();
       }
 
       return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -25152,28 +24751,28 @@
 
   InputColorPicker.displayName = 'InputColorPicker';
   InputColorPicker.propTypes = {
-    /**
-     Color code to be displayed.
+    /**
+     Color code to be displayed.
     */
     color: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]),
 
-    /**
-     Additional color list.
+    /**
+     Additional color list.
     */
     presetColors: PropTypes__default["default"].array,
 
-    /**
-     Change event handler.
+    /**
+     Change event handler.
     */
     onChange: PropTypes__default["default"].func,
 
-    /**
-     Add preset color event handler.
+    /**
+     Add preset color event handler.
     */
     onAddColor: PropTypes__default["default"].func,
 
-    /**
-     Disable opacity selector.
+    /**
+     Disable opacity selector.
     */
     disableAlpha: PropTypes__default["default"].bool
   };
@@ -25183,7 +24782,7 @@
 
   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',
@@ -27147,7 +26746,7 @@
     })));
   }
 
-  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',
@@ -27348,7 +26947,7 @@
     }, "%")));
   }
 
-  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,
@@ -27851,28 +27450,28 @@
   }
 
   ColorPicker.propTypes = {
-    /**
-     Color code to be displayed.
+    /**
+     Color code to be displayed.
     */
     color: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]),
 
-    /**
-     Additional color list
+    /**
+     Additional color list
     */
     presetColors: PropTypes__default["default"].array,
 
-    /**
-     Change event handler
+    /**
+     Change event handler
     */
     onChange: PropTypes__default["default"].func,
 
-    /**
-     Add preset color event handler
+    /**
+     Add preset color event handler
     */
     onAddColor: PropTypes__default["default"].func,
 
-    /**
-     Disable opacity selector
+    /**
+     Disable opacity selector
     */
     disableAlpha: PropTypes__default["default"].bool
   };
@@ -27881,7 +27480,7 @@
   };
   var ColorPicker$1 = common.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["default"].createContext({});
   const Stepper = StepWizard__default["default"];
   Stepper.displayName = 'Stepper';
@@ -28027,9 +27626,9 @@
             lineNumber: 120,
             columnNumber: 30
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), 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["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.tooltipsContents,
+          label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28048,9 +27647,9 @@
             lineNumber: 124,
             columnNumber: 19
           }
-        })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           css: {
-            marginLeft: (_data5 = data[i - 1]) !== null && _data5 !== void 0 && _data5.withTolltip ? 0 : '$spacing-03'
+            marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
           },
           align: "center",
           __self: undefined,
@@ -28102,7 +27701,7 @@
             height: 24,
             borderRadius: '$round',
             border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-            backgroundColor: (_data6 = data[i - 1]) !== null && _data6 !== void 0 && _data6.disabled ? '$gray200' : '$white'
+            backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
           },
           __self: undefined,
           __source: {
@@ -28120,10 +27719,10 @@
             lineNumber: 163,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltipsContents,
+          label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28139,11 +27738,11 @@
             lineNumber: 168,
             columnNumber: 19
           }
-        })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
           justify: "center",
           css: {
-            marginTop: (_data11 = data[i - 1]) !== null && _data11 !== void 0 && _data11.withTolltip ? 0 : '$spacing-03'
+            marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
           },
           __self: undefined,
           __source: {
@@ -28225,9 +27824,7 @@
       }));
     }, [props.hide]);
     React.useEffect(() => {
-      var _props$onChangeVisibi;
-
-      props === null || props === void 0 ? void 0 : (_props$onChangeVisibi = props.onChangeVisibility) === null || _props$onChangeVisibi === void 0 ? void 0 : _props$onChangeVisibi.call(props, state.hide);
+      props == null ? void 0 : props.onChangeVisibility == null ? void 0 : props.onChangeVisibility(state.hide);
     }, [state.hide]);
 
     const toogleVisibility = value => {
@@ -28239,13 +27836,13 @@
     const getIsComplete = currentStep => {
       var _state$isComplete;
 
-      return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
+      return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
     };
 
     const getTitleStep = currentStep => {
       var _props$navContents, _props$navContents2;
 
-      return props === null || props === void 0 ? void 0 : (_props$navContents = props.navContents) === null || _props$navContents === void 0 ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) === null || _props$navContents2 === void 0 ? void 0 : _props$navContents2.title;
+      return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
     };
 
     const setState = value => {
@@ -28287,15 +27884,15 @@
       });
       props.onStepChange && props.onStepChange(e);
 
-      if (props !== null && props !== void 0 && (_props$navContents3 = props.navContents) !== null && _props$navContents3 !== void 0 && (_props$navContents4 = _props$navContents3[(e === null || e === void 0 ? void 0 : e.activeStep) - 1]) !== null && _props$navContents4 !== void 0 && _props$navContents4.disabled) {
-        if ((e === null || e === void 0 ? void 0 : e.activeStep) > (e === null || e === void 0 ? void 0 : e.previousStep)) {
+      if (props != null && (_props$navContents3 = props.navContents) != null && (_props$navContents4 = _props$navContents3[(e == null ? void 0 : e.activeStep) - 1]) != null && _props$navContents4.disabled) {
+        if ((e == null ? void 0 : e.activeStep) > (e == null ? void 0 : e.previousStep)) {
           var _state$SW;
 
-          state === null || state === void 0 ? void 0 : (_state$SW = state.SW) === null || _state$SW === void 0 ? void 0 : _state$SW.nextStep();
+          state == null ? void 0 : (_state$SW = state.SW) == null ? void 0 : _state$SW.nextStep();
         } else {
           var _state$SW2;
 
-          state === null || state === void 0 ? void 0 : (_state$SW2 = state.SW) === null || _state$SW2 === void 0 ? void 0 : _state$SW2.previousStep();
+          state == null ? void 0 : (_state$SW2 = state.SW) == null ? void 0 : _state$SW2.previousStep();
         }
       }
     };
@@ -28311,11 +27908,11 @@
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
       value: {
         toogleVisibility,
-        isHide: state === null || state === void 0 ? void 0 : state.hide,
+        isHide: state == null ? void 0 : state.hide,
         setComplete,
         setState,
         state,
-        SW: state === null || state === void 0 ? void 0 : state.SW,
+        SW: state == null ? void 0 : state.SW,
         forbidClickNav: props.forbidClickNav,
         titles: props.titles,
         isMobile: props.isMobile,
@@ -28362,7 +27959,7 @@
     }), 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,
@@ -28407,7 +28004,7 @@
     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': {
@@ -28488,10 +28085,10 @@
     function getDatasets(content, activeId, isCollapse) {
       const datasets = [];
 
-      for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
+      for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
         var _content$i;
 
-        if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
+        if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
           datasets.unshift(content[i]);
         } else {
           datasets.push(content[i]);
@@ -28531,7 +28128,7 @@
         lineNumber: 99,
         columnNumber: 7
       }
-    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
+    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
       return /*#__PURE__*/React__default["default"].createElement(List, {
         key: index,
         __self: this,
@@ -28548,11 +28145,11 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
-        "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
+        "data-to-scrollspy-id": item == null ? void 0 : item.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
@@ -28561,8 +28158,8 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
         className: "link-title",
-        active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
-        href: `#${item === null || item === void 0 ? void 0 : item.id}`,
+        active: (item == null ? void 0 : item.id) === activeId,
+        href: `#${item == null ? void 0 : item.id}`,
         onClick: e => {
           e.preventDefault();
           const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
@@ -28591,7 +28188,7 @@
           lineNumber: 117,
           columnNumber: 17
         }
-      }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
+      }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
     })));
   }
 
@@ -28693,23 +28290,23 @@
     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__default["default"].array,
 
-    /**
-     Components devoted to mobile viewing only.
+    /**
+     Components devoted to mobile viewing only.
      */
     isMobile: PropTypes__default["default"].bool,
 
-    /**
-     Condition when table of content is inside a component dialog.
+    /**
+     Condition when table of content is inside a component dialog.
      */
     isDialog: PropTypes__default["default"].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__default["default"].string
   };
@@ -28729,7 +28326,7 @@
     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,
@@ -29668,7 +29265,7 @@
   var StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
-    background: '$gray50',
+    background: '$gray150',
     borderRadius: '99999px',
     width: '100%',
     height: 8
@@ -32124,7 +31721,408 @@
     }), void 0);
   }
 
-  var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
+  var StyledSkeleton = function StyledSkeleton(props) {
+    var color = props.color,
+        count = props.count,
+        width = props.width,
+        size = props.size,
+        circle = props.circle;
+
+    function getBaseColor(color) {
+      switch (color) {
+        case 'primary':
+          return colors$4.gray300;
+
+        default:
+          return colors$4.gray150;
+      }
+    }
+
+    function getSize(size) {
+      switch (size) {
+        case 'md':
+          return 16;
+
+        case 'lg':
+          return 118;
+
+        default:
+          return 12;
+      }
+    }
+
+    return jsxRuntime.jsx(ReactSkeleton.SkeletonTheme, __assign({
+      width: width,
+      borderRadius: size === 'lg' ? 0 : 20,
+      baseColor: getBaseColor(color),
+      highlightColor: "#FAFAFA"
+    }, {
+      children: jsxRuntime.jsx(ReactSkeleton__default["default"], {
+        height: getSize(size),
+        count: count,
+        circle: circle
+      }, void 0)
+    }), void 0);
+  };
+
+  var Card = styled('div', {
+    padding: 40,
+    borderRadius: 8,
+    background: '$bgWhite',
+    boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)',
+    position: 'relative'
+  });
+  var Space = styled('div', {
+    height: 8,
+    variants: {
+      size: {
+        sm: {
+          height: 8
+        },
+        md: {
+          height: 18
+        }
+      }
+    }
+  });
+  function Skeleton() {
+    var isDesktop = useMediaQuery('(min-width: 767px)');
+
+    if (isDesktop) {
+      return jsxRuntime.jsxs(Grid, __assign({
+        columns: 6,
+        gapY: 5
+      }, {
+        children: [jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsxs(Grid, __assign({
+            columns: 6,
+            gapX: 2
+          }, {
+            children: [jsxRuntime.jsx(GridItem, __assign({
+              colSpan: 2
+            }, {
+              children: jsxRuntime.jsxs(Card, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0)]
+              }, void 0)
+            }), void 0), jsxRuntime.jsx(GridItem, __assign({
+              colSpan: 2
+            }, {
+              children: jsxRuntime.jsxs(Card, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0)]
+              }, void 0)
+            }), void 0), jsxRuntime.jsx(GridItem, __assign({
+              colSpan: 2
+            }, {
+              children: jsxRuntime.jsxs(Card, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0)]
+              }, void 0)
+            }), void 0)]
+          }), void 0)
+        }), void 0), jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsx(Card, {
+            children: jsxRuntime.jsxs(Grid, __assign({
+              columns: 6,
+              gapY: 5
+            }, {
+              children: [jsxRuntime.jsx(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: jsxRuntime.jsxs(Grid, __assign({
+                  columns: 6,
+                  gapX: 2
+                }, {
+                  children: [jsxRuntime.jsxs(GridItem, __assign({
+                    colSpan: 2
+                  }, {
+                    children: [jsxRuntime.jsx(StyledSkeleton, {
+                      size: "lg"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                      size: "md",
+                      color: "primary",
+                      width: "85%"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsxs(Box, {
+                      children: [jsxRuntime.jsx(StyledSkeleton, {
+                        width: "85%"
+                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                        width: "60%"
+                      }, void 0)]
+                    }, void 0)]
+                  }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                    colSpan: 2
+                  }, {
+                    children: [jsxRuntime.jsx(StyledSkeleton, {
+                      size: "lg"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                      size: "md",
+                      color: "primary",
+                      width: "85%"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsxs(Box, {
+                      children: [jsxRuntime.jsx(StyledSkeleton, {
+                        width: "85%"
+                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                        width: "60%"
+                      }, void 0)]
+                    }, void 0)]
+                  }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                    colSpan: 2
+                  }, {
+                    children: [jsxRuntime.jsx(StyledSkeleton, {
+                      size: "lg"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                      size: "md",
+                      color: "primary",
+                      width: "85%"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsxs(Box, {
+                      children: [jsxRuntime.jsx(StyledSkeleton, {
+                        width: "85%"
+                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                        width: "60%"
+                      }, void 0)]
+                    }, void 0)]
+                  }), void 0)]
+                }), void 0)
+              }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  width: "50%"
+                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "95%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "95%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "95%"
+                  }, void 0)]
+                }), void 0)]
+              }), void 0)]
+            }), void 0)
+          }, void 0)
+        }), void 0)]
+      }), void 0);
+    } else {
+      return jsxRuntime.jsxs(Grid, __assign({
+        columns: 6,
+        gapY: 4
+      }, {
+        children: [jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsxs(Card, {
+            children: [jsxRuntime.jsx(StyledSkeleton, {
+              size: "md",
+              color: "primary"
+            }, void 0), jsxRuntime.jsx(Space, {
+              size: "md"
+            }, void 0), jsxRuntime.jsxs(Box, {
+              children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                width: "60%"
+              }, void 0)]
+            }, void 0), jsxRuntime.jsx(Space, {
+              size: "md"
+            }, void 0), jsxRuntime.jsxs(Box, {
+              children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                width: "60%"
+              }, void 0)]
+            }, void 0)]
+          }, void 0)
+        }), void 0), jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsx(Card, {
+            children: jsxRuntime.jsxs(Grid, {
+              children: [jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "lg"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary",
+                  width: "85%"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {
+                    width: "85%"
+                  }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0)]
+              }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  width: "50%"
+                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "85%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "85%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "85%"
+                  }, void 0)]
+                }), void 0)]
+              }), void 0)]
+            }, void 0)
+          }, void 0)
+        }), void 0)]
+      }), void 0);
+    }
+  }
+
+  var _jsxFileName = "/home/alfiantryp/Project/majoo-ui/packages/react/src/colors/Colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
     padding: 15,
@@ -33660,7 +33658,7 @@
   exports.ButtonGroup = ButtonGroup$1;
   exports.ButtonGroupItem = ButtonGroupItem;
   exports.ButtonPrimitive = ButtonPrimitive;
-  exports.Card = Card;
+  exports.Card = Card$1;
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
   exports.CheckboxGroup = CheckboxGroup;