@majoo-ui/react 1.55.10 → 1.55.11

package/index.umd.js

@@ -3541,7 +3541,8 @@
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     maxWidth: '956px',
-    marginInlineEnd: 12
+    marginInlineEnd: 12,
+    color: '$textPrimary !important'
   });
   const Description = styled(Paragraph, {
     lineHeight: '$long-content-regular',
@@ -3576,7 +3577,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 95,
+      lineNumber: 96,
       columnNumber: 3
     }
   }), props.children);
@@ -3597,7 +3598,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 112,
+      lineNumber: 113,
       columnNumber: 3
     }
   }), props.children);
@@ -3619,7 +3620,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 129,
+      lineNumber: 130,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3631,7 +3632,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 131,
+      lineNumber: 132,
       columnNumber: 7
     }
   }, children));
@@ -3656,7 +3657,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 158,
+      lineNumber: 159,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3668,7 +3669,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 160,
+      lineNumber: 161,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3677,7 +3678,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 167,
+      lineNumber: 168,
       columnNumber: 9
     }
   })));
@@ -3686,7 +3687,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 175,
+        lineNumber: 176,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3696,7 +3697,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 176,
+        lineNumber: 177,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3709,21 +3710,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 177,
+        lineNumber: 178,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 185,
+        lineNumber: 186,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 186,
+        lineNumber: 187,
         columnNumber: 33
       }
     }, props.description)), props.link && /*#__PURE__*/React__namespace.createElement(BannerLink, {
@@ -3732,7 +3733,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 189,
+        lineNumber: 190,
         columnNumber: 11
       }
     }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3745,7 +3746,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 194,
+        lineNumber: 195,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3754,7 +3755,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 202,
+        lineNumber: 203,
         columnNumber: 9
       }
     })));
@@ -3781,7 +3782,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 210,
+        lineNumber: 211,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3798,7 +3799,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 212,
+        lineNumber: 213,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -3809,7 +3810,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 219,
+        lineNumber: 220,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
@@ -3823,7 +3824,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 222,
+        lineNumber: 223,
         columnNumber: 9
       }
     }));
@@ -23441,7 +23442,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 119,
+        lineNumber: 118,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -23451,7 +23452,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
+        lineNumber: 125,
         columnNumber: 5
       }
     }));
@@ -23857,21 +23858,14 @@
       if (extension === 'pdf') {
         window.open(file === null || file === void 0 ? void 0 : file.url);
       } else {
-        request__default["default"].get(file === null || file === void 0 ? 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;
-            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);
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-          }
-        });
+        if (file !== null && file !== void 0 && file.url) {
+          const link = document.createElement('a');
+          link.href = file.url;
+          link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }
       }
     }
     function handleDragEnter(e) {
@@ -23913,7 +23907,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 608,
+          lineNumber: 599,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -23923,7 +23917,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 609,
+          lineNumber: 600,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -23938,7 +23932,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 619,
+              lineNumber: 610,
               columnNumber: 16
             }
           });
@@ -23949,7 +23943,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 622,
+            lineNumber: 613,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23959,7 +23953,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 614,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23968,7 +23962,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 624,
+            lineNumber: 615,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23981,7 +23975,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 617,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23990,7 +23984,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 634,
+            lineNumber: 625,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24000,7 +23994,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 637,
+            lineNumber: 628,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24017,7 +24011,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 648,
+              lineNumber: 639,
               columnNumber: 16
             }
           });
@@ -24027,7 +24021,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 651,
+            lineNumber: 642,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24037,7 +24031,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 643,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24046,7 +24040,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 653,
+            lineNumber: 644,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24059,7 +24053,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 654,
+            lineNumber: 645,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24069,14 +24063,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 662,
+            lineNumber: 653,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 663,
+            lineNumber: 654,
             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, {
@@ -24084,7 +24078,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 664,
+            lineNumber: 655,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24099,7 +24093,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 665,
+            lineNumber: 656,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24112,7 +24106,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 672,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24121,7 +24115,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 689,
+            lineNumber: 680,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -24129,7 +24123,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 692,
+            lineNumber: 683,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24144,7 +24138,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 694,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24158,7 +24152,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -24184,7 +24178,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 705,
+          lineNumber: 696,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24192,14 +24186,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 709,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 710,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -24211,7 +24205,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 718,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -24227,7 +24221,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -24239,21 +24233,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 739,
+          lineNumber: 730,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 740,
+          lineNumber: 731,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 742,
+          lineNumber: 733,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -24262,7 +24256,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 743,
+          lineNumber: 734,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -24270,7 +24264,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 735,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24280,7 +24274,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 746,
+          lineNumber: 737,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -24290,7 +24284,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 744,
           columnNumber: 19
         }
       }, error));
@@ -24300,7 +24294,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 751,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -24308,7 +24302,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 761,
+          lineNumber: 752,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24316,7 +24310,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 762,
+          lineNumber: 753,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -24329,7 +24323,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 755,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -24341,7 +24335,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 767,
+          lineNumber: 758,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -24352,7 +24346,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 759,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24366,14 +24360,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 769,
+          lineNumber: 760,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 772,
+          lineNumber: 763,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24385,14 +24379,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 764,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 775,
+          lineNumber: 766,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -24400,7 +24394,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 777,
+          lineNumber: 768,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -24412,7 +24406,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 778,
+          lineNumber: 769,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24420,7 +24414,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 785,
+          lineNumber: 776,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -24429,7 +24423,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 786,
+          lineNumber: 777,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -24439,7 +24433,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 789,
+          lineNumber: 780,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -24456,7 +24450,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 798,
+        lineNumber: 789,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -24465,7 +24459,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 801,
+        lineNumber: 792,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -30304,6 +30298,7 @@
   });
   var libraries = ['places'];
   function MapPicker(props) {
+    var inputRef = React.useRef(null);
     var mapsApiKey = props.mapsApiKey,
       css = props.css,
       showBanner = props.showBanner,
@@ -30352,7 +30347,7 @@
       setMap(null);
     }, []);
     var onPlacesChanged = function onPlacesChanged() {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f;
       var location = mapSearch === null || mapSearch === void 0 ? void 0 : mapSearch.getPlaces();
       setPlaces(location);
       var cordinat = (_b = (_a = location === null || location === void 0 ? void 0 : location[0]) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 : _b.location;
@@ -30369,6 +30364,7 @@
         formatted_address: (_d = location === null || location === void 0 ? void 0 : location[0]) === null || _d === void 0 ? void 0 : _d.formatted_address,
         address_components: (_e = location === null || location === void 0 ? void 0 : location[0]) === null || _e === void 0 ? void 0 : _e.address_components
       });
+      (_f = inputRef.current) === null || _f === void 0 ? void 0 : _f.click();
     };
     var handleGeoCode = function handleGeoCode(e) {
       var defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
@@ -30536,6 +30532,7 @@
           onPlacesChanged: onPlacesChanged
         }, {
           children: jsxRuntime.jsx(InputSearch, {
+            ref: inputRef,
             placeholder: "Cari ..."
           }, void 0)
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
@@ -32457,63 +32454,77 @@
     gap: '$spacing-06'
   });
   function Skeleton(props) {
-    var css = props.css;
+    var css = props.css,
+      variant = props.variant,
+      width = props.width,
+      color = props.color;
     var isDesktop = useMediaQuery('(min-width: 767px)');
-    return jsxRuntime.jsxs(Container, __assign({
-      css: css
-    }, {
-      children: [jsxRuntime.jsx(StyledSkeleton, {
-        size: "md",
-        color: "primary",
-        width: isDesktop ? '20%' : '30%'
-      }, void 0), jsxRuntime.jsx(Card, __assign({
-        showBottomLine: false,
-        css: {
-          flex: 1,
-          padding: '$spacing-08 80px $spacing-08 $spacing-08',
-          background: '$bgWhite',
-          boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
-        }
+    var renderGroup = function renderGroup() {
+      return jsxRuntime.jsxs(Container, __assign({
+        css: css
       }, {
-        children: jsxRuntime.jsxs(Grid, __assign({
-          columns: 6,
-          gapY: 5
+        children: [jsxRuntime.jsx(StyledSkeleton, {
+          size: "md",
+          color: "primary",
+          width: isDesktop ? '20%' : '30%'
+        }, void 0), jsxRuntime.jsx(Card, __assign({
+          showBottomLine: false,
+          css: {
+            flex: 1,
+            padding: '$spacing-08 80px $spacing-08 $spacing-08',
+            background: '$bgWhite',
+            boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
+          }
         }, {
-          children: [jsxRuntime.jsxs(GridItem, __assign({
-            colSpan: 6
+          children: jsxRuntime.jsxs(Grid, __assign({
+            columns: 6,
+            gapY: 5
           }, {
-            children: [jsxRuntime.jsx(StyledSkeleton, {
-              size: "md",
-              color: "primary"
-            }, void 0), jsxRuntime.jsx(Space, {
-              size: "md"
-            }, void 0), jsxRuntime.jsxs(Box, {
+            children: [jsxRuntime.jsxs(GridItem, __assign({
+              colSpan: 6
+            }, {
               children: [jsxRuntime.jsx(StyledSkeleton, {
-                width: "70%"
-              }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                width: "30%"
+                size: "md",
+                color: "primary"
+              }, void 0), jsxRuntime.jsx(Space, {
+                size: "md"
+              }, void 0), jsxRuntime.jsxs(Box, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  width: "70%"
+                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                  width: "30%"
+                }, void 0)]
               }, void 0)]
-            }, void 0)]
-          }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-            colSpan: 6
-          }, {
-            children: [jsxRuntime.jsx(StyledSkeleton, {
-              size: "md",
-              color: "primary"
-            }, void 0), jsxRuntime.jsx(Space, {
-              size: "md"
-            }, void 0), jsxRuntime.jsxs(Box, {
+            }), void 0), jsxRuntime.jsxs(GridItem, __assign({
+              colSpan: 6
+            }, {
               children: [jsxRuntime.jsx(StyledSkeleton, {
-                width: "70%"
-              }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                width: "30%"
+                size: "md",
+                color: "primary"
+              }, void 0), jsxRuntime.jsx(Space, {
+                size: "md"
+              }, void 0), jsxRuntime.jsxs(Box, {
+                children: [jsxRuntime.jsx(StyledSkeleton, {
+                  width: "70%"
+                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                  width: "30%"
+                }, void 0)]
               }, void 0)]
-            }, void 0)]
-          }), void 0)]
-        }), void 0)
-      }), void 0)]
-    }), void 0);
+            }), void 0)]
+          }), void 0)
+        }), void 0)]
+      }), void 0);
+    };
+    return variant === 'single' ? jsxRuntime.jsx(StyledSkeleton, {
+      width: width,
+      color: color
+    }, void 0) : renderGroup();
   }
+  Skeleton.defaultProps = {
+    variant: 'group',
+    color: 'secondary',
+    width: '100%'
+  };
 
   var _jsxFileName = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
   const StyledPaper = styled(Paper, {