@xelto.npm/xc2-lib 1.0.8 → 1.0.10

package/dist/index.cjs.js

@@ -74986,7 +74986,7 @@ var StyledButtonsWrapper$1 = styled$1(Box$1)(function (_ref3) {
     width: '100%',
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'stretch',
     padding: '10px 0',
     zIndex: 5,
     columnGap: 3
@@ -74999,7 +74999,7 @@ var StyledHelperTextWrapper = styled$1(Box$1)(function (_ref4) {
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
     alignItems: 'center',
     paddingBottom: '4px',
     zIndex: 5,
@@ -99257,8 +99257,8 @@ var StyledModalWrapper = styled$1(Modal$1, {
       display: 'none'
     },
     'svg': {
-      width: '72px!important',
-      height: '72px!important',
+      // width: '72px!important',
+      // height: '72px!important',
       '@media(min-width: 480px)': {
         width: '115px',
         height: '115px'
@@ -99282,9 +99282,9 @@ var StyledScrollableDescription = styled$1(Box$1)(function (_ref3) {
     color: theme.mainPallete.primary.blue,
     textAlign: 'center',
     marginBottom: '30px',
-    paddingRight: '8px',
     // maxHeight: '200px',
     overflowY: 'auto',
+    width: '100%',
     fontFamily: ['"Barlow", sans-serif'],
     fontWeight: theme.fontWeight.medium,
     '&.not-string': {
@@ -99351,8 +99351,8 @@ var StyledIconHeaderWrapper = styled$1(Box$1)(function (_ref6) {
         margin: '0!important'
       },
       'svg': {
-        width: '72px!important',
-        height: '72px!important',
+        // width: '72px!important',
+        // height: '72px!important',
         '@media(min-width: 480px)': {
           width: '92px!important',
           height: '92px!important'
@@ -99368,12 +99368,12 @@ var StyledIconHeaderWrapper = styled$1(Box$1)(function (_ref6) {
         margin: '0!important'
       },
       'svg': {
-        width: '72px!important',
-        height: '72px!important',
+        // width: '72px!important',
+        // height: '72px!important',
         marginBottom: '6px',
         '@media(min-width: 480px)': {
-          width: '115px!important',
-          height: '115px!important',
+          // width: '115px!important',
+          // height: '115px!important',
           marginBottom: '9px'
         }
       }
@@ -99401,7 +99401,8 @@ var CustomModal = function CustomModal(_ref7) {
     isModalOpen = _ref7.isModalOpen,
     forwardedRef = _ref7.forwardedRef,
     _ref7$headingType = _ref7.headingType,
-    headingType = _ref7$headingType === void 0 ? 'row' : _ref7$headingType;
+    headingType = _ref7$headingType === void 0 ? 'column' : _ref7$headingType,
+    icon = _ref7.icon;
   var isScrollableTextModal = type === 'text-scroll';
   var isHeadingTypeRow = headingType === 'row';
   var isActionButtonHidden = actionButtonLabel === '' || actionButtonLabel === undefined;
@@ -99424,10 +99425,21 @@ var CustomModal = function CustomModal(_ref7) {
     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, {
+  }, function () {
+    if (icon === 'error') return /*#__PURE__*/React__namespace.createElement(Icon, {
+      iconName: 'icon_sp_warning',
+      size: "small"
+    });else if (icon === 'success') return /*#__PURE__*/React__namespace.createElement(Icon, {
+      iconName: 'icon_sp_check_mark',
+      size: "small"
+    });else if (icon === 'info') return /*#__PURE__*/React__namespace.createElement(Icon, {
+      iconName: 'icon_sp_info_2',
+      size: "small"
+    });else return /*#__PURE__*/React__namespace.createElement(Icon, {
+      iconName: 'icon_sp_info',
+      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, {
@@ -99478,7 +99490,8 @@ CustomModal.propTypes = {
     current: propTypesExports.any
   })]),
   title: propTypesExports.string,
-  type: propTypesExports.string
+  type: propTypesExports.string,
+  icon: propTypesExports.string
 };
 CustomModal.defaultProps = {
   actionButtonLabel: '',

package/dist/index.esm.js

@@ -74966,7 +74966,7 @@ var StyledButtonsWrapper$1 = styled$1(Box$1)(function (_ref3) {
     width: '100%',
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'stretch',
     padding: '10px 0',
     zIndex: 5,
     columnGap: 3
@@ -74979,7 +74979,7 @@ var StyledHelperTextWrapper = styled$1(Box$1)(function (_ref4) {
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
     alignItems: 'center',
     paddingBottom: '4px',
     zIndex: 5,
@@ -99237,8 +99237,8 @@ var StyledModalWrapper = styled$1(Modal$1, {
       display: 'none'
     },
     'svg': {
-      width: '72px!important',
-      height: '72px!important',
+      // width: '72px!important',
+      // height: '72px!important',
       '@media(min-width: 480px)': {
         width: '115px',
         height: '115px'
@@ -99262,9 +99262,9 @@ var StyledScrollableDescription = styled$1(Box$1)(function (_ref3) {
     color: theme.mainPallete.primary.blue,
     textAlign: 'center',
     marginBottom: '30px',
-    paddingRight: '8px',
     // maxHeight: '200px',
     overflowY: 'auto',
+    width: '100%',
     fontFamily: ['"Barlow", sans-serif'],
     fontWeight: theme.fontWeight.medium,
     '&.not-string': {
@@ -99331,8 +99331,8 @@ var StyledIconHeaderWrapper = styled$1(Box$1)(function (_ref6) {
         margin: '0!important'
       },
       'svg': {
-        width: '72px!important',
-        height: '72px!important',
+        // width: '72px!important',
+        // height: '72px!important',
         '@media(min-width: 480px)': {
           width: '92px!important',
           height: '92px!important'
@@ -99348,12 +99348,12 @@ var StyledIconHeaderWrapper = styled$1(Box$1)(function (_ref6) {
         margin: '0!important'
       },
       'svg': {
-        width: '72px!important',
-        height: '72px!important',
+        // width: '72px!important',
+        // height: '72px!important',
         marginBottom: '6px',
         '@media(min-width: 480px)': {
-          width: '115px!important',
-          height: '115px!important',
+          // width: '115px!important',
+          // height: '115px!important',
           marginBottom: '9px'
         }
       }
@@ -99381,7 +99381,8 @@ var CustomModal = function CustomModal(_ref7) {
     isModalOpen = _ref7.isModalOpen,
     forwardedRef = _ref7.forwardedRef,
     _ref7$headingType = _ref7.headingType,
-    headingType = _ref7$headingType === void 0 ? 'row' : _ref7$headingType;
+    headingType = _ref7$headingType === void 0 ? 'column' : _ref7$headingType,
+    icon = _ref7.icon;
   var isScrollableTextModal = type === 'text-scroll';
   var isHeadingTypeRow = headingType === 'row';
   var isActionButtonHidden = actionButtonLabel === '' || actionButtonLabel === undefined;
@@ -99404,10 +99405,21 @@ var CustomModal = function CustomModal(_ref7) {
     type: 'modal-header'
   })), !isHeadingTypeRow && /*#__PURE__*/React.createElement(StyledIconHeaderWrapper, {
     className: 'column'
-  }, /*#__PURE__*/React.createElement(Illustration, {
-    illustrationName: 'ilu_status_change',
-    size: "small"
-  }), /*#__PURE__*/React.createElement(TypographyComponent, {
+  }, function () {
+    if (icon === 'error') return /*#__PURE__*/React.createElement(Icon, {
+      iconName: 'icon_sp_warning',
+      size: "small"
+    });else if (icon === 'success') return /*#__PURE__*/React.createElement(Icon, {
+      iconName: 'icon_sp_check_mark',
+      size: "small"
+    });else if (icon === 'info') return /*#__PURE__*/React.createElement(Icon, {
+      iconName: 'icon_sp_info_2',
+      size: "small"
+    });else return /*#__PURE__*/React.createElement(Icon, {
+      iconName: 'icon_sp_info',
+      size: "small"
+    });
+  }(), /*#__PURE__*/React.createElement(TypographyComponent, {
     text: title,
     type: 'modal-header'
   })), type === 'basic' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TypographyComponent, {
@@ -99458,7 +99470,8 @@ CustomModal.propTypes = {
     current: propTypesExports.any
   })]),
   title: propTypesExports.string,
-  type: propTypesExports.string
+  type: propTypesExports.string,
+  icon: propTypesExports.string
 };
 CustomModal.defaultProps = {
   actionButtonLabel: '',

package/package.json

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