keski_lib_catalog 1.0.34 → 1.0.36

package/dist/index.js

@@ -1,6 +1,7 @@
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var Carousel = _interopDefault(require('react-material-ui-carousel'));
 var material = require('@mui/material');
 var Grow = _interopDefault(require('@mui/material/Grow'));
@@ -58,7 +59,7 @@ var AtomicElements = /*#__PURE__*/function () {
 }();
 
 function Layout1(content) {
-  return /*#__PURE__*/React.createElement(Carousel, {
+  return /*#__PURE__*/React__default.createElement(Carousel, {
     indicators: true,
     navButtonsAlwaysInvisible: true,
     sx: {
@@ -66,7 +67,7 @@ function Layout1(content) {
       height: '100%'
     }
   }, content.component.subcomponent.map(function (item, i) {
-    return /*#__PURE__*/React.createElement(Item, {
+    return /*#__PURE__*/React__default.createElement(Item, {
       key: i,
       content: item,
       side: content.component.justify_content
@@ -95,7 +96,7 @@ function Item(props) {
       return 'auto';
     }
   };
-  return /*#__PURE__*/React.createElement(material.Box, {
+  return /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       width: {
@@ -107,17 +108,17 @@ function Item(props) {
       textAlign: side,
       height: '100%'
     }
-  }, /*#__PURE__*/React.createElement(material.Slide, {
+  }, /*#__PURE__*/React__default.createElement(material.Slide, {
     direction: "left",
     "in": visible
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       flexDirection: 'column',
       color: content.text_color,
       alignItems: getSideRender(side)
     }
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     component: "img",
     src: content.image ? content.image.url : "https://cdn-icons-png.flaticon.com/512/6596/6596121.png",
     sx: {
@@ -126,12 +127,16 @@ function Item(props) {
       marginBottom: '16px',
       borderRadius: '50%'
     }
-  }), /*#__PURE__*/React.createElement(material.Typography, {
+  }), /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "xmiddle",
     sx: {
-      marginBottom: '16px'
+      marginBottom: '16px',
+      minHeight: {
+        xs: '270px',
+        md: '90px'
+      }
     }
-  }, content.description ? content.description : 'Agregue descripción'), /*#__PURE__*/React.createElement(material.Typography, {
+  }, content.description ? content.description : 'Agregue descripción'), /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "small",
     sx: {
       marginBottom: '16px',
@@ -151,7 +156,7 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
       'type': 1,
       'subtitle': 'Subtitle',
       'description': 'Description',
-      'image': 'Image'
+      'image': 'sqr'
     }];
     return _this;
   }
@@ -159,12 +164,12 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 function Layout1$1(content) {
-  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8;
+  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8, _content$component$su9;
   var visible = true;
-  return /*#__PURE__*/React.createElement(material.Slide, {
+  return /*#__PURE__*/React__default.createElement(material.Slide, {
     direction: "left",
     "in": visible
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       flexDirection: 'column',
@@ -179,24 +184,25 @@ function Layout1$1(content) {
       justifyContent: 'center',
       color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "title-xxlarge",
     sx: {
       marginBottom: '16px'
     }
-  }, (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.title ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.title : 'Agregue título'), /*#__PURE__*/React.createElement(material.Typography, {
+  }, (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.title ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.title : 'Agregue título'), /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "xmiddle",
     sx: {
       marginBottom: '16px'
     }
-  }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.description ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.description : 'Agregue descripción'), /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.Button, {
+  }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.description ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.description : 'Agregue descripción'), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
     variant: "contained",
     href: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.button_action,
+    target: ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.link) == 4 ? '_blank' : '_self',
     sx: {
       width: 'auto',
       marginBottom: '16px'
     }
-  }, (_content$component$su7 = content.component.subcomponent[0]) !== null && _content$component$su7 !== void 0 && _content$component$su7.button_title ? (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_title : 'Nombre botón'))));
+  }, (_content$component$su8 = content.component.subcomponent[0]) !== null && _content$component$su8 !== void 0 && _content$component$su8.button_title ? (_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.button_title : 'Nombre botón'))));
 }
 
 var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -221,9 +227,9 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 function Layout1$2(content) {
-  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8, _content$component$su9, _content$component$su10;
+  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8, _content$component$su9, _content$component$su10, _content$component$su11;
   var visible = true;
-  return /*#__PURE__*/React.createElement(material.Box, {
+  return /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       flexDirection: {
@@ -234,10 +240,10 @@ function Layout1$2(content) {
       alignItems: 'center'
     },
     color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
-  }, /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.Slide, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Slide, {
     direction: "right",
     "in": visible
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       width: {
         xs: '100%',
@@ -250,37 +256,38 @@ function Layout1$2(content) {
       },
       maxWidth: '100vw'
     }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     width: "100%",
     height: "100%",
     src: (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.image ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.image.url : 'https://wozapps-develop.s3.us-east-2.amazonaws.com/gerry/resources/landing/bbb84144-02cd-4cf8-a1be-21ba47e7c4fa.jpeg'
-  })))), /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Grow, _extends({
+  })))), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(Grow, _extends({
     "in": visible,
     style: {
       transformOrigin: '0 0 0'
     }
   },  {
     timeout: 1000
-  } ), /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.Box, {
+  } ), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       marginBottom: '16px'
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "title-xlarge"
-  }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.title ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.title : 'Agregue título')), /*#__PURE__*/React.createElement(material.Box, {
+  }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.title ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.title : 'Agregue título')), /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       marginBottom: '16px',
       color: '#767676'
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "middle"
-  }, (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.description ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.description : 'Agregue descripción')), /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(material.Button, {
+  }, (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.description ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.description : 'Agregue descripción')), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
     variant: "contained",
     href: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_action,
+    target: ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.link) == 4 ? '_blank' : '_self',
     sx: {
       width: 'auto'
     }
-  }, (_content$component$su9 = content.component.subcomponent[0]) !== null && _content$component$su9 !== void 0 && _content$component$su9.button_title ? (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.button_title : 'Nombre botón'))))));
+  }, (_content$component$su10 = content.component.subcomponent[0]) !== null && _content$component$su10 !== void 0 && _content$component$su10.button_title ? (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_title : 'Nombre botón'))))));
 }
 
 var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -296,7 +303,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
       'description': 'Text',
       'button_title': 'Button Title',
       'button_action': 'Button Action',
-      'image': 'Image',
+      'image': 'req_hor',
       'link': 'Link'
     }, {
       'type': 0,
@@ -304,7 +311,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
       'description': 'Text',
       'button_title': 'Button Title',
       'button_action': 'Button Action',
-      'image': 'Image'
+      'image': 'req_hor'
     }];
     return _this;
   }
@@ -314,27 +321,27 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
 function Layout1$3(content) {
   var _content$component$su;
   var visible = true;
-  return /*#__PURE__*/React.createElement(material.Slide, {
+  return /*#__PURE__*/React__default.createElement(material.Slide, {
     direction: "left",
     "in": visible
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       width: '100%'
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "title-xlarge",
     sx: {
       margin: '16px auto'
     }
-  }, content.component.title), /*#__PURE__*/React.createElement(material.Grid, {
+  }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true
   }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
-    return /*#__PURE__*/React.createElement(material.Grid, {
+    return /*#__PURE__*/React__default.createElement(material.Grid, {
       key: index,
       item: true,
       xs: 12,
       md: 4
-    }, /*#__PURE__*/React.createElement(material.Box, {
+    }, /*#__PURE__*/React__default.createElement(material.Box, {
       component: "img",
       src: img.image.url ? img.image.url : 'https://wozapps-develop.s3.us-east-2.amazonaws.com/gerry/resources/landing/bbb84144-02cd-4cf8-a1be-21ba47e7c4fa.jpeg',
       sx: {
@@ -358,8 +365,7 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
     _this.layoutFootprint = ['gallery_layout_1.png'];
     _this.layoutFootprintReq = [{
       'type': 1,
-      'title': 'Tittle',
-      'image': 'Image'
+      'image': 'req_hor'
     }];
     return _this;
   }
@@ -369,21 +375,24 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
 function Layout1$4(content) {
   var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5;
   var visible = true;
-  return /*#__PURE__*/React.createElement(material.Slide, {
+  return /*#__PURE__*/React__default.createElement(material.Slide, {
     direction: "left",
     "in": visible
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
-      width: '70%',
+      width: {
+        xs: '100%',
+        md: '70%'
+      },
       color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
       textAlign: content.component.justify_content
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "title-xlarge",
     sx: {
       marginBottom: '16px'
     }
-  }, (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.title ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.title : 'Agregue título'), /*#__PURE__*/React.createElement(material.Typography, {
+  }, (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.title ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.title : 'Agregue título'), /*#__PURE__*/React__default.createElement(material.Typography, {
     className: "middle",
     sx: {
       marginBottom: '16px',
@@ -409,12 +418,265 @@ var Text = /*#__PURE__*/function (_AtomicElements) {
   return Text;
 }(AtomicElements);
 
+function Layout1$5(content) {
+  return /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    sx: {
+      height: '550px',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(Item$1, {
+    content: content.component.subcomponent,
+    side: content.component.justify_content
+  }));
+}
+function Item$1(props) {
+  var content = props.content,
+    side = props.side;
+  var _useState = React.useState([]),
+    arrayFourElements = _useState[0],
+    setArrayFourElements = _useState[1];
+  var visible = true;
+  var theme = material.useTheme();
+  var isXsScreen = material.useMediaQuery(theme.breakpoints.down('sm'));
+  var isSmScreen = material.useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  var isMdScreen = material.useMediaQuery(theme.breakpoints.between('md', 'lg'));
+  var isLgScreen = material.useMediaQuery(theme.breakpoints.up('lg'));
+  function divideArreglo(arreglo, tamanoMaximo) {
+    var subarreglos = [];
+    var subarregloActual = [];
+    for (var i = 0; i < arreglo.length; i++) {
+      subarregloActual.push(arreglo[i]);
+      if (subarregloActual.length === tamanoMaximo || i === arreglo.length - 1) {
+        subarreglos.push(subarregloActual);
+        subarregloActual = [];
+      }
+    }
+    return subarreglos;
+  }
+  React.useEffect(function () {
+    var tamanoMaximo;
+    if (isSmScreen) {
+      tamanoMaximo = 2;
+    } else if (isMdScreen) {
+      tamanoMaximo = 3;
+    } else if (isLgScreen) {
+      tamanoMaximo = 4;
+    } else if (isXsScreen) {
+      tamanoMaximo = 1;
+    }
+    setArrayFourElements(divideArreglo(content, tamanoMaximo));
+  }, [isXsScreen, isSmScreen, isMdScreen, isLgScreen, content]);
+  if (!arrayFourElements) {
+    return null;
+  } else {
+    return content.length > 4 ? /*#__PURE__*/React__default.createElement(Carousel, {
+      autoPlay: false,
+      indicators: false,
+      navButtonsAlwaysVisible: true,
+      navButtonsProps: {
+        style: {
+          backgroundColor: 'transparent',
+          borderRadius: 0,
+          color: '#767676'
+        }
+      },
+      navButtonsWrapperProps: {
+        style: {
+          top: '0',
+          bottom: 'unset'
+        }
+      },
+      sx: {
+        width: '100%',
+        height: '520px',
+        paddingTop: '64px',
+        "& .css-hn784z": {
+          left: {
+            xs: '60%',
+            md: '90%'
+          },
+          height: 'auto'
+        },
+        "& .css-1abc02a": {
+          height: 'auto'
+        }
+      }
+    }, arrayFourElements.map(function (items, i) {
+      return /*#__PURE__*/React__default.createElement(material.Grid, {
+        container: true,
+        key: i,
+        spacing: 3,
+        sx: {
+          margin: 'auto',
+          padding: 'auto'
+        }
+      }, items.map(function (item, j) {
+        var _ref;
+        return /*#__PURE__*/React__default.createElement(material.Grid, {
+          item: true,
+          key: j,
+          sm: 6,
+          md: 4,
+          lg: 3,
+          sx: {
+            paddingLeft: '0px',
+            '& .MuiGrid-item': {
+              paddingLeft: '0px'
+            }
+          }
+        }, /*#__PURE__*/React__default.createElement(material.Slide, {
+          direction: "left",
+          "in": visible
+        }, /*#__PURE__*/React__default.createElement(material.Card, {
+          sx: (_ref = {
+            width: '300px',
+            maxWidth: 300,
+            boxShadow: 'none',
+            borderRadius: 0,
+            border: '1px solid #e5e5e5'
+          }, _ref["borderRadius"] = '10px', _ref.backgroundColor = 'transparent', _ref)
+        }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
+          component: "img",
+          height: "300px",
+          width: "300px",
+          image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image',
+          sx: {
+            aspectRatio: '1/1'
+          }
+        }), /*#__PURE__*/React__default.createElement(material.CardContent, {
+          sx: {
+            padding: '8px 16px',
+            textAlign: side,
+            '&.MuiCardContent-root:last-child': {
+              paddingBottom: '8px'
+            }
+          }
+        }, /*#__PURE__*/React__default.createElement(material.Typography, {
+          className: "title",
+          sx: {
+            display: '-webkit-box',
+            WebkitLineClamp: 1,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }
+        }, item.title ? item.title : 'Agrega título'), /*#__PURE__*/React__default.createElement(material.Typography, {
+          className: "middle",
+          sx: {
+            minHeight: '54px',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }
+        }, item.subtitle ? item.subtitle : 'Agrega subtítulo'), /*#__PURE__*/React__default.createElement(material.Button, {
+          variant: "contained",
+          href: item.button_action ? item.button_action : '#',
+          target: item.link == 4 ? '_blank' : '_self',
+          sx: {
+            width: 'auto',
+            marginTop: '16px'
+          }
+        }, item.button_title ? item.button_title : 'Nombre botón')))));
+      }));
+    })) : content.map(function (item, i) {
+      var _ref2;
+      return /*#__PURE__*/React__default.createElement(material.Grid, {
+        item: true,
+        key: i,
+        sm: 6,
+        md: 4,
+        lg: 3
+      }, /*#__PURE__*/React__default.createElement(material.Slide, {
+        direction: "left",
+        "in": visible
+      }, /*#__PURE__*/React__default.createElement(material.Card, {
+        sx: (_ref2 = {
+          width: '300px',
+          maxWidth: 512,
+          boxShadow: 'none',
+          borderRadius: 0,
+          border: '1px solid #e5e5e5'
+        }, _ref2["borderRadius"] = '10px', _ref2)
+      }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
+        component: "img",
+        height: "300px",
+        width: "300px",
+        sx: {
+          aspectRatio: '1/1'
+        },
+        image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image'
+      }), /*#__PURE__*/React__default.createElement(material.CardContent, {
+        sx: {
+          padding: '8px 16px',
+          '&.MuiCardContent-root:last-child': {
+            paddingBottom: '8px'
+          }
+        }
+      }, /*#__PURE__*/React__default.createElement(material.Box, {
+        component: "div",
+        sx: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React__default.createElement(material.Box, {
+        sx: {
+          maxWidth: '80%'
+        }
+      }, /*#__PURE__*/React__default.createElement(material.Typography, {
+        className: "title",
+        sx: {
+          display: '-webkit-box',
+          WebkitLineClamp: 1,
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
+      }, item.title ? item.title : 'Agrega título'))), /*#__PURE__*/React__default.createElement(material.Typography, {
+        className: "middle",
+        sx: {
+          minHeight: '54px',
+          display: '-webkit-box',
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
+      }, item.subtitle ? item.subtitle : 'Agrega subtítulo')))));
+    });
+  }
+}
+
+var List = /*#__PURE__*/function (_AtomicElements) {
+  _inheritsLoose(List, _AtomicElements);
+  function List() {
+    var _this;
+    _this = _AtomicElements.call(this) || this;
+    _this.layout = [Layout1$5];
+    _this.layoutFootprint = ['list_layout_1.png'];
+    _this.layoutFootprintReq = [{
+      'type': 1,
+      'title': 'Title',
+      'subtitle': 'Subtitle',
+      'button_title': 'Button Title',
+      'button_action': 'Button Action',
+      'image': 'sqr',
+      'link': 'Link'
+    }];
+    return _this;
+  }
+  return List;
+}(AtomicElements);
+
 function CanvasContainer(props) {
   var _json$component$bg_im;
   var json = props.json,
     children = props.children;
   var rgbColor = hexToRgb(json.component.bg_image_overlay_color);
-  return /*#__PURE__*/React.createElement(material.Box, {
+  return /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
       alignItems: 'center',
@@ -424,13 +686,13 @@ function CanvasContainer(props) {
       backgroundSize: 'cover',
       backgroundRepeat: 'no-repeat'
     }
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       bgcolor: "" + (json.component.bg_image_overlay && json.component.bg_type === 3 ? "rgba(" + rgbColor.r + ", " + rgbColor.g + ", " + rgbColor.b + ", " + json.component.bg_image_overlay_alpha_css + ")" : undefined),
       padding: '64px 24px',
       width: '100%'
     }
-  }, /*#__PURE__*/React.createElement(material.Container, {
+  }, /*#__PURE__*/React__default.createElement(material.Container, {
     maxWidth: "xl",
     sx: {
       padding: '0px',
@@ -445,7 +707,7 @@ function CanvasContainer(props) {
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(material.Box, {
+  }, /*#__PURE__*/React__default.createElement(material.Box, {
     sx: {
       minWidth: {
         xs: '100%',
@@ -488,7 +750,7 @@ var Section = /*#__PURE__*/function () {
   var _proto = Section.prototype;
   _proto.component = function component(json) {
     console.log('json', json);
-    return /*#__PURE__*/React.createElement(CanvasContainer, {
+    return /*#__PURE__*/React__default.createElement(CanvasContainer, {
       json: json
     }, this.child.build(json, json.component.layout));
   };
@@ -512,7 +774,8 @@ var Sections = /*#__PURE__*/function () {
     this.textPlusImg = new Section(new TextPlusImg());
     this.gallery = new Section(new Gallery());
     this.text = new Section(new Text());
-    this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text];
+    this.list = new Section(new List());
+    this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list];
   }
   var _proto2 = Sections.prototype;
   _proto2.getSectionList = function getSectionList() {
@@ -521,7 +784,8 @@ var Sections = /*#__PURE__*/function () {
       '1': 'Texto + Imágenes',
       '2': 'Citas/Testimonios',
       '3': 'Galeria',
-      '4': 'Texto'
+      '4': 'Texto',
+      '5': 'Lista'
     };
   };
   _proto2.getLayoutsFromSection = function getLayoutsFromSection(index) {