@xelto.npm/xc2-lib 0.1.43 → 0.1.45

package/dist/index.cjs.js

@@ -55054,14 +55054,16 @@ var StyledTypography = styled$1(Typography$2)(function (_ref) {
       fontWeight: theme.fontWeight.medium
     },
     '&.modal-header': {
-      fontSize: '26px',
-      lineHeight: '34px',
+      fontSize: '22px',
+      lineHeight: '24px',
       letterSpacing: 0.1,
       color: theme.mainPallete.primary.blue,
       textAlign: 'center',
       margin: '14px 0 6px',
       '@media(min-width: 480px)': {
-        margin: '22px 0 14px'
+        margin: '22px 0 14px',
+        fontSize: '26px',
+        lineHeight: '34px'
       },
       fontWeight: theme.fontWeight.medium,
       '@media(min-width: 720px)': {
@@ -55077,12 +55079,16 @@ var StyledTypography = styled$1(Typography$2)(function (_ref) {
       }
     },
     '&.modal-description': {
-      fontSize: '18px',
-      lineHeight: '24px',
+      fontSize: '15px',
+      lineHeight: '21px',
       color: theme.mainPallete.primary.blue,
       textAlign: 'center',
       marginBottom: '45px',
       fontWeight: theme.fontWeight.medium,
+      '@media(min-width: 480px)': {
+        fontSize: '18px',
+        lineHeight: '24px'
+      },
       '@media(min-width: 720px)': {
         fontSize: '32px',
         lineHeight: '43px',
@@ -98756,12 +98762,27 @@ var MUIDataTable = /*@__PURE__*/getDefaultExportFromCjs(dist);
 
 var StyledCustomTable = styled$1(Box$1, {
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fixedHeader';
+    switch (prop) {
+      case 'fixedHeader':
+        return false;
+      case 'noLeftWrap':
+        return false;
+      case 'noRightWrap':
+        return false;
+      case 'paddingBottom':
+        return false;
+      default:
+        return true;
+    }
   }
 })(function (_ref) {
-  var fixedHeader = _ref.fixedHeader;
+  var fixedHeader = _ref.fixedHeader,
+    noLeftWrap = _ref.noLeftWrap,
+    noRightWrap = _ref.noRightWrap,
+    paddingBottom = _ref.paddingBottom;
   return {
     width: '100%',
+    paddingBottom: paddingBottom !== 0 ? "".concat(paddingBottom, "px!important") : '0px!important',
     '&.toolbar-hidden': {
       '.MuiToolbar-root': {
         minHeight: 0
@@ -98873,6 +98894,7 @@ var StyledCustomTable = styled$1(Box$1, {
             },
             '&:first-child': {
               borderRadius: '15px 0 0 0',
+              whiteSpace: noLeftWrap ? 'nowrap!important' : 'normal!important',
               '&:after': {
                 borderRadius: '15px 0 0 0'
               },
@@ -98893,6 +98915,7 @@ var StyledCustomTable = styled$1(Box$1, {
             },
             '&:nth-of-type(2)': {
               textAlign: 'right',
+              whiteSpace: noRightWrap ? 'nowrap!important' : 'normal!important',
               padding: '7px 10px 7px 0',
               '@media(min-width: 480px)': {
                 padding: '12px 10px 12px 0'
@@ -99113,7 +99136,10 @@ var TableMobileComponent = function TableMobileComponent(_ref4) {
     searchPlaceholder = _ref4.searchPlaceholder,
     onRowDoubleClick = _ref4.onRowDoubleClick,
     enableRowDetails = _ref4.enableRowDetails,
-    onRowDetailClick = _ref4.onRowDetailClick;
+    onRowDetailClick = _ref4.onRowDetailClick,
+    noLeftWrap = _ref4.noLeftWrap,
+    noRightWrap = _ref4.noRightWrap,
+    paddingBottom = _ref4.paddingBottom;
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray$a(_useState3, 2),
     values = _useState4[0],
@@ -99208,7 +99234,10 @@ var TableMobileComponent = function TableMobileComponent(_ref4) {
   return /*#__PURE__*/React.createElement(StyledCustomTable, {
     id: id,
     className: !includeSearch ? 'toolbar-hidden' : '',
-    fixedHeader: fixedHeader
+    fixedHeader: fixedHeader,
+    noLeftWrap: noLeftWrap,
+    noRightWrap: noRightWrap,
+    paddingBottom: paddingBottom
   }, includeSearch && /*#__PURE__*/React.createElement(MUIDataTable, {
     data: values,
     columns: customColumns,
@@ -99230,7 +99259,10 @@ TableMobileComponent.propTypes = {
   setSelectedRows: propTypesExports.func,
   onRowDoubleClick: propTypesExports.oneOfType([propTypesExports.func, undefined]),
   onRowDetailClick: propTypesExports.oneOfType([propTypesExports.func, undefined]),
-  enableRowDetails: propTypesExports.bool
+  enableRowDetails: propTypesExports.bool,
+  noLeftWrap: propTypesExports.bool,
+  noRightWrap: propTypesExports.bool,
+  paddingBottom: propTypesExports.number
 };
 TableMobileComponent.defaultProps = {
   columns: [],
@@ -99242,7 +99274,10 @@ TableMobileComponent.defaultProps = {
   setSelectedRows: function setSelectedRows() {},
   onRowDoubleClick: undefined,
   onRowDetailClick: undefined,
-  enableRowDetails: false
+  enableRowDetails: false,
+  noLeftWrap: false,
+  noRightWrap: false,
+  paddingBottom: 0
 };
 
 var StyledModalContainer = styled$1(Box$1)(function (_ref) {
@@ -99277,37 +99312,37 @@ var StyledModalWrapper = styled$1(Modal$1, {
       justifyContent: 'center',
       alignItems: 'center',
       position: 'absolute',
-      padding: '35px 25px',
+      padding: '25px 25px',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       width: '320px',
       height: '423px',
       zIndex: 1402,
+      '@media(min-width: 480px)': {
+        padding: '35px 30px'
+      },
       '@media(min-width: 720px)': {
         width: '460px',
         height: '640px',
-        padding: '0 45px'
+        padding: '30px 45px'
       },
       '@media(min-width: 1024px)': {
         width: '270px',
         height: isBottomTextButton ? '402px' : '364px',
-        padding: '0 40px'
+        padding: '30px 40px'
       },
       '&.scrollable': {
         width: '90vw',
-        height: '85vh',
-        '@media(min-width: 480px)': {
-          width: '394px',
-          height: '586px'
-        },
+        // height: '85vh',
+        height: 'min-content',
+        alignItems: 'flex-start',
+        maxHeight: '85vh',
         '@media(min-width: 720px)': {
-          width: '626px',
-          height: '887px'
+          width: '626px'
         },
         '@media(min-width: 1024px)': {
-          width: '367px',
-          height: '482px'
+          width: '367px'
         }
       }
     },
@@ -99315,8 +99350,12 @@ var StyledModalWrapper = styled$1(Modal$1, {
       display: 'none'
     },
     'svg': {
-      width: '115px',
-      height: '115px',
+      width: '72px!important',
+      height: '72px!important',
+      '@media(min-width: 480px)': {
+        width: '115px',
+        height: '115px'
+      },
       '@media(min-width: 720px)': {
         width: '170px',
         height: '170px'
@@ -99335,12 +99374,15 @@ var StyledScrollableDescription = styled$1(Box$1)(function (_ref3) {
     lineHeight: '24px',
     color: theme.mainPallete.primary.blue,
     textAlign: 'center',
-    marginBottom: '40px',
+    marginBottom: '30px',
     paddingRight: '8px',
-    maxHeight: '200px',
+    // maxHeight: '200px',
     overflowY: 'auto',
     fontFamily: ['"Barlow", sans-serif'],
     fontWeight: theme.fontWeight.medium,
+    '@media(min-width: 480px)': {
+      marginBottom: '40px'
+    },
     '@media(min-width: 720px)': {
       fontSize: '32px',
       lineHeight: '43px',
@@ -99380,18 +99422,75 @@ var StyledBottomButtonWrapper = styled$1(Box$1)(function (_ref5) {
     }
   };
 });
-var CustomModal = function CustomModal(_ref6) {
-  var actionButtonLabel = _ref6.actionButtonLabel,
-    bottomButtonLabel = _ref6.bottomButtonLabel,
-    closeButtonLabel = _ref6.closeButtonLabel,
-    description = _ref6.description,
-    title = _ref6.title,
-    type = _ref6.type,
-    handleCloseModal = _ref6.handleCloseModal,
-    handleActionButton = _ref6.handleActionButton,
-    isModalOpen = _ref6.isModalOpen,
-    forwardedRef = _ref6.forwardedRef;
+var StyledIconHeaderWrapper = styled$1(Box$1)(function (_ref6) {
+  _objectDestructuringEmpty(_ref6);
+  return {
+    display: 'flex',
+    width: '100%',
+    marginBottom: '25px',
+    '&.row': {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gridGap: '20px',
+      '> p': {
+        textAlign: 'left!important',
+        margin: '0!important'
+      },
+      'svg': {
+        width: '72px!important',
+        height: '72px!important',
+        '@media(min-width: 480px)': {
+          width: '92px!important',
+          height: '92px!important'
+        }
+      }
+    },
+    '&.column': {
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      '> p': {
+        textAlign: 'center!important',
+        margin: '0!important'
+      },
+      'svg': {
+        width: '72px!important',
+        height: '72px!important',
+        marginBottom: '6px',
+        '@media(min-width: 480px)': {
+          width: '115px!important',
+          height: '115px!important',
+          marginBottom: '9px'
+        }
+      }
+    }
+
+    // marginTop: '30px',
+    // '@media(min-width: 720px)' :{
+    //     marginTop: '45px',
+    // },
+    // '@media(min-width:1024px)' : {
+    //     marginTop: '25px'
+    // }
+  };
+});
+
+var CustomModal = function CustomModal(_ref7) {
+  var actionButtonLabel = _ref7.actionButtonLabel,
+    bottomButtonLabel = _ref7.bottomButtonLabel,
+    closeButtonLabel = _ref7.closeButtonLabel,
+    description = _ref7.description,
+    title = _ref7.title,
+    type = _ref7.type,
+    handleCloseModal = _ref7.handleCloseModal,
+    handleActionButton = _ref7.handleActionButton,
+    isModalOpen = _ref7.isModalOpen,
+    forwardedRef = _ref7.forwardedRef,
+    _ref7$headingType = _ref7.headingType,
+    headingType = _ref7$headingType === void 0 ? 'row' : _ref7$headingType;
   var isScrollableTextModal = type === 'text-scroll';
+  var isHeadingTypeRow = headingType === 'row';
   var isActionButtonHidden = actionButtonLabel === '' || actionButtonLabel === undefined;
   return /*#__PURE__*/React__namespace.createElement(StyledModalContainer, {
     ref: forwardedRef,
@@ -99401,13 +99500,23 @@ var CustomModal = function CustomModal(_ref6) {
     open: isModalOpen,
     onClose: handleCloseModal,
     isBottomTextButton: bottomButtonLabel
-  }, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Illustration, {
+  }, /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, isHeadingTypeRow && /*#__PURE__*/React__namespace.createElement(StyledIconHeaderWrapper, {
+    className: 'row'
+  }, /*#__PURE__*/React__namespace.createElement(Illustration, {
+    illustrationName: 'ilu_status_change',
+    size: "small"
+  }), /*#__PURE__*/React__namespace.createElement(TypographyComponent, {
+    text: title,
+    type: 'modal-header'
+  })), !isHeadingTypeRow && /*#__PURE__*/React__namespace.createElement(StyledIconHeaderWrapper, {
+    className: 'column'
+  }, /*#__PURE__*/React__namespace.createElement(Illustration, {
     illustrationName: 'ilu_status_change',
     size: "small"
   }), /*#__PURE__*/React__namespace.createElement(TypographyComponent, {
     text: title,
     type: 'modal-header'
-  }), type === 'basic' && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(TypographyComponent, {
+  })), type === 'basic' && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(TypographyComponent, {
     text: description,
     type: 'modal-description'
   }), /*#__PURE__*/React__namespace.createElement(CustomButtonComponent, {
@@ -99418,14 +99527,14 @@ var CustomModal = function CustomModal(_ref6) {
     color: "navy-blue",
     size: 'small'
   })), isScrollableTextModal && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(StyledScrollableDescription, null, description), /*#__PURE__*/React__namespace.createElement(StyledButtonsWrapper, null, !isActionButtonHidden && /*#__PURE__*/React__namespace.createElement(CustomButtonComponent, {
-    fixed: true,
+    fluid: true,
     onClick: handleActionButton,
     type: "secondary",
     text: actionButtonLabel,
     color: "navy-blue",
     size: 'small'
   }), /*#__PURE__*/React__namespace.createElement(CustomButtonComponent, {
-    fixed: true,
+    fluid: true,
     onClick: handleCloseModal,
     type: "primary",
     text: closeButtonLabel,
@@ -99447,6 +99556,7 @@ CustomModal.propTypes = {
   description: propTypesExports.string,
   handleCloseModal: propTypesExports.func,
   handleActionButton: propTypesExports.func,
+  headingType: propTypesExports.string,
   isModalOpen: propTypesExports.bool,
   forwardedRef: propTypesExports.oneOfType([propTypesExports.func, propTypesExports.shape({
     current: propTypesExports.any
@@ -99461,6 +99571,7 @@ CustomModal.defaultProps = {
   description: '',
   handleCloseModal: function handleCloseModal() {},
   handleActionButton: function handleActionButton() {},
+  headingType: 'row',
   isModalOpen: false,
   forwardedRef: function forwardedRef() {},
   title: '',

package/dist/index.esm.js

@@ -55034,14 +55034,16 @@ var StyledTypography = styled$1(Typography$2)(function (_ref) {
       fontWeight: theme.fontWeight.medium
     },
     '&.modal-header': {
-      fontSize: '26px',
-      lineHeight: '34px',
+      fontSize: '22px',
+      lineHeight: '24px',
       letterSpacing: 0.1,
       color: theme.mainPallete.primary.blue,
       textAlign: 'center',
       margin: '14px 0 6px',
       '@media(min-width: 480px)': {
-        margin: '22px 0 14px'
+        margin: '22px 0 14px',
+        fontSize: '26px',
+        lineHeight: '34px'
       },
       fontWeight: theme.fontWeight.medium,
       '@media(min-width: 720px)': {
@@ -55057,12 +55059,16 @@ var StyledTypography = styled$1(Typography$2)(function (_ref) {
       }
     },
     '&.modal-description': {
-      fontSize: '18px',
-      lineHeight: '24px',
+      fontSize: '15px',
+      lineHeight: '21px',
       color: theme.mainPallete.primary.blue,
       textAlign: 'center',
       marginBottom: '45px',
       fontWeight: theme.fontWeight.medium,
+      '@media(min-width: 480px)': {
+        fontSize: '18px',
+        lineHeight: '24px'
+      },
       '@media(min-width: 720px)': {
         fontSize: '32px',
         lineHeight: '43px',
@@ -98736,12 +98742,27 @@ var MUIDataTable = /*@__PURE__*/getDefaultExportFromCjs(dist);
 
 var StyledCustomTable = styled$1(Box$1, {
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'fixedHeader';
+    switch (prop) {
+      case 'fixedHeader':
+        return false;
+      case 'noLeftWrap':
+        return false;
+      case 'noRightWrap':
+        return false;
+      case 'paddingBottom':
+        return false;
+      default:
+        return true;
+    }
   }
 })(function (_ref) {
-  var fixedHeader = _ref.fixedHeader;
+  var fixedHeader = _ref.fixedHeader,
+    noLeftWrap = _ref.noLeftWrap,
+    noRightWrap = _ref.noRightWrap,
+    paddingBottom = _ref.paddingBottom;
   return {
     width: '100%',
+    paddingBottom: paddingBottom !== 0 ? "".concat(paddingBottom, "px!important") : '0px!important',
     '&.toolbar-hidden': {
       '.MuiToolbar-root': {
         minHeight: 0
@@ -98853,6 +98874,7 @@ var StyledCustomTable = styled$1(Box$1, {
             },
             '&:first-child': {
               borderRadius: '15px 0 0 0',
+              whiteSpace: noLeftWrap ? 'nowrap!important' : 'normal!important',
               '&:after': {
                 borderRadius: '15px 0 0 0'
               },
@@ -98873,6 +98895,7 @@ var StyledCustomTable = styled$1(Box$1, {
             },
             '&:nth-of-type(2)': {
               textAlign: 'right',
+              whiteSpace: noRightWrap ? 'nowrap!important' : 'normal!important',
               padding: '7px 10px 7px 0',
               '@media(min-width: 480px)': {
                 padding: '12px 10px 12px 0'
@@ -99093,7 +99116,10 @@ var TableMobileComponent = function TableMobileComponent(_ref4) {
     searchPlaceholder = _ref4.searchPlaceholder,
     onRowDoubleClick = _ref4.onRowDoubleClick,
     enableRowDetails = _ref4.enableRowDetails,
-    onRowDetailClick = _ref4.onRowDetailClick;
+    onRowDetailClick = _ref4.onRowDetailClick,
+    noLeftWrap = _ref4.noLeftWrap,
+    noRightWrap = _ref4.noRightWrap,
+    paddingBottom = _ref4.paddingBottom;
   var _useState3 = useState([]),
     _useState4 = _slicedToArray$a(_useState3, 2),
     values = _useState4[0],
@@ -99188,7 +99214,10 @@ var TableMobileComponent = function TableMobileComponent(_ref4) {
   return /*#__PURE__*/React__default.createElement(StyledCustomTable, {
     id: id,
     className: !includeSearch ? 'toolbar-hidden' : '',
-    fixedHeader: fixedHeader
+    fixedHeader: fixedHeader,
+    noLeftWrap: noLeftWrap,
+    noRightWrap: noRightWrap,
+    paddingBottom: paddingBottom
   }, includeSearch && /*#__PURE__*/React__default.createElement(MUIDataTable, {
     data: values,
     columns: customColumns,
@@ -99210,7 +99239,10 @@ TableMobileComponent.propTypes = {
   setSelectedRows: propTypesExports.func,
   onRowDoubleClick: propTypesExports.oneOfType([propTypesExports.func, undefined]),
   onRowDetailClick: propTypesExports.oneOfType([propTypesExports.func, undefined]),
-  enableRowDetails: propTypesExports.bool
+  enableRowDetails: propTypesExports.bool,
+  noLeftWrap: propTypesExports.bool,
+  noRightWrap: propTypesExports.bool,
+  paddingBottom: propTypesExports.number
 };
 TableMobileComponent.defaultProps = {
   columns: [],
@@ -99222,7 +99254,10 @@ TableMobileComponent.defaultProps = {
   setSelectedRows: function setSelectedRows() {},
   onRowDoubleClick: undefined,
   onRowDetailClick: undefined,
-  enableRowDetails: false
+  enableRowDetails: false,
+  noLeftWrap: false,
+  noRightWrap: false,
+  paddingBottom: 0
 };
 
 var StyledModalContainer = styled$1(Box$1)(function (_ref) {
@@ -99257,37 +99292,37 @@ var StyledModalWrapper = styled$1(Modal$1, {
       justifyContent: 'center',
       alignItems: 'center',
       position: 'absolute',
-      padding: '35px 25px',
+      padding: '25px 25px',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       width: '320px',
       height: '423px',
       zIndex: 1402,
+      '@media(min-width: 480px)': {
+        padding: '35px 30px'
+      },
       '@media(min-width: 720px)': {
         width: '460px',
         height: '640px',
-        padding: '0 45px'
+        padding: '30px 45px'
       },
       '@media(min-width: 1024px)': {
         width: '270px',
         height: isBottomTextButton ? '402px' : '364px',
-        padding: '0 40px'
+        padding: '30px 40px'
       },
       '&.scrollable': {
         width: '90vw',
-        height: '85vh',
-        '@media(min-width: 480px)': {
-          width: '394px',
-          height: '586px'
-        },
+        // height: '85vh',
+        height: 'min-content',
+        alignItems: 'flex-start',
+        maxHeight: '85vh',
         '@media(min-width: 720px)': {
-          width: '626px',
-          height: '887px'
+          width: '626px'
         },
         '@media(min-width: 1024px)': {
-          width: '367px',
-          height: '482px'
+          width: '367px'
         }
       }
     },
@@ -99295,8 +99330,12 @@ var StyledModalWrapper = styled$1(Modal$1, {
       display: 'none'
     },
     'svg': {
-      width: '115px',
-      height: '115px',
+      width: '72px!important',
+      height: '72px!important',
+      '@media(min-width: 480px)': {
+        width: '115px',
+        height: '115px'
+      },
       '@media(min-width: 720px)': {
         width: '170px',
         height: '170px'
@@ -99315,12 +99354,15 @@ var StyledScrollableDescription = styled$1(Box$1)(function (_ref3) {
     lineHeight: '24px',
     color: theme.mainPallete.primary.blue,
     textAlign: 'center',
-    marginBottom: '40px',
+    marginBottom: '30px',
     paddingRight: '8px',
-    maxHeight: '200px',
+    // maxHeight: '200px',
     overflowY: 'auto',
     fontFamily: ['"Barlow", sans-serif'],
     fontWeight: theme.fontWeight.medium,
+    '@media(min-width: 480px)': {
+      marginBottom: '40px'
+    },
     '@media(min-width: 720px)': {
       fontSize: '32px',
       lineHeight: '43px',
@@ -99360,18 +99402,75 @@ var StyledBottomButtonWrapper = styled$1(Box$1)(function (_ref5) {
     }
   };
 });
-var CustomModal = function CustomModal(_ref6) {
-  var actionButtonLabel = _ref6.actionButtonLabel,
-    bottomButtonLabel = _ref6.bottomButtonLabel,
-    closeButtonLabel = _ref6.closeButtonLabel,
-    description = _ref6.description,
-    title = _ref6.title,
-    type = _ref6.type,
-    handleCloseModal = _ref6.handleCloseModal,
-    handleActionButton = _ref6.handleActionButton,
-    isModalOpen = _ref6.isModalOpen,
-    forwardedRef = _ref6.forwardedRef;
+var StyledIconHeaderWrapper = styled$1(Box$1)(function (_ref6) {
+  _objectDestructuringEmpty(_ref6);
+  return {
+    display: 'flex',
+    width: '100%',
+    marginBottom: '25px',
+    '&.row': {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gridGap: '20px',
+      '> p': {
+        textAlign: 'left!important',
+        margin: '0!important'
+      },
+      'svg': {
+        width: '72px!important',
+        height: '72px!important',
+        '@media(min-width: 480px)': {
+          width: '92px!important',
+          height: '92px!important'
+        }
+      }
+    },
+    '&.column': {
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      '> p': {
+        textAlign: 'center!important',
+        margin: '0!important'
+      },
+      'svg': {
+        width: '72px!important',
+        height: '72px!important',
+        marginBottom: '6px',
+        '@media(min-width: 480px)': {
+          width: '115px!important',
+          height: '115px!important',
+          marginBottom: '9px'
+        }
+      }
+    }
+
+    // marginTop: '30px',
+    // '@media(min-width: 720px)' :{
+    //     marginTop: '45px',
+    // },
+    // '@media(min-width:1024px)' : {
+    //     marginTop: '25px'
+    // }
+  };
+});
+
+var CustomModal = function CustomModal(_ref7) {
+  var actionButtonLabel = _ref7.actionButtonLabel,
+    bottomButtonLabel = _ref7.bottomButtonLabel,
+    closeButtonLabel = _ref7.closeButtonLabel,
+    description = _ref7.description,
+    title = _ref7.title,
+    type = _ref7.type,
+    handleCloseModal = _ref7.handleCloseModal,
+    handleActionButton = _ref7.handleActionButton,
+    isModalOpen = _ref7.isModalOpen,
+    forwardedRef = _ref7.forwardedRef,
+    _ref7$headingType = _ref7.headingType,
+    headingType = _ref7$headingType === void 0 ? 'row' : _ref7$headingType;
   var isScrollableTextModal = type === 'text-scroll';
+  var isHeadingTypeRow = headingType === 'row';
   var isActionButtonHidden = actionButtonLabel === '' || actionButtonLabel === undefined;
   return /*#__PURE__*/React.createElement(StyledModalContainer, {
     ref: forwardedRef,
@@ -99381,13 +99480,23 @@ var CustomModal = function CustomModal(_ref6) {
     open: isModalOpen,
     onClose: handleCloseModal,
     isBottomTextButton: bottomButtonLabel
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Illustration, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isHeadingTypeRow && /*#__PURE__*/React.createElement(StyledIconHeaderWrapper, {
+    className: 'row'
+  }, /*#__PURE__*/React.createElement(Illustration, {
+    illustrationName: 'ilu_status_change',
+    size: "small"
+  }), /*#__PURE__*/React.createElement(TypographyComponent, {
+    text: title,
+    type: 'modal-header'
+  })), !isHeadingTypeRow && /*#__PURE__*/React.createElement(StyledIconHeaderWrapper, {
+    className: 'column'
+  }, /*#__PURE__*/React.createElement(Illustration, {
     illustrationName: 'ilu_status_change',
     size: "small"
   }), /*#__PURE__*/React.createElement(TypographyComponent, {
     text: title,
     type: 'modal-header'
-  }), type === 'basic' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TypographyComponent, {
+  })), type === 'basic' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TypographyComponent, {
     text: description,
     type: 'modal-description'
   }), /*#__PURE__*/React.createElement(CustomButtonComponent, {
@@ -99398,14 +99507,14 @@ var CustomModal = function CustomModal(_ref6) {
     color: "navy-blue",
     size: 'small'
   })), isScrollableTextModal && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledScrollableDescription, null, description), /*#__PURE__*/React.createElement(StyledButtonsWrapper, null, !isActionButtonHidden && /*#__PURE__*/React.createElement(CustomButtonComponent, {
-    fixed: true,
+    fluid: true,
     onClick: handleActionButton,
     type: "secondary",
     text: actionButtonLabel,
     color: "navy-blue",
     size: 'small'
   }), /*#__PURE__*/React.createElement(CustomButtonComponent, {
-    fixed: true,
+    fluid: true,
     onClick: handleCloseModal,
     type: "primary",
     text: closeButtonLabel,
@@ -99427,6 +99536,7 @@ CustomModal.propTypes = {
   description: propTypesExports.string,
   handleCloseModal: propTypesExports.func,
   handleActionButton: propTypesExports.func,
+  headingType: propTypesExports.string,
   isModalOpen: propTypesExports.bool,
   forwardedRef: propTypesExports.oneOfType([propTypesExports.func, propTypesExports.shape({
     current: propTypesExports.any
@@ -99441,6 +99551,7 @@ CustomModal.defaultProps = {
   description: '',
   handleCloseModal: function handleCloseModal() {},
   handleActionButton: function handleActionButton() {},
+  headingType: 'row',
   isModalOpen: false,
   forwardedRef: function forwardedRef() {},
   title: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xelto.npm/xc2-lib",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "author": "XELTO",
   "description": "React component library based on MUI",
   "license": "ISC",