funuicss 3.7.10 → 3.7.12

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 +67 -48
  2. package/package.json +1 -1
  3. package/ui/card/Card.d.ts +22 -2
  4. package/ui/card/Card.js +51 -162
  5. package/ui/select/Select.d.ts +2 -1
  6. package/ui/select/Select.js +2 -2
  7. package/ui/theme/theme.js +0 -6
  8. package/ui/video/Video.d.ts +3 -1
  9. package/ui/video/Video.js +118 -73
  10. package/ui/vista/Vista.d.ts +28 -2
  11. package/ui/vista/Vista.js +250 -85
package/ui/vista/Vista.js CHANGED
@@ -11,61 +11,218 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  return __assign.apply(this, arguments);
13
13
  };
14
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
15
+ if (k2 === undefined) k2 = k;
16
+ var desc = Object.getOwnPropertyDescriptor(m, k);
17
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
18
+ desc = { enumerable: true, get: function() { return m[k]; } };
19
+ }
20
+ Object.defineProperty(o, k2, desc);
21
+ }) : (function(o, m, k, k2) {
22
+ if (k2 === undefined) k2 = k;
23
+ o[k2] = m[k];
24
+ }));
25
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
26
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
27
+ }) : function(o, v) {
28
+ o["default"] = v;
29
+ });
30
+ var __importStar = (this && this.__importStar) || (function () {
31
+ var ownKeys = function(o) {
32
+ ownKeys = Object.getOwnPropertyNames || function (o) {
33
+ var ar = [];
34
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
35
+ return ar;
36
+ };
37
+ return ownKeys(o);
38
+ };
39
+ return function (mod) {
40
+ if (mod && mod.__esModule) return mod;
41
+ var result = {};
42
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
43
+ __setModuleDefault(result, mod);
44
+ return result;
45
+ };
46
+ })();
14
47
  var __importDefault = (this && this.__importDefault) || function (mod) {
15
48
  return (mod && mod.__esModule) ? mod : { "default": mod };
16
49
  };
17
50
  Object.defineProperty(exports, "__esModule", { value: true });
18
- var react_1 = __importDefault(require("react"));
19
- var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
51
+ var react_1 = __importStar(require("react"));
20
52
  var getCssVariable_1 = require("../../utils/getCssVariable");
21
53
  var componentUtils_1 = require("../../utils/componentUtils");
22
54
  var Text_1 = __importDefault(require("../text/Text"));
23
- var Col_1 = __importDefault(require("../grid/Col"));
24
55
  var Button_1 = __importDefault(require("../button/Button"));
25
56
  var Flex_1 = __importDefault(require("../flex/Flex"));
57
+ var Video_1 = __importDefault(require("../video/Video"));
26
58
  var Vista = function (localProps) {
27
- // Use the component config hook with the variant from localProps
28
59
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', localProps.variant).mergeWithLocal;
29
- // Merge config with local props - local props override config
30
60
  var mergedProps = mergeWithLocal(localProps).props;
31
- // Use mergedProps directly - they already have the correct merge logic applied
32
61
  var final = mergedProps;
33
- // Debug: Log what props are actually coming through
34
- react_1.default.useEffect(function () {
35
- console.log('Vista merged props:', mergedProps);
36
- console.log('Vista config available:', Object.keys(mergedProps).length > 0);
37
- }, [mergedProps]);
62
+ var _a = (0, react_1.useState)(0), scrollY = _a[0], setScrollY = _a[1];
63
+ var sectionRef = (0, react_1.useRef)(null);
64
+ // Parallax effect
65
+ (0, react_1.useEffect)(function () {
66
+ if (!final.parallax)
67
+ return;
68
+ var handleScroll = function () {
69
+ if (sectionRef.current) {
70
+ var rect = sectionRef.current.getBoundingClientRect();
71
+ var scrollProgress = -rect.top;
72
+ setScrollY(scrollProgress * (final.parallaxSpeed || 0.5));
73
+ }
74
+ };
75
+ window.addEventListener('scroll', handleScroll);
76
+ return function () { return window.removeEventListener('scroll', handleScroll); };
77
+ }, [final.parallax, final.parallaxSpeed]);
78
+ // Get responsive layout
79
+ var getResponsiveLayout = function () {
80
+ if (typeof window === 'undefined')
81
+ return final.layout || 'centered';
82
+ var width = window.innerWidth;
83
+ if (width < 768 && final.mobileLayout)
84
+ return final.mobileLayout;
85
+ if (width >= 768 && width < 1024 && final.tabletLayout)
86
+ return final.tabletLayout;
87
+ if (width >= 1024 && final.desktopLayout)
88
+ return final.desktopLayout;
89
+ return final.layout || 'centered';
90
+ };
91
+ var _b = (0, react_1.useState)(getResponsiveLayout()), currentLayout = _b[0], setCurrentLayout = _b[1];
92
+ (0, react_1.useEffect)(function () {
93
+ var handleResize = function () {
94
+ setCurrentLayout(getResponsiveLayout());
95
+ };
96
+ window.addEventListener('resize', handleResize);
97
+ return function () { return window.removeEventListener('resize', handleResize); };
98
+ }, [final.layout, final.mobileLayout, final.tabletLayout, final.desktopLayout]);
38
99
  var layoutClass = [
39
- final.layout,
100
+ currentLayout,
40
101
  final.reverse ? 'reverse' : '',
41
- "text-".concat(final.textAlign),
102
+ "text-".concat(final.textAlign || 'left'),
42
103
  ]
43
104
  .filter(Boolean)
44
105
  .join(' ');
106
+ // Hover effect class
107
+ var getHoverClass = function () {
108
+ if (!final.hoverEffect || final.hoverEffect === 'none')
109
+ return '';
110
+ return "vista-hover-".concat(final.hoverEffect);
111
+ };
112
+ // Filter styles helper
113
+ var getFilterStyle = function (filter, filterValue) {
114
+ if (!filter || filter === 'none')
115
+ return '';
116
+ var value = filterValue || 1;
117
+ switch (filter) {
118
+ case 'grayscale':
119
+ return "grayscale(".concat(value, ")");
120
+ case 'sepia':
121
+ return "sepia(".concat(value, ")");
122
+ case 'blur':
123
+ return "blur(".concat(value, "px)");
124
+ case 'brightness':
125
+ return "brightness(".concat(value, ")");
126
+ case 'contrast':
127
+ return "contrast(".concat(value, ")");
128
+ default:
129
+ return '';
130
+ }
131
+ };
45
132
  // CTA Buttons Component
46
133
  var CTAButtons = function () {
47
134
  var hasCTAs = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
48
135
  if (!hasCTAs)
49
136
  return null;
50
- return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass), wrap: "wrap", width: '100%' },
51
- 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 }, final.ctaPrimaryText)),
52
- 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 }, final.ctaSecondaryText)),
53
- 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 }, final.ctaAccentText))));
137
+ return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass || ''), wrap: "wrap", width: '100%' },
138
+ 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)),
139
+ 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)),
140
+ 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))));
54
141
  };
55
- // Enhanced Text Content with flexible styling
56
- var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass) },
142
+ // Enhanced Text Content
143
+ var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(currentLayout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
57
144
  final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
58
- final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass) }, final.subheading)),
59
- final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, 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))),
60
- final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass) }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
61
- // Enhanced Image Content - uses imageUrl if no image component provided
62
- var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(final.imageWrapperClass) }, final.image ? (final.image) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: "".concat(final.imageClass), style: {
145
+ final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass || '') }, final.subheading)),
146
+ final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, 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))),
147
+ final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
148
+ // Get size for media
149
+ var getMediaSize = function () {
150
+ if (final.mediaType === 'iframe' && final.iframeSize) {
151
+ return final.iframeSize;
152
+ }
153
+ return final.imageSize;
154
+ };
155
+ // Enhanced Media Content
156
+ var MediaContent = function () {
157
+ var _a;
158
+ var mediaType = final.mediaType || 'image';
159
+ var hasMedia = final.image || final.imageUrl || final.videoUrl || final.iframeUrl || final.customMedia;
160
+ if (!hasMedia)
161
+ return null;
162
+ var mediaSize = getMediaSize();
163
+ var mediaWrapperStyle = {
164
+ position: 'relative',
165
+ transform: final.parallax ? "translateY(".concat(scrollY, "px)") : undefined,
166
+ transition: final.parallax ? 'transform 0.1s linear' : undefined,
167
+ width: '100%',
168
+ maxWidth: mediaSize || '100%',
169
+ margin: '0 auto',
170
+ };
171
+ var mediaStyle = {
63
172
  objectFit: 'cover',
64
- maxWidth: final.imageSize,
65
- borderRadius: 'inherit'
66
- } }))));
67
- var isCentered = final.layout === 'centered';
68
- var isStacked = final.layout === 'stacked';
173
+ maxWidth: mediaSize,
174
+ width: '100%',
175
+ borderRadius: 'inherit',
176
+ filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
177
+ mixBlendMode: final.imageBlendMode,
178
+ };
179
+ var overlayStyle = final.imageOverlay ? {
180
+ position: 'absolute',
181
+ inset: 0,
182
+ backgroundColor: final.imageOverlayColor || 'rgba(0, 0, 0, 0.3)',
183
+ opacity: (_a = final.imageOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
184
+ pointerEvents: 'none',
185
+ borderRadius: 'inherit',
186
+ zIndex: 1,
187
+ } : {};
188
+ return (react_1.default.createElement("div", { className: "vista-media ".concat(final.imageWrapperClass || ''), style: mediaWrapperStyle },
189
+ mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
190
+ final.customMedia,
191
+ final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
192
+ mediaType === 'video' && final.videoUrl && (react_1.default.createElement("div", { style: { position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto' } },
193
+ react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.imageClass || '', style: {
194
+ filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
195
+ mixBlendMode: final.imageBlendMode,
196
+ } }),
197
+ final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
198
+ mediaType === 'iframe' && final.iframeUrl && (react_1.default.createElement("div", { className: "vista-iframe-wrapper", style: {
199
+ position: 'relative',
200
+ width: '100%',
201
+ maxWidth: mediaSize || '100%',
202
+ aspectRatio: '16/9',
203
+ margin: '0 auto',
204
+ } },
205
+ react_1.default.createElement("div", { style: {
206
+ position: 'relative',
207
+ width: '100%',
208
+ height: '100%',
209
+ filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
210
+ mixBlendMode: final.imageBlendMode,
211
+ } },
212
+ react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.imageClass || ''), style: {
213
+ width: '100%',
214
+ height: '100%',
215
+ border: 'none',
216
+ borderRadius: 'inherit',
217
+ display: 'block',
218
+ }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista iframe content" }),
219
+ final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
220
+ mediaType === 'image' && (final.image || final.imageUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
221
+ final.image ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.image)) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: final.imageClass || '', style: mediaStyle, loading: "lazy" })),
222
+ final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
223
+ };
224
+ var isCentered = currentLayout === 'centered';
225
+ var isStacked = currentLayout === 'stacked';
69
226
  var positionStyles = {
70
227
  'top-left': { top: '-100px', left: '-100px' },
71
228
  'top-right': { top: '-100px', right: '-100px' },
@@ -75,62 +232,70 @@ var Vista = function (localProps) {
75
232
  };
76
233
  var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
77
234
  var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
78
- var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition]);
79
- return (react_1.default.createElement(ScrollInView_1.default, null,
80
- react_1.default.createElement("div", { className: "vista \n ".concat(final.pattern === 'grid' ? 'grid-bg' :
81
- final.pattern === 'dots' ? 'bg-pattern-dots' :
82
- final.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
83
- final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
84
- final.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
85
- final.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n ").concat(final.bg, " p-").concat(final.padding, " ").concat(layoutClass, " ").concat(final.sectionClass, " ").concat(final.funcss), style: {
235
+ var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "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']);
236
+ // Get fade style
237
+ var getFadeStyle = function () {
238
+ if (!final.fade)
239
+ return {};
240
+ var bgColor = (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
241
+ if (final.fadeRadial) {
242
+ return {
243
+ background: "radial-gradient(circle, transparent 0%, ".concat(bgColor, " 100%)"),
244
+ };
245
+ }
246
+ var direction = final.fadeDirection || 'bottom';
247
+ var toDirectionMap = {
248
+ top: 'to top',
249
+ bottom: 'to bottom',
250
+ left: 'to left',
251
+ right: 'to right'
252
+ };
253
+ return {
254
+ background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(bgColor, " 100%)"),
255
+ };
256
+ };
257
+ return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n ".concat(final.pattern === 'grid' ? 'grid-bg' :
258
+ final.pattern === 'dots' ? 'bg-pattern-dots' :
259
+ final.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
260
+ final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
261
+ final.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
262
+ 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: {
263
+ position: 'relative',
264
+ overflow: 'hidden',
265
+ minHeight: "90vh",
266
+ backgroundImage: 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)") :
267
+ final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
268
+ final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, "), rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px, transparent 10px)") :
269
+ final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%)") :
270
+ final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
271
+ final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") : '',
272
+ backgroundSize: final.pattern ? '40px 40px' : undefined,
273
+ } },
274
+ final.showGradient && (react_1.default.createElement("div", { className: "vista-gradient-blob", style: gradientStyle })),
275
+ final.fade && (react_1.default.createElement("div", { className: "vista-fade-overlay", style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 0, pointerEvents: 'none' }) })),
276
+ react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
86
277
  position: 'relative',
87
- overflow: 'hidden',
88
- minHeight: "90vh",
89
- backgroundImage: final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px),\n linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px)") :
90
- final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
91
- final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, "), rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
92
- final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%)") :
93
- final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
94
- final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") : ''
95
- } },
96
- final.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
97
- react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass), style: { position: 'relative', zIndex: 1, gap: final.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
98
- (final.imgPosition === 'top') && ImageContent,
99
- TextContent,
100
- (final.imgPosition === 'bottom') && ImageContent)) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
101
- ImageContent,
102
- TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
103
- (final.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
104
- TextContent,
105
- (final.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
106
- final.fade && (react_1.default.createElement("div", { style: {
107
- position: 'absolute',
108
- inset: 0,
109
- width: '100%',
110
- height: '100%',
111
- background: final.fadeRadial
112
- ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 100%)")
113
- : "linear-gradient(to ".concat(final.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 0%, transparent 100%)"),
114
- zIndex: 0,
115
- pointerEvents: 'none'
116
- } })),
117
- final.backgroundImage && (react_1.default.createElement("div", { style: {
118
- position: 'absolute',
119
- inset: 0,
120
- backgroundImage: "url(".concat(final.backgroundImage, ")"),
121
- backgroundSize: 'cover',
122
- backgroundPosition: 'center',
123
- zIndex: -1,
124
- width: '100%',
125
- height: '100%',
126
- } })),
127
- final.backgroundImage && final.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
128
- position: 'absolute',
129
- width: '100%',
130
- height: '100%',
131
- inset: 0,
132
- backgroundColor: "rgba(0, 0, 0, ".concat(final.fadeOverlayDarken, ")"),
133
- zIndex: -1,
134
- } })))));
278
+ zIndex: 1,
279
+ gap: final.gap || "2rem",
280
+ display: 'flex',
281
+ flexDirection: isCentered || isStacked ? 'column' : 'row',
282
+ alignItems: 'center',
283
+ justifyContent: 'center',
284
+ width: '100%',
285
+ maxWidth: '1200px',
286
+ margin: '0 auto',
287
+ padding: '2rem',
288
+ } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
289
+ (final.imgPosition === 'top') && react_1.default.createElement(MediaContent, null),
290
+ TextContent,
291
+ (final.imgPosition === 'bottom' || !final.imgPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
292
+ react_1.default.createElement("div", { style: { flex: 1 } },
293
+ react_1.default.createElement(MediaContent, null)),
294
+ react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
295
+ (currentLayout === 'imageLeft') && (react_1.default.createElement("div", { style: { flex: 1 } },
296
+ react_1.default.createElement(MediaContent, null))),
297
+ react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
298
+ (currentLayout === 'imageRight') && (react_1.default.createElement("div", { style: { flex: 1 } },
299
+ react_1.default.createElement(MediaContent, null))))))));
135
300
  };
136
301
  exports.default = Vista;