@majoo-ui/react 1.45.0 → 1.45.1

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('@majoo-ui/helpers'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-dom'), require('react-table'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('react-image-crop'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', '@majoo-ui/helpers', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-dom', 'react-table', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', 'react-image-crop', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.helpers, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.ReactCrop, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, helpers, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, ReactCrop, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-dom'), require('react-table'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('react-image-crop'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-dom', 'react-table', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', 'react-image-crop', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.ReactDOM, global.reactTable, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.ReactCrop, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, ReactDOM, reactTable, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, ReactCrop, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -54,7 +54,7 @@
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
 
-  var _jsxFileName$14 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+  var _jsxFileName$12 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -64,7 +64,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$14,
+        fileName: _jsxFileName$12,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -2348,9 +2348,9 @@
   };
   Flex$1.displayName = 'Flex';
 
-  const _excluded$z = ["children"],
+  const _excluded$y = ["children"],
         _excluded2$2 = ["children"];
-  var _jsxFileName$13 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+  var _jsxFileName$11 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2524,7 +2524,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2535,7 +2535,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$11,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2591,7 +2591,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$11,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2608,8 +2608,8 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
-  var _jsxFileName$12 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+  const _excluded$x = ["children", "isCollapse", "css", "contentHeader"];
+  var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
   const StyledDiv$3 = styled(Flex$1, {
     justifyContent: 'center',
     marginLeft: 'auto',
@@ -2638,7 +2638,7 @@
       css,
       contentHeader
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$3, _extends({
       id: "retina-container",
@@ -2648,7 +2648,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$12,
+        fileName: _jsxFileName$10,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -2878,300 +2878,13 @@
 
   Paragraph.displayName = 'Paragraph';
 
-  const _excluded$x = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-  var _jsxFileName$11 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\button\\Button.js";
-  const ButtonPrimary = {
-    backgroundColor: '$btnPrimary',
-    color: '$textWhite',
-    border: 'none',
-    '&:hover': {
-      backgroundColor: '$primary600'
-    },
-    '&:active': {
-      backgroundColor: '$primary700'
-    }
-  };
-  const PrimarySecondary = {
-    backgroundColor: '$btnSecondary',
-    border: '1px solid $btnPrimary',
-    color: '$textGreen',
-    '&:hover': {
-      backgroundColor: '$primary50',
-      border: '1px solid $btnPrimary',
-      color: '$textGreen'
-    },
-    '&:active': {
-      backgroundColor: '$primary100',
-      border: '1px solid $btnPrimary'
-    }
-  };
-  const GhostButton = {
-    backgroundColor: '$btnSecondary',
-    color: '$textGreen',
-    border: 'none',
-    '&:hover': {
-      backgroundColor: '$primary50',
-      outline: '1px solid $primary50',
-      color: '$textGreen'
-    },
-    '&:active': {
-      backgroundColor: '$primary100',
-      outline: '1px solid $btnPrimary'
-    }
-  };
-  const ButtonNegative = {
-    backgroundColor: '$btnNegative',
-    color: '$textWhite',
-    border: 'none',
-    '&:hover': {
-      backgroundColor: '$red600'
-    },
-    '&:active': {
-      backgroundColor: '$red700'
-    }
-  };
-  const ButtonNegativeSecondary = {
-    backgroundColor: '$bgWhite',
-    border: '1px solid $btnNegative',
-    color: '$textRed',
-    '&:hover': {
-      backgroundColor: '$red50',
-      border: '1px solid $textRed'
-    },
-    '&:active': {
-      backgroundColor: '$red100',
-      border: '1px solid $textRed'
-    }
-  };
-  const ButtonHeaderMenu = {
-    backgroundColor: '$bgWhite',
-    border: '1px solid $bgBorder',
-    color: '$textPrimary',
-    '&:hover': {
-      backgroundColor: '$gray50',
-      border: '1px solid $bgBorder',
-      color: '$textPrimary'
-    },
-    '&:active': {
-      backgroundColor: '$gray50'
-    }
-  };
-  const ButtonTableMenu = {
-    backgroundColor: '$bgWhite',
-    color: '$textPrimary',
-    padding: '$spacing-04 $spacing-05',
-    width: '180px',
-    textAlign: 'left',
-    border: 'none',
-    borderRadius: 0,
-    '&:focus': {
-      outline: 'none'
-    },
-    '&:hover': {
-      backgroundColor: '$gray50'
-    },
-    '&:active': {
-      backgroundColor: '$gray100'
-    }
-  };
-  const StyledIcon$2 = styled('div', {
-    verticalAlign: 'middle'
-  });
-  const StyledIconLeft$3 = styled('div', {
-    marginRight: '5px',
-    display: 'inline-block',
-    verticalAlign: 'middle'
-  });
-  const StyledIconRight$2 = styled('div', {
-    marginLeft: '5px',
-    display: 'inline-block',
-    verticalAlign: 'middle'
-  });
-  const ButtonComponent = styled('button', {
-    margin: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontWeight: 400,
-    width: 'auto',
-    height: '40px',
-    userSelect: 'none',
-    borderRadius: '$md',
-    cursor: 'pointer',
-    fontSize: '14px',
-    textAlign: 'center',
-    lineHeight: '20px',
-    position: 'relative',
-    verticalAlign: 'middle',
-    whiteSpace: 'nowrap',
-    '&:focus': {
-      outline: '2px solid #82C4E0'
-    },
-    '&:disabled': {
-      border: '1px solid $btnDisable',
-      backgroundColor: '$btnDisable',
-      color: '$textDisable',
-      cursor: 'not-allowed',
-      '&:hover': {
-        backgroundColor: '$btnDisable',
-        border: '1px solid $btnDisable',
-        color: '$textDisable'
-      },
-      '&:active': {
-        backgroundColor: '$btnDisable',
-        border: '1px solid $btnDisable'
-      }
-    },
-    variants: {
-      buttonType: {
-        primary: Object.assign({}, ButtonPrimary),
-        secondary: Object.assign({}, PrimarySecondary),
-        ghost: Object.assign({}, GhostButton),
-        negative: Object.assign({}, ButtonNegative),
-        'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
-        headerMenu: Object.assign({}, ButtonHeaderMenu),
-        tableMenu: Object.assign({}, ButtonTableMenu)
-      },
-      size: {
-        xs: {
-          minWidth: '70px',
-          height: '28px',
-          padding: '1px 12px' // padding: '4px 12px',
-
-        },
-        sm: {
-          minWidth: '70px',
-          height: '32px',
-          padding: '3px 12px' // padding: '6px 12px',
-
-        },
-        md: {
-          minWidth: '70px',
-          height: '40px',
-          padding: '7px 12px' // padding: '10px 12px',
-
-        },
-        lg: {
-          minWidth: '84px',
-          height: '48px',
-          padding: '11px 16px' // padding: '14px 16px',
-
-        }
-      },
-      iconSize: {
-        xs: {
-          minWidth: '28px',
-          height: '28px',
-          padding: '3px',
-          borderRadius: '$md'
-        },
-        sm: {
-          minWidth: '32px',
-          height: '32px',
-          padding: '5px',
-          borderRadius: '$md'
-        },
-        md: {
-          minWidth: '40px',
-          height: '40px',
-          padding: '7px',
-          borderRadius: '$md'
-        },
-        lg: {
-          minWidth: '48px',
-          height: '48px',
-          padding: '11px',
-          borderRadius: '$md'
-        }
-      }
-    }
-  });
-  const ButtonPrimitive = ButtonComponent;
-  const Button$2 = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-    let {
-      className,
-      children,
-      type,
-      buttonType,
-      size,
-      disabled,
-      onClick,
-      block,
-      width,
-      leftIcon,
-      rightIcon,
-      icon
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
-
-    return /*#__PURE__*/React__default["default"].createElement(ButtonComponent, _extends({
-      className: className,
-      type: type,
-      buttonType: buttonType,
-      size: size,
-      iconSize: icon ? size : null,
-      onClick: onClick,
-      disabled: disabled,
-      css: Object.assign({}, props.css, {
-        display: block ? 'block' : 'inline-block',
-        width: block ? '100%' : width
-      }),
-      ref: ref
-    }, props, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$11,
-        lineNumber: 241,
-        columnNumber: 3
-      }
-    }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$3, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$11,
-        lineNumber: 253,
-        columnNumber: 31
-      }
-    }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$11,
-        lineNumber: 254,
-        columnNumber: 13
-      }
-    }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$2, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$11,
-        lineNumber: 255,
-        columnNumber: 32
-      }
-    }, rightIcon) : null);
-  });
-  Button$2.propTypes = {
-    className: PropTypes__default["default"].string,
-    buttonType: PropTypes__default["default"].string,
-    size: PropTypes__default["default"].string,
-    disabled: PropTypes__default["default"].bool,
-    onClick: PropTypes__default["default"].func,
-    block: PropTypes__default["default"].bool,
-    width: PropTypes__default["default"].string,
-    leftIcon: PropTypes__default["default"].element,
-    rightIcon: PropTypes__default["default"].element,
-    icon: PropTypes__default["default"].bool
-  };
-  Button$2.defaultProps = {
-    buttonType: 'primary',
-    size: 'md',
-    disabled: false,
-    block: false,
-    icon: false
-  };
-
-  var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\button\\ButtonLink.js";
-  const StyledLink = styled('a', {
+  var StyledLink = styled('a', {
     fontSize: '$short-content-regular',
     textDecoration: 'underline',
     variants: {
+      /**
+       * Specify the link color
+       */
       color: {
         success: {
           color: '$hlSuccess'
@@ -3191,34 +2904,29 @@
       color: 'success'
     }
   });
-  const Link = props => {
-    return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({}, props, {
-      target: props.isExternal && '_blank',
-      rel: props.isExternal && 'noopener noreferrer',
-      href: props.href,
-      css: props.css,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$10,
-        lineNumber: 31,
-        columnNumber: 5
-      }
-    }), props.caption);
-  };
-  Link.propTypes = {
-    caption: PropTypes.string,
-    href: PropTypes.string,
-    color: PropTypes.string,
-    isExternal: PropTypes.bool,
-    onClick: PropTypes.func
-  };
-  Link.defaultProps = {
-    caption: 'Learn more',
-    href: '#',
-    color: 'success',
-    isExternal: false,
-    onClick: () => {}
-  };
+  var Link = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var _b = _a.children,
+        children = _b === void 0 ? 'Learn more' : _b,
+        _c = _a.color,
+        color = _c === void 0 ? 'success' : _c,
+        _d = _a.isExternal,
+        isExternal = _d === void 0 ? false : _d,
+        _e = _a.href,
+        href = _e === void 0 ? '#' : _e,
+        target = _a.target,
+        rel = _a.rel,
+        props = __rest(_a, ["children", "color", "isExternal", "href", "target", "rel"]);
+
+    return jsxRuntime.jsx(StyledLink, __assign({
+      target: isExternal ? '_blank' : target,
+      rel: isExternal ? 'noopener noreferrer' : rel,
+      href: href,
+      color: color,
+      ref: forwardedRef
+    }, props, {
+      children: children
+    }), void 0);
+  });
 
   const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
   var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
@@ -3536,7 +3244,6 @@
       href: hrefOfAction,
       isExternal: isExternalOfAction,
       onClick: onClickOfAction,
-      caption: captionOfAction,
       color: variant,
       css: {
         alignSelf: 'self-end',
@@ -3548,7 +3255,7 @@
         lineNumber: 267,
         columnNumber: 17
       }
-    })))));
+    }, captionOfAction)))));
   };
 
   Toast.displayName = 'Toast';
@@ -3574,23 +3281,23 @@
     variants: {
       position: {
         [TOP_RIGHT_POSITION]: {
-          top: 48,
-          right: 40,
+          top: '8%',
+          right: '4%',
           flexDirection: 'column-reverse'
         },
         [TOP_LEFT_POSITION]: {
-          top: 48,
-          left: 40,
+          top: '8%',
+          left: '4%',
           flexDirection: 'column-reverse'
         },
         [BOTTOM_RIGHT_POSITION]: {
-          bottom: 48,
-          right: 40,
+          bottom: '8%',
+          right: '4%',
           flexDirection: 'column'
         },
         [BOTTOM_LEFT_POSITION]: {
-          bottom: 48,
-          left: 40,
+          bottom: '8%',
+          left: '4%',
           flexDirection: 'column'
         }
       }
@@ -3869,7 +3576,6 @@
     }
   }, value => /*#__PURE__*/React__namespace.createElement(Link, {
     href: link,
-    caption: children ? children : 'Learn more',
     color: variant ? variant : value.variant,
     css: {
       marginInlineEnd: 12
@@ -3880,12 +3586,12 @@
       lineNumber: 105,
       columnNumber: 7
     }
-  }));
+  }, children ? children : 'Learn more'));
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 116,
+      lineNumber: 117,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3897,7 +3603,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3906,7 +3612,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 125,
+      lineNumber: 126,
       columnNumber: 9
     }
   })));
@@ -3916,7 +3622,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 133,
+        lineNumber: 134,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3926,7 +3632,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 134,
+        lineNumber: 135,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3939,21 +3645,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 135,
+        lineNumber: 136,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 143,
+        lineNumber: 144,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 144,
+        lineNumber: 145,
         columnNumber: 33
       }
     }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
@@ -3962,7 +3668,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 147,
+        lineNumber: 148,
         columnNumber: 11
       }
     }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3975,7 +3681,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 152,
+        lineNumber: 153,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3984,7 +3690,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 160,
+        lineNumber: 161,
         columnNumber: 9
       }
     })));
@@ -4013,7 +3719,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 168,
+        lineNumber: 169,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -4030,7 +3736,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 170,
+        lineNumber: 171,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -4041,7 +3747,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 177,
+        lineNumber: 178,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
@@ -4055,28 +3761,286 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 180,
+        lineNumber: 181,
         columnNumber: 9
       }
-    }));
-  };
-
-  Banner.displayName = 'Banner';
-  BannerTitle.displayName = 'BannerTitle';
-  BannerDescription.displayName = 'BannerDescription';
-  Banner.propTypes = {
-    title: PropTypes__default["default"].string,
-    description: PropTypes__default["default"].string,
-    variant: PropTypes__default["default"].string,
-    link: PropTypes__default["default"].string,
-    linkText: PropTypes__default["default"].string,
-    onClick: PropTypes__default["default"].func,
-    onRemove: PropTypes__default["default"].func,
-    bannerBlock: PropTypes__default["default"].bool
-  };
-  Banner.defaultProps = {
-    variant: 'info'
-  };
+    }));
+  };
+
+  Banner.displayName = 'Banner';
+  BannerTitle.displayName = 'BannerTitle';
+  BannerDescription.displayName = 'BannerDescription';
+  Banner.propTypes = {
+    title: PropTypes__default["default"].string,
+    description: PropTypes__default["default"].string,
+    variant: PropTypes__default["default"].string,
+    link: PropTypes__default["default"].string,
+    linkText: PropTypes__default["default"].string,
+    onClick: PropTypes__default["default"].func,
+    onRemove: PropTypes__default["default"].func,
+    bannerBlock: PropTypes__default["default"].bool
+  };
+  Banner.defaultProps = {
+    variant: 'info'
+  };
+
+  var ButtonPrimary = {
+    backgroundColor: '$btnPrimary',
+    color: '$textWhite',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$primary600'
+    },
+    '&:active': {
+      backgroundColor: '$primary700'
+    }
+  };
+  var PrimarySecondary = {
+    backgroundColor: '$btnSecondary',
+    border: '1px solid $btnPrimary',
+    color: '$textGreen',
+    '&:hover': {
+      backgroundColor: '$primary50',
+      border: '1px solid $btnPrimary',
+      color: '$textGreen'
+    },
+    '&:active': {
+      backgroundColor: '$primary100',
+      border: '1px solid $btnPrimary'
+    }
+  };
+  var GhostButton = {
+    backgroundColor: '$btnSecondary',
+    color: '$textGreen',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$primary50',
+      outline: '1px solid $primary50',
+      color: '$textGreen'
+    },
+    '&:active': {
+      backgroundColor: '$primary100',
+      outline: '1px solid $btnPrimary'
+    }
+  };
+  var ButtonNegative = {
+    backgroundColor: '$btnNegative',
+    color: '$textWhite',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '$red600'
+    },
+    '&:active': {
+      backgroundColor: '$red700'
+    }
+  };
+  var ButtonNegativeSecondary = {
+    backgroundColor: '$bgWhite',
+    border: '1px solid $btnNegative',
+    color: '$textRed',
+    '&:hover': {
+      backgroundColor: '$red50',
+      border: '1px solid $textRed'
+    },
+    '&:active': {
+      backgroundColor: '$red100',
+      border: '1px solid $textRed'
+    }
+  };
+  var ButtonHeaderMenu = {
+    backgroundColor: '$bgWhite',
+    border: '1px solid $bgBorder',
+    color: '$textPrimary',
+    '&:hover': {
+      backgroundColor: '$gray50',
+      border: '1px solid $bgBorder',
+      color: '$textPrimary'
+    },
+    '&:active': {
+      backgroundColor: '$gray50'
+    }
+  };
+  var ButtonTableMenu = {
+    backgroundColor: '$bgWhite',
+    color: '$textPrimary',
+    padding: '$spacing-04 $spacing-05',
+    width: '180px',
+    textAlign: 'left',
+    border: 'none',
+    borderRadius: 0,
+    '&:focus': {
+      outline: 'none'
+    },
+    '&:hover': {
+      backgroundColor: '$gray50'
+    },
+    '&:active': {
+      backgroundColor: '$gray100'
+    }
+  };
+  var StyledIcon$2 = styled('div', {
+    verticalAlign: 'middle'
+  });
+  var StyledIconLeft$3 = styled('div', {
+    marginRight: '5px',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  });
+  var StyledIconRight$2 = styled('div', {
+    marginLeft: '5px',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  });
+  var ButtonPrimitive = styled('button', {
+    margin: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 600,
+    width: 'auto',
+    height: '40px',
+    userSelect: 'none',
+    borderRadius: '$md',
+    cursor: 'pointer',
+    fontSize: '14px',
+    textAlign: 'center',
+    lineHeight: '20px',
+    position: 'relative',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    '&:focus': {
+      outline: '2px solid #82C4E0'
+    },
+    '&:disabled': {
+      border: '1px solid $btnDisable',
+      backgroundColor: '$btnDisable',
+      color: '$textDisable',
+      cursor: 'not-allowed',
+      '&:hover': {
+        backgroundColor: '$btnDisable',
+        border: '1px solid $btnDisable',
+        color: '$textDisable'
+      },
+      '&:active': {
+        backgroundColor: '$btnDisable',
+        border: '1px solid $btnDisable'
+      }
+    },
+    variants: {
+      /**
+       * Specify the button type
+       */
+      buttonType: {
+        primary: __assign({}, ButtonPrimary),
+        secondary: __assign({}, PrimarySecondary),
+        ghost: __assign({}, GhostButton),
+        negative: __assign({}, ButtonNegative),
+        'negative-secondary': __assign({}, ButtonNegativeSecondary),
+        headerMenu: __assign({}, ButtonHeaderMenu),
+        tableMenu: __assign({}, ButtonTableMenu)
+      },
+
+      /**
+       * Specify the button size
+       */
+      size: {
+        xs: {
+          minWidth: '70px',
+          height: '28px',
+          padding: '1px 12px' // padding: '4px 12px',
+
+        },
+        sm: {
+          minWidth: '70px',
+          height: '32px',
+          padding: '3px 12px' // padding: '6px 12px',
+
+        },
+        md: {
+          minWidth: '70px',
+          height: '40px',
+          padding: '7px 12px' // padding: '10px 12px',
+
+        },
+        lg: {
+          minWidth: '84px',
+          height: '48px',
+          padding: '11px 16px' // padding: '14px 16px',
+
+        }
+      },
+
+      /**
+       * Specify the button icon size
+       */
+      iconSize: {
+        xs: {
+          minWidth: '28px',
+          height: '28px',
+          padding: '3px',
+          borderRadius: '$md'
+        },
+        sm: {
+          minWidth: '32px',
+          height: '32px',
+          padding: '5px',
+          borderRadius: '$md'
+        },
+        md: {
+          minWidth: '40px',
+          height: '40px',
+          padding: '7px',
+          borderRadius: '$md'
+        },
+        lg: {
+          minWidth: '48px',
+          height: '48px',
+          padding: '11px',
+          borderRadius: '$md'
+        }
+      }
+    }
+  });
+  var Button$2 = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+    var children = _a.children,
+        type = _a.type,
+        _b = _a.buttonType,
+        buttonType = _b === void 0 ? 'primary' : _b,
+        _c = _a.size,
+        size = _c === void 0 ? 'md' : _c,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
+        _e = _a.block,
+        block = _e === void 0 ? false : _e,
+        width = _a.width,
+        leftIcon = _a.leftIcon,
+        rightIcon = _a.rightIcon,
+        _f = _a.icon,
+        icon = _f === void 0 ? false : _f;
+        _a.iconSize;
+        var props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize"]);
+
+    return jsxRuntime.jsxs(ButtonPrimitive, __assign({
+      type: type,
+      buttonType: buttonType,
+      size: size,
+      iconSize: icon ? size : undefined,
+      disabled: disabled,
+      css: __assign(__assign({}, props.css), {
+        display: block ? 'block' : 'inline-block',
+        width: block ? '100%' : width
+      }),
+      ref: forwardedRef
+    }, props, {
+      children: [leftIcon && jsxRuntime.jsx(StyledIconLeft$3, {
+        children: leftIcon
+      }, void 0), icon ? jsxRuntime.jsx(StyledIcon$2, {
+        children: children
+      }, void 0) : children, rightIcon && jsxRuntime.jsx(StyledIconRight$2, {
+        children: rightIcon
+      }, void 0)]
+    }), void 0);
+  });
 
   const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
   var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
@@ -5639,16 +5603,19 @@
         true: {
           '& > input:last-child': {
             paddingLeft: 0,
-            border: 'none'
+            border: 'none',
+            backgroundColor: 'transparent'
           },
           '& > input:first-child': {
             paddingRight: 0,
-            border: 'none'
+            border: 'none',
+            backgroundColor: 'transparent'
           },
           '& > input:not(:first-child):not(:last-child)': {
             paddingLeft: 0,
             paddingRight: 0,
-            border: 'none'
+            border: 'none',
+            backgroundColor: 'transparent'
           }
         }
       },
@@ -5714,7 +5681,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$J,
-        lineNumber: 143,
+        lineNumber: 146,
         columnNumber: 10
       }
     }));
@@ -7451,14 +7418,15 @@
     size: 24
   };
 
-  const _excluded$e = ["size", "onChange", "css"];
+  const _excluded$e = ["size", "onChange", "css", "disabled"];
   var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
 
   const InputSearchbox = _ref => {
     let {
       size,
       onChange,
-      css
+      css,
+      disabled
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
@@ -7473,18 +7441,21 @@
 
     const handleClearButtonClick = e => {
       e.preventDefault();
-      setValue('');
-      if (onChange) onChange('');
+
+      if (!disabled) {
+        setValue('');
+        if (onChange) onChange('');
+      }
     };
 
     return /*#__PURE__*/React__default["default"].createElement(InputGroup, {
       size: size,
       css: css,
-      disabled: props.disabled,
+      disabled: disabled,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 28,
+        lineNumber: 30,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
@@ -7492,24 +7463,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$C,
-          lineNumber: 29,
+          lineNumber: 31,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 29,
+        lineNumber: 31,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, _extends({
       onChange: handleChange,
-      value: value
+      value: value,
+      disabled: disabled,
+      css: {
+        height: 'fit-content'
+      }
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 30,
+        lineNumber: 32,
         columnNumber: 7
       }
     })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
@@ -7517,14 +7492,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$C,
-          lineNumber: 31,
+          lineNumber: 41,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$C,
-          lineNumber: 31,
+          lineNumber: 41,
           columnNumber: 73
         }
       }),
@@ -7532,7 +7507,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 31,
+        lineNumber: 41,
         columnNumber: 7
       }
     }));
@@ -7937,6 +7912,7 @@
     const [options, setOptions] = React__namespace.useState(option || []);
     const [item, setItem] = React__namespace.useState(option || []);
     const [selectedValue, setSelectedValue] = React__namespace.useState(value);
+    const inputRef = React__namespace.useRef(null);
 
     const handleInputValue = (value, isReset) => {
       if (onSearch && !isReset) onSearch(value);
@@ -7944,7 +7920,6 @@
       if (value === '') {
         return setItem(options);
       } else {
-        // let filterItems = option.filter(item => item.name.toLowerCase().startsWith(value.toLocaleLowerCase()));
         let filterItems = options.filter(item => item.name.toLowerCase().includes(value.toLocaleLowerCase()));
         setItem(filterItems);
       }
@@ -7989,7 +7964,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 288,
+        lineNumber: 290,
         columnNumber: 5
       }
     }), ({
@@ -8021,7 +7996,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 317,
+            lineNumber: 319,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
@@ -8029,7 +8004,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 322,
+            lineNumber: 324,
             columnNumber: 15
           }
         }));
@@ -8046,17 +8021,17 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 331,
+          lineNumber: 333,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__namespace.createElement(InputSearchbox, {
-        size: "lg",
+        size: size,
         onChange: handleInputValue,
         placeholder: searchPlaceholder,
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 340,
+          lineNumber: 342,
           columnNumber: 15
         }
       }));
@@ -8066,7 +8041,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 345,
+          lineNumber: 347,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -8079,28 +8054,32 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 346,
+          lineNumber: 348,
           columnNumber: 13
         }
-      }), search ? /*#__PURE__*/React__namespace.createElement("div", {
+      }), search ? /*#__PURE__*/React__namespace.createElement(Box$1, {
         style: {
           width: '100%'
         },
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 354,
+          lineNumber: 356,
           columnNumber: 17
         }
-      }, icon ? /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          display: 'flex',
-          height: '100%'
+      }, icon ? /*#__PURE__*/React__namespace.createElement(InputGroup, {
+        css: {
+          height: '100%',
+          border: 'none',
+          '&:hover': {
+            border: 'none'
+          }
         },
+        disabled: disabled,
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 356,
+          lineNumber: 358,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
@@ -8108,31 +8087,68 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 357,
+            lineNumber: 368,
             columnNumber: 51
           }
         }),
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 357,
+          lineNumber: 368,
           columnNumber: 23
         }
       }), /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
         placeholder: placeholder,
-        disabled: disabled,
         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: 358,
+          lineNumber: 369,
+          columnNumber: 23
+        }
+      })), /*#__PURE__*/React__namespace.createElement(InputRightElement, {
+        children: getInputProps().value.length > 0 ? /*#__PURE__*/React__namespace.createElement(icons.CloseFilled, {
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$B,
+            lineNumber: 380,
+            columnNumber: 70
+          }
+        }) : /*#__PURE__*/React__namespace.createElement("div", {
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$B,
+            lineNumber: 380,
+            columnNumber: 88
+          }
+        }),
+        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
         }
-      }))) : /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
+      })) : /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
         placeholder: placeholder,
         disabled: disabled,
         readOnly: readOnly
@@ -8143,7 +8159,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 366,
+          lineNumber: 397,
           columnNumber: 21
         }
       }))) : /*#__PURE__*/React__namespace.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -8155,7 +8171,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 375,
+          lineNumber: 406,
           columnNumber: 17
         }
       }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -8164,7 +8180,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 382,
+          lineNumber: 413,
           columnNumber: 21
         }
       }, selectedItem.render ? selectedItem.render() : selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -8173,7 +8189,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 386,
+          lineNumber: 417,
           columnNumber: 21
         }
       }, placeholder)), handleDownOption()), /*#__PURE__*/React__namespace.createElement(OptionWrapper$2, _extends({}, getMenuProps(), {
@@ -8184,14 +8200,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 394,
+          lineNumber: 425,
           columnNumber: 13
         }
       }), renderInputSearchBox(), item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 397,
+          lineNumber: 428,
           columnNumber: 17
         }
       }, item.map((item, index) => {
@@ -8214,7 +8230,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$B,
-            lineNumber: 399,
+            lineNumber: 430,
             columnNumber: 21
           }
         }), item.render ? item.render() : item.name);
@@ -8222,14 +8238,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 421,
+          lineNumber: 452,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__namespace.createElement(StyledDiv$2, {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 422,
+          lineNumber: 453,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -8239,7 +8255,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 423,
+          lineNumber: 454,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -8251,7 +8267,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 424,
+          lineNumber: 455,
           columnNumber: 23
         }
       })), "Item tidak ditemukan"))));
@@ -12369,7 +12385,6 @@
                 }, {
                   children: jsxRuntime.jsx(Box$1, __assign({
                     css: {
-                      size: 22,
                       display: 'flex',
                       justifyContent: 'center',
                       alignItems: 'center',
@@ -17366,7 +17381,7 @@
       justify: "center"
     }, row.getToggleRowExpandedProps(), {
       onClick: () => {
-        if (!Object.keys(state.expanded).includes(row.id)) {
+        if (!Object.keys(state.expanded).includes(String(row.id))) {
           toggleAllRowsExpanded(false);
         }
 
@@ -17980,6 +17995,9 @@
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
+      css: {
+        zIndex: '$toast'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -18060,7 +18078,7 @@
       }
     }), /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
       css: Object.assign({
-        zIndex: '$modal',
+        zIndex: '$tooltip',
         minHeight: 230
       }, isMobileCss, props.css),
       __self: undefined,
@@ -18255,7 +18273,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
       css: Object.assign({
-        zIndex: '$modal',
+        zIndex: '$tooltip',
         minHeight: 230
       }, isMobileCss, props.css),
       __self: this,
@@ -18431,6 +18449,18 @@
       }
     }, props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
   }
+  TemplateAlertFunction.propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    dialogType: PropTypes.string,
+    onCancel: PropTypes.func,
+    onConfirm: PropTypes.func
+  };
+  TemplateAlertFunction.defaultProps = {
+    dialogType: 'primary',
+    onCancel: () => {},
+    onConfirm: () => {}
+  };
   AlertDialog.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
@@ -20549,12 +20579,18 @@
     flexDirection: 'column'
   });
   const Text = styled('p', {
-    margin: '32px 32px 0 32px',
     color: '$textDisable',
     fontSize: 12,
     fontWeight: 400,
     fontStyle: 'normal',
-    textAlign: 'center'
+    textAlign: 'center',
+    variants: {
+      hidden: {
+        true: {
+          display: 'none'
+        }
+      }
+    }
   });
   const ErrorMessage = styled('p', {
     color: '$red400',
@@ -20563,10 +20599,10 @@
     fontStyle: 'normal',
     textAlign: 'center',
     width: 190,
-    marginTop: 4
+    marginTop: '$spacing-02'
   });
   const IconCard = styled('div', {
-    padding: '7px 8px 7px 8px',
+    padding: '7px $spacing-03 7px $spacing-03',
     borderRadius: 50,
     background: '$bgWhite',
     textAlign: 'center',
@@ -20581,7 +20617,7 @@
     fontSize: 14,
     color: '$primary500',
     cursor: 'pointer',
-    padding: '4px 10px 4px 10px',
+    padding: '$spacing-02 $spacing-04 $spacing-02 $spacing-04',
     borderRadius: 4,
     '&:hover': {
       background: '$bgSuccess'
@@ -20599,14 +20635,14 @@
     borderRadius: 50,
     width: 40,
     height: 40,
-    padding: 6
+    padding: '$spacing-03'
   });
   const CheckIcon = styled(icons.CheckFilled, {
     background: '$white',
     borderRadius: 50,
     width: 40,
     height: 40,
-    padding: 6
+    padding: '$spacing-03'
   });
 
   const IconStateFull = props => {
@@ -20623,7 +20659,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 104,
+        lineNumber: 111,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -20633,7 +20669,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 111,
+        lineNumber: 118,
         columnNumber: 5
       }
     }));
@@ -20653,7 +20689,10 @@
     height,
     css,
     cropperTitle,
-    showCropper
+    showCropper,
+    accept,
+    progress,
+    loading
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -20667,6 +20706,16 @@
     const [crop, setCrop] = React.useState(null);
     const [completedCrop, setCompletedCrop] = React.useState(null);
     const [aspect, setAspect] = React.useState(16 / 9);
+    const [isLoading, setIsLoading] = React.useState(false);
+    React.useEffect(() => {
+      if (loading) {
+        setIsLoading(true);
+      }
+
+      if (progress && progress < 1 && progress > 100) {
+        setIsLoading(false);
+      }
+    }, [loading, progress]);
     const ContainerUpload = styled('div', {
       border: '2px dashed $gray300',
       borderRadius: 8,
@@ -20712,7 +20761,7 @@
         focus: {
           true: {
             border: '2px solid $borderFocus',
-            padding: 8,
+            padding: '$spacing-03',
             borderRadius: 8
           }
         }
@@ -20894,21 +20943,22 @@
         justify: "center",
         align: "center",
         css: {
-          marginTop: 6
+          marginTop: '$spacing-03'
         },
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 362,
+          lineNumber: 382,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
+        type: "button",
         onClick: () => handleReplace(index),
         buttonType: "ghost",
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 363,
+          lineNumber: 383,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -20916,12 +20966,26 @@
 
     const renderPicture = () => {
       return fileList == null ? void 0 : fileList.map((item, index) => {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
+          return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
+            key: index,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
+            __self: undefined,
+            __source: {
+              fileName: _jsxFileName$9,
+              lineNumber: 393,
+              columnNumber: 16
+            }
+          });
+        }
+
         return /*#__PURE__*/React__default["default"].createElement(Container, {
           key: index,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 373,
+            lineNumber: 396,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -20931,7 +20995,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 374,
+            lineNumber: 397,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -20940,7 +21004,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 375,
+            lineNumber: 398,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -20953,7 +21017,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 376,
+            lineNumber: 399,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -20962,7 +21026,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 384,
+            lineNumber: 407,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -20970,7 +21034,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 386,
+            lineNumber: 409,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -20979,12 +21043,26 @@
 
     const renderFile = () => {
       return fileList == null ? void 0 : fileList.map((item, index) => {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
+          return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
+            key: index,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
+            __self: undefined,
+            __source: {
+              fileName: _jsxFileName$9,
+              lineNumber: 420,
+              columnNumber: 16
+            }
+          });
+        }
+
         return /*#__PURE__*/React__default["default"].createElement(Container, {
           key: index,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 397,
+            lineNumber: 423,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -20994,7 +21072,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 398,
+            lineNumber: 424,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21003,7 +21081,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 399,
+            lineNumber: 425,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -21016,7 +21094,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 400,
+            lineNumber: 426,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21026,7 +21104,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 408,
+            lineNumber: 434,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
@@ -21034,7 +21112,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 409,
+            lineNumber: 435,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21043,25 +21121,96 @@
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             width: 180,
-            whiteSpace: 'nowrap'
+            whiteSpace: 'nowrap',
+            margin: '$spacing-07 $spacing-07 0 $spacing-07'
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 410,
+            lineNumber: 436,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 423,
+            lineNumber: 450,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
       });
     };
 
+    function UploadProgress(props) {
+      const {
+        progress,
+        loading
+      } = props;
+      return /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 461,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        css: {
+          flex: 1,
+          padding: '$spacing-05',
+          marginTop: '$spacing-05'
+        },
+        gap: 2,
+        direction: "column",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 462,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
+        css: {
+          '& > div': {
+            backgroundColor: '$chartLightYellow !important'
+          },
+          '& > div > div': {
+            background: '$chartYellow !important'
+          },
+          '& > p': {
+            color: '$textDisable',
+            fontSize: 12,
+            fontWeight: 400
+          }
+        },
+        description: "",
+        showProgressOnly: progress,
+        progress: progress,
+        isAuto: !progress,
+        show: loading,
+        onCompleted: () => setTimeout(() => setIsLoading(false), 1000),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 463,
+          columnNumber: 11
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(Text, {
+        hidden: !progress,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 476,
+          columnNumber: 11
+        }
+      }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 477,
+          columnNumber: 11
+        }
+      }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
+    }
+
     function renderUpload() {
       return /*#__PURE__*/React__default["default"].createElement(FocusArea, {
         focus: dragActive,
@@ -21069,7 +21218,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 433,
+          lineNumber: 485,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -21084,60 +21233,64 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 434,
+          lineNumber: 486,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
         type: "file",
+        accept: accept,
         ref: hiddenFileInput,
         onChange: handleChange,
         multiple: multiple,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 444,
+          lineNumber: 496,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 445,
+          lineNumber: 497,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 447,
+          lineNumber: 499,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 448,
+          lineNumber: 500,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 449,
+          lineNumber: 501,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
+        css: {
+          margin: '$spacing-07 $spacing-07 0 $spacing-07'
+        },
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 451,
+          lineNumber: 503,
           columnNumber: 17
         }
       }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 456,
+          lineNumber: 510,
           columnNumber: 26
         }
       }, errorMessage));
@@ -21148,7 +21301,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 463,
+          lineNumber: 517,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -21156,7 +21309,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 464,
+          lineNumber: 518,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21164,7 +21317,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 465,
+          lineNumber: 519,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -21177,18 +21330,18 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 467,
+          lineNumber: 521,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
         css: {
-          padding: 8,
+          padding: '$spacing-03',
           overflowY: 'auto'
         },
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 470,
+          lineNumber: 524,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -21199,7 +21352,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 471,
+          lineNumber: 525,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -21212,14 +21365,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 472,
+          lineNumber: 526,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 475,
+          lineNumber: 529,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21231,7 +21384,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 476,
+          lineNumber: 530,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -21239,7 +21392,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 477,
+          lineNumber: 531,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -21251,7 +21404,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 478,
+          lineNumber: 532,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21259,7 +21412,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 484,
+          lineNumber: 538,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21268,7 +21421,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 485,
+          lineNumber: 539,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -21276,7 +21429,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 488,
+          lineNumber: 542,
           columnNumber: 15
         }
       }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21292,10 +21445,19 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 499,
+        lineNumber: 553,
         columnNumber: 5
       }
-    }, !isFile && renderPicture(), isFile && renderFile(), renderUpload(), showCropper && renderCropper());
+    }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
+      progress: progress,
+      loading: loading,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 556,
+        columnNumber: 32
+      }
+    }) : renderUpload(), showCropper && renderCropper());
   };
 
   Upload.defaultProps = {
@@ -21307,6 +21469,16 @@
     showCropper: true
   };
   Upload.propTypes = {
+    /**
+     Progress of upload process
+    */
+    progress: PropTypes__default["default"].number,
+
+    /**
+     Auto increment progress of upload process
+    */
+    loading: PropTypes__default["default"].bool,
+
     /**
      Built-in stylesheets, support for two types.
     */
@@ -21347,6 +21519,11 @@
      */
     max: PropTypes__default["default"].number,
 
+    /**
+     Limit file type of upload.
+     */
+    accept: PropTypes__default["default"].string,
+
     /**
      Custom label for replace button.
      */
@@ -25936,7 +26113,8 @@
   var interval;
   function LoadingBar(props) {
     var show = props.show,
-        isAuto = props.isAuto;
+        isAuto = props.isAuto,
+        onCompleted = props.onCompleted;
 
     var _a = React.useState(0),
         progress = _a[0],
@@ -25952,8 +26130,9 @@
       } else {
         setProgress(100);
         clearInterval(interval);
+        onCompleted && onCompleted();
       }
-    }, [show]);
+    }, [show, onCompleted]);
     React.useEffect(function () {
       if (progress === 100) {
         clearInterval(interval);