@majoo-ui/react 1.54.0 → 1.54.1-rc.2

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('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';
+  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-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), 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-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', '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.ReactSkeleton, null, 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, ReactSkeleton, skeleton_css, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +27,6 @@
   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);
@@ -55,6 +54,7 @@
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
+  var ReactSkeleton__default = /*#__PURE__*/_interopDefaultLegacy(ReactSkeleton);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var imageCompressionComponent__default = /*#__PURE__*/_interopDefaultLegacy(imageCompressionComponent);
 
@@ -2611,427 +2611,7 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  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"];
+  const _excluded$z = ["children", "isCollapse", "css", "contentHeader"];
   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',
@@ -3059,8 +2639,7 @@
       children,
       isCollapse,
       css,
-      contentHeader,
-      isLoading
+      contentHeader
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
@@ -3073,17 +2652,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 29,
+        lineNumber: 28,
         columnNumber: 5
       }
-    }), 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));
+    }), contentHeader, children);
   };
 
   PageContainer.displayName = 'PageContainer';
@@ -4089,7 +3661,7 @@
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      value === null || value === void 0 ? void 0 : value.onRemove();
+      value == null ? void 0 : value.onRemove();
     },
     __self: undefined,
     __source: {
@@ -4166,7 +3738,7 @@
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
-        props === null || props === void 0 ? void 0 : props.onRemove();
+        props == null ? void 0 : props.onRemove();
       },
       closeCenter: !props.title && !props.link,
       __self: undefined,
@@ -4722,7 +4294,7 @@
       }
     }
   });
-  const Card = _ref => {
+  const Card$1 = _ref => {
     let {
       className,
       children,
@@ -4785,7 +4357,7 @@
       }
     }, title)) : null, children);
   };
-  Card.propTypes = {
+  Card$1.propTypes = {
     className: PropTypes__default["default"].string,
     color: PropTypes__default["default"].string,
     shadow: PropTypes__default["default"].bool,
@@ -4796,7 +4368,7 @@
     textColor: PropTypes__default["default"].string,
     icon: PropTypes__default["default"].element
   };
-  Card.defaultProps = {
+  Card$1.defaultProps = {
     className: '',
     color: 'green',
     shadow: false,
@@ -6209,7 +5781,7 @@
     const [isChecked, setChecked] = React.useState(false);
     React.useEffect(() => {
       const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-      setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
+      setChecked(checkValue != null ? checkValue : false);
     }, [checked, indeterminate, context]);
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -6818,7 +6390,7 @@
     React.useEffect(() => {
       if (textareaRef.current) {
         textareaRef.current.style.height = '60px';
-        const scrollHeight = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current.scrollHeight;
+        const scrollHeight = textareaRef == null ? void 0 : textareaRef.current.scrollHeight;
         textareaRef.current.style.height = scrollHeight + 20 + 'px';
       }
     }, []);
@@ -6860,7 +6432,7 @@
   var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
   const RadioGroup = styled(RadioGroupPrimitive__namespace.Root, Flex$1);
   function InputRadioGroup(props) {
-    return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+    return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
@@ -6875,7 +6447,7 @@
         lineNumber: 14,
         columnNumber: 9
       }
-    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), React__default["default"].Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
       style: Object.assign({}, child.props.style, {
         opacity: 1
       })
@@ -7089,7 +6661,7 @@
       value,
       outlined
     }) => {
-      const checked = value !== null && value !== void 0 ? value : defaultValue;
+      const checked = value != null ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$8, {
         direction: "column",
         outlined: outlined,
@@ -7339,7 +6911,7 @@
       size: size,
       isInvalid: isInvalid,
       readOnly: readOnly,
-      isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
+      isReadOnly: readOnly && !(props != null && props.inputGroup),
       disabled: disabled
     }, props, {
       __self: undefined,
@@ -8155,18 +7727,18 @@
     const addTags = event => {
       if (event.key === 'Enter' && event.target.value !== '' && max !== tags.length) {
         if (tags.find(tag => tag.toLowerCase() === event.target.value.toLowerCase())) {
-          onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+          onEnter == null ? void 0 : onEnter({
             key: 'duplicate',
             value: event.target.value
           });
           return;
         }
 
-        if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
+        if (pattern && pattern != null && pattern.regex) {
           const regex = new RegExp(pattern.regex);
 
           if (!regex.test(event.target.value)) {
-            onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+            onEnter == null ? void 0 : onEnter({
               key: 'error',
               value: event.target.value
             });
@@ -8176,7 +7748,7 @@
         }
 
         setRegexError(false);
-        onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+        onEnter == null ? void 0 : onEnter({
           key: 'success',
           value: event.target.value
         });
@@ -8189,7 +7761,7 @@
       if (disabled || readOnly) {
         return tags;
       } else if (key === 'removeTag' || key === 'Backspace') {
-        onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(tags[index]);
+        onRemoveItem == null ? void 0 : onRemoveItem(tags[index]);
         setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
       }
     }; // const handleErrorMessage = () => {
@@ -8237,7 +7809,7 @@
         lineNumber: 180,
         columnNumber: 9
       }
-    })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
+    })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
       color: "red",
       __self: this,
       __source: {
@@ -10115,10 +9687,10 @@
           return setItems(sortValue);
         }
       } else {
-        let filterItems = option === null || option === void 0 ? void 0 : option.filter(item => {
-          var _item$name, _item$name$toLowerCas, _item$name$toLowerCas2, _input$toLocaleLowerC;
+        let filterItems = option == null ? void 0 : option.filter(item => {
+          var _item$name, _item$name$toLowerCas;
 
-          return item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) === null || _item$name$toLowerCas === void 0 ? void 0 : (_item$name$toLowerCas2 = _item$name$toLowerCas.includes) === null || _item$name$toLowerCas2 === void 0 ? void 0 : _item$name$toLowerCas2.call(_item$name$toLowerCas, input === null || input === void 0 ? void 0 : (_input$toLocaleLowerC = input.toLocaleLowerCase) === null || _input$toLocaleLowerC === void 0 ? void 0 : _input$toLocaleLowerC.call(input));
+          return item == null ? void 0 : (_item$name = item.name) == null ? void 0 : (_item$name$toLowerCas = _item$name.toLowerCase()) == null ? void 0 : _item$name$toLowerCas.includes == null ? void 0 : _item$name$toLowerCas.includes(input == null ? void 0 : input.toLocaleLowerCase == null ? void 0 : input.toLocaleLowerCase());
         });
         setItems(filterItems);
       }
@@ -10128,9 +9700,9 @@
       if (disabled || readOnly) {
         return selectedValue;
       } else {
-        if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
+        if ((selected == null ? void 0 : selected.id) === 'counter') {
           setSelectedValue([]);
-          onChange === null || onChange === void 0 ? void 0 : onChange([]);
+          onChange == null ? void 0 : onChange([]);
 
           for (let i = 0; i < selectedValue.length; i++) {
             removeSelectedItem(selectedValue[i]);
@@ -10141,7 +9713,7 @@
           setSelectedValue(filterItems);
 
           if (selected.id !== '!all') {
-            onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+            onChange == null ? void 0 : onChange(filterItems);
           }
         }
       }
@@ -10186,7 +9758,7 @@
                       removeSelectedItem(item);
                     });
                     setSelectedValue([]);
-                    onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                    onChange == null ? void 0 : onChange([]);
                   } else {
                     removeItem(selectedItem);
                   }
@@ -10201,12 +9773,12 @@
                     itemIds.push(item.id);
                   });
                   setSelectedValue(itemIds);
-                  onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
+                  onChange == null ? void 0 : onChange(itemIds.slice(1));
                 } else {
                   addSelectedItem(selectedItem);
                   setSelectedValue([...selectedValue, selectedItem.id]);
                   const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
-                  onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
+                  onChange == null ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
                 }
 
                 selectItem(null);
@@ -10358,7 +9930,7 @@
         lineNumber: 559,
         columnNumber: 11
       }
-    }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+    }, selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
@@ -10382,7 +9954,7 @@
         lineNumber: 563,
         columnNumber: 17
       }
-    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
@@ -10395,7 +9967,7 @@
         maxWidth: '150px !important'
       },
       disabled: disabled,
-      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
+      isRemovable: readOnly || disabled || Boolean(selectedItems == null ? void 0 : selectedItems.length),
       size: size,
       readOnly: readOnly // {...getSelectedItemProps({ selectedItem, index })}
       ,
@@ -10417,7 +9989,7 @@
         lineNumber: 586,
         columnNumber: 13
       }
-    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -10485,7 +10057,7 @@
         lineNumber: 640,
         columnNumber: 27
       }
-    }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
+    }), showSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < (items == null ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
@@ -11768,8 +11340,8 @@
       ref: floating,
       style: Object.assign({
         position: strategy,
-        top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
-        left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
+        top: isMobile ? 0 : y != null ? y : '',
+        left: isMobile ? 0 : x != null ? x : '',
         zIndex: zIndices.popover
       }, style)
     }), {
@@ -13002,7 +12574,7 @@
         props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
     const getValue = () => {
-      let value = props === null || props === void 0 ? void 0 : props.value;
+      let value = props == null ? void 0 : props.value;
 
       if (typeof value === 'number' || parseInt(value)) {
         if (Math.sign(value) === 1 || Math.sign(value) === 0) {
@@ -14956,6 +14528,25 @@
   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',
@@ -17839,7 +17430,7 @@
         lineNumber: 40,
         columnNumber: 11
       }
-    }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+    }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
       key: limit,
       css: limitItemContainerStyle(selectedLimit === limit),
       onClick: () => onChange(limit),
@@ -20488,7 +20079,7 @@
         if (!props.onOpenAutoFocus) {
           e.preventDefault();
         } else {
-          props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+          props == null ? void 0 : props.onOpenAutoFocus();
         }
       },
       __self: undefined,
@@ -20609,8 +20200,8 @@
       size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -20629,12 +20220,12 @@
       size: "sm",
       onClick: buttonCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.cancelButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -20656,8 +20247,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
@@ -20817,8 +20408,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -20837,12 +20428,12 @@
       size: "sm",
       onClick: props.onCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props !== null && props !== void 0 && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
         flex: props.isMobile && 1
       },
       buttonType: "ghost",
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.cancelButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -20864,8 +20455,8 @@
       css: {
         flex: props.isMobile && 1
       },
-      disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-    }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+      disabled: props == null ? void 0 : props.disabledButton
+    }, props == null ? void 0 : props.actionButtonProps, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
@@ -23381,7 +22972,7 @@
           upload({
             url: action,
             file: newFile,
-            customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
+            customBody: customBodyRequest == null ? void 0 : customBodyRequest(newFile),
             token,
             tokenKey,
             reqKey,
@@ -23404,12 +22995,12 @@
                 }
               }
 
-              onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
+              onChange == null ? void 0 : (_onChange = onChange({
                 fileList: arrProgress,
                 file: fileProgress,
                 indexReplace: indexReplace.current,
                 isReplace: indexReplace.current !== null
-              })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
+              })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
             }
           }).then(result => {
             var _onChange2, _onChange2$then;
@@ -23426,12 +23017,12 @@
               }
             }
 
-            onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
+            onChange == null ? void 0 : (_onChange2 = onChange({
               fileList: arrSuccess,
               file: fileSuccess,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
+            })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
           }).catch(error => {
             var _onChange3, _onChange3$then;
 
@@ -23447,22 +23038,22 @@
               }
             }
 
-            onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
+            onChange == null ? void 0 : (_onChange3 = onChange({
               fileList: arrError,
               file: fileError,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
+            })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
           });
         } else {
           var _onChange4, _onChange4$then;
 
-          onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
+          onChange == null ? void 0 : (_onChange4 = onChange({
             fileList: arrFile,
             file: newFile,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
+          })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
         }
 
         if (indexReplace.current !== null) {
@@ -23487,24 +23078,24 @@
             // 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.size = files == null ? void 0 : (_files$ = files[0]) == null ? void 0 : _files$.size;
+            img.type = files == null ? void 0 : (_files$2 = files[0]) == null ? void 0 : _files$2.type;
 
             img.onload = () => {
               var _onBeforeCrop, _onBeforeCrop$then;
 
-              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) === null || _onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
+              onBeforeCrop == null ? void 0 : (_onBeforeCrop = onBeforeCrop(img)) == null ? void 0 : (_onBeforeCrop$then = _onBeforeCrop.then(() => {
                 setError(null);
                 toggleModal();
                 setFileState(files[0]);
                 setPreviewImage(URL.createObjectURL(files[0]));
-              })) === null || _onBeforeCrop$then === void 0 ? void 0 : _onBeforeCrop$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+              })) == null ? void 0 : _onBeforeCrop$then.catch(error => setError(error == null ? void 0 : error.message));
             };
 
             img.onerror = error => {
               var _onBeforeCrop2, _onBeforeCrop2$then;
 
-              onBeforeCrop === null || onBeforeCrop === void 0 ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) === null || _onBeforeCrop2 === void 0 ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) === null || _onBeforeCrop2$then === void 0 ? void 0 : _onBeforeCrop2$then.catch(error => setError(error === null || error === void 0 ? void 0 : error.message));
+              onBeforeCrop == null ? void 0 : (_onBeforeCrop2 = onBeforeCrop(img, error)) == null ? void 0 : (_onBeforeCrop2$then = _onBeforeCrop2.then(() => setError(null))) == null ? void 0 : _onBeforeCrop2$then.catch(error => setError(error == null ? void 0 : error.message));
             };
           } else {
             toggleModal();
@@ -23516,15 +23107,15 @@
     }
 
     function handleCrop() {
-      if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
+      if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
         imgPreview(imgRef.current, completedCrop, 1, 0, ratio).then(blob => {
-          const sizeMB = (blob === null || blob === void 0 ? void 0 : blob.size) / 1024 / 1024;
+          const sizeMB = (blob == null ? void 0 : blob.size) / 1024 / 1024;
 
           if (sizeMB < maxSizeMB || sizeMB < 1 || !imageCompression) {
             var _fileState$name;
 
-            const file = new File([blob], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name = fileState.name) === null || _fileState$name === void 0 ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
-              type: blob === null || blob === void 0 ? void 0 : blob.type
+            const file = new File([blob], (fileState == null ? void 0 : (_fileState$name = fileState.name) == null ? void 0 : _fileState$name.replace(/\.[^/.]+$/, '')) + '.png', {
+              type: blob == null ? void 0 : blob.type
             });
             handleUpload([file]);
             setCrop(null);
@@ -23539,17 +23130,17 @@
             }).then(compressedFile => {
               var _fileState$name2;
 
-              const file = new File([compressedFile], (fileState === null || fileState === void 0 ? void 0 : (_fileState$name2 = fileState.name) === null || _fileState$name2 === void 0 ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
-                type: compressedFile === null || compressedFile === void 0 ? void 0 : compressedFile.type
+              const file = new File([compressedFile], (fileState == null ? void 0 : (_fileState$name2 = fileState.name) == null ? void 0 : _fileState$name2.replace(/\.[^/.]+$/, '')) + '.png', {
+                type: compressedFile == null ? void 0 : compressedFile.type
               });
               handleUpload([file]);
               setCrop(null);
               setCompletedCrop(null);
-            }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+            }).catch(error => console.error(error == null ? void 0 : error.message));
           }
 
           toggleModal();
-        }).catch(error => console.error(error === null || error === void 0 ? void 0 : error.message));
+        }).catch(error => console.error(error == null ? void 0 : error.message));
       } else {
         handleUpload([fileState]);
         toggleModal();
@@ -23580,7 +23171,7 @@
       const index = fileList.indexOf(file);
       const newFileList = fileList.slice();
       newFileList.splice(index, 1);
-      onChange === null || onChange === void 0 ? void 0 : onChange({
+      onChange == null ? void 0 : onChange({
         fileList: newFileList,
         file
       });
@@ -23608,22 +23199,22 @@
     function handleOpenFile(file) {
       var _String, _file$name;
 
-      let extension = (_String = String(file === null || file === void 0 ? void 0 : (_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop())) === null || _String === void 0 ? void 0 : _String.toLowerCase();
+      let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
 
       if (extension === 'pdf') {
-        window.open(file === null || file === void 0 ? void 0 : file.url);
+        window.open(file == null ? void 0 : file.url);
       } else {
-        request__default["default"].get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+        request__default["default"].get(file == null ? void 0 : file.url).end((err, res) => {
           if (err) {
             console.error(err.message);
           }
 
-          if (res && res !== null && res !== void 0 && res.ok) {
-            const response = res === null || res === void 0 ? void 0 : res.text;
+          if (res && res != null && res.ok) {
+            const response = res == null ? void 0 : res.text;
             const url = window.URL.createObjectURL(new Blob([response]));
             const link = document.createElement('a');
             link.href = url;
-            link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
+            link.setAttribute('download', file == null ? void 0 : file.name);
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -23693,12 +23284,12 @@
     }
 
     const renderPicture = () => {
-      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+      return fileList == null ? void 0 : fileList.map((item, index) => {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item === null || item === void 0 ? void 0 : item.percent,
-            loading: item === null || item === void 0 ? void 0 : item.loading,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -23773,14 +23364,14 @@
     };
 
     const renderFile = () => {
-      return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+      return fileList == null ? void 0 : fileList.map((item, index) => {
         var _item$name;
 
-        if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+        if ((item == null ? void 0 : item.status) === 'uploading') {
           return /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
             key: index,
-            progress: item === null || item === void 0 ? void 0 : item.percent,
-            loading: item === null || item === void 0 ? void 0 : item.loading,
+            progress: item == null ? void 0 : item.percent,
+            loading: item == null ? void 0 : item.loading,
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
@@ -23847,7 +23438,7 @@
             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, {
+        }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           label: item.name,
           __self: undefined,
           __source: {
@@ -24019,7 +23610,7 @@
           lineNumber: 736,
           columnNumber: 11
         }
-      }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -24053,7 +23644,7 @@
           lineNumber: 742,
           columnNumber: 17
         }
-      }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
+      }, placeholder != null ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
@@ -24213,7 +23804,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
-      gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
+      gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
       wrap: "wrap",
       css: {
         userSelect: 'none'
@@ -25052,10 +24643,10 @@
     const [isPopover, setIsPopover] = React.useState(false);
 
     function getColor() {
-      const color = props === null || props === void 0 ? void 0 : props.color;
+      const color = props == null ? void 0 : props.color;
 
       if (typeof color === 'string') {
-        return color === null || color === void 0 ? void 0 : color.toUpperCase();
+        return color == null ? void 0 : color.toUpperCase();
       }
 
       return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -28027,9 +27618,9 @@
             lineNumber: 120,
             columnNumber: 30
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) == null ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) == null ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
-          label: (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.tooltipsContents,
+          label: (_data3 = data[i - 1]) == null ? void 0 : _data3.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28048,9 +27639,9 @@
             lineNumber: 124,
             columnNumber: 19
           }
-        })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           css: {
-            marginLeft: (_data5 = data[i - 1]) !== null && _data5 !== void 0 && _data5.withTolltip ? 0 : '$spacing-03'
+            marginLeft: (_data5 = data[i - 1]) != null && _data5.withTolltip ? 0 : '$spacing-03'
           },
           align: "center",
           __self: undefined,
@@ -28102,7 +27693,7 @@
             height: 24,
             borderRadius: '$round',
             border: `4px solid ${isActive ? '$bgGreen' : '$bgInactive'}`,
-            backgroundColor: (_data6 = data[i - 1]) !== null && _data6 !== void 0 && _data6.disabled ? '$gray200' : '$white'
+            backgroundColor: (_data6 = data[i - 1]) != null && _data6.disabled ? '$gray200' : '$white'
           },
           __self: undefined,
           __source: {
@@ -28120,10 +27711,10 @@
             lineNumber: 163,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) == null ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) == null ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltipsContents,
+          label: (_data9 = data[i - 1]) == null ? void 0 : _data9.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -28139,11 +27730,11 @@
             lineNumber: 168,
             columnNumber: 19
           }
-        })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
           justify: "center",
           css: {
-            marginTop: (_data11 = data[i - 1]) !== null && _data11 !== void 0 && _data11.withTolltip ? 0 : '$spacing-03'
+            marginTop: (_data11 = data[i - 1]) != null && _data11.withTolltip ? 0 : '$spacing-03'
           },
           __self: undefined,
           __source: {
@@ -28225,9 +27816,7 @@
       }));
     }, [props.hide]);
     React.useEffect(() => {
-      var _props$onChangeVisibi;
-
-      props === null || props === void 0 ? void 0 : (_props$onChangeVisibi = props.onChangeVisibility) === null || _props$onChangeVisibi === void 0 ? void 0 : _props$onChangeVisibi.call(props, state.hide);
+      props == null ? void 0 : props.onChangeVisibility == null ? void 0 : props.onChangeVisibility(state.hide);
     }, [state.hide]);
 
     const toogleVisibility = value => {
@@ -28239,13 +27828,13 @@
     const getIsComplete = currentStep => {
       var _state$isComplete;
 
-      return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
+      return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
     };
 
     const getTitleStep = currentStep => {
       var _props$navContents, _props$navContents2;
 
-      return props === null || props === void 0 ? void 0 : (_props$navContents = props.navContents) === null || _props$navContents === void 0 ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) === null || _props$navContents2 === void 0 ? void 0 : _props$navContents2.title;
+      return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
     };
 
     const setState = value => {
@@ -28287,15 +27876,15 @@
       });
       props.onStepChange && props.onStepChange(e);
 
-      if (props !== null && props !== void 0 && (_props$navContents3 = props.navContents) !== null && _props$navContents3 !== void 0 && (_props$navContents4 = _props$navContents3[(e === null || e === void 0 ? void 0 : e.activeStep) - 1]) !== null && _props$navContents4 !== void 0 && _props$navContents4.disabled) {
-        if ((e === null || e === void 0 ? void 0 : e.activeStep) > (e === null || e === void 0 ? void 0 : e.previousStep)) {
+      if (props != null && (_props$navContents3 = props.navContents) != null && (_props$navContents4 = _props$navContents3[(e == null ? void 0 : e.activeStep) - 1]) != null && _props$navContents4.disabled) {
+        if ((e == null ? void 0 : e.activeStep) > (e == null ? void 0 : e.previousStep)) {
           var _state$SW;
 
-          state === null || state === void 0 ? void 0 : (_state$SW = state.SW) === null || _state$SW === void 0 ? void 0 : _state$SW.nextStep();
+          state == null ? void 0 : (_state$SW = state.SW) == null ? void 0 : _state$SW.nextStep();
         } else {
           var _state$SW2;
 
-          state === null || state === void 0 ? void 0 : (_state$SW2 = state.SW) === null || _state$SW2 === void 0 ? void 0 : _state$SW2.previousStep();
+          state == null ? void 0 : (_state$SW2 = state.SW) == null ? void 0 : _state$SW2.previousStep();
         }
       }
     };
@@ -28311,11 +27900,11 @@
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
       value: {
         toogleVisibility,
-        isHide: state === null || state === void 0 ? void 0 : state.hide,
+        isHide: state == null ? void 0 : state.hide,
         setComplete,
         setState,
         state,
-        SW: state === null || state === void 0 ? void 0 : state.SW,
+        SW: state == null ? void 0 : state.SW,
         forbidClickNav: props.forbidClickNav,
         titles: props.titles,
         isMobile: props.isMobile,
@@ -28488,10 +28077,10 @@
     function getDatasets(content, activeId, isCollapse) {
       const datasets = [];
 
-      for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
+      for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
         var _content$i;
 
-        if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
+        if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
           datasets.unshift(content[i]);
         } else {
           datasets.push(content[i]);
@@ -28531,7 +28120,7 @@
         lineNumber: 99,
         columnNumber: 7
       }
-    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
+    }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
       return /*#__PURE__*/React__default["default"].createElement(List, {
         key: index,
         __self: this,
@@ -28548,11 +28137,11 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item == null ? void 0 : item.id) === activeId ? colors$4.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
-        "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
+        "data-to-scrollspy-id": item == null ? void 0 : item.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
@@ -28561,8 +28150,8 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
         className: "link-title",
-        active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
-        href: `#${item === null || item === void 0 ? void 0 : item.id}`,
+        active: (item == null ? void 0 : item.id) === activeId,
+        href: `#${item == null ? void 0 : item.id}`,
         onClick: e => {
           e.preventDefault();
           const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
@@ -28591,7 +28180,7 @@
           lineNumber: 117,
           columnNumber: 17
         }
-      }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
+      }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
     })));
   }
 
@@ -29668,7 +29257,7 @@
   var StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
-    background: '$gray50',
+    background: '$gray150',
     borderRadius: '99999px',
     width: '100%',
     height: 8
@@ -32124,6 +31713,421 @@
     }), void 0);
   }
 
+  var transform = keyframes({
+    '100%': {
+      transform: 'translateX(100%)'
+    }
+  });
+  var SkeletonContainer = styled(Box, {
+    '& .react-loading-skeleton::after': {
+      animation: "1.5s infinite normal ".concat(transform, " !important"),
+      animationTimingFunction: 'ease-in-out !important'
+    }
+  });
+
+  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(SkeletonContainer, {
+        children: jsxRuntime.jsx(ReactSkeleton__default["default"], {
+          height: getSize(size),
+          count: count,
+          circle: circle
+        }, void 0)
+      }, void 0)
+    }), void 0);
+  };
+
+  var Card = 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, {
+                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, {
+                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, {
+                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, {
+            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, {
+            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, {
+            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);
+    }
+  }
+
   var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
@@ -33660,7 +33664,7 @@
   exports.ButtonGroup = ButtonGroup$1;
   exports.ButtonGroupItem = ButtonGroupItem;
   exports.ButtonPrimitive = ButtonPrimitive;
-  exports.Card = Card;
+  exports.Card = Card$1;
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
   exports.CheckboxGroup = CheckboxGroup;