@majoo-ui/react 1.55.10 → 1.55.12

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('react-i18next'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'react-i18next', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactI18next, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactI18next, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +27,7 @@
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
   var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
   var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
@@ -45,7 +46,6 @@
   var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
   var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -3464,19 +3464,23 @@
     disableGlobalStyle
   }) {
     !disableGlobalStyle && applyGlobalStyles(extendStyle);
+    const {
+      i18n
+    } = reactI18next.useTranslation();
+    moment__default["default"].locale(i18n && i18n.language ? i18n.language : 'id');
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: theme$1,
       __self: this,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 11,
+        lineNumber: 15,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 12,
+        lineNumber: 16,
         columnNumber: 7
       }
     }, children));
@@ -3541,7 +3545,8 @@
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     maxWidth: '956px',
-    marginInlineEnd: 12
+    marginInlineEnd: 12,
+    color: '$textPrimary !important'
   });
   const Description = styled(Paragraph, {
     lineHeight: '$long-content-regular',
@@ -3576,7 +3581,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 95,
+      lineNumber: 96,
       columnNumber: 3
     }
   }), props.children);
@@ -3597,7 +3602,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 112,
+      lineNumber: 113,
       columnNumber: 3
     }
   }), props.children);
@@ -3619,7 +3624,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 129,
+      lineNumber: 130,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(Link, {
@@ -3631,7 +3636,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 131,
+      lineNumber: 132,
       columnNumber: 7
     }
   }, children));
@@ -3656,7 +3661,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 158,
+      lineNumber: 159,
       columnNumber: 3
     }
   }, value => /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3668,7 +3673,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 160,
+      lineNumber: 161,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3677,7 +3682,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 167,
+      lineNumber: 168,
       columnNumber: 9
     }
   })));
@@ -3686,7 +3691,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 175,
+        lineNumber: 176,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3696,7 +3701,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 176,
+        lineNumber: 177,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3709,21 +3714,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 +3737,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 189,
+        lineNumber: 190,
         columnNumber: 11
       }
     }, props.linkText)), /*#__PURE__*/React__namespace.createElement(CloseButton$1, {
@@ -3745,7 +3750,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 194,
+        lineNumber: 195,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
@@ -3754,7 +3759,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 202,
+        lineNumber: 203,
         columnNumber: 9
       }
     })));
@@ -3781,7 +3786,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 210,
+        lineNumber: 211,
         columnNumber: 5
       }
     }), children ? /*#__PURE__*/React__namespace.createElement(Flex$1, {
@@ -3798,7 +3803,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 212,
+        lineNumber: 213,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(Context$2.Provider, {
@@ -3809,7 +3814,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 219,
+        lineNumber: 220,
         columnNumber: 11
       }
     }, children)) : /*#__PURE__*/React__namespace.createElement(SingleTagBanner, {
@@ -3823,7 +3828,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$X,
-        lineNumber: 222,
+        lineNumber: 223,
         columnNumber: 9
       }
     }));
@@ -17434,7 +17439,6 @@
       defaultValue = _h[0],
       setDefaultValue = _h[1];
     var language = i18n.language;
-    moment__default["default"].locale(language);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
@@ -18438,6 +18442,7 @@
       cellAlign = _a.cellAlign,
       renderContextMenu = _a.renderContextMenu,
       handleRowClick = _a.handleRowClick;
+    var t = reactI18next.useTranslation('MajooUI/table').t;
     var getTableProps = instance.getTableProps,
       getTableBodyProps = instance.getTableBodyProps,
       headerGroups = instance.headerGroups,
@@ -18470,7 +18475,7 @@
               }).map(function (column) {
                 var headerRender = column.render('Header');
                 return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
-                  title: 'Urutkan'
+                  title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                 }) : {
                   onClick: column.onToggle
                 }), {
@@ -18944,7 +18949,7 @@
     }
     return rawData;
   };
-  var defaultEmptyDataProps = function defaultEmptyDataProps(t) {
+  var defaultEmptyDataProps = function defaultEmptyDataProps(t, isMobile) {
     return {
       doodleImage: jsxRuntime.jsx(EmptyDataDoodle, {}, void 0),
       title: jsxRuntime.jsx(Paragraph, __assign({
@@ -18957,12 +18962,14 @@
       }, {
         children: t('dataNotAvailableTitle', 'Data tidak tersedia')
       }), void 0),
-      description: jsxRuntime.jsxs(Paragraph, __assign({
+      description: jsxRuntime.jsx(Paragraph, __assign({
         paragraph: "shortContentRegular",
         color: "secondary",
         align: "center"
       }, {
-        children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsxRuntime.jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+        children: isMobile ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsxRuntime.jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+        }, void 0) : "".concat(t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), " \n            ").concat(t('dataNotAvailableDescription_2', 'di halaman ini'))
       }), void 0)
     };
   };
@@ -19019,7 +19026,8 @@
       scrollAreaWidth = _s[0],
       setScrollAreaWidth = _s[1];
     var t = reactI18next.useTranslation('MajooUI/table').t;
-    var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t);
+    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
+    var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
     var getInitialState = function getInitialState() {
       var initialState = {};
       if (fetchData) {
@@ -19053,12 +19061,10 @@
       }
     }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky, reactTable.useColumnOrder);
     var scrollerRef = React.useRef(null);
-    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var getTableProps = instance.getTableProps,
       getTableBodyProps = instance.getTableBodyProps,
-      headerGroups = instance.headerGroups;
-      instance.allColumns;
-      var visibleColumns = instance.visibleColumns,
+      headerGroups = instance.headerGroups,
+      visibleColumns = instance.visibleColumns,
       prepareRow = instance.prepareRow,
       page = instance.page,
       gotoPage = instance.gotoPage,
@@ -19275,7 +19281,7 @@
                     var headerRender = column.render('Header');
                     return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
                       return [props, !column.unsortable ? column.getSortByToggleProps({
-                        title: 'Urutkan'
+                        title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                       }) : {
                         onClick: column.onToggle
                       }, {
@@ -19484,7 +19490,7 @@
     let dateTime = '-';
     const format = customFormat || 'DD MMMM YYYY';
     if (value && moment__default["default"](value, 'YYYYMMDDHHmmss').isValid()) {
-      dateTime = moment__default["default"](value, 'YYYYMMDDHHmmss').locale('id').format(format);
+      dateTime = moment__default["default"](value, 'YYYYMMDDHHmmss').format(format);
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
@@ -20039,8 +20045,11 @@
     options,
     Header: () => null,
     Cell: props => {
+      const {
+        t
+      } = reactI18next.useTranslation('MajooUI/table');
       const defaultConfig = {
-        mobileTitle: 'Aksi',
+        mobileTitle: t('rowMenuMobileLabel', 'Aksi'),
         cssContent: {},
         cssMenuItem: {},
         align: 'end'
@@ -20060,7 +20069,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 39,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -20068,7 +20077,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 40,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20081,7 +20090,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
+          lineNumber: 41,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -20095,21 +20104,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 40,
+          lineNumber: 42,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 48,
+          lineNumber: 50,
           columnNumber: 26
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 52,
+          lineNumber: 54,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -20132,7 +20141,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 53,
+          lineNumber: 55,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -20140,7 +20149,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 73,
+          lineNumber: 75,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -20152,7 +20161,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 74,
+          lineNumber: 76,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -20163,7 +20172,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 83,
+          lineNumber: 85,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -20174,7 +20183,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 89,
+          lineNumber: 91,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -20182,7 +20191,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 92,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20195,7 +20204,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 91,
+          lineNumber: 93,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -20203,21 +20212,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 92,
+          lineNumber: 94,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 92,
+          lineNumber: 94,
           columnNumber: 50
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 95,
+          lineNumber: 97,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -20227,7 +20236,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 96,
+          lineNumber: 98,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20242,7 +20251,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 97,
+          lineNumber: 99,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -20250,7 +20259,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 99,
+          lineNumber: 101,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20266,7 +20275,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 100,
+          lineNumber: 102,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -20275,7 +20284,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 111,
+          lineNumber: 113,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -20283,7 +20292,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 115,
+          lineNumber: 117,
           columnNumber: 19
         }
       })))))));
@@ -23441,7 +23450,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 119,
+        lineNumber: 118,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(EyeIcon, _extends({}, props, {
@@ -23451,7 +23460,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 126,
+        lineNumber: 125,
         columnNumber: 5
       }
     }));
@@ -23857,21 +23866,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 +23915,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 608,
+          lineNumber: 599,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -23923,7 +23925,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 609,
+          lineNumber: 600,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -23938,7 +23940,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 619,
+              lineNumber: 610,
               columnNumber: 16
             }
           });
@@ -23949,7 +23951,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 622,
+            lineNumber: 613,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23959,7 +23961,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 614,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23968,7 +23970,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 624,
+            lineNumber: 615,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23981,7 +23983,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 626,
+            lineNumber: 617,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23990,7 +23992,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 634,
+            lineNumber: 625,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24000,7 +24002,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 637,
+            lineNumber: 628,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24017,7 +24019,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 648,
+              lineNumber: 639,
               columnNumber: 16
             }
           });
@@ -24027,7 +24029,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 651,
+            lineNumber: 642,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24037,7 +24039,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 652,
+            lineNumber: 643,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24046,7 +24048,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 653,
+            lineNumber: 644,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24059,7 +24061,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 654,
+            lineNumber: 645,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24069,14 +24071,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 +24086,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 664,
+            lineNumber: 655,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24099,7 +24101,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 665,
+            lineNumber: 656,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -24112,7 +24114,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 672,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -24121,7 +24123,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 689,
+            lineNumber: 680,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -24129,7 +24131,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 692,
+            lineNumber: 683,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -24144,7 +24146,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 694,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24158,7 +24160,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 695,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -24184,7 +24186,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 705,
+          lineNumber: 696,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24192,14 +24194,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 +24213,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 727,
+          lineNumber: 718,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -24227,7 +24229,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 728,
+          lineNumber: 719,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -24239,21 +24241,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 +24264,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 743,
+          lineNumber: 734,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -24270,7 +24272,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 735,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -24280,7 +24282,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 +24292,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 744,
           columnNumber: 19
         }
       }, error));
@@ -24300,7 +24302,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 751,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -24308,7 +24310,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 761,
+          lineNumber: 752,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24316,7 +24318,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 762,
+          lineNumber: 753,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -24329,7 +24331,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 +24343,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 767,
+          lineNumber: 758,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -24352,7 +24354,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 768,
+          lineNumber: 759,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -24366,14 +24368,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 +24387,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 +24402,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 777,
+          lineNumber: 768,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -24412,7 +24414,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 778,
+          lineNumber: 769,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -24420,7 +24422,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 785,
+          lineNumber: 776,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -24429,7 +24431,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 786,
+          lineNumber: 777,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -24439,7 +24441,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 789,
+          lineNumber: 780,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -24456,7 +24458,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 +24467,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 801,
+        lineNumber: 792,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -30304,6 +30306,7 @@
   });
   var libraries = ['places'];
   function MapPicker(props) {
+    var inputRef = React.useRef(null);
     var mapsApiKey = props.mapsApiKey,
       css = props.css,
       showBanner = props.showBanner,
@@ -30352,7 +30355,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 +30372,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 +30540,7 @@
           onPlacesChanged: onPlacesChanged
         }, {
           children: jsxRuntime.jsx(InputSearch, {
+            ref: inputRef,
             placeholder: "Cari ..."
           }, void 0)
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
@@ -32457,63 +32462,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, {