keski_lib_catalog 1.2.4 → 1.2.6

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,13 +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: "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: {
@@ -250,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) {
@@ -280,22 +285,13 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 var Item$1 = styled(Paper)(function (_ref) {
-  var theme = _ref.theme;
-  return _extends({
-    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
-  }, theme.typography.body2, {
-    textAlign: 'left',
-    color: theme.palette.text.secondary
-  });
+  return {};
 });
 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;
+  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,
-    justifyContent: "space-evenly",
     alignItems: "center",
     direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -334,9 +330,9 @@ function Layout1$2(content) {
       paddingTop: '56.25%',
       backgroundSize: 'center',
       backgroundPosition: 'center',
-      transform: (_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.image_scale ? (_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.image_scale : '1'
+      transform: "translate(\n                        " + ((_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.image_transform_x) + "%\n                        ,\n                        " + ((_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.image_transform_y) + "%)" + ("scale(" + ((_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.image_scale ? (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.image_scale : "1") + ")")
     },
-    image: (_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.image ? (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.image.url : 'none'
+    image: (_content$component$su5 = content.component.subcomponent[0]) !== null && _content$component$su5 !== void 0 && _content$component$su5.image ? (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.image.url : 'none'
   }))))), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -363,15 +359,15 @@ function Layout1$2(content) {
       width: "100%",
       background: "none"
     }
-  }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
+  }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
     disabled: true,
     color: "info",
-    label: (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.label ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label : 'Agregue etiqueta',
+    label: (_content$component$su8 = content.component.subcomponent[0]) !== null && _content$component$su8 !== void 0 && _content$component$su8.label ? (_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.label : 'Agregue etiqueta',
     sx: {
       marginBottom: '16px',
       fontSize: '1em',
       borderRadius: '6px',
-      backgroundColor: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.label_color
+      backgroundColor: (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.label_color
     }
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
@@ -379,15 +375,16 @@ function Layout1$2(content) {
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     dangerouslySetInnerHTML: {
-      __html: (_content$component$su9 = content.component.subcomponent[0]) !== null && _content$component$su9 !== void 0 && _content$component$su9.title ? (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.title : 'Agregue titulo'
+      __html: (_content$component$su11 = content.component.subcomponent[0]) !== null && _content$component$su11 !== void 0 && _content$component$su11.title ? (_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.title : 'Agregue titulo'
     },
     sx: {
       whiteSpace: 'pre-wrap',
       fontSize: {
         xs: "2em",
+        sm: "2em",
         md: "2em",
         lg: "2em",
-        xl: "3em"
+        xl: "2em"
       }
     }
   })), /*#__PURE__*/React.createElement(Box, {
@@ -396,26 +393,29 @@ function Layout1$2(content) {
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     dangerouslySetInnerHTML: {
-      __html: (_content$component$su11 = content.component.subcomponent[0]) !== null && _content$component$su11 !== void 0 && _content$component$su11.description ? (_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.description : 'Agregue descripción'
+      __html: (_content$component$su13 = content.component.subcomponent[0]) !== null && _content$component$su13 !== void 0 && _content$component$su13.description ? (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.description : 'Agregue descripción'
     },
     sx: {
       whiteSpace: 'pre-wrap',
       fontSize: {
         xs: "1.125em",
+        sm: "1.125em",
         md: "1.125em",
-        lg: "1em"
+        lg: "1em",
+        xl: "1em"
       }
     }
-  })), ((_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+  })), ((_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",
-    href: (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.button_action,
-    target: ((_content$component$su15 = content.component.subcomponent[0]) === null || _content$component$su15 === void 0 ? void 0 : _content$component$su15.link) == 4 ? '_blank' : '_self',
+    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: {
       width: 'auto',
       padding: '14px 40px',
       borderRadius: '40px'
     }
-  }, (_content$component$su16 = content.component.subcomponent[0]) !== null && _content$component$su16 !== void 0 && _content$component$su16.button_title ? (_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.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) {
@@ -437,6 +437,8 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
       'button_active': 'Button Active',
       'image': 'image',
       'image_scale': 'image scale',
+      'image_transform_x': 'image transform x',
+      'image_transform_y': 'image transform y',
       'link': 'Link'
     }, {
       'type': 0,
@@ -516,25 +518,47 @@ function Layout1$4(content) {
     sx: {
       width: {
         xs: '100%',
-        md: '70%'
+        md: '100%'
       },
       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(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) {
@@ -1026,21 +1050,35 @@ 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',
-      width: '100%'
+      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: {
+        paddingLeft: json.type == 0 ? {
+          sx: '0px',
+          sm: '0px',
+          md: '0px'
+        } : {
           xs: '0px',
           sm: '20px',
           lg: '32px',
           xl: '32px'
         },
-        paddingRight: {
+        paddingRight: json.type == 0 ? {
+          sx: '0px',
+          sm: '0px',
+          md: '0px'
+        } : {
           xs: '0px',
           sm: '20px',
           lg: '32px',