funuicss 3.8.14 → 3.8.15

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 (7) hide show
  1. package/css/fun.css +10 -3
  2. package/package.json +1 -1
  3. package/ui/accordion/Accordion.js +589 -18
  4. package/ui/form/Form.js +25 -7
  5. package/ui/sidebar/SideBar.js +354 -14
  6. package/ui/vista/Vista.d.ts +8 -10
  7. package/ui/vista/Vista.js +57 -120
package/ui/vista/Vista.js CHANGED
@@ -59,10 +59,7 @@ var Vista = function (localProps) {
59
59
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', localProps.variant).mergeWithLocal;
60
60
  var mergedProps = mergeWithLocal(localProps).props;
61
61
  var final = mergedProps;
62
- var _a = (0, react_1.useState)(0), scrollProgress = _a[0], setScrollProgress = _a[1];
63
62
  var sectionRef = (0, react_1.useRef)(null);
64
- var videoRef = (0, react_1.useRef)(null);
65
- var bgRef = (0, react_1.useRef)(null);
66
63
  var contentRef = (0, react_1.useRef)(null);
67
64
  // Helper function to get color from CSS variable name
68
65
  var getColorValue = function (colorName, fallback) {
@@ -80,30 +77,10 @@ var Vista = function (localProps) {
80
77
  // Get default text colors based on background
81
78
  var getDefaultTextColor = function () {
82
79
  if (hasBackgroundMedia() || final.bg) {
83
- return 'white';
80
+ return '';
84
81
  }
85
- return 'dark';
82
+ return '';
86
83
  };
87
- // Smooth parallax effect using Intersection Observer (CSS-like)
88
- (0, react_1.useEffect)(function () {
89
- if (!final.parallax && !final.backgroundParallax)
90
- return;
91
- var handleScroll = function () {
92
- if (!sectionRef.current)
93
- return;
94
- var rect = sectionRef.current.getBoundingClientRect();
95
- var windowHeight = window.innerHeight;
96
- var elementTop = rect.top;
97
- var elementHeight = rect.height;
98
- // Calculate scroll progress (0 when element is at bottom of viewport, 1 when at top)
99
- var progress = 1 - (elementTop + elementHeight) / (windowHeight + elementHeight);
100
- progress = Math.max(0, Math.min(1, progress));
101
- setScrollProgress(progress);
102
- };
103
- window.addEventListener('scroll', handleScroll);
104
- handleScroll(); // Initial call
105
- return function () { return window.removeEventListener('scroll', handleScroll); };
106
- }, [final.parallax, final.backgroundParallax]);
107
84
  // Get gradient color value
108
85
  var getGradientColorValue = function () {
109
86
  return getColorValue(final.gradientColor, 'primary');
@@ -125,12 +102,6 @@ var Vista = function (localProps) {
125
102
  ]
126
103
  .filter(Boolean)
127
104
  .join(' ');
128
- // Hover effect class
129
- var getHoverClass = function () {
130
- if (!final.hoverEffect || final.hoverEffect === 'none')
131
- return '';
132
- return "vista-hover-".concat(final.hoverEffect);
133
- };
134
105
  // Filter styles helper
135
106
  var getFilterStyle = function (filter, filterValue) {
136
107
  if (!filter || filter === 'none')
@@ -157,39 +128,21 @@ var Vista = function (localProps) {
157
128
  if (!hasCTAs)
158
129
  return null;
159
130
  return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass || ''), wrap: "wrap", width: '100%' },
160
- final.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: final.primaryButtonOutlined, onClick: function () { return final.ctaPrimaryUrl && (window.location.href = final.ctaPrimaryUrl); }, rounded: final.ctaPrimaryRounded, flat: final.ctaPrimaryFlat, stringPrefix: final.ctaPrimaryPrefix, stringSuffix: final.ctaPrimarySuffix, iconSize: final.primaryIconSize, funcss: final.primaryButtonFuncss, small: final.primaryButtonSmall }, final.ctaPrimaryText)),
161
- final.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: final.secondaryButtonOutlined, onClick: function () { return final.ctaSecondaryUrl && (window.location.href = final.ctaSecondaryUrl); }, rounded: final.ctaSecondaryRounded, flat: final.ctaSecondaryFlat, stringPrefix: final.ctaSecondaryPrefix, stringSuffix: final.ctaSecondarySuffix, iconSize: final.secondaryIconSize, funcss: final.secondaryButtonFuncss, small: final.secondaryButtonSmall }, final.ctaSecondaryText)),
162
- final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl); }, rounded: final.ctaAccentRounded, flat: final.ctaAccentFlat, stringPrefix: final.ctaAccentPrefix, stringSuffix: final.ctaAccentSuffix, iconSize: final.accentIconSize, funcss: final.accentButtonFuncss, small: final.accentButtonSmall }, final.ctaAccentText))));
131
+ final.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: final.primaryButtonOutlined, onClick: function () { return final.ctaPrimaryUrl && (window.location.href = final.ctaPrimaryUrl); }, rounded: final.ctaPrimaryRounded, flat: final.ctaPrimaryFlat, stringPrefix: final.ctaPrimaryPrefix, stringSuffix: final.ctaPrimarySuffix, iconSize: final.primaryIconSize, funcss: final.primaryButtonFuncss, small: final.primaryButtonSmall, big: final.primaryButtonBig }, final.ctaPrimaryText)),
132
+ final.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: final.secondaryButtonOutlined, onClick: function () { return final.ctaSecondaryUrl && (window.location.href = final.ctaSecondaryUrl); }, rounded: final.ctaSecondaryRounded, flat: final.ctaSecondaryFlat, stringPrefix: final.ctaSecondaryPrefix, stringSuffix: final.ctaSecondarySuffix, iconSize: final.secondaryIconSize, funcss: final.secondaryButtonFuncss, small: final.secondaryButtonSmall, big: final.secondaryButtonBig }, final.ctaSecondaryText)),
133
+ final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl); }, rounded: final.ctaAccentRounded, flat: final.ctaAccentFlat, stringPrefix: final.ctaAccentPrefix, stringSuffix: final.ctaAccentSuffix, iconSize: final.accentIconSize, funcss: final.accentButtonFuncss, small: final.accentButtonSmall, big: final.accentButtonBig }, final.ctaAccentText))));
163
134
  };
164
- // Calculate parallax translation
165
- var getParallaxTranslation = function (speed, isBackground) {
166
- if (speed === void 0) { speed = 0.5; }
167
- if (isBackground === void 0) { isBackground = false; }
168
- if (!scrollProgress)
169
- return 0;
170
- // For background: move slower than content
171
- if (isBackground) {
172
- var bgSpeed = final.backgroundParallaxSpeed || 0.3;
173
- return scrollProgress * bgSpeed * 50; // Move 50px max
174
- }
175
- // For content: subtle movement
176
- var contentSpeed = final.parallaxSpeed || 0.5;
177
- return scrollProgress * contentSpeed * 30; // Move 30px max
178
- };
179
- // Enhanced Text Content
180
- var TextContent = (react_1.default.createElement("div", { ref: contentRef, className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || ''), style: {
135
+ // Content Component
136
+ var ContentComponent = (react_1.default.createElement("div", { ref: contentRef, className: "vista-content ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.contentWrapperClass || ''), style: {
181
137
  position: 'relative',
182
138
  zIndex: 2,
183
- transform: final.parallax ? "translateY(".concat(getParallaxTranslation(final.parallaxSpeed, false), "px)") : undefined,
184
- transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
185
139
  } },
186
140
  final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize || "6xl", weight: final.headingWeight, color: final.headingColor || getDefaultTextColor(), funcss: final.headingClass }, final.heading)),
187
141
  final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize || "lg", weight: final.subheadingWeight, color: final.subheadingColor || getDefaultTextColor(), funcss: "mt-2 ".concat(final.subheadingClass || '') }, final.subheading)),
188
142
  final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor || getDefaultTextColor(), funcss: "mt-4 ".concat(final.contentClass || ''), article: true }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
189
143
  final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
190
- // Enhanced Media Content (only shown when not in background mode)
191
- var MediaContent = function () {
192
- var _a;
144
+ // Media Component (only shown when not in background mode)
145
+ var MediaComponent = function () {
193
146
  if (final.backgroundMode === 'background')
194
147
  return null;
195
148
  var mediaType = final.mediaType || 'image';
@@ -199,8 +152,6 @@ var Vista = function (localProps) {
199
152
  var mediaSize = getMediaSize();
200
153
  var mediaWrapperStyle = {
201
154
  position: 'relative',
202
- transform: final.parallax ? "translateY(".concat(getParallaxTranslation(final.parallaxSpeed, false), "px)") : undefined,
203
- transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
204
155
  width: '100%',
205
156
  maxWidth: mediaSize || '100%',
206
157
  margin: '0 auto',
@@ -211,27 +162,13 @@ var Vista = function (localProps) {
211
162
  width: '100%',
212
163
  borderRadius: 'inherit',
213
164
  filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
214
- mixBlendMode: final.mediaBlendMode,
215
165
  };
216
- var overlayStyle = final.mediaOverlay ? {
217
- position: 'absolute',
218
- inset: 0,
219
- backgroundColor: getColorValue(final.mediaOverlayColor, 'rgba(0, 0, 0, 0.3)'),
220
- opacity: (_a = final.mediaOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
221
- pointerEvents: 'none',
222
- borderRadius: 'inherit',
223
- zIndex: 1,
224
- } : {};
225
166
  return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.mediaWrapperClass || ''), style: mediaWrapperStyle },
226
- mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
227
- final.customMedia,
228
- final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
167
+ mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } }, final.customMedia)),
229
168
  mediaType === 'video' && final.videoUrl && (react_1.default.createElement("div", { style: { position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto' } },
230
169
  react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.mediaCss || '', style: {
231
170
  filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
232
- mixBlendMode: final.mediaBlendMode,
233
- } }),
234
- final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
171
+ } }))),
235
172
  mediaType === 'iframe' && final.iframeUrl && (react_1.default.createElement("div", { className: "vista-iframe-wrapper", style: {
236
173
  position: 'relative',
237
174
  width: '100%',
@@ -246,12 +183,8 @@ var Vista = function (localProps) {
246
183
  border: 'none',
247
184
  display: 'block',
248
185
  filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
249
- mixBlendMode: final.mediaBlendMode,
250
- }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
251
- final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
252
- mediaType === 'image' && (final.media || final.mediaUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
253
- final.media ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.media)) : (react_1.default.createElement("img", { src: final.mediaUrl, alt: final.mediaAlt || 'Vista media', className: final.mediaCss || '', style: mediaStyle, loading: "lazy" })),
254
- final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
186
+ }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }))),
187
+ mediaType === 'image' && (final.media || final.mediaUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } }, final.media ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.media)) : (react_1.default.createElement("img", { src: final.mediaUrl, alt: final.mediaAlt || 'Vista media', className: final.mediaCss || '', style: mediaStyle, loading: "lazy" }))))));
255
188
  };
256
189
  var isCentered = final.layout === 'centered';
257
190
  var isStacked = final.layout === 'stacked';
@@ -269,7 +202,7 @@ var Vista = function (localProps) {
269
202
  var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors
270
203
  ? "radial-gradient(circle, ".concat(getColorValue(final.gradientColors.split(',')[0]), ", ").concat(getColorValue(final.gradientColors.split(',')[1]), ")")
271
204
  : "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity || 0.7, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition || 'center']);
272
- // Get gradient overlay style - FIXED to have color take most of the space
205
+ // Get gradient overlay style
273
206
  var getGradientOverlayStyle = function () {
274
207
  if (!final.gradientOverlay)
275
208
  return {};
@@ -277,15 +210,11 @@ var Vista = function (localProps) {
277
210
  var opacity = final.gradientOpacity || 0.7;
278
211
  if (final.gradientDirection === 'radial') {
279
212
  return {
280
- // Radial gradient with color at center, transparent at edges
281
213
  background: "radial-gradient(circle at center, ".concat(gradientColor, " 0%, transparent 100%)"),
282
214
  opacity: opacity,
283
215
  };
284
216
  }
285
- // Linear gradient - color takes most space, transparent only at the end
286
217
  var direction = final.gradientLinearDirection || 'to right';
287
- // For 'to right': color 0-80%, transparent 80-100%
288
- // For 'to bottom': color 0-80%, transparent 80-100%
289
218
  var gradientStops = '';
290
219
  switch (direction) {
291
220
  case 'to right':
@@ -347,15 +276,16 @@ var Vista = function (localProps) {
347
276
  background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(fadeColor, " 100%)"),
348
277
  };
349
278
  };
350
- return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n ".concat(final.backgroundMode === 'background' ? 'vista-background-mode' : '', "\n ").concat(final.pattern === 'grid' ? 'grid-bg' :
279
+ return (react_1.default.createElement("div", { ref: sectionRef, id: final.id, className: "vista \n ".concat(final.backgroundMode === 'background' ? 'vista-background-mode' : '', "\n ").concat(final.pattern === 'grid' ? 'grid-bg' :
351
280
  final.pattern === 'dots' ? 'bg-pattern-dots' :
352
281
  final.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
353
282
  final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
354
283
  final.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
355
- final.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n ").concat(final.bg ? "bg-".concat(final.bg) : '', " ").concat(final.padding ? "p-".concat(final.padding) : '', " ").concat(layoutClass, " ").concat(final.sectionClass || '', " ").concat(final.funcss || '', "\n ").concat(getHoverClass()), style: {
284
+ final.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n ").concat(final.bg ? "bg-".concat(final.bg) : '', " ").concat(final.padding ? "p-".concat(final.padding) : '', " ").concat(layoutClass, " ").concat(final.sectionClass || '', " ").concat(final.funcss || ''), style: {
356
285
  position: 'relative',
357
286
  overflow: 'hidden',
358
- minHeight: "90vh",
287
+ minHeight: 'auto',
288
+ height: 'fit-content',
359
289
  backgroundImage: final.pattern && final.backgroundMode !== 'background' ?
360
290
  (final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px),\n linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
361
291
  final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
@@ -366,42 +296,37 @@ var Vista = function (localProps) {
366
296
  backgroundSize: final.pattern && final.backgroundMode !== 'background' ? '40px 40px' : undefined,
367
297
  } },
368
298
  final.backgroundMode === 'background' && (react_1.default.createElement(react_1.default.Fragment, null,
369
- final.backgroundMedia === 'image' && final.backgroundImage && (react_1.default.createElement("div", { ref: bgRef, style: {
299
+ final.backgroundMedia === 'image' && final.backgroundImage && (react_1.default.createElement("div", { style: {
370
300
  position: 'absolute',
371
301
  top: 0,
372
302
  left: 0,
373
303
  width: '100%',
374
- height: '110%', // Slight extra for parallax
304
+ height: '100%',
375
305
  zIndex: 0,
376
306
  backgroundImage: "url(".concat(final.backgroundImage, ")"),
377
307
  backgroundSize: final.backgroundImageSize || 'cover',
378
308
  backgroundPosition: final.backgroundImagePosition || 'center',
379
309
  backgroundRepeat: final.backgroundImageRepeat ? 'repeat' : 'no-repeat',
380
- transform: final.backgroundParallax ? "translateY(".concat(getParallaxTranslation(final.backgroundParallaxSpeed, true), "px)") : undefined,
381
- transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
382
310
  } })),
383
- final.backgroundMedia === 'video' && final.backgroundVideo && (react_1.default.createElement("div", { ref: bgRef, style: {
311
+ final.backgroundMedia === 'video' && final.backgroundVideo && (react_1.default.createElement("div", { style: {
384
312
  position: 'absolute',
385
313
  top: 0,
386
314
  left: 0,
387
315
  width: '100%',
388
- height: '110%', // Slight extra for parallax
316
+ height: '100%',
389
317
  zIndex: 0,
390
318
  overflow: 'hidden',
391
319
  } },
392
- react_1.default.createElement("video", { ref: videoRef, autoPlay: final.videoAutoplay !== false, loop: final.videoLoop !== false, muted: final.videoMuted !== false, poster: final.videoPoster, style: {
320
+ react_1.default.createElement("video", { autoPlay: final.videoAutoplay !== false, loop: final.videoLoop !== false, muted: final.videoMuted !== false, poster: final.videoPoster, style: {
393
321
  position: 'absolute',
394
322
  top: '50%',
395
323
  left: '50%',
396
- transform: final.backgroundParallax
397
- ? "translate(-50%, calc(-50% + ".concat(getParallaxTranslation(final.backgroundParallaxSpeed, true), "px))")
398
- : 'translate(-50%, -50%)',
324
+ transform: 'translate(-50%, -50%)',
399
325
  minWidth: '100%',
400
326
  minHeight: '100%',
401
327
  width: 'auto',
402
328
  height: 'auto',
403
329
  objectFit: 'cover',
404
- transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
405
330
  } },
406
331
  react_1.default.createElement("source", { src: final.backgroundVideo, type: "video/mp4" }),
407
332
  "Your browser does not support the video tag."),
@@ -416,40 +341,52 @@ var Vista = function (localProps) {
416
341
  final.showGradient && (react_1.default.createElement("div", { className: "vista-gradient-blob", style: gradientStyle })),
417
342
  final.backgroundMode === 'background' && final.gradientOverlay && (react_1.default.createElement("div", { style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getGradientOverlayStyle()), { zIndex: 1, pointerEvents: 'none' }) })),
418
343
  final.fade && (react_1.default.createElement("div", { className: "vista-fade-overlay", style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 2, pointerEvents: 'none' }) })),
344
+ final.backgroundMode === 'background' ? (
345
+ // BACKGROUND MODE: Full flex container for positioning
346
+ react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
347
+ position: 'relative',
348
+ zIndex: 3,
349
+ display: 'flex',
350
+ width: '100%',
351
+ height: '100%',
352
+ justifyContent: final.contentJustify || 'center',
353
+ alignItems: final.contentAlign || 'center',
354
+ padding: '2rem',
355
+ } },
356
+ react_1.default.createElement("div", { style: {
357
+ maxWidth: final.contentWrapperMaxWidth || '500px',
358
+ width: '100%',
359
+ textAlign: final.textAlign || 'left',
360
+ } }, ContentComponent))) : (
361
+ // PLAIN MODE: Regular layout with mediaLeft/mediaRight positioning
419
362
  react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
420
363
  position: 'relative',
421
364
  zIndex: 3,
422
365
  gap: final.gap || "2rem",
423
366
  display: 'flex',
424
367
  flexDirection: isCentered || isStacked ? 'column' : 'row',
425
- alignItems: final.layout === 'centered' ? 'center' : 'flex-start',
368
+ alignItems: 'center',
426
369
  justifyContent: 'center',
427
370
  width: '100%',
428
371
  maxWidth: '1200px',
429
372
  margin: '0 auto',
430
373
  padding: '2rem',
431
- minHeight: '90vh',
432
- } }, final.backgroundMode === 'background' ? (
433
- // Background mode: Only show text content with flexible alignment
434
- react_1.default.createElement("div", { style: {
435
- width: '100%',
436
- maxWidth: '800px',
437
- textAlign: final.textAlign || 'left',
438
- margin: '0 auto',
439
- padding: '2rem',
440
- } }, TextContent)) : (
441
- // Regular mode: Show media and text content
442
- react_1.default.createElement(react_1.default.Fragment, null, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
443
- (final.mediaPosition === 'top') && react_1.default.createElement(MediaContent, null),
444
- TextContent,
445
- (final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
374
+ minHeight: 'auto',
375
+ } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
376
+ (final.mediaPosition === 'top') && react_1.default.createElement(MediaComponent, null),
377
+ react_1.default.createElement("div", { style: {
378
+ maxWidth: final.contentWrapperMaxWidth || '500px',
379
+ width: '100%',
380
+ textAlign: final.textAlign || 'left',
381
+ } }, ContentComponent),
382
+ (final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaComponent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
446
383
  react_1.default.createElement("div", { style: { flex: 1 } },
447
- react_1.default.createElement(MediaContent, null)),
448
- react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
384
+ react_1.default.createElement(MediaComponent, null)),
385
+ react_1.default.createElement("div", { style: { flex: 1 } }, ContentComponent))) : (react_1.default.createElement(react_1.default.Fragment, null,
449
386
  isMediaLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
450
- react_1.default.createElement(MediaContent, null))),
451
- react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
387
+ react_1.default.createElement(MediaComponent, null))),
388
+ react_1.default.createElement("div", { style: { flex: 1 } }, ContentComponent),
452
389
  isMediaRight && (react_1.default.createElement("div", { style: { flex: 1 } },
453
- react_1.default.createElement(MediaContent, null))))))))));
390
+ react_1.default.createElement(MediaComponent, null)))))))));
454
391
  };
455
392
  exports.default = Vista;