keski_lib_catalog 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +323 -105
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +335 -117
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.modern.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import Carousel from 'react-material-ui-carousel';
3
- import { Box, Slide, Typography, Button, Grid, useTheme, useMediaQuery, Card, CardMedia, CardContent, Container } from '@mui/material';
4
- import Grow from '@mui/material/Grow';
5
- import { createTheme, styled } from '@mui/material/styles';
3
+ import { Box, Slide, Typography, Container, Chip, Button, Card, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent } from '@mui/material';
4
+ import { styled, createTheme } from '@mui/material/styles';
6
5
  import Paper from '@mui/material/Paper';
7
- import Grid$1 from '@mui/material/Grid';
6
+ import Grid from '@mui/material/Grid';
7
+ import Grow from '@mui/material/Grow';
8
8
  import { ThemeProvider } from '@emotion/react';
9
9
 
10
10
  function _extends() {
@@ -167,47 +167,97 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
167
167
  }(AtomicElements);
168
168
 
169
169
  function Layout1$1(content) {
170
- 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;
170
+ 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;
171
171
  var visible = true;
172
- return /*#__PURE__*/React.createElement(Slide, {
172
+ return /*#__PURE__*/React.createElement(Container, {
173
+ maxWidth: false,
174
+ disableGutters: true,
175
+ sx: {
176
+ maxWidth: "1200px"
177
+ }
178
+ }, /*#__PURE__*/React.createElement(Slide, {
173
179
  direction: "left",
174
180
  "in": visible
181
+ }, /*#__PURE__*/React.createElement(Box, {
182
+ sx: {
183
+ width: {
184
+ xs: '100%'
185
+ },
186
+ height: {
187
+ xs: '100%'
188
+ },
189
+ 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') + ")",
190
+ backgroundSize: 'cover',
191
+ backgroundPosition: 'center',
192
+ display: 'flex'
193
+ }
175
194
  }, /*#__PURE__*/React.createElement(Box, {
176
195
  sx: {
177
196
  display: 'flex',
178
197
  flexDirection: 'column',
179
198
  width: {
180
199
  xs: '100%',
181
- md: '50%'
200
+ md: '50%',
201
+ lg: '80%'
182
202
  },
183
203
  height: {
184
204
  xs: '100%',
185
205
  lg: '60vh'
186
206
  },
187
207
  justifyContent: 'center',
188
- color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
208
+ margin: '1em',
209
+ color: (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.text_color
189
210
  }
190
- }, /*#__PURE__*/React.createElement(Typography, {
191
- className: "title-xxlarge",
211
+ }, ((_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
212
+ disabled: true,
213
+ color: "info",
214
+ label: (_content$component$su5 = content.component.subcomponent[0]) !== null && _content$component$su5 !== void 0 && _content$component$su5.label ? (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.label : 'Agregue etiqueta',
192
215
  sx: {
193
216
  marginBottom: '16px',
194
- whiteSpace: 'pre-wrap'
217
+ fontSize: '1em',
218
+ borderRadius: '6px',
219
+ backgroundColor: (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label_color
195
220
  }
196
- }, (_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, {
197
- className: "xmiddle",
221
+ })), /*#__PURE__*/React.createElement(Typography, {
222
+ dangerouslySetInnerHTML: {
223
+ __html: (_content$component$su8 = content.component.subcomponent[0]) !== null && _content$component$su8 !== void 0 && _content$component$su8.title ? (_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.title : 'Agregue titulo'
224
+ },
198
225
  sx: {
199
226
  marginBottom: '16px',
200
- whiteSpace: 'pre-wrap'
227
+ whiteSpace: 'pre-wrap',
228
+ fontSize: {
229
+ xs: "2em",
230
+ md: "2em",
231
+ lg: "3.75em"
232
+ },
233
+ fontWeight: "bold"
201
234
  }
202
- }, (_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(Box, null, /*#__PURE__*/React.createElement(Button, {
235
+ }), /*#__PURE__*/React.createElement(Typography, {
236
+ dangerouslySetInnerHTML: {
237
+ __html: (_content$component$su10 = content.component.subcomponent[0]) !== null && _content$component$su10 !== void 0 && _content$component$su10.description ? (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.description : 'Agregue descripción'
238
+ },
239
+ sx: {
240
+ marginBottom: '16px',
241
+ whiteSpace: 'pre-wrap',
242
+ fontSize: {
243
+ xs: "1.125em",
244
+ md: "1.125em",
245
+ lg: "1.125em"
246
+ }
247
+ }
248
+ }), ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.button_active) && /*#__PURE__*/React.createElement(Box, {
249
+ sx: {}
250
+ }, /*#__PURE__*/React.createElement(Button, {
203
251
  variant: "contained",
204
- href: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.button_action,
205
- target: ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.link) == 4 ? '_blank' : '_self',
252
+ size: "medium",
253
+ href: (_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_action,
254
+ target: ((_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.link) == 4 ? '_blank' : '_self',
206
255
  sx: {
207
256
  width: 'auto',
208
- marginBottom: '16px'
257
+ padding: '14px 40px',
258
+ borderRadius: '50px'
209
259
  }
210
- }, (_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'))));
260
+ }, (_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'))))));
211
261
  }
212
262
 
213
263
  var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -219,10 +269,15 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
219
269
  _this.layoutFootprint = ['banner_layout_1.jpg'];
220
270
  _this.layoutFootprintReq = [{
221
271
  'type': 0,
272
+ 'label': 'Label',
273
+ 'label_color': 'Label color',
274
+ 'label_active': 'Label active',
222
275
  'title': 'Tittle',
276
+ 'image': 'Image',
223
277
  'description': 'Description',
224
278
  'button_title': 'Button Title',
225
279
  'button_action': 'Button action',
280
+ 'button_active': 'Button active',
226
281
  'text_color': 'Text color',
227
282
  'link': 'Link'
228
283
  }];
@@ -231,70 +286,147 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
231
286
  return Banner;
232
287
  }(AtomicElements);
233
288
 
289
+ var Item$1 = styled(Paper)(function (_ref) {
290
+ var theme = _ref.theme;
291
+ return _extends({
292
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
293
+ }, theme.typography.body2, {
294
+ textAlign: 'left',
295
+ color: theme.palette.text.secondary
296
+ });
297
+ });
234
298
  function Layout1$2(content) {
235
- 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;
299
+ 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;
236
300
  var visible = true;
237
- return /*#__PURE__*/React.createElement(Box, {
301
+ return /*#__PURE__*/React.createElement(Container, {
302
+ maxWidth: false,
303
+ disableGutters: true,
238
304
  sx: {
239
- display: 'flex',
240
- flexDirection: {
241
- xs: 'column',
242
- md: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
243
- },
244
- gap: '16px',
245
- alignItems: 'center'
246
- },
247
- color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
248
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Slide, {
305
+ maxWidth: "1232px"
306
+ }
307
+ }, /*#__PURE__*/React.createElement(Grid, {
308
+ container: true,
309
+ justifyContent: "space-evenly",
310
+ alignItems: "center",
311
+ direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
312
+ }, /*#__PURE__*/React.createElement(Grid, {
313
+ item: true,
314
+ xs: 12,
315
+ sm: 12,
316
+ md: 6,
317
+ lg: 6,
318
+ xl: 6,
319
+ sx: {
320
+ paddingLeft: "16px",
321
+ paddingRight: "16px",
322
+ paddingTop: "10px"
323
+ }
324
+ }, /*#__PURE__*/React.createElement(Slide, {
249
325
  direction: "right",
250
326
  "in": visible
251
- }, /*#__PURE__*/React.createElement(Box, {
327
+ }, /*#__PURE__*/React.createElement(Item$1, {
328
+ elevation: 0,
252
329
  sx: {
253
- width: {
254
- xs: '100%',
255
- md: '550px',
256
- lg: '640px'
257
- },
258
- maxWidth: '100vw'
330
+ height: "90%",
331
+ width: "100%",
332
+ background: "none"
333
+ }
334
+ }, /*#__PURE__*/React.createElement(Card, {
335
+ elevation: 0,
336
+ sx: {
337
+ borderRadius: "24px",
338
+ background: "none",
339
+ backgroundSize: 'center',
340
+ backgroundPosition: 'center'
341
+ }
342
+ }, /*#__PURE__*/React.createElement(CardMedia, {
343
+ sx: {
344
+ width: "100%",
345
+ paddingTop: '56.25%',
346
+ backgroundSize: 'center',
347
+ backgroundPosition: 'center',
348
+ 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'
349
+ },
350
+ 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'
351
+ }))))), /*#__PURE__*/React.createElement(Grid, {
352
+ item: true,
353
+ xs: 12,
354
+ sm: 12,
355
+ md: 6,
356
+ lg: 6,
357
+ xl: 6,
358
+ sx: {
359
+ paddingLeft: "16px",
360
+ paddingRight: "16px",
361
+ paddingTop: "10px"
259
362
  }
260
- }, /*#__PURE__*/React.createElement("img", {
261
- width: "100%",
262
- height: "100%",
263
- 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'
264
- })))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Grow, _extends({
363
+ }, /*#__PURE__*/React.createElement(Grow, _extends({
265
364
  "in": visible,
266
365
  style: {
267
366
  transformOrigin: '0 0 0'
268
367
  }
269
368
  }, {
270
369
  timeout: 1000
271
- } ), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
370
+ } ), /*#__PURE__*/React.createElement(Item$1, {
371
+ elevation: 0,
372
+ sx: {
373
+ height: "90%",
374
+ width: "100%",
375
+ background: "none"
376
+ }
377
+ }, /*#__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, {
378
+ disabled: true,
379
+ color: "info",
380
+ 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',
381
+ sx: {
382
+ marginBottom: '16px',
383
+ fontSize: '1em',
384
+ borderRadius: '6px',
385
+ backgroundColor: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.label_color
386
+ }
387
+ })), /*#__PURE__*/React.createElement(Box, {
272
388
  sx: {
273
389
  marginBottom: '16px'
274
390
  }
275
391
  }, /*#__PURE__*/React.createElement(Typography, {
276
- className: "title-xlarge",
392
+ dangerouslySetInnerHTML: {
393
+ __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'
394
+ },
277
395
  sx: {
278
- whiteSpace: 'pre-wrap'
396
+ whiteSpace: 'pre-wrap',
397
+ fontSize: {
398
+ xs: "2em",
399
+ md: "2em",
400
+ lg: "2em",
401
+ xl: "3em"
402
+ }
279
403
  }
280
- }, (_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(Box, {
404
+ })), /*#__PURE__*/React.createElement(Box, {
281
405
  sx: {
282
- marginBottom: '16px',
283
- color: '#767676'
406
+ marginBottom: '16px'
284
407
  }
285
408
  }, /*#__PURE__*/React.createElement(Typography, {
286
- className: "middle",
409
+ dangerouslySetInnerHTML: {
410
+ __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'
411
+ },
287
412
  sx: {
288
- whiteSpace: 'pre-wrap'
413
+ whiteSpace: 'pre-wrap',
414
+ fontSize: {
415
+ xs: "1.125em",
416
+ md: "1.125em",
417
+ lg: "1em"
418
+ }
289
419
  }
290
- }, (_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(Box, null, /*#__PURE__*/React.createElement(Button, {
420
+ })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
291
421
  variant: "contained",
292
- href: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_action,
293
- target: ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.link) == 4 ? '_blank' : '_self',
422
+ href: (_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_action,
423
+ target: ((_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.link) == 4 ? '_blank' : '_self',
294
424
  sx: {
295
- width: 'auto'
425
+ width: 'auto',
426
+ padding: '14px 40px',
427
+ borderRadius: '40px'
296
428
  }
297
- }, (_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'))))));
429
+ }, (_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'))))))));
298
430
  }
299
431
 
300
432
  var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -306,11 +438,15 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
306
438
  _this.layoutFootprint = ['text_image_layout_1.png', 'text_image_layout_1.png'];
307
439
  _this.layoutFootprintReq = [{
308
440
  'type': 0,
441
+ 'label': 'Label',
442
+ 'label_color': 'Label color',
443
+ 'label_active': 'Label active',
309
444
  'title': 'Title',
310
445
  'description': 'Text',
311
446
  'button_title': 'Button Title',
312
447
  'button_action': 'Button Action',
313
- 'image': 'req_hor',
448
+ 'image': 'image',
449
+ 'image_scale': 'image scale',
314
450
  'link': 'Link'
315
451
  }, {
316
452
  'type': 0,
@@ -341,10 +477,10 @@ function Layout1$3(content) {
341
477
  margin: '16px auto',
342
478
  whiteSpace: 'pre-wrap'
343
479
  }
344
- }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React.createElement(Grid, {
480
+ }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React.createElement(Grid$1, {
345
481
  container: true
346
482
  }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
347
- return /*#__PURE__*/React.createElement(Grid, {
483
+ return /*#__PURE__*/React.createElement(Grid$1, {
348
484
  key: index,
349
485
  item: true,
350
486
  xs: 12,
@@ -429,7 +565,7 @@ var Text = /*#__PURE__*/function (_AtomicElements) {
429
565
  }(AtomicElements);
430
566
 
431
567
  function Layout1$5(content) {
432
- return /*#__PURE__*/React.createElement(Grid, {
568
+ return /*#__PURE__*/React.createElement(Grid$1, {
433
569
  container: true,
434
570
  sx: {
435
571
  minHeight: '550px',
@@ -437,13 +573,13 @@ function Layout1$5(content) {
437
573
  margin: 'auto',
438
574
  padding: '8px'
439
575
  }
440
- }, /*#__PURE__*/React.createElement(Item$1, {
576
+ }, /*#__PURE__*/React.createElement(Item$2, {
441
577
  title: content.component.title,
442
578
  content: content.component.subcomponent,
443
579
  side: content.component.justify_content
444
580
  }));
445
581
  }
446
- function Item$1(props) {
582
+ function Item$2(props) {
447
583
  var content = props.content,
448
584
  side = props.side,
449
585
  title = props.title;
@@ -516,7 +652,7 @@ function Item$1(props) {
516
652
  }
517
653
  }
518
654
  }, arrayFourElements.map(function (items, i) {
519
- return /*#__PURE__*/React.createElement(Grid, {
655
+ return /*#__PURE__*/React.createElement(Grid$1, {
520
656
  container: true,
521
657
  key: i,
522
658
  spacing: 3,
@@ -536,7 +672,7 @@ function Item$1(props) {
536
672
  }
537
673
  }, title ? title : 'Agregue un título')), items.map(function (item, j) {
538
674
  var _ref;
539
- return /*#__PURE__*/React.createElement(Grid, {
675
+ return /*#__PURE__*/React.createElement(Grid$1, {
540
676
  item: true,
541
677
  className: "containerdegrid",
542
678
  key: j,
@@ -614,7 +750,7 @@ function Item$1(props) {
614
750
  }
615
751
  }, item.button_title ? item.button_title : 'Nombre botón')))));
616
752
  }));
617
- })) : /*#__PURE__*/React.createElement(Grid, {
753
+ })) : /*#__PURE__*/React.createElement(Grid$1, {
618
754
  container: true,
619
755
  sx: {
620
756
  width: '100%',
@@ -629,7 +765,7 @@ function Item$1(props) {
629
765
  className: "title-xlarge"
630
766
  }, title ? title : 'Agregue un título')), content.map(function (item, i) {
631
767
  var _ref2;
632
- return /*#__PURE__*/React.createElement(Grid, {
768
+ return /*#__PURE__*/React.createElement(Grid$1, {
633
769
  item: true,
634
770
  key: i,
635
771
  xs: 12,
@@ -723,79 +859,131 @@ var List = /*#__PURE__*/function (_AtomicElements) {
723
859
  return List;
724
860
  }(AtomicElements);
725
861
 
726
- var theme = createTheme({
727
- breakpoints: {
728
- values: {
729
- xs: 0,
730
- sm: 600,
731
- md: 840,
732
- lg: 1200,
733
- xl: 1536
734
- }
735
- }
736
- });
737
-
738
- var Item$2 = styled(Paper)(function (_ref) {
862
+ var Item$3 = styled(Paper)(function (_ref) {
739
863
  var theme = _ref.theme;
740
864
  return _extends({
741
865
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
742
866
  }, theme.typography.body2, {
743
- padding: theme.spacing(1),
744
- textAlign: 'center',
867
+ padding: theme.spacing(2),
868
+ textAlign: 'left',
745
869
  color: theme.palette.text.secondary
746
870
  });
747
871
  });
748
872
  function Layout1$6(content) {
749
- var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6;
750
- return /*#__PURE__*/React.createElement(ThemeProvider, {
751
- theme: theme
752
- }, /*#__PURE__*/React.createElement(Container, {
753
- maxWidth: "lg",
754
- sx: {
755
- marginLeft: "36px",
756
- marginRight: "36px"
757
- }
758
- }, /*#__PURE__*/React.createElement(Grid$1, {
873
+ 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;
874
+ var visible = true;
875
+ return /*#__PURE__*/React.createElement(Container, {
876
+ maxWidth: "lg"
877
+ }, /*#__PURE__*/React.createElement(Grid, {
759
878
  container: true,
760
- spacing: 2
761
- }, /*#__PURE__*/React.createElement(Grid$1, {
879
+ spacing: 4,
880
+ direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
881
+ }, /*#__PURE__*/React.createElement(Grid, {
762
882
  item: true,
763
883
  xs: 12,
764
884
  sm: 12,
765
885
  md: 6,
766
- lg: 5
767
- }, /*#__PURE__*/React.createElement(Item$2, {
768
- elevation: 0
886
+ lg: 6,
887
+ xl: 6
888
+ }, /*#__PURE__*/React.createElement(Slide, {
889
+ direction: "right",
890
+ "in": visible
891
+ }, /*#__PURE__*/React.createElement(Item$3, {
892
+ elevation: 0,
893
+ sx: {
894
+ height: "90%",
895
+ width: "100%",
896
+ background: "none"
897
+ }
769
898
  }, /*#__PURE__*/React.createElement(Card, {
770
- elevation: 0
899
+ sx: {
900
+ borderRadius: "24px",
901
+ background: "none",
902
+ backgroundSize: 'center',
903
+ backgroundPosition: 'center'
904
+ }
771
905
  }, /*#__PURE__*/React.createElement(CardMedia, {
772
906
  sx: {
773
- height: "50%",
774
907
  width: "100%",
775
908
  paddingTop: '56.25%',
776
- 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 : 'agregue imagen') + ")"
777
- }
778
- })))), /*#__PURE__*/React.createElement(Grid$1, {
909
+ backgroundSize: 'center',
910
+ backgroundPosition: 'center'
911
+ },
912
+ image: (_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.url : 'none'
913
+ }))))), /*#__PURE__*/React.createElement(Grid, {
779
914
  item: true,
780
915
  xs: 12,
781
916
  sm: 12,
782
917
  md: 6,
783
- lg: 7
784
- }, /*#__PURE__*/React.createElement(Item$2, {
785
- elevation: 0
918
+ lg: 6,
919
+ xl: 6
920
+ }, /*#__PURE__*/React.createElement(Grow, _extends({
921
+ "in": visible,
922
+ style: {
923
+ transformOrigin: '0 0 0'
924
+ }
925
+ }, {
926
+ timeout: 1000
927
+ } ), /*#__PURE__*/React.createElement(Item$3, {
928
+ elevation: 0,
929
+ sx: {
930
+ height: "90%",
931
+ width: "100%",
932
+ background: "none"
933
+ }
934
+ }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
935
+ disabled: true,
936
+ color: "info",
937
+ label: (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.label ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label : 'Agregue etiqueta',
938
+ sx: {
939
+ marginBottom: '16px',
940
+ fontSize: '1em',
941
+ borderRadius: '6px',
942
+ backgroundColor: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.label_color
943
+ }
944
+ })), /*#__PURE__*/React.createElement(Box, {
945
+ sx: {
946
+ marginBottom: '16px'
947
+ }
786
948
  }, /*#__PURE__*/React.createElement(Typography, {
787
- variant: "h2",
788
- component: "h1",
949
+ dangerouslySetInnerHTML: {
950
+ __html: (_content$component$su7 = content.component.subcomponent[0]) !== null && _content$component$su7 !== void 0 && _content$component$su7.title ? (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.title : 'Agregue titulo'
951
+ },
789
952
  sx: {
790
- fontSize: "40px"
953
+ whiteSpace: 'pre-wrap',
954
+ fontSize: {
955
+ xs: "2em",
956
+ md: "2em",
957
+ lg: "2em",
958
+ xl: "3em"
959
+ }
791
960
  }
792
- }, (_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.title ? (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.title : 'Agregue título'), /*#__PURE__*/React.createElement(Typography, {
793
- variant: "h5",
794
- component: "p",
961
+ })), /*#__PURE__*/React.createElement(Box, {
795
962
  sx: {
796
- fontSize: "20px"
963
+ marginBottom: '16px'
797
964
  }
798
- }, (_content$component$su5 = content.component.subcomponent[0]) !== null && _content$component$su5 !== void 0 && _content$component$su5.description ? (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.description : 'Agregue descripción'))))));
965
+ }, /*#__PURE__*/React.createElement(Typography, {
966
+ dangerouslySetInnerHTML: {
967
+ __html: (_content$component$su9 = content.component.subcomponent[0]) !== null && _content$component$su9 !== void 0 && _content$component$su9.description ? (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.description : 'Agregue descripción'
968
+ },
969
+ sx: {
970
+ whiteSpace: 'pre-wrap',
971
+ fontSize: {
972
+ xs: "1.125em",
973
+ md: "1.125em",
974
+ lg: "1em"
975
+ }
976
+ }
977
+ })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
978
+ variant: "contained",
979
+ href: (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_action,
980
+ target: ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.link) == 4 ? '_blank' : '_self',
981
+ sx: {
982
+ width: 'auto',
983
+ padding: '14px 40px',
984
+ borderRadius: '40px'
985
+ }
986
+ }, (_content$component$su13 = content.component.subcomponent[0]) !== null && _content$component$su13 !== void 0 && _content$component$su13.button_title ? (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.button_title : 'Nombre botón'))))))));
799
987
  }
800
988
 
801
989
  var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
@@ -807,9 +995,23 @@ var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
807
995
  _this.layoutFootprint = ['imgPlusText_layout_1.png'];
808
996
  _this.layoutFootprintReq = [{
809
997
  'type': 0,
810
- 'image': 'Imagen',
998
+ 'label': 'Label',
999
+ 'label_color': 'Label color',
1000
+ 'label_active': 'Label active',
1001
+ 'title': 'Title',
1002
+ 'description': 'Text',
1003
+ 'button_title': 'Button Title',
1004
+ 'button_action': 'Button Action',
1005
+ 'image': 'image',
1006
+ 'image_scale': 'image scale',
1007
+ 'link': 'Link'
1008
+ }, {
1009
+ 'type': 0,
811
1010
  'title': 'Title',
812
- 'description': 'Text'
1011
+ 'description': 'Text',
1012
+ 'button_title': 'Button Title',
1013
+ 'button_action': 'Button Action',
1014
+ 'image': 'req_hor'
813
1015
  }];
814
1016
  return _this;
815
1017
  }
@@ -838,17 +1040,21 @@ function CanvasContainer(props) {
838
1040
  width: '100%'
839
1041
  }
840
1042
  }, /*#__PURE__*/React.createElement(Container, {
841
- maxWidth: "xl",
1043
+ maxWidth: "lg",
842
1044
  sx: {
843
1045
  padding: '0px',
844
1046
  '&.MuiContainer-root': {
845
1047
  paddingLeft: {
846
1048
  xs: '0px',
847
- xl: '24px'
1049
+ sm: '20px',
1050
+ lg: '32px',
1051
+ xl: '32px'
848
1052
  },
849
1053
  paddingRight: {
850
1054
  xs: '0px',
851
- xl: '24px'
1055
+ sm: '20px',
1056
+ lg: '32px',
1057
+ xl: '32px'
852
1058
  }
853
1059
  }
854
1060
  }
@@ -888,6 +1094,18 @@ function hexToRgb(hex) {
888
1094
 
889
1095
  var JK_RESOURCES = 'https://jk-clients.s3.us-east-2.amazonaws.com/jk-resources/';
890
1096
 
1097
+ var theme = createTheme({
1098
+ breakpoints: {
1099
+ values: {
1100
+ xs: 0,
1101
+ sm: 600,
1102
+ md: 840,
1103
+ lg: 1200,
1104
+ xl: 1536
1105
+ }
1106
+ }
1107
+ });
1108
+
891
1109
  var Section = /*#__PURE__*/function () {
892
1110
  function Section(AtomicElement, theme) {
893
1111
  this.child = AtomicElement;