@majoo-ui/react 1.45.0 → 1.45.1

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, createContext, useContext, useRef, cloneElement, useCallback, useReducer, createElement as createElement$2 } from 'react';
-import PropTypes, { string, bool, func } from 'prop-types';
+import PropTypes, { string, func } from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, CloseFilled, EyeOutline, CheckFilled, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, RemoveOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, CheckFilled, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, RemoveOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
-import { Portal } from '@majoo-ui/helpers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Portal } from '@majoo-ui/helpers';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
@@ -39,7 +39,7 @@ import ScrollSpy from 'react-ui-scrollspy';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import { useSticky } from 'react-table-sticky';
 
-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,
@@ -49,7 +49,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$14,
+      fileName: _jsxFileName$12,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2230,9 +2230,9 @@ Flex$1.defaultProps = {
 };
 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: {
@@ -2406,7 +2406,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2417,7 +2417,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$13,
+      fileName: _jsxFileName$11,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2473,7 +2473,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$13,
+      fileName: _jsxFileName$11,
       lineNumber: 230,
       columnNumber: 5
     }
@@ -2490,8 +2490,8 @@ GridItem.propTypes = {
 };
 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',
@@ -2520,7 +2520,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2530,7 +2530,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$12,
+      fileName: _jsxFileName$10,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2760,410 +2760,153 @@ Paragraph.defaultProps = {
 
 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'
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const StyledLink = styled('a', {
+  fontSize: '$short-content-regular',
+  textDecoration: 'underline',
+  variants: {
+    /**
+     * Specify the link color
+     */
+    color: {
+      success: {
+        color: '$hlSuccess'
+      },
+      info: {
+        color: '$hlNews'
+      },
+      warning: {
+        color: '$hlProcess'
+      },
+      failed: {
+        color: '$hlFailed'
+      }
+    }
   },
-  '&:active': {
-    backgroundColor: '$red700'
+  defaultVariants: {
+    color: 'success'
   }
-};
-const ButtonNegativeSecondary = {
-  backgroundColor: '$bgWhite',
-  border: '1px solid $btnNegative',
-  color: '$textRed',
-  '&:hover': {
-    backgroundColor: '$red50',
-    border: '1px solid $textRed'
+});
+const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+    children = 'Learn more',
+    color = 'success',
+    isExternal = false,
+    href = '#',
+    target,
+    rel
+  } = _a,
+      props = __rest(_a, ["children", "color", "isExternal", "href", "target", "rel"]);
+
+  return jsx(StyledLink, Object.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";
+const TOAST_WIDTH = 576;
+const ANIMATION_DURATION = 400;
+const TOP_RIGHT_POSITION = 'top-right';
+const TOP_LEFT_POSITION = 'top-left';
+const BOTTOM_RIGHT_POSITION = 'bottom-right';
+const BOTTOM_LEFT_POSITION = 'bottom_left';
+const positions = [TOP_RIGHT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, BOTTOM_LEFT_POSITION];
+
+const toastEnter = position => keyframes({
+  '0%': {
+    left: position === 'left' ? `-${TOAST_WIDTH}px` : 'unset',
+    right: position === 'right' ? `-${TOAST_WIDTH}px` : 'unset',
+    opacity: '0'
   },
-  '&:active': {
-    backgroundColor: '$red100',
-    border: '1px solid $textRed'
+  '100%': {
+    left: position === 'left' ? '0' : 'unset',
+    right: position === 'right' ? '0' : 'unset',
+    opacity: '1'
   }
-};
-const ButtonHeaderMenu = {
-  backgroundColor: '$bgWhite',
-  border: '1px solid $bgBorder',
-  color: '$textPrimary',
-  '&:hover': {
-    backgroundColor: '$gray50',
-    border: '1px solid $bgBorder',
-    color: '$textPrimary'
+});
+
+const toastExit = position => keyframes({
+  '0%': {
+    transform: 'translateX(0%)',
+    opacity: '1'
   },
-  '&:active': {
-    backgroundColor: '$gray50'
+  '100%': {
+    transform: `translateX(${position === 'right' ? '100%' : '-100%'})`,
+    opacity: '0'
   }
-};
-const ButtonTableMenu = {
-  backgroundColor: '$bgWhite',
-  color: '$textPrimary',
-  padding: '$spacing-04 $spacing-05',
-  width: '180px',
-  textAlign: 'left',
-  border: 'none',
-  borderRadius: 0,
-  '&:focus': {
-    outline: 'none'
+});
+
+const toastAnimationStyle = position => ({
+  '&[state="entering"], &[state="entered"]': {
+    animationFillMode: 'forwards',
+    animationName: toastEnter(position),
+    animationDuration: `${ANIMATION_DURATION}ms`
   },
-  '&:hover': {
-    backgroundColor: '$gray50'
+  '&[state="exiting"]': {
+    animationFillMode: 'forwards',
+    animationName: toastExit(position),
+    animationDuration: `${ANIMATION_DURATION * 2}ms`
   },
-  '&:active': {
-    backgroundColor: '$gray100'
+  '&[state="entered"]': {
+    right: 0,
+    opacity: '1'
   }
-};
-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',
+
+const Root = styled('div', {
+  display: 'block',
+  maxWidth: `${TOAST_WIDTH}px`,
+  // width: `${TOAST_WIDTH}px`,
+  height: '100%',
   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.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.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.createElement(StyledIconLeft$3, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$11,
-      lineNumber: 253,
-      columnNumber: 31
-    }
-  }, leftIcon) : null, icon ? /*#__PURE__*/React__default.createElement(StyledIcon$2, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$11,
-      lineNumber: 254,
-      columnNumber: 13
-    }
-  }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$2, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$11,
-      lineNumber: 255,
-      columnNumber: 32
-    }
-  }, rightIcon) : null);
-});
-Button$2.propTypes = {
-  className: PropTypes.string,
-  buttonType: PropTypes.string,
-  size: PropTypes.string,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  block: PropTypes.bool,
-  width: PropTypes.string,
-  leftIcon: PropTypes.element,
-  rightIcon: PropTypes.element,
-  icon: PropTypes.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', {
-  fontSize: '$short-content-regular',
-  textDecoration: 'underline',
-  variants: {
-    color: {
-      success: {
-        color: '$hlSuccess'
-      },
-      info: {
-        color: '$hlNews'
-      },
-      warning: {
-        color: '$hlProcess'
-      },
-      failed: {
-        color: '$hlFailed'
-      }
-    }
-  },
-  defaultVariants: {
-    color: 'success'
-  }
-});
-const Link = props => {
-  return /*#__PURE__*/React__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: string,
-  href: string,
-  color: string,
-  isExternal: bool,
-  onClick: func
-};
-Link.defaultProps = {
-  caption: 'Learn more',
-  href: '#',
-  color: 'success',
-  isExternal: false,
-  onClick: () => {}
-};
-
-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";
-const TOAST_WIDTH = 576;
-const ANIMATION_DURATION = 400;
-const TOP_RIGHT_POSITION = 'top-right';
-const TOP_LEFT_POSITION = 'top-left';
-const BOTTOM_RIGHT_POSITION = 'bottom-right';
-const BOTTOM_LEFT_POSITION = 'bottom_left';
-const positions = [TOP_RIGHT_POSITION, TOP_LEFT_POSITION, BOTTOM_RIGHT_POSITION, BOTTOM_LEFT_POSITION];
-
-const toastEnter = position => keyframes({
-  '0%': {
-    left: position === 'left' ? `-${TOAST_WIDTH}px` : 'unset',
-    right: position === 'right' ? `-${TOAST_WIDTH}px` : 'unset',
-    opacity: '0'
-  },
-  '100%': {
-    left: position === 'left' ? '0' : 'unset',
-    right: position === 'right' ? '0' : 'unset',
-    opacity: '1'
-  }
-});
-
-const toastExit = position => keyframes({
-  '0%': {
-    transform: 'translateX(0%)',
-    opacity: '1'
-  },
-  '100%': {
-    transform: `translateX(${position === 'right' ? '100%' : '-100%'})`,
-    opacity: '0'
-  }
-});
-
-const toastAnimationStyle = position => ({
-  '&[state="entering"], &[state="entered"]': {
-    animationFillMode: 'forwards',
-    animationName: toastEnter(position),
-    animationDuration: `${ANIMATION_DURATION}ms`
-  },
-  '&[state="exiting"]': {
-    animationFillMode: 'forwards',
-    animationName: toastExit(position),
-    animationDuration: `${ANIMATION_DURATION * 2}ms`
-  },
-  '&[state="entered"]': {
-    right: 0,
-    opacity: '1'
-  }
-});
-
-const Root = styled('div', {
-  display: 'block',
-  maxWidth: `${TOAST_WIDTH}px`,
-  // width: `${TOAST_WIDTH}px`,
-  height: '100%',
-  position: 'relative',
-  opacity: 0,
-  variants: {
-    hPosition: {
-      right: toastAnimationStyle('right'),
-      left: toastAnimationStyle('left')
+  opacity: 0,
+  variants: {
+    hPosition: {
+      right: toastAnimationStyle('right'),
+      left: toastAnimationStyle('left')
     },
     vPosition: {
       top: {
@@ -3418,7 +3161,6 @@ const Toast = _ref => {
     href: hrefOfAction,
     isExternal: isExternalOfAction,
     onClick: onClickOfAction,
-    caption: captionOfAction,
     color: variant,
     css: {
       alignSelf: 'self-end',
@@ -3430,7 +3172,7 @@ const Toast = _ref => {
       lineNumber: 267,
       columnNumber: 17
     }
-  })))));
+  }, captionOfAction)))));
 };
 
 Toast.displayName = 'Toast';
@@ -3456,23 +3198,23 @@ const ToastBox = styled(Flex$1, {
   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'
       }
     }
@@ -3751,7 +3493,6 @@ const BannerLink = ({
   }
 }, value => /*#__PURE__*/React.createElement(Link, {
   href: link,
-  caption: children ? children : 'Learn more',
   color: variant ? variant : value.variant,
   css: {
     marginInlineEnd: 12
@@ -3762,12 +3503,12 @@ const BannerLink = ({
     lineNumber: 105,
     columnNumber: 7
   }
-}));
+}, children ? children : 'Learn more'));
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 116,
+    lineNumber: 117,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3779,7 +3520,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 118,
+    lineNumber: 119,
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3788,7 +3529,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 125,
+    lineNumber: 126,
     columnNumber: 9
   }
 })));
@@ -3798,7 +3539,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 133,
+      lineNumber: 134,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3808,7 +3549,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 134,
+      lineNumber: 135,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3821,21 +3562,21 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 135,
+      lineNumber: 136,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 143,
+      lineNumber: 144,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 144,
+      lineNumber: 145,
       columnNumber: 33
     }
   }, props.description)), props.link && /*#__PURE__*/React.createElement(BannerLink, {
@@ -3844,7 +3585,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 147,
+      lineNumber: 148,
       columnNumber: 11
     }
   }, props.linkText)), /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3857,7 +3598,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 152,
+      lineNumber: 153,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3866,7 +3607,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 160,
+      lineNumber: 161,
       columnNumber: 9
     }
   })));
@@ -3895,7 +3636,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 168,
+      lineNumber: 169,
       columnNumber: 5
     }
   }), children ? /*#__PURE__*/React.createElement(Flex$1, {
@@ -3912,7 +3653,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 170,
+      lineNumber: 171,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(Context$2.Provider, {
@@ -3923,7 +3664,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 177,
+      lineNumber: 178,
       columnNumber: 11
     }
   }, children)) : /*#__PURE__*/React.createElement(SingleTagBanner, {
@@ -3937,7 +3678,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 180,
+      lineNumber: 181,
       columnNumber: 9
     }
   }));
@@ -3960,6 +3701,261 @@ Banner.defaultProps = {
   variant: 'info'
 };
 
+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 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: 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)
+    },
+
+    /**
+     * 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'
+      }
+    }
+  }
+});
+const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+    children,
+    type,
+    buttonType = 'primary',
+    size = 'md',
+    disabled = false,
+    block = false,
+    width,
+    leftIcon,
+    rightIcon,
+    icon = false,
+    iconSize
+  } = _a,
+      props = __rest(_a, ["children", "type", "buttonType", "size", "disabled", "block", "width", "leftIcon", "rightIcon", "icon", "iconSize"]);
+
+  return jsxs(ButtonPrimitive, Object.assign({
+    type: type,
+    buttonType: buttonType,
+    size: size,
+    iconSize: icon ? size : undefined,
+    disabled: disabled,
+    css: Object.assign(Object.assign({}, props.css), {
+      display: block ? 'block' : 'inline-block',
+      width: block ? '100%' : width
+    }),
+    ref: forwardedRef
+  }, props, {
+    children: [leftIcon && jsx(StyledIconLeft$3, {
+      children: leftIcon
+    }, void 0), icon ? jsx(StyledIcon$2, {
+      children: children
+    }, void 0) : children, rightIcon && 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";
 const CardComponent = styled('div', {
@@ -4168,43 +4164,6 @@ Card.defaultProps = {
   title: ''
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 const _excluded$s = ["children"];
 var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
@@ -5560,16 +5519,19 @@ const InputGroupStyle = styled('div', {
       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'
         }
       }
     },
@@ -5635,7 +5597,7 @@ const InputGroup = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$J,
-      lineNumber: 143,
+      lineNumber: 146,
       columnNumber: 10
     }
   }));
@@ -7372,14 +7334,15 @@ SvgSearchOutline.defaultProps = {
   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);
 
@@ -7394,18 +7357,21 @@ const InputSearchbox = _ref => {
 
   const handleClearButtonClick = e => {
     e.preventDefault();
-    setValue('');
-    if (onChange) onChange('');
+
+    if (!disabled) {
+      setValue('');
+      if (onChange) onChange('');
+    }
   };
 
   return /*#__PURE__*/React__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.createElement(InputLeftElement, {
@@ -7413,24 +7379,28 @@ const InputSearchbox = _ref => {
       __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.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.createElement(InputRightElement, {
@@ -7438,14 +7408,14 @@ const InputSearchbox = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 31,
+        lineNumber: 41,
         columnNumber: 55
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$C,
-        lineNumber: 31,
+        lineNumber: 41,
         columnNumber: 73
       }
     }),
@@ -7453,7 +7423,7 @@ const InputSearchbox = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$C,
-      lineNumber: 31,
+      lineNumber: 41,
       columnNumber: 7
     }
   }));
@@ -7858,6 +7828,7 @@ function Select$1(_ref) {
   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);
@@ -7865,7 +7836,6 @@ function Select$1(_ref) {
     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);
     }
@@ -7910,7 +7880,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 288,
+      lineNumber: 290,
       columnNumber: 5
     }
   }), ({
@@ -7942,7 +7912,7 @@ function Select$1(_ref) {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 317,
+          lineNumber: 319,
           columnNumber: 13
         }
       }), /*#__PURE__*/React.createElement(CaretDownOutline, {
@@ -7950,7 +7920,7 @@ function Select$1(_ref) {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 322,
+          lineNumber: 324,
           columnNumber: 15
         }
       }));
@@ -7967,17 +7937,17 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 331,
+        lineNumber: 333,
         columnNumber: 13
       }
     }, /*#__PURE__*/React.createElement(InputSearchbox, {
-      size: "lg",
+      size: size,
       onChange: handleInputValue,
       placeholder: searchPlaceholder,
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 340,
+        lineNumber: 342,
         columnNumber: 15
       }
     }));
@@ -7987,7 +7957,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 345,
+        lineNumber: 347,
         columnNumber: 11
       }
     }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -8000,28 +7970,32 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 346,
+        lineNumber: 348,
         columnNumber: 13
       }
-    }), search ? /*#__PURE__*/React.createElement("div", {
+    }), search ? /*#__PURE__*/React.createElement(Box$1, {
       style: {
         width: '100%'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 354,
+        lineNumber: 356,
         columnNumber: 17
       }
-    }, icon ? /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        height: '100%'
+    }, icon ? /*#__PURE__*/React.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.createElement(InputLeftElement, {
@@ -8029,31 +8003,68 @@ function Select$1(_ref) {
         __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.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.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
+        }
+      }),
+      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.createElement(Input$5, _extends({
+    })) : /*#__PURE__*/React.createElement(Input$5, _extends({
       placeholder: placeholder,
       disabled: disabled,
       readOnly: readOnly
@@ -8064,7 +8075,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 366,
+        lineNumber: 397,
         columnNumber: 21
       }
     }))) : /*#__PURE__*/React.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -8076,7 +8087,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 375,
+        lineNumber: 406,
         columnNumber: 17
       }
     }), selectedItem ? /*#__PURE__*/React.createElement(Text$1, {
@@ -8085,7 +8096,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 382,
+        lineNumber: 413,
         columnNumber: 21
       }
     }, selectedItem.render ? selectedItem.render() : selectedItem.name) : /*#__PURE__*/React.createElement(Text$1, {
@@ -8094,7 +8105,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 386,
+        lineNumber: 417,
         columnNumber: 21
       }
     }, placeholder)), handleDownOption()), /*#__PURE__*/React.createElement(OptionWrapper$2, _extends({}, getMenuProps(), {
@@ -8105,14 +8116,14 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 394,
+        lineNumber: 425,
         columnNumber: 13
       }
     }), renderInputSearchBox(), item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 397,
+        lineNumber: 428,
         columnNumber: 17
       }
     }, item.map((item, index) => {
@@ -8135,7 +8146,7 @@ function Select$1(_ref) {
         __self: this,
         __source: {
           fileName: _jsxFileName$B,
-          lineNumber: 399,
+          lineNumber: 430,
           columnNumber: 21
         }
       }), item.render ? item.render() : item.name);
@@ -8143,14 +8154,14 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 421,
+        lineNumber: 452,
         columnNumber: 17
       }
     }, /*#__PURE__*/React.createElement(StyledDiv$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 422,
+        lineNumber: 453,
         columnNumber: 19
       }
     }, /*#__PURE__*/React.createElement("div", {
@@ -8160,7 +8171,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 423,
+        lineNumber: 454,
         columnNumber: 21
       }
     }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -8172,7 +8183,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 424,
+        lineNumber: 455,
         columnNumber: 23
       }
     })), "Item tidak ditemukan"))));
@@ -12264,7 +12275,6 @@ const ModalDialog = props => {
               }, {
                 children: jsx(Box$1, Object.assign({
                   css: {
-                    size: 22,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -17207,7 +17217,7 @@ const rowExpanderColumn = {
     justify: "center"
   }, row.getToggleRowExpandedProps(), {
     onClick: () => {
-      if (!Object.keys(state.expanded).includes(row.id)) {
+      if (!Object.keys(state.expanded).includes(String(row.id))) {
         toggleAllRowsExpanded(false);
       }
 
@@ -17823,6 +17833,9 @@ function Content$1(_ref) {
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
+    css: {
+      zIndex: '$toast'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -17903,7 +17916,7 @@ const TemplateAlertFunction = props => {
     }
   }), /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
     css: Object.assign({
-      zIndex: '$modal',
+      zIndex: '$tooltip',
       minHeight: 230
     }, isMobileCss, props.css),
     __self: undefined,
@@ -18098,7 +18111,7 @@ function AlertDialog(props) {
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
     css: Object.assign({
-      zIndex: '$modal',
+      zIndex: '$tooltip',
       minHeight: 230
     }, isMobileCss, props.css),
     __self: this,
@@ -18274,6 +18287,18 @@ function AlertDialog(props) {
     }
   }, props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
 }
+TemplateAlertFunction.propTypes = {
+  title: string.isRequired,
+  description: string.isRequired,
+  dialogType: string,
+  onCancel: func,
+  onConfirm: func
+};
+TemplateAlertFunction.defaultProps = {
+  dialogType: 'primary',
+  onCancel: () => {},
+  onConfirm: () => {}
+};
 AlertDialog.propTypes = {
   title: string.isRequired,
   description: string.isRequired,
@@ -20357,12 +20382,18 @@ const Children = styled('div', {
   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',
@@ -20371,10 +20402,10 @@ const ErrorMessage = styled('p', {
   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',
@@ -20389,7 +20420,7 @@ const ButtonText = styled('button', {
   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'
@@ -20407,14 +20438,14 @@ const EyeIcon = styled(EyeOutline, {
   borderRadius: 50,
   width: 40,
   height: 40,
-  padding: 6
+  padding: '$spacing-03'
 });
 const CheckIcon = styled(CheckFilled, {
   background: '$white',
   borderRadius: 50,
   width: 40,
   height: 40,
-  padding: 6
+  padding: '$spacing-03'
 });
 
 const IconStateFull = props => {
@@ -20431,7 +20462,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 104,
+      lineNumber: 111,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
@@ -20441,7 +20472,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 111,
+      lineNumber: 118,
       columnNumber: 5
     }
   }));
@@ -20461,7 +20492,10 @@ const Upload = ({
   height,
   css,
   cropperTitle,
-  showCropper
+  showCropper,
+  accept,
+  progress,
+  loading
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -20475,6 +20509,16 @@ const Upload = ({
   const [crop, setCrop] = useState(null);
   const [completedCrop, setCompletedCrop] = useState(null);
   const [aspect, setAspect] = useState(16 / 9);
+  const [isLoading, setIsLoading] = useState(false);
+  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,
@@ -20520,7 +20564,7 @@ const Upload = ({
       focus: {
         true: {
           border: '2px solid $borderFocus',
-          padding: 8,
+          padding: '$spacing-03',
           borderRadius: 8
         }
       }
@@ -20702,21 +20746,22 @@ const Upload = ({
       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.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'}`));
@@ -20724,12 +20769,26 @@ const Upload = ({
 
   const renderPicture = () => {
     return fileList == null ? void 0 : fileList.map((item, index) => {
+      if ((item == null ? void 0 : item.status) === 'uploading') {
+        return /*#__PURE__*/React__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.createElement(Container, {
         key: index,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 373,
+          lineNumber: 396,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -20739,7 +20798,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 374,
+          lineNumber: 397,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20748,7 +20807,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 375,
+          lineNumber: 398,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -20761,7 +20820,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 376,
+          lineNumber: 399,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20770,7 +20829,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 384,
+          lineNumber: 407,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -20778,7 +20837,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 386,
+          lineNumber: 409,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -20787,12 +20846,26 @@ const Upload = ({
 
   const renderFile = () => {
     return fileList == null ? void 0 : fileList.map((item, index) => {
+      if ((item == null ? void 0 : item.status) === 'uploading') {
+        return /*#__PURE__*/React__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.createElement(Container, {
         key: index,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 397,
+          lineNumber: 423,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -20802,7 +20875,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 398,
+          lineNumber: 424,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20811,7 +20884,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 399,
+          lineNumber: 425,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -20824,7 +20897,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 400,
+          lineNumber: 426,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -20834,7 +20907,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 408,
+          lineNumber: 434,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
@@ -20842,7 +20915,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 409,
+          lineNumber: 435,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
@@ -20851,25 +20924,96 @@ const Upload = ({
           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.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.createElement(ContainerUpload, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 461,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__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.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.createElement(Text, {
+      hidden: !progress,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 476,
+        columnNumber: 11
+      }
+    }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 477,
+        columnNumber: 11
+      }
+    }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
+  }
+
   function renderUpload() {
     return /*#__PURE__*/React__default.createElement(FocusArea, {
       focus: dragActive,
@@ -20877,7 +21021,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 433,
+        lineNumber: 485,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -20892,60 +21036,64 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 434,
+        lineNumber: 486,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__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.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 445,
+        lineNumber: 497,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 447,
+        lineNumber: 499,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 448,
+        lineNumber: 500,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 449,
+        lineNumber: 501,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 456,
+        lineNumber: 510,
         columnNumber: 26
       }
     }, errorMessage));
@@ -20956,7 +21104,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 463,
+        lineNumber: 517,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -20964,7 +21112,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 464,
+        lineNumber: 518,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -20972,7 +21120,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 465,
+        lineNumber: 519,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -20985,18 +21133,18 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 467,
+        lineNumber: 521,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__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.createElement(ReactCrop, {
@@ -21007,7 +21155,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 471,
+        lineNumber: 525,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21020,14 +21168,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 472,
+        lineNumber: 526,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 475,
+        lineNumber: 529,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21039,7 +21187,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 476,
+        lineNumber: 530,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21047,7 +21195,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 477,
+        lineNumber: 531,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21059,7 +21207,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 478,
+        lineNumber: 532,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21067,7 +21215,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 484,
+        lineNumber: 538,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21076,7 +21224,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 485,
+        lineNumber: 539,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21084,7 +21232,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 488,
+        lineNumber: 542,
         columnNumber: 15
       }
     }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21100,10 +21248,19 @@ const Upload = ({
     __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.createElement(UploadProgress, {
+    progress: progress,
+    loading: loading,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$9,
+      lineNumber: 556,
+      columnNumber: 32
+    }
+  }) : renderUpload(), showCropper && renderCropper());
 };
 
 Upload.defaultProps = {
@@ -21115,6 +21272,16 @@ Upload.defaultProps = {
   showCropper: true
 };
 Upload.propTypes = {
+  /**
+   Progress of upload process
+  */
+  progress: PropTypes.number,
+
+  /**
+   Auto increment progress of upload process
+  */
+  loading: PropTypes.bool,
+
   /**
    Built-in stylesheets, support for two types.
   */
@@ -21155,6 +21322,11 @@ Upload.propTypes = {
    */
   max: PropTypes.number,
 
+  /**
+   Limit file type of upload.
+   */
+  accept: PropTypes.string,
+
   /**
    Custom label for replace button.
    */
@@ -25724,7 +25896,8 @@ let interval;
 function LoadingBar(props) {
   const {
     show,
-    isAuto
+    isAuto,
+    onCompleted
   } = props;
   const [progress, setProgress] = useState(0);
   useEffect(() => {
@@ -25735,8 +25908,9 @@ function LoadingBar(props) {
     } else {
       setProgress(100);
       clearInterval(interval);
+      onCompleted && onCompleted();
     }
-  }, [show]);
+  }, [show, onCompleted]);
   useEffect(() => {
     if (progress === 100) {
       clearInterval(interval);