@majoo-ui/react 1.53.2 → 1.54.0

package/index.esm.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
 import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { Portal } from '@majoo-ui/helpers';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -2497,7 +2498,429 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$z = ["children", "isCollapse", "css", "contentHeader"];
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  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;
+}
+
+const StyledSkeleton = props => {
+  const {
+    color,
+    count,
+    width,
+    size,
+    circle
+  } = props;
+
+  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 jsx(SkeletonTheme, Object.assign({
+    width: width,
+    borderRadius: size === 'lg' ? 0 : 20,
+    baseColor: getBaseColor(color),
+    highlightColor: "#FAFAFA"
+  }, {
+    children: jsx(ReactSkeleton, {
+      height: getSize(size),
+      count: count,
+      circle: circle
+    }, void 0)
+  }), void 0);
+};
+
+const Card$1 = styled('div', {
+  padding: 40,
+  borderRadius: 8,
+  background: '$bgWhite',
+  boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)',
+  position: 'relative'
+});
+const Space = styled('div', {
+  height: 8,
+  variants: {
+    size: {
+      sm: {
+        height: 8
+      },
+      md: {
+        height: 18
+      }
+    }
+  }
+});
+function Skeleton() {
+  const isDesktop = useMediaQuery('(min-width: 767px)');
+
+  if (isDesktop) {
+    return jsxs(Grid, Object.assign({
+      columns: 6,
+      gapY: 5
+    }, {
+      children: [jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxs(Grid, Object.assign({
+          columns: 6,
+          gapX: 2
+        }, {
+          children: [jsx(GridItem, Object.assign({
+            colSpan: 2
+          }, {
+            children: jsxs(Card$1, {
+              children: [jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0)]
+            }, void 0)
+          }), void 0), jsx(GridItem, Object.assign({
+            colSpan: 2
+          }, {
+            children: jsxs(Card$1, {
+              children: [jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0)]
+            }, void 0)
+          }), void 0), jsx(GridItem, Object.assign({
+            colSpan: 2
+          }, {
+            children: jsxs(Card$1, {
+              children: [jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0)]
+            }, void 0)
+          }), void 0)]
+        }), void 0)
+      }), void 0), jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsx(Card$1, {
+          children: jsxs(Grid, Object.assign({
+            columns: 6,
+            gapY: 5
+          }, {
+            children: [jsx(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: jsxs(Grid, Object.assign({
+                columns: 6,
+                gapX: 2
+              }, {
+                children: [jsxs(GridItem, Object.assign({
+                  colSpan: 2
+                }, {
+                  children: [jsx(StyledSkeleton, {
+                    size: "lg"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsx(StyledSkeleton, {
+                    size: "md",
+                    color: "primary",
+                    width: "85%"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsxs(Box, {
+                    children: [jsx(StyledSkeleton, {
+                      width: "85%"
+                    }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                      width: "60%"
+                    }, void 0)]
+                  }, void 0)]
+                }), void 0), jsxs(GridItem, Object.assign({
+                  colSpan: 2
+                }, {
+                  children: [jsx(StyledSkeleton, {
+                    size: "lg"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsx(StyledSkeleton, {
+                    size: "md",
+                    color: "primary",
+                    width: "85%"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsxs(Box, {
+                    children: [jsx(StyledSkeleton, {
+                      width: "85%"
+                    }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                      width: "60%"
+                    }, void 0)]
+                  }, void 0)]
+                }), void 0), jsxs(GridItem, Object.assign({
+                  colSpan: 2
+                }, {
+                  children: [jsx(StyledSkeleton, {
+                    size: "lg"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsx(StyledSkeleton, {
+                    size: "md",
+                    color: "primary",
+                    width: "85%"
+                  }, void 0), jsx(Space, {
+                    size: "md"
+                  }, void 0), jsxs(Box, {
+                    children: [jsx(StyledSkeleton, {
+                      width: "85%"
+                    }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                      width: "60%"
+                    }, void 0)]
+                  }, void 0)]
+                }), void 0)]
+              }), void 0)
+            }), void 0), jsxs(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: [jsx(StyledSkeleton, {
+                width: "50%"
+              }, void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "95%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "95%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "95%"
+                }, void 0)]
+              }), void 0)]
+            }), void 0)]
+          }), void 0)
+        }, void 0)
+      }), void 0)]
+    }), void 0);
+  } else {
+    return jsxs(Grid, Object.assign({
+      columns: 6,
+      gapY: 4
+    }, {
+      children: [jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsxs(Card$1, {
+          children: [jsx(StyledSkeleton, {
+            size: "md",
+            color: "primary"
+          }, void 0), jsx(Space, {
+            size: "md"
+          }, void 0), jsxs(Box, {
+            children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+              width: "60%"
+            }, void 0)]
+          }, void 0), jsx(Space, {
+            size: "md"
+          }, void 0), jsxs(Box, {
+            children: [jsx(StyledSkeleton, {}, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+              width: "60%"
+            }, void 0)]
+          }, void 0)]
+        }, void 0)
+      }), void 0), jsx(GridItem, Object.assign({
+        colSpan: 6
+      }, {
+        children: jsx(Card$1, {
+          children: jsxs(Grid, {
+            children: [jsxs(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: [jsx(StyledSkeleton, {
+                size: "lg"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsx(StyledSkeleton, {
+                size: "md",
+                color: "primary",
+                width: "85%"
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0), jsxs(Box, {
+                children: [jsx(StyledSkeleton, {
+                  width: "85%"
+                }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
+                  width: "60%"
+                }, void 0)]
+              }, void 0), jsx(Space, {
+                size: "md"
+              }, void 0)]
+            }), void 0), jsxs(GridItem, Object.assign({
+              colSpan: 6
+            }, {
+              children: [jsx(StyledSkeleton, {
+                width: "50%"
+              }, void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "85%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  height: 12,
+                  width: "85%"
+                }, void 0)]
+              }), void 0), jsx(Space, {}, void 0), jsxs(SkeletonTheme, Object.assign({
+                inline: true,
+                borderRadius: 20,
+                baseColor: colors$4.gray150,
+                highlightColor: "#FAFAFA"
+              }, {
+                children: [jsx(ReactSkeleton, {
+                  style: {
+                    marginRight: 8
+                  },
+                  height: 12,
+                  width: 12,
+                  circle: true
+                }, void 0), jsx(ReactSkeleton, {
+                  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',
@@ -2525,7 +2948,8 @@ const PageContainer = _ref => {
     children,
     isCollapse,
     css,
-    contentHeader
+    contentHeader,
+    isLoading
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
@@ -2538,10 +2962,17 @@ const PageContainer = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 28,
+      lineNumber: 29,
       columnNumber: 5
     }
-  }), contentHeader, children);
+  }), isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$_,
+      lineNumber: 31,
+      columnNumber: 9
+    }
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, contentHeader, children));
 };
 
 PageContainer.displayName = 'PageContainer';
@@ -14355,25 +14786,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.Content;
 
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState(false);
-  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;
-}
-
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {});
 const Item$1 = styled(ButtonGroupItem, {
   fontSize: '$label',
@@ -22684,12 +23096,13 @@ const Upload = ({
         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;
@@ -22877,7 +23290,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 607,
+        lineNumber: 608,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22887,7 +23300,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 608,
+        lineNumber: 609,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22903,7 +23316,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 618,
+            lineNumber: 619,
             columnNumber: 16
           }
         });
@@ -22915,7 +23328,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 621,
+          lineNumber: 622,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22925,7 +23338,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 622,
+          lineNumber: 623,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22934,7 +23347,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 624,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22947,7 +23360,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 625,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22956,7 +23369,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 632,
+          lineNumber: 633,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22966,7 +23379,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 635,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22985,7 +23398,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 645,
+            lineNumber: 646,
             columnNumber: 16
           }
         });
@@ -22996,7 +23409,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 648,
+          lineNumber: 649,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -23006,7 +23419,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 650,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -23015,7 +23428,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 651,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -23028,7 +23441,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 652,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23038,14 +23451,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 659,
+          lineNumber: 660,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -23053,7 +23466,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 661,
+          lineNumber: 662,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -23068,7 +23481,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 662,
+          lineNumber: 663,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -23081,7 +23494,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 677,
+          lineNumber: 678,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -23090,7 +23503,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 685,
+          lineNumber: 686,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -23098,7 +23511,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 687,
+          lineNumber: 688,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -23114,7 +23527,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 699,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23128,7 +23541,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 700,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -23154,7 +23567,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 701,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -23162,14 +23575,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 714,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 714,
+        lineNumber: 715,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -23182,7 +23595,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 723,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -23198,7 +23611,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 723,
+        lineNumber: 724,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -23210,21 +23623,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 735,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 736,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 737,
+        lineNumber: 738,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -23233,7 +23646,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 738,
+        lineNumber: 739,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -23241,7 +23654,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 739,
+        lineNumber: 740,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -23251,14 +23664,14 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 748,
+        lineNumber: 749,
         columnNumber: 19
       }
     }, error));
@@ -23269,7 +23682,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 755,
+        lineNumber: 756,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -23277,7 +23690,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 756,
+        lineNumber: 757,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -23285,7 +23698,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 757,
+        lineNumber: 758,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -23298,7 +23711,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 760,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -23310,7 +23723,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 762,
+        lineNumber: 763,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -23321,7 +23734,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 763,
+        lineNumber: 764,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -23335,14 +23748,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 765,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 767,
+        lineNumber: 768,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23354,14 +23767,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 769,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 770,
+        lineNumber: 771,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -23369,7 +23782,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 772,
+        lineNumber: 773,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -23381,7 +23794,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 773,
+        lineNumber: 774,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23389,7 +23802,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 780,
+        lineNumber: 781,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -23398,7 +23811,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 781,
+        lineNumber: 782,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -23406,7 +23819,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 784,
+        lineNumber: 785,
         columnNumber: 15
       }
     }, "Simpan")))));
@@ -23422,7 +23835,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 793,
+      lineNumber: 794,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -23431,7 +23844,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 796,
+      lineNumber: 797,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -28861,9 +29274,11 @@ function PrimitiveLoadingBar({
   progress,
   description,
   showProgressOnly,
-  css
+  css,
+  visibility,
+  colors
 }) {
-  return jsxs(Container$4, Object.assign({
+  return visibility && jsxs(Container$4, Object.assign({
     css: css
   }, {
     children: [jsx(Progress, Object.assign({
@@ -28872,6 +29287,9 @@ function PrimitiveLoadingBar({
       children: jsx(ProgressIndicator$1, {
         style: {
           transform: `translateX(-${100 - progress}%)`
+        },
+        css: {
+          background: (colors === null || colors === void 0 ? void 0 : colors.length) > 1 ? `linear-gradient(90deg, ${colors === null || colors === void 0 ? void 0 : colors[0]} 35%, ${colors === null || colors === void 0 ? void 0 : colors[1]} 100%)` : colors === null || colors === void 0 ? void 0 : colors[0]
         }
       }, void 0)
     }), void 0), !showProgressOnly && jsx(ProgressText, {
@@ -28885,36 +29303,46 @@ let interval;
 function LoadingBar(props) {
   const {
     show,
-    isAuto,
     onCompleted
   } = props;
   const [progress, setProgress] = useState(0);
+  const [visibility, setVisibility] = useState(false);
   useEffect(() => {
     if (show) {
+      setVisibility(true);
       interval = setInterval(() => {
-        setProgress(prev => prev + 2);
-      }, 500);
+        setProgress(prev => prev + 1);
+      }, 100);
     } else {
       setProgress(100);
       clearInterval(interval);
-      onCompleted && onCompleted();
+      setTimeout(() => {
+        setVisibility(false);
+        setProgress(0);
+      }, 1000);
     }
-  }, [show, onCompleted]);
+  }, [show]);
   useEffect(() => {
     if (progress === 100) {
       clearInterval(interval);
-    }
-  }, [progress]);
-  return isAuto ? jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+      onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted();
+      setTimeout(() => {
+        setVisibility(false);
+        setProgress(0);
+      }, 1000);
+    }
+  }, [progress, onCompleted]);
+  return typeof (props === null || props === void 0 ? void 0 : props.progress) === 'number' ? jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+    visibility: true
+  }), void 0) : jsx(PrimitiveLoadingBar, Object.assign({}, props, {
+    visibility: visibility,
     progress: progress
-  }), void 0) : jsx(PrimitiveLoadingBar, Object.assign({}, props), void 0);
+  }), void 0);
 }
 
 LoadingBar.defaultProps = {
   showProgressOnly: false,
-  isAuto: false,
   show: false,
-  progress: 0,
   description: 'Loading...'
 };
 
@@ -32659,4 +33087,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };