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

package/index.esm.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, 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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -44,6 +43,8 @@ import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianG
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
@@ -2498,429 +2499,7 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-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"];
+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',
@@ -2948,8 +2527,7 @@ const PageContainer = _ref => {
     children,
     isCollapse,
     css,
-    contentHeader,
-    isLoading
+    contentHeader
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
@@ -2962,17 +2540,10 @@ const PageContainer = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 29,
+      lineNumber: 28,
       columnNumber: 5
     }
-  }), 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));
+  }), contentHeader, children);
 };
 
 PageContainer.displayName = 'PageContainer';
@@ -4013,7 +3584,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   onClick: e => {
     e.preventDefault();
     e.stopPropagation();
-    value === null || value === void 0 ? void 0 : value.onRemove();
+    value == null ? void 0 : value.onRemove();
   },
   __self: undefined,
   __source: {
@@ -4090,7 +3661,7 @@ const SingleTagBanner = props => {
     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,
@@ -4643,7 +4214,7 @@ const StyledIcon$1 = styled('span', {
     }
   }
 });
-const Card = _ref => {
+const Card$1 = _ref => {
   let {
     className,
     children,
@@ -4706,7 +4277,7 @@ const Card = _ref => {
     }
   }, title)) : null, children);
 };
-Card.propTypes = {
+Card$1.propTypes = {
   className: PropTypes.string,
   color: PropTypes.string,
   shadow: PropTypes.bool,
@@ -4717,7 +4288,7 @@ Card.propTypes = {
   textColor: PropTypes.string,
   icon: PropTypes.element
 };
-Card.defaultProps = {
+Card$1.defaultProps = {
   className: '',
   color: 'green',
   shadow: false,
@@ -6132,7 +5703,7 @@ const Checkbox = _ref => {
   const [isChecked, setChecked] = useState(false);
   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.createElement(StyledCheckbox, _extends({
     id: id,
@@ -6741,7 +6312,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   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';
     }
   }, []);
@@ -6783,7 +6354,7 @@ const InputRadioContext = /*#__PURE__*/React__default.createContext();
 var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
-  return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
+  return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
@@ -6798,7 +6369,7 @@ function InputRadioGroup(props) {
       lineNumber: 14,
       columnNumber: 9
     }
-  }), React__default.Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+  }), React__default.Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
     style: Object.assign({}, child.props.style, {
       opacity: 1
     })
@@ -7012,7 +6583,7 @@ const InputRadio = _ref => {
     value,
     outlined
   }) => {
-    const checked = value !== null && value !== void 0 ? value : defaultValue;
+    const checked = value != null ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$8, {
       direction: "column",
       outlined: outlined,
@@ -7262,7 +6833,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     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,
@@ -8078,18 +7649,18 @@ function TagsInput(_ref) {
   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
           });
@@ -8099,7 +7670,7 @@ function TagsInput(_ref) {
       }
 
       setRegexError(false);
-      onEnter === null || onEnter === void 0 ? void 0 : onEnter({
+      onEnter == null ? void 0 : onEnter({
         key: 'success',
         value: event.target.value
       });
@@ -8112,7 +7683,7 @@ function TagsInput(_ref) {
     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 = () => {
@@ -8160,7 +7731,7 @@ function TagsInput(_ref) {
       lineNumber: 180,
       columnNumber: 9
     }
-  })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
+  })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
     color: "red",
     __self: this,
     __source: {
@@ -9981,10 +9552,10 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         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);
     }
@@ -9994,9 +9565,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     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]);
@@ -10007,7 +9578,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         setSelectedValue(filterItems);
 
         if (selected.id !== '!all') {
-          onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
+          onChange == null ? void 0 : onChange(filterItems);
         }
       }
     }
@@ -10052,7 +9623,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                     removeSelectedItem(item);
                   });
                   setSelectedValue([]);
-                  onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                  onChange == null ? void 0 : onChange([]);
                 } else {
                   removeItem(selectedItem);
                 }
@@ -10067,12 +9638,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                   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);
@@ -10224,7 +9795,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       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.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.createElement(Tag, _extends({
     disabled: disabled,
     isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: size,
@@ -10248,7 +9819,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 563,
       columnNumber: 17
     }
-  }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+  }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: undefined,
     __source: {
@@ -10261,7 +9832,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       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 })}
     ,
@@ -10283,7 +9854,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 586,
       columnNumber: 13
     }
-  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
+  }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -10351,7 +9922,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       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.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.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
@@ -11595,8 +11166,8 @@ const PopoverContent = ({
     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)
   }), {
@@ -12829,7 +12400,7 @@ const NotificationBadge = _ref => {
       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) {
@@ -14786,6 +14357,25 @@ 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',
@@ -17558,7 +17148,7 @@ function PaginationInfo(_ref) {
       lineNumber: 40,
       columnNumber: 11
     }
-  }, limits === null || limits === void 0 ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
+  }, limits == null ? void 0 : limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
     key: limit,
     css: limitItemContainerStyle(selectedLimit === limit),
     onClick: () => onChange(limit),
@@ -20136,7 +19726,7 @@ const TemplateAlertFunction = props => {
       if (!props.onOpenAutoFocus) {
         e.preventDefault();
       } else {
-        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+        props == null ? void 0 : props.onOpenAutoFocus();
       }
     },
     __self: undefined,
@@ -20257,8 +19847,8 @@ const TemplateAlertFunction = props => {
     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,
@@ -20277,12 +19867,12 @@ const TemplateAlertFunction = props => {
     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,
@@ -20304,8 +19894,8 @@ const TemplateAlertFunction = props => {
     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,
@@ -20465,8 +20055,8 @@ function AlertDialog(props) {
     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,
@@ -20485,12 +20075,12 @@ function AlertDialog(props) {
     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,
@@ -20512,8 +20102,8 @@ function AlertDialog(props) {
     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,
@@ -22995,7 +22585,7 @@ const Upload = ({
         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,
@@ -23018,12 +22608,12 @@ const Upload = ({
               }
             }
 
-            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;
@@ -23040,12 +22630,12 @@ const Upload = ({
             }
           }
 
-          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;
 
@@ -23061,22 +22651,22 @@ const Upload = ({
             }
           }
 
-          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) {
@@ -23101,24 +22691,24 @@ const Upload = ({
           // 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();
@@ -23130,15 +22720,15 @@ const Upload = ({
   }
 
   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);
@@ -23153,17 +22743,17 @@ const Upload = ({
           }).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();
@@ -23194,7 +22784,7 @@ const Upload = ({
     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
     });
@@ -23222,22 +22812,22 @@ const Upload = ({
   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.get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+      request.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);
@@ -23307,12 +22897,12 @@ const Upload = ({
   }
 
   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.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,
@@ -23387,14 +22977,14 @@ const Upload = ({
   };
 
   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.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,
@@ -23461,7 +23051,7 @@ const Upload = ({
           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, {
+      }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip$1, {
         label: item.name,
         __self: undefined,
         __source: {
@@ -23633,7 +23223,7 @@ const Upload = ({
         lineNumber: 736,
         columnNumber: 11
       }
-    }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -23667,7 +23257,7 @@ const Upload = ({
         lineNumber: 742,
         columnNumber: 17
       }
-    }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
+    }, placeholder != null ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -23827,7 +23417,7 @@ const Upload = ({
 
   return /*#__PURE__*/React__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'
@@ -24653,10 +24243,10 @@ function InputColorPicker(props) {
   const [isPopover, setIsPopover] = 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})`;
@@ -27628,9 +27218,9 @@ const Navigation = props => {
           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.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.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,
@@ -27649,9 +27239,9 @@ const Navigation = props => {
           lineNumber: 124,
           columnNumber: 19
         }
-      })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), ((_data4 = data[i - 1]) == null ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__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,
@@ -27703,7 +27293,7 @@ const Navigation = props => {
           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: {
@@ -27721,10 +27311,10 @@ const Navigation = props => {
           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.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.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,
@@ -27740,11 +27330,11 @@ const Navigation = props => {
           lineNumber: 168,
           columnNumber: 19
         }
-      })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+      })), isActive && ((_data10 = data[i - 1]) == null ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__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: {
@@ -27826,9 +27416,7 @@ const Default = props => {
     }));
   }, [props.hide]);
   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 => {
@@ -27840,13 +27428,13 @@ const Default = props => {
   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 => {
@@ -27888,15 +27476,15 @@ const Default = props => {
     });
     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();
       }
     }
   };
@@ -27912,11 +27500,11 @@ const Default = props => {
   }, /*#__PURE__*/React__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,
@@ -28089,10 +27677,10 @@ function Content({
   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]);
@@ -28132,7 +27720,7 @@ function Content({
       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.createElement(List, {
       key: index,
       __self: this,
@@ -28149,11 +27737,11 @@ function Content({
         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,
@@ -28162,8 +27750,8 @@ function Content({
       }
     }, /*#__PURE__*/React__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]);
@@ -28192,7 +27780,7 @@ function Content({
         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));
   })));
 }
 
@@ -29256,7 +28844,7 @@ const ProgressText = styled$1('p', {
 const StyledProgress = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
-  background: '$gray50',
+  background: '$gray150',
   borderRadius: '99999px',
   width: '100%',
   height: 8
@@ -31586,6 +31174,423 @@ function ContentEditor(props) {
   }), void 0);
 }
 
+const transform = keyframes({
+  '100%': {
+    transform: 'translateX(100%)'
+  }
+});
+const SkeletonContainer = styled(Box, {
+  '& .react-loading-skeleton::after': {
+    animation: `1.5s infinite normal ${transform} !important`,
+    animationTimingFunction: 'ease-in-out !important'
+  }
+});
+
+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(SkeletonContainer, {
+      children: jsx(ReactSkeleton, {
+        height: getSize(size),
+        count: count,
+        circle: circle
+      }, void 0)
+    }, void 0)
+  }), void 0);
+};
+
+const Card = 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, {
+              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, {
+              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, {
+              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, {
+          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, {
+          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, {
+          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);
+  }
+}
+
 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',
@@ -33087,4 +33092,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, 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 };
+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$1 as 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 };