@majoo-ui/react 1.53.1 → 1.54.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('react-loading-skeleton'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', 'react-loading-skeleton', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.ReactSkeleton, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, ReactSkeleton, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +27,7 @@
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+  var ReactSkeleton__default = /*#__PURE__*/_interopDefaultLegacy(ReactSkeleton);
   var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
   var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
   var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
@@ -2610,7 +2611,427 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  const _excluded$z = ["children", "isCollapse", "css", "contentHeader"];
+  function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(false);
+    React.useEffect(() => {
+      const media = window.matchMedia(query);
+
+      if (media.matches !== matches) {
+        setMatches(media.matches);
+      }
+
+      const listener = () => {
+        setMatches(media.matches);
+      };
+
+      media.addEventListener('change', listener);
+      return () => media.removeEventListener('change', listener);
+    }, [matches, query]);
+    return matches;
+  }
+
+  var StyledSkeleton = function StyledSkeleton(props) {
+    var color = props.color,
+        count = props.count,
+        width = props.width,
+        size = props.size,
+        circle = props.circle;
+
+    function getBaseColor(color) {
+      switch (color) {
+        case 'primary':
+          return colors$4.gray300;
+
+        default:
+          return colors$4.gray150;
+      }
+    }
+
+    function getSize(size) {
+      switch (size) {
+        case 'md':
+          return 16;
+
+        case 'lg':
+          return 118;
+
+        default:
+          return 12;
+      }
+    }
+
+    return jsxRuntime.jsx(ReactSkeleton.SkeletonTheme, __assign({
+      width: width,
+      borderRadius: size === 'lg' ? 0 : 20,
+      baseColor: getBaseColor(color),
+      highlightColor: "#FAFAFA"
+    }, {
+      children: jsxRuntime.jsx(ReactSkeleton__default["default"], {
+        height: getSize(size),
+        count: count,
+        circle: circle
+      }, void 0)
+    }), void 0);
+  };
+
+  var Card$1 = styled('div', {
+    padding: 40,
+    borderRadius: 8,
+    background: '$bgWhite',
+    boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)',
+    position: 'relative'
+  });
+  var Space = styled('div', {
+    height: 8,
+    variants: {
+      size: {
+        sm: {
+          height: 8
+        },
+        md: {
+          height: 18
+        }
+      }
+    }
+  });
+  function Skeleton() {
+    var isDesktop = useMediaQuery('(min-width: 767px)');
+
+    if (isDesktop) {
+      return jsxRuntime.jsxs(Grid, __assign({
+        columns: 6,
+        gapY: 5
+      }, {
+        children: [jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsxs(Grid, __assign({
+            columns: 6,
+            gapX: 2
+          }, {
+            children: [jsxRuntime.jsx(GridItem, __assign({
+              colSpan: 2
+            }, {
+              children: jsxRuntime.jsxs(Card$1, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0)]
+              }, void 0)
+            }), void 0), jsxRuntime.jsx(GridItem, __assign({
+              colSpan: 2
+            }, {
+              children: jsxRuntime.jsxs(Card$1, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0)]
+              }, void 0)
+            }), void 0), jsxRuntime.jsx(GridItem, __assign({
+              colSpan: 2
+            }, {
+              children: jsxRuntime.jsxs(Card$1, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0)]
+              }, void 0)
+            }), void 0)]
+          }), void 0)
+        }), void 0), jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsx(Card$1, {
+            children: jsxRuntime.jsxs(Grid, __assign({
+              columns: 6,
+              gapY: 5
+            }, {
+              children: [jsxRuntime.jsx(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: jsxRuntime.jsxs(Grid, __assign({
+                  columns: 6,
+                  gapX: 2
+                }, {
+                  children: [jsxRuntime.jsxs(GridItem, __assign({
+                    colSpan: 2
+                  }, {
+                    children: [jsxRuntime.jsx(StyledSkeleton, {
+                      size: "lg"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                      size: "md",
+                      color: "primary",
+                      width: "85%"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsxs(Box, {
+                      children: [jsxRuntime.jsx(StyledSkeleton, {
+                        width: "85%"
+                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                        width: "60%"
+                      }, void 0)]
+                    }, void 0)]
+                  }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                    colSpan: 2
+                  }, {
+                    children: [jsxRuntime.jsx(StyledSkeleton, {
+                      size: "lg"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                      size: "md",
+                      color: "primary",
+                      width: "85%"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsxs(Box, {
+                      children: [jsxRuntime.jsx(StyledSkeleton, {
+                        width: "85%"
+                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                        width: "60%"
+                      }, void 0)]
+                    }, void 0)]
+                  }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                    colSpan: 2
+                  }, {
+                    children: [jsxRuntime.jsx(StyledSkeleton, {
+                      size: "lg"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                      size: "md",
+                      color: "primary",
+                      width: "85%"
+                    }, void 0), jsxRuntime.jsx(Space, {
+                      size: "md"
+                    }, void 0), jsxRuntime.jsxs(Box, {
+                      children: [jsxRuntime.jsx(StyledSkeleton, {
+                        width: "85%"
+                      }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                        width: "60%"
+                      }, void 0)]
+                    }, void 0)]
+                  }), void 0)]
+                }), void 0)
+              }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  width: "50%"
+                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "95%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "95%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "95%"
+                  }, void 0)]
+                }), void 0)]
+              }), void 0)]
+            }), void 0)
+          }, void 0)
+        }), void 0)]
+      }), void 0);
+    } else {
+      return jsxRuntime.jsxs(Grid, __assign({
+        columns: 6,
+        gapY: 4
+      }, {
+        children: [jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsxs(Card$1, {
+            children: [jsxRuntime.jsx(StyledSkeleton, {
+              size: "md",
+              color: "primary"
+            }, void 0), jsxRuntime.jsx(Space, {
+              size: "md"
+            }, void 0), jsxRuntime.jsxs(Box, {
+              children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                width: "60%"
+              }, void 0)]
+            }, void 0), jsxRuntime.jsx(Space, {
+              size: "md"
+            }, void 0), jsxRuntime.jsxs(Box, {
+              children: [jsxRuntime.jsx(StyledSkeleton, {}, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                width: "60%"
+              }, void 0)]
+            }, void 0)]
+          }, void 0)
+        }), void 0), jsxRuntime.jsx(GridItem, __assign({
+          colSpan: 6
+        }, {
+          children: jsxRuntime.jsx(Card$1, {
+            children: jsxRuntime.jsxs(Grid, {
+              children: [jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  size: "lg"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                  size: "md",
+                  color: "primary",
+                  width: "85%"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {
+                    width: "85%"
+                  }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "60%"
+                  }, void 0)]
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0)]
+              }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  width: "50%"
+                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "85%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "85%"
+                  }, void 0)]
+                }), void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsxs(ReactSkeleton.SkeletonTheme, __assign({
+                  inline: true,
+                  borderRadius: 20,
+                  baseColor: colors$4.gray150,
+                  highlightColor: "#FAFAFA"
+                }, {
+                  children: [jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    style: {
+                      marginRight: 8
+                    },
+                    height: 12,
+                    width: 12,
+                    circle: true
+                  }, void 0), jsxRuntime.jsx(ReactSkeleton__default["default"], {
+                    height: 12,
+                    width: "85%"
+                  }, void 0)]
+                }), void 0)]
+              }), void 0)]
+            }, void 0)
+          }, void 0)
+        }), void 0)]
+      }), void 0);
+    }
+  }
+
+  const _excluded$z = ["children", "isCollapse", "css", "contentHeader", "isLoading"];
   var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
   const StyledDiv$3 = styled(Flex$1, {
     justifyContent: 'center',
@@ -2638,7 +3059,8 @@
       children,
       isCollapse,
       css,
-      contentHeader
+      contentHeader,
+      isLoading
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
@@ -2651,10 +3073,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 28,
+        lineNumber: 29,
         columnNumber: 5
       }
-    }), contentHeader, children);
+    }), isLoading ? /*#__PURE__*/React__default["default"].createElement(Skeleton, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$_,
+        lineNumber: 31,
+        columnNumber: 9
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, contentHeader, children));
   };
 
   PageContainer.displayName = 'PageContainer';
@@ -4000,7 +4429,10 @@
     }
   };
   var StyledIcon$2 = styled('div', {
-    verticalAlign: 'middle'
+    verticalAlign: 'middle',
+    '& svg': {
+      verticalAlign: 'middle'
+    }
   });
   var StyledIconLeft$4 = styled('div', {
     marginRight: '$spacing-03',
@@ -11915,7 +12347,15 @@
     flexShrink: 0,
     display: 'flex',
     borderBottom: '$medium',
-    boxShadow: '$medium'
+    boxShadow: '$medium',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    scrollBehavior: 'smooth',
+    '-ms-overflow-style': 'none',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
   });
   const StyledTrigger$1 = styled(TabsPrimitive__namespace.Trigger, {
     all: 'unset',
@@ -11982,6 +12422,47 @@
     outline: 'none',
     boxShadow: '$medium'
   });
+  const ScrollButton = styled(Button$3, {
+    width: '28px',
+    '&:hover': {
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
+    },
+    variants: {
+      position: {
+        left: {
+          '& svg': {
+            marginTop: '-1px',
+            marginLeft: '-2px'
+          }
+        },
+        right: {
+          '& svg': {
+            marginTop: 0,
+            marginLeft: 0
+          }
+        }
+      }
+    }
+  });
+  const ScrollButtonContainer = styled(Box, {
+    size: '28px',
+    position: 'absolute',
+    zIndex: '$sticky',
+    borderRadius: '$md',
+    top: '8px',
+    variants: {
+      position: {
+        left: {
+          left: '8px',
+          boxShadow: '10px 0 8px 2px rgba(255,255,255,1), -6px 0 8px 2px rgba(255,255,255,1)'
+        },
+        right: {
+          right: '8px',
+          boxShadow: '6px 0 8px 2px rgba(255,255,255,1), -10px 0 8px 2px rgba(255,255,255,1)'
+        }
+      }
+    }
+  });
   const Tabs$1 = _ref => {
     let {
       children
@@ -11997,7 +12478,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 108,
+        lineNumber: 162,
         columnNumber: 5
       }
     }), addPropsToChildren(children, {
@@ -12011,16 +12492,94 @@
     } = _ref2,
         props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
+    const [listContainerScrollPosition, setlistContainerScrollPosition] = React.useState(0);
+    const [scrollAreaWidth, setScrollAreaWidth] = React.useState(0);
+    const listContainerRef = React.useRef();
+    React.useLayoutEffect(() => {
+      if (listContainerRef && listContainerRef.current) {
+        setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+      }
+    }, [listContainerRef, activeTabs]);
+    return /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: {
+        position: 'relative'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 121,
-        columnNumber: 10
+        lineNumber: 184,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
+      ref: listContainerRef,
+      onScroll: e => setlistContainerScrollPosition(e.target.scrollLeft),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 185,
+        columnNumber: 7
       }
     }), addPropsToChildren(children, {
       activeTabs
-    }));
+    })), listContainerScrollPosition > 10 && /*#__PURE__*/React__default["default"].createElement(ScrollButtonContainer, {
+      position: "left",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 189,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollButton, {
+      position: "left",
+      type: "button",
+      buttonType: "ghost",
+      size: "xs",
+      icon: true,
+      onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 190,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgLeftOutline, {
+      color: colors$4.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 198,
+        columnNumber: 13
+      }
+    }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default["default"].createElement(ScrollButtonContainer, {
+      position: "right",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 203,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollButton, {
+      position: "right",
+      type: "button",
+      buttonType: "ghost",
+      size: "xs",
+      icon: true,
+      onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 204,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgRightOutline, {
+      color: colors$4.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 212,
+        columnNumber: 13
+      }
+    }))));
   };
   const TabsTrigger$1 = _ref3 => {
     let {
@@ -12038,7 +12597,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 127,
+        lineNumber: 223,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -12051,14 +12610,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 131,
+          lineNumber: 227,
           columnNumber: 11
         }
       }, wrappedChildren),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 128,
+        lineNumber: 224,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -12070,7 +12629,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 136,
+        lineNumber: 232,
         columnNumber: 9
       }
     }, icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
@@ -12084,7 +12643,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 154,
+        lineNumber: 250,
         columnNumber: 58
       }
     }));
@@ -14397,25 +14956,6 @@
   var AccordionItem = StyledItem$1;
   var AccordionContent = AccordionPrimitive__namespace.Content;
 
-  function useMediaQuery(query) {
-    const [matches, setMatches] = React.useState(false);
-    React.useEffect(() => {
-      const media = window.matchMedia(query);
-
-      if (media.matches !== matches) {
-        setMatches(media.matches);
-      }
-
-      const listener = () => {
-        setMatches(media.matches);
-      };
-
-      media.addEventListener('change', listener);
-      return () => media.removeEventListener('change', listener);
-    }, [matches, query]);
-    return matches;
-  }
-
   var ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
   var Item$1 = styled(ButtonGroupItem, {
     fontSize: '$label',
@@ -22942,12 +23482,13 @@
           handleUpload(files);
         } else {
           if (onBeforeCrop) {
-            var _files$;
+            var _files$, _files$2;
 
             // program to get the dimensions of an image
             const img = document.createElement('img');
             img.src = URL.createObjectURL(files[0]);
             img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
+            img.type = files === null || files === void 0 ? void 0 : (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.type;
 
             img.onload = () => {
               var _onBeforeCrop, _onBeforeCrop$then;
@@ -23135,7 +23676,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 607,
+          lineNumber: 608,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -23145,7 +23686,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 608,
+          lineNumber: 609,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -23161,7 +23702,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 618,
+              lineNumber: 619,
               columnNumber: 16
             }
           });
@@ -23173,7 +23714,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 621,
+            lineNumber: 622,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23183,7 +23724,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 622,
+            lineNumber: 623,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23192,7 +23733,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 624,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23205,7 +23746,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 624,
+            lineNumber: 625,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23214,7 +23755,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 632,
+            lineNumber: 633,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23224,7 +23765,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 634,
+            lineNumber: 635,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -23243,7 +23784,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 645,
+              lineNumber: 646,
               columnNumber: 16
             }
           });
@@ -23254,7 +23795,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 648,
+            lineNumber: 649,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23264,7 +23805,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 649,
+            lineNumber: 650,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23273,7 +23814,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 650,
+            lineNumber: 651,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23286,7 +23827,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 651,
+            lineNumber: 652,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23296,14 +23837,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 659,
+            lineNumber: 660,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 660,
+            lineNumber: 661,
             columnNumber: 17
           }
         }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -23311,7 +23852,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 661,
+            lineNumber: 662,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23326,7 +23867,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 662,
+            lineNumber: 663,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23339,7 +23880,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 677,
+            lineNumber: 678,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23348,7 +23889,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 685,
+            lineNumber: 686,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -23356,7 +23897,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 687,
+            lineNumber: 688,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -23372,7 +23913,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 698,
+          lineNumber: 699,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23386,7 +23927,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 700,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -23412,7 +23953,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 700,
+          lineNumber: 701,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23420,14 +23961,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 713,
+          lineNumber: 714,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 714,
+          lineNumber: 715,
           columnNumber: 11
         }
       }, "Berkas sedang diunggah")));
@@ -23440,7 +23981,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 722,
+          lineNumber: 723,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -23456,7 +23997,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 723,
+          lineNumber: 724,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -23468,21 +24009,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 735,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 736,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 737,
+          lineNumber: 738,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -23491,7 +24032,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 738,
+          lineNumber: 739,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -23499,7 +24040,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 739,
+          lineNumber: 740,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23509,14 +24050,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 741,
+          lineNumber: 742,
           columnNumber: 17
         }
       }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 748,
+          lineNumber: 749,
           columnNumber: 19
         }
       }, error));
@@ -23527,7 +24068,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 755,
+          lineNumber: 756,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -23535,7 +24076,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 756,
+          lineNumber: 757,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23543,7 +24084,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 757,
+          lineNumber: 758,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -23556,7 +24097,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 759,
+          lineNumber: 760,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -23568,7 +24109,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 762,
+          lineNumber: 763,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -23579,7 +24120,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 763,
+          lineNumber: 764,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23593,14 +24134,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 765,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 767,
+          lineNumber: 768,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23612,14 +24153,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 769,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 770,
+          lineNumber: 771,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -23627,7 +24168,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 772,
+          lineNumber: 773,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -23639,7 +24180,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 774,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23647,7 +24188,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 780,
+          lineNumber: 781,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23656,7 +24197,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 781,
+          lineNumber: 782,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23664,7 +24205,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 784,
+          lineNumber: 785,
           columnNumber: 15
         }
       }, "Simpan")))));
@@ -23680,7 +24221,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 793,
+        lineNumber: 794,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23689,7 +24230,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 796,
+        lineNumber: 797,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -24067,14 +24608,14 @@
     };
 
     React__namespace.useEffect(function () {
-      if (props.withComponent) {
+      if (props.withComponent || (props === null || props === void 0 ? void 0 : props.variant)) {
         setTimeout(function () {
           setRender(function (prev) {
             return prev + 1;
           });
         }, 100);
       }
-    }, [props.withComponent]);
+    }, [props.withComponent, props === null || props === void 0 ? void 0 : props.variant]);
 
     var renderVariant = function renderVariant(variant) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -29145,8 +29686,10 @@
     var progress = _a.progress,
         description = _a.description,
         showProgressOnly = _a.showProgressOnly,
-        css = _a.css;
-    return jsxRuntime.jsxs(Container$4, __assign({
+        css = _a.css,
+        visibility = _a.visibility,
+        colors = _a.colors;
+    return visibility && jsxRuntime.jsxs(Container$4, __assign({
       css: css
     }, {
       children: [jsxRuntime.jsx(Progress, __assign({
@@ -29155,6 +29698,9 @@
         children: jsxRuntime.jsx(ProgressIndicator$1, {
           style: {
             transform: "translateX(-".concat(100 - progress, "%)")
+          },
+          css: {
+            background: (colors === null || colors === void 0 ? void 0 : colors.length) > 1 ? "linear-gradient(90deg, ".concat(colors === null || colors === void 0 ? void 0 : colors[0], " 35%, ").concat(colors === null || colors === void 0 ? void 0 : colors[1], " 100%)") : colors === null || colors === void 0 ? void 0 : colors[0]
           }
         }, void 0)
       }), void 0), !showProgressOnly && jsxRuntime.jsx(ProgressText, {
@@ -29167,41 +29713,54 @@
 
   function LoadingBar(props) {
     var show = props.show,
-        isAuto = props.isAuto,
         onCompleted = props.onCompleted;
 
     var _a = React.useState(0),
         progress = _a[0],
         setProgress = _a[1];
 
+    var _b = React.useState(false),
+        visibility = _b[0],
+        setVisibility = _b[1];
+
     React.useEffect(function () {
       if (show) {
+        setVisibility(true);
         interval = setInterval(function () {
           setProgress(function (prev) {
-            return prev + 2;
+            return prev + 1;
           });
-        }, 500);
+        }, 100);
       } else {
         setProgress(100);
         clearInterval(interval);
-        onCompleted && onCompleted();
+        setTimeout(function () {
+          setVisibility(false);
+          setProgress(0);
+        }, 1000);
       }
-    }, [show, onCompleted]);
+    }, [show]);
     React.useEffect(function () {
       if (progress === 100) {
         clearInterval(interval);
-      }
-    }, [progress]);
-    return isAuto ? jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props, {
+        onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
+        setTimeout(function () {
+          setVisibility(false);
+          setProgress(0);
+        }, 1000);
+      }
+    }, [progress, onCompleted]);
+    return typeof (props === null || props === void 0 ? void 0 : props.progress) === 'number' ? jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props, {
+      visibility: true
+    }), void 0) : jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props, {
+      visibility: visibility,
       progress: progress
-    }), void 0) : jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props), void 0);
+    }), void 0);
   }
 
   LoadingBar.defaultProps = {
     showProgressOnly: false,
-    isAuto: false,
     show: false,
-    progress: 0,
     description: 'Loading...'
   };
 
@@ -33235,6 +33794,7 @@
   exports.SelectItem = SelectItem;
   exports.SelectOption = SelectOption;
   exports.Separator = Separator$2;
+  exports.Skeleton = Skeleton;
   exports.Slider = Slider;
   exports.StepWizard = StepWizard;
   exports.StepWizardContext = StepWizardContext;