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