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