keski_lib_catalog 1.0.40 → 1.2.0

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 (6) hide show
  1. package/dist/index.js +357 -60
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +365 -68
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
  6. package/dist/index.css +0 -9
package/dist/index.modern.js CHANGED
@@ -1,7 +1,11 @@
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';
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';
5
+ import Paper from '@mui/material/Paper';
6
+ import Grid from '@mui/material/Grid';
4
7
  import Grow from '@mui/material/Grow';
8
+ import { ThemeProvider } from '@emotion/react';
5
9
 
6
10
  function _extends() {
7
11
  _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -163,47 +167,93 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
163
167
  }(AtomicElements);
164
168
 
165
169
  function Layout1$1(content) {
166
- 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;
167
171
  var visible = true;
168
- return /*#__PURE__*/React.createElement(Slide, {
172
+ return /*#__PURE__*/React.createElement(Container, {
173
+ maxWidth: "lg"
174
+ }, /*#__PURE__*/React.createElement(Slide, {
169
175
  direction: "left",
170
176
  "in": visible
177
+ }, /*#__PURE__*/React.createElement(Box, {
178
+ sx: {
179
+ width: {
180
+ xs: '100%'
181
+ },
182
+ height: {
183
+ xs: '100%'
184
+ },
185
+ 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') + ")",
186
+ backgroundSize: 'cover',
187
+ backgroundPosition: 'center',
188
+ display: 'flex'
189
+ }
171
190
  }, /*#__PURE__*/React.createElement(Box, {
172
191
  sx: {
173
192
  display: 'flex',
174
193
  flexDirection: 'column',
175
194
  width: {
176
195
  xs: '100%',
177
- md: '50%'
196
+ md: '50%',
197
+ lg: '80%'
178
198
  },
179
199
  height: {
180
200
  xs: '100%',
181
201
  lg: '60vh'
182
202
  },
183
203
  justifyContent: 'center',
184
- color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
204
+ margin: '1em',
205
+ color: (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.text_color
185
206
  }
186
- }, /*#__PURE__*/React.createElement(Typography, {
187
- className: "title-xxlarge",
207
+ }, ((_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, {
208
+ disabled: true,
209
+ color: "info",
210
+ 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',
188
211
  sx: {
189
212
  marginBottom: '16px',
190
- whiteSpace: 'pre-wrap'
213
+ fontSize: '1em',
214
+ borderRadius: '6px',
215
+ backgroundColor: (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label_color
191
216
  }
192
- }, (_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, {
193
- className: "xmiddle",
217
+ })), /*#__PURE__*/React.createElement(Typography, {
218
+ dangerouslySetInnerHTML: {
219
+ __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'
220
+ },
194
221
  sx: {
195
222
  marginBottom: '16px',
196
- whiteSpace: 'pre-wrap'
223
+ whiteSpace: 'pre-wrap',
224
+ fontSize: {
225
+ xs: "2em",
226
+ md: "2em",
227
+ lg: "3.75em"
228
+ },
229
+ fontWeight: "bold"
230
+ }
231
+ }), /*#__PURE__*/React.createElement(Typography, {
232
+ dangerouslySetInnerHTML: {
233
+ __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'
234
+ },
235
+ sx: {
236
+ marginBottom: '16px',
237
+ whiteSpace: 'pre-wrap',
238
+ fontSize: {
239
+ xs: "1.125em",
240
+ md: "1.125em",
241
+ lg: "1.125em"
242
+ }
197
243
  }
198
- }, (_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, {
244
+ }), ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.button_active) && /*#__PURE__*/React.createElement(Box, {
245
+ sx: {}
246
+ }, /*#__PURE__*/React.createElement(Button, {
199
247
  variant: "contained",
200
- href: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.button_action,
201
- target: ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.link) == 4 ? '_blank' : '_self',
248
+ size: "medium",
249
+ href: (_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_action,
250
+ target: ((_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.link) == 4 ? '_blank' : '_self',
202
251
  sx: {
203
252
  width: 'auto',
204
- marginBottom: '16px'
253
+ padding: '14px 40px',
254
+ borderRadius: '50px'
205
255
  }
206
- }, (_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'))));
256
+ }, (_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'))))));
207
257
  }
208
258
 
209
259
  var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -215,10 +265,15 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
215
265
  _this.layoutFootprint = ['banner_layout_1.jpg'];
216
266
  _this.layoutFootprintReq = [{
217
267
  'type': 0,
268
+ 'label': 'Label',
269
+ 'label_color': 'Label color',
270
+ 'label_active': 'Label active',
218
271
  'title': 'Tittle',
272
+ 'image': 'Image',
219
273
  'description': 'Description',
220
274
  'button_title': 'Button Title',
221
275
  'button_action': 'Button action',
276
+ 'button_active': 'Button active',
222
277
  'text_color': 'Text color',
223
278
  'link': 'Link'
224
279
  }];
@@ -227,70 +282,133 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
227
282
  return Banner;
228
283
  }(AtomicElements);
229
284
 
285
+ var Item$1 = styled(Paper)(function (_ref) {
286
+ var theme = _ref.theme;
287
+ return _extends({
288
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
289
+ }, theme.typography.body2, {
290
+ padding: theme.spacing(2),
291
+ textAlign: 'left',
292
+ color: theme.palette.text.secondary
293
+ });
294
+ });
230
295
  function Layout1$2(content) {
231
- 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;
296
+ 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;
232
297
  var visible = true;
233
- return /*#__PURE__*/React.createElement(Box, {
234
- sx: {
235
- display: 'flex',
236
- flexDirection: {
237
- xs: 'column',
238
- md: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
239
- },
240
- gap: '16px',
241
- alignItems: 'center'
242
- },
243
- color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color
244
- }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Slide, {
298
+ return /*#__PURE__*/React.createElement(Container, {
299
+ maxWidth: "lg"
300
+ }, /*#__PURE__*/React.createElement(Grid, {
301
+ container: true,
302
+ spacing: 4,
303
+ direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
304
+ }, /*#__PURE__*/React.createElement(Grid, {
305
+ item: true,
306
+ xs: 12,
307
+ sm: 12,
308
+ md: 6,
309
+ lg: 6,
310
+ xl: 6
311
+ }, /*#__PURE__*/React.createElement(Slide, {
245
312
  direction: "right",
246
313
  "in": visible
247
- }, /*#__PURE__*/React.createElement(Box, {
314
+ }, /*#__PURE__*/React.createElement(Item$1, {
315
+ elevation: 0,
248
316
  sx: {
249
- width: {
250
- xs: '100%',
251
- md: '550px',
252
- lg: '640px'
253
- },
254
- maxWidth: '100vw'
317
+ height: "90%",
318
+ width: "100%",
319
+ background: "none"
320
+ }
321
+ }, /*#__PURE__*/React.createElement(Card, {
322
+ elevation: 0,
323
+ sx: {
324
+ borderRadius: "24px",
325
+ background: "none",
326
+ backgroundSize: 'center',
327
+ backgroundPosition: 'center'
255
328
  }
256
- }, /*#__PURE__*/React.createElement("img", {
257
- width: "100%",
258
- height: "100%",
259
- 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'
260
- })))), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Grow, _extends({
329
+ }, /*#__PURE__*/React.createElement(CardMedia, {
330
+ sx: {
331
+ width: "100%",
332
+ paddingTop: '56.25%',
333
+ backgroundSize: 'center',
334
+ backgroundPosition: 'center',
335
+ 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'
336
+ },
337
+ 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'
338
+ }))))), /*#__PURE__*/React.createElement(Grid, {
339
+ item: true,
340
+ xs: 12,
341
+ sm: 12,
342
+ md: 6,
343
+ lg: 6,
344
+ xl: 6
345
+ }, /*#__PURE__*/React.createElement(Grow, _extends({
261
346
  "in": visible,
262
347
  style: {
263
348
  transformOrigin: '0 0 0'
264
349
  }
265
350
  }, {
266
351
  timeout: 1000
267
- } ), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
352
+ } ), /*#__PURE__*/React.createElement(Item$1, {
353
+ elevation: 0,
354
+ sx: {
355
+ height: "90%",
356
+ width: "100%",
357
+ background: "none"
358
+ }
359
+ }, /*#__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, {
360
+ disabled: true,
361
+ color: "info",
362
+ 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',
363
+ sx: {
364
+ marginBottom: '16px',
365
+ fontSize: '1em',
366
+ borderRadius: '6px',
367
+ backgroundColor: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.label_color
368
+ }
369
+ })), /*#__PURE__*/React.createElement(Box, {
268
370
  sx: {
269
371
  marginBottom: '16px'
270
372
  }
271
373
  }, /*#__PURE__*/React.createElement(Typography, {
272
- className: "title-xlarge",
374
+ dangerouslySetInnerHTML: {
375
+ __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'
376
+ },
273
377
  sx: {
274
- whiteSpace: 'pre-wrap'
378
+ whiteSpace: 'pre-wrap',
379
+ fontSize: {
380
+ xs: "2em",
381
+ md: "2em",
382
+ lg: "2em",
383
+ xl: "3em"
384
+ }
275
385
  }
276
- }, (_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, {
386
+ })), /*#__PURE__*/React.createElement(Box, {
277
387
  sx: {
278
- marginBottom: '16px',
279
- color: '#767676'
388
+ marginBottom: '16px'
280
389
  }
281
390
  }, /*#__PURE__*/React.createElement(Typography, {
282
- className: "middle",
391
+ dangerouslySetInnerHTML: {
392
+ __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'
393
+ },
283
394
  sx: {
284
- whiteSpace: 'pre-wrap'
395
+ whiteSpace: 'pre-wrap',
396
+ fontSize: {
397
+ xs: "1.125em",
398
+ md: "1.125em",
399
+ lg: "1em"
400
+ }
285
401
  }
286
- }, (_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, {
402
+ })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
287
403
  variant: "contained",
288
- href: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_action,
289
- target: ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.link) == 4 ? '_blank' : '_self',
404
+ href: (_content$component$su13 = content.component.subcomponent[0]) === null || _content$component$su13 === void 0 ? void 0 : _content$component$su13.button_action,
405
+ target: ((_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.link) == 4 ? '_blank' : '_self',
290
406
  sx: {
291
- width: 'auto'
407
+ width: 'auto',
408
+ padding: '14px 40px',
409
+ borderRadius: '40px'
292
410
  }
293
- }, (_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'))))));
411
+ }, (_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'))))))));
294
412
  }
295
413
 
296
414
  var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -302,11 +420,15 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
302
420
  _this.layoutFootprint = ['text_image_layout_1.png', 'text_image_layout_1.png'];
303
421
  _this.layoutFootprintReq = [{
304
422
  'type': 0,
423
+ 'label': 'Label',
424
+ 'label_color': 'Label color',
425
+ 'label_active': 'Label active',
305
426
  'title': 'Title',
306
427
  'description': 'Text',
307
428
  'button_title': 'Button Title',
308
429
  'button_action': 'Button Action',
309
- 'image': 'req_hor',
430
+ 'image': 'image',
431
+ 'image_scale': 'image scale',
310
432
  'link': 'Link'
311
433
  }, {
312
434
  'type': 0,
@@ -337,10 +459,10 @@ function Layout1$3(content) {
337
459
  margin: '16px auto',
338
460
  whiteSpace: 'pre-wrap'
339
461
  }
340
- }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React.createElement(Grid, {
462
+ }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React.createElement(Grid$1, {
341
463
  container: true
342
464
  }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
343
- return /*#__PURE__*/React.createElement(Grid, {
465
+ return /*#__PURE__*/React.createElement(Grid$1, {
344
466
  key: index,
345
467
  item: true,
346
468
  xs: 12,
@@ -425,7 +547,7 @@ var Text = /*#__PURE__*/function (_AtomicElements) {
425
547
  }(AtomicElements);
426
548
 
427
549
  function Layout1$5(content) {
428
- return /*#__PURE__*/React.createElement(Grid, {
550
+ return /*#__PURE__*/React.createElement(Grid$1, {
429
551
  container: true,
430
552
  sx: {
431
553
  minHeight: '550px',
@@ -433,13 +555,13 @@ function Layout1$5(content) {
433
555
  margin: 'auto',
434
556
  padding: '8px'
435
557
  }
436
- }, /*#__PURE__*/React.createElement(Item$1, {
558
+ }, /*#__PURE__*/React.createElement(Item$2, {
437
559
  title: content.component.title,
438
560
  content: content.component.subcomponent,
439
561
  side: content.component.justify_content
440
562
  }));
441
563
  }
442
- function Item$1(props) {
564
+ function Item$2(props) {
443
565
  var content = props.content,
444
566
  side = props.side,
445
567
  title = props.title;
@@ -512,7 +634,7 @@ function Item$1(props) {
512
634
  }
513
635
  }
514
636
  }, arrayFourElements.map(function (items, i) {
515
- return /*#__PURE__*/React.createElement(Grid, {
637
+ return /*#__PURE__*/React.createElement(Grid$1, {
516
638
  container: true,
517
639
  key: i,
518
640
  spacing: 3,
@@ -532,7 +654,7 @@ function Item$1(props) {
532
654
  }
533
655
  }, title ? title : 'Agregue un título')), items.map(function (item, j) {
534
656
  var _ref;
535
- return /*#__PURE__*/React.createElement(Grid, {
657
+ return /*#__PURE__*/React.createElement(Grid$1, {
536
658
  item: true,
537
659
  className: "containerdegrid",
538
660
  key: j,
@@ -610,7 +732,7 @@ function Item$1(props) {
610
732
  }
611
733
  }, item.button_title ? item.button_title : 'Nombre botón')))));
612
734
  }));
613
- })) : /*#__PURE__*/React.createElement(Grid, {
735
+ })) : /*#__PURE__*/React.createElement(Grid$1, {
614
736
  container: true,
615
737
  sx: {
616
738
  width: '100%',
@@ -625,7 +747,7 @@ function Item$1(props) {
625
747
  className: "title-xlarge"
626
748
  }, title ? title : 'Agregue un título')), content.map(function (item, i) {
627
749
  var _ref2;
628
- return /*#__PURE__*/React.createElement(Grid, {
750
+ return /*#__PURE__*/React.createElement(Grid$1, {
629
751
  item: true,
630
752
  key: i,
631
753
  xs: 12,
@@ -719,6 +841,165 @@ var List = /*#__PURE__*/function (_AtomicElements) {
719
841
  return List;
720
842
  }(AtomicElements);
721
843
 
844
+ var Item$3 = styled(Paper)(function (_ref) {
845
+ var theme = _ref.theme;
846
+ return _extends({
847
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
848
+ }, theme.typography.body2, {
849
+ padding: theme.spacing(2),
850
+ textAlign: 'left',
851
+ color: theme.palette.text.secondary
852
+ });
853
+ });
854
+ function Layout1$6(content) {
855
+ 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;
856
+ var visible = true;
857
+ return /*#__PURE__*/React.createElement(Container, {
858
+ maxWidth: "lg"
859
+ }, /*#__PURE__*/React.createElement(Grid, {
860
+ container: true,
861
+ spacing: 4,
862
+ direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
863
+ }, /*#__PURE__*/React.createElement(Grid, {
864
+ item: true,
865
+ xs: 12,
866
+ sm: 12,
867
+ md: 6,
868
+ lg: 6,
869
+ xl: 6
870
+ }, /*#__PURE__*/React.createElement(Slide, {
871
+ direction: "right",
872
+ "in": visible
873
+ }, /*#__PURE__*/React.createElement(Item$3, {
874
+ elevation: 0,
875
+ sx: {
876
+ height: "90%",
877
+ width: "100%",
878
+ background: "none"
879
+ }
880
+ }, /*#__PURE__*/React.createElement(Card, {
881
+ sx: {
882
+ borderRadius: "24px",
883
+ background: "none",
884
+ backgroundSize: 'center',
885
+ backgroundPosition: 'center'
886
+ }
887
+ }, /*#__PURE__*/React.createElement(CardMedia, {
888
+ sx: {
889
+ width: "100%",
890
+ paddingTop: '56.25%',
891
+ backgroundSize: 'center',
892
+ backgroundPosition: 'center'
893
+ },
894
+ 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'
895
+ }))))), /*#__PURE__*/React.createElement(Grid, {
896
+ item: true,
897
+ xs: 12,
898
+ sm: 12,
899
+ md: 6,
900
+ lg: 6,
901
+ xl: 6
902
+ }, /*#__PURE__*/React.createElement(Grow, _extends({
903
+ "in": visible,
904
+ style: {
905
+ transformOrigin: '0 0 0'
906
+ }
907
+ }, {
908
+ timeout: 1000
909
+ } ), /*#__PURE__*/React.createElement(Item$3, {
910
+ elevation: 0,
911
+ sx: {
912
+ height: "90%",
913
+ width: "100%",
914
+ background: "none"
915
+ }
916
+ }, /*#__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, {
917
+ disabled: true,
918
+ color: "info",
919
+ 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',
920
+ sx: {
921
+ marginBottom: '16px',
922
+ fontSize: '1em',
923
+ borderRadius: '6px',
924
+ backgroundColor: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.label_color
925
+ }
926
+ })), /*#__PURE__*/React.createElement(Box, {
927
+ sx: {
928
+ marginBottom: '16px'
929
+ }
930
+ }, /*#__PURE__*/React.createElement(Typography, {
931
+ dangerouslySetInnerHTML: {
932
+ __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'
933
+ },
934
+ sx: {
935
+ whiteSpace: 'pre-wrap',
936
+ fontSize: {
937
+ xs: "2em",
938
+ md: "2em",
939
+ lg: "2em",
940
+ xl: "3em"
941
+ }
942
+ }
943
+ })), /*#__PURE__*/React.createElement(Box, {
944
+ sx: {
945
+ marginBottom: '16px'
946
+ }
947
+ }, /*#__PURE__*/React.createElement(Typography, {
948
+ dangerouslySetInnerHTML: {
949
+ __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'
950
+ },
951
+ sx: {
952
+ whiteSpace: 'pre-wrap',
953
+ fontSize: {
954
+ xs: "1.125em",
955
+ md: "1.125em",
956
+ lg: "1em"
957
+ }
958
+ }
959
+ })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
960
+ variant: "contained",
961
+ href: (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_action,
962
+ target: ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.link) == 4 ? '_blank' : '_self',
963
+ sx: {
964
+ width: 'auto',
965
+ padding: '14px 40px',
966
+ borderRadius: '40px'
967
+ }
968
+ }, (_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'))))))));
969
+ }
970
+
971
+ var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
972
+ _inheritsLoose(ImagPlusText, _AtomicElements);
973
+ function ImagPlusText() {
974
+ var _this;
975
+ _this = _AtomicElements.call(this) || this;
976
+ _this.layout = [Layout1$6];
977
+ _this.layoutFootprint = ['imgPlusText_layout_1.png'];
978
+ _this.layoutFootprintReq = [{
979
+ 'type': 0,
980
+ 'label': 'Label',
981
+ 'label_color': 'Label color',
982
+ 'label_active': 'Label active',
983
+ 'title': 'Title',
984
+ 'description': 'Text',
985
+ 'button_title': 'Button Title',
986
+ 'button_action': 'Button Action',
987
+ 'image': 'image',
988
+ 'image_scale': 'image scale',
989
+ 'link': 'Link'
990
+ }, {
991
+ 'type': 0,
992
+ 'title': 'Title',
993
+ 'description': 'Text',
994
+ 'button_title': 'Button Title',
995
+ 'button_action': 'Button Action',
996
+ 'image': 'req_hor'
997
+ }];
998
+ return _this;
999
+ }
1000
+ return ImagPlusText;
1001
+ }(AtomicElements);
1002
+
722
1003
  function CanvasContainer(props) {
723
1004
  var _json$component$bg_im;
724
1005
  var json = props.json,
@@ -791,6 +1072,18 @@ function hexToRgb(hex) {
791
1072
 
792
1073
  var JK_RESOURCES = 'https://jk-clients.s3.us-east-2.amazonaws.com/jk-resources/';
793
1074
 
1075
+ var theme = createTheme({
1076
+ breakpoints: {
1077
+ values: {
1078
+ xs: 0,
1079
+ sm: 600,
1080
+ md: 840,
1081
+ lg: 1200,
1082
+ xl: 1536
1083
+ }
1084
+ }
1085
+ });
1086
+
794
1087
  var Section = /*#__PURE__*/function () {
795
1088
  function Section(AtomicElement, theme) {
796
1089
  this.child = AtomicElement;
@@ -798,9 +1091,11 @@ var Section = /*#__PURE__*/function () {
798
1091
  var _proto = Section.prototype;
799
1092
  _proto.component = function component(json) {
800
1093
  console.log('json', json);
801
- return /*#__PURE__*/React.createElement(CanvasContainer, {
1094
+ return /*#__PURE__*/React.createElement(ThemeProvider, {
1095
+ theme: theme
1096
+ }, /*#__PURE__*/React.createElement(CanvasContainer, {
802
1097
  json: json
803
- }, this.child.build(json, json.component.layout));
1098
+ }, this.child.build(json, json.component.layout)));
804
1099
  };
805
1100
  _proto.getFootPrint = function getFootPrint(layout) {
806
1101
  var footPrint = this.child.footprint(layout);
@@ -823,7 +1118,8 @@ var Sections = /*#__PURE__*/function () {
823
1118
  this.gallery = new Section(new Gallery());
824
1119
  this.text = new Section(new Text());
825
1120
  this.list = new Section(new List());
826
- this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list];
1121
+ this.imgPlusText = new Section(new ImagPlusText());
1122
+ this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list, this.imgPlusText];
827
1123
  }
828
1124
  var _proto2 = Sections.prototype;
829
1125
  _proto2.getSectionList = function getSectionList() {
@@ -833,7 +1129,8 @@ var Sections = /*#__PURE__*/function () {
833
1129
  '2': 'Citas/Testimonios',
834
1130
  '3': 'Galeria',
835
1131
  '4': 'Texto',
836
- '5': 'Lista'
1132
+ '5': 'Lista',
1133
+ '6': 'Imagen + Texto'
837
1134
  };
838
1135
  };
839
1136
  _proto2.getLayoutsFromSection = function getLayoutsFromSection(index) {