keski_lib_catalog 1.4.4 → 1.5.0

package/dist/index.modern.js

@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
 import Carousel from 'react-material-ui-carousel';
 import { Box, Typography, Slide, Card, Chip, Button, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent, Container, Accordion, AccordionSummary, AccordionDetails, Link } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
-import { styled } from '@mui/material/styles';
-import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
 import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import { styled } from '@mui/material/styles';
 import Lottie from 'react-lottie';
 
 function _extends() {
@@ -253,9 +253,9 @@ function Layout1$1(content) {
         xs: '100%'
       },
       height: {
-        xs: '80vh',
-        sm: '80vh',
-        md: '80vh'
+        xs: '90vh',
+        sm: '50vh',
+        md: '95vh'
       },
       backgroundSize: 'cover',
       backgroundPosition: 'center',
@@ -384,7 +384,8 @@ function Layout1$2(content) {
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     alignItems: "center",
-    direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
+    direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse',
+    mt: 10
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -398,25 +399,25 @@ function Layout1$2(content) {
   }, /*#__PURE__*/React.createElement(Item$1, {
     elevation: 0,
     sx: {
-      height: "100%",
-      width: "100%",
-      background: "none"
+      height: '100%',
+      width: '100%',
+      background: 'none'
     }
   }, /*#__PURE__*/React.createElement(Card, {
     elevation: 0,
     sx: {
-      borderRadius: "24px",
-      background: "none",
+      borderRadius: '24px',
+      background: 'none',
       backgroundSize: 'center',
       backgroundPosition: 'center'
     }
   }, /*#__PURE__*/React.createElement(CardMedia, {
     component: "img",
     sx: {
-      width: "100%",
+      width: '100%',
       backgroundSize: 'center',
       backgroundPosition: 'center',
-      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") + ")")
+      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') + ")")
     },
     alt: (_content$component$su5 = content.component.subcomponent[0]) !== null && _content$component$su5 !== void 0 && _content$component$su5.title ? (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.title : 'imagen Keski',
     image: (_content$component$su7 = content.component.subcomponent[0]) !== null && _content$component$su7 !== void 0 && _content$component$su7.image ? (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.image.url : 'none'
@@ -430,10 +431,10 @@ function Layout1$2(content) {
   }, /*#__PURE__*/React.createElement(Item$1, {
     elevation: 0,
     sx: {
-      height: "100%",
-      width: "100%",
-      background: "none",
-      paddingTop: "48px"
+      height: '100%',
+      width: '100%',
+      background: 'none',
+      paddingTop: '48px'
     }
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true,
@@ -452,9 +453,9 @@ function Layout1$2(content) {
   } ), /*#__PURE__*/React.createElement(Item$1, {
     elevation: 0,
     sx: {
-      height: "100%",
-      width: "100%",
-      background: "none"
+      height: '100%',
+      width: '100%',
+      background: 'none'
     }
   }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
     disabled: true,
@@ -478,11 +479,11 @@ function Layout1$2(content) {
     sx: {
       whiteSpace: 'pre-wrap',
       fontSize: {
-        xs: "2em",
-        sm: "2em",
-        md: "2em",
-        lg: "2em",
-        xl: "2em"
+        xs: '2em',
+        sm: '2em',
+        md: '2em',
+        lg: '2em',
+        xl: '2em'
       }
     }
   })), /*#__PURE__*/React.createElement(Box, {
@@ -497,11 +498,11 @@ function Layout1$2(content) {
     sx: {
       whiteSpace: 'pre-wrap',
       fontSize: {
-        xs: "1.125em",
-        sm: "1.125em",
-        md: "1.125em",
-        lg: "1.125em",
-        xl: "1.125em"
+        xs: '1.125em',
+        sm: '1.125em',
+        md: '1.125em',
+        lg: '1.125em',
+        xl: '1.125em'
       }
     }
   })), ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
@@ -580,7 +581,7 @@ function Layout1$3(content) {
     }
   }), /*#__PURE__*/React.createElement(Grid$1, {
     container: true,
-    spacing: 2,
+    spacing: 1,
     alignItems: "center",
     justifyContent: "center"
   }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
@@ -774,26 +775,12 @@ function Item$2(props) {
     return null;
   } else {
     return content.length >= 1 ? /*#__PURE__*/React.createElement(Carousel, {
-      autoPlay: false,
-      indicators: false,
-      navButtonsAlwaysVisible: true,
-      navButtonsProps: {
-        style: {
-          backgroundColor: 'transparent',
-          borderRadius: 0,
-          color: '#767676'
-        }
-      },
-      navButtonsWrapperProps: {
-        style: {
-          top: '0',
-          bottom: 'unset'
-        }
-      },
+      autoPlay: true,
+      indicators: true,
+      navButtonsAlwaysVisible: false,
       sx: {
         width: '100%',
-        height: '520px',
-        paddingTop: '70px',
+        height: '620px',
         '& .css-hn784z': {
           left: {
             xs: 'calc(100% - 120px)'
@@ -808,23 +795,20 @@ function Item$2(props) {
       return /*#__PURE__*/React.createElement(Grid$1, {
         container: true,
         key: i,
-        spacing: 3,
+        spacing: 1,
         sx: {
           margin: 'auto',
           padding: 'auto'
         }
-      }, /*#__PURE__*/React.createElement(Box, {
-        sx: {
-          position: 'absolute',
-          top: {
-            xs: '-20px',
-            sm: '-50px'
-          }
-        }
-      }, /*#__PURE__*/React.createElement(Typography, {
+      }, /*#__PURE__*/React.createElement(Grid$1, {
+        container: true,
+        justifyContent: 'center',
+        marginBottom: 1
+      }, /*#__PURE__*/React.createElement(Box, null, ' ', /*#__PURE__*/React.createElement(Typography, {
+        textAlign: 'center',
         component: 'h2',
         dangerouslySetInnerHTML: {
-          __html: title ? title : 'Agregue un título'
+          __html: title ? title : ''
         },
         sx: {
           height: '100%',
@@ -836,27 +820,34 @@ function Item$2(props) {
             xs: '1.875em'
           }
         }
-      })), items.map(function (item, j) {
+      }))), items.map(function (item, j) {
         var _ref;
         return /*#__PURE__*/React.createElement(Grid$1, {
           item: true,
           key: j,
-          sm: 6,
+          sm: 5,
           md: 4,
-          lg: 3,
-          xl: 3,
+          lg: 2.9,
+          xl: 2.9,
           sx: {
             margin: {
               xs: '0px',
               sm: '0px'
             },
-            width: 'object-fit',
-            display: 'flex',
+            display: {
+              xs: '',
+              sm: 'flex'
+            },
             justifyContent: 'center',
             alignItems: 'center',
             '&.MuiGrid-item': {
-              paddingLeft: '10px',
-              paddingTop: '10px'
+              paddingLeft: {
+                xs: '35px',
+                sm: '55px',
+                md: '20px',
+                lg: '12px',
+                xl: '12px'
+              }
             }
           }
         }, /*#__PURE__*/React.createElement(Slide, {
@@ -888,12 +879,20 @@ function Item$2(props) {
               paddingBottom: '8px'
             }
           }
+        }, /*#__PURE__*/React.createElement(Grid$1, {
+          height: {
+            xs: '2vh',
+            sm: '2vh',
+            md: '3.1vh',
+            lg: '3.2vh',
+            xl: '3.2vh'
+          }
         }, /*#__PURE__*/React.createElement(Typography, {
-          component: 'h3',
           dangerouslySetInnerHTML: {
             __html: item.title ? item.title : 'Agrega título'
           },
           sx: {
+            padding: '1px !important',
             display: '-webkit-box',
             WebkitLineClamp: 1,
             WebkitBoxOrient: 'vertical',
@@ -903,17 +902,19 @@ function Item$2(props) {
             fontSize: {
               xs: '1em',
               sm: '1em',
-              md: '1em',
-              lg: '1em',
-              xl: '1em'
+              md: '1.3em',
+              lg: '1.3em',
+              xl: '1.3em'
             }
           }
-        }), /*#__PURE__*/React.createElement(Typography, {
+        })), /*#__PURE__*/React.createElement(Grid$1, null, /*#__PURE__*/React.createElement(Typography, {
           component: 'p',
           dangerouslySetInnerHTML: {
             __html: item.subtitle ? item.subtitle : 'Agrega subtítulo'
           },
           sx: {
+            padding: '1px !important',
+            maxHeight: '40px',
             display: '-webkit-box',
             WebkitLineClamp: 2,
             WebkitBoxOrient: 'vertical',
@@ -928,7 +929,15 @@ function Item$2(props) {
               xl: '1em'
             }
           }
-        }), item.button_active && /*#__PURE__*/React.createElement(Button, {
+        })), item.button_active && /*#__PURE__*/React.createElement(Grid$1, {
+          height: {
+            xs: '2vh',
+            sm: '2vh',
+            md: '2vh',
+            lg: '2vh',
+            xl: '2vh'
+          }
+        }, /*#__PURE__*/React.createElement(Button, {
           variant: "contained",
           href: item.button_action ? item.button_action : '#',
           target: item.link == 4 ? '_blank' : '_self',
@@ -939,7 +948,7 @@ function Item$2(props) {
             borderRadius: '50px',
             fontSize: '12px'
           }
-        }, item.button_title ? item.button_title : 'Nombre botón')))));
+        }, item.button_title ? item.button_title : 'Nombre botón'))))));
       }));
     })) : /*#__PURE__*/React.createElement(Grid$1, {
       container: true,
@@ -1086,13 +1095,7 @@ var List = /*#__PURE__*/function (_AtomicElements) {
 
 function Layout1$6(content) {
   return /*#__PURE__*/React.createElement(Grid$1, {
-    container: true,
-    sx: {
-      minHeight: '250px',
-      width: '100%',
-      margin: 'auto',
-      padding: '0px'
-    }
+    container: true
   }, /*#__PURE__*/React.createElement(Item$3, {
     title: content.component.title,
     content: content.component.subcomponent,
@@ -1141,13 +1144,13 @@ function Item$3(props) {
   } else {
     return content.length >= 1 ? /*#__PURE__*/React.createElement(Carousel, {
       autoPlay: true,
-      indicators: false,
+      indicators: true,
       swipe: true,
       cycleNavigation: true,
       sx: {
         width: '100%',
-        height: '250px',
-        paddingTop: '60px',
+        height: '40vh',
+        paddingTop: '20px',
         position: 'relative'
       }
     }, arrayFourElements.map(function (items, p) {
@@ -1156,33 +1159,21 @@ function Item$3(props) {
         key: p
       }, /*#__PURE__*/React.createElement(Grid$1, {
         container: true,
-        spacing: 0,
         sx: {
-          margin: 'auto',
           padding: 'auto'
         }
-      }, /*#__PURE__*/React.createElement(Box, {
-        sx: {
-          position: 'absolute',
-          top: {
-            xs: '-70px',
-            sm: '-70px'
-          },
-          zIndex: 1,
-          width: '100%',
-          display: 'flex'
-        }
-      }, ' ', /*#__PURE__*/React.createElement(Typography, {
+      }, /*#__PURE__*/React.createElement(Grid$1, {
+        container: true,
+        justifyContent: 'center',
+        marginBottom: 1
+      }, /*#__PURE__*/React.createElement(Box, null, ' ', /*#__PURE__*/React.createElement(Typography, {
+        textAlign: 'center',
         component: 'h2',
         dangerouslySetInnerHTML: {
           __html: title ? title : ''
         },
         sx: {
           height: '100%',
-          textAlign: {
-            xs: 'center',
-            sm: 'left'
-          },
           fontSize: {
             xl: '3em',
             lg: '3em',
@@ -1191,30 +1182,31 @@ function Item$3(props) {
             xs: '1.875em'
           }
         }
-      })), items.map(function (item, j) {
-        return /*#__PURE__*/React.createElement(Grid$1, {
-          item: true,
-          key: j,
-          xs: 12,
-          sm: 6,
-          md: 4,
-          lg: 3,
-          xl: 3,
-          sx: {
-            margin: {
-              xs: '0px',
-              sm: '0px'
+      }))), /*#__PURE__*/React.createElement(Grid$1, {
+        item: true,
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 12,
+        sx: {
+          width: 'object-fit',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          '&.MuiGrid-item': {
+            paddingLeft: {
+              xs: '80px',
+              sm: '12px',
+              md: '12px',
+              lg: '12px',
+              xl: '12px'
             },
-            width: 'object-fit',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            '&.MuiGrid-item': {
-              paddingLeft: '17px',
-              paddingTop: '10px'
-            }
+            paddingTop: '10px'
           }
-        }, /*#__PURE__*/React.createElement(Slide, {
+        }
+      }, items.map(function (item, j) {
+        return /*#__PURE__*/React.createElement(Slide, {
           direction: "left",
           "in": visible
         }, /*#__PURE__*/React.createElement(Card, {
@@ -1222,21 +1214,23 @@ function Item$3(props) {
           sx: {
             width: '100%',
             height: '100%',
+            maxHeight: '200px',
             borderRadius: '10px',
-            background: 'none'
+            background: 'none',
+            margin: 'auto'
           }
         }, /*#__PURE__*/React.createElement(CardMedia, {
           component: "img",
           image: item.image ? item.image.url ? item.image.url : 'none' : 'none',
           alt: item.title ? item.title : 'none',
           sx: {
-            width: '100%',
-            height: '140px',
-            marginTop: '10px',
-            transform: "translate(" + item.image_transform_x + "%, " + item.image_transform_y + "%) scale(" + (item.image_scale ? item.image_scale : '1') + ")"
+            width: '200px',
+            height: 'auto',
+            maxHeight: '200px',
+            objectFit: 'contain'
           }
-        }))));
-      })));
+        })));
+      }))));
     })) : null;
   }
 }
@@ -1370,8 +1364,10 @@ function CanvasContainer(props) {
       backgroundColor: json.component.bg_type === 1 ? json.component.bg_color1 : undefined,
       backgroundImage: json.component.bg_type === 2 ? "linear-gradient(to " + json.component.bg_gradiant_orientation + ", " + json.component.bg_color1 + ", " + json.component.bg_color2 + ")" : json.component.bg_type === 3 ? "url(" + ((_json$component$bg_im = json.component.bg_image) === null || _json$component$bg_im === void 0 ? void 0 : _json$component$bg_im.url) + ")" : undefined,
       backgroundPosition: 'center',
+      backgroundAttachment: 'fixed',
       backgroundSize: 'cover',
-      backgroundRepeat: 'no-repeat'
+      backgroundRepeat: 'no-repeat',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {