keski_lib_catalog 1.2.5 → 1.2.7

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Carousel from 'react-material-ui-carousel';
-import { Box, Slide, Typography, Container, Chip, Button, Card, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent } from '@mui/material';
+import { Box, Slide, Typography, Chip, Button, Card, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent, Container } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
@@ -168,9 +168,7 @@ var Quotes = /*#__PURE__*/function (_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, _content$component$su9, _content$component$su10, _content$component$su11, _content$component$su12, _content$component$su13, _content$component$su14, _content$component$su15, _content$component$su16;
   var visible = true;
-  return /*#__PURE__*/React.createElement(Container, {
-    maxWidth: "lg"
-  }, /*#__PURE__*/React.createElement(Slide, {
+  return /*#__PURE__*/React.createElement(Slide, {
     direction: "left",
     "in": visible
   }, /*#__PURE__*/React.createElement(Box, {
@@ -179,7 +177,9 @@ function Layout1$1(content) {
         xs: '100%'
       },
       height: {
-        xs: '100%'
+        xs: '80vh',
+        sm: "80vh",
+        md: "80vh"
       },
       backgroundImage: "url(" + ((_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.image ? (_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.image : 'none') + ")",
       backgroundSize: 'cover',
@@ -192,12 +192,12 @@ function Layout1$1(content) {
       flexDirection: 'column',
       width: {
         xs: '100%',
-        md: '50%',
+        md: '90%',
         lg: '80%'
       },
       height: {
-        xs: '100%',
-        lg: '60vh'
+        xs: '80vh',
+        lg: '80vh'
       },
       justifyContent: 'center',
       margin: '1em',
@@ -222,8 +222,10 @@ function Layout1$1(content) {
       whiteSpace: 'pre-wrap',
       fontSize: {
         xs: "2em",
+        sm: "2em",
         md: "2em",
-        lg: "3.75em"
+        lg: "3.75em",
+        xl: "3.75em"
       },
       fontWeight: "bold"
     }
@@ -236,14 +238,16 @@ function Layout1$1(content) {
       whiteSpace: 'pre-wrap',
       fontSize: {
         xs: "1.125em",
+        sm: "1.125em",
         md: "1.125em",
-        lg: "1.125em"
+        lg: "1.125em",
+        xl: "1.125em"
       }
     }
   }), ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     size: "medium",
-    color: "secondary",
+    color: "primary",
     href: (_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_action,
     target: ((_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.link) == 4 ? '_blank' : '_self',
     sx: {
@@ -251,7 +255,7 @@ function Layout1$1(content) {
       padding: '14px 40px',
       borderRadius: '50px'
     }
-  }, (_content$component$su15 = content.component.subcomponent[0]) !== null && _content$component$su15 !== void 0 && _content$component$su15.button_title ? (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.button_title : 'Nombre botón'))))));
+  }, (_content$component$su15 = content.component.subcomponent[0]) !== null && _content$component$su15 !== void 0 && _content$component$su15.button_title ? (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.button_title : 'Nombre botón')))));
 }
 
 var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -286,9 +290,7 @@ var Item$1 = styled(Paper)(function (_ref) {
 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, _content$component$su11, _content$component$su12, _content$component$su13, _content$component$su14, _content$component$su15, _content$component$su16, _content$component$su17, _content$component$su18, _content$component$su19;
   var visible = true;
-  return /*#__PURE__*/React.createElement(Container, {
-    maxWidth: "lg"
-  }, /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     alignItems: "center",
     direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
@@ -379,9 +381,10 @@ function Layout1$2(content) {
       whiteSpace: 'pre-wrap',
       fontSize: {
         xs: "2em",
+        sm: "2em",
         md: "2em",
         lg: "2em",
-        xl: "3em"
+        xl: "2em"
       }
     }
   })), /*#__PURE__*/React.createElement(Box, {
@@ -396,13 +399,15 @@ function Layout1$2(content) {
       whiteSpace: 'pre-wrap',
       fontSize: {
         xs: "1.125em",
+        sm: "1.125em",
         md: "1.125em",
-        lg: "1em"
+        lg: "1em",
+        xl: "1em"
       }
     }
   })), ((_content$component$su15 = content.component.subcomponent[0]) === null || _content$component$su15 === void 0 ? void 0 : _content$component$su15.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
-    color: "secondary",
+    color: "primary",
     href: (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.button_action,
     target: ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.link) == 4 ? '_blank' : '_self',
     sx: {
@@ -410,7 +415,7 @@ function Layout1$2(content) {
       padding: '14px 40px',
       borderRadius: '40px'
     }
-  }, (_content$component$su18 = content.component.subcomponent[0]) !== null && _content$component$su18 !== void 0 && _content$component$su18.button_title ? (_content$component$su19 = content.component.subcomponent[0]) === null || _content$component$su19 === void 0 ? void 0 : _content$component$su19.button_title : 'Nombre botón'))))))));
+  }, (_content$component$su18 = content.component.subcomponent[0]) !== null && _content$component$su18 !== void 0 && _content$component$su18.button_title ? (_content$component$su19 = content.component.subcomponent[0]) === null || _content$component$su19 === void 0 ? void 0 : _content$component$su19.button_title : 'Nombre botón')))))));
 }
 
 var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -451,9 +456,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
 function Layout1$3(content) {
   var _content$component$su;
   var visible = true;
-  return /*#__PURE__*/React.createElement(Container, {
-    maxWidth: "lg"
-  }, /*#__PURE__*/React.createElement(Slide, {
+  return /*#__PURE__*/React.createElement(Slide, {
     direction: "left",
     "in": visible
   }, /*#__PURE__*/React.createElement(Box, {
@@ -486,7 +489,7 @@ function Layout1$3(content) {
         marginBottom: '16px'
       }
     }));
-  })))));
+  }))));
 }
 
 var Gallery = /*#__PURE__*/function (_AtomicElements) {
@@ -508,9 +511,7 @@ 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(Container, {
-    maxWidth: "lg"
-  }, /*#__PURE__*/React.createElement(Slide, {
+  return /*#__PURE__*/React.createElement(Slide, {
     direction: "left",
     "in": visible
   }, /*#__PURE__*/React.createElement(Box, {
@@ -523,19 +524,41 @@ function Layout1$4(content) {
       textAlign: content.component.justify_content
     }
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "title-xlarge",
+    dangerouslySetInnerHTML: {
+      __html: (_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 titulo'
+    },
     sx: {
       marginBottom: '16px',
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      fontSize: {
+        xs: "1.875em",
+        sm: "1.875em",
+        md: "2.25em",
+        lg: "3em",
+        xl: "3em"
+      },
+      fontWeight: "bold"
     }
-  }, (_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(Typography, {
-    className: "middle",
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: content.component.justify_content == "center" ? "100%" : "80%"
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    dangerouslySetInnerHTML: {
+      __html: (_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'
+    },
     sx: {
       marginBottom: '16px',
-      color: '#767676',
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      fontSize: {
+        xs: "1em",
+        sm: "1em",
+        md: "1em",
+        lg: "1.125em",
+        xl: "1.125em"
+      }
     }
-  }, (_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'))));
+  }))));
 }
 
 var Text = /*#__PURE__*/function (_AtomicElements) {
@@ -1027,26 +1050,41 @@ function CanvasContainer(props) {
   }, /*#__PURE__*/React.createElement(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: json.type === 0 ? '0px 24px' : '64px 24px',
+      padding: json.type === 0 ? {
+        xl: '0px 24px',
+        lg: '0px 24px',
+        sm: '0px 0px',
+        xs: '0px 0px'
+      } : '64px 24px',
       width: '100%',
       height: '100%'
     }
   }, /*#__PURE__*/React.createElement(Container, {
-    maxWidth: "xl",
+    maxWidth: "lg",
     sx: {
       padding: '0px',
       '&.MuiContainer-root': {
-        paddingLeft: {
-          xs: '0px',
-          sm: '20px',
-          lg: '32px',
-          xl: '32px'
+        paddingLeft: json.type == 0 ? {
+          sx: '0px',
+          sm: '0px',
+          md: '0px'
+        } : {
+          xs: '24px',
+          md: '24px',
+          sm: '24px',
+          lg: '24px',
+          xl: '24px'
         },
-        paddingRight: {
-          xs: '0px',
-          sm: '20px',
-          lg: '32px',
-          xl: '32px'
+        paddingRight: json.type == 0 ? {
+          sx: '0px',
+          sm: '0px',
+          md: '0px'
+        } : {
+          xs: '24px',
+          md: '24px',
+          sm: '24px',
+          lg: '24px',
+          xl: '24px'
         }
       }
     }