@opensite/ui 2.1.3 → 2.1.5

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.
@@ -1,14 +1,15 @@
1
1
  "use client";
2
2
  'use strict';
3
3
 
4
- var React = require('react');
4
+ var React3 = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var img = require('@page-speed/img');
8
- var classVarianceAuthority = require('class-variance-authority');
9
- var jsxRuntime = require('react/jsx-runtime');
10
8
  var icon = require('@page-speed/icon');
9
+ var jsxRuntime = require('react/jsx-runtime');
11
10
  var TabsPrimitive = require('@radix-ui/react-tabs');
11
+ var classVarianceAuthority = require('class-variance-authority');
12
+ var reactSlot = require('@radix-ui/react-slot');
12
13
 
13
14
  function _interopNamespace(e) {
14
15
  if (e && e.__esModule) return e;
@@ -28,568 +29,120 @@ function _interopNamespace(e) {
28
29
  return Object.freeze(n);
29
30
  }
30
31
 
31
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
32
+ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
32
33
  var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
33
34
 
34
35
  // components/blocks/about/about-culture-tabs.tsx
35
36
  function cn(...inputs) {
36
37
  return tailwindMerge.twMerge(clsx.clsx(inputs));
37
38
  }
38
- function getTextColor(parentBg, variant = "default", options) {
39
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
40
- if (isDark) {
41
- switch (variant) {
42
- case "default":
43
- return "text-foreground";
44
- case "muted":
45
- return "text-foreground/80";
46
- case "subtle":
47
- return "text-foreground/60";
48
- case "accent":
49
- return "text-accent-foreground";
50
- }
51
- } else {
52
- switch (variant) {
53
- case "default":
54
- return "text-foreground";
55
- case "muted":
56
- return "text-muted-foreground";
57
- case "subtle":
58
- return "text-muted-foreground/70";
59
- case "accent":
60
- return "text-primary";
61
- }
62
- }
63
- }
64
- function getAccentColor(parentBg, options) {
65
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
66
- return isDark ? "text-accent-foreground" : "text-primary";
67
- }
68
- function normalizePhoneNumber(input) {
69
- const trimmed = input.trim();
70
- if (trimmed.toLowerCase().startsWith("tel:")) {
71
- return trimmed;
72
- }
73
- const match = trimmed.match(/^[\s\+\-\(\)]*(\d[\d\s\-\(\)\.]*\d)[\s\-]*(x|ext\.?|extension)?[\s\-]*(\d+)?$/i);
74
- if (match) {
75
- const mainNumber = match[1].replace(/[\s\-\(\)\.]/g, "");
76
- const extension = match[3];
77
- const normalized = mainNumber.length >= 10 && !trimmed.startsWith("+") ? `+${mainNumber}` : mainNumber;
78
- const withExtension = extension ? `${normalized};ext=${extension}` : normalized;
79
- return `tel:${withExtension}`;
80
- }
81
- const cleaned = trimmed.replace(/[\s\-\(\)\.]/g, "");
82
- return `tel:${cleaned}`;
83
- }
84
- function normalizeEmail(input) {
85
- const trimmed = input.trim();
86
- if (trimmed.toLowerCase().startsWith("mailto:")) {
87
- return trimmed;
88
- }
89
- return `mailto:${trimmed}`;
90
- }
91
- function isEmail(input) {
92
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
93
- return emailRegex.test(input.trim());
94
- }
95
- function isPhoneNumber(input) {
96
- const trimmed = input.trim();
97
- if (trimmed.toLowerCase().startsWith("tel:")) {
98
- return true;
99
- }
100
- const phoneRegex = /^[\s\+\-\(\)]*\d[\d\s\-\(\)\.]*\d[\s\-]*(x|ext\.?|extension)?[\s\-]*\d*$/i;
101
- return phoneRegex.test(trimmed);
102
- }
103
- function isInternalUrl(href) {
104
- if (typeof window === "undefined") {
105
- return href.startsWith("/") && !href.startsWith("//");
106
- }
107
- const trimmed = href.trim();
108
- if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
109
- return true;
110
- }
111
- try {
112
- const url = new URL(trimmed, window.location.href);
113
- const currentOrigin = window.location.origin;
114
- const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
115
- return normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin);
116
- } catch {
117
- return false;
118
- }
39
+ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
40
+ function DynamicIcon({ apiKey, ...props }) {
41
+ return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
119
42
  }
120
- function toRelativePath(href) {
121
- if (typeof window === "undefined") {
122
- return href;
123
- }
124
- const trimmed = href.trim();
125
- if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
126
- return trimmed;
127
- }
128
- try {
129
- const url = new URL(trimmed, window.location.href);
130
- const currentOrigin = window.location.origin;
131
- const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
132
- if (normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin)) {
133
- return url.pathname + url.search + url.hash;
43
+ function Tabs({
44
+ className,
45
+ ...props
46
+ }) {
47
+ return /* @__PURE__ */ jsxRuntime.jsx(
48
+ TabsPrimitive__namespace.Root,
49
+ {
50
+ "data-slot": "tabs",
51
+ className: cn("flex flex-col gap-2", className),
52
+ ...props
134
53
  }
135
- } catch {
136
- }
137
- return trimmed;
54
+ );
138
55
  }
139
- function useNavigation({
140
- href,
141
- onClick
142
- } = {}) {
143
- const linkType = React__namespace.useMemo(() => {
144
- if (!href || href.trim() === "") {
145
- return onClick ? "none" : "none";
146
- }
147
- const trimmed = href.trim();
148
- if (trimmed.toLowerCase().startsWith("mailto:") || isEmail(trimmed)) {
149
- return "mailto";
150
- }
151
- if (trimmed.toLowerCase().startsWith("tel:") || isPhoneNumber(trimmed)) {
152
- return "tel";
153
- }
154
- if (isInternalUrl(trimmed)) {
155
- return "internal";
156
- }
157
- try {
158
- new URL(trimmed, typeof window !== "undefined" ? window.location.href : "http://localhost");
159
- return "external";
160
- } catch {
161
- return "internal";
56
+ function TabsList({
57
+ className,
58
+ ...props
59
+ }) {
60
+ return /* @__PURE__ */ jsxRuntime.jsx(
61
+ TabsPrimitive__namespace.List,
62
+ {
63
+ "data-slot": "tabs-list",
64
+ className: cn(
65
+ "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
66
+ className
67
+ ),
68
+ ...props
162
69
  }
163
- }, [href, onClick]);
164
- const normalizedHref = React__namespace.useMemo(() => {
165
- if (!href || href.trim() === "") {
166
- return void 0;
70
+ );
71
+ }
72
+ function TabsTrigger({
73
+ className,
74
+ ...props
75
+ }) {
76
+ return /* @__PURE__ */ jsxRuntime.jsx(
77
+ TabsPrimitive__namespace.Trigger,
78
+ {
79
+ "data-slot": "tabs-trigger",
80
+ className: cn(
81
+ "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
82
+ className
83
+ ),
84
+ ...props
167
85
  }
168
- const trimmed = href.trim();
169
- switch (linkType) {
170
- case "tel":
171
- return normalizePhoneNumber(trimmed);
172
- case "mailto":
173
- return normalizeEmail(trimmed);
174
- case "internal":
175
- return toRelativePath(trimmed);
176
- case "external":
177
- return trimmed;
178
- default:
179
- return trimmed;
86
+ );
87
+ }
88
+ function TabsContent({
89
+ className,
90
+ ...props
91
+ }) {
92
+ return /* @__PURE__ */ jsxRuntime.jsx(
93
+ TabsPrimitive__namespace.Content,
94
+ {
95
+ "data-slot": "tabs-content",
96
+ className: cn("flex-1 outline-none", className),
97
+ ...props
180
98
  }
181
- }, [href, linkType]);
182
- const target = React__namespace.useMemo(() => {
183
- switch (linkType) {
184
- case "external":
185
- return "_blank";
186
- case "internal":
187
- return "_self";
188
- case "mailto":
189
- case "tel":
190
- return void 0;
191
- default:
192
- return void 0;
99
+ );
100
+ }
101
+ function Card({ className, ...props }) {
102
+ return /* @__PURE__ */ jsxRuntime.jsx(
103
+ "div",
104
+ {
105
+ "data-slot": "card",
106
+ className: cn(
107
+ "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
108
+ className
109
+ ),
110
+ ...props
193
111
  }
194
- }, [linkType]);
195
- const rel = React__namespace.useMemo(() => {
196
- if (linkType === "external") {
197
- return "noopener noreferrer";
112
+ );
113
+ }
114
+ function CardContent({ className, ...props }) {
115
+ return /* @__PURE__ */ jsxRuntime.jsx(
116
+ "div",
117
+ {
118
+ "data-slot": "card-content",
119
+ className: cn("px-6", className),
120
+ ...props
198
121
  }
199
- return void 0;
200
- }, [linkType]);
201
- const isExternal = linkType === "external";
202
- const isInternal = linkType === "internal";
203
- const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
204
- const handleClick = React__namespace.useCallback(
205
- (event) => {
206
- if (onClick) {
207
- try {
208
- onClick(event);
209
- } catch (error) {
210
- console.error("Error in user onClick handler:", error);
211
- }
212
- }
213
- if (event.defaultPrevented) {
214
- return;
215
- }
216
- if (shouldUseRouter && normalizedHref && event.button === 0 && // left-click only
217
- !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey) {
218
- if (typeof window !== "undefined") {
219
- const handler = window.__opensiteNavigationHandler;
220
- if (typeof handler === "function") {
221
- try {
222
- const handled = handler(normalizedHref, event.nativeEvent || event);
223
- if (handled !== false) {
224
- event.preventDefault();
225
- }
226
- } catch (error) {
227
- console.error("Error in navigation handler:", error);
228
- }
229
- }
230
- }
231
- }
232
- },
233
- [onClick, shouldUseRouter, normalizedHref]
234
122
  );
235
- return {
236
- linkType,
237
- normalizedHref,
238
- target,
239
- rel,
240
- isExternal,
241
- isInternal,
242
- shouldUseRouter,
243
- handleClick
244
- };
245
123
  }
246
- var baseStyles = [
247
- // Layout
248
- "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
249
- // Typography - using CSS variables with sensible defaults
250
- "font-[var(--button-font-family,inherit)]",
251
- "font-[var(--button-font-weight,500)]",
252
- "tracking-[var(--button-letter-spacing,0)]",
253
- "leading-[var(--button-line-height,1.25)]",
254
- "[text-transform:var(--button-text-transform,none)]",
255
- "text-sm",
256
- // Border radius
257
- "rounded-[var(--button-radius,var(--radius,0.375rem))]",
258
- // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
259
- "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
260
- // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
261
- "[box-shadow:var(--button-shadow,none)]",
262
- "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
263
- // Disabled state
264
- "disabled:pointer-events-none disabled:opacity-50",
265
- // SVG handling
266
- "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
267
- // Focus styles
268
- "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
269
- // Invalid state
270
- "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
271
- ].join(" ");
272
- var buttonVariants = classVarianceAuthority.cva(baseStyles, {
273
- variants: {
274
- variant: {
275
- // Default (Primary) variant - full customization
276
- default: [
277
- "bg-[var(--button-default-bg,hsl(var(--primary)))]",
278
- "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
279
- "border-[length:var(--button-default-border-width,0px)]",
280
- "border-[color:var(--button-default-border,transparent)]",
281
- "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
282
- "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
283
- "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
284
- "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
285
- "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
286
- ].join(" "),
287
- // Destructive variant - full customization
288
- destructive: [
289
- "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
290
- "text-[var(--button-destructive-fg,white)]",
291
- "border-[length:var(--button-destructive-border-width,0px)]",
292
- "border-[color:var(--button-destructive-border,transparent)]",
293
- "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
294
- "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
295
- "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
296
- "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
297
- "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
298
- "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
299
- "dark:bg-destructive/60"
300
- ].join(" "),
301
- // Outline variant - full customization with proper border handling
302
- outline: [
303
- "bg-[var(--button-outline-bg,hsl(var(--background)))]",
304
- "text-[var(--button-outline-fg,inherit)]",
305
- "border-[length:var(--button-outline-border-width,1px)]",
306
- "border-[color:var(--button-outline-border,hsl(var(--border)))]",
307
- "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
308
- "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
309
- "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
310
- "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
311
- "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
312
- "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
313
- ].join(" "),
314
- // Secondary variant - full customization
315
- secondary: [
316
- "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
317
- "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
318
- "border-[length:var(--button-secondary-border-width,0px)]",
319
- "border-[color:var(--button-secondary-border,transparent)]",
320
- "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
321
- "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
322
- "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
323
- "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
324
- "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
325
- ].join(" "),
326
- // Ghost variant - full customization
327
- ghost: [
328
- "bg-[var(--button-ghost-bg,transparent)]",
329
- "text-[var(--button-ghost-fg,inherit)]",
330
- "border-[length:var(--button-ghost-border-width,0px)]",
331
- "border-[color:var(--button-ghost-border,transparent)]",
332
- "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
333
- "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
334
- "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
335
- "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
336
- "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
337
- "dark:hover:bg-accent/50"
338
- ].join(" "),
339
- // Link variant - full customization
340
- link: [
341
- "bg-[var(--button-link-bg,transparent)]",
342
- "text-[var(--button-link-fg,hsl(var(--primary)))]",
343
- "border-[length:var(--button-link-border-width,0px)]",
344
- "border-[color:var(--button-link-border,transparent)]",
345
- "[box-shadow:var(--button-link-shadow,none)]",
346
- "hover:bg-[var(--button-link-hover-bg,transparent)]",
347
- "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
348
- "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
349
- "underline-offset-4 hover:underline"
350
- ].join(" ")
351
- },
352
- size: {
353
- default: [
354
- "h-[var(--button-height-md,2.25rem)]",
355
- "px-[var(--button-padding-x-md,1rem)]",
356
- "py-[var(--button-padding-y-md,0.5rem)]",
357
- "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
358
- ].join(" "),
359
- sm: [
360
- "h-[var(--button-height-sm,2rem)]",
361
- "px-[var(--button-padding-x-sm,0.75rem)]",
362
- "py-[var(--button-padding-y-sm,0.25rem)]",
363
- "gap-1.5",
364
- "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
365
- ].join(" "),
366
- md: [
367
- "h-[var(--button-height-md,2.25rem)]",
368
- "px-[var(--button-padding-x-md,1rem)]",
369
- "py-[var(--button-padding-y-md,0.5rem)]",
370
- "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
371
- ].join(" "),
372
- lg: [
373
- "h-[var(--button-height-lg,2.5rem)]",
374
- "px-[var(--button-padding-x-lg,1.5rem)]",
375
- "py-[var(--button-padding-y-lg,0.5rem)]",
376
- "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
377
- ].join(" "),
378
- icon: "size-[var(--button-height-md,2.25rem)]",
379
- "icon-sm": "size-[var(--button-height-sm,2rem)]",
380
- "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
381
- }
382
- },
383
- defaultVariants: {
384
- variant: "default",
385
- size: "default"
386
- }
387
- });
388
- var Pressable = React__namespace.forwardRef(
389
- ({
390
- children,
391
- className,
392
- href,
393
- onClick,
394
- variant,
395
- size,
396
- asButton = false,
397
- fallbackComponentType = "span",
398
- componentType,
399
- "aria-label": ariaLabel,
400
- "aria-describedby": ariaDescribedby,
401
- id,
402
- ...props
403
- }, ref) => {
404
- const navigation = useNavigation({ href, onClick });
405
- const {
406
- normalizedHref,
407
- target,
408
- rel,
409
- linkType,
410
- isInternal,
411
- handleClick
412
- } = navigation;
413
- const shouldRenderLink = normalizedHref && linkType !== "none";
414
- const shouldRenderButton = !shouldRenderLink && onClick;
415
- const effectiveComponentType = componentType || (shouldRenderLink ? "a" : shouldRenderButton ? "button" : fallbackComponentType);
416
- const finalComponentType = isInternal && shouldRenderLink ? "a" : effectiveComponentType;
417
- const shouldApplyButtonStyles = asButton || variant || size;
418
- const combinedClassName = cn(
419
- shouldApplyButtonStyles && buttonVariants({ variant, size }),
420
- className
421
- );
422
- const dataProps = Object.fromEntries(
423
- Object.entries(props).filter(([key]) => key.startsWith("data-"))
424
- );
425
- const buttonDataAttributes = shouldApplyButtonStyles ? {
426
- "data-slot": "button",
427
- "data-variant": variant ?? "default",
428
- "data-size": size ?? "default"
429
- } : {};
430
- const commonProps = {
431
- className: combinedClassName,
432
- onClick: handleClick,
433
- "aria-label": ariaLabel,
434
- "aria-describedby": ariaDescribedby,
435
- id,
436
- ...dataProps,
437
- ...buttonDataAttributes
438
- };
439
- if (finalComponentType === "a" && shouldRenderLink) {
440
- return /* @__PURE__ */ jsxRuntime.jsx(
441
- "a",
442
- {
443
- ref,
444
- href: normalizedHref,
445
- target,
446
- rel,
447
- ...commonProps,
448
- ...props,
449
- children
450
- }
451
- );
452
- }
453
- if (finalComponentType === "button") {
454
- return /* @__PURE__ */ jsxRuntime.jsx(
455
- "button",
456
- {
457
- ref,
458
- type: props.type || "button",
459
- ...commonProps,
460
- ...props,
461
- children
462
- }
463
- );
464
- }
465
- if (finalComponentType === "div") {
466
- return /* @__PURE__ */ jsxRuntime.jsx(
467
- "div",
468
- {
469
- ref,
470
- ...commonProps,
471
- children
472
- }
473
- );
474
- }
124
+ var maxWidthStyles = {
125
+ sm: "max-w-screen-sm",
126
+ md: "max-w-screen-md",
127
+ lg: "max-w-screen-lg",
128
+ xl: "max-w-7xl",
129
+ "2xl": "max-w-screen-2xl",
130
+ "4xl": "max-w-[1536px]",
131
+ full: "max-w-full"
132
+ };
133
+ var Container = React3__namespace.default.forwardRef(
134
+ ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
135
+ const Component = as;
475
136
  return /* @__PURE__ */ jsxRuntime.jsx(
476
- "span",
137
+ Component,
477
138
  {
478
139
  ref,
479
- ...commonProps,
480
- children
481
- }
482
- );
483
- }
484
- );
485
- Pressable.displayName = "Pressable";
486
- var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
487
- function DynamicIcon({ apiKey, ...props }) {
488
- return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
489
- }
490
- function Tabs({
491
- className,
492
- ...props
493
- }) {
494
- return /* @__PURE__ */ jsxRuntime.jsx(
495
- TabsPrimitive__namespace.Root,
496
- {
497
- "data-slot": "tabs",
498
- className: cn("flex flex-col gap-2", className),
499
- ...props
500
- }
501
- );
502
- }
503
- function TabsList({
504
- className,
505
- ...props
506
- }) {
507
- return /* @__PURE__ */ jsxRuntime.jsx(
508
- TabsPrimitive__namespace.List,
509
- {
510
- "data-slot": "tabs-list",
511
- className: cn(
512
- "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
513
- className
514
- ),
515
- ...props
516
- }
517
- );
518
- }
519
- function TabsTrigger({
520
- className,
521
- ...props
522
- }) {
523
- return /* @__PURE__ */ jsxRuntime.jsx(
524
- TabsPrimitive__namespace.Trigger,
525
- {
526
- "data-slot": "tabs-trigger",
527
- className: cn(
528
- "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
529
- className
530
- ),
531
- ...props
532
- }
533
- );
534
- }
535
- function TabsContent({
536
- className,
537
- ...props
538
- }) {
539
- return /* @__PURE__ */ jsxRuntime.jsx(
540
- TabsPrimitive__namespace.Content,
541
- {
542
- "data-slot": "tabs-content",
543
- className: cn("flex-1 outline-none", className),
544
- ...props
545
- }
546
- );
547
- }
548
- function Card({ className, ...props }) {
549
- return /* @__PURE__ */ jsxRuntime.jsx(
550
- "div",
551
- {
552
- "data-slot": "card",
553
- className: cn(
554
- "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
555
- className
556
- ),
557
- ...props
558
- }
559
- );
560
- }
561
- function CardContent({ className, ...props }) {
562
- return /* @__PURE__ */ jsxRuntime.jsx(
563
- "div",
564
- {
565
- "data-slot": "card-content",
566
- className: cn("px-6", className),
567
- ...props
568
- }
569
- );
570
- }
571
- var maxWidthStyles = {
572
- sm: "max-w-screen-sm",
573
- md: "max-w-screen-md",
574
- lg: "max-w-screen-lg",
575
- xl: "max-w-7xl",
576
- "2xl": "max-w-screen-2xl",
577
- "4xl": "max-w-[1536px]",
578
- full: "max-w-full"
579
- };
580
- var Container = React__namespace.default.forwardRef(
581
- ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
582
- const Component = as;
583
- return /* @__PURE__ */ jsxRuntime.jsx(
584
- Component,
585
- {
586
- ref,
587
- className: cn(
588
- "mx-auto w-full px-2 sm:px-4 lg:px-8",
589
- maxWidthStyles[maxWidth],
590
- className
591
- ),
592
- ...props,
140
+ className: cn(
141
+ "mx-auto w-full px-2 sm:px-4 lg:px-8",
142
+ maxWidthStyles[maxWidth],
143
+ className
144
+ ),
145
+ ...props,
593
146
  children
594
147
  }
595
148
  );
@@ -740,209 +293,723 @@ var dashedGridPattern = (fadeMask) => {
740
293
  WebkitMaskComposite: "source-in"
741
294
  }
742
295
  }
743
- );
744
- };
745
- var gradientGlow = (position) => /* @__PURE__ */ jsxRuntime.jsx(
746
- "div",
747
- {
748
- className: cn(
749
- "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
750
- position === "top" ? "-top-1/4" : "-bottom-1/4"
751
- ),
752
- style: {
753
- background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
296
+ );
297
+ };
298
+ var gradientGlow = (position) => /* @__PURE__ */ jsxRuntime.jsx(
299
+ "div",
300
+ {
301
+ className: cn(
302
+ "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
303
+ position === "top" ? "-top-1/4" : "-bottom-1/4"
304
+ ),
305
+ style: {
306
+ background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
307
+ }
308
+ }
309
+ );
310
+ var spotlight = (position) => /* @__PURE__ */ jsxRuntime.jsx(
311
+ "div",
312
+ {
313
+ className: cn(
314
+ "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
315
+ position === "left" ? "-left-1/4" : "-right-1/4"
316
+ ),
317
+ style: {
318
+ background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
319
+ }
320
+ }
321
+ );
322
+ var patternOverlays = {
323
+ circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
324
+ circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
325
+ circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
326
+ circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
327
+ circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
328
+ circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
329
+ circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
330
+ circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
331
+ dashedGridBasic: () => dashedGridPattern(),
332
+ dashedGridFadeTop: () => dashedGridPattern(maskTop),
333
+ dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
334
+ dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
335
+ dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
336
+ dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
337
+ dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
338
+ dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
339
+ diagonalCrossBasic: () => diagonalCrossPattern(),
340
+ diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
341
+ diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
342
+ diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
343
+ diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
344
+ diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
345
+ diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
346
+ diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
347
+ gridBasic: () => gridPattern(40),
348
+ gridFadeTop: () => gridPattern(32, maskTop),
349
+ gridFadeBottom: () => gridPattern(32, maskBottom),
350
+ gridFadeCenter: () => gridPattern(40, maskCenter),
351
+ gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
352
+ gridFadeTopRight: () => gridPattern(32, maskTopRight),
353
+ gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
354
+ gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
355
+ gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
356
+ gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
357
+ gradientGlowTop: () => gradientGlow("top"),
358
+ gradientGlowBottom: () => gradientGlow("bottom"),
359
+ spotlightLeft: () => spotlight("left"),
360
+ spotlightRight: () => spotlight("right")
361
+ };
362
+ var inlinePatternStyles = {
363
+ radialGradientTop: {
364
+ background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
365
+ },
366
+ radialGradientBottom: {
367
+ background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
368
+ }
369
+ };
370
+ function PatternBackground({
371
+ pattern,
372
+ opacity = 0.08,
373
+ className,
374
+ style
375
+ }) {
376
+ if (!pattern) {
377
+ return null;
378
+ }
379
+ if (pattern in inlinePatternStyles) {
380
+ const inlineStyle = inlinePatternStyles[pattern];
381
+ return /* @__PURE__ */ jsxRuntime.jsx(
382
+ "div",
383
+ {
384
+ className: cn("pointer-events-none absolute inset-0 z-0", className),
385
+ style: { ...inlineStyle, opacity, ...style },
386
+ "aria-hidden": "true"
387
+ }
388
+ );
389
+ }
390
+ if (pattern in patternOverlays) {
391
+ const Overlay = patternOverlays[pattern];
392
+ return /* @__PURE__ */ jsxRuntime.jsx(
393
+ "div",
394
+ {
395
+ className: cn("pointer-events-none absolute inset-0 z-0", className),
396
+ style: { opacity, ...style },
397
+ "aria-hidden": "true",
398
+ children: Overlay()
399
+ }
400
+ );
401
+ }
402
+ const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
403
+ return /* @__PURE__ */ jsxRuntime.jsx(
404
+ "div",
405
+ {
406
+ className: cn("pointer-events-none absolute inset-0 z-0", className),
407
+ style: {
408
+ backgroundImage: `url(${patternUrl})`,
409
+ backgroundRepeat: "repeat",
410
+ backgroundSize: "auto",
411
+ opacity,
412
+ ...style
413
+ },
414
+ "aria-hidden": "true"
415
+ }
416
+ );
417
+ }
418
+ var backgroundStyles = {
419
+ default: "bg-background text-foreground",
420
+ white: "bg-white text-dark",
421
+ gray: "bg-muted/30 text-foreground",
422
+ dark: "bg-foreground text-background",
423
+ transparent: "bg-transparent text-foreground",
424
+ gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
425
+ primary: "bg-primary text-primary-foreground",
426
+ secondary: "bg-secondary text-secondary-foreground",
427
+ muted: "bg-muted text-muted-foreground"
428
+ };
429
+ var spacingStyles = {
430
+ none: "py-0 md:py-0",
431
+ sm: "py-12 md:py-16",
432
+ md: "py-16 md:py-24",
433
+ lg: "py-20 md:py-32",
434
+ xl: "py-24 md:py-40"
435
+ };
436
+ var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
437
+ var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
438
+ var Section = React3__namespace.default.forwardRef(
439
+ ({
440
+ id,
441
+ title,
442
+ subtitle,
443
+ children,
444
+ className,
445
+ style,
446
+ background = "default",
447
+ spacing = "lg",
448
+ pattern,
449
+ patternOpacity,
450
+ patternClassName,
451
+ containerClassName,
452
+ containerMaxWidth = "xl",
453
+ ...props
454
+ }, ref) => {
455
+ const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
456
+ return /* @__PURE__ */ jsxRuntime.jsxs(
457
+ "section",
458
+ {
459
+ ref,
460
+ id,
461
+ className: cn(
462
+ "relative",
463
+ pattern ? "overflow-hidden" : null,
464
+ backgroundStyles[background],
465
+ isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
466
+ className
467
+ ),
468
+ style,
469
+ ...props,
470
+ children: [
471
+ /* @__PURE__ */ jsxRuntime.jsx(
472
+ PatternBackground,
473
+ {
474
+ pattern,
475
+ opacity: effectivePatternOpacity,
476
+ className: patternClassName
477
+ }
478
+ ),
479
+ /* @__PURE__ */ jsxRuntime.jsxs(
480
+ Container,
481
+ {
482
+ maxWidth: containerMaxWidth,
483
+ className: cn("relative z-10", containerClassName),
484
+ children: [
485
+ (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
486
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
487
+ title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
488
+ ] }),
489
+ children
490
+ ]
491
+ }
492
+ )
493
+ ]
494
+ }
495
+ );
496
+ }
497
+ );
498
+ Section.displayName = "Section";
499
+ var baseStyles = [
500
+ // Layout
501
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
502
+ // Typography - using CSS variables with sensible defaults
503
+ "font-[var(--button-font-family,inherit)]",
504
+ "font-[var(--button-font-weight,500)]",
505
+ "tracking-[var(--button-letter-spacing,0)]",
506
+ "leading-[var(--button-line-height,1.25)]",
507
+ "[text-transform:var(--button-text-transform,none)]",
508
+ "text-sm",
509
+ // Border radius
510
+ "rounded-[var(--button-radius,var(--radius,0.375rem))]",
511
+ // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
512
+ "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
513
+ // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
514
+ "[box-shadow:var(--button-shadow,none)]",
515
+ "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
516
+ // Disabled state
517
+ "disabled:pointer-events-none disabled:opacity-50",
518
+ // SVG handling
519
+ "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
520
+ // Focus styles
521
+ "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
522
+ // Invalid state
523
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
524
+ ].join(" ");
525
+ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
526
+ variants: {
527
+ variant: {
528
+ // Default (Primary) variant - full customization
529
+ default: [
530
+ "bg-[var(--button-default-bg,hsl(var(--primary)))]",
531
+ "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
532
+ "border-[length:var(--button-default-border-width,0px)]",
533
+ "border-[color:var(--button-default-border,transparent)]",
534
+ "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
535
+ "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
536
+ "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
537
+ "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
538
+ "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
539
+ ].join(" "),
540
+ // Destructive variant - full customization
541
+ destructive: [
542
+ "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
543
+ "text-[var(--button-destructive-fg,white)]",
544
+ "border-[length:var(--button-destructive-border-width,0px)]",
545
+ "border-[color:var(--button-destructive-border,transparent)]",
546
+ "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
547
+ "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
548
+ "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
549
+ "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
550
+ "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
551
+ "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
552
+ "dark:bg-destructive/60"
553
+ ].join(" "),
554
+ // Outline variant - full customization with proper border handling
555
+ outline: [
556
+ "bg-[var(--button-outline-bg,hsl(var(--background)))]",
557
+ "text-[var(--button-outline-fg,inherit)]",
558
+ "border-[length:var(--button-outline-border-width,1px)]",
559
+ "border-[color:var(--button-outline-border,hsl(var(--border)))]",
560
+ "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
561
+ "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
562
+ "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
563
+ "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
564
+ "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
565
+ "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
566
+ ].join(" "),
567
+ // Secondary variant - full customization
568
+ secondary: [
569
+ "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
570
+ "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
571
+ "border-[length:var(--button-secondary-border-width,0px)]",
572
+ "border-[color:var(--button-secondary-border,transparent)]",
573
+ "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
574
+ "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
575
+ "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
576
+ "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
577
+ "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
578
+ ].join(" "),
579
+ // Ghost variant - full customization
580
+ ghost: [
581
+ "bg-[var(--button-ghost-bg,transparent)]",
582
+ "text-[var(--button-ghost-fg,inherit)]",
583
+ "border-[length:var(--button-ghost-border-width,0px)]",
584
+ "border-[color:var(--button-ghost-border,transparent)]",
585
+ "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
586
+ "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
587
+ "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
588
+ "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
589
+ "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
590
+ "dark:hover:bg-accent/50"
591
+ ].join(" "),
592
+ // Link variant - full customization
593
+ link: [
594
+ "bg-[var(--button-link-bg,transparent)]",
595
+ "text-[var(--button-link-fg,hsl(var(--primary)))]",
596
+ "border-[length:var(--button-link-border-width,0px)]",
597
+ "border-[color:var(--button-link-border,transparent)]",
598
+ "[box-shadow:var(--button-link-shadow,none)]",
599
+ "hover:bg-[var(--button-link-hover-bg,transparent)]",
600
+ "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
601
+ "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
602
+ "underline-offset-4 hover:underline"
603
+ ].join(" ")
604
+ },
605
+ size: {
606
+ default: [
607
+ "h-[var(--button-height-md,2.25rem)]",
608
+ "px-[var(--button-padding-x-md,1rem)]",
609
+ "py-[var(--button-padding-y-md,0.5rem)]",
610
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
611
+ ].join(" "),
612
+ sm: [
613
+ "h-[var(--button-height-sm,2rem)]",
614
+ "px-[var(--button-padding-x-sm,0.75rem)]",
615
+ "py-[var(--button-padding-y-sm,0.25rem)]",
616
+ "gap-1.5",
617
+ "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
618
+ ].join(" "),
619
+ md: [
620
+ "h-[var(--button-height-md,2.25rem)]",
621
+ "px-[var(--button-padding-x-md,1rem)]",
622
+ "py-[var(--button-padding-y-md,0.5rem)]",
623
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
624
+ ].join(" "),
625
+ lg: [
626
+ "h-[var(--button-height-lg,2.5rem)]",
627
+ "px-[var(--button-padding-x-lg,1.5rem)]",
628
+ "py-[var(--button-padding-y-lg,0.5rem)]",
629
+ "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
630
+ ].join(" "),
631
+ icon: "size-[var(--button-height-md,2.25rem)]",
632
+ "icon-sm": "size-[var(--button-height-sm,2rem)]",
633
+ "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
634
+ }
635
+ },
636
+ defaultVariants: {
637
+ variant: "default",
638
+ size: "default"
639
+ }
640
+ });
641
+ var badgeVariants = classVarianceAuthority.cva(
642
+ "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
643
+ {
644
+ variants: {
645
+ variant: {
646
+ default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
647
+ secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
648
+ destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
649
+ outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
650
+ }
651
+ },
652
+ defaultVariants: {
653
+ variant: "default"
654
+ }
655
+ }
656
+ );
657
+ function Badge({
658
+ className,
659
+ variant,
660
+ asChild = false,
661
+ ...props
662
+ }) {
663
+ const Comp = asChild ? reactSlot.Slot : "span";
664
+ return /* @__PURE__ */ jsxRuntime.jsx(
665
+ Comp,
666
+ {
667
+ "data-slot": "badge",
668
+ className: cn(badgeVariants({ variant }), className),
669
+ ...props
670
+ }
671
+ );
672
+ }
673
+ function normalizePhoneNumber(input) {
674
+ const trimmed = input.trim();
675
+ if (trimmed.toLowerCase().startsWith("tel:")) {
676
+ return trimmed;
677
+ }
678
+ const match = trimmed.match(/^[\s\+\-\(\)]*(\d[\d\s\-\(\)\.]*\d)[\s\-]*(x|ext\.?|extension)?[\s\-]*(\d+)?$/i);
679
+ if (match) {
680
+ const mainNumber = match[1].replace(/[\s\-\(\)\.]/g, "");
681
+ const extension = match[3];
682
+ const normalized = mainNumber.length >= 10 && !trimmed.startsWith("+") ? `+${mainNumber}` : mainNumber;
683
+ const withExtension = extension ? `${normalized};ext=${extension}` : normalized;
684
+ return `tel:${withExtension}`;
685
+ }
686
+ const cleaned = trimmed.replace(/[\s\-\(\)\.]/g, "");
687
+ return `tel:${cleaned}`;
688
+ }
689
+ function normalizeEmail(input) {
690
+ const trimmed = input.trim();
691
+ if (trimmed.toLowerCase().startsWith("mailto:")) {
692
+ return trimmed;
693
+ }
694
+ return `mailto:${trimmed}`;
695
+ }
696
+ function isEmail(input) {
697
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
698
+ return emailRegex.test(input.trim());
699
+ }
700
+ function isPhoneNumber(input) {
701
+ const trimmed = input.trim();
702
+ if (trimmed.toLowerCase().startsWith("tel:")) {
703
+ return true;
704
+ }
705
+ const phoneRegex = /^[\s\+\-\(\)]*\d[\d\s\-\(\)\.]*\d[\s\-]*(x|ext\.?|extension)?[\s\-]*\d*$/i;
706
+ return phoneRegex.test(trimmed);
707
+ }
708
+ function isInternalUrl(href) {
709
+ if (typeof window === "undefined") {
710
+ return href.startsWith("/") && !href.startsWith("//");
711
+ }
712
+ const trimmed = href.trim();
713
+ if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
714
+ return true;
715
+ }
716
+ try {
717
+ const url = new URL(trimmed, window.location.href);
718
+ const currentOrigin = window.location.origin;
719
+ const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
720
+ return normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin);
721
+ } catch {
722
+ return false;
723
+ }
724
+ }
725
+ function toRelativePath(href) {
726
+ if (typeof window === "undefined") {
727
+ return href;
728
+ }
729
+ const trimmed = href.trim();
730
+ if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
731
+ return trimmed;
732
+ }
733
+ try {
734
+ const url = new URL(trimmed, window.location.href);
735
+ const currentOrigin = window.location.origin;
736
+ const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
737
+ if (normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin)) {
738
+ return url.pathname + url.search + url.hash;
739
+ }
740
+ } catch {
741
+ }
742
+ return trimmed;
743
+ }
744
+ function useNavigation({
745
+ href,
746
+ onClick
747
+ } = {}) {
748
+ const linkType = React3__namespace.useMemo(() => {
749
+ if (!href || href.trim() === "") {
750
+ return onClick ? "none" : "none";
751
+ }
752
+ const trimmed = href.trim();
753
+ if (trimmed.toLowerCase().startsWith("mailto:") || isEmail(trimmed)) {
754
+ return "mailto";
755
+ }
756
+ if (trimmed.toLowerCase().startsWith("tel:") || isPhoneNumber(trimmed)) {
757
+ return "tel";
758
+ }
759
+ if (isInternalUrl(trimmed)) {
760
+ return "internal";
761
+ }
762
+ try {
763
+ new URL(trimmed, typeof window !== "undefined" ? window.location.href : "http://localhost");
764
+ return "external";
765
+ } catch {
766
+ return "internal";
767
+ }
768
+ }, [href, onClick]);
769
+ const normalizedHref = React3__namespace.useMemo(() => {
770
+ if (!href || href.trim() === "") {
771
+ return void 0;
772
+ }
773
+ const trimmed = href.trim();
774
+ switch (linkType) {
775
+ case "tel":
776
+ return normalizePhoneNumber(trimmed);
777
+ case "mailto":
778
+ return normalizeEmail(trimmed);
779
+ case "internal":
780
+ return toRelativePath(trimmed);
781
+ case "external":
782
+ return trimmed;
783
+ default:
784
+ return trimmed;
785
+ }
786
+ }, [href, linkType]);
787
+ const target = React3__namespace.useMemo(() => {
788
+ switch (linkType) {
789
+ case "external":
790
+ return "_blank";
791
+ case "internal":
792
+ return "_self";
793
+ case "mailto":
794
+ case "tel":
795
+ return void 0;
796
+ default:
797
+ return void 0;
798
+ }
799
+ }, [linkType]);
800
+ const rel = React3__namespace.useMemo(() => {
801
+ if (linkType === "external") {
802
+ return "noopener noreferrer";
803
+ }
804
+ return void 0;
805
+ }, [linkType]);
806
+ const isExternal = linkType === "external";
807
+ const isInternal = linkType === "internal";
808
+ const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
809
+ const handleClick = React3__namespace.useCallback(
810
+ (event) => {
811
+ if (onClick) {
812
+ try {
813
+ onClick(event);
814
+ } catch (error) {
815
+ console.error("Error in user onClick handler:", error);
816
+ }
817
+ }
818
+ if (event.defaultPrevented) {
819
+ return;
820
+ }
821
+ if (shouldUseRouter && normalizedHref && event.button === 0 && // left-click only
822
+ !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey) {
823
+ if (typeof window !== "undefined") {
824
+ const handler = window.__opensiteNavigationHandler;
825
+ if (typeof handler === "function") {
826
+ try {
827
+ const handled = handler(normalizedHref, event.nativeEvent || event);
828
+ if (handled !== false) {
829
+ event.preventDefault();
830
+ }
831
+ } catch (error) {
832
+ console.error("Error in navigation handler:", error);
833
+ }
834
+ }
835
+ }
836
+ }
837
+ },
838
+ [onClick, shouldUseRouter, normalizedHref]
839
+ );
840
+ return {
841
+ linkType,
842
+ normalizedHref,
843
+ target,
844
+ rel,
845
+ isExternal,
846
+ isInternal,
847
+ shouldUseRouter,
848
+ handleClick
849
+ };
850
+ }
851
+ var Pressable = React3__namespace.forwardRef(
852
+ ({
853
+ children,
854
+ className,
855
+ href,
856
+ onClick,
857
+ variant,
858
+ size,
859
+ asButton = false,
860
+ fallbackComponentType = "span",
861
+ componentType,
862
+ "aria-label": ariaLabel,
863
+ "aria-describedby": ariaDescribedby,
864
+ id,
865
+ ...props
866
+ }, ref) => {
867
+ const navigation = useNavigation({ href, onClick });
868
+ const {
869
+ normalizedHref,
870
+ target,
871
+ rel,
872
+ linkType,
873
+ isInternal,
874
+ handleClick
875
+ } = navigation;
876
+ const shouldRenderLink = normalizedHref && linkType !== "none";
877
+ const shouldRenderButton = !shouldRenderLink && onClick;
878
+ const effectiveComponentType = componentType || (shouldRenderLink ? "a" : shouldRenderButton ? "button" : fallbackComponentType);
879
+ const finalComponentType = isInternal && shouldRenderLink ? "a" : effectiveComponentType;
880
+ const shouldApplyButtonStyles = asButton || variant || size;
881
+ const combinedClassName = cn(
882
+ shouldApplyButtonStyles && buttonVariants({ variant, size }),
883
+ className
884
+ );
885
+ const dataProps = Object.fromEntries(
886
+ Object.entries(props).filter(([key]) => key.startsWith("data-"))
887
+ );
888
+ const buttonDataAttributes = shouldApplyButtonStyles ? {
889
+ "data-slot": "button",
890
+ "data-variant": variant ?? "default",
891
+ "data-size": size ?? "default"
892
+ } : {};
893
+ const commonProps = {
894
+ className: combinedClassName,
895
+ onClick: handleClick,
896
+ "aria-label": ariaLabel,
897
+ "aria-describedby": ariaDescribedby,
898
+ id,
899
+ ...dataProps,
900
+ ...buttonDataAttributes
901
+ };
902
+ if (finalComponentType === "a" && shouldRenderLink) {
903
+ return /* @__PURE__ */ jsxRuntime.jsx(
904
+ "a",
905
+ {
906
+ ref,
907
+ href: normalizedHref,
908
+ target,
909
+ rel,
910
+ ...commonProps,
911
+ ...props,
912
+ children
913
+ }
914
+ );
915
+ }
916
+ if (finalComponentType === "button") {
917
+ return /* @__PURE__ */ jsxRuntime.jsx(
918
+ "button",
919
+ {
920
+ ref,
921
+ type: props.type || "button",
922
+ ...commonProps,
923
+ ...props,
924
+ children
925
+ }
926
+ );
754
927
  }
755
- }
756
- );
757
- var spotlight = (position) => /* @__PURE__ */ jsxRuntime.jsx(
758
- "div",
759
- {
760
- className: cn(
761
- "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
762
- position === "left" ? "-left-1/4" : "-right-1/4"
763
- ),
764
- style: {
765
- background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
928
+ if (finalComponentType === "div") {
929
+ return /* @__PURE__ */ jsxRuntime.jsx(
930
+ "div",
931
+ {
932
+ ref,
933
+ ...commonProps,
934
+ children
935
+ }
936
+ );
766
937
  }
767
- }
768
- );
769
- var patternOverlays = {
770
- circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
771
- circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
772
- circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
773
- circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
774
- circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
775
- circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
776
- circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
777
- circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
778
- dashedGridBasic: () => dashedGridPattern(),
779
- dashedGridFadeTop: () => dashedGridPattern(maskTop),
780
- dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
781
- dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
782
- dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
783
- dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
784
- dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
785
- dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
786
- diagonalCrossBasic: () => diagonalCrossPattern(),
787
- diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
788
- diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
789
- diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
790
- diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
791
- diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
792
- diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
793
- diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
794
- gridBasic: () => gridPattern(40),
795
- gridFadeTop: () => gridPattern(32, maskTop),
796
- gridFadeBottom: () => gridPattern(32, maskBottom),
797
- gridFadeCenter: () => gridPattern(40, maskCenter),
798
- gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
799
- gridFadeTopRight: () => gridPattern(32, maskTopRight),
800
- gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
801
- gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
802
- gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
803
- gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
804
- gradientGlowTop: () => gradientGlow("top"),
805
- gradientGlowBottom: () => gradientGlow("bottom"),
806
- spotlightLeft: () => spotlight("left"),
807
- spotlightRight: () => spotlight("right")
808
- };
809
- var inlinePatternStyles = {
810
- radialGradientTop: {
811
- background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
812
- },
813
- radialGradientBottom: {
814
- background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
815
- }
816
- };
817
- function PatternBackground({
818
- pattern,
819
- opacity = 0.08,
820
- className,
821
- style
822
- }) {
823
- if (!pattern) {
824
- return null;
825
- }
826
- if (pattern in inlinePatternStyles) {
827
- const inlineStyle = inlinePatternStyles[pattern];
828
938
  return /* @__PURE__ */ jsxRuntime.jsx(
829
- "div",
939
+ "span",
830
940
  {
831
- className: cn("pointer-events-none absolute inset-0 z-0", className),
832
- style: { ...inlineStyle, opacity, ...style },
833
- "aria-hidden": "true"
941
+ ref,
942
+ ...commonProps,
943
+ children
834
944
  }
835
945
  );
836
946
  }
837
- if (pattern in patternOverlays) {
838
- const Overlay = patternOverlays[pattern];
947
+ );
948
+ Pressable.displayName = "Pressable";
949
+ var MOBILE_CLASSES = {
950
+ "fit-left": "items-start md:items-center",
951
+ "fit-center": "items-center",
952
+ "fit-right": "items-end md:items-center",
953
+ "full-left": "items-stretch md:items-center",
954
+ "full-center": "items-stretch md:items-center",
955
+ "full-right": "items-stretch md:items-center"
956
+ };
957
+ function BlockActions({
958
+ mobileConfig,
959
+ actionsClassName,
960
+ verticalSpacing = "mt-4 md:mt-8",
961
+ actions,
962
+ actionsSlot
963
+ }) {
964
+ const width = mobileConfig?.width ?? "full";
965
+ const position = mobileConfig?.position ?? "center";
966
+ const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
967
+ if (actionsSlot) {
968
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
969
+ } else if (actions && actions?.length > 0) {
839
970
  return /* @__PURE__ */ jsxRuntime.jsx(
840
971
  "div",
841
972
  {
842
- className: cn("pointer-events-none absolute inset-0 z-0", className),
843
- style: { opacity, ...style },
844
- "aria-hidden": "true",
845
- children: Overlay()
973
+ className: cn(
974
+ "flex flex-col md:flex-row flex-wrap gap-4",
975
+ mobileLayoutClass,
976
+ actionsClassName,
977
+ verticalSpacing
978
+ ),
979
+ children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
846
980
  }
847
981
  );
982
+ } else {
983
+ return null;
848
984
  }
849
- const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
985
+ }
986
+ function ActionComponent({ action }) {
987
+ const {
988
+ label,
989
+ icon,
990
+ iconAfter,
991
+ children,
992
+ href,
993
+ onClick,
994
+ className: actionClassName,
995
+ ...pressableProps
996
+ } = action;
850
997
  return /* @__PURE__ */ jsxRuntime.jsx(
851
- "div",
998
+ Pressable,
852
999
  {
853
- className: cn("pointer-events-none absolute inset-0 z-0", className),
854
- style: {
855
- backgroundImage: `url(${patternUrl})`,
856
- backgroundRepeat: "repeat",
857
- backgroundSize: "auto",
858
- opacity,
859
- ...style
860
- },
861
- "aria-hidden": "true"
1000
+ href,
1001
+ onClick,
1002
+ asButton: action.asButton ?? true,
1003
+ className: actionClassName,
1004
+ ...pressableProps,
1005
+ children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1006
+ icon,
1007
+ label,
1008
+ iconAfter
1009
+ ] })
862
1010
  }
863
1011
  );
864
1012
  }
865
- var backgroundStyles = {
866
- default: "bg-background text-foreground",
867
- white: "bg-white text-dark",
868
- gray: "bg-muted/30 text-foreground",
869
- dark: "bg-foreground text-background",
870
- transparent: "bg-transparent text-foreground",
871
- gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
872
- primary: "bg-primary text-primary-foreground",
873
- secondary: "bg-secondary text-secondary-foreground",
874
- muted: "bg-muted text-muted-foreground"
875
- };
876
- var spacingStyles = {
877
- none: "py-0 md:py-0",
878
- sm: "py-12 md:py-16",
879
- md: "py-16 md:py-24",
880
- lg: "py-20 md:py-32",
881
- xl: "py-24 md:py-40"
882
- };
883
- var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
884
- var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
885
- var Section = React__namespace.default.forwardRef(
886
- ({
887
- id,
888
- title,
889
- subtitle,
890
- children,
891
- className,
892
- style,
893
- background = "default",
894
- spacing = "lg",
895
- pattern,
896
- patternOpacity,
897
- patternClassName,
898
- containerClassName,
899
- containerMaxWidth = "xl",
900
- ...props
901
- }, ref) => {
902
- const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
903
- return /* @__PURE__ */ jsxRuntime.jsxs(
904
- "section",
905
- {
906
- ref,
907
- id,
908
- className: cn(
909
- "relative",
910
- pattern ? "overflow-hidden" : null,
911
- backgroundStyles[background],
912
- isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
913
- className
914
- ),
915
- style,
916
- ...props,
917
- children: [
918
- /* @__PURE__ */ jsxRuntime.jsx(
919
- PatternBackground,
920
- {
921
- pattern,
922
- opacity: effectivePatternOpacity,
923
- className: patternClassName
924
- }
925
- ),
926
- /* @__PURE__ */ jsxRuntime.jsxs(
927
- Container,
928
- {
929
- maxWidth: containerMaxWidth,
930
- className: cn("relative z-10", containerClassName),
931
- children: [
932
- (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
933
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
934
- title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
935
- ] }),
936
- children
937
- ]
938
- }
939
- )
940
- ]
941
- }
942
- );
943
- }
944
- );
945
- Section.displayName = "Section";
946
1013
  function AboutCultureTabs({
947
1014
  badgeText,
948
1015
  heading,
@@ -956,7 +1023,7 @@ function AboutCultureTabs({
956
1023
  ctaImages,
957
1024
  ctaImagesSlot,
958
1025
  className,
959
- containerClassName,
1026
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
960
1027
  headerClassName,
961
1028
  badgeClassName,
962
1029
  headingClassName,
@@ -968,45 +1035,33 @@ function AboutCultureTabs({
968
1035
  actionsClassName,
969
1036
  optixFlowConfig,
970
1037
  background,
971
- spacing,
1038
+ spacing = "xl",
972
1039
  pattern,
973
1040
  patternOpacity
974
1041
  }) {
975
1042
  const resolvedAspects = aspects ?? [];
976
- const [activeTab, setActiveTab] = React__namespace.useState(resolvedAspects[0]?.id || "");
977
- const actionsContent = React.useMemo(() => {
978
- if (actionsSlot) return actionsSlot;
979
- if (!actions || actions.length === 0) return null;
980
- return actions.map((action, index) => {
981
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
982
- return /* @__PURE__ */ jsxRuntime.jsx(
983
- Pressable,
984
- {
985
- asButton: true,
986
- className: actionClassName,
987
- ...pressableProps,
988
- children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
989
- icon,
990
- label,
991
- iconAfter
992
- ] })
993
- },
994
- index
995
- );
996
- });
997
- }, [actionsSlot, actions]);
998
- const ctaImagesContent = React.useMemo(() => {
1043
+ const [activeTab, setActiveTab] = React3__namespace.useState(
1044
+ resolvedAspects[0]?.id || ""
1045
+ );
1046
+ const ctaImagesContent = React3.useMemo(() => {
999
1047
  if (ctaImagesSlot) return ctaImagesSlot;
1000
1048
  if (!ctaImages || ctaImages.length === 0) return null;
1001
- return ctaImages.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-square overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(
1002
- img.Img,
1049
+ return ctaImages.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx(
1050
+ "div",
1003
1051
  {
1004
- src,
1005
- alt: "Team culture",
1006
- className: "h-full w-full object-cover",
1007
- optixFlowConfig
1008
- }
1009
- ) }, i));
1052
+ className: "relative aspect-square overflow-hidden rounded-md",
1053
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1054
+ img.Img,
1055
+ {
1056
+ src,
1057
+ alt: "Team culture",
1058
+ className: "h-full w-full object-cover",
1059
+ optixFlowConfig
1060
+ }
1061
+ )
1062
+ },
1063
+ i
1064
+ ));
1010
1065
  }, [ctaImagesSlot, ctaImages, optixFlowConfig]);
1011
1066
  return /* @__PURE__ */ jsxRuntime.jsxs(
1012
1067
  Section,
@@ -1015,14 +1070,32 @@ function AboutCultureTabs({
1015
1070
  spacing,
1016
1071
  pattern,
1017
1072
  patternOpacity,
1018
- className: cn(className),
1073
+ className,
1019
1074
  containerClassName,
1020
1075
  children: [
1021
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 max-w-3xl space-y-4 text-center", headerClassName), children: [
1022
- badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm", getAccentColor(background), badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
1023
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
1024
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
1025
- ] }),
1076
+ /* @__PURE__ */ jsxRuntime.jsxs(
1077
+ "div",
1078
+ {
1079
+ className: cn(
1080
+ "mx-auto mb-12 max-w-full md:max-w-md space-y-4 text-center flex flex-col items-center justify-center",
1081
+ headerClassName
1082
+ ),
1083
+ children: [
1084
+ badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3 py-1", badgeClassName), children: badgeText }) : badgeText),
1085
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1086
+ "h2",
1087
+ {
1088
+ className: cn(
1089
+ "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
1090
+ headingClassName
1091
+ ),
1092
+ children: heading
1093
+ }
1094
+ ) : heading),
1095
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
1096
+ ]
1097
+ }
1098
+ ),
1026
1099
  aspectsSlot ? aspectsSlot : resolvedAspects.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
1027
1100
  Tabs,
1028
1101
  {
@@ -1035,80 +1108,103 @@ function AboutCultureTabs({
1035
1108
  TabsTrigger,
1036
1109
  {
1037
1110
  value: aspect.id,
1038
- className: cn("px-3 py-2.5", `data-[state=active]:${getAccentColor(background)}`, "data-[state=active]:text-primary-foreground"),
1111
+ className: cn("px-3 py-2.5"),
1039
1112
  children: aspect.title
1040
1113
  },
1041
1114
  aspect.id
1042
1115
  )) }) }),
1043
- resolvedAspects.map((aspect) => /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: aspect.id, className: "space-y-8", children: [
1044
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
1045
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1046
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
1047
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: aspect.description })
1048
- ] }),
1049
- /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 bg-gradient-to-br from-primary/5 to-primary/10 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
1050
- /* @__PURE__ */ jsxRuntime.jsx(
1051
- DynamicIcon,
1052
- {
1053
- name: "lucide/quote",
1054
- size: 32,
1055
- className: cn(getAccentColor(background), "opacity-40")
1056
- }
1057
- ),
1058
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("italic", getTextColor(background, "muted")), children: [
1059
- '"',
1060
- aspect.testimonial.quote,
1061
- '"'
1116
+ resolvedAspects.map((aspect) => /* @__PURE__ */ jsxRuntime.jsxs(
1117
+ TabsContent,
1118
+ {
1119
+ value: aspect.id,
1120
+ className: "space-y-8",
1121
+ children: [
1122
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
1123
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1124
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
1125
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed"), children: aspect.description })
1126
+ ] }),
1127
+ /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
1128
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/quote", size: 32 }),
1129
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "italic", children: [
1130
+ '"',
1131
+ aspect.testimonial.quote,
1132
+ '"'
1133
+ ] }),
1134
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
1135
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
1136
+ img.Img,
1137
+ {
1138
+ src: aspect.testimonial.avatar,
1139
+ alt: aspect.testimonial.author,
1140
+ className: "h-full w-full object-cover",
1141
+ optixFlowConfig
1142
+ }
1143
+ ) }),
1144
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1145
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
1146
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: aspect.testimonial.role })
1147
+ ] })
1148
+ ] })
1149
+ ] }) })
1062
1150
  ] }),
1063
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
1064
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
1065
- img.Img,
1066
- {
1067
- src: aspect.testimonial.avatar,
1068
- alt: aspect.testimonial.author,
1069
- className: "h-full w-full object-cover",
1070
- optixFlowConfig
1071
- }
1072
- ) }),
1073
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1074
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
1075
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs", getTextColor(background, "muted")), children: aspect.testimonial.role })
1076
- ] })
1077
- ] })
1078
- ] }) })
1079
- ] }),
1080
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
1081
- "div",
1082
- {
1083
- className: "relative aspect-[4/3] overflow-hidden rounded-lg",
1084
- children: /* @__PURE__ */ jsxRuntime.jsx(
1085
- img.Img,
1151
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
1152
+ "div",
1086
1153
  {
1087
- src: image,
1088
- alt: `${aspect.title} culture`,
1089
- className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
1090
- optixFlowConfig
1091
- }
1092
- )
1093
- },
1094
- idx
1095
- )) })
1096
- ] }, aspect.id))
1154
+ className: "relative aspect-4/3 overflow-hidden rounded-lg",
1155
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1156
+ img.Img,
1157
+ {
1158
+ src: image,
1159
+ alt: `${aspect.title} culture`,
1160
+ className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
1161
+ optixFlowConfig
1162
+ }
1163
+ )
1164
+ },
1165
+ idx
1166
+ )) })
1167
+ ]
1168
+ },
1169
+ aspect.id
1170
+ ))
1097
1171
  ]
1098
1172
  }
1099
1173
  ) : null,
1100
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-16 rounded-xl border bg-background p-8 md:p-12", ctaClassName), children: [
1101
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
1102
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1103
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
1104
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", getTextColor(background, "muted"), ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
1105
- (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-4", actionsClassName), children: actionsContent })
1106
- ] }),
1107
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
1108
- ] }),
1109
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
1110
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
1111
- ] })
1174
+ /* @__PURE__ */ jsxRuntime.jsxs(
1175
+ "div",
1176
+ {
1177
+ className: cn(
1178
+ "relative mt-16 rounded-xl border p-8 md:p-12",
1179
+ ctaClassName
1180
+ ),
1181
+ children: [
1182
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
1183
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1184
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1185
+ "h3",
1186
+ {
1187
+ className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName),
1188
+ children: ctaHeading
1189
+ }
1190
+ ) : ctaHeading),
1191
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
1192
+ /* @__PURE__ */ jsxRuntime.jsx(
1193
+ BlockActions,
1194
+ {
1195
+ actions,
1196
+ actionsSlot,
1197
+ actionsClassName
1198
+ }
1199
+ )
1200
+ ] }),
1201
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
1202
+ ] }),
1203
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
1204
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
1205
+ ]
1206
+ }
1207
+ )
1112
1208
  ]
1113
1209
  }
1114
1210
  );