keski_lib_catalog 1.1.0 → 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 (5) hide show
  1. package/dist/index.js +299 -103
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +311 -115
  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,93 @@ 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: "lg"
177
+ }, /*#__PURE__*/React__default.createElement(material.Slide, {
176
178
  direction: "left",
177
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
+ }
178
193
  }, /*#__PURE__*/React__default.createElement(material.Box, {
179
194
  sx: {
180
195
  display: 'flex',
181
196
  flexDirection: 'column',
182
197
  width: {
183
198
  xs: '100%',
184
- md: '50%'
199
+ md: '50%',
200
+ lg: '80%'
185
201
  },
186
202
  height: {
187
203
  xs: '100%',
188
204
  lg: '60vh'
189
205
  },
190
206
  justifyContent: 'center',
191
- 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
192
209
  }
193
- }, /*#__PURE__*/React__default.createElement(material.Typography, {
194
- 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',
195
214
  sx: {
196
215
  marginBottom: '16px',
197
- 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
198
219
  }
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",
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
+ },
201
224
  sx: {
202
225
  marginBottom: '16px',
203
- whiteSpace: 'pre-wrap'
226
+ whiteSpace: 'pre-wrap',
227
+ fontSize: {
228
+ xs: "2em",
229
+ md: "2em",
230
+ lg: "3.75em"
231
+ },
232
+ fontWeight: "bold"
204
233
  }
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, {
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
+ }
246
+ }
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, {
206
250
  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',
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',
209
254
  sx: {
210
255
  width: 'auto',
211
- marginBottom: '16px'
256
+ padding: '14px 40px',
257
+ borderRadius: '50px'
212
258
  }
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'))));
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'))))));
214
260
  }
215
261
 
216
262
  var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -222,10 +268,15 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
222
268
  _this.layoutFootprint = ['banner_layout_1.jpg'];
223
269
  _this.layoutFootprintReq = [{
224
270
  'type': 0,
271
+ 'label': 'Label',
272
+ 'label_color': 'Label color',
273
+ 'label_active': 'Label active',
225
274
  'title': 'Tittle',
275
+ 'image': 'Image',
226
276
  'description': 'Description',
227
277
  'button_title': 'Button Title',
228
278
  'button_action': 'Button action',
279
+ 'button_active': 'Button active',
229
280
  'text_color': 'Text color',
230
281
  'link': 'Link'
231
282
  }];
@@ -234,70 +285,133 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
234
285
  return Banner;
235
286
  }(AtomicElements);
236
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
+ });
237
298
  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;
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;
239
300
  var visible = true;
240
- return /*#__PURE__*/React__default.createElement(material.Box, {
241
- 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, {
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, {
252
315
  direction: "right",
253
316
  "in": visible
254
- }, /*#__PURE__*/React__default.createElement(material.Box, {
317
+ }, /*#__PURE__*/React__default.createElement(Item$1, {
318
+ elevation: 0,
255
319
  sx: {
256
- width: {
257
- xs: '100%',
258
- md: '550px',
259
- lg: '640px'
260
- },
261
- maxWidth: '100vw'
320
+ height: "90%",
321
+ width: "100%",
322
+ background: "none"
262
323
  }
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({
324
+ }, /*#__PURE__*/React__default.createElement(material.Card, {
325
+ elevation: 0,
326
+ sx: {
327
+ borderRadius: "24px",
328
+ background: "none",
329
+ backgroundSize: 'center',
330
+ backgroundPosition: 'center'
331
+ }
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({
268
349
  "in": visible,
269
350
  style: {
270
351
  transformOrigin: '0 0 0'
271
352
  }
272
353
  }, {
273
354
  timeout: 1000
274
- } ), /*#__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, {
275
373
  sx: {
276
374
  marginBottom: '16px'
277
375
  }
278
376
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
279
- 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
+ },
280
380
  sx: {
281
- whiteSpace: 'pre-wrap'
381
+ whiteSpace: 'pre-wrap',
382
+ fontSize: {
383
+ xs: "2em",
384
+ md: "2em",
385
+ lg: "2em",
386
+ xl: "3em"
387
+ }
282
388
  }
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, {
389
+ })), /*#__PURE__*/React__default.createElement(material.Box, {
284
390
  sx: {
285
- marginBottom: '16px',
286
- color: '#767676'
391
+ marginBottom: '16px'
287
392
  }
288
393
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
289
- 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
+ },
290
397
  sx: {
291
- whiteSpace: 'pre-wrap'
398
+ whiteSpace: 'pre-wrap',
399
+ fontSize: {
400
+ xs: "1.125em",
401
+ md: "1.125em",
402
+ lg: "1em"
403
+ }
292
404
  }
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, {
405
+ })), /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Button, {
294
406
  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',
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',
297
409
  sx: {
298
- width: 'auto'
410
+ width: 'auto',
411
+ padding: '14px 40px',
412
+ borderRadius: '40px'
299
413
  }
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'))))));
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'))))))));
301
415
  }
302
416
 
303
417
  var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -309,11 +423,15 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
309
423
  _this.layoutFootprint = ['text_image_layout_1.png', 'text_image_layout_1.png'];
310
424
  _this.layoutFootprintReq = [{
311
425
  'type': 0,
426
+ 'label': 'Label',
427
+ 'label_color': 'Label color',
428
+ 'label_active': 'Label active',
312
429
  'title': 'Title',
313
430
  'description': 'Text',
314
431
  'button_title': 'Button Title',
315
432
  'button_action': 'Button Action',
316
- 'image': 'req_hor',
433
+ 'image': 'image',
434
+ 'image_scale': 'image scale',
317
435
  'link': 'Link'
318
436
  }, {
319
437
  'type': 0,
@@ -440,13 +558,13 @@ function Layout1$5(content) {
440
558
  margin: 'auto',
441
559
  padding: '8px'
442
560
  }
443
- }, /*#__PURE__*/React__default.createElement(Item$1, {
561
+ }, /*#__PURE__*/React__default.createElement(Item$2, {
444
562
  title: content.component.title,
445
563
  content: content.component.subcomponent,
446
564
  side: content.component.justify_content
447
565
  }));
448
566
  }
449
- function Item$1(props) {
567
+ function Item$2(props) {
450
568
  var content = props.content,
451
569
  side = props.side,
452
570
  title = props.title;
@@ -726,79 +844,131 @@ var List = /*#__PURE__*/function (_AtomicElements) {
726
844
  return List;
727
845
  }(AtomicElements);
728
846
 
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) {
847
+ var Item$3 = styles.styled(Paper)(function (_ref) {
742
848
  var theme = _ref.theme;
743
849
  return _extends({
744
850
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
745
851
  }, theme.typography.body2, {
746
- padding: theme.spacing(1),
747
- textAlign: 'center',
852
+ padding: theme.spacing(2),
853
+ textAlign: 'left',
748
854
  color: theme.palette.text.secondary
749
855
  });
750
856
  });
751
857
  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
- }
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"
761
862
  }, /*#__PURE__*/React__default.createElement(Grid, {
762
863
  container: true,
763
- spacing: 2
864
+ spacing: 4,
865
+ direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
764
866
  }, /*#__PURE__*/React__default.createElement(Grid, {
765
867
  item: true,
766
868
  xs: 12,
767
869
  sm: 12,
768
870
  md: 6,
769
- lg: 5
770
- }, /*#__PURE__*/React__default.createElement(Item$2, {
771
- elevation: 0
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
+ }
772
883
  }, /*#__PURE__*/React__default.createElement(material.Card, {
773
- elevation: 0
884
+ sx: {
885
+ borderRadius: "24px",
886
+ background: "none",
887
+ backgroundSize: 'center',
888
+ backgroundPosition: 'center'
889
+ }
774
890
  }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
775
891
  sx: {
776
- height: "50%",
777
892
  width: "100%",
778
893
  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, {
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, {
782
899
  item: true,
783
900
  xs: 12,
784
901
  sm: 12,
785
902
  md: 6,
786
- lg: 7
787
- }, /*#__PURE__*/React__default.createElement(Item$2, {
788
- elevation: 0
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
+ }
789
950
  }, /*#__PURE__*/React__default.createElement(material.Typography, {
790
- variant: "h2",
791
- component: "h1",
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
+ },
792
954
  sx: {
793
- fontSize: "40px"
955
+ whiteSpace: 'pre-wrap',
956
+ fontSize: {
957
+ xs: "1.125em",
958
+ md: "1.125em",
959
+ lg: "1em"
960
+ }
794
961
  }
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",
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',
798
966
  sx: {
799
- fontSize: "20px"
967
+ width: 'auto',
968
+ padding: '14px 40px',
969
+ borderRadius: '40px'
800
970
  }
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'))))));
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'))))))));
802
972
  }
803
973
 
804
974
  var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
@@ -810,9 +980,23 @@ var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
810
980
  _this.layoutFootprint = ['imgPlusText_layout_1.png'];
811
981
  _this.layoutFootprintReq = [{
812
982
  'type': 0,
813
- 'image': 'Imagen',
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,
814
995
  'title': 'Title',
815
- 'description': 'Text'
996
+ 'description': 'Text',
997
+ 'button_title': 'Button Title',
998
+ 'button_action': 'Button Action',
999
+ 'image': 'req_hor'
816
1000
  }];
817
1001
  return _this;
818
1002
  }
@@ -891,6 +1075,18 @@ function hexToRgb(hex) {
891
1075
 
892
1076
  var JK_RESOURCES = 'https://jk-clients.s3.us-east-2.amazonaws.com/jk-resources/';
893
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
+
894
1090
  var Section = /*#__PURE__*/function () {
895
1091
  function Section(AtomicElement, theme) {
896
1092
  this.child = AtomicElement;