@majoo-ui/react 1.54.14 → 1.54.15

package/index.esm.js

@@ -18786,10 +18786,10 @@ function Table({
               })) === null || _b === void 0 ? void 0 : _b.length;
               let customStyle = {};
 
-              if (customRowsStyle && customRowsStyle(row.values).length) {
-                for (let _i2 = 0; _i2 < customRowsStyle(row.values).length; _i2++) {
-                  if (customRowsStyle(row.values)[_i2].predicate) {
-                    customStyle = customRowsStyle(row.values)[_i2].css;
+              if (customRowsStyle && customRowsStyle(row.original).length) {
+                for (let _i2 = 0; _i2 < customRowsStyle(row.original).length; _i2++) {
+                  if (customRowsStyle(row.original)[_i2].predicate) {
+                    customStyle = customRowsStyle(row.original)[_i2].css;
                   }
                 }
               }
@@ -19703,6 +19703,7 @@ const rowMenuColumn = (options, icon, config) => ({
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
+      type: "button",
       onClick: () => {
         var _document$getElements;
 
@@ -19720,14 +19721,14 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 47,
+        lineNumber: 48,
         columnNumber: 26
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 51,
+        lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
@@ -19750,7 +19751,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 52,
+        lineNumber: 53,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -19758,7 +19759,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 72,
+        lineNumber: 73,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -19770,7 +19771,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 73,
+        lineNumber: 74,
         columnNumber: 19
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -19781,7 +19782,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 83,
         columnNumber: 19
       }
     })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -19792,7 +19793,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 88,
+        lineNumber: 89,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -19800,7 +19801,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 89,
+        lineNumber: 90,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19813,28 +19814,29 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 90,
+        lineNumber: 91,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
+      type: "button",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 91,
+        lineNumber: 92,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 91,
-        columnNumber: 36
+        lineNumber: 92,
+        columnNumber: 50
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 94,
+        lineNumber: 95,
         columnNumber: 11
       }
     }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -19844,7 +19846,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 95,
+        lineNumber: 96,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19859,7 +19861,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 96,
+        lineNumber: 97,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -19867,7 +19869,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 98,
+        lineNumber: 99,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19883,7 +19885,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 99,
+        lineNumber: 100,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -19892,7 +19894,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 110,
+        lineNumber: 111,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -19900,7 +19902,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 114,
+        lineNumber: 115,
         columnNumber: 19
       }
     })))))));
@@ -20542,10 +20544,10 @@ const TemplateAlertFunction = props => {
     size: props.btnSize,
     onClick: buttonCancel,
     css: {
-      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$textSecondary !important',
       flex: props.isMobile && 1
     },
-    buttonType: "ghost",
+    buttonType: props.dialogType === 'negative' && !(props != null && props.disabledButton) ? 'ghost-secondary' : 'ghost',
     disabled: props == null ? void 0 : props.disabledButton
   }, props == null ? void 0 : props.cancelButtonProps, {
     __self: undefined,
@@ -20750,10 +20752,10 @@ function AlertDialog(props) {
     size: props.btnSize,
     onClick: props.onCancel,
     css: {
-      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+      color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$textSecondary !important',
       flex: props.isMobile && 1
     },
-    buttonType: "ghost",
+    buttonType: props.dialogType === 'negative' && !(props != null && props.disabledButton) ? 'ghost-secondary' : 'ghost',
     disabled: props == null ? void 0 : props.disabledButton
   }, props == null ? void 0 : props.cancelButtonProps, {
     __self: this,
@@ -24601,7 +24603,6 @@ const Device = props => {
                   borderRadius: 8
                 }
               }, void 0), jsx(Box, Object.assign({
-                className: "mobile-scrollbar",
                 css: {
                   position: 'absolute',
                   right: '5%',
@@ -24659,7 +24660,19 @@ const Device = props => {
           }, {
             children: jsxs(Box, Object.assign({
               css: {
-                position: 'relative'
+                position: 'relative',
+                borderRadius: 8,
+                overflow: 'auto',
+                '&::-webkit-scrollbar': {
+                  width: 3
+                },
+                '&::-webkit-scrollbar-track': {
+                  boxShadow: 'inset 0 0 6px $gray200'
+                },
+                '&::-webkit-scrollbar-thumb': {
+                  backgroundColor: '$gray150',
+                  outline: '1px solid $gray150'
+                }
               }
             }, {
               children: [jsx(Image, {
@@ -24672,8 +24685,8 @@ const Device = props => {
                 css: {
                   position: 'absolute',
                   top: '7%',
-                  left: '5%',
-                  right: '5%'
+                  left: 0,
+                  right: 0
                 }
               }, {
                 children: jsxs(Flex$1, Object.assign({
@@ -24681,12 +24694,17 @@ const Device = props => {
                   gap: 6
                 }, {
                   children: [jsxs(Flex$1, Object.assign({
+                    css: {
+                      backgroundColor: '$bgWhite',
+                      paddingBottom: 4
+                    },
                     direction: "column",
                     gap: 1
                   }, {
                     children: [jsx(Paragraph, Object.assign({
                       css: {
-                        color: '$textPrimary'
+                        color: '$textPrimary',
+                        padding: '0px 8px'
                       }
                     }, {
                       children: typeof (content === null || content === void 0 ? void 0 : content.subject) === 'string' ? content === null || content === void 0 ? void 0 : content.subject : (_c = content === null || content === void 0 ? void 0 : content.subject) === null || _c === void 0 ? void 0 : _c.call(content)
@@ -24705,12 +24723,16 @@ const Device = props => {
                           color: '$textWhite',
                           backgroundColor: '$bgGreen',
                           justifyContent: 'center',
-                          alignItems: 'center'
+                          alignItems: 'center',
+                          marginLeft: 8
                         }
                       }, {
                         children: (_d = content === null || content === void 0 ? void 0 : content.sender) === null || _d === void 0 ? void 0 : _d[0]
                       }), void 0), jsxs(Flex$1, Object.assign({
-                        direction: "column"
+                        direction: "column",
+                        css: {
+                          padding: '0px 8px'
+                        }
                       }, {
                         children: [jsx(Paragraph, Object.assign({
                           css: {
@@ -24736,7 +24758,8 @@ const Device = props => {
                       color: '$textPrimary',
                       lineHeight: '16px',
                       overflowWrap: 'break-word',
-                      wordWrap: 'break-word'
+                      wordWrap: 'break-word',
+                      padding: '0px 8px'
                     }
                   }, {
                     children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? content === null || content === void 0 ? void 0 : content.message : (_f = content === null || content === void 0 ? void 0 : content.message) === null || _f === void 0 ? void 0 : _f.call(content)
@@ -24881,7 +24904,7 @@ const Device = props => {
         style: {
           width: props.size ? props.size : undefined,
           position: 'relative',
-          zIndex: withComponent || (props === null || props === void 0 ? void 0 : props.variant) === 'whatsapp' ? 1 : 2
+          zIndex: withComponent || (props === null || props === void 0 ? void 0 : props.variant) === 'whatsapp' || (props === null || props === void 0 ? void 0 : props.variant) === 'email' ? 1 : 2
         },
         src: properties.typeDevice,
         alt: "device-preview"
@@ -28433,7 +28456,6 @@ const Separator = styled('div', {
 });
 const StyledCard = styled(Card, {
   height: 'fit-content',
-  width: 'fit-content',
   maxWidth: 311,
   padding: '24px !important',
   boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
@@ -28473,7 +28495,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 106,
+      lineNumber: 105,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -28481,7 +28503,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 107,
+      lineNumber: 106,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
@@ -28491,7 +28513,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 108,
+      lineNumber: 107,
       columnNumber: 7
     }
   }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -28500,7 +28522,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 111,
+        lineNumber: 110,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -28519,7 +28541,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 112,
+        lineNumber: 111,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
@@ -28554,7 +28576,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 126,
+        lineNumber: 125,
         columnNumber: 17
       }
     }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
@@ -28584,7 +28606,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 169,
+      lineNumber: 168,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28596,7 +28618,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 170,
+      lineNumber: 169,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -28608,7 +28630,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 177,
+      lineNumber: 176,
       columnNumber: 7
     }
   }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -28618,7 +28640,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 179,
+      lineNumber: 178,
       columnNumber: 11
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -28628,7 +28650,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 181,
+      lineNumber: 180,
       columnNumber: 11
     }
   }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
@@ -28637,7 +28659,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 186,
+      lineNumber: 185,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledCard, {
@@ -28645,7 +28667,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 187,
+      lineNumber: 186,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28656,7 +28678,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 188,
+      lineNumber: 187,
       columnNumber: 9
     }
   })));
@@ -28670,14 +28692,14 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default
   __self: undefined,
   __source: {
     fileName: _jsxFileName$2,
-    lineNumber: 197,
+    lineNumber: 196,
     columnNumber: 3
   }
 }, /*#__PURE__*/React__default.createElement(ScrollSpy, _extends({}, props, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$2,
-    lineNumber: 198,
+    lineNumber: 197,
     columnNumber: 5
   }
 }))));

package/index.umd.js

@@ -19131,10 +19131,10 @@
                 })) === null || _b === void 0 ? void 0 : _b.length;
                 var customStyle = {};
 
-                if (customRowsStyle && customRowsStyle(row.values).length) {
-                  for (var i_2 = 0; i_2 < customRowsStyle(row.values).length; i_2++) {
-                    if (customRowsStyle(row.values)[i_2].predicate) {
-                      customStyle = customRowsStyle(row.values)[i_2].css;
+                if (customRowsStyle && customRowsStyle(row.original).length) {
+                  for (var i_2 = 0; i_2 < customRowsStyle(row.original).length; i_2++) {
+                    if (customRowsStyle(row.original)[i_2].predicate) {
+                      customStyle = customRowsStyle(row.original)[i_2].css;
                     }
                   }
                 }
@@ -20065,6 +20065,7 @@
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+        type: "button",
         onClick: () => {
           var _document$getElements;
 
@@ -20082,14 +20083,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 47,
+          lineNumber: 48,
           columnNumber: 26
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 51,
+          lineNumber: 52,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -20112,7 +20113,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 52,
+          lineNumber: 53,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -20120,7 +20121,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 72,
+          lineNumber: 73,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -20132,7 +20133,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 73,
+          lineNumber: 74,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -20143,7 +20144,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 83,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -20154,7 +20155,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 88,
+          lineNumber: 89,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -20162,7 +20163,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 89,
+          lineNumber: 90,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20175,28 +20176,29 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 91,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+        type: "button",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 91,
+          lineNumber: 92,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 91,
-          columnNumber: 36
+          lineNumber: 92,
+          columnNumber: 50
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 94,
+          lineNumber: 95,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -20206,7 +20208,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 95,
+          lineNumber: 96,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20221,7 +20223,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 96,
+          lineNumber: 97,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -20229,7 +20231,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 98,
+          lineNumber: 99,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20245,7 +20247,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 99,
+          lineNumber: 100,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -20254,7 +20256,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 110,
+          lineNumber: 111,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -20262,7 +20264,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 114,
+          lineNumber: 115,
           columnNumber: 19
         }
       })))))));
@@ -20906,10 +20908,10 @@
       size: props.btnSize,
       onClick: buttonCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$textSecondary !important',
         flex: props.isMobile && 1
       },
-      buttonType: "ghost",
+      buttonType: props.dialogType === 'negative' && !(props != null && props.disabledButton) ? 'ghost-secondary' : 'ghost',
       disabled: props == null ? void 0 : props.disabledButton
     }, props == null ? void 0 : props.cancelButtonProps, {
       __self: undefined,
@@ -21114,10 +21116,10 @@
       size: props.btnSize,
       onClick: props.onCancel,
       css: {
-        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$gray900 !important',
+        color: props.dialogType === 'negative' && !(props != null && props.disabledButton) && '$textSecondary !important',
         flex: props.isMobile && 1
       },
-      buttonType: "ghost",
+      buttonType: props.dialogType === 'negative' && !(props != null && props.disabledButton) ? 'ghost-secondary' : 'ghost',
       disabled: props == null ? void 0 : props.disabledButton
     }, props == null ? void 0 : props.cancelButtonProps, {
       __self: this,
@@ -25012,7 +25014,6 @@
                     borderRadius: 8
                   }
                 }, void 0), jsxRuntime.jsx(Box, __assign({
-                  className: "mobile-scrollbar",
                   css: {
                     position: 'absolute',
                     right: '5%',
@@ -25070,7 +25071,19 @@
             }, {
               children: jsxRuntime.jsxs(Box, __assign({
                 css: {
-                  position: 'relative'
+                  position: 'relative',
+                  borderRadius: 8,
+                  overflow: 'auto',
+                  '&::-webkit-scrollbar': {
+                    width: 3
+                  },
+                  '&::-webkit-scrollbar-track': {
+                    boxShadow: 'inset 0 0 6px $gray200'
+                  },
+                  '&::-webkit-scrollbar-thumb': {
+                    backgroundColor: '$gray150',
+                    outline: '1px solid $gray150'
+                  }
                 }
               }, {
                 children: [jsxRuntime.jsx(Image, {
@@ -25083,8 +25096,8 @@
                   css: {
                     position: 'absolute',
                     top: '7%',
-                    left: '5%',
-                    right: '5%'
+                    left: 0,
+                    right: 0
                   }
                 }, {
                   children: jsxRuntime.jsxs(Flex$1, __assign({
@@ -25092,12 +25105,17 @@
                     gap: 6
                   }, {
                     children: [jsxRuntime.jsxs(Flex$1, __assign({
+                      css: {
+                        backgroundColor: '$bgWhite',
+                        paddingBottom: 4
+                      },
                       direction: "column",
                       gap: 1
                     }, {
                       children: [jsxRuntime.jsx(Paragraph, __assign({
                         css: {
-                          color: '$textPrimary'
+                          color: '$textPrimary',
+                          padding: '0px 8px'
                         }
                       }, {
                         children: typeof (content === null || content === void 0 ? void 0 : content.subject) === 'string' ? content === null || content === void 0 ? void 0 : content.subject : (_c = content === null || content === void 0 ? void 0 : content.subject) === null || _c === void 0 ? void 0 : _c.call(content)
@@ -25116,12 +25134,16 @@
                             color: '$textWhite',
                             backgroundColor: '$bgGreen',
                             justifyContent: 'center',
-                            alignItems: 'center'
+                            alignItems: 'center',
+                            marginLeft: 8
                           }
                         }, {
                           children: (_d = content === null || content === void 0 ? void 0 : content.sender) === null || _d === void 0 ? void 0 : _d[0]
                         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
-                          direction: "column"
+                          direction: "column",
+                          css: {
+                            padding: '0px 8px'
+                          }
                         }, {
                           children: [jsxRuntime.jsx(Paragraph, __assign({
                             css: {
@@ -25147,7 +25169,8 @@
                         color: '$textPrimary',
                         lineHeight: '16px',
                         overflowWrap: 'break-word',
-                        wordWrap: 'break-word'
+                        wordWrap: 'break-word',
+                        padding: '0px 8px'
                       }
                     }, {
                       children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? content === null || content === void 0 ? void 0 : content.message : (_f = content === null || content === void 0 ? void 0 : content.message) === null || _f === void 0 ? void 0 : _f.call(content)
@@ -25292,7 +25315,7 @@
           style: {
             width: props.size ? props.size : undefined,
             position: 'relative',
-            zIndex: withComponent || (props === null || props === void 0 ? void 0 : props.variant) === 'whatsapp' ? 1 : 2
+            zIndex: withComponent || (props === null || props === void 0 ? void 0 : props.variant) === 'whatsapp' || (props === null || props === void 0 ? void 0 : props.variant) === 'email' ? 1 : 2
           },
           src: properties.typeDevice,
           alt: "device-preview"
@@ -28844,7 +28867,6 @@
   });
   const StyledCard = styled(Card, {
     height: 'fit-content',
-    width: 'fit-content',
     maxWidth: 311,
     padding: '24px !important',
     boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.04)'
@@ -28884,7 +28906,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 106,
+        lineNumber: 105,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -28892,7 +28914,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 107,
+        lineNumber: 106,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(ListWrap, {
@@ -28902,7 +28924,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 108,
+        lineNumber: 107,
         columnNumber: 7
       }
     }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -28911,7 +28933,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 111,
+          lineNumber: 110,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -28930,7 +28952,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 112,
+          lineNumber: 111,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title$1, {
@@ -28965,7 +28987,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 126,
+          lineNumber: 125,
           columnNumber: 17
         }
       }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
@@ -28995,7 +29017,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 169,
+        lineNumber: 168,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -29007,7 +29029,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 170,
+        lineNumber: 169,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -29019,7 +29041,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 177,
+        lineNumber: 176,
         columnNumber: 7
       }
     }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -29029,7 +29051,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 179,
+        lineNumber: 178,
         columnNumber: 11
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -29039,7 +29061,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 181,
+        lineNumber: 180,
         columnNumber: 11
       }
     }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
@@ -29048,7 +29070,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 186,
+        lineNumber: 185,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledCard, {
@@ -29056,7 +29078,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 187,
+        lineNumber: 186,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -29067,7 +29089,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 188,
+        lineNumber: 187,
         columnNumber: 9
       }
     })));
@@ -29081,14 +29103,14 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 197,
+      lineNumber: 196,
       columnNumber: 3
     }
   }, /*#__PURE__*/React__default["default"].createElement(ScrollSpy__default["default"], _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 198,
+      lineNumber: 197,
       columnNumber: 5
     }
   }))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.14",
+  "version": "1.54.15",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",