funuicss 3.8.14 → 3.8.16

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 (11) hide show
  1. package/css/fun.css +215 -130
  2. package/package.json +1 -1
  3. package/ui/accordion/Accordion.d.ts +2 -0
  4. package/ui/accordion/Accordion.js +655 -56
  5. package/ui/carousel/Carousel.d.ts +2 -0
  6. package/ui/carousel/Carousel.js +101 -91
  7. package/ui/form/Form.js +25 -7
  8. package/ui/sidebar/SideBar.d.ts +2 -1
  9. package/ui/sidebar/SideBar.js +356 -14
  10. package/ui/vista/Vista.d.ts +8 -10
  11. package/ui/vista/Vista.js +62 -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,20 @@ 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',
289
+ display: 'flex',
290
+ flexDirection: 'column',
291
+ alignItems: 'center',
292
+ justifyContent: 'center',
359
293
  backgroundImage: final.pattern && final.backgroundMode !== 'background' ?
360
294
  (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
295
  final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
@@ -366,42 +300,37 @@ var Vista = function (localProps) {
366
300
  backgroundSize: final.pattern && final.backgroundMode !== 'background' ? '40px 40px' : undefined,
367
301
  } },
368
302
  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: {
303
+ final.backgroundMedia === 'image' && final.backgroundImage && (react_1.default.createElement("div", { style: {
370
304
  position: 'absolute',
371
305
  top: 0,
372
306
  left: 0,
373
307
  width: '100%',
374
- height: '110%', // Slight extra for parallax
308
+ height: '100%',
375
309
  zIndex: 0,
376
310
  backgroundImage: "url(".concat(final.backgroundImage, ")"),
377
311
  backgroundSize: final.backgroundImageSize || 'cover',
378
312
  backgroundPosition: final.backgroundImagePosition || 'center',
379
313
  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
314
  } })),
383
- final.backgroundMedia === 'video' && final.backgroundVideo && (react_1.default.createElement("div", { ref: bgRef, style: {
315
+ final.backgroundMedia === 'video' && final.backgroundVideo && (react_1.default.createElement("div", { style: {
384
316
  position: 'absolute',
385
317
  top: 0,
386
318
  left: 0,
387
319
  width: '100%',
388
- height: '110%', // Slight extra for parallax
320
+ height: '100%',
389
321
  zIndex: 0,
390
322
  overflow: 'hidden',
391
323
  } },
392
- react_1.default.createElement("video", { ref: videoRef, autoPlay: final.videoAutoplay !== false, loop: final.videoLoop !== false, muted: final.videoMuted !== false, poster: final.videoPoster, style: {
324
+ react_1.default.createElement("video", { autoPlay: final.videoAutoplay !== false, loop: final.videoLoop !== false, muted: final.videoMuted !== false, poster: final.videoPoster, style: {
393
325
  position: 'absolute',
394
326
  top: '50%',
395
327
  left: '50%',
396
- transform: final.backgroundParallax
397
- ? "translate(-50%, calc(-50% + ".concat(getParallaxTranslation(final.backgroundParallaxSpeed, true), "px))")
398
- : 'translate(-50%, -50%)',
328
+ transform: 'translate(-50%, -50%)',
399
329
  minWidth: '100%',
400
330
  minHeight: '100%',
401
331
  width: 'auto',
402
332
  height: 'auto',
403
333
  objectFit: 'cover',
404
- transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
405
334
  } },
406
335
  react_1.default.createElement("source", { src: final.backgroundVideo, type: "video/mp4" }),
407
336
  "Your browser does not support the video tag."),
@@ -416,40 +345,53 @@ var Vista = function (localProps) {
416
345
  final.showGradient && (react_1.default.createElement("div", { className: "vista-gradient-blob", style: gradientStyle })),
417
346
  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
347
  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' }) })),
348
+ final.backgroundMode === 'background' ? (
349
+ // BACKGROUND MODE: Full flex container for positioning
350
+ react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
351
+ position: 'relative',
352
+ zIndex: 3,
353
+ display: 'flex',
354
+ width: '100%',
355
+ height: '100%',
356
+ justifyContent: final.contentJustify || 'center',
357
+ alignItems: final.contentAlign || 'center',
358
+ padding: '2rem',
359
+ } },
360
+ react_1.default.createElement("div", { style: {
361
+ maxWidth: final.contentWrapperMaxWidth || '700px',
362
+ width: '100%',
363
+ textAlign: final.textAlign || 'left',
364
+ } }, ContentComponent))) : (
365
+ // PLAIN MODE: Regular layout with mediaLeft/mediaRight positioning
419
366
  react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
420
367
  position: 'relative',
421
368
  zIndex: 3,
422
369
  gap: final.gap || "2rem",
423
370
  display: 'flex',
424
371
  flexDirection: isCentered || isStacked ? 'column' : 'row',
425
- alignItems: final.layout === 'centered' ? 'center' : 'flex-start',
372
+ alignItems: 'center',
426
373
  justifyContent: 'center',
427
374
  width: '100%',
375
+ height: '100%',
428
376
  maxWidth: '1200px',
429
377
  margin: '0 auto',
430
378
  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,
379
+ minHeight: 'auto',
380
+ } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
381
+ (final.mediaPosition === 'top') && react_1.default.createElement(MediaComponent, null),
382
+ react_1.default.createElement("div", { style: {
383
+ maxWidth: final.contentWrapperMaxWidth || '100%',
384
+ width: '100%',
385
+ textAlign: final.textAlign || 'left',
386
+ } }, ContentComponent),
387
+ (final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaComponent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
446
388
  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,
389
+ react_1.default.createElement(MediaComponent, null)),
390
+ react_1.default.createElement("div", { style: { flex: 1 } }, ContentComponent))) : (react_1.default.createElement(react_1.default.Fragment, null,
449
391
  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),
392
+ react_1.default.createElement(MediaComponent, null))),
393
+ react_1.default.createElement("div", { style: { flex: 1 } }, ContentComponent),
452
394
  isMediaRight && (react_1.default.createElement("div", { style: { flex: 1 } },
453
- react_1.default.createElement(MediaContent, null))))))))));
395
+ react_1.default.createElement(MediaComponent, null)))))))));
454
396
  };
455
397
  exports.default = Vista;