@majoo-ui/react 1.45.1 → 1.46.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('@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('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-dom'), require('react-table'), require('@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-image-crop'), 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', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-dom', 'react-table', '@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-image-crop', '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.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.ReactCrop, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, ReactCrop, 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('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-dom'), require('react-table'), require('@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-image-crop'), require('superagent'), 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', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-dom', 'react-table', '@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-image-crop', 'superagent', '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.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.ReactCrop, global.request, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, ReactCrop, request, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -53,6 +53,7 @@
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
+  var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
 
   var _jsxFileName$12 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
@@ -221,7 +222,7 @@
 
   var isCallable$o = isCallable$p;
 
-  var isObject$a = function (it) {
+  var isObject$d = function (it) {
     return typeof it == 'object' ? it !== null : isCallable$o(it);
   };
 
@@ -346,7 +347,7 @@
   var global$M = global$U;
   var call$k = functionCall;
   var isCallable$k = isCallable$p;
-  var isObject$9 = isObject$a;
+  var isObject$c = isObject$d;
 
   var TypeError$h = global$M.TypeError;
 
@@ -354,9 +355,9 @@
   // https://tc39.es/ecma262/#sec-ordinarytoprimitive
   var ordinaryToPrimitive$1 = function (input, pref) {
     var fn, val;
-    if (pref === 'string' && isCallable$k(fn = input.toString) && !isObject$9(val = call$k(fn, input))) return val;
-    if (isCallable$k(fn = input.valueOf) && !isObject$9(val = call$k(fn, input))) return val;
-    if (pref !== 'string' && isCallable$k(fn = input.toString) && !isObject$9(val = call$k(fn, input))) return val;
+    if (pref === 'string' && isCallable$k(fn = input.toString) && !isObject$c(val = call$k(fn, input))) return val;
+    if (isCallable$k(fn = input.valueOf) && !isObject$c(val = call$k(fn, input))) return val;
+    if (pref !== 'string' && isCallable$k(fn = input.toString) && !isObject$c(val = call$k(fn, input))) return val;
     throw TypeError$h("Can't convert object to primitive value");
   };
 
@@ -411,13 +412,13 @@
   var uncurryThis$t = functionUncurryThis;
   var toObject$6 = toObject$7;
 
-  var hasOwnProperty = uncurryThis$t({}.hasOwnProperty);
+  var hasOwnProperty$4 = uncurryThis$t({}.hasOwnProperty);
 
   // `HasOwnProperty` abstract operation
   // https://tc39.es/ecma262/#sec-hasownproperty
   // eslint-disable-next-line es-x/no-object-hasown -- safe
   var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
-    return hasOwnProperty(toObject$6(it), key);
+    return hasOwnProperty$4(toObject$6(it), key);
   };
 
   var uncurryThis$s = functionUncurryThis;
@@ -438,15 +439,15 @@
   var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
   var WellKnownSymbolsStore = shared$3('wks');
-  var Symbol$3 = global$I.Symbol;
-  var symbolFor = Symbol$3 && Symbol$3['for'];
-  var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$3 : Symbol$3 && Symbol$3.withoutSetter || uid$1;
+  var Symbol$7 = global$I.Symbol;
+  var symbolFor = Symbol$7 && Symbol$7['for'];
+  var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$7 : Symbol$7 && Symbol$7.withoutSetter || uid$1;
 
   var wellKnownSymbol$l = function (name) {
     if (!hasOwn$e(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL$1 || typeof WellKnownSymbolsStore[name] == 'string')) {
       var description = 'Symbol.' + name;
-      if (NATIVE_SYMBOL$1 && hasOwn$e(Symbol$3, name)) {
-        WellKnownSymbolsStore[name] = Symbol$3[name];
+      if (NATIVE_SYMBOL$1 && hasOwn$e(Symbol$7, name)) {
+        WellKnownSymbolsStore[name] = Symbol$7[name];
       } else if (USE_SYMBOL_AS_UID && symbolFor) {
         WellKnownSymbolsStore[name] = symbolFor(description);
       } else {
@@ -457,7 +458,7 @@
 
   var global$H = global$U;
   var call$j = functionCall;
-  var isObject$8 = isObject$a;
+  var isObject$b = isObject$d;
   var isSymbol$1 = isSymbol$2;
   var getMethod$5 = getMethod$6;
   var ordinaryToPrimitive = ordinaryToPrimitive$1;
@@ -469,13 +470,13 @@
   // `ToPrimitive` abstract operation
   // https://tc39.es/ecma262/#sec-toprimitive
   var toPrimitive$1 = function (input, pref) {
-    if (!isObject$8(input) || isSymbol$1(input)) return input;
+    if (!isObject$b(input) || isSymbol$1(input)) return input;
     var exoticToPrim = getMethod$5(input, TO_PRIMITIVE);
     var result;
     if (exoticToPrim) {
       if (pref === undefined) pref = 'default';
       result = call$j(exoticToPrim, input, pref);
-      if (!isObject$8(result) || isSymbol$1(result)) return result;
+      if (!isObject$b(result) || isSymbol$1(result)) return result;
       throw TypeError$g("Can't convert object to primitive value");
     }
     if (pref === undefined) pref = 'number';
@@ -493,11 +494,11 @@
   };
 
   var global$G = global$U;
-  var isObject$7 = isObject$a;
+  var isObject$a = isObject$d;
 
   var document$3 = global$G.document;
   // typeof document.createElement is 'object' in old IE
-  var EXISTS$1 = isObject$7(document$3) && isObject$7(document$3.createElement);
+  var EXISTS$1 = isObject$a(document$3) && isObject$a(document$3.createElement);
 
   var documentCreateElement$2 = function (it) {
     return EXISTS$1 ? document$3.createElement(it) : {};
@@ -554,14 +555,14 @@
   });
 
   var global$F = global$U;
-  var isObject$6 = isObject$a;
+  var isObject$9 = isObject$d;
 
   var String$5 = global$F.String;
   var TypeError$f = global$F.TypeError;
 
   // `Assert: Type(argument) is Object`
   var anObject$i = function (argument) {
-    if (isObject$6(argument)) return argument;
+    if (isObject$9(argument)) return argument;
     throw TypeError$f(String$5(argument) + ' is not an object');
   };
 
@@ -678,7 +679,7 @@
   var NATIVE_WEAK_MAP = nativeWeakMap;
   var global$C = global$U;
   var uncurryThis$q = functionUncurryThis;
-  var isObject$5 = isObject$a;
+  var isObject$8 = isObject$d;
   var createNonEnumerableProperty$6 = createNonEnumerableProperty$7;
   var hasOwn$b = hasOwnProperty_1;
   var shared$1 = sharedStore;
@@ -697,7 +698,7 @@
   var getterFor = function (TYPE) {
     return function (it) {
       var state;
-      if (!isObject$5(it) || (state = get(it)).type !== TYPE) {
+      if (!isObject$8(it) || (state = get(it)).type !== TYPE) {
         throw TypeError$d('Incompatible receiver, ' + TYPE + ' required');
       } return state;
     };
@@ -2156,7 +2157,7 @@
   // https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
   addToUnscopables('includes');
 
-  var isObject$4 = isObject$a;
+  var isObject$7 = isObject$d;
   var classof$5 = classofRaw$1;
   var wellKnownSymbol$c = wellKnownSymbol$l;
 
@@ -2166,7 +2167,7 @@
   // https://tc39.es/ecma262/#sec-isregexp
   var isRegexp = function (it) {
     var isRegExp;
-    return isObject$4(it) && ((isRegExp = it[MATCH$2]) !== undefined ? !!isRegExp : classof$5(it) == 'RegExp');
+    return isObject$7(it) && ((isRegExp = it[MATCH$2]) !== undefined ? !!isRegExp : classof$5(it) == 'RegExp');
   };
 
   var global$t = global$U;
@@ -2217,8 +2218,8 @@
     }
   });
 
-  const Box$1 = styled('div');
-  Box$1.displayName = 'Box';
+  const Box = styled('div');
+  Box.displayName = 'Box';
 
   function seqNumberVariants(variantFn, max) {
     var _a;
@@ -2349,7 +2350,7 @@
   Flex$1.displayName = 'Flex';
 
   const _excluded$y = ["children"],
-        _excluded2$2 = ["children"];
+        _excluded2$3 = ["children"];
   var _jsxFileName$11 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
@@ -2579,7 +2580,7 @@
     let {
       children
     } = _ref2,
-        props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
 
     return /*#__PURE__*/React__default["default"].createElement(GridItemComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -3552,6 +3553,17 @@
       columnNumber: 3
     }
   }), props.children);
+  BannerTitle.propTypes = {
+    /**
+     Additional styles of title
+    */
+    css: PropTypes__default["default"].object,
+
+    /**
+     Title of the Banner to be displayed
+    */
+    children: PropTypes__default["default"].string
+  };
   const BannerDescription = props => /*#__PURE__*/React__namespace.createElement(Description, _extends({
     paragraph: "longContentRegular",
     color: "secondary"
@@ -3559,10 +3571,21 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 97,
+      lineNumber: 108,
       columnNumber: 3
     }
   }), props.children);
+  BannerDescription.propTypes = {
+    /**
+     Additional styles of description
+    */
+    css: PropTypes__default["default"].object,
+
+    /**
+     Description of the Banner to be displayed
+    */
+    children: PropTypes__default["default"].string
+  };
   const BannerLink = ({
     link,
     children,
@@ -3571,7 +3594,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 103,
+      lineNumber: 125,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3583,15 +3606,34 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 105,
+      lineNumber: 127,
       columnNumber: 7
     }
-  }, children ? children : 'Learn more'));
+  }, children));
+  BannerLink.propTypes = {
+    /**
+     The purpose of a clickable link, presented in url
+    */
+    link: PropTypes__default["default"].string,
+
+    /**
+     Text of BannerLink to be displayed
+    */
+    children: PropTypes__default["default"].string,
+
+    /**
+     Additional theme of BannerLink is presented by color variants
+    */
+    variant: PropTypes__default["default"].oneOf(['info', 'warning', 'success', 'failed'])
+  };
+  BannerLink.defaultProps = {
+    children: 'Learn more'
+  };
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 117,
+      lineNumber: 154,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3603,7 +3645,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 119,
+      lineNumber: 156,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3612,7 +3654,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 126,
+      lineNumber: 163,
       columnNumber: 9
     }
   })));
@@ -3622,7 +3664,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 134,
+        lineNumber: 171,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3632,7 +3674,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 135,
+        lineNumber: 172,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3645,21 +3687,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 136,
+        lineNumber: 173,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 144,
+        lineNumber: 181,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 145,
+        lineNumber: 182,
         columnNumber: 33
       }
     }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
@@ -3668,7 +3710,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 148,
+        lineNumber: 185,
         columnNumber: 11
       }
     }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3681,7 +3723,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 153,
+        lineNumber: 190,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3690,7 +3732,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 161,
+        lineNumber: 198,
         columnNumber: 9
       }
     })));
@@ -3719,7 +3761,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 169,
+        lineNumber: 206,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3736,7 +3778,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 171,
+        lineNumber: 208,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -3747,7 +3789,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 178,
+        lineNumber: 215,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
@@ -3761,7 +3803,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 181,
+        lineNumber: 218,
         columnNumber: 9
       }
     }));
@@ -3771,13 +3813,44 @@
   BannerTitle.displayName = 'BannerTitle';
   BannerDescription.displayName = 'BannerDescription';
   Banner.propTypes = {
+    /**
+     Title of banner to be displayed
+    */
     title: PropTypes__default["default"].string,
+
+    /**
+     Description of banner to be displayed
+    */
     description: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].string,
+
+    /**
+     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
+    */
     link: PropTypes__default["default"].string,
+
+    /**
+     Text of button link to be displayed
+    */
     linkText: PropTypes__default["default"].string,
+
+    /**
+     Clickable event handler
+    */
     onClick: PropTypes__default["default"].func,
+
+    /**
+     Closable event handler
+    */
     onRemove: PropTypes__default["default"].func,
+
+    /**
+    Block type banner to display in full width
+    */
     bannerBlock: PropTypes__default["default"].bool
   };
   Banner.defaultProps = {
@@ -6291,7 +6364,7 @@
   InputNumber.displayName = 'InputNumber';
 
   var isCallable$8 = isCallable$p;
-  var isObject$3 = isObject$a;
+  var isObject$6 = isObject$d;
   var setPrototypeOf$1 = objectSetPrototypeOf;
 
   // makes subclassing work correct for wrapped built-ins
@@ -6303,7 +6376,7 @@
       // we haven't completely correct pre-ES6 way for getting `new.target`, so use this
       isCallable$8(NewTarget = dummy.constructor) &&
       NewTarget !== Wrapper &&
-      isObject$3(NewTargetPrototype = NewTarget.prototype) &&
+      isObject$6(NewTargetPrototype = NewTarget.prototype) &&
       NewTargetPrototype !== Wrapper.prototype
     ) setPrototypeOf$1($this, NewTargetPrototype);
     return $this;
@@ -7039,7 +7112,7 @@
       }
     }
   });
-  const TagWrapper$2 = styled(Box$1, {
+  const TagWrapper$2 = styled(Box, {
     display: 'flex',
     position: 'relative',
     flexWrap: 'wrap',
@@ -7668,9 +7741,10 @@
     ];
   });
 
-  const _excluded$d = ["placeholder", "searchPlaceholder", "embedSearch", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly", "isInvalid", "noOptionIcon"];
+  const _excluded$d = ["showLeadingIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"],
+        _excluded2$2 = ["placeholder", "searchPlaceholder", "embedSearch", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly", "isInvalid", "noOptionIcon"];
   var _jsxFileName$B = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
-  const Box = styled('div', {
+  const SelectContainer = styled('div', {
     margin: 0,
     flexDirection: 'column',
     display: 'block',
@@ -7686,7 +7760,7 @@
     color: '$textPrimary',
     width: '100%'
   });
-  const BoxSelect = styled('div', {
+  const SelectBox = styled('div', {
     margin: 0,
     display: 'flex',
     position: 'relative',
@@ -7884,7 +7958,107 @@
     overflow: 'hidden',
     textOverflow: 'clip'
   };
-  function Select$1(_ref) {
+  const SelectInputSearch = /*#__PURE__*/React__namespace.forwardRef((_ref, forwardedRef) => {
+    let {
+      showLeadingIcon = true,
+      disabled,
+      placeholder,
+      readOnly,
+      inputProps,
+      handleInputValue,
+      noStyling
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+
+    const inputRef = React__namespace.useRef(null);
+    return /*#__PURE__*/React__namespace.createElement(InputGroup, {
+      css: !noStyling && {
+        height: '100%',
+        border: 'none',
+        '&:hover': {
+          border: 'none'
+        }
+      },
+      disabled: disabled,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 225,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
+      children: showLeadingIcon && /*#__PURE__*/React__namespace.createElement(icons.SearchOutline, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$B,
+          lineNumber: 238,
+          columnNumber: 40
+        }
+      }),
+      css: !showLeadingIcon && {
+        width: '$spacing-05',
+        padding: 0
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 237,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__namespace.createElement(Input$5, _extends({}, inputProps, props, {
+      placeholder: placeholder,
+      readOnly: readOnly,
+      ref: e => {
+        if (forwardedRef) forwardedRef(e);
+        inputRef.current = e;
+      },
+      disabled: disabled,
+      css: {
+        marginLeft: 0,
+        height: 'fit-content'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 246,
+        columnNumber: 9
+      }
+    })), /*#__PURE__*/React__namespace.createElement(InputRightElement, {
+      children: (inputProps.value || '').length > 0 && !disabled ? /*#__PURE__*/React__namespace.createElement(icons.CloseFilled, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$B,
+          lineNumber: 262,
+          columnNumber: 72
+        }
+      }) : /*#__PURE__*/React__namespace.createElement("div", {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$B,
+          lineNumber: 262,
+          columnNumber: 90
+        }
+      }),
+      onClick: e => {
+        if (!disabled) {
+          inputProps.onChange(Object.assign({}, e, {
+            target: Object.assign({}, e.target, {
+              value: ''
+            })
+          }));
+          if (handleInputValue) handleInputValue('');
+          if (inputRef.current) inputRef.current.focus();
+        }
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 261,
+        columnNumber: 9
+      }
+    }));
+  });
+  function Select$1(_ref2) {
     let {
       placeholder,
       searchPlaceholder,
@@ -7906,13 +8080,12 @@
       readOnly,
       isInvalid,
       noOptionIcon
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    } = _ref2,
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
 
     const [options, setOptions] = React__namespace.useState(option || []);
     const [item, setItem] = React__namespace.useState(option || []);
     const [selectedValue, setSelectedValue] = React__namespace.useState(value);
-    const inputRef = React__namespace.useRef(null);
 
     const handleInputValue = (value, isReset) => {
       if (onSearch && !isReset) onSearch(value);
@@ -7964,7 +8137,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 290,
+        lineNumber: 353,
         columnNumber: 5
       }
     }), ({
@@ -7996,7 +8169,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 319,
+            lineNumber: 382,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
@@ -8004,47 +8177,21 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 324,
+            lineNumber: 387,
             columnNumber: 15
           }
         }));
       };
 
-      const renderInputSearchBox = () => !search && embedSearch && isOpen && /*#__PURE__*/React__namespace.createElement(Box, {
-        css: {
-          position: 'sticky',
-          top: 0,
-          zIndex: '$sticky',
-          padding: '$spacing-04 $spacing-05 0',
-          backgroundColor: '$bgWhite'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 333,
-          columnNumber: 13
-        }
-      }, /*#__PURE__*/React__namespace.createElement(InputSearchbox, {
-        size: size,
-        onChange: handleInputValue,
-        placeholder: searchPlaceholder,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 342,
-          columnNumber: 15
-        }
-      }));
-
-      return /*#__PURE__*/React__namespace.createElement(Box, {
+      return /*#__PURE__*/React__namespace.createElement(SelectContainer, {
         css: css,
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 347,
+          lineNumber: 393,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
+      }, /*#__PURE__*/React__namespace.createElement(SelectBox, _extends({}, getRootProps({}, {
         suppressRefError: true
       }), {
         size: size,
@@ -8054,101 +8201,35 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 348,
+          lineNumber: 394,
           columnNumber: 13
         }
-      }), search ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+      }), search ? /*#__PURE__*/React__namespace.createElement(Box, {
         style: {
           width: '100%'
         },
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 356,
+          lineNumber: 402,
           columnNumber: 17
         }
-      }, icon ? /*#__PURE__*/React__namespace.createElement(InputGroup, {
-        css: {
-          height: '100%',
-          border: 'none',
-          '&:hover': {
-            border: 'none'
-          }
-        },
+      }, icon ? /*#__PURE__*/React__namespace.createElement(SelectInputSearch, {
         disabled: disabled,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 358,
-          columnNumber: 21
-        }
-      }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
-        children: /*#__PURE__*/React__namespace.createElement(icons.SearchOutline, {
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$B,
-            lineNumber: 368,
-            columnNumber: 51
-          }
-        }),
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 368,
-          columnNumber: 23
-        }
-      }), /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
         placeholder: placeholder,
-        readOnly: readOnly
-      }, getInputProps({
-        onChange: event => handleInputValue(event.target.value),
-        disabled
-      }), {
-        ref: inputRef,
-        css: {
-          marginLeft: 0,
-          height: 'fit-content'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 369,
-          columnNumber: 23
-        }
-      })), /*#__PURE__*/React__namespace.createElement(InputRightElement, {
-        children: getInputProps().value.length > 0 ? /*#__PURE__*/React__namespace.createElement(icons.CloseFilled, {
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$B,
-            lineNumber: 380,
-            columnNumber: 70
-          }
-        }) : /*#__PURE__*/React__namespace.createElement("div", {
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$B,
-            lineNumber: 380,
-            columnNumber: 88
-          }
+        readOnly: readOnly,
+        handleInputValue: handleInputValue,
+        inputProps: getInputProps({
+          onChange: event => handleInputValue(event.target.value),
+          disabled
         }),
-        onClick: e => {
-          if (!disabled) {
-            getInputProps().onChange(Object.assign({}, e, {
-              target: Object.assign({}, e.target, {
-                value: ''
-              })
-            }));
-            handleInputValue('');
-            if (inputRef.current) inputRef.current.focus();
-          }
-        },
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 379,
-          columnNumber: 23
+          lineNumber: 404,
+          columnNumber: 21
         }
-      })) : /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
+      }) : /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
         placeholder: placeholder,
         disabled: disabled,
         readOnly: readOnly
@@ -8159,7 +8240,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 397,
+          lineNumber: 412,
           columnNumber: 21
         }
       }))) : /*#__PURE__*/React__namespace.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -8171,7 +8252,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 406,
+          lineNumber: 421,
           columnNumber: 17
         }
       }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -8180,7 +8261,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 413,
+          lineNumber: 428,
           columnNumber: 21
         }
       }, selectedItem.render ? selectedItem.render() : selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -8189,7 +8270,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 417,
+          lineNumber: 432,
           columnNumber: 21
         }
       }, placeholder)), handleDownOption()), /*#__PURE__*/React__namespace.createElement(OptionWrapper$2, _extends({}, getMenuProps(), {
@@ -8200,14 +8281,38 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 425,
+          lineNumber: 440,
           columnNumber: 13
         }
-      }), renderInputSearchBox(), item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, {
+      }), !search && embedSearch && isOpen && /*#__PURE__*/React__namespace.createElement(SelectContainer, {
+        css: {
+          position: 'sticky',
+          top: 0,
+          zIndex: '$sticky',
+          padding: '$spacing-04 $spacing-05 0',
+          backgroundColor: '$bgWhite'
+        },
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 428,
+          lineNumber: 442,
+          columnNumber: 17
+        }
+      }, /*#__PURE__*/React__namespace.createElement(InputSearchbox, {
+        size: size,
+        onChange: handleInputValue,
+        placeholder: searchPlaceholder,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$B,
+          lineNumber: 451,
+          columnNumber: 19
+        }
+      })), item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$B,
+          lineNumber: 455,
           columnNumber: 17
         }
       }, item.map((item, index) => {
@@ -8230,7 +8335,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 430,
+            lineNumber: 457,
             columnNumber: 21
           }
         }), item.render ? item.render() : item.name);
@@ -8238,14 +8343,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 452,
+          lineNumber: 479,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__namespace.createElement(StyledDiv$2, {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 453,
+          lineNumber: 480,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -8255,7 +8360,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 454,
+          lineNumber: 481,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -8267,7 +8372,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 455,
+          lineNumber: 482,
           columnNumber: 23
         }
       })), "Item tidak ditemukan"))));
@@ -8689,7 +8794,6 @@
     margin: 0,
     display: 'flex',
     position: 'relative',
-    flexWrap: 'wrap',
     width: '100%',
     appearance: 'none',
     background: 'none',
@@ -8803,7 +8907,7 @@
   const IconCaretDown = styled(icons.CaretDownOutline, {
     size: '24px'
   });
-  const TagWrapper$1 = styled(Box$1, {
+  const TagWrapper$1 = styled(Box, {
     display: 'flex',
     position: 'relative',
     flexWrap: 'wrap',
@@ -8849,7 +8953,7 @@
     maxHeight: '160px',
     height: 'auto'
   });
-  const ItemWrapper$1 = styled(Box$1, {
+  const ItemWrapper$1 = styled(Box, {
     display: 'flex',
     position: 'relative',
     flex: 'auto',
@@ -9080,7 +9184,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 401,
+        lineNumber: 400,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Select, {
@@ -9090,7 +9194,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 402,
+        lineNumber: 401,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9101,7 +9205,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 403,
+        lineNumber: 402,
         columnNumber: 9
       }
     }), search ? /*#__PURE__*/React__namespace.createElement(Input$4, _extends({}, getInputProps({
@@ -9112,7 +9216,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 408,
+        lineNumber: 407,
         columnNumber: 13
       }
     })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9123,7 +9227,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 414,
+        lineNumber: 413,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9134,7 +9238,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 423,
+        lineNumber: 422,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
@@ -9142,7 +9246,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 428,
+        lineNumber: 427,
         columnNumber: 11
       }
     }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
@@ -9150,7 +9254,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 432,
+        lineNumber: 431,
         columnNumber: 9
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
@@ -9174,7 +9278,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 434,
+        lineNumber: 433,
         columnNumber: 13
       }
     }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -9186,14 +9290,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 455,
+        lineNumber: 454,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 460,
+        lineNumber: 459,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
@@ -9211,7 +9315,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 463,
+        lineNumber: 462,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
@@ -9224,7 +9328,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 476,
+        lineNumber: 475,
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9232,7 +9336,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 485,
+        lineNumber: 484,
         columnNumber: 23
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9240,7 +9344,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 489,
+        lineNumber: 488,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__namespace.createElement(Item$2, {
@@ -9250,7 +9354,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 493,
+        lineNumber: 492,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
@@ -9261,14 +9365,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 498,
+        lineNumber: 497,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 499,
+        lineNumber: 498,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -9278,7 +9382,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 500,
+        lineNumber: 499,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -9290,7 +9394,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$z,
-        lineNumber: 501,
+        lineNumber: 500,
         columnNumber: 17
       }
     })), textEmptyItem))));
@@ -9704,7 +9808,7 @@
       }, "".concat(resource.value, "-").concat(new Date().toISOString()));
     };
 
-    return jsxRuntime.jsxs(Box$1, __assign({
+    return jsxRuntime.jsxs(Box, __assign({
       css: __assign({
         position: 'relative'
       }, css)
@@ -9735,7 +9839,7 @@
         }, {
           children: "Loading .... "
         }), void 0)
-      }), void 0), jsxRuntime.jsxs(Box$1, __assign({
+      }), void 0), jsxRuntime.jsxs(Box, __assign({
         css: {
           border: '1px solid $gray300',
           padding: '$spacing-05',
@@ -9813,7 +9917,7 @@
             }), void 0)]
           }), void 0)
         }), void 0)]
-      }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsxRuntime.jsx(Box$1, __assign({
+      }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsxRuntime.jsx(Box, __assign({
         css: {
           marginTop: '$spacing-04'
         }
@@ -9828,11 +9932,92 @@
     }), void 0);
   }
 
-  const _excluded$c = ["children"];
-  var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
-  const {
-    zIndices
-  } = core.foundations;
+  var InputCombobox = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.options,
+        items = _b === void 0 ? [] : _b,
+        defaultValue = _a.defaultValue,
+        disabled = _a.disabled,
+        _c = _a.placeholder,
+        placeholder = _c === void 0 ? 'Select Item' : _c,
+        _d = _a.showLeadingIcon,
+        showLeadingIcon = _d === void 0 ? false : _d,
+        _e = _a.placement,
+        placement = _e === void 0 ? 'bottom' : _e,
+        _f = _a.size,
+        size = _f === void 0 ? 'lg' : _f,
+        isInvalid = _a.isInvalid,
+        css = _a.css,
+        onValueChange = _a.onValueChange,
+        props = __rest(_a, ["options", "defaultValue", "disabled", "placeholder", "showLeadingIcon", "placement", "size", "isInvalid", "css", "onValueChange"]);
+
+    var _g = React.useState(items),
+        inputItems = _g[0],
+        setInputItems = _g[1];
+
+    var _h = Downshift.useCombobox({
+      items: inputItems,
+      defaultInputValue: defaultValue,
+      onInputValueChange: function (_a) {
+        var _b = _a.inputValue,
+            inputValue = _b === void 0 ? '' : _b;
+        if (onValueChange) onValueChange(inputValue);
+        setInputItems(items.filter(function (item) {
+          return item.toLowerCase().startsWith(inputValue.toLowerCase());
+        }));
+      }
+    }),
+        isOpen = _h.isOpen,
+        getMenuProps = _h.getMenuProps,
+        getInputProps = _h.getInputProps,
+        getComboboxProps = _h.getComboboxProps,
+        highlightedIndex = _h.highlightedIndex,
+        getItemProps = _h.getItemProps;
+
+    return jsxRuntime.jsxs(SelectContainer, __assign({
+      css: css
+    }, {
+      children: [jsxRuntime.jsx(SelectBox, __assign({}, getComboboxProps(), {
+        size: size,
+        disabled: disabled,
+        isInvalid: isInvalid
+      }, {
+        children: jsxRuntime.jsx(SelectInputSearch, __assign({
+          showLeadingIcon: showLeadingIcon,
+          disabled: disabled,
+          placeholder: placeholder,
+          inputProps: getInputProps()
+        }, props, {
+          ref: forwardedRef
+        }), void 0)
+      }), void 0), inputItems.length > 0 && jsxRuntime.jsx(OptionWrapper$2, __assign({}, getMenuProps(), {
+        css: {
+          display: isOpen ? 'block' : 'none'
+        },
+        placement: placement
+      }, {
+        children: jsxRuntime.jsx(SelectOption, {
+          children: inputItems.map(function (item, index) {
+            return /*#__PURE__*/React.createElement(SelectItem, __assign({}, getItemProps({
+              item: item,
+              index: index
+            }), {
+              key: "".concat(item).concat(index),
+              css: {
+                backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                fontWeight: 'normal'
+              }
+            }), item);
+          })
+        }, void 0)
+      }), void 0)]
+    }), void 0);
+  });
+
+  const _excluded$c = ["children"];
+  var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+  const {
+    zIndices
+  } = core.foundations;
   const PopoverContext = /*#__PURE__*/React.createContext();
   const Popover = ({
     children,
@@ -10788,8 +10973,8 @@
   var whitespaces$1 = whitespaces$3;
 
   var $parseInt$1 = global$k.parseInt;
-  var Symbol$2 = global$k.Symbol;
-  var ITERATOR$6 = Symbol$2 && Symbol$2.iterator;
+  var Symbol$6 = global$k.Symbol;
+  var ITERATOR$6 = Symbol$6 && Symbol$6.iterator;
   var hex = /^[+-]?0x/i;
   var exec$4 = uncurryThis$d(hex.exec);
   var FORCED$2 = $parseInt$1(whitespaces$1 + '08') !== 8 || $parseInt$1(whitespaces$1 + '0x16') !== 22
@@ -10963,7 +11148,7 @@
     height: 'auto',
     width: 'auto',
     borderRadius: '$lg',
-    position: 'relative',
+    // position: 'relative',
     backgroundColor: '$white',
     boxShadow: '0px 2px 12px #00000014'
   });
@@ -11620,7 +11805,7 @@
   var setSpecies = setSpecies$2;
   var aCallable$3 = aCallable$9;
   var isCallable$3 = isCallable$p;
-  var isObject$2 = isObject$a;
+  var isObject$5 = isObject$d;
   var anInstance$2 = anInstance$3;
   var speciesConstructor$1 = speciesConstructor$2;
   var task = task$1.set;
@@ -11662,7 +11847,7 @@
   // helpers
   var isThenable = function (it) {
     var then;
-    return isObject$2(it) && isCallable$3(then = it.then) ? then : false;
+    return isObject$5(it) && isCallable$3(then = it.then) ? then : false;
   };
 
   var callReaction = function (reaction, state) {
@@ -12180,12 +12365,12 @@
   });
 
   var anObject$4 = anObject$i;
-  var isObject$1 = isObject$a;
+  var isObject$4 = isObject$d;
   var newPromiseCapability = newPromiseCapability$2;
 
   var promiseResolve$1 = function (C, x) {
     anObject$4(C);
-    if (isObject$1(x) && x.constructor === C) return x;
+    if (isObject$4(x) && x.constructor === C) return x;
     var promiseCapability = newPromiseCapability.f(C);
     var resolve = promiseCapability.resolve;
     resolve(x);
@@ -12342,7 +12527,7 @@
           isMobile: isMobile,
           onOpenAutoFocus: onOpenAutoFocus
         }, {
-          children: jsxRuntime.jsxs(Box$1, __assign({
+          children: jsxRuntime.jsxs(Box, __assign({
             css: {
               backgroundColor: '$white',
               display: 'flex',
@@ -12350,7 +12535,7 @@
               borderRadius: '$lg'
             }
           }, {
-            children: [jsxRuntime.jsx(Box$1, __assign({
+            children: [jsxRuntime.jsx(Box, __assign({
               css: {
                 padding: '16px 24px',
                 display: 'block',
@@ -12362,7 +12547,7 @@
                 }
               }
             }, {
-              children: jsxRuntime.jsxs(Box$1, __assign({
+              children: jsxRuntime.jsxs(Box, __assign({
                 css: {
                   justifyContent: 'space-between',
                   display: 'flex',
@@ -12383,7 +12568,7 @@
                 }), void 0), jsxRuntime.jsx(DialogClose, __assign({
                   asChild: true
                 }, {
-                  children: jsxRuntime.jsx(Box$1, __assign({
+                  children: jsxRuntime.jsx(Box, __assign({
                     css: {
                       display: 'flex',
                       justifyContent: 'center',
@@ -12398,13 +12583,13 @@
                   }), void 0)
                 }), void 0)]
               }), void 0)
-            }), void 0), modalDialogContent && jsxRuntime.jsx(Box$1, __assign({}, modalDialogContent.props, {
+            }), void 0), modalDialogContent && jsxRuntime.jsx(Box, __assign({}, modalDialogContent.props, {
               css: __assign({
                 flexGrow: 1,
                 maxHeight: 'calc(100vh - 64px - 56px)',
                 padding: '16px 24px'
               }, modalDialogContent.props.css)
-            }), void 0), modalDialogFooter && jsxRuntime.jsx(Box$1, __assign({}, modalDialogFooter.props, {
+            }), void 0), modalDialogFooter && jsxRuntime.jsx(Box, __assign({}, modalDialogFooter.props, {
               css: __assign({
                 borderTop: '1px solid $gray150',
                 padding: '16px 24px',
@@ -13052,13 +13237,13 @@
       cursor: 'default'
     }
   });
-  const WeekdayBox$1 = styled(Box$1, {
+  const WeekdayBox$1 = styled(Box, {
     display: 'inline-block',
     width: '32px',
     textAlign: 'center',
     marginBottom: '$spacing-03'
   });
-  const CalendarsContainer$1 = styled(Box$1, {
+  const CalendarsContainer$1 = styled(Box, {
     width: '100%',
     padding: '$spacing-01',
     display: 'inline-flex',
@@ -13072,7 +13257,7 @@
     }
   });
   const CalendarItemContainer$1 = styled(Flex$1, {});
-  const DateContainer$1 = styled(Box$1, {
+  const DateContainer$1 = styled(Box, {
     width: '100%',
     position: 'relative',
     display: 'inline-block',
@@ -13335,7 +13520,7 @@
           lineNumber: 362,
           columnNumber: 13
         }
-      }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           size: '32px'
         },
@@ -13369,7 +13554,7 @@
           lineNumber: 384,
           columnNumber: 13
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           size: '32px'
         },
@@ -13573,7 +13758,7 @@
     };
 
     const renderFooter = () => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$o,
@@ -13654,7 +13839,7 @@
     };
 
     const renderTime = () => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           padding: 4
         },
@@ -13689,7 +13874,7 @@
     };
 
     const renderButtonTime = () => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           padding: 4
         },
@@ -13740,7 +13925,7 @@
           lineNumber: 672,
           columnNumber: 25
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }), /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$o,
@@ -13857,7 +14042,7 @@
       cursor: 'default'
     }
   });
-  const WeekdayBox = styled(Box$1, {
+  const WeekdayBox = styled(Box, {
     display: 'inline-block',
     width: '45.5px',
     textAlign: 'center',
@@ -13866,7 +14051,7 @@
       width: '32px'
     }
   });
-  const DatePickerContainer = styled(Box$1, {
+  const DatePickerContainer = styled(Box, {
     width: '100%',
     height: '100%',
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
@@ -13875,7 +14060,7 @@
       width: 'unset'
     }
   });
-  const CalendarsContainer = styled(Box$1, {
+  const CalendarsContainer = styled(Box, {
     width: '100%',
     overflow: 'auto',
     padding: '$spacing-02 20px $spacing-05',
@@ -13900,7 +14085,7 @@
     height: '100%',
     paddingBottom: '160px'
   });
-  const DateContainer = styled(Box$1, {
+  const DateContainer = styled(Box, {
     width: '100%',
     position: 'relative',
     display: 'inline-block',
@@ -14510,6 +14695,7 @@
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
     width: 200,
     height: 130,
+    backgroundColor: '$bgWhite',
     variants: {
       size: {
         sm: {
@@ -14524,6 +14710,11 @@
           width: 219,
           height: 146
         }
+      },
+      disabled: {
+        true: {
+          backgroundColor: '$formDisable'
+        }
       }
     }
   });
@@ -14532,6 +14723,17 @@
     borderRadius: 6,
     '&:hover': {
       background: '$bgSuccess'
+    },
+    variants: {
+      disabled: {
+        true: {
+          cursor: 'not-allowed',
+          backgroundColor: '$btnDisable',
+          '&:hover': {
+            background: '$btnDisable'
+          }
+        }
+      }
     }
   });
   const IconDown = styled(icons.ChevronDownOutline, {
@@ -14539,6 +14741,17 @@
     borderRadius: 6,
     '&:hover': {
       background: '$bgSuccess'
+    },
+    variants: {
+      disabled: {
+        true: {
+          cursor: 'not-allowed',
+          backgroundColor: '$btnDisable',
+          '&:hover': {
+            background: '$btnDisable'
+          }
+        }
+      }
     }
   });
 
@@ -14550,23 +14763,23 @@
     }
 
     return props.type === 'up' ? /*#__PURE__*/React__default["default"].createElement(IconUp, _extends({}, props, {
-      color: isHover ? '#04C99E' : '#404545',
+      color: isHover && !props.disabled ? '#04C99E' : '#404545',
       onMouseEnter: toggleHover,
       onMouseLeave: toggleHover,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 79,
+        lineNumber: 107,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(IconDown, _extends({}, props, {
-      color: isHover ? '#04C99E' : '#404545',
+      color: isHover && !props.disabled ? '#04C99E' : '#404545',
       onMouseEnter: toggleHover,
       onMouseLeave: toggleHover,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 81,
+        lineNumber: 114,
         columnNumber: 5
       }
     }));
@@ -14576,7 +14789,8 @@
     size,
     onChange,
     defaultValue,
-    value
+    value,
+    disabled
   }) => {
     const [date, setDate] = React.useState(value ? value : defaultValue ? defaultValue : moment__default["default"]());
     const format = 'HH:mm';
@@ -14591,11 +14805,15 @@
     }
 
     function handleUp(type) {
-      type === 'hour' ? setNewDate(moment__default["default"](date).add(1, 'hours')) : setNewDate(moment__default["default"](date).add(1, 'minutes'));
+      if (!disabled) {
+        type === 'hour' ? setNewDate(moment__default["default"](date).add(1, 'hours')) : setNewDate(moment__default["default"](date).add(1, 'minutes'));
+      }
     }
 
     function handleDown(type) {
-      type === 'hour' ? setNewDate(moment__default["default"](date).subtract(1, 'hours')) : setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
+      if (!disabled) {
+        type === 'hour' ? setNewDate(moment__default["default"](date).subtract(1, 'hours')) : setNewDate(moment__default["default"](date).subtract(1, 'minutes'));
+      }
     }
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14609,7 +14827,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 112,
+        lineNumber: 149,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14618,25 +14836,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 113,
+        lineNumber: 150,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
       type: "up",
+      disabled: disabled,
       onClick: () => handleUp('hour'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 114,
+        lineNumber: 151,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
       type: "up",
+      disabled: disabled,
       onClick: () => handleUp('minutes'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 115,
+        lineNumber: 152,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -14647,7 +14867,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 117,
+        lineNumber: 154,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -14655,7 +14875,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 118,
+        lineNumber: 155,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14664,72 +14884,121 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 119,
+        lineNumber: 156,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
       type: "down",
+      disabled: disabled,
       onClick: () => handleDown('hour'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 120,
+        lineNumber: 157,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
       type: "down",
+      disabled: disabled,
       onClick: () => handleDown('minutes'),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 121,
+        lineNumber: 158,
         columnNumber: 9
       }
     })));
   };
+  NativeTimePicker.propTypes = {
+    /**
+     Resize time picker.
+    */
+    size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+    /**
+     Change handler.
+    */
+    onChange: PropTypes__default["default"].func,
+
+    /**
+     Time picker default value, support moment format.
+    */
+    defaultValue: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+     Time picker value, support moment format.
+    */
+    value: PropTypes__default["default"].instanceOf(Date)
+  };
   const TimePicker = ({
     size,
     onChange,
     defaultValue,
-    value
+    value,
+    disabled,
+    css
   }) => {
     return /*#__PURE__*/React__default["default"].createElement(Container$4, {
       size: size,
+      disabled: disabled,
       direction: "column",
       gap: 3,
       justify: "center",
       align: "center",
+      css: css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 129,
+        lineNumber: 185,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
       size: size,
+      disabled: disabled,
       onChange: onChange,
       defaultValue: defaultValue,
       value: value,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 130,
+        lineNumber: 186,
         columnNumber: 7
       }
     }));
   };
   TimePicker.displayName = 'TimePicker';
   TimePicker.propTypes = {
+    /**
+     Additional styles.
+    */
+    css: PropTypes__default["default"].object,
+
+    /**
+     Resize time picker.
+    */
     size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+    /**
+     Change handler.
+    */
     onChange: PropTypes__default["default"].func,
+
+    /**
+     Time picker default value, support moment format.
+    */
     defaultValue: PropTypes__default["default"].instanceOf(Date),
-    value: PropTypes__default["default"].instanceOf(Date)
+
+    /**
+     Time picker value, support moment format.
+    */
+    value: PropTypes__default["default"].instanceOf(Date),
+    disabled: PropTypes__default["default"].bool
   };
 
   var _jsxFileName$l = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\InputTimePicker.js";
 
   const getInputPickerValue$1 = date => {
-    if (!date) return moment__default["default"]().format('HH:mm');
+    if (!date) return;
     return moment__default["default"](date).format('HH:mm');
   };
 
@@ -14740,18 +15009,26 @@
     value,
     placeholder,
     placement,
-    css
+    css,
+    disabled
   }) {
     const [openPicker, setOpenPicker] = React.useState(false);
-    const isMobile = useMediaQuery(`(max-width: 480px'})`);
+    const isMobile = useMediaQuery(`(max-width: 480px)`);
+
+    function handleChange() {
+      if (!disabled) {
+        setOpenPicker(!openPicker);
+      }
+    }
 
     const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
       size: "sm",
-      onClick: isMobile ? () => setOpenPicker(true) : undefined,
+      disabled: disabled,
+      onClick: handleChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 23,
+        lineNumber: 29,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -14759,14 +15036,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$l,
-          lineNumber: 24,
+          lineNumber: 30,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 24,
+        lineNumber: 30,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -14778,20 +15055,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 25,
+        lineNumber: 31,
         columnNumber: 7
       }
     }));
 
-    const renderDatePicker = () => /*#__PURE__*/React__default["default"].createElement(TimePicker, {
+    const renderTimePicker = () => /*#__PURE__*/React__default["default"].createElement(TimePicker, {
       size: size,
+      disabled: disabled,
       defaultValue: defaultValue,
       value: value,
       onChange: onChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 36,
+        lineNumber: 42,
         columnNumber: 5
       }
     });
@@ -14803,47 +15081,55 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 40,
+        lineNumber: 46,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+    }, disabled ? /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 41,
-        columnNumber: 7
+        lineNumber: 48,
+        columnNumber: 9
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
-      css: css,
+    }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 42,
+        lineNumber: 50,
         columnNumber: 9
       }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$l,
+        lineNumber: 51,
+        columnNumber: 11
+      }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 44,
+        lineNumber: 54,
         columnNumber: 7
       }
-    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 48,
+        lineNumber: 58,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
       open: openPicker,
-      onOpenChange: setOpenPicker,
+      onOpenChange: handleChange,
       side: "bottom",
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 49,
+        lineNumber: 59,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -14854,10 +15140,22 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 50,
+        lineNumber: 60,
         columnNumber: 9
       }
-    }, renderDatePicker())));
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      justify: "center",
+      align: "center",
+      css: {
+        padding: '20px 0px'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$l,
+        lineNumber: 66,
+        columnNumber: 11
+      }
+    }, renderTimePicker()))));
   }
 
   InputTimePicker.defaultProps = {
@@ -14865,13 +15163,41 @@
     placeholder: 'Select Time'
   };
   InputTimePicker.propTypes = {
+    /**
+     Additional styles.
+    */
+    css: PropTypes__default["default"].object,
+    disabled: PropTypes__default["default"].bool,
+
+    /**
+     Resize time picker.
+    */
     size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-    onChange: PropTypes__default["default"].func,
+
+    /**
+     Custom placeholder input time picker.
+    */
+    placeholder: PropTypes__default["default"].string,
+
+    /**
+     Time picker default value, support moment format.
+    */
     defaultValue: PropTypes__default["default"].instanceOf(Date),
+
+    /**
+     Time picker value, support moment format.
+    */
     value: PropTypes__default["default"].instanceOf(Date),
-    placeholder: PropTypes__default["default"].string,
-    placement: PropTypes__default["default"].string,
-    css: PropTypes__default["default"].object
+
+    /**
+     Change handler.
+    */
+    onChange: PropTypes__default["default"].func,
+
+    /**
+     Placement popover input time picker.
+    */
+    placement: PropTypes__default["default"].string
   };
   InputTimePicker.displayName = 'InputTimePicker';
 
@@ -14932,7 +15258,7 @@
     }, [dateValue]);
 
     const timePicker = () => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           padding: '50px 95px'
         },
@@ -15274,13 +15600,20 @@
     }, [date]);
     const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
+    function handleChange() {
+      if (!disabled) {
+        setOpenPicker(!openPicker);
+      }
+    }
+
     const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
-      onClick: isMobile ? () => setOpenPicker(true) : undefined,
+      disabled: disabled,
+      onClick: handleChange,
       size: size,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 124,
+        lineNumber: 131,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -15288,14 +15621,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 125,
+          lineNumber: 132,
           columnNumber: 35
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 125,
+        lineNumber: 132,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -15308,7 +15641,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 126,
+        lineNumber: 133,
         columnNumber: 7
       }
     }));
@@ -15323,7 +15656,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 141,
+          lineNumber: 148,
           columnNumber: 11
         }
       }) : {
@@ -15348,7 +15681,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 137,
+        lineNumber: 144,
         columnNumber: 5
       }
     });
@@ -15360,47 +15693,55 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 162,
+        lineNumber: 169,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+    }, disabled ? /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 163,
-        columnNumber: 7
+        lineNumber: 171,
+        columnNumber: 9
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
-      css: css,
+    }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 164,
+        lineNumber: 173,
         columnNumber: 9
       }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 174,
+        columnNumber: 11
+      }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 166,
+        lineNumber: 177,
         columnNumber: 7
       }
-    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 170,
+        lineNumber: 181,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
       open: openPicker,
-      onOpenChange: setOpenPicker,
+      onOpenChange: handleChange,
       side: "bottom",
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 171,
+        lineNumber: 182,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15411,7 +15752,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 172,
+        lineNumber: 183,
         columnNumber: 9
       }
     }, renderDatePicker())));
@@ -15650,7 +15991,7 @@
         lineNumber: 152,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         display: 'flex',
         alignItems: 'center',
@@ -15874,7 +16215,7 @@
         lineNumber: 14,
         columnNumber: 9
       }
-    }) : /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }) : /*#__PURE__*/React__default["default"].createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$g,
@@ -15950,6 +16291,7 @@
         footer = _a.footer,
         infiniteScrollWrapper = _a.infiniteScrollWrapper,
         isLoading = _a.isLoading,
+        rowGroup = _a.rowGroup,
         css = _a.css;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
@@ -15958,7 +16300,8 @@
         page = instance.page,
         prepareRow = instance.prepareRow,
         state = instance.state,
-        toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
+        toggleAllRowsExpanded = instance.toggleAllRowsExpanded,
+        sortBy = instance.state.sortBy;
     return jsxRuntime.jsx(TableContainer$3, __assign({
       css: css,
       ref: ref
@@ -15992,8 +16335,21 @@
         }, void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
           children: page.map(function (row) {
             prepareRow(row);
+            var actionCells = row.allCells.filter(function (cell) {
+              return cell.column.id === 'menu' || cell.column.isAction;
+            });
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [jsxRuntime.jsx(TableRow$3, __assign({}, row.getRowProps(), {
+              children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$3, __assign({}, row.getRowProps(), {
+                key: "".concat(row.id, "-group_header")
+              }), jsxRuntime.jsx(TableCell$3, __assign({
+                colSpan: 100
+              }, {
+                children: (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
+                  variant: "contentButton"
+                }, {
+                  children: row.cells[0].render('Cell')
+                }), void 0)
+              }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({}, row.getRowProps(), {
                 children: row.cells.map(function (cell) {
                   return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                     children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
@@ -16043,7 +16399,7 @@
                         }), void 0), cell.render('Cell')]
                       }), "".concat(cell.column.id, "-").concat(row.id));
                     })
-                  }), void 0), jsxRuntime.jsx(Flex$1, __assign({
+                  }), void 0), actionCells && actionCells.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
                     align: "center",
                     justify: "end",
                     gap: 3,
@@ -16051,9 +16407,7 @@
                       height: '40px'
                     }
                   }, {
-                    children: row.allCells.filter(function (cell) {
-                      return cell.column.id === 'menu' || cell.column.isAction;
-                    }).map(function (cell) {
+                    children: actionCells.map(function (cell) {
                       return cell.render('Cell');
                     })
                   }), void 0)]
@@ -16290,6 +16644,25 @@
     return {};
   };
 
+  var formattingData = function formattingData(rawData, groupKey) {
+    if (groupKey) {
+      rawData.forEach(function (item, index) {
+        if (item[groupKey] && item[groupKey].length > 0) {
+          var newElement = item[groupKey].map(function (childItem, index) {
+            return __assign(__assign({}, childItem), {
+              isTopChild: index === 0,
+              parentOriginal: item
+            });
+          });
+          rawData.splice(index, 1);
+          rawData.splice.apply(rawData, __spreadArray([index + 1, 0], newElement, false));
+        }
+      });
+    }
+
+    return rawData;
+  };
+
   function Table(_a) {
     var columns = _a.columns,
         data = _a.data,
@@ -16317,7 +16690,8 @@
         rowLimit = _k === void 0 ? 10 : _k,
         _l = _a.cellAlign,
         cellAlign = _l === void 0 ? 'center' : _l,
-        selectedIds = _a.selectedIds;
+        selectedIds = _a.selectedIds,
+        rowGroup = _a.rowGroup;
 
     var _m = React.useState(rowLimit),
         limit = _m[0],
@@ -16343,7 +16717,7 @@
 
     var instance = reactTable.useTable({
       columns: columns,
-      data: data,
+      data: formattingData(data, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey),
       initialState: getInitialState(),
       manualPagination: !!fetchData,
       manualSortBy: !!fetchData,
@@ -16483,7 +16857,7 @@
         });
       }
     }, [data, selectedIds]);
-    return jsxRuntime.jsxs(Box$1, __assign({
+    return jsxRuntime.jsxs(Box, __assign({
       css: {
         position: 'relative',
         width: "".concat(css && css.width || '100%'),
@@ -16584,8 +16958,22 @@
                   return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
                 });
                 return jsxRuntime.jsxs(React__namespace.Fragment, {
-                  children: [jsxRuntime.jsx(TableRow$2, __assign({}, row.getRowProps(), {
-                    children: row.cells.filter(function (cell) {
+                  children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
+                    key: "".concat(row.id, "-group_header")
+                  }), jsxRuntime.jsx(TableCell$2, __assign({
+                    colSpan: 100,
+                    css: {
+                      padding: '20px 8px',
+                      verticalAlign: cellAlign
+                    }
+                  }, {
+                    children: (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
+                      variant: "contentButton"
+                    }, {
+                      children: row.cells[0].render('Cell')
+                    }), void 0)
+                  }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({}, row.getRowProps(), {
+                    children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell, index) {
                       return jsxRuntime.jsx(TableCell$2, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
@@ -16639,7 +17027,7 @@
               })
             }), void 0)]
           }), void 0))
-        }), void 0), !isInfiniteScroll && jsxRuntime.jsx(Box$1, __assign({
+        }), void 0), !isInfiniteScroll && jsxRuntime.jsx(Box, __assign({
           css: {
             width: '100%'
           }
@@ -16668,6 +17056,7 @@
         footer: renderFooter(),
         infiniteScrollWrapper: renderInfiniteScrollWrapper,
         isLoading: isLoading,
+        rowGroup: rowGroup,
         css: css
       }, void 0)]
     }), void 0);
@@ -16880,8 +17269,8 @@
 
   var charAt$6 = uncurryThis$7(''.charAt);
   var n$ParseFloat = global$5.parseFloat;
-  var Symbol$1 = global$5.Symbol;
-  var ITERATOR$2 = Symbol$1 && Symbol$1.iterator;
+  var Symbol$5 = global$5.Symbol;
+  var ITERATOR$2 = Symbol$5 && Symbol$5.iterator;
   var FORCED = 1 / n$ParseFloat(whitespaces + '-0') !== -Infinity
     // MS Edge 18- broken with boxed symbols
     || (ITERATOR$2 && !fails$3(function () { n$ParseFloat(Object(ITERATOR$2)); }));
@@ -17449,7 +17838,7 @@
           lineNumber: 36,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           display: 'none',
           '@md': {
@@ -17550,7 +17939,7 @@
           lineNumber: 77,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           display: 'block',
           '@md': {
@@ -17594,7 +17983,7 @@
           lineNumber: 83,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box, {
         css: {
           display: 'flex',
           flexDirection: 'column',
@@ -17617,7 +18006,7 @@
           lineNumber: 86,
           columnNumber: 17
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box, {
         type: "button",
         role: "button",
         onClick: () => {
@@ -17788,7 +18177,7 @@
           ref: ref,
           onOpenAutoFocus: onOpenAutoFocus
         }, {
-          children: jsxRuntime.jsxs(Box$1, __assign({
+          children: jsxRuntime.jsxs(Box, __assign({
             css: {
               backgroundColor: isMobile ? '$white' : '$gray50',
               height: '100%',
@@ -17796,7 +18185,7 @@
               flexDirection: 'column'
             }
           }, {
-            children: [jsxRuntime.jsxs(Box$1, __assign({
+            children: [jsxRuntime.jsxs(Box, __assign({
               css: {
                 backgroundColor: '$white',
                 padding: isMobile ? '24px 16px' : '4px 24px',
@@ -17808,7 +18197,7 @@
                 height: isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT
               }
             }, {
-              children: [jsxRuntime.jsxs(Box$1, __assign({
+              children: [jsxRuntime.jsxs(Box, __assign({
                 css: {
                   justifyContent: isMobile ? 'flex-end' : 'flex-start',
                   flexDirection: isMobile ? 'row-reverse' : 'row',
@@ -17821,7 +18210,7 @@
                 children: [!isMobile && jsxRuntime.jsx(DialogClose, __assign({
                   asChild: true
                 }, {
-                  children: jsxRuntime.jsx(Box$1, __assign({
+                  children: jsxRuntime.jsx(Box, __assign({
                     css: {
                       width: 48,
                       height: 48,
@@ -17850,7 +18239,7 @@
                 }), void 0), isMobile && jsxRuntime.jsx(DialogClose, __assign({
                   asChild: true
                 }, {
-                  children: jsxRuntime.jsx(Box$1, __assign({
+                  children: jsxRuntime.jsx(Box, __assign({
                     css: {
                       display: 'flex',
                       justifyContent: 'center',
@@ -17863,7 +18252,7 @@
                     }, void 0)
                   }), void 0)
                 }), void 0)]
-              }), void 0), !isMobile && jsxRuntime.jsx(Box$1, __assign({
+              }), void 0), !isMobile && jsxRuntime.jsx(Box, __assign({
                 css: {
                   position: 'absolute',
                   left: '50%',
@@ -17881,13 +18270,13 @@
                   fallback: undefined
                 }, void 0)
               }), void 0)]
-            }), void 0), pageDialogChildren && jsxRuntime.jsx(Box$1, __assign({}, pageDialogChildren.props, {
+            }), void 0), pageDialogChildren && jsxRuntime.jsx(Box, __assign({}, pageDialogChildren.props, {
               css: __assign({
                 flexGrow: 1,
                 maxHeight: footerChildren ? "calc(100vh - ".concat(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT, "px - ").concat(FOOTER_HEIGHT, "px)") : "calc(100vh - ".concat(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT, "px)"),
                 overflow: 'auto'
               }, pageDialogChildren.props.css)
-            }), void 0), footerChildren && jsxRuntime.jsx(Box$1, __assign({}, footerChildren.props, {
+            }), void 0), footerChildren && jsxRuntime.jsx(Box, __assign({}, footerChildren.props, {
               css: __assign({
                 boxShadow: '$small',
                 backgroundColor: '$white',
@@ -18110,7 +18499,7 @@
         lineNumber: 131,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
       onClick: buttonClose,
       css: {
         cursor: 'pointer'
@@ -18154,7 +18543,7 @@
         lineNumber: 139,
         columnNumber: 11
       }
-    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'absolute',
         bottom: 0,
@@ -18305,7 +18694,7 @@
         lineNumber: 191,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
       onClick: props.onCancel,
       css: {
         cursor: 'pointer'
@@ -18349,7 +18738,7 @@
         lineNumber: 199,
         columnNumber: 11
       }
-    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'absolute',
         bottom: 0,
@@ -19071,7 +19460,7 @@
   var bind$1 = functionBindContext;
   var classof = classof$7;
   var anObject = anObject$i;
-  var isObject = isObject$a;
+  var isObject$3 = isObject$d;
   var $toString$1 = toString$f;
   var create = objectCreate;
   var createPropertyDescriptor = createPropertyDescriptor$5;
@@ -19111,7 +19500,7 @@
   var push$1 = uncurryThis$1([].push);
   var replace$1 = uncurryThis$1(''.replace);
   var shift$1 = uncurryThis$1([].shift);
-  var splice = uncurryThis$1([].splice);
+  var splice$1 = uncurryThis$1([].splice);
   var split$1 = uncurryThis$1(''.split);
   var stringSlice$1 = uncurryThis$1(''.slice);
 
@@ -19183,7 +19572,7 @@
     this.url = null;
 
     if (init !== undefined) {
-      if (isObject(init)) this.parseObject(init);
+      if (isObject$3(init)) this.parseObject(init);
       else this.parseQuery(typeof init == 'string' ? charAt$1(init, 0) === '?' ? stringSlice$1(init, 1) : init : $toString$1(init));
     }
   };
@@ -19279,7 +19668,7 @@
       var key = $toString$1(name);
       var index = 0;
       while (index < entries.length) {
-        if (entries[index].key === key) splice(entries, index, 1);
+        if (entries[index].key === key) splice$1(entries, index, 1);
         else index++;
       }
       state.updateURL();
@@ -19335,7 +19724,7 @@
       for (; index < entries.length; index++) {
         entry = entries[index];
         if (entry.key === key) {
-          if (found) splice(entries, index--, 1);
+          if (found) splice$1(entries, index--, 1);
           else {
             found = true;
             entry.value = val;
@@ -19400,7 +19789,7 @@
     var headersSet = uncurryThis$1(HeadersPrototype.set);
 
     var wrapRequestOptions = function (init) {
-      if (isObject(init)) {
+      if (isObject$3(init)) {
         var body = init.body;
         var headers;
         if (classof(body) === URL_SEARCH_PARAMS) {
@@ -20568,6 +20957,33 @@
     });
   }
 
+  function upload(_a) {
+    var url = _a.url,
+        file = _a.file,
+        tokenKey = _a.tokenKey,
+        token = _a.token,
+        progress = _a.progress,
+        reqKey = _a.reqKey,
+        resKey = _a.resKey;
+    var promise = new Promise(function (resolve, reject) {
+      var formdata = new FormData();
+      formdata.append(reqKey, file);
+      request__default["default"].post(url).set(tokenKey, token).send(formdata).on('progress', function (e) {
+        return progress && progress(Math.round(e.percent));
+      }).end(function (err, res) {
+        if (err) {
+          reject(err.message);
+        }
+
+        if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+          var response = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+          resolve(response[resKey]);
+        }
+      });
+    });
+    return promise;
+  }
+
   var _jsxFileName$9 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\upload\\Upload.js";
   const Input$1 = styled('input', {
     display: 'none !important'
@@ -20648,28 +21064,32 @@
   const IconStateFull = props => {
     const [isHover, setIsHover] = React.useState(false);
 
-    function toggleHover() {
-      setIsHover(!isHover);
+    function handleEnter() {
+      setIsHover(true);
+    }
+
+    function handleLeave() {
+      setIsHover(false);
     }
 
     return props.type === 'close' ? /*#__PURE__*/React__default["default"].createElement(CloseIcon, _extends({}, props, {
       color: isHover ? '#E13743' : '#A5ABAB',
-      onMouseEnter: toggleHover,
-      onMouseLeave: toggleHover,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 111,
+        lineNumber: 118,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
       color: isHover ? '#04C99E' : '#A5ABAB',
-      onMouseEnter: toggleHover,
-      onMouseLeave: toggleHover,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 118,
+        lineNumber: 125,
         columnNumber: 5
       }
     }));
@@ -20692,7 +21112,12 @@
     showCropper,
     accept,
     progress,
-    loading
+    loading,
+    action,
+    token,
+    tokenKey,
+    reqKey,
+    resKey
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -20771,7 +21196,18 @@
       height: height,
       width: width,
       background: '$white',
-      borderRadius: 8
+      borderRadius: 8,
+      variants: {
+        error: {
+          true: {
+            border: '2px solid $red400',
+            '&:hover': {
+              border: '2px solid  $red300',
+              background: '$bgFailed'
+            }
+          }
+        }
+      }
     });
     const Image = styled('img', {
       borderRadius: 8,
@@ -20798,20 +21234,97 @@
       const arrFile = [...fileList];
 
       for (let i = 0; i < files.length; i++) {
-        var _onChange, _onChange$then;
-
         if (max && arrFile.length >= max && indexReplace.current === null) {
           break;
         }
 
         let newFile = files[i];
+        newFile.uid = new Date().getTime();
         newFile.url = URL.createObjectURL(newFile);
-        (_onChange = onChange({
-          fileList: arrFile,
-          file: newFile,
-          indexReplace: indexReplace.current,
-          isReplace: indexReplace.current !== null
-        })) == null ? void 0 : (_onChange$then = _onChange.then(() => setErrorMessage(null))) == null ? void 0 : _onChange$then.catch(error => setErrorMessage(error.message));
+
+        if (action) {
+          upload({
+            url: action,
+            file: newFile,
+            token,
+            tokenKey,
+            reqKey,
+            resKey,
+            progress: percent => {
+              var _onChange, _onChange$then;
+
+              let fileProgress = Object.assign({}, newFile);
+              let uid = fileProgress.uid;
+              fileProgress.status = 'uploading';
+              fileProgress.percent = percent;
+              let arrProgress = [...arrFile];
+
+              for (let i = 0; i < arrProgress.length; i++) {
+                if (arrProgress[i].uid === uid) {
+                  arrProgress[i] = fileProgress;
+                }
+              }
+
+              (_onChange = onChange({
+                fileList: arrProgress,
+                file: fileProgress,
+                indexReplace: indexReplace.current,
+                isReplace: indexReplace.current !== null
+              })) == null ? void 0 : (_onChange$then = _onChange.then(() => setErrorMessage(null))) == null ? void 0 : _onChange$then.catch(error => setErrorMessage(error.message));
+            }
+          }).then(result => {
+            var _onChange2, _onChange2$then;
+
+            let fileSuccess = Object.assign({}, newFile);
+            let uid = fileSuccess.uid;
+            fileSuccess.url = result;
+            fileSuccess.status = 'done';
+            let arrSuccess = [...arrFile];
+
+            for (let i = 0; i < arrSuccess.length; i++) {
+              if (arrSuccess[i].uid === uid) {
+                arrSuccess[i] = fileSuccess;
+              }
+            }
+
+            (_onChange2 = onChange({
+              fileList: arrSuccess,
+              file: fileSuccess,
+              indexReplace: indexReplace.current,
+              isReplace: indexReplace.current !== null
+            })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setErrorMessage(null))) == null ? void 0 : _onChange2$then.catch(error => setErrorMessage(error.message));
+          }).catch(error => {
+            var _onChange3, _onChange3$then;
+
+            let fileError = Object.assign({}, newFile);
+            let uid = fileError.uid;
+            fileError.status = 'error';
+            fileError.errorMessage = error;
+            let arrError = [...arrFile];
+
+            for (let i = 0; i < arrError.length; i++) {
+              if (arrError[i].uid === uid) {
+                arrError[i] = fileError;
+              }
+            }
+
+            (_onChange3 = onChange({
+              fileList: arrError,
+              file: fileError,
+              indexReplace: indexReplace.current,
+              isReplace: indexReplace.current !== null
+            })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setErrorMessage(null))) == null ? void 0 : _onChange3$then.catch(error => setErrorMessage(error.message));
+          });
+        } else {
+          var _onChange4, _onChange4$then;
+
+          (_onChange4 = onChange({
+            fileList: arrFile,
+            file: newFile,
+            indexReplace: indexReplace.current,
+            isReplace: indexReplace.current !== null
+          })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setErrorMessage(null))) == null ? void 0 : _onChange4$then.catch(error => setErrorMessage(error.message));
+        }
 
         if (indexReplace.current !== null) {
           arrFile[indexReplace.current] = newFile;
@@ -20948,7 +21461,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 382,
+          lineNumber: 481,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -20958,7 +21471,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 383,
+          lineNumber: 482,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -20974,7 +21487,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 393,
+              lineNumber: 492,
               columnNumber: 16
             }
           });
@@ -20982,20 +21495,21 @@
 
         return /*#__PURE__*/React__default["default"].createElement(Container, {
           key: index,
+          error: item.status === 'error',
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 396,
+            lineNumber: 495,
             columnNumber: 9
           }
-        }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        }, /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'relative'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 397,
+            lineNumber: 496,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21004,10 +21518,10 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 398,
+            lineNumber: 497,
             columnNumber: 13
           }
-        }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        }), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'absolute',
             top: '50%',
@@ -21017,7 +21531,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 399,
+            lineNumber: 498,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21026,7 +21540,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 407,
+            lineNumber: 506,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21034,7 +21548,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 409,
+            lineNumber: 508,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21051,7 +21565,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 420,
+              lineNumber: 519,
               columnNumber: 16
             }
           });
@@ -21062,17 +21576,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 423,
+            lineNumber: 522,
             columnNumber: 9
           }
-        }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        }, /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'relative'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 424,
+            lineNumber: 523,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21081,10 +21595,10 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 425,
+            lineNumber: 524,
             columnNumber: 13
           }
-        }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        }), /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             position: 'absolute',
             top: '50%',
@@ -21094,7 +21608,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 426,
+            lineNumber: 525,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21104,7 +21618,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 434,
+            lineNumber: 533,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
@@ -21112,7 +21626,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 435,
+            lineNumber: 534,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21127,14 +21641,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 436,
+            lineNumber: 535,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 450,
+            lineNumber: 549,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -21150,7 +21664,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 461,
+          lineNumber: 560,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21164,7 +21678,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 462,
+          lineNumber: 561,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21190,7 +21704,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 463,
+          lineNumber: 562,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21198,14 +21712,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 476,
+          lineNumber: 575,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 477,
+          lineNumber: 576,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21218,7 +21732,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 485,
+          lineNumber: 584,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -21233,7 +21747,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 486,
+          lineNumber: 585,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
@@ -21245,35 +21759,35 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 496,
+          lineNumber: 595,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 497,
+          lineNumber: 596,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 499,
+          lineNumber: 598,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 500,
+          lineNumber: 599,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 501,
+          lineNumber: 600,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21283,14 +21797,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 503,
+          lineNumber: 602,
           columnNumber: 17
         }
       }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 510,
+          lineNumber: 609,
           columnNumber: 26
         }
       }, errorMessage));
@@ -21301,7 +21815,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 517,
+          lineNumber: 616,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21309,7 +21823,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 518,
+          lineNumber: 617,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21317,7 +21831,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 519,
+          lineNumber: 618,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21330,7 +21844,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 521,
+          lineNumber: 620,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -21341,7 +21855,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 524,
+          lineNumber: 623,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21352,7 +21866,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 525,
+          lineNumber: 624,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21365,14 +21879,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 526,
+          lineNumber: 625,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 529,
+          lineNumber: 628,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21384,7 +21898,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 530,
+          lineNumber: 629,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21392,7 +21906,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 531,
+          lineNumber: 630,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21404,7 +21918,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 532,
+          lineNumber: 631,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21412,7 +21926,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 538,
+          lineNumber: 637,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21421,7 +21935,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 539,
+          lineNumber: 638,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21429,7 +21943,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 542,
+          lineNumber: 641,
           columnNumber: 15
         }
       }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21445,7 +21959,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 553,
+        lineNumber: 652,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -21454,7 +21968,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 556,
+        lineNumber: 655,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -21466,7 +21980,10 @@
     height: 200,
     width: 200,
     cropperTitle: 'Potong Gambar',
-    showCropper: true
+    showCropper: true,
+    tokenKey: 'Token',
+    reqKey: 'file',
+    resKey: 'url'
   };
   Upload.propTypes = {
     /**
@@ -21552,7 +22069,32 @@
     /**
      Add image cropper on upload.
      */
-    showCropper: PropTypes__default["default"].bool
+    showCropper: PropTypes__default["default"].bool,
+
+    /**
+     API upload url, allows components to automatically upload directly to API service.
+     */
+    action: PropTypes__default["default"].string,
+
+    /**
+     Contains an authentication token for upload API.
+     */
+    token: PropTypes__default["default"].string,
+
+    /**
+     Referencing the headers key to attach the token.
+     */
+    tokenKey: PropTypes__default["default"].string,
+
+    /**
+     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.
+     */
+    resKey: PropTypes__default["default"].string
   };
   Upload.displayName = 'Upload';
 
@@ -21751,7 +22293,7 @@
           children: jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, __assign({
             ratio: properties.ratio
           }, {
-            children: props.carousel ? props === null || props === void 0 ? void 0 : props.children[currentImgIdx] : props.withComponent ? jsxRuntime.jsxs(Box$1, __assign({
+            children: props.carousel ? props === null || props === void 0 ? void 0 : props.children[currentImgIdx] : props.withComponent ? jsxRuntime.jsxs(Box, __assign({
               css: {
                 height: '100%'
               }
@@ -21800,6 +22342,7 @@
     backgroundColor: '$iconSecondary',
     marginRight: 4
   });
+
   function InputColorPicker(props) {
     const [isPopover, setIsPopover] = React.useState(false);
 
@@ -21820,11 +22363,11 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 21,
+          lineNumber: 22,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
-        children: /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        children: /*#__PURE__*/React__default["default"].createElement(Box, {
           css: {
             width: 16,
             height: 16,
@@ -21834,21 +22377,21 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$8,
-            lineNumber: 23,
+            lineNumber: 24,
             columnNumber: 21
           }
         }),
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 22,
+          lineNumber: 23,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(Separator$1, {
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 25,
+          lineNumber: 26,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -21858,7 +22401,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 26,
+          lineNumber: 27,
           columnNumber: 9
         }
       }));
@@ -21869,7 +22412,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$8,
-          lineNumber: 32,
+          lineNumber: 33,
           columnNumber: 12
         }
       }));
@@ -21882,26 +22425,56 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 36,
+        lineNumber: 37,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 37,
+        lineNumber: 38,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 38,
+        lineNumber: 39,
         columnNumber: 7
       }
     }, renderColorPicker()));
   }
+
   InputColorPicker.displayName = 'InputColorPicker';
+  InputColorPicker.propTypes = {
+    /**
+     Color code to be displayed.
+    */
+    color: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]),
+
+    /**
+     Additional color list.
+    */
+    presetColors: PropTypes__default["default"].array,
+
+    /**
+     Change event handler.
+    */
+    onChange: PropTypes__default["default"].func,
+
+    /**
+     Add preset color event handler.
+    */
+    onAddColor: PropTypes__default["default"].func,
+
+    /**
+     Disable opacity selector.
+    */
+    disableAlpha: PropTypes__default["default"].bool
+  };
+  InputColorPicker.defaultProps = {
+    presetColors: ['#EF4444', '#F97316', '#FACC15', '#4ADE80', '#2DD4BF', '#3B82F6', '#6467F2', '#EC4899', '#F43F5E', '#D946EF', '#8B5CF6', '#0EA5E9', '#10B981', '#84CC16']
+  };
 
   var img = "data:image/gif;base64,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";
 
@@ -23937,7 +24510,7 @@
         lineNumber: 43,
         columnNumber: 9
       }
-    })), check === 'Hex' ? /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    })), check === 'Hex' ? /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'relative'
       },
@@ -23963,7 +24536,7 @@
         lineNumber: 47,
         columnNumber: 11
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'absolute',
         top: 5,
@@ -24024,7 +24597,7 @@
         lineNumber: 84,
         columnNumber: 11
       }
-    })), !disableAlpha && /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    })), !disableAlpha && /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'relative'
       },
@@ -24053,7 +24626,7 @@
         lineNumber: 96,
         columnNumber: 11
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'absolute',
         top: 5,
@@ -24573,14 +25146,29 @@
   }
 
   ColorPicker.propTypes = {
-    hsl: PropTypes__default["default"].object,
-    hsv: PropTypes__default["default"].object,
-    rgb: PropTypes__default["default"].object,
-    hex: PropTypes__default["default"].string,
+    /**
+     Color code to be displayed.
+    */
+    color: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]),
+
+    /**
+     Additional color list
+    */
     presetColors: PropTypes__default["default"].array,
+
+    /**
+     Change event handler
+    */
     onChange: PropTypes__default["default"].func,
-    onSwatchHover: PropTypes__default["default"].func,
+
+    /**
+     Add preset color event handler
+    */
     onAddColor: PropTypes__default["default"].func,
+
+    /**
+     Disable opacity selector
+    */
     disableAlpha: PropTypes__default["default"].bool
   };
   ColorPicker.defaultProps = {
@@ -24922,22 +25510,23 @@
       }));
     };
 
-    const handleStepChange = () => {
+    const handleStepChange = e => {
       const target = window.document.getElementById('container');
       props.scrollTop && target.scrollIntoView({
         behavior: 'smooth',
         block: 'start'
       });
+      props.onStepChange && props.onStepChange(e);
     };
 
     const WrapperBox = props => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(Box, {
         id: "content-container",
         css: props.css,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 253,
+          lineNumber: 254,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].cloneElement(props.children, props));
@@ -24948,7 +25537,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 260,
+        lineNumber: 261,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -24969,7 +25558,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 261,
+        lineNumber: 262,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -24981,7 +25570,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 282,
+          lineNumber: 283,
           columnNumber: 16
         }
       }),
@@ -24990,7 +25579,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 277,
+        lineNumber: 278,
         columnNumber: 9
       }
     }), ((_props$children = props.children) == null ? void 0 : _props$children.length) > 1 ? (_props$children2 = props.children) == null ? void 0 : _props$children2.map((child, idx) => /*#__PURE__*/React__default["default"].createElement(WrapperBox, {
@@ -24999,7 +25588,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 288,
+        lineNumber: 289,
         columnNumber: 15
       }
     }, child)) : /*#__PURE__*/React__default["default"].createElement(WrapperBox, {
@@ -25007,7 +25596,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 293,
+        lineNumber: 294,
         columnNumber: 13
       }
     }, props.children))));
@@ -25036,7 +25625,7 @@
         resizeObserver.disconnect();
       };
     }, [height, isOpen]);
-    return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         maxHeight: isOpen ? height : 25,
         overflow: 'hidden',
@@ -25294,7 +25883,7 @@
         lineNumber: 162,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         position: 'absolute',
         top: 8,
@@ -25378,7 +25967,7 @@
         resizeObserver.disconnect();
       };
     }, [height, isOpen]);
-    return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
         maxHeight: isOpen ? height : 0,
         overflow: 'hidden',
@@ -25391,7 +25980,7 @@
         lineNumber: 19,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
       ref: contentRef,
       __self: this,
       __source: {
@@ -25544,7 +26133,7 @@
                     row.toggleRowExpanded(!row.isExpanded);
                   }
                 }, {
-                  children: [jsxRuntime.jsx(Box$1, {
+                  children: [jsxRuntime.jsx(Box, {
                     children: cell.render('Cell')
                   }, void 0), jsxRuntime.jsx(Flex$1, __assign({
                     justify: "center",
@@ -25976,7 +26565,7 @@
                       maxWidth: cell.column.maxWidth
                     }
                   }), {
-                    children: jsxRuntime.jsx(Box$1, __assign({
+                    children: jsxRuntime.jsx(Box, __assign({
                       css: {
                         height: '100%',
                         paddingTop: 15
@@ -26274,7 +26863,7 @@
     marginTop: 2,
     fontSize: '9pt'
   });
-  const StyledBox = styled(Box$1, {
+  const StyledBox = styled(Box, {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fill, minmax(calc(768px / 4 - 20px), 1fr))',
     gridGap: '10px'
@@ -26371,6 +26960,1008 @@
     }, i.hex))));
   };
 
+  /** Detect free variable `global` from Node.js. */
+
+  var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+  var _freeGlobal = freeGlobal$1;
+
+  var freeGlobal = _freeGlobal;
+
+  /** Detect free variable `self`. */
+  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+  /** Used as a reference to the global object. */
+  var root$3 = freeGlobal || freeSelf || Function('return this')();
+
+  var _root = root$3;
+
+  var root$2 = _root;
+
+  /** Built-in value references. */
+  var Symbol$4 = root$2.Symbol;
+
+  var _Symbol = Symbol$4;
+
+  var Symbol$3 = _Symbol;
+
+  /** Used for built-in method references. */
+  var objectProto$4 = Object.prototype;
+
+  /** Used to check objects for own properties. */
+  var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
+
+  /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+  var nativeObjectToString$1 = objectProto$4.toString;
+
+  /** Built-in value references. */
+  var symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : undefined;
+
+  /**
+   * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the raw `toStringTag`.
+   */
+  function getRawTag$1(value) {
+    var isOwn = hasOwnProperty$3.call(value, symToStringTag$1),
+        tag = value[symToStringTag$1];
+
+    try {
+      value[symToStringTag$1] = undefined;
+      var unmasked = true;
+    } catch (e) {}
+
+    var result = nativeObjectToString$1.call(value);
+    if (unmasked) {
+      if (isOwn) {
+        value[symToStringTag$1] = tag;
+      } else {
+        delete value[symToStringTag$1];
+      }
+    }
+    return result;
+  }
+
+  var _getRawTag = getRawTag$1;
+
+  /** Used for built-in method references. */
+
+  var objectProto$3 = Object.prototype;
+
+  /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+  var nativeObjectToString = objectProto$3.toString;
+
+  /**
+   * Converts `value` to a string using `Object.prototype.toString`.
+   *
+   * @private
+   * @param {*} value The value to convert.
+   * @returns {string} Returns the converted string.
+   */
+  function objectToString$1(value) {
+    return nativeObjectToString.call(value);
+  }
+
+  var _objectToString = objectToString$1;
+
+  var Symbol$2 = _Symbol,
+      getRawTag = _getRawTag,
+      objectToString = _objectToString;
+
+  /** `Object#toString` result references. */
+  var nullTag = '[object Null]',
+      undefinedTag = '[object Undefined]';
+
+  /** Built-in value references. */
+  var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
+
+  /**
+   * The base implementation of `getTag` without fallbacks for buggy environments.
+   *
+   * @private
+   * @param {*} value The value to query.
+   * @returns {string} Returns the `toStringTag`.
+   */
+  function baseGetTag$1(value) {
+    if (value == null) {
+      return value === undefined ? undefinedTag : nullTag;
+    }
+    return (symToStringTag && symToStringTag in Object(value))
+      ? getRawTag(value)
+      : objectToString(value);
+  }
+
+  var _baseGetTag = baseGetTag$1;
+
+  /**
+   * Checks if `value` is the
+   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+   * @example
+   *
+   * _.isObject({});
+   * // => true
+   *
+   * _.isObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isObject(_.noop);
+   * // => true
+   *
+   * _.isObject(null);
+   * // => false
+   */
+
+  function isObject$2(value) {
+    var type = typeof value;
+    return value != null && (type == 'object' || type == 'function');
+  }
+
+  var isObject_1 = isObject$2;
+
+  var baseGetTag = _baseGetTag,
+      isObject$1 = isObject_1;
+
+  /** `Object#toString` result references. */
+  var asyncTag = '[object AsyncFunction]',
+      funcTag = '[object Function]',
+      genTag = '[object GeneratorFunction]',
+      proxyTag = '[object Proxy]';
+
+  /**
+   * Checks if `value` is classified as a `Function` object.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+   * @example
+   *
+   * _.isFunction(_);
+   * // => true
+   *
+   * _.isFunction(/abc/);
+   * // => false
+   */
+  function isFunction$1(value) {
+    if (!isObject$1(value)) {
+      return false;
+    }
+    // The use of `Object#toString` avoids issues with the `typeof` operator
+    // in Safari 9 which returns 'object' for typed arrays and other constructors.
+    var tag = baseGetTag(value);
+    return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+  }
+
+  var isFunction_1 = isFunction$1;
+
+  var root$1 = _root;
+
+  /** Used to detect overreaching core-js shims. */
+  var coreJsData$1 = root$1['__core-js_shared__'];
+
+  var _coreJsData = coreJsData$1;
+
+  var coreJsData = _coreJsData;
+
+  /** Used to detect methods masquerading as native. */
+  var maskSrcKey = (function() {
+    var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+    return uid ? ('Symbol(src)_1.' + uid) : '';
+  }());
+
+  /**
+   * Checks if `func` has its source masked.
+   *
+   * @private
+   * @param {Function} func The function to check.
+   * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+   */
+  function isMasked$1(func) {
+    return !!maskSrcKey && (maskSrcKey in func);
+  }
+
+  var _isMasked = isMasked$1;
+
+  /** Used for built-in method references. */
+
+  var funcProto$1 = Function.prototype;
+
+  /** Used to resolve the decompiled source of functions. */
+  var funcToString$1 = funcProto$1.toString;
+
+  /**
+   * Converts `func` to its source code.
+   *
+   * @private
+   * @param {Function} func The function to convert.
+   * @returns {string} Returns the source code.
+   */
+  function toSource$1(func) {
+    if (func != null) {
+      try {
+        return funcToString$1.call(func);
+      } catch (e) {}
+      try {
+        return (func + '');
+      } catch (e) {}
+    }
+    return '';
+  }
+
+  var _toSource = toSource$1;
+
+  var isFunction = isFunction_1,
+      isMasked = _isMasked,
+      isObject = isObject_1,
+      toSource = _toSource;
+
+  /**
+   * Used to match `RegExp`
+   * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+   */
+  var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+  /** Used to detect host constructors (Safari). */
+  var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+  /** Used for built-in method references. */
+  var funcProto = Function.prototype,
+      objectProto$2 = Object.prototype;
+
+  /** Used to resolve the decompiled source of functions. */
+  var funcToString = funcProto.toString;
+
+  /** Used to check objects for own properties. */
+  var hasOwnProperty$2 = objectProto$2.hasOwnProperty;
+
+  /** Used to detect if a method is native. */
+  var reIsNative = RegExp('^' +
+    funcToString.call(hasOwnProperty$2).replace(reRegExpChar, '\\$&')
+    .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
+  );
+
+  /**
+   * The base implementation of `_.isNative` without bad shim checks.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a native function,
+   *  else `false`.
+   */
+  function baseIsNative$1(value) {
+    if (!isObject(value) || isMasked(value)) {
+      return false;
+    }
+    var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+    return pattern.test(toSource(value));
+  }
+
+  var _baseIsNative = baseIsNative$1;
+
+  /**
+   * Gets the value at `key` of `object`.
+   *
+   * @private
+   * @param {Object} [object] The object to query.
+   * @param {string} key The key of the property to get.
+   * @returns {*} Returns the property value.
+   */
+
+  function getValue$1(object, key) {
+    return object == null ? undefined : object[key];
+  }
+
+  var _getValue = getValue$1;
+
+  var baseIsNative = _baseIsNative,
+      getValue = _getValue;
+
+  /**
+   * Gets the native function at `key` of `object`.
+   *
+   * @private
+   * @param {Object} object The object to query.
+   * @param {string} key The key of the method to get.
+   * @returns {*} Returns the function if it's native, else `undefined`.
+   */
+  function getNative$2(object, key) {
+    var value = getValue(object, key);
+    return baseIsNative(value) ? value : undefined;
+  }
+
+  var _getNative = getNative$2;
+
+  var getNative$1 = _getNative;
+
+  /* Built-in method references that are verified to be native. */
+  var nativeCreate$4 = getNative$1(Object, 'create');
+
+  var _nativeCreate = nativeCreate$4;
+
+  var nativeCreate$3 = _nativeCreate;
+
+  /**
+   * Removes all key-value entries from the hash.
+   *
+   * @private
+   * @name clear
+   * @memberOf Hash
+   */
+  function hashClear$1() {
+    this.__data__ = nativeCreate$3 ? nativeCreate$3(null) : {};
+    this.size = 0;
+  }
+
+  var _hashClear = hashClear$1;
+
+  /**
+   * Removes `key` and its value from the hash.
+   *
+   * @private
+   * @name delete
+   * @memberOf Hash
+   * @param {Object} hash The hash to modify.
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+
+  function hashDelete$1(key) {
+    var result = this.has(key) && delete this.__data__[key];
+    this.size -= result ? 1 : 0;
+    return result;
+  }
+
+  var _hashDelete = hashDelete$1;
+
+  var nativeCreate$2 = _nativeCreate;
+
+  /** Used to stand-in for `undefined` hash values. */
+  var HASH_UNDEFINED$1 = '__lodash_hash_undefined__';
+
+  /** Used for built-in method references. */
+  var objectProto$1 = Object.prototype;
+
+  /** Used to check objects for own properties. */
+  var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
+
+  /**
+   * Gets the hash value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf Hash
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function hashGet$1(key) {
+    var data = this.__data__;
+    if (nativeCreate$2) {
+      var result = data[key];
+      return result === HASH_UNDEFINED$1 ? undefined : result;
+    }
+    return hasOwnProperty$1.call(data, key) ? data[key] : undefined;
+  }
+
+  var _hashGet = hashGet$1;
+
+  var nativeCreate$1 = _nativeCreate;
+
+  /** Used for built-in method references. */
+  var objectProto = Object.prototype;
+
+  /** Used to check objects for own properties. */
+  var hasOwnProperty = objectProto.hasOwnProperty;
+
+  /**
+   * Checks if a hash value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf Hash
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function hashHas$1(key) {
+    var data = this.__data__;
+    return nativeCreate$1 ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
+  }
+
+  var _hashHas = hashHas$1;
+
+  var nativeCreate = _nativeCreate;
+
+  /** Used to stand-in for `undefined` hash values. */
+  var HASH_UNDEFINED = '__lodash_hash_undefined__';
+
+  /**
+   * Sets the hash `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf Hash
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the hash instance.
+   */
+  function hashSet$1(key, value) {
+    var data = this.__data__;
+    this.size += this.has(key) ? 0 : 1;
+    data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
+    return this;
+  }
+
+  var _hashSet = hashSet$1;
+
+  var hashClear = _hashClear,
+      hashDelete = _hashDelete,
+      hashGet = _hashGet,
+      hashHas = _hashHas,
+      hashSet = _hashSet;
+
+  /**
+   * Creates a hash object.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function Hash$1(entries) {
+    var index = -1,
+        length = entries == null ? 0 : entries.length;
+
+    this.clear();
+    while (++index < length) {
+      var entry = entries[index];
+      this.set(entry[0], entry[1]);
+    }
+  }
+
+  // Add methods to `Hash`.
+  Hash$1.prototype.clear = hashClear;
+  Hash$1.prototype['delete'] = hashDelete;
+  Hash$1.prototype.get = hashGet;
+  Hash$1.prototype.has = hashHas;
+  Hash$1.prototype.set = hashSet;
+
+  var _Hash = Hash$1;
+
+  /**
+   * Removes all key-value entries from the list cache.
+   *
+   * @private
+   * @name clear
+   * @memberOf ListCache
+   */
+
+  function listCacheClear$1() {
+    this.__data__ = [];
+    this.size = 0;
+  }
+
+  var _listCacheClear = listCacheClear$1;
+
+  /**
+   * Performs a
+   * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+   * comparison between two values to determine if they are equivalent.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to compare.
+   * @param {*} other The other value to compare.
+   * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+   * @example
+   *
+   * var object = { 'a': 1 };
+   * var other = { 'a': 1 };
+   *
+   * _.eq(object, object);
+   * // => true
+   *
+   * _.eq(object, other);
+   * // => false
+   *
+   * _.eq('a', 'a');
+   * // => true
+   *
+   * _.eq('a', Object('a'));
+   * // => false
+   *
+   * _.eq(NaN, NaN);
+   * // => true
+   */
+
+  function eq$1(value, other) {
+    return value === other || (value !== value && other !== other);
+  }
+
+  var eq_1 = eq$1;
+
+  var eq = eq_1;
+
+  /**
+   * Gets the index at which the `key` is found in `array` of key-value pairs.
+   *
+   * @private
+   * @param {Array} array The array to inspect.
+   * @param {*} key The key to search for.
+   * @returns {number} Returns the index of the matched value, else `-1`.
+   */
+  function assocIndexOf$4(array, key) {
+    var length = array.length;
+    while (length--) {
+      if (eq(array[length][0], key)) {
+        return length;
+      }
+    }
+    return -1;
+  }
+
+  var _assocIndexOf = assocIndexOf$4;
+
+  var assocIndexOf$3 = _assocIndexOf;
+
+  /** Used for built-in method references. */
+  var arrayProto = Array.prototype;
+
+  /** Built-in value references. */
+  var splice = arrayProto.splice;
+
+  /**
+   * Removes `key` and its value from the list cache.
+   *
+   * @private
+   * @name delete
+   * @memberOf ListCache
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+  function listCacheDelete$1(key) {
+    var data = this.__data__,
+        index = assocIndexOf$3(data, key);
+
+    if (index < 0) {
+      return false;
+    }
+    var lastIndex = data.length - 1;
+    if (index == lastIndex) {
+      data.pop();
+    } else {
+      splice.call(data, index, 1);
+    }
+    --this.size;
+    return true;
+  }
+
+  var _listCacheDelete = listCacheDelete$1;
+
+  var assocIndexOf$2 = _assocIndexOf;
+
+  /**
+   * Gets the list cache value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf ListCache
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function listCacheGet$1(key) {
+    var data = this.__data__,
+        index = assocIndexOf$2(data, key);
+
+    return index < 0 ? undefined : data[index][1];
+  }
+
+  var _listCacheGet = listCacheGet$1;
+
+  var assocIndexOf$1 = _assocIndexOf;
+
+  /**
+   * Checks if a list cache value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf ListCache
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function listCacheHas$1(key) {
+    return assocIndexOf$1(this.__data__, key) > -1;
+  }
+
+  var _listCacheHas = listCacheHas$1;
+
+  var assocIndexOf = _assocIndexOf;
+
+  /**
+   * Sets the list cache `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf ListCache
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the list cache instance.
+   */
+  function listCacheSet$1(key, value) {
+    var data = this.__data__,
+        index = assocIndexOf(data, key);
+
+    if (index < 0) {
+      ++this.size;
+      data.push([key, value]);
+    } else {
+      data[index][1] = value;
+    }
+    return this;
+  }
+
+  var _listCacheSet = listCacheSet$1;
+
+  var listCacheClear = _listCacheClear,
+      listCacheDelete = _listCacheDelete,
+      listCacheGet = _listCacheGet,
+      listCacheHas = _listCacheHas,
+      listCacheSet = _listCacheSet;
+
+  /**
+   * Creates an list cache object.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function ListCache$1(entries) {
+    var index = -1,
+        length = entries == null ? 0 : entries.length;
+
+    this.clear();
+    while (++index < length) {
+      var entry = entries[index];
+      this.set(entry[0], entry[1]);
+    }
+  }
+
+  // Add methods to `ListCache`.
+  ListCache$1.prototype.clear = listCacheClear;
+  ListCache$1.prototype['delete'] = listCacheDelete;
+  ListCache$1.prototype.get = listCacheGet;
+  ListCache$1.prototype.has = listCacheHas;
+  ListCache$1.prototype.set = listCacheSet;
+
+  var _ListCache = ListCache$1;
+
+  var getNative = _getNative,
+      root = _root;
+
+  /* Built-in method references that are verified to be native. */
+  var Map$1 = getNative(root, 'Map');
+
+  var _Map = Map$1;
+
+  var Hash = _Hash,
+      ListCache = _ListCache,
+      Map = _Map;
+
+  /**
+   * Removes all key-value entries from the map.
+   *
+   * @private
+   * @name clear
+   * @memberOf MapCache
+   */
+  function mapCacheClear$1() {
+    this.size = 0;
+    this.__data__ = {
+      'hash': new Hash,
+      'map': new (Map || ListCache),
+      'string': new Hash
+    };
+  }
+
+  var _mapCacheClear = mapCacheClear$1;
+
+  /**
+   * Checks if `value` is suitable for use as unique object key.
+   *
+   * @private
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
+   */
+
+  function isKeyable$1(value) {
+    var type = typeof value;
+    return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
+      ? (value !== '__proto__')
+      : (value === null);
+  }
+
+  var _isKeyable = isKeyable$1;
+
+  var isKeyable = _isKeyable;
+
+  /**
+   * Gets the data for `map`.
+   *
+   * @private
+   * @param {Object} map The map to query.
+   * @param {string} key The reference key.
+   * @returns {*} Returns the map data.
+   */
+  function getMapData$4(map, key) {
+    var data = map.__data__;
+    return isKeyable(key)
+      ? data[typeof key == 'string' ? 'string' : 'hash']
+      : data.map;
+  }
+
+  var _getMapData = getMapData$4;
+
+  var getMapData$3 = _getMapData;
+
+  /**
+   * Removes `key` and its value from the map.
+   *
+   * @private
+   * @name delete
+   * @memberOf MapCache
+   * @param {string} key The key of the value to remove.
+   * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+   */
+  function mapCacheDelete$1(key) {
+    var result = getMapData$3(this, key)['delete'](key);
+    this.size -= result ? 1 : 0;
+    return result;
+  }
+
+  var _mapCacheDelete = mapCacheDelete$1;
+
+  var getMapData$2 = _getMapData;
+
+  /**
+   * Gets the map value for `key`.
+   *
+   * @private
+   * @name get
+   * @memberOf MapCache
+   * @param {string} key The key of the value to get.
+   * @returns {*} Returns the entry value.
+   */
+  function mapCacheGet$1(key) {
+    return getMapData$2(this, key).get(key);
+  }
+
+  var _mapCacheGet = mapCacheGet$1;
+
+  var getMapData$1 = _getMapData;
+
+  /**
+   * Checks if a map value for `key` exists.
+   *
+   * @private
+   * @name has
+   * @memberOf MapCache
+   * @param {string} key The key of the entry to check.
+   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+   */
+  function mapCacheHas$1(key) {
+    return getMapData$1(this, key).has(key);
+  }
+
+  var _mapCacheHas = mapCacheHas$1;
+
+  var getMapData = _getMapData;
+
+  /**
+   * Sets the map `key` to `value`.
+   *
+   * @private
+   * @name set
+   * @memberOf MapCache
+   * @param {string} key The key of the value to set.
+   * @param {*} value The value to set.
+   * @returns {Object} Returns the map cache instance.
+   */
+  function mapCacheSet$1(key, value) {
+    var data = getMapData(this, key),
+        size = data.size;
+
+    data.set(key, value);
+    this.size += data.size == size ? 0 : 1;
+    return this;
+  }
+
+  var _mapCacheSet = mapCacheSet$1;
+
+  var mapCacheClear = _mapCacheClear,
+      mapCacheDelete = _mapCacheDelete,
+      mapCacheGet = _mapCacheGet,
+      mapCacheHas = _mapCacheHas,
+      mapCacheSet = _mapCacheSet;
+
+  /**
+   * Creates a map cache object to store key-value pairs.
+   *
+   * @private
+   * @constructor
+   * @param {Array} [entries] The key-value pairs to cache.
+   */
+  function MapCache$1(entries) {
+    var index = -1,
+        length = entries == null ? 0 : entries.length;
+
+    this.clear();
+    while (++index < length) {
+      var entry = entries[index];
+      this.set(entry[0], entry[1]);
+    }
+  }
+
+  // Add methods to `MapCache`.
+  MapCache$1.prototype.clear = mapCacheClear;
+  MapCache$1.prototype['delete'] = mapCacheDelete;
+  MapCache$1.prototype.get = mapCacheGet;
+  MapCache$1.prototype.has = mapCacheHas;
+  MapCache$1.prototype.set = mapCacheSet;
+
+  var _MapCache = MapCache$1;
+
+  var MapCache = _MapCache;
+
+  /** Error message constants. */
+  var FUNC_ERROR_TEXT = 'Expected a function';
+
+  /**
+   * Creates a function that memoizes the result of `func`. If `resolver` is
+   * provided, it determines the cache key for storing the result based on the
+   * arguments provided to the memoized function. By default, the first argument
+   * provided to the memoized function is used as the map cache key. The `func`
+   * is invoked with the `this` binding of the memoized function.
+   *
+   * **Note:** The cache is exposed as the `cache` property on the memoized
+   * function. Its creation may be customized by replacing the `_.memoize.Cache`
+   * constructor with one whose instances implement the
+   * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)
+   * method interface of `clear`, `delete`, `get`, `has`, and `set`.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Function
+   * @param {Function} func The function to have its output memoized.
+   * @param {Function} [resolver] The function to resolve the cache key.
+   * @returns {Function} Returns the new memoized function.
+   * @example
+   *
+   * var object = { 'a': 1, 'b': 2 };
+   * var other = { 'c': 3, 'd': 4 };
+   *
+   * var values = _.memoize(_.values);
+   * values(object);
+   * // => [1, 2]
+   *
+   * values(other);
+   * // => [3, 4]
+   *
+   * object.a = 2;
+   * values(object);
+   * // => [1, 2]
+   *
+   * // Modify the result cache.
+   * values.cache.set(object, ['a', 'b']);
+   * values(object);
+   * // => ['a', 'b']
+   *
+   * // Replace `_.memoize.Cache`.
+   * _.memoize.Cache = WeakMap;
+   */
+  function memoize$1(func, resolver) {
+    if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
+      throw new TypeError(FUNC_ERROR_TEXT);
+    }
+    var memoized = function() {
+      var args = arguments,
+          key = resolver ? resolver.apply(this, args) : args[0],
+          cache = memoized.cache;
+
+      if (cache.has(key)) {
+        return cache.get(key);
+      }
+      var result = func.apply(this, args);
+      memoized.cache = cache.set(key, result) || cache;
+      return result;
+    };
+    memoized.cache = new (memoize$1.Cache || MapCache);
+    return memoized;
+  }
+
+  // Expose `MapCache`.
+  memoize$1.Cache = MapCache;
+
+  var memoize_1 = memoize$1;
+
+  var memoize = memoize_1;
+
+  /** Used as the maximum memoize cache size. */
+  var MAX_MEMOIZE_SIZE = 500;
+
+  /**
+   * A specialized version of `_.memoize` which clears the memoized function's
+   * cache when it exceeds `MAX_MEMOIZE_SIZE`.
+   *
+   * @private
+   * @param {Function} func The function to have its output memoized.
+   * @returns {Function} Returns the new memoized function.
+   */
+  function memoizeCapped$1(func) {
+    var result = memoize(func, function(key) {
+      if (cache.size === MAX_MEMOIZE_SIZE) {
+        cache.clear();
+      }
+      return key;
+    });
+
+    var cache = result.cache;
+    return result;
+  }
+
+  var _memoizeCapped = memoizeCapped$1;
+
+  var memoizeCapped = _memoizeCapped;
+
+  /** Used to match property names within property paths. */
+  var rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
+
+  /** Used to match backslashes in property paths. */
+  var reEscapeChar = /\\(\\)?/g;
+
+  /**
+   * Converts `string` to a property path array.
+   *
+   * @private
+   * @param {string} string The string to convert.
+   * @returns {Array} Returns the property path array.
+   */
+  memoizeCapped(function(string) {
+    var result = [];
+    if (string.charCodeAt(0) === 46 /* . */) {
+      result.push('');
+    }
+    string.replace(rePropName, function(match, number, quote, subString) {
+      result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match));
+    });
+    return result;
+  });
+
+  var Symbol$1 = _Symbol;
+
+  /** Used to convert symbols to primitives and strings. */
+  var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined;
+      symbolProto ? symbolProto.toString : undefined;
+
   exports.ADVANCE_PICKER = ADVANCE_PICKER;
   exports.Accordion = Accordion;
   exports.AccordionContent = AccordionContent;
@@ -26395,7 +27986,7 @@
   exports.BannerDescription = BannerDescription;
   exports.BannerLink = BannerLink;
   exports.BannerTitle = BannerTitle;
-  exports.Box = Box$1;
+  exports.Box = Box;
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
   exports.BreadcrumbLink = BreadcrumbLink;
@@ -26453,10 +28044,12 @@
   exports.GridItem = GridItem;
   exports.Heading = Heading;
   exports.IconButton = IconButton;
+  exports.IconContainer = IconContainer;
   exports.Image = Image;
   exports.ImageDevicePreview = ImageDevicePreview;
   exports.InputCheckbox = InputCheckbox;
   exports.InputColorPicker = InputColorPicker;
+  exports.InputCombobox = InputCombobox;
   exports.InputCreatable = InputCreatable;
   exports.InputDatePicker = InputDatePicker;
   exports.InputGroup = InputGroup;
@@ -26490,6 +28083,7 @@
   exports.ModalDialogTrigger = ModalDialogTrigger;
   exports.NativeTimePicker = NativeTimePicker;
   exports.NotificationBadge = NotificationBadge;
+  exports.OptionWrapper = OptionWrapper$2;
   exports.PageContainer = PageContainer;
   exports.PageDialog = PageDialog;
   exports.PageDialogContent = PageDialogContent;
@@ -26513,6 +28107,12 @@
   exports.RowMenuColumn = rowMenuColumn;
   exports.RowSelectionColumn = rowSelectionColumn;
   exports.SINGLE_PICKER = SINGLE_PICKER;
+  exports.Select = Select$1;
+  exports.SelectBox = SelectBox;
+  exports.SelectContainer = SelectContainer;
+  exports.SelectInputSearch = SelectInputSearch;
+  exports.SelectItem = SelectItem;
+  exports.SelectOption = SelectOption;
   exports.Separator = Separator$2;
   exports.Slider = Slider;
   exports.StepWizard = StepWizard;