@majoo-ui/react 1.45.1 → 1.46.1-rc.1

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, cloneElement, useCallback, useReducer, createElement as createElement$2 } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, createElement as createElement$2, cloneElement, useCallback, useReducer } from 'react';
 import PropTypes, { string, func } from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -37,6 +37,7 @@ import * as color from 'react-color/lib/helpers/color';
 import StepWizard$1 from 'react-step-wizard';
 import ScrollSpy from 'react-ui-scrollspy';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
+import request from 'superagent';
 import { useSticky } from 'react-table-sticky';
 
 var _jsxFileName$12 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
@@ -206,7 +207,7 @@ var isCallable$p = function (argument) {
 
 var isCallable$o = isCallable$p;
 
-var isObject$a = function (it) {
+var isObject$d = function (it) {
   return typeof it == 'object' ? it !== null : isCallable$o(it);
 };
 
@@ -331,7 +332,7 @@ var getMethod$6 = function (V, P) {
 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;
 
@@ -339,9 +340,9 @@ var TypeError$h = global$M.TypeError;
 // 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");
 };
 
@@ -396,13 +397,13 @@ var toObject$7 = function (argument) {
 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;
@@ -423,15 +424,15 @@ var NATIVE_SYMBOL$1 = nativeSymbol;
 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 {
@@ -442,7 +443,7 @@ var wellKnownSymbol$l = function (name) {
 
 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;
@@ -454,13 +455,13 @@ var TO_PRIMITIVE = wellKnownSymbol$k('toPrimitive');
 // `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';
@@ -478,11 +479,11 @@ var toPropertyKey$3 = function (argument) {
 };
 
 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) : {};
@@ -539,14 +540,14 @@ var v8PrototypeDefineBug = DESCRIPTORS$c && fails$m(function () {
 });
 
 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');
 };
 
@@ -663,7 +664,7 @@ var hiddenKeys$4 = {};
 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;
@@ -682,7 +683,7 @@ var enforce = function (it) {
 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;
   };
@@ -2038,7 +2039,7 @@ $$g({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
 // 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;
 
@@ -2048,7 +2049,7 @@ var MATCH$2 = wellKnownSymbol$c('match');
 // 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;
@@ -2099,8 +2100,8 @@ $$f({ target: 'String', proto: true, forced: !correctIsRegExpLogic$1('includes')
   }
 });
 
-const Box$1 = styled('div');
-Box$1.displayName = 'Box';
+const Box = styled('div');
+Box.displayName = 'Box';
 
 function seqNumberVariants(variantFn, max) {
   var _a;
@@ -2231,7 +2232,7 @@ Flex$1.defaultProps = {
 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',
@@ -2461,7 +2462,7 @@ const GridItem = _ref2 => {
   let {
     children
   } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
 
   return /*#__PURE__*/React__default.createElement(GridItemComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -3469,6 +3470,17 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
     columnNumber: 3
   }
 }), props.children);
+BannerTitle.propTypes = {
+  /**
+   Additional styles of title
+  */
+  css: PropTypes.object,
+
+  /**
+   Title of the Banner to be displayed
+  */
+  children: PropTypes.string
+};
 const BannerDescription = props => /*#__PURE__*/React.createElement(Description, _extends({
   paragraph: "longContentRegular",
   color: "secondary"
@@ -3476,10 +3488,21 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 97,
+    lineNumber: 108,
     columnNumber: 3
   }
 }), props.children);
+BannerDescription.propTypes = {
+  /**
+   Additional styles of description
+  */
+  css: PropTypes.object,
+
+  /**
+   Description of the Banner to be displayed
+  */
+  children: PropTypes.string
+};
 const BannerLink = ({
   link,
   children,
@@ -3488,7 +3511,7 @@ const BannerLink = ({
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 103,
+    lineNumber: 125,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(Link, {
@@ -3500,15 +3523,34 @@ const BannerLink = ({
   __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.string,
+
+  /**
+   Text of BannerLink to be displayed
+  */
+  children: PropTypes.string,
+
+  /**
+   Additional theme of BannerLink is presented by color variants
+  */
+  variant: PropTypes.oneOf(['info', 'warning', 'success', 'failed'])
+};
+BannerLink.defaultProps = {
+  children: 'Learn more'
+};
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 117,
+    lineNumber: 154,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3520,7 +3562,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 119,
+    lineNumber: 156,
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3529,7 +3571,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 126,
+    lineNumber: 163,
     columnNumber: 9
   }
 })));
@@ -3539,7 +3581,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 134,
+      lineNumber: 171,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3549,7 +3591,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 135,
+      lineNumber: 172,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3562,21 +3604,21 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 136,
+      lineNumber: 173,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 144,
+      lineNumber: 181,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 145,
+      lineNumber: 182,
       columnNumber: 33
     }
   }, props.description)), props.link && /*#__PURE__*/React.createElement(BannerLink, {
@@ -3585,7 +3627,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 148,
+      lineNumber: 185,
       columnNumber: 11
     }
   }, props.linkText)), /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3598,7 +3640,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 153,
+      lineNumber: 190,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3607,7 +3649,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 161,
+      lineNumber: 198,
       columnNumber: 9
     }
   })));
@@ -3636,7 +3678,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 169,
+      lineNumber: 206,
       columnNumber: 5
     }
   }), children ? /*#__PURE__*/React.createElement(Flex$1, {
@@ -3653,7 +3695,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 171,
+      lineNumber: 208,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(Context$2.Provider, {
@@ -3664,7 +3706,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 178,
+      lineNumber: 215,
       columnNumber: 11
     }
   }, children)) : /*#__PURE__*/React.createElement(SingleTagBanner, {
@@ -3678,7 +3720,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 181,
+      lineNumber: 218,
       columnNumber: 9
     }
   }));
@@ -3688,13 +3730,44 @@ Banner.displayName = 'Banner';
 BannerTitle.displayName = 'BannerTitle';
 BannerDescription.displayName = 'BannerDescription';
 Banner.propTypes = {
+  /**
+   Title of banner to be displayed
+  */
   title: PropTypes.string,
+
+  /**
+   Description of banner to be displayed
+  */
   description: PropTypes.string,
-  variant: PropTypes.string,
+
+  /**
+   The banner theme is presented in color variants
+  */
+  variant: PropTypes.oneOf(['info', 'warning', 'success', 'failed']),
+
+  /**
+   The purpose of a clickable link, presented in url
+  */
   link: PropTypes.string,
+
+  /**
+   Text of button link to be displayed
+  */
   linkText: PropTypes.string,
+
+  /**
+   Clickable event handler
+  */
   onClick: PropTypes.func,
+
+  /**
+   Closable event handler
+  */
   onRemove: PropTypes.func,
+
+  /**
+  Block type banner to display in full width
+  */
   bannerBlock: PropTypes.bool
 };
 Banner.defaultProps = {
@@ -6207,7 +6280,7 @@ InputNumber.name = 'InputText';
 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
@@ -6219,7 +6292,7 @@ var inheritIfRequired$1 = function ($this, dummy, Wrapper) {
     // 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;
@@ -6955,7 +7028,7 @@ const Input$6 = styled('input', {
     }
   }
 });
-const TagWrapper$2 = styled(Box$1, {
+const TagWrapper$2 = styled(Box, {
   display: 'flex',
   position: 'relative',
   flexWrap: 'wrap',
@@ -7584,9 +7657,10 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-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',
@@ -7602,7 +7676,7 @@ const Box = styled('div', {
   color: '$textPrimary',
   width: '100%'
 });
-const BoxSelect = styled('div', {
+const SelectBox = styled('div', {
   margin: 0,
   display: 'flex',
   position: 'relative',
@@ -7800,7 +7874,107 @@ const StyledText$1 = {
   overflow: 'hidden',
   textOverflow: 'clip'
 };
-function Select$1(_ref) {
+const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
+  let {
+    showLeadingIcon = true,
+    disabled,
+    placeholder,
+    readOnly,
+    inputProps,
+    handleInputValue,
+    noStyling
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+
+  const inputRef = React.useRef(null);
+  return /*#__PURE__*/React.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.createElement(InputLeftElement, {
+    children: showLeadingIcon && /*#__PURE__*/React.createElement(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.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.createElement(InputRightElement, {
+    children: (inputProps.value || '').length > 0 && !disabled ? /*#__PURE__*/React.createElement(CloseFilled, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 262,
+        columnNumber: 72
+      }
+    }) : /*#__PURE__*/React.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,
@@ -7822,13 +7996,12 @@ function Select$1(_ref) {
     readOnly,
     isInvalid,
     noOptionIcon
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
 
   const [options, setOptions] = React.useState(option || []);
   const [item, setItem] = React.useState(option || []);
   const [selectedValue, setSelectedValue] = React.useState(value);
-  const inputRef = React.useRef(null);
 
   const handleInputValue = (value, isReset) => {
     if (onSearch && !isReset) onSearch(value);
@@ -7880,7 +8053,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 290,
+      lineNumber: 353,
       columnNumber: 5
     }
   }), ({
@@ -7912,7 +8085,7 @@ function Select$1(_ref) {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 319,
+          lineNumber: 382,
           columnNumber: 13
         }
       }), /*#__PURE__*/React.createElement(CaretDownOutline, {
@@ -7920,47 +8093,21 @@ function Select$1(_ref) {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 324,
+          lineNumber: 387,
           columnNumber: 15
         }
       }));
     };
 
-    const renderInputSearchBox = () => !search && embedSearch && isOpen && /*#__PURE__*/React.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.createElement(InputSearchbox, {
-      size: size,
-      onChange: handleInputValue,
-      placeholder: searchPlaceholder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$B,
-        lineNumber: 342,
-        columnNumber: 15
-      }
-    }));
-
-    return /*#__PURE__*/React.createElement(Box, {
+    return /*#__PURE__*/React.createElement(SelectContainer, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 347,
+        lineNumber: 393,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
+    }, /*#__PURE__*/React.createElement(SelectBox, _extends({}, getRootProps({}, {
       suppressRefError: true
     }), {
       size: size,
@@ -7970,101 +8117,35 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 348,
+        lineNumber: 394,
         columnNumber: 13
       }
-    }), search ? /*#__PURE__*/React.createElement(Box$1, {
+    }), search ? /*#__PURE__*/React.createElement(Box, {
       style: {
         width: '100%'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 356,
+        lineNumber: 402,
         columnNumber: 17
       }
-    }, icon ? /*#__PURE__*/React.createElement(InputGroup, {
-      css: {
-        height: '100%',
-        border: 'none',
-        '&:hover': {
-          border: 'none'
-        }
-      },
+    }, icon ? /*#__PURE__*/React.createElement(SelectInputSearch, {
       disabled: disabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$B,
-        lineNumber: 358,
-        columnNumber: 21
-      }
-    }, /*#__PURE__*/React.createElement(InputLeftElement, {
-      children: /*#__PURE__*/React.createElement(SearchOutline, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 368,
-          columnNumber: 51
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$B,
-        lineNumber: 368,
-        columnNumber: 23
-      }
-    }), /*#__PURE__*/React.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.createElement(InputRightElement, {
-      children: getInputProps().value.length > 0 ? /*#__PURE__*/React.createElement(CloseFilled, {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$B,
-          lineNumber: 380,
-          columnNumber: 70
-        }
-      }) : /*#__PURE__*/React.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.createElement(Input$5, _extends({
+    }) : /*#__PURE__*/React.createElement(Input$5, _extends({
       placeholder: placeholder,
       disabled: disabled,
       readOnly: readOnly
@@ -8075,7 +8156,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 397,
+        lineNumber: 412,
         columnNumber: 21
       }
     }))) : /*#__PURE__*/React.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -8087,7 +8168,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 406,
+        lineNumber: 421,
         columnNumber: 17
       }
     }), selectedItem ? /*#__PURE__*/React.createElement(Text$1, {
@@ -8096,7 +8177,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 413,
+        lineNumber: 428,
         columnNumber: 21
       }
     }, selectedItem.render ? selectedItem.render() : selectedItem.name) : /*#__PURE__*/React.createElement(Text$1, {
@@ -8105,7 +8186,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 417,
+        lineNumber: 432,
         columnNumber: 21
       }
     }, placeholder)), handleDownOption()), /*#__PURE__*/React.createElement(OptionWrapper$2, _extends({}, getMenuProps(), {
@@ -8116,14 +8197,38 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 425,
+        lineNumber: 440,
         columnNumber: 13
       }
-    }), renderInputSearchBox(), item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, {
+    }), !search && embedSearch && isOpen && /*#__PURE__*/React.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.createElement(InputSearchbox, {
+      size: size,
+      onChange: handleInputValue,
+      placeholder: searchPlaceholder,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 451,
+        columnNumber: 19
+      }
+    })), item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$B,
+        lineNumber: 455,
         columnNumber: 17
       }
     }, item.map((item, index) => {
@@ -8146,7 +8251,7 @@ function Select$1(_ref) {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 430,
+          lineNumber: 457,
           columnNumber: 21
         }
       }), item.render ? item.render() : item.name);
@@ -8154,14 +8259,14 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 452,
+        lineNumber: 479,
         columnNumber: 17
       }
     }, /*#__PURE__*/React.createElement(StyledDiv$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 453,
+        lineNumber: 480,
         columnNumber: 19
       }
     }, /*#__PURE__*/React.createElement("div", {
@@ -8171,7 +8276,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 454,
+        lineNumber: 481,
         columnNumber: 21
       }
     }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -8183,7 +8288,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 455,
+        lineNumber: 482,
         columnNumber: 23
       }
     })), "Item tidak ditemukan"))));
@@ -8605,7 +8710,6 @@ const Select = styled('div', {
   margin: 0,
   display: 'flex',
   position: 'relative',
-  flexWrap: 'wrap',
   width: '100%',
   appearance: 'none',
   background: 'none',
@@ -8719,7 +8823,7 @@ const IconWrapper = styled('div', {
 const IconCaretDown = styled(CaretDownOutline, {
   size: '24px'
 });
-const TagWrapper$1 = styled(Box$1, {
+const TagWrapper$1 = styled(Box, {
   display: 'flex',
   position: 'relative',
   flexWrap: 'wrap',
@@ -8765,7 +8869,7 @@ const Option = styled('div', {
   maxHeight: '160px',
   height: 'auto'
 });
-const ItemWrapper$1 = styled(Box$1, {
+const ItemWrapper$1 = styled(Box, {
   display: 'flex',
   position: 'relative',
   flex: 'auto',
@@ -8996,7 +9100,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 401,
+      lineNumber: 400,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Select, {
@@ -9006,7 +9110,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 402,
+      lineNumber: 401,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9017,7 +9121,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 403,
+      lineNumber: 402,
       columnNumber: 9
     }
   }), search ? /*#__PURE__*/React.createElement(Input$4, _extends({}, getInputProps({
@@ -9028,7 +9132,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 408,
+      lineNumber: 407,
       columnNumber: 13
     }
   })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9039,7 +9143,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 414,
+      lineNumber: 413,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9050,7 +9154,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 423,
+      lineNumber: 422,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(IconCaretDown, {
@@ -9058,7 +9162,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 428,
+      lineNumber: 427,
       columnNumber: 11
     }
   }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
@@ -9066,7 +9170,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 432,
+      lineNumber: 431,
       columnNumber: 9
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
@@ -9090,7 +9194,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 434,
+      lineNumber: 433,
       columnNumber: 13
     }
   }), selectedItem.name))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
@@ -9102,14 +9206,14 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 455,
+      lineNumber: 454,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 460,
+      lineNumber: 459,
       columnNumber: 11
     }
   }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper$1, _extends({
@@ -9127,7 +9231,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 463,
+      lineNumber: 462,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(IconWrapper, {
@@ -9140,7 +9244,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 476,
+      lineNumber: 475,
       columnNumber: 19
     }
   }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
@@ -9148,7 +9252,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 485,
+      lineNumber: 484,
       columnNumber: 23
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
@@ -9156,7 +9260,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 489,
+      lineNumber: 488,
       columnNumber: 25
     }
   })), /*#__PURE__*/React.createElement(Item$2, {
@@ -9166,7 +9270,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 493,
+      lineNumber: 492,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, _extends({
@@ -9177,14 +9281,14 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 498,
+      lineNumber: 497,
       columnNumber: 11
     }
   }), /*#__PURE__*/React.createElement(StyledDiv$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 499,
+      lineNumber: 498,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -9194,7 +9298,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 500,
+      lineNumber: 499,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -9206,7 +9310,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$z,
-      lineNumber: 501,
+      lineNumber: 500,
       columnNumber: 17
     }
   })), textEmptyItem))));
@@ -9602,7 +9706,7 @@ function InputResourceList({
     }, `${resource.value}-${new Date().toISOString()}`);
   };
 
-  return jsxs(Box$1, Object.assign({
+  return jsxs(Box, Object.assign({
     css: Object.assign({
       position: 'relative'
     }, css)
@@ -9633,7 +9737,7 @@ function InputResourceList({
       }, {
         children: "Loading .... "
       }), void 0)
-    }), void 0), jsxs(Box$1, Object.assign({
+    }), void 0), jsxs(Box, Object.assign({
       css: {
         border: '1px solid $gray300',
         padding: '$spacing-05',
@@ -9699,7 +9803,7 @@ function InputResourceList({
           }), void 0)]
         }), void 0)
       }), void 0)]
-    }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsx(Box$1, Object.assign({
+    }), void 0), (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0 || checkedResources.length > 0) && jsx(Box, Object.assign({
       css: {
         marginTop: '$spacing-04'
       }
@@ -9714,10 +9818,81 @@ function InputResourceList({
   }), 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
+const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+    options: items = [],
+    defaultValue,
+    disabled,
+    placeholder = 'Select Item',
+    showLeadingIcon = false,
+    placement = 'bottom',
+    size = 'lg',
+    isInvalid,
+    css,
+    onValueChange
+  } = _a,
+      props = __rest(_a, ["options", "defaultValue", "disabled", "placeholder", "showLeadingIcon", "placement", "size", "isInvalid", "css", "onValueChange"]);
+
+  const [inputItems, setInputItems] = useState(items);
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps
+  } = useCombobox({
+    items: inputItems,
+    defaultInputValue: defaultValue,
+    onInputValueChange: ({
+      inputValue: _inputValue = ''
+    }) => {
+      if (onValueChange) onValueChange(_inputValue);
+      setInputItems(items.filter(item => item.toLowerCase().startsWith(_inputValue.toLowerCase())));
+    }
+  });
+  return jsxs(SelectContainer, Object.assign({
+    css: css
+  }, {
+    children: [jsx(SelectBox, Object.assign({}, getComboboxProps(), {
+      size: size,
+      disabled: disabled,
+      isInvalid: isInvalid
+    }, {
+      children: jsx(SelectInputSearch, Object.assign({
+        showLeadingIcon: showLeadingIcon,
+        disabled: disabled,
+        placeholder: placeholder,
+        inputProps: getInputProps()
+      }, props, {
+        ref: forwardedRef
+      }), void 0)
+    }), void 0), inputItems.length > 0 && jsx(OptionWrapper$2, Object.assign({}, getMenuProps(), {
+      css: {
+        display: isOpen ? 'block' : 'none'
+      },
+      placement: placement
+    }, {
+      children: jsx(SelectOption, {
+        children: inputItems.map((item, index) => /*#__PURE__*/createElement$2(SelectItem, Object.assign({}, getItemProps({
+          item,
+          index
+        }), {
+          key: `${item}${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
 } = foundations;
 const PopoverContext = /*#__PURE__*/createContext();
 const Popover = ({
@@ -10674,8 +10849,8 @@ var trim$1 = stringTrim.trim;
 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
@@ -10849,7 +11024,7 @@ const PaperComponent = styled('div', {
   height: 'auto',
   width: 'auto',
   borderRadius: '$lg',
-  position: 'relative',
+  // position: 'relative',
   backgroundColor: '$white',
   boxShadow: '0px 2px 12px #00000014'
 });
@@ -11508,7 +11683,7 @@ var setToStringTag$2 = setToStringTag$5;
 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;
@@ -11550,7 +11725,7 @@ var Internal, OwnPromiseCapability, PromiseWrapper, nativeThen;
 // 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) {
@@ -12068,12 +12243,12 @@ $$5({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR$1 }, {
 });
 
 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);
@@ -12232,7 +12407,7 @@ const ModalDialog = props => {
         isMobile: isMobile,
         onOpenAutoFocus: onOpenAutoFocus
       }, {
-        children: jsxs(Box$1, Object.assign({
+        children: jsxs(Box, Object.assign({
           css: {
             backgroundColor: '$white',
             display: 'flex',
@@ -12240,7 +12415,7 @@ const ModalDialog = props => {
             borderRadius: '$lg'
           }
         }, {
-          children: [jsx(Box$1, Object.assign({
+          children: [jsx(Box, Object.assign({
             css: {
               padding: '16px 24px',
               display: 'block',
@@ -12252,7 +12427,7 @@ const ModalDialog = props => {
               }
             }
           }, {
-            children: jsxs(Box$1, Object.assign({
+            children: jsxs(Box, Object.assign({
               css: {
                 justifyContent: 'space-between',
                 display: 'flex',
@@ -12273,7 +12448,7 @@ const ModalDialog = props => {
               }), void 0), jsx(DialogClose, Object.assign({
                 asChild: true
               }, {
-                children: jsx(Box$1, Object.assign({
+                children: jsx(Box, Object.assign({
                   css: {
                     display: 'flex',
                     justifyContent: 'center',
@@ -12288,13 +12463,13 @@ const ModalDialog = props => {
                 }), void 0)
               }), void 0)]
             }), void 0)
-          }), void 0), modalDialogContent && jsx(Box$1, Object.assign({}, modalDialogContent.props, {
+          }), void 0), modalDialogContent && jsx(Box, Object.assign({}, modalDialogContent.props, {
             css: Object.assign({
               flexGrow: 1,
               maxHeight: 'calc(100vh - 64px - 56px)',
               padding: '16px 24px'
             }, modalDialogContent.props.css)
-          }), void 0), modalDialogFooter && jsx(Box$1, Object.assign({}, modalDialogFooter.props, {
+          }), void 0), modalDialogFooter && jsx(Box, Object.assign({}, modalDialogFooter.props, {
             css: Object.assign({
               borderTop: '1px solid $gray150',
               padding: '16px 24px',
@@ -12943,13 +13118,13 @@ const ArrowButton$1 = styled('button', {
     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',
@@ -12963,7 +13138,7 @@ const CalendarsContainer$1 = styled(Box$1, {
   }
 });
 const CalendarItemContainer$1 = styled(Flex$1, {});
-const DateContainer$1 = styled(Box$1, {
+const DateContainer$1 = styled(Box, {
   width: '100%',
   position: 'relative',
   display: 'inline-block',
@@ -13226,7 +13401,7 @@ const CalendarBox = ({
         lineNumber: 362,
         columnNumber: 13
       }
-    }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default.createElement(Box$1, {
+    }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default.createElement(Box, {
       css: {
         size: '32px'
       },
@@ -13260,7 +13435,7 @@ const CalendarBox = ({
         lineNumber: 384,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box, {
       css: {
         size: '32px'
       },
@@ -13464,7 +13639,7 @@ const CalendarBox = ({
   };
 
   const renderFooter = () => {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$o,
@@ -13545,7 +13720,7 @@ const CalendarBox = ({
   };
 
   const renderTime = () => {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       css: {
         padding: 4
       },
@@ -13580,7 +13755,7 @@ const CalendarBox = ({
   };
 
   const renderButtonTime = () => {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       css: {
         padding: 4
       },
@@ -13631,7 +13806,7 @@ const CalendarBox = ({
         lineNumber: 672,
         columnNumber: 25
       }
-    }), /*#__PURE__*/React__default.createElement(Box$1, {
+    }), /*#__PURE__*/React__default.createElement(Box, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$o,
@@ -13748,7 +13923,7 @@ const ArrowButton = styled('button', {
     cursor: 'default'
   }
 });
-const WeekdayBox = styled(Box$1, {
+const WeekdayBox = styled(Box, {
   display: 'inline-block',
   width: '45.5px',
   textAlign: 'center',
@@ -13757,7 +13932,7 @@ const WeekdayBox = styled(Box$1, {
     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)',
@@ -13766,7 +13941,7 @@ const DatePickerContainer = styled(Box$1, {
     width: 'unset'
   }
 });
-const CalendarsContainer = styled(Box$1, {
+const CalendarsContainer = styled(Box, {
   width: '100%',
   overflow: 'auto',
   padding: '$spacing-02 20px $spacing-05',
@@ -13791,7 +13966,7 @@ const CalendarItemContainer = styled(Flex$1, {
   height: '100%',
   paddingBottom: '160px'
 });
-const DateContainer = styled(Box$1, {
+const DateContainer = styled(Box, {
   width: '100%',
   position: 'relative',
   display: 'inline-block',
@@ -14401,6 +14576,7 @@ const Container$4 = styled(Flex$1, {
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
   width: 200,
   height: 130,
+  backgroundColor: '$bgWhite',
   variants: {
     size: {
       sm: {
@@ -14415,6 +14591,11 @@ const Container$4 = styled(Flex$1, {
         width: 219,
         height: 146
       }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
     }
   }
 });
@@ -14423,6 +14604,17 @@ const IconUp = styled(ChevronUpOutline, {
   borderRadius: 6,
   '&:hover': {
     background: '$bgSuccess'
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        backgroundColor: '$btnDisable',
+        '&:hover': {
+          background: '$btnDisable'
+        }
+      }
+    }
   }
 });
 const IconDown = styled(ChevronDownOutline, {
@@ -14430,6 +14622,17 @@ const IconDown = styled(ChevronDownOutline, {
   borderRadius: 6,
   '&:hover': {
     background: '$bgSuccess'
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        backgroundColor: '$btnDisable',
+        '&:hover': {
+          background: '$btnDisable'
+        }
+      }
+    }
   }
 });
 
@@ -14441,23 +14644,23 @@ const IconStateFull$1 = props => {
   }
 
   return props.type === 'up' ? /*#__PURE__*/React__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.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
     }
   }));
@@ -14467,7 +14670,8 @@ const NativeTimePicker = ({
   size,
   onChange,
   defaultValue,
-  value
+  value,
+  disabled
 }) => {
   const [date, setDate] = useState(value ? value : defaultValue ? defaultValue : moment());
   const format = 'HH:mm';
@@ -14482,11 +14686,15 @@ const NativeTimePicker = ({
   }
 
   function handleUp(type) {
-    type === 'hour' ? setNewDate(moment(date).add(1, 'hours')) : setNewDate(moment(date).add(1, 'minutes'));
+    if (!disabled) {
+      type === 'hour' ? setNewDate(moment(date).add(1, 'hours')) : setNewDate(moment(date).add(1, 'minutes'));
+    }
   }
 
   function handleDown(type) {
-    type === 'hour' ? setNewDate(moment(date).subtract(1, 'hours')) : setNewDate(moment(date).subtract(1, 'minutes'));
+    if (!disabled) {
+      type === 'hour' ? setNewDate(moment(date).subtract(1, 'hours')) : setNewDate(moment(date).subtract(1, 'minutes'));
+    }
   }
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14500,7 +14708,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 112,
+      lineNumber: 149,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14509,25 +14717,27 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 113,
+      lineNumber: 150,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__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.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.createElement(Input$2, {
@@ -14538,7 +14748,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 117,
+      lineNumber: 154,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -14546,7 +14756,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 118,
+      lineNumber: 155,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14555,72 +14765,121 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 119,
+      lineNumber: 156,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__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.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.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   Change handler.
+  */
+  onChange: PropTypes.func,
+
+  /**
+   Time picker default value, support moment format.
+  */
+  defaultValue: PropTypes.instanceOf(Date),
+
+  /**
+   Time picker value, support moment format.
+  */
+  value: PropTypes.instanceOf(Date)
+};
 const TimePicker = ({
   size,
   onChange,
   defaultValue,
-  value
+  value,
+  disabled,
+  css
 }) => {
   return /*#__PURE__*/React__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.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.object,
+
+  /**
+   Resize time picker.
+  */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   Change handler.
+  */
   onChange: PropTypes.func,
+
+  /**
+   Time picker default value, support moment format.
+  */
   defaultValue: PropTypes.instanceOf(Date),
-  value: PropTypes.instanceOf(Date)
+
+  /**
+   Time picker value, support moment format.
+  */
+  value: PropTypes.instanceOf(Date),
+  disabled: PropTypes.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().format('HH:mm');
+  if (!date) return;
   return moment(date).format('HH:mm');
 };
 
@@ -14631,18 +14890,26 @@ function InputTimePicker({
   value,
   placeholder,
   placement,
-  css
+  css,
+  disabled
 }) {
   const [openPicker, setOpenPicker] = 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.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.createElement(InputLeftElement, {
@@ -14650,14 +14917,14 @@ function InputTimePicker({
       __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.createElement(InputText, {
@@ -14669,20 +14936,21 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 25,
+      lineNumber: 31,
       columnNumber: 7
     }
   }));
 
-  const renderDatePicker = () => /*#__PURE__*/React__default.createElement(TimePicker, {
+  const renderTimePicker = () => /*#__PURE__*/React__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
     }
   });
@@ -14694,47 +14962,55 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 40,
+      lineNumber: 46,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+  }, disabled ? /*#__PURE__*/React__default.createElement(Box, {
+    css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 41,
-      columnNumber: 7
+      lineNumber: 48,
+      columnNumber: 9
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
-    css: css,
+  }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 42,
+      lineNumber: 50,
       columnNumber: 9
     }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    css: css,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$l,
+      lineNumber: 51,
+      columnNumber: 11
+    }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 44,
+      lineNumber: 54,
       columnNumber: 7
     }
-  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 48,
+      lineNumber: 58,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__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.createElement(DrawerContent, {
@@ -14745,10 +15021,22 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 50,
+      lineNumber: 60,
       columnNumber: 9
     }
-  }, renderDatePicker())));
+  }, /*#__PURE__*/React__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 = {
@@ -14756,13 +15044,41 @@ InputTimePicker.defaultProps = {
   placeholder: 'Select Time'
 };
 InputTimePicker.propTypes = {
+  /**
+   Additional styles.
+  */
+  css: PropTypes.object,
+  disabled: PropTypes.bool,
+
+  /**
+   Resize time picker.
+  */
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  onChange: PropTypes.func,
+
+  /**
+   Custom placeholder input time picker.
+  */
+  placeholder: PropTypes.string,
+
+  /**
+   Time picker default value, support moment format.
+  */
   defaultValue: PropTypes.instanceOf(Date),
+
+  /**
+   Time picker value, support moment format.
+  */
   value: PropTypes.instanceOf(Date),
-  placeholder: PropTypes.string,
-  placement: PropTypes.string,
-  css: PropTypes.object
+
+  /**
+   Change handler.
+  */
+  onChange: PropTypes.func,
+
+  /**
+   Placement popover input time picker.
+  */
+  placement: PropTypes.string
 };
 InputTimePicker.displayName = 'InputTimePicker';
 
@@ -14823,7 +15139,7 @@ const CalendarPicker = _ref => {
   }, [dateValue]);
 
   const timePicker = () => {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       css: {
         padding: '50px 95px'
       },
@@ -15165,13 +15481,20 @@ function InputDatePicker({
   }, [date]);
   const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
+  function handleChange() {
+    if (!disabled) {
+      setOpenPicker(!openPicker);
+    }
+  }
+
   const renderInputGroup = () => /*#__PURE__*/React__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.createElement(InputLeftElement, {
@@ -15179,14 +15502,14 @@ function InputDatePicker({
       __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.createElement(InputText, {
@@ -15199,7 +15522,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 126,
+      lineNumber: 133,
       columnNumber: 7
     }
   }));
@@ -15214,7 +15537,7 @@ function InputDatePicker({
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 141,
+        lineNumber: 148,
         columnNumber: 11
       }
     }) : {
@@ -15239,7 +15562,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 137,
+      lineNumber: 144,
       columnNumber: 5
     }
   });
@@ -15251,47 +15574,55 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 162,
+      lineNumber: 169,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+  }, disabled ? /*#__PURE__*/React__default.createElement(Box, {
+    css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 163,
-      columnNumber: 7
+      lineNumber: 171,
+      columnNumber: 9
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
-    css: css,
+  }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 164,
+      lineNumber: 173,
       columnNumber: 9
     }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    css: css,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$j,
+      lineNumber: 174,
+      columnNumber: 11
+    }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 166,
+      lineNumber: 177,
       columnNumber: 7
     }
-  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 170,
+      lineNumber: 181,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__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.createElement(DrawerContent, {
@@ -15302,7 +15633,7 @@ function InputDatePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 172,
+      lineNumber: 183,
       columnNumber: 9
     }
   }, renderDatePicker())));
@@ -15541,7 +15872,7 @@ const PaginationButton = ({
       lineNumber: 152,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       display: 'flex',
       alignItems: 'center',
@@ -15765,7 +16096,7 @@ function Pagination(_ref) {
       lineNumber: 14,
       columnNumber: 9
     }
-  }) : /*#__PURE__*/React__default.createElement(Box$1, {
+  }) : /*#__PURE__*/React__default.createElement(Box, {
     __self: this,
     __source: {
       fileName: _jsxFileName$g,
@@ -15841,6 +16172,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   footer,
   infiniteScrollWrapper,
   isLoading,
+  rowGroup,
   css
 }, ref) => {
   const {
@@ -15851,7 +16183,10 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
     page,
     prepareRow,
     state,
-    toggleAllRowsExpanded
+    toggleAllRowsExpanded,
+    state: {
+      sortBy
+    }
   } = instance;
   return jsx(TableContainer$3, Object.assign({
     css: css,
@@ -15884,10 +16219,21 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
       }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: page.map(row => {
           prepareRow(row);
+          const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
           return jsxs(React__default.Fragment, {
-            children: [jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
-              children: row.cells.map(cell => {
-                return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({}, row.getRowProps(), {
+              key: `${row.id}-group_header`
+            }), jsx(TableCell$3, Object.assign({
+              colSpan: 100
+            }, {
+              children: (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
+                variant: "contentButton"
+              }, {
+                children: row.cells[0].render('Cell')
+              }), void 0)
+            }), void 0)), jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
+              children: row.cells.map(cell => {
+                return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
                     justify: "between",
                     align: "center",
@@ -15933,7 +16279,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       }), void 0), cell.render('Cell')]
                     }), `${cell.column.id}-${row.id}`);
                   })
-                }), void 0), jsx(Flex$1, Object.assign({
+                }), void 0), actionCells && actionCells.length > 0 && jsx(Flex$1, Object.assign({
                   align: "center",
                   justify: "end",
                   gap: 3,
@@ -15941,7 +16287,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                     height: '40px'
                   }
                 }, {
-                  children: row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction).map(cell => cell.render('Cell'))
+                  children: actionCells.map(cell => cell.render('Cell'))
                 }), void 0)]
               }), void 0)
             }, void 0) : null]
@@ -16176,6 +16522,23 @@ const stickyPositionStyling = column => {
   return {};
 };
 
+const formattingData = (rawData, groupKey) => {
+  if (groupKey) {
+    rawData.forEach((item, index) => {
+      if (item[groupKey] && item[groupKey].length > 0) {
+        const newElement = item[groupKey].map((childItem, index) => Object.assign(Object.assign({}, childItem), {
+          isTopChild: index === 0,
+          parentOriginal: item
+        }));
+        rawData.splice(index, 1);
+        rawData.splice(index + 1, 0, ...newElement);
+      }
+    });
+  }
+
+  return rawData;
+};
+
 function Table({
   columns,
   data,
@@ -16193,7 +16556,8 @@ function Table({
   hasMoreItems = true,
   rowLimit = 10,
   cellAlign = 'center',
-  selectedIds
+  selectedIds,
+  rowGroup
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -16217,7 +16581,7 @@ function Table({
 
   const instance = useTable({
     columns,
-    data,
+    data: formattingData(data, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey),
     initialState: getInitialState(),
     manualPagination: !!fetchData,
     manualSortBy: !!fetchData,
@@ -16344,7 +16708,7 @@ function Table({
       });
     }
   }, [data, selectedIds]);
-  return jsxs(Box$1, Object.assign({
+  return jsxs(Box, Object.assign({
     css: {
       position: 'relative',
       width: `${css && css.width || '100%'}`,
@@ -16435,7 +16799,21 @@ function Table({
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
               return jsxs(React.Fragment, {
-                children: [jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
+                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
+                  key: `${row.id}-group_header`
+                }), jsx(TableCell$2, Object.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) : jsx(Text$1, Object.assign({
+                    variant: "contentButton"
+                  }, {
+                    children: row.cells[0].render('Cell')
+                  }), void 0)
+                }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map((cell, index) => jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                     css: Object.assign({
                       padding: cell.column.accessor ? '20px 8px' : '20px 20px',
@@ -16482,7 +16860,7 @@ function Table({
             })
           }), void 0)]
         }), void 0))
-      }), void 0), !isInfiniteScroll && jsx(Box$1, Object.assign({
+      }), void 0), !isInfiniteScroll && jsx(Box, Object.assign({
         css: {
           width: '100%'
         }
@@ -16511,6 +16889,7 @@ function Table({
       footer: renderFooter(),
       infiniteScrollWrapper: renderInfiniteScrollWrapper,
       isLoading: isLoading,
+      rowGroup: rowGroup,
       css: css
     }, void 0)]
   }), void 0);
@@ -16716,8 +17095,8 @@ var whitespaces = whitespaces$3;
 
 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)); }));
@@ -17285,7 +17664,7 @@ const rowMenuColumn = (options, icon, config) => ({
         lineNumber: 36,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box, {
       css: {
         display: 'none',
         '@md': {
@@ -17386,7 +17765,7 @@ const rowMenuColumn = (options, icon, config) => ({
         lineNumber: 77,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box, {
       css: {
         display: 'block',
         '@md': {
@@ -17430,7 +17809,7 @@ const rowMenuColumn = (options, icon, config) => ({
         lineNumber: 83,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box, {
       css: {
         display: 'flex',
         flexDirection: 'column',
@@ -17453,7 +17832,7 @@ const rowMenuColumn = (options, icon, config) => ({
         lineNumber: 86,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default.createElement(Box$1, {
+    }, /*#__PURE__*/React__default.createElement(Box, {
       type: "button",
       role: "button",
       onClick: () => {
@@ -17626,7 +18005,7 @@ const PageDialog = props => {
         ref: ref,
         onOpenAutoFocus: onOpenAutoFocus
       }, {
-        children: jsxs(Box$1, Object.assign({
+        children: jsxs(Box, Object.assign({
           css: {
             backgroundColor: isMobile ? '$white' : '$gray50',
             height: '100%',
@@ -17634,7 +18013,7 @@ const PageDialog = props => {
             flexDirection: 'column'
           }
         }, {
-          children: [jsxs(Box$1, Object.assign({
+          children: [jsxs(Box, Object.assign({
             css: {
               backgroundColor: '$white',
               padding: isMobile ? '24px 16px' : '4px 24px',
@@ -17646,7 +18025,7 @@ const PageDialog = props => {
               height: isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT
             }
           }, {
-            children: [jsxs(Box$1, Object.assign({
+            children: [jsxs(Box, Object.assign({
               css: {
                 justifyContent: isMobile ? 'flex-end' : 'flex-start',
                 flexDirection: isMobile ? 'row-reverse' : 'row',
@@ -17659,7 +18038,7 @@ const PageDialog = props => {
               children: [!isMobile && jsx(DialogClose, Object.assign({
                 asChild: true
               }, {
-                children: jsx(Box$1, Object.assign({
+                children: jsx(Box, Object.assign({
                   css: {
                     width: 48,
                     height: 48,
@@ -17688,7 +18067,7 @@ const PageDialog = props => {
               }), void 0), isMobile && jsx(DialogClose, Object.assign({
                 asChild: true
               }, {
-                children: jsx(Box$1, Object.assign({
+                children: jsx(Box, Object.assign({
                   css: {
                     display: 'flex',
                     justifyContent: 'center',
@@ -17701,7 +18080,7 @@ const PageDialog = props => {
                   }, void 0)
                 }), void 0)
               }), void 0)]
-            }), void 0), !isMobile && jsx(Box$1, Object.assign({
+            }), void 0), !isMobile && jsx(Box, Object.assign({
               css: {
                 position: 'absolute',
                 left: '50%',
@@ -17719,13 +18098,13 @@ const PageDialog = props => {
                 fallback: undefined
               }, void 0)
             }), void 0)]
-          }), void 0), pageDialogChildren && jsx(Box$1, Object.assign({}, pageDialogChildren.props, {
+          }), void 0), pageDialogChildren && jsx(Box, Object.assign({}, pageDialogChildren.props, {
             css: Object.assign({
               flexGrow: 1,
               maxHeight: footerChildren ? `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)` : `calc(100vh - ${isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px)`,
               overflow: 'auto'
             }, pageDialogChildren.props.css)
-          }), void 0), footerChildren && jsx(Box$1, Object.assign({}, footerChildren.props, {
+          }), void 0), footerChildren && jsx(Box, Object.assign({}, footerChildren.props, {
             css: Object.assign({
               boxShadow: '$small',
               backgroundColor: '$white',
@@ -17948,7 +18327,7 @@ const TemplateAlertFunction = props => {
       lineNumber: 131,
       columnNumber: 11
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: buttonClose,
     css: {
       cursor: 'pointer'
@@ -17992,7 +18371,7 @@ const TemplateAlertFunction = props => {
       lineNumber: 139,
       columnNumber: 11
     }
-  }, props.description)), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'absolute',
       bottom: 0,
@@ -18143,7 +18522,7 @@ function AlertDialog(props) {
       lineNumber: 191,
       columnNumber: 11
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: props.onCancel,
     css: {
       cursor: 'pointer'
@@ -18187,7 +18566,7 @@ function AlertDialog(props) {
       lineNumber: 199,
       columnNumber: 11
     }
-  }, props.description)), /*#__PURE__*/React__default.createElement(Box$1, {
+  }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'absolute',
       bottom: 0,
@@ -18909,7 +19288,7 @@ var hasOwn$1 = hasOwnProperty_1;
 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;
@@ -18949,7 +19328,7 @@ var join$1 = uncurryThis$1([].join);
 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);
 
@@ -19021,7 +19400,7 @@ var URLSearchParamsState = function (init) {
   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));
   }
 };
@@ -19117,7 +19496,7 @@ defineBuiltIns(URLSearchParamsPrototype, {
     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();
@@ -19173,7 +19552,7 @@ defineBuiltIns(URLSearchParamsPrototype, {
     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;
@@ -19238,7 +19617,7 @@ if (!USE_NATIVE_URL$1 && isCallable(Headers)) {
   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) {
@@ -20371,6 +20750,32 @@ function imgPreview(image, crop, scale = 1, rotate = 0) {
   });
 }
 
+function upload({
+  url,
+  file,
+  tokenKey,
+  token,
+  progress,
+  reqKey,
+  resKey
+}) {
+  const promise = new Promise((resolve, reject) => {
+    const formdata = new FormData();
+    formdata.append(reqKey, file);
+    request.post(url).set(tokenKey, token).send(formdata).on('progress', e => progress && progress(Math.round(e.percent))).end((err, res) => {
+      if (err) {
+        reject(err.message);
+      }
+
+      if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+        const 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'
@@ -20451,28 +20856,32 @@ const CheckIcon = styled(CheckFilled, {
 const IconStateFull = props => {
   const [isHover, setIsHover] = useState(false);
 
-  function toggleHover() {
-    setIsHover(!isHover);
+  function handleEnter() {
+    setIsHover(true);
+  }
+
+  function handleLeave() {
+    setIsHover(false);
   }
 
   return props.type === 'close' ? /*#__PURE__*/React__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.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
     }
   }));
@@ -20495,7 +20904,12 @@ const Upload = ({
   showCropper,
   accept,
   progress,
-  loading
+  loading,
+  action,
+  token,
+  tokenKey,
+  reqKey,
+  resKey
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -20574,7 +20988,18 @@ const Upload = ({
     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,
@@ -20601,20 +21026,97 @@ const Upload = ({
     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;
@@ -20751,7 +21253,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 382,
+        lineNumber: 481,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -20761,7 +21263,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 383,
+        lineNumber: 482,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -20777,7 +21279,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 393,
+            lineNumber: 492,
             columnNumber: 16
           }
         });
@@ -20785,20 +21287,21 @@ const Upload = ({
 
       return /*#__PURE__*/React__default.createElement(Container, {
         key: index,
+        error: item.status === 'error',
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 396,
+          lineNumber: 495,
           columnNumber: 9
         }
-      }, /*#__PURE__*/React__default.createElement(Box$1, {
+      }, /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'relative'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 397,
+          lineNumber: 496,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20807,10 +21310,10 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 398,
+          lineNumber: 497,
           columnNumber: 13
         }
-      }), /*#__PURE__*/React__default.createElement(Box$1, {
+      }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'absolute',
           top: '50%',
@@ -20820,7 +21323,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 399,
+          lineNumber: 498,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20829,7 +21332,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 407,
+          lineNumber: 506,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -20837,7 +21340,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 409,
+          lineNumber: 508,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -20854,7 +21357,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 420,
+            lineNumber: 519,
             columnNumber: 16
           }
         });
@@ -20865,17 +21368,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 423,
+          lineNumber: 522,
           columnNumber: 9
         }
-      }, /*#__PURE__*/React__default.createElement(Box$1, {
+      }, /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'relative'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 424,
+          lineNumber: 523,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20884,10 +21387,10 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 425,
+          lineNumber: 524,
           columnNumber: 13
         }
-      }), /*#__PURE__*/React__default.createElement(Box$1, {
+      }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
           position: 'absolute',
           top: '50%',
@@ -20897,7 +21400,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 426,
+          lineNumber: 525,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -20907,7 +21410,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 434,
+          lineNumber: 533,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
@@ -20915,7 +21418,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 435,
+          lineNumber: 534,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
@@ -20930,14 +21433,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 436,
+          lineNumber: 535,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 450,
+          lineNumber: 549,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -20953,7 +21456,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 461,
+        lineNumber: 560,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -20967,7 +21470,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 462,
+        lineNumber: 561,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -20993,7 +21496,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 463,
+        lineNumber: 562,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21001,14 +21504,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 476,
+        lineNumber: 575,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 477,
+        lineNumber: 576,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21021,7 +21524,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 485,
+        lineNumber: 584,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21036,7 +21539,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 486,
+        lineNumber: 585,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$1, {
@@ -21048,35 +21551,35 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 496,
+        lineNumber: 595,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 497,
+        lineNumber: 596,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 499,
+        lineNumber: 598,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 500,
+        lineNumber: 599,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 501,
+        lineNumber: 600,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21086,14 +21589,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 503,
+        lineNumber: 602,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 510,
+        lineNumber: 609,
         columnNumber: 26
       }
     }, errorMessage));
@@ -21104,7 +21607,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 517,
+        lineNumber: 616,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21112,7 +21615,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 518,
+        lineNumber: 617,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21120,7 +21623,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 519,
+        lineNumber: 618,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21133,7 +21636,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 521,
+        lineNumber: 620,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21144,7 +21647,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 524,
+        lineNumber: 623,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21155,7 +21658,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 525,
+        lineNumber: 624,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21168,14 +21671,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 526,
+        lineNumber: 625,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 529,
+        lineNumber: 628,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21187,7 +21690,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 530,
+        lineNumber: 629,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21195,7 +21698,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 531,
+        lineNumber: 630,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21207,7 +21710,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 532,
+        lineNumber: 631,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21215,7 +21718,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 538,
+        lineNumber: 637,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21224,7 +21727,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 539,
+        lineNumber: 638,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21232,7 +21735,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 542,
+        lineNumber: 641,
         columnNumber: 15
       }
     }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21248,7 +21751,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 553,
+      lineNumber: 652,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21257,7 +21760,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 556,
+      lineNumber: 655,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21269,7 +21772,10 @@ Upload.defaultProps = {
   height: 200,
   width: 200,
   cropperTitle: 'Potong Gambar',
-  showCropper: true
+  showCropper: true,
+  tokenKey: 'Token',
+  reqKey: 'file',
+  resKey: 'url'
 };
 Upload.propTypes = {
   /**
@@ -21355,7 +21861,32 @@ Upload.propTypes = {
   /**
    Add image cropper on upload.
    */
-  showCropper: PropTypes.bool
+  showCropper: PropTypes.bool,
+
+  /**
+   API upload url, allows components to automatically upload directly to API service.
+   */
+  action: PropTypes.string,
+
+  /**
+   Contains an authentication token for upload API.
+   */
+  token: PropTypes.string,
+
+  /**
+   Referencing the headers key to attach the token.
+   */
+  tokenKey: PropTypes.string,
+
+  /**
+   Referencing the key to attach the file to be sent.
+   */
+  reqKey: PropTypes.string,
+
+  /**
+   Referencing the key to get the file from the API response.
+   */
+  resKey: PropTypes.string
 };
 Upload.displayName = 'Upload';
 
@@ -21540,7 +22071,7 @@ const Device = props => {
         children: jsx(AspectRatioPrimitive.Root, Object.assign({
           ratio: properties.ratio
         }, {
-          children: props.carousel ? props === null || props === void 0 ? void 0 : props.children[currentImgIdx] : props.withComponent ? jsxs(Box$1, Object.assign({
+          children: props.carousel ? props === null || props === void 0 ? void 0 : props.children[currentImgIdx] : props.withComponent ? jsxs(Box, Object.assign({
             css: {
               height: '100%'
             }
@@ -21589,6 +22120,7 @@ const Separator$1 = styled('div', {
   backgroundColor: '$iconSecondary',
   marginRight: 4
 });
+
 function InputColorPicker(props) {
   const [isPopover, setIsPopover] = useState(false);
 
@@ -21609,11 +22141,11 @@ function InputColorPicker(props) {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 21,
+        lineNumber: 22,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
-      children: /*#__PURE__*/React__default.createElement(Box$1, {
+      children: /*#__PURE__*/React__default.createElement(Box, {
         css: {
           width: 16,
           height: 16,
@@ -21623,21 +22155,21 @@ function InputColorPicker(props) {
         __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.createElement(Separator$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 25,
+        lineNumber: 26,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(InputText, {
@@ -21647,7 +22179,7 @@ function InputColorPicker(props) {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 26,
+        lineNumber: 27,
         columnNumber: 9
       }
     }));
@@ -21658,7 +22190,7 @@ function InputColorPicker(props) {
       __self: this,
       __source: {
         fileName: _jsxFileName$8,
-        lineNumber: 32,
+        lineNumber: 33,
         columnNumber: 12
       }
     }));
@@ -21671,26 +22203,56 @@ function InputColorPicker(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 36,
+      lineNumber: 37,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 37,
+      lineNumber: 38,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__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.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /**
+   Additional color list.
+  */
+  presetColors: PropTypes.array,
+
+  /**
+   Change event handler.
+  */
+  onChange: PropTypes.func,
+
+  /**
+   Add preset color event handler.
+  */
+  onAddColor: PropTypes.func,
+
+  /**
+   Disable opacity selector.
+  */
+  disableAlpha: PropTypes.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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";
 
@@ -23726,7 +24288,7 @@ function ColorFields({
       lineNumber: 43,
       columnNumber: 9
     }
-  })), check === 'Hex' ? /*#__PURE__*/React__default.createElement(Box$1, {
+  })), check === 'Hex' ? /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'relative'
     },
@@ -23752,7 +24314,7 @@ function ColorFields({
       lineNumber: 47,
       columnNumber: 11
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'absolute',
       top: 5,
@@ -23813,7 +24375,7 @@ function ColorFields({
       lineNumber: 84,
       columnNumber: 11
     }
-  })), !disableAlpha && /*#__PURE__*/React__default.createElement(Box$1, {
+  })), !disableAlpha && /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'relative'
     },
@@ -23842,7 +24404,7 @@ function ColorFields({
       lineNumber: 96,
       columnNumber: 11
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'absolute',
       top: 5,
@@ -24362,14 +24924,29 @@ function ColorPicker({
 }
 
 ColorPicker.propTypes = {
-  hsl: PropTypes.object,
-  hsv: PropTypes.object,
-  rgb: PropTypes.object,
-  hex: PropTypes.string,
+  /**
+   Color code to be displayed.
+  */
+  color: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /**
+   Additional color list
+  */
   presetColors: PropTypes.array,
+
+  /**
+   Change event handler
+  */
   onChange: PropTypes.func,
-  onSwatchHover: PropTypes.func,
+
+  /**
+   Add preset color event handler
+  */
   onAddColor: PropTypes.func,
+
+  /**
+   Disable opacity selector
+  */
   disableAlpha: PropTypes.bool
 };
 ColorPicker.defaultProps = {
@@ -24711,22 +25288,23 @@ const Default = props => {
     }));
   };
 
-  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.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(Box, {
       id: "content-container",
       css: props.css,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 253,
+        lineNumber: 254,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.cloneElement(props.children, props));
@@ -24737,7 +25315,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 260,
+      lineNumber: 261,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -24758,7 +25336,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 261,
+      lineNumber: 262,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -24770,7 +25348,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 282,
+        lineNumber: 283,
         columnNumber: 16
       }
     }),
@@ -24779,7 +25357,7 @@ const Default = props => {
     __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.createElement(WrapperBox, {
@@ -24788,7 +25366,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 288,
+      lineNumber: 289,
       columnNumber: 15
     }
   }, child)) : /*#__PURE__*/React__default.createElement(WrapperBox, {
@@ -24796,7 +25374,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 293,
+      lineNumber: 294,
       columnNumber: 13
     }
   }, props.children))));
@@ -24825,7 +25403,7 @@ function Collapse({
       resizeObserver.disconnect();
     };
   }, [height, isOpen]);
-  return /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     css: {
       maxHeight: isOpen ? height : 25,
       overflow: 'hidden',
@@ -25083,7 +25661,7 @@ function TableOfContent({
       lineNumber: 162,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(Box$1, {
+  }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
       position: 'absolute',
       top: 8,
@@ -25167,7 +25745,7 @@ function Collapalse({
       resizeObserver.disconnect();
     };
   }, [height, isOpen]);
-  return /*#__PURE__*/React__default.createElement(Box$1, {
+  return /*#__PURE__*/React__default.createElement(Box, {
     css: {
       maxHeight: isOpen ? height : 0,
       overflow: 'hidden',
@@ -25180,7 +25758,7 @@ function Collapalse({
       lineNumber: 19,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React__default.createElement(Box$1, {
+  }, /*#__PURE__*/React__default.createElement(Box, {
     ref: contentRef,
     __self: this,
     __source: {
@@ -25333,7 +25911,7 @@ function EditableTableMobile(props) {
                   row.toggleRowExpanded(!row.isExpanded);
                 }
               }, {
-                children: [jsx(Box$1, {
+                children: [jsx(Box, {
                   children: cell.render('Cell')
                 }, void 0), jsx(Flex$1, Object.assign({
                   justify: "center",
@@ -25757,7 +26335,7 @@ function EditableTable(props) {
                     maxWidth: cell.column.maxWidth
                   }
                 }), {
-                  children: jsx(Box$1, Object.assign({
+                  children: jsx(Box, Object.assign({
                     css: {
                       height: '100%',
                       paddingTop: 15
@@ -26054,7 +26632,7 @@ const StyledParagraph = styled('span', {
   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'
@@ -26151,4 +26729,1006 @@ const Colors = props => {
   }, i.hex))));
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box$1 as Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, Link, LoadingBar, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TimePicker, ToastContext, Tooltip, Upload, addOnCellStyle, defaultFetchDataParams };
+/** 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;
+
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, Link, LoadingBar, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Select$1 as Select, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TimePicker, ToastContext, Tooltip, Upload, addOnCellStyle, defaultFetchDataParams };