@rxdrag/website-lib-react 0.0.3 → 0.0.6

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 (97) hide show
  1. package/dist/ReactModalTrigger-9207e763.js +26 -0
  2. package/dist/ReactModalTrigger-9207e763.js.map +1 -0
  3. package/dist/components/RichTextOutline/parseOutline.d.ts +5 -0
  4. package/dist/components/all.d.ts +0 -21
  5. package/dist/components/index.d.ts +0 -5
  6. package/dist/forms.d.ts +1 -0
  7. package/dist/forms.mjs +1647 -0
  8. package/dist/forms.mjs.map +1 -0
  9. package/dist/index.mjs +9 -3918
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/jsx-runtime-c02cc059.js +325 -0
  12. package/dist/jsx-runtime-c02cc059.js.map +1 -0
  13. package/dist/media.d.ts +1 -0
  14. package/dist/media.mjs +613 -0
  15. package/dist/media.mjs.map +1 -0
  16. package/dist/richtext.d.ts +1 -0
  17. package/dist/richtext.mjs +191 -0
  18. package/dist/richtext.mjs.map +1 -0
  19. package/dist/ui.d.ts +10 -0
  20. package/dist/ui.mjs +687 -0
  21. package/dist/ui.mjs.map +1 -0
  22. package/dist/video.d.ts +2 -0
  23. package/dist/video.mjs +426 -0
  24. package/dist/video.mjs.map +1 -0
  25. package/forms.ts +1 -0
  26. package/index.ts +1 -0
  27. package/media.ts +1 -0
  28. package/package.json +41 -6
  29. package/richtext.ts +1 -0
  30. package/src/components/Analytics/eventHandlers.ts +173 -0
  31. package/src/components/Analytics/index.tsx +21 -0
  32. package/src/components/Analytics/singleton.ts +214 -0
  33. package/src/components/Analytics/tracking.ts +221 -0
  34. package/src/components/Analytics/types.ts +60 -0
  35. package/src/components/Analytics/utils.ts +95 -0
  36. package/src/components/AttachmentIcon/index.tsx +53 -0
  37. package/src/components/BackgroundHlsVideoPlayer.tsx +97 -0
  38. package/src/components/BackgroundVideoPlayer.tsx +32 -0
  39. package/src/components/Bulletin.tsx +30 -0
  40. package/src/components/ContactForm/ContactForm.tsx +290 -0
  41. package/src/components/ContactForm/FileUpload2.tsx +423 -0
  42. package/src/components/ContactForm/Input.tsx +48 -0
  43. package/src/components/ContactForm/Input2.tsx +59 -0
  44. package/src/components/ContactForm/Submit.tsx +48 -0
  45. package/src/components/ContactForm/TelInput.tsx +215 -0
  46. package/src/components/ContactForm/TelInput2.tsx +213 -0
  47. package/src/components/ContactForm/Textarea.tsx +48 -0
  48. package/src/components/ContactForm/Textarea2.tsx +89 -0
  49. package/src/components/ContactForm/countryDialCodes.ts +243 -0
  50. package/src/components/ContactForm/factory.tsx +60 -0
  51. package/src/components/ContactForm/funcs.ts +64 -0
  52. package/src/components/ContactForm/hooks/useInlineLabelPadding.ts +43 -0
  53. package/src/components/ContactForm/hooks/useTelControl.ts +81 -0
  54. package/src/components/ContactForm/index.ts +7 -0
  55. package/src/components/ContactForm/types.ts +68 -0
  56. package/src/components/Icon/index.tsx +20 -0
  57. package/src/components/Medias/MainMedia.tsx +257 -0
  58. package/src/components/Medias/Thumbnail.tsx +62 -0
  59. package/src/components/Medias/VideoPlayer.tsx +114 -0
  60. package/src/components/Medias/index.tsx +271 -0
  61. package/src/components/ProductCard/ProductCard.tsx +24 -0
  62. package/src/components/ProductCard/ProductCta/index.tsx +28 -0
  63. package/src/components/ProductCard/ProductCta/style.css +4 -0
  64. package/src/components/ProductCard/ProductDescription/index.tsx +13 -0
  65. package/src/components/ProductCard/ProductDescription/style.css +6 -0
  66. package/src/components/ProductCard/ProductMedia/index.tsx +35 -0
  67. package/src/components/ProductCard/ProductMedia/style.css +6 -0
  68. package/src/components/ProductCard/ProductTitle/index.tsx +7 -0
  69. package/src/components/ProductCard/ProductTitle/style.css +4 -0
  70. package/src/components/ProductCard/ProductView.tsx +36 -0
  71. package/src/components/ProductCard/index.ts +5 -0
  72. package/src/components/ProductCard/useQueryProduct.ts +32 -0
  73. package/src/components/ReactModalTrigger.tsx +28 -0
  74. package/src/components/ReactVideoPlayer.tsx +332 -0
  75. package/src/components/RichTextOutline/index.tsx +74 -0
  76. package/src/components/RichTextOutline/parseOutline.ts +63 -0
  77. package/src/components/RichTextOutline/useAcitviedHeading.ts +142 -0
  78. package/src/components/RichTextOutline/useAnchorScroll.ts +24 -0
  79. package/src/components/Scroller.tsx +39 -0
  80. package/src/components/SearchInput.tsx +21 -0
  81. package/src/components/Share/index.tsx +86 -0
  82. package/src/components/Share/socials.tsx +80 -0
  83. package/src/components/Share//350/265/204/346/226/231.md +7 -0
  84. package/src/components/ToTop.tsx +72 -0
  85. package/src/components/VideoPlayIcon.tsx +43 -0
  86. package/src/components/all.ts +25 -0
  87. package/src/components/index.ts +12 -0
  88. package/src/forms.ts +1 -0
  89. package/src/index.ts +1 -0
  90. package/src/media.ts +1 -0
  91. package/src/richtext.ts +1 -0
  92. package/src/types/view-model.ts +37 -0
  93. package/src/ui.ts +10 -0
  94. package/src/video.ts +2 -0
  95. package/ui.ts +1 -0
  96. package/video.ts +1 -0
  97. package/dist/style.css +0 -17
package/dist/index.mjs CHANGED
@@ -1,3919 +1,20 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => {
4
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- return value;
6
- };
7
- import require$$0, { useEffect, forwardRef, useRef, useState, useMemo, useCallback } from "react";
8
- import clsx, { clsx as clsx$1 } from "clsx";
9
- import { Icon as Icon$1 } from "@iconify/react";
10
- import { MediaType } from "@rxdrag/rxcms-models";
11
- import Hls from "hls.js";
12
- import { Figure, FigureContent, Figcaption, mdxToTiptap, extractOutlineFromTiptap } from "@rxdrag/tiptap-preview";
13
- function isDevelopmentEnvironment() {
14
- return window.location.hostname === "localhost" || window.location.hostname.startsWith("192.168.") || window.location.hostname === "127.0.0.1";
15
- }
16
- function createDebugLogger() {
17
- const isDev = isDevelopmentEnvironment();
18
- return function debugLog(...args) {
19
- if (isDev) {
20
- console.log("[Analytics]", ...args);
21
- }
22
- };
23
- }
24
- function generateId(prefix = "v") {
25
- return prefix + Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
26
- }
27
- function setCookie(name, value, days) {
28
- const expires = /* @__PURE__ */ new Date();
29
- expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1e3);
30
- document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
31
- }
32
- function getCookie(name) {
33
- const match = document.cookie.match(
34
- new RegExp("(^| )" + name + "=([^;]+)")
35
- );
36
- return match ? match[2] : null;
37
- }
38
- function getVisitorId() {
39
- let visitorId = getCookie("visitor_id");
40
- if (!visitorId) {
41
- visitorId = generateId("v");
42
- setCookie("visitor_id", visitorId, 365);
43
- }
44
- return visitorId;
45
- }
46
- function getDeviceInfo() {
47
- const ua = navigator.userAgent;
48
- if (/Mobile|Android|iPhone|iPad/.test(ua)) {
49
- return /iPad/.test(ua) ? "tablet" : "mobile";
50
- }
51
- return "desktop";
52
- }
53
- function getPlatform() {
54
- const ua = navigator.userAgent;
55
- if (/Windows/.test(ua))
56
- return "Windows";
57
- if (/Mac/.test(ua))
58
- return "macOS";
59
- if (/Linux/.test(ua))
60
- return "Linux";
61
- if (/Android/.test(ua))
62
- return "Android";
63
- if (/iPhone|iPad/.test(ua))
64
- return "iOS";
65
- return "Unknown";
66
- }
67
- function getBrowserLanguage() {
68
- return navigator.language || navigator.userLanguage || "en";
69
- }
70
- function detectPageType(defaultType = "pageView") {
71
- const currentPath = window.location.pathname.toLowerCase();
72
- if (currentPath.includes("/thanks") || currentPath.includes("/thank-you")) {
73
- return "enquiry";
74
- }
75
- return defaultType;
76
- }
77
- function updateActiveTime(state) {
78
- if (state.isPageVisible) {
79
- const now = Date.now();
80
- state.activeTime += now - state.lastActiveTime;
81
- state.lastActiveTime = now;
82
- }
83
- }
84
- function isRealPageVisit(state) {
85
- const now = Date.now();
86
- if (state.isPageTracked) {
87
- return false;
88
- }
89
- if (state.lastTrackTime > 0 && now - state.lastTrackTime < 1e3) {
90
- return false;
91
- }
92
- if (document.hidden || document.visibilityState === "hidden") {
93
- return false;
94
- }
95
- return true;
96
- }
97
- function processQueue(state, apiEndpoint) {
98
- state.isRequestPending = false;
99
- if (state.requestQueue.length > 0) {
100
- const { data, eventType } = state.requestQueue.shift();
101
- setTimeout(() => {
102
- sendImmediately(data, eventType, state, apiEndpoint);
103
- }, 100);
104
- }
105
- }
106
- function sendImmediately(data, eventType, state, apiEndpoint) {
107
- state.isRequestPending = true;
108
- fetch(apiEndpoint, {
109
- method: "POST",
110
- headers: {
111
- "Content-Type": "application/json",
112
- "X-Requested-With": "XMLHttpRequest"
113
- },
114
- body: JSON.stringify(data),
115
- keepalive: true
116
- }).then(() => {
117
- if (eventType === "pageView") {
118
- state.isPageTracked = true;
119
- state.lastTrackTime = Date.now();
120
- if (typeof window !== "undefined") {
121
- window.__analyticsGlobalState = {
122
- lastPageUrl: window.location.href,
123
- lastTrackTime: Date.now()
124
- };
125
- }
126
- }
127
- processQueue(state, apiEndpoint);
128
- }).catch(() => {
129
- processQueue(state, apiEndpoint);
130
- });
131
- }
132
- function sendTrackingData(data, eventType, state, apiEndpoint) {
133
- if (eventType === "pageLeave") {
134
- sendImmediately(data, eventType, state, apiEndpoint);
135
- return;
136
- }
137
- if (state.isRequestPending) {
138
- state.requestQueue.push({ data, eventType });
139
- return;
140
- }
141
- sendImmediately(data, eventType, state, apiEndpoint);
142
- }
143
- function createTrackingData(pageData, state, eventType, effectiveDuration) {
144
- return {
145
- visitor_id: pageData.visitor_id,
146
- session_id: pageData.session_id,
147
- url: window.location.href,
148
- path: window.location.pathname,
149
- referrer: state.currentReferrer,
150
- user_agent: pageData.user_agent,
151
- duration_ms: effectiveDuration,
152
- // 使用活跃时间
153
- timestamp: Date.now(),
154
- type: eventType,
155
- // 添加事件类型
156
- // 设备和平台信息
157
- device: getDeviceInfo(),
158
- platform: getPlatform(),
159
- browser_language: getBrowserLanguage(),
160
- // 页面信息
161
- page_title: document.title || null,
162
- // 屏幕信息
163
- screen_width: screen.width,
164
- screen_height: screen.height,
165
- viewport_width: window.innerWidth,
166
- viewport_height: window.innerHeight,
167
- // 时区信息
168
- timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
169
- // 是否新用户(简单判断:第一次访问该域名)
170
- is_new_user: !getCookie("visitor_id") || getCookie("visitor_id") === pageData.visitor_id
171
- };
172
- }
173
- function trackPageEvent(eventType, pageData, state, apiEndpoint, debugLog) {
174
- if (eventType === "pageView") {
175
- eventType = detectPageType(eventType);
176
- debugLog("Detected page type:", eventType);
177
- if (!isRealPageVisit(state)) {
178
- return;
179
- }
180
- }
181
- let effectiveDuration = 0;
182
- if (eventType === "pageLeave") {
183
- updateActiveTime(state);
184
- effectiveDuration = state.activeTime;
185
- }
186
- debugLog("Using referrer:", state.currentReferrer, "for event:", eventType);
187
- const data = createTrackingData(pageData, state, eventType, effectiveDuration);
188
- sendTrackingData(data, eventType, state, apiEndpoint);
189
- }
190
- const _AnalyticsSingleton = class _AnalyticsSingleton {
191
- constructor(apiEndpoint) {
192
- __publicField(this, "initialized", false);
193
- __publicField(this, "state");
194
- __publicField(this, "pageData");
195
- __publicField(this, "apiEndpoint");
196
- __publicField(this, "debugLog");
197
- __publicField(this, "eventHandlers", []);
198
- this.apiEndpoint = apiEndpoint;
199
- this.debugLog = createDebugLogger();
200
- const visitorId = getVisitorId();
201
- let sessionId = sessionStorage.getItem("session_id");
202
- if (!sessionId) {
203
- sessionId = generateId("s");
204
- sessionStorage.setItem("session_id", sessionId);
205
- }
206
- this.pageData = {
207
- visitor_id: visitorId,
208
- session_id: sessionId,
209
- url: window.location.href,
210
- path: window.location.pathname,
211
- referrer: document.referrer || null,
212
- user_agent: navigator.userAgent,
213
- start_time: Date.now()
214
- };
215
- this.state = {
216
- isPageTracked: false,
217
- currentPageUrl: window.location.href,
218
- pageLoadTime: Date.now(),
219
- lastTrackTime: 0,
220
- currentReferrer: document.referrer || null,
221
- activeTime: 0,
222
- lastActiveTime: Date.now(),
223
- isPageVisible: !document.hidden,
224
- requestQueue: [],
225
- isRequestPending: false,
226
- isAstroEnvironment: false,
227
- pageLeaveTracked: false,
228
- initialLoadHandled: false,
229
- interactionThrottled: false,
230
- lastInteractionTime: 0
231
- };
232
- }
233
- static getInstance(apiEndpoint = "/api/track-visitor") {
234
- if (!_AnalyticsSingleton.instance) {
235
- _AnalyticsSingleton.instance = new _AnalyticsSingleton(apiEndpoint);
236
- }
237
- return _AnalyticsSingleton.instance;
238
- }
239
- static reset() {
240
- if (_AnalyticsSingleton.instance) {
241
- _AnalyticsSingleton.instance.cleanup();
242
- _AnalyticsSingleton.instance = null;
243
- }
244
- }
245
- init() {
246
- if (this.initialized) {
247
- return;
248
- }
249
- this.initialized = true;
250
- this.setupEventListeners();
251
- this.handleInitialPageLoad();
252
- }
253
- setupEventListeners() {
254
- const handlePageLeave = () => {
255
- if (this.state.pageLeaveTracked || this.state.lastTrackTime === 0) {
256
- return;
257
- }
258
- this.state.pageLeaveTracked = true;
259
- trackPageEvent("pageLeave", this.pageData, this.state, this.apiEndpoint, this.debugLog);
260
- };
261
- const handleBeforeUnload = () => handlePageLeave();
262
- const handlePageHide = () => handlePageLeave();
263
- window.addEventListener("beforeunload", handleBeforeUnload);
264
- window.addEventListener("pagehide", handlePageHide);
265
- const handleAstroBeforeSwap = () => {
266
- handlePageLeave();
267
- };
268
- const handleAstroAfterSwap = () => {
269
- this.state.isAstroEnvironment = true;
270
- const newUrl = window.location.href;
271
- if (newUrl !== this.state.currentPageUrl) {
272
- this.state.currentReferrer = this.state.currentPageUrl;
273
- this.state.currentPageUrl = newUrl;
274
- this.pageData.url = newUrl;
275
- this.pageData.path = window.location.pathname;
276
- this.pageData.start_time = Date.now();
277
- this.state.pageLoadTime = Date.now();
278
- this.state.isPageTracked = false;
279
- this.state.pageLeaveTracked = false;
280
- this.state.activeTime = 0;
281
- this.state.lastActiveTime = Date.now();
282
- this.state.isPageVisible = !document.hidden;
283
- this.trackPageVisit();
284
- }
285
- };
286
- document.addEventListener("astro:before-swap", handleAstroBeforeSwap);
287
- document.addEventListener("astro:after-swap", handleAstroAfterSwap);
288
- const handleVisibilityChange = () => {
289
- const now = Date.now();
290
- if (document.visibilityState === "visible") {
291
- this.state.isPageVisible = true;
292
- this.state.lastActiveTime = now;
293
- } else {
294
- if (this.state.isPageVisible) {
295
- this.state.activeTime += now - this.state.lastActiveTime;
296
- }
297
- this.state.isPageVisible = false;
298
- }
299
- };
300
- document.addEventListener("visibilitychange", handleVisibilityChange);
301
- const handleUserInteraction = () => {
302
- if (!this.state.isPageVisible || this.state.interactionThrottled)
303
- return;
304
- const now = Date.now();
305
- if (now - this.state.lastInteractionTime < 1e3)
306
- return;
307
- this.state.lastInteractionTime = now;
308
- this.state.interactionThrottled = true;
309
- if (now - this.state.lastActiveTime > 3e4) {
310
- this.state.lastActiveTime = now;
311
- }
312
- setTimeout(() => {
313
- this.state.interactionThrottled = false;
314
- }, 1e3);
315
- };
316
- const interactionEvents = ["click", "keydown", "scroll"];
317
- interactionEvents.forEach((event) => {
318
- document.addEventListener(event, handleUserInteraction, {
319
- passive: true,
320
- capture: false
321
- });
322
- });
323
- this.eventHandlers = [
324
- () => window.removeEventListener("beforeunload", handleBeforeUnload),
325
- () => window.removeEventListener("pagehide", handlePageHide),
326
- () => document.removeEventListener("astro:before-swap", handleAstroBeforeSwap),
327
- () => document.removeEventListener("astro:after-swap", handleAstroAfterSwap),
328
- () => document.removeEventListener("visibilitychange", handleVisibilityChange),
329
- ...interactionEvents.map(
330
- (event) => () => document.removeEventListener(event, handleUserInteraction)
331
- )
332
- ];
333
- }
334
- handleInitialPageLoad() {
335
- if (this.state.isPageTracked || this.state.initialLoadHandled) {
336
- return;
337
- }
338
- this.state.initialLoadHandled = true;
339
- this.trackPageVisit();
340
- }
341
- trackPageVisit() {
342
- trackPageEvent("pageView", this.pageData, this.state, this.apiEndpoint, this.debugLog);
343
- }
344
- cleanup() {
345
- this.eventHandlers.forEach((cleanup) => cleanup());
346
- this.eventHandlers = [];
347
- this.initialized = false;
348
- }
349
- };
350
- __publicField(_AnalyticsSingleton, "instance", null);
351
- let AnalyticsSingleton = _AnalyticsSingleton;
352
- function Analytics({
353
- apiEndpoint = "/api/track-visitor"
354
- }) {
355
- useEffect(() => {
356
- const analytics = AnalyticsSingleton.getInstance(apiEndpoint);
357
- analytics.init();
358
- return () => {
359
- };
360
- }, [apiEndpoint]);
361
- return null;
362
- }
363
- var jsxRuntime = { exports: {} };
364
- var reactJsxRuntime_production = {};
365
- /**
366
- * @license React
367
- * react-jsx-runtime.production.js
368
- *
369
- * Copyright (c) Meta Platforms, Inc. and affiliates.
370
- *
371
- * This source code is licensed under the MIT license found in the
372
- * LICENSE file in the root directory of this source tree.
373
- */
374
- var hasRequiredReactJsxRuntime_production;
375
- function requireReactJsxRuntime_production() {
376
- if (hasRequiredReactJsxRuntime_production)
377
- return reactJsxRuntime_production;
378
- hasRequiredReactJsxRuntime_production = 1;
379
- var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
380
- function jsxProd(type, config, maybeKey) {
381
- var key = null;
382
- void 0 !== maybeKey && (key = "" + maybeKey);
383
- void 0 !== config.key && (key = "" + config.key);
384
- if ("key" in config) {
385
- maybeKey = {};
386
- for (var propName in config)
387
- "key" !== propName && (maybeKey[propName] = config[propName]);
388
- } else
389
- maybeKey = config;
390
- config = maybeKey.ref;
391
- return {
392
- $$typeof: REACT_ELEMENT_TYPE,
393
- type,
394
- key,
395
- ref: void 0 !== config ? config : null,
396
- props: maybeKey
397
- };
398
- }
399
- reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
400
- reactJsxRuntime_production.jsx = jsxProd;
401
- reactJsxRuntime_production.jsxs = jsxProd;
402
- return reactJsxRuntime_production;
403
- }
404
- var reactJsxRuntime_development = {};
405
- /**
406
- * @license React
407
- * react-jsx-runtime.development.js
408
- *
409
- * Copyright (c) Meta Platforms, Inc. and affiliates.
410
- *
411
- * This source code is licensed under the MIT license found in the
412
- * LICENSE file in the root directory of this source tree.
413
- */
414
- var hasRequiredReactJsxRuntime_development;
415
- function requireReactJsxRuntime_development() {
416
- if (hasRequiredReactJsxRuntime_development)
417
- return reactJsxRuntime_development;
418
- hasRequiredReactJsxRuntime_development = 1;
419
- "production" !== process.env.NODE_ENV && function() {
420
- function getComponentNameFromType(type) {
421
- if (null == type)
422
- return null;
423
- if ("function" === typeof type)
424
- return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
425
- if ("string" === typeof type)
426
- return type;
427
- switch (type) {
428
- case REACT_FRAGMENT_TYPE:
429
- return "Fragment";
430
- case REACT_PROFILER_TYPE:
431
- return "Profiler";
432
- case REACT_STRICT_MODE_TYPE:
433
- return "StrictMode";
434
- case REACT_SUSPENSE_TYPE:
435
- return "Suspense";
436
- case REACT_SUSPENSE_LIST_TYPE:
437
- return "SuspenseList";
438
- case REACT_ACTIVITY_TYPE:
439
- return "Activity";
440
- }
441
- if ("object" === typeof type)
442
- switch ("number" === typeof type.tag && console.error(
443
- "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
444
- ), type.$$typeof) {
445
- case REACT_PORTAL_TYPE:
446
- return "Portal";
447
- case REACT_CONTEXT_TYPE:
448
- return type.displayName || "Context";
449
- case REACT_CONSUMER_TYPE:
450
- return (type._context.displayName || "Context") + ".Consumer";
451
- case REACT_FORWARD_REF_TYPE:
452
- var innerType = type.render;
453
- type = type.displayName;
454
- type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
455
- return type;
456
- case REACT_MEMO_TYPE:
457
- return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
458
- case REACT_LAZY_TYPE:
459
- innerType = type._payload;
460
- type = type._init;
461
- try {
462
- return getComponentNameFromType(type(innerType));
463
- } catch (x) {
464
- }
465
- }
466
- return null;
467
- }
468
- function testStringCoercion(value) {
469
- return "" + value;
470
- }
471
- function checkKeyStringCoercion(value) {
472
- try {
473
- testStringCoercion(value);
474
- var JSCompiler_inline_result = false;
475
- } catch (e) {
476
- JSCompiler_inline_result = true;
477
- }
478
- if (JSCompiler_inline_result) {
479
- JSCompiler_inline_result = console;
480
- var JSCompiler_temp_const = JSCompiler_inline_result.error;
481
- var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
482
- JSCompiler_temp_const.call(
483
- JSCompiler_inline_result,
484
- "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
485
- JSCompiler_inline_result$jscomp$0
486
- );
487
- return testStringCoercion(value);
488
- }
489
- }
490
- function getTaskName(type) {
491
- if (type === REACT_FRAGMENT_TYPE)
492
- return "<>";
493
- if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
494
- return "<...>";
495
- try {
496
- var name = getComponentNameFromType(type);
497
- return name ? "<" + name + ">" : "<...>";
498
- } catch (x) {
499
- return "<...>";
500
- }
501
- }
502
- function getOwner() {
503
- var dispatcher = ReactSharedInternals.A;
504
- return null === dispatcher ? null : dispatcher.getOwner();
505
- }
506
- function UnknownOwner() {
507
- return Error("react-stack-top-frame");
508
- }
509
- function hasValidKey(config) {
510
- if (hasOwnProperty.call(config, "key")) {
511
- var getter = Object.getOwnPropertyDescriptor(config, "key").get;
512
- if (getter && getter.isReactWarning)
513
- return false;
514
- }
515
- return void 0 !== config.key;
516
- }
517
- function defineKeyPropWarningGetter(props, displayName) {
518
- function warnAboutAccessingKey() {
519
- specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
520
- "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
521
- displayName
522
- ));
523
- }
524
- warnAboutAccessingKey.isReactWarning = true;
525
- Object.defineProperty(props, "key", {
526
- get: warnAboutAccessingKey,
527
- configurable: true
528
- });
529
- }
530
- function elementRefGetterWithDeprecationWarning() {
531
- var componentName = getComponentNameFromType(this.type);
532
- didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
533
- "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
534
- ));
535
- componentName = this.props.ref;
536
- return void 0 !== componentName ? componentName : null;
537
- }
538
- function ReactElement(type, key, props, owner, debugStack, debugTask) {
539
- var refProp = props.ref;
540
- type = {
541
- $$typeof: REACT_ELEMENT_TYPE,
542
- type,
543
- key,
544
- props,
545
- _owner: owner
546
- };
547
- null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
548
- enumerable: false,
549
- get: elementRefGetterWithDeprecationWarning
550
- }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
551
- type._store = {};
552
- Object.defineProperty(type._store, "validated", {
553
- configurable: false,
554
- enumerable: false,
555
- writable: true,
556
- value: 0
557
- });
558
- Object.defineProperty(type, "_debugInfo", {
559
- configurable: false,
560
- enumerable: false,
561
- writable: true,
562
- value: null
563
- });
564
- Object.defineProperty(type, "_debugStack", {
565
- configurable: false,
566
- enumerable: false,
567
- writable: true,
568
- value: debugStack
569
- });
570
- Object.defineProperty(type, "_debugTask", {
571
- configurable: false,
572
- enumerable: false,
573
- writable: true,
574
- value: debugTask
575
- });
576
- Object.freeze && (Object.freeze(type.props), Object.freeze(type));
577
- return type;
578
- }
579
- function jsxDEVImpl(type, config, maybeKey, isStaticChildren, debugStack, debugTask) {
580
- var children = config.children;
581
- if (void 0 !== children)
582
- if (isStaticChildren)
583
- if (isArrayImpl(children)) {
584
- for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
585
- validateChildKeys(children[isStaticChildren]);
586
- Object.freeze && Object.freeze(children);
587
- } else
588
- console.error(
589
- "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
590
- );
591
- else
592
- validateChildKeys(children);
593
- if (hasOwnProperty.call(config, "key")) {
594
- children = getComponentNameFromType(type);
595
- var keys = Object.keys(config).filter(function(k) {
596
- return "key" !== k;
597
- });
598
- isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
599
- didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
600
- 'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
601
- isStaticChildren,
602
- children,
603
- keys,
604
- children
605
- ), didWarnAboutKeySpread[children + isStaticChildren] = true);
606
- }
607
- children = null;
608
- void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
609
- hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
610
- if ("key" in config) {
611
- maybeKey = {};
612
- for (var propName in config)
613
- "key" !== propName && (maybeKey[propName] = config[propName]);
614
- } else
615
- maybeKey = config;
616
- children && defineKeyPropWarningGetter(
617
- maybeKey,
618
- "function" === typeof type ? type.displayName || type.name || "Unknown" : type
619
- );
620
- return ReactElement(
621
- type,
622
- children,
623
- maybeKey,
624
- getOwner(),
625
- debugStack,
626
- debugTask
627
- );
628
- }
629
- function validateChildKeys(node) {
630
- isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
631
- }
632
- function isValidElement(object) {
633
- return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
634
- }
635
- var React = require$$0, REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
636
- return null;
637
- };
638
- React = {
639
- react_stack_bottom_frame: function(callStackForError) {
640
- return callStackForError();
641
- }
642
- };
643
- var specialPropKeyWarningShown;
644
- var didWarnAboutElementRef = {};
645
- var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
646
- React,
647
- UnknownOwner
648
- )();
649
- var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
650
- var didWarnAboutKeySpread = {};
651
- reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
652
- reactJsxRuntime_development.jsx = function(type, config, maybeKey) {
653
- var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
654
- return jsxDEVImpl(
655
- type,
656
- config,
657
- maybeKey,
658
- false,
659
- trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
660
- trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
661
- );
662
- };
663
- reactJsxRuntime_development.jsxs = function(type, config, maybeKey) {
664
- var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
665
- return jsxDEVImpl(
666
- type,
667
- config,
668
- maybeKey,
669
- true,
670
- trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
671
- trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
672
- );
673
- };
674
- }();
675
- return reactJsxRuntime_development;
676
- }
677
- if (process.env.NODE_ENV === "production") {
678
- jsxRuntime.exports = requireReactJsxRuntime_production();
679
- } else {
680
- jsxRuntime.exports = requireReactJsxRuntime_development();
681
- }
682
- var jsxRuntimeExports = jsxRuntime.exports;
683
- const AttachmentIcon = forwardRef(
684
- (props, ref) => {
685
- const { extName, ...rest } = props;
686
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, ...rest, children: extName && extName === ".pdf" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
687
- "svg",
688
- {
689
- fill: "currentColor",
690
- viewBox: "0 0 1024 1024",
691
- version: "1.1",
692
- xmlns: "http://www.w3.org/2000/svg",
693
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M905.185809 178.844158C898.576738 172.685485 891.19337 165.824412 883.21687 158.436127 860.422682 137.322863 837.434925 116.207791 815.697647 96.487895 813.243072 94.261877 813.243072 94.261877 810.786411 92.037081 781.783552 65.781062 757.590948 44.376502 739.713617 29.293612 729.254178 20.469111 721.020606 13.860686 714.970549 9.501727 710.955023 6.608611 707.690543 4.524745 704.47155 2.998714 700.417679 1.07689 696.638044-0.094029 691.307277 0.005928 677.045677 0.273349 665.6 11.769337 665.6 26.182727L665.6 77.352844 665.6 128.522961 665.6 230.863194 665.6 256.448252 691.2 256.448252 896 256.448252 870.4 230.863194 870.4 998.414942 896 972.829884 230.381436 972.829884C187.90385 972.829884 153.6 938.623723 153.6 896.20663L153.6 26.182727 128 51.767786 588.8 51.767786C602.93849 51.767786 614.4 40.312965 614.4 26.182727 614.4 12.05249 602.93849 0.597669 588.8 0.597669L128 0.597669 102.4 0.597669 102.4 26.182727 102.4 896.20663C102.4 966.91021 159.652833 1024 230.381436 1024L896 1024 921.6 1024 921.6 998.414942 921.6 230.863194 921.6 205.278135 896 205.278135 691.2 205.278135 716.8 230.863194 716.8 128.522961 716.8 77.352844 716.8 26.182727C716.8 39.813762 705.748075 50.91427 692.267725 51.167041 687.705707 51.252584 685.069822 50.435995 682.52845 49.231204 682.259458 49.103682 683.344977 49.796618 685.029451 51.010252 689.779394 54.432502 697.145822 60.34494 706.686383 68.394196 724.009052 83.009121 747.816448 104.072869 776.413589 129.961594 778.850014 132.168064 778.850014 132.168064 781.285216 134.376514 802.876774 153.964212 825.739479 174.96442 848.413564 195.966437 856.350957 203.3185 863.697005 210.144893 870.269888 216.269843 874.209847 219.941299 877.019309 222.565641 878.499674 223.951409 888.81866 233.610931 905.019017 233.081212 914.684179 222.768247 924.349344 212.455283 923.819315 196.264383 913.500326 186.604861 911.981323 185.182945 909.155025 182.542876 905.185809 178.844158ZM102.4 461.128719 0 461.128719 0 896.074709 512 896.074709 1024 896.074709 1024 461.128719 153.6 461.128719 153.6 460.531049 102.4 460.531049 102.4 461.128719ZM208.2 711 208.2 819.2 157.6 819.2 157.6 528 269 528C301.533495 528 327.366571 536.466581 346.5 553.4 365.633429 570.333419 375.2 592.733195 375.2 620.6 375.2 649.133476 365.833427 671.333254 347.1 687.2 328.366573 703.066746 302.133502 711 268.4 711L208.2 711ZM208.2 670.4 269 670.4C287.00009 670.4 300.733286 666.166709 310.2 657.7 319.666714 649.233291 324.4 637.000079 324.4 621 324.4 605.266588 319.600047 592.700047 310 583.3 300.399951 573.899953 287.200083 569.066669 270.4 568.8L208.2 568.8 208.2 670.4ZM419.4 819.2 419.4 528 505.4 528C531.133461 528 553.966566 533.733276 573.9 545.2 593.833434 556.666724 609.266611 572.933229 620.2 594 631.133389 615.066771 636.6 639.199863 636.6 666.4L636.6 681C636.6 708.600139 631.100055 732.866562 620.1 753.8 609.099945 774.733438 593.433436 790.866609 573.1 802.2 552.766564 813.533391 529.466799 819.2 503.2 819.2L419.4 819.2ZM470 568.8 470 778.8 503 778.8C529.533466 778.8 549.89993 770.500083 564.1 753.9 578.30007 737.299917 585.533331 713.466822 585.8 682.4L585.8 666.2C585.8 634.599842 578.933402 610.46675 565.2 593.8 551.466598 577.13325 531.533463 568.8 505.4 568.8L470 568.8ZM854.8 695.8 737.6 695.8 737.6 819.2 687 819.2 687 528 872 528 872 568.8 737.6 568.8 737.6 655.4 854.8 655.4 854.8 695.8Z" })
694
- }
695
- ) : extName && (extName === ".xls" || extName === ".xlsx") ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
696
- "svg",
697
- {
698
- fill: "currentColor",
699
- viewBox: "0 0 1024 1024",
700
- version: "1.1",
701
- xmlns: "http://www.w3.org/2000/svg",
702
- children: [
703
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M810.18 949.8H213.821c-20.551 0-37.271-16.649-37.271-37.1V111.3c0-20.45 16.72-37.1 37.271-37.1h395.27v143.74c0 52.25 46.97 94.77 104.71 94.77h133.65V912.7c0 20.451-16.72 37.1-37.27 37.1zM678.9 118.68l130.85 130.85H713.8c-19.25 0-34.9-14.169-34.9-31.59v-99.26z m168.551 55.41l-99.89-99.89L673.36 0H213.82C152.16 0 102 49.93 102 111.3v801.4c0 61.371 50.16 111.3 111.821 111.3h596.36C871.84 1024 922 974.071 922 912.7V248.64l-74.55-74.55z" }),
704
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M810.18 949.8H213.821c-20.551 0-37.271-16.649-37.271-37.1V111.3c0-20.45 16.72-37.1 37.271-37.1h395.27v143.74c0 52.25 46.97 94.77 104.71 94.77h133.65V912.7c0 20.451-16.72 37.1-37.27 37.1zM678.9 118.68l130.85 130.85H713.8c-19.25 0-34.9-14.169-34.9-31.59v-99.26z m168.551 55.41l-99.89-99.89L673.36 0H213.82C152.16 0 102 49.93 102 111.3v801.4c0 61.371 50.16 111.3 111.821 111.3h596.36C871.84 1024 922 974.071 922 912.7V248.64l-74.55-74.55z" }),
705
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M559.714 579.272L668.11 404.855a0.2 0.2 0 0 0-0.17-0.305h-89.12a0.2 0.2 0 0 0-0.174 0.102l-67.604 120.3-70.265-120.303a0.2 0.2 0 0 0-0.173-0.1h-85.779a0.2 0.2 0 0 0-0.168 0.308L461.02 571.401 347.653 746.24a0.2 0.2 0 0 0 0.168 0.309h88.007a0.2 0.2 0 0 0 0.17-0.095l74.362-120.51 75.153 120.51a0.2 0.2 0 0 0 0.17 0.095h89.835a0.2 0.2 0 0 0 0.164-0.314L559.714 579.272z" })
706
- ]
707
- }
708
- ) : extName && (extName === ".doc" || extName === ".docx") ? /* @__PURE__ */ jsxRuntimeExports.jsx(
709
- "svg",
710
- {
711
- fill: "currentColor",
712
- viewBox: "0 0 1024 1024",
713
- version: "1.1",
714
- xmlns: "http://www.w3.org/2000/svg",
715
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494zM528.1 472h-32.2c-5.5 0-10.3 3.7-11.6 9.1L434.6 680l-46.1-198.7c-1.3-5.4-6.1-9.3-11.7-9.3h-35.4c-1.1 0-2.1 0.1-3.1 0.4-6.4 1.7-10.2 8.3-8.5 14.7l74.2 276c1.4 5.2 6.2 8.9 11.6 8.9h32c5.4 0 10.2-3.6 11.6-8.9l52.8-197 52.8 197c1.4 5.2 6.2 8.9 11.6 8.9h31.8c5.4 0 10.2-3.6 11.6-8.9l74.4-276c0.3-1 0.4-2.1 0.4-3.1 0-6.6-5.4-12-12-12H647c-5.6 0-10.4 3.9-11.7 9.3l-45.8 199.1-49.8-199.3c-1.3-5.4-6.1-9.1-11.6-9.1z" })
716
- }
717
- ) : /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
718
- "path",
719
- {
720
- fill: "currentColor",
721
- d: "M14 11a3 3 0 0 1-3-3V4H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-8zm-2-3a2 2 0 0 0 2 2h3.59L12 4.41zM7 3h5l7 7v9a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3"
722
- }
723
- ) }) });
724
- }
725
- );
726
- const Submit = (props) => {
727
- const {
728
- title = "Send Message",
729
- className,
730
- spinner,
731
- submitting,
732
- disabled,
733
- onClick,
734
- rawHtml,
735
- needClasses,
736
- ...rest
737
- } = props;
738
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
739
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
740
- "button",
741
- {
742
- type: "button",
743
- className,
744
- disabled: disabled ?? submitting,
745
- onClick,
746
- ...rest,
747
- children: [
748
- submitting && spinner,
749
- rawHtml ? /* @__PURE__ */ jsxRuntimeExports.jsx(
750
- "div",
751
- {
752
- style: { display: "contents" },
753
- dangerouslySetInnerHTML: { __html: rawHtml }
754
- }
755
- ) : title
756
- ]
757
- }
758
- ),
759
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "fixed -z-10 top-0 left-0 w-0 h-0 overflow-hidden opacity-0 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: needClasses }) })
760
- ] });
761
- };
762
- const encrypt = (value, formSalt) => {
763
- const timestamp = Math.floor(Date.now() / (60 * 1e3));
764
- const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
765
- let hash = 0;
766
- for (let i = 0; i < dataToEncrypt.length; i++) {
767
- const char = dataToEncrypt.charCodeAt(i);
768
- hash = (hash << 5) - hash + char;
769
- hash = hash & hash;
770
- }
771
- return `${hash.toString(16)}_${timestamp}`;
772
- };
773
- const verifyEncryption = (formSalt, encryptedValue = "", originalValue = "", maxAgeMinutes = 30) => {
774
- const parts = encryptedValue.split("_");
775
- if (parts.length !== 2) {
776
- return false;
777
- }
778
- const [hashString, timestampString] = parts;
779
- const timestamp = parseInt(timestampString, 10);
780
- const currentTimestamp = Math.floor(Date.now() / (60 * 1e3));
781
- if (isNaN(timestamp) || currentTimestamp - timestamp > maxAgeMinutes) {
782
- return false;
783
- }
784
- const dataToEncrypt = `${formSalt}:${timestamp}:${originalValue}`;
785
- let hash = 0;
786
- for (let i = 0; i < dataToEncrypt.length; i++) {
787
- const char = dataToEncrypt.charCodeAt(i);
788
- hash = (hash << 5) - hash + char;
789
- hash = hash & hash;
790
- }
791
- return hashString === hash.toString(16);
792
- };
793
- function useInlineLabelPadding(extraSpace = 16) {
794
- const labelRef = useRef(null);
795
- const [paddingLeft, setPaddingLeft] = useState("3.5rem");
796
- useEffect(() => {
797
- const labelEl = labelRef.current;
798
- if (!labelEl)
799
- return;
800
- let rafId = 0;
801
- const measure = () => {
802
- const width = labelEl.getBoundingClientRect().width;
803
- setPaddingLeft(`${width + extraSpace}px`);
804
- };
805
- measure();
806
- rafId = requestAnimationFrame(measure);
807
- if (typeof ResizeObserver === "undefined") {
808
- return () => {
809
- cancelAnimationFrame(rafId);
810
- };
811
- }
812
- const ro = new ResizeObserver(() => {
813
- measure();
814
- });
815
- ro.observe(labelEl);
816
- return () => {
817
- cancelAnimationFrame(rafId);
818
- ro.disconnect();
819
- };
820
- }, [extraSpace]);
821
- return { labelRef, paddingLeft };
822
- }
823
- const generateEncryption = (formSalt, value) => {
824
- const timestamp = Math.floor(Date.now() / (60 * 1e3));
825
- const dataToEncrypt = `${formSalt}:${timestamp}:${value}`;
826
- let hash = 0;
827
- for (let i = 0; i < dataToEncrypt.length; i++) {
828
- const char = dataToEncrypt.charCodeAt(i);
829
- hash = (hash << 5) - hash + char;
830
- hash = hash & hash;
831
- }
832
- return `${hash.toString(16)}_${timestamp}`;
833
- };
834
- const FileUpload2 = forwardRef(
835
- (props, ref) => {
836
- const {
837
- label,
838
- name,
839
- required,
840
- className,
841
- labelClassName,
842
- inputClassName,
843
- accept = "*/*",
844
- onChange,
845
- onUploadStateChange,
846
- error,
847
- placeholder = "Click to select file",
848
- uploadingText = "Uploading...",
849
- selectedText = "Selected: {name}",
850
- formSalt = "default-salt",
851
- maxSize = 5 * 1024 * 1024,
852
- ...rest
853
- } = props;
854
- const [uploadedFile, setUploadedFile] = useState(null);
855
- const [isUploading, setIsUploading] = useState(false);
856
- const [uploadError, setUploadError] = useState("");
857
- const fileInputRef = useRef(null);
858
- const { labelRef, paddingLeft } = useInlineLabelPadding(16);
859
- const abortControllerRef = useRef(null);
860
- const uploadFile = async (file, signal) => {
861
- var _a;
862
- if (file.size > maxSize) {
863
- throw new Error(
864
- `File ${file.name} exceeds maximum size limit of ${maxSize / 1024 / 1024}MB`
865
- );
866
- }
867
- const honeypot = "";
868
- const encryptedField = generateEncryption(formSalt, honeypot);
869
- const credentialsResponse = await fetch("/api/get-upload-credentials", {
870
- method: "POST",
871
- headers: {
872
- "Content-Type": "application/json"
873
- },
874
- body: JSON.stringify({
875
- fileName: file.name,
876
- fileSize: file.size,
877
- fileType: file.type,
878
- mediaType: "document",
879
- // Request document type credentials (usually R2)
880
- encryptedField,
881
- honeypot
882
- }),
883
- signal
884
- });
885
- if (!credentialsResponse.ok) {
886
- const errorData = await credentialsResponse.json();
887
- throw new Error(
888
- errorData.message || "Failed to get upload credentials"
889
- );
890
- }
891
- const credentialsData = await credentialsResponse.json();
892
- if (!credentialsData.success) {
893
- throw new Error(
894
- credentialsData.message || "Failed to get upload credentials"
895
- );
896
- }
897
- const { credentials, mediaType } = credentialsData;
898
- const uploadUrl = credentials == null ? void 0 : credentials.uploadUrl;
899
- const platform = credentials == null ? void 0 : credentials.platform;
900
- if (!uploadUrl) {
901
- throw new Error("Failed to get upload URL");
902
- }
903
- let uploadResponse;
904
- if (platform === "cloudflare_images") {
905
- const formData = new FormData();
906
- formData.append("file", file);
907
- uploadResponse = await fetch(uploadUrl, {
908
- method: "POST",
909
- body: formData,
910
- signal
911
- });
912
- } else {
913
- uploadResponse = await fetch(uploadUrl, {
914
- method: "PUT",
915
- headers: {
916
- "Content-Type": file.type
917
- },
918
- body: file,
919
- signal
920
- });
921
- }
922
- if (!uploadResponse.ok) {
923
- throw new Error(
924
- `File upload failed: ${uploadResponse.status} ${uploadResponse.statusText}`
925
- );
926
- }
927
- let resourceId;
928
- let publicUrl;
929
- if (platform === "cloudflare_images") {
930
- const uploadResult = await uploadResponse.json();
931
- resourceId = ((_a = uploadResult == null ? void 0 : uploadResult.result) == null ? void 0 : _a.id) || uploadUrl;
932
- const accountHash = uploadUrl.split("/")[3];
933
- publicUrl = `https://imagedelivery.net/${accountHash}/${resourceId}/public`;
934
- } else if (platform === "cloudflare_r2") {
935
- resourceId = uploadUrl.split("/").pop() || uploadUrl;
936
- publicUrl = uploadUrl;
937
- } else {
938
- resourceId = uploadUrl;
939
- publicUrl = uploadUrl;
940
- }
941
- const mediaPayload = {
942
- name: file.name,
943
- size: file.size,
944
- mimeType: file.type,
945
- mediaType,
946
- resourceUrl: resourceId,
947
- storageType: platform || "cloudflare_images",
948
- encryptedField,
949
- honeypot
950
- };
951
- const createMediaResponse = await fetch("/api/create-media", {
952
- method: "POST",
953
- headers: {
954
- "Content-Type": "application/json"
955
- },
956
- body: JSON.stringify(mediaPayload),
957
- signal
958
- });
959
- if (!createMediaResponse.ok) {
960
- const errorData = await createMediaResponse.json();
961
- throw new Error(errorData.message || "Failed to create Media object");
962
- }
963
- const mediaData = await createMediaResponse.json();
964
- if (!mediaData.success) {
965
- throw new Error(mediaData.message || "Failed to create Media object");
966
- }
967
- return {
968
- id: mediaData.mediaId,
969
- name: file.name,
970
- size: file.size,
971
- url: publicUrl
972
- // Use public URL instead of resource ID
973
- };
974
- };
975
- const handleFileChange = async (e) => {
976
- const files = e.target.files;
977
- if (!files || files.length === 0)
978
- return;
979
- const file = files[0];
980
- const abortController = new AbortController();
981
- abortControllerRef.current = abortController;
982
- setIsUploading(true);
983
- onUploadStateChange == null ? void 0 : onUploadStateChange(true);
984
- setUploadError("");
985
- try {
986
- if (file.size > maxSize) {
987
- throw new Error(
988
- `File ${file.name} exceeds ${maxSize / 1024 / 1024}MB limit`
989
- );
990
- }
991
- const uploadedFileData = await uploadFile(file, abortController.signal);
992
- setUploadedFile(uploadedFileData);
993
- onChange == null ? void 0 : onChange(uploadedFileData);
994
- } catch (error2) {
995
- if (error2 instanceof Error && error2.name === "AbortError") {
996
- console.log("User cancelled upload");
997
- } else {
998
- console.error("File upload failed:", error2);
999
- setUploadError(
1000
- error2 instanceof Error ? error2.message : "File upload failed"
1001
- );
1002
- }
1003
- } finally {
1004
- setIsUploading(false);
1005
- onUploadStateChange == null ? void 0 : onUploadStateChange(false);
1006
- abortControllerRef.current = null;
1007
- if (fileInputRef.current) {
1008
- fileInputRef.current.value = "";
1009
- }
1010
- }
1011
- };
1012
- const handleClick = () => {
1013
- var _a;
1014
- if (isUploading || uploadedFile)
1015
- return;
1016
- (_a = fileInputRef.current) == null ? void 0 : _a.click();
1017
- };
1018
- const handleRemoveFile = (e) => {
1019
- e.stopPropagation();
1020
- setUploadedFile(null);
1021
- onChange == null ? void 0 : onChange(null);
1022
- setUploadError("");
1023
- };
1024
- const handleCancelUpload = (e) => {
1025
- e.stopPropagation();
1026
- if (abortControllerRef.current) {
1027
- abortControllerRef.current.abort();
1028
- }
1029
- };
1030
- const getDisplayText = () => {
1031
- if (isUploading)
1032
- return uploadingText;
1033
- if (uploadedFile) {
1034
- return selectedText.replace("{name}", uploadedFile.name);
1035
- }
1036
- return placeholder;
1037
- };
1038
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
1039
- "div",
1040
- {
1041
- ref,
1042
- className: clsx("relative w-full", className),
1043
- ...rest,
1044
- children: [
1045
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1046
- "label",
1047
- {
1048
- ref: labelRef,
1049
- htmlFor: name,
1050
- className: clsx(
1051
- "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap z-10",
1052
- labelClassName
1053
- ),
1054
- children: label
1055
- }
1056
- ),
1057
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1058
- "input",
1059
- {
1060
- ref: fileInputRef,
1061
- type: "file",
1062
- id: name,
1063
- name,
1064
- required,
1065
- accept,
1066
- onChange: handleFileChange,
1067
- disabled: !!uploadedFile,
1068
- className: "hidden"
1069
- }
1070
- ),
1071
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1072
- "div",
1073
- {
1074
- onClick: handleClick,
1075
- className: clsx(
1076
- "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent transition-colors duration-200 flex items-center justify-start min-h-[2.5rem]",
1077
- isUploading || uploadedFile ? "cursor-not-allowed opacity-75" : "cursor-pointer hover:bg-white",
1078
- inputClassName
1079
- ),
1080
- style: { paddingLeft },
1081
- children: [
1082
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1083
- "span",
1084
- {
1085
- className: clsx(
1086
- "pl-6 text-sm font-medium flex-1 mr-4",
1087
- uploadedFile ? "text-gray-900" : "text-gray-600"
1088
- ),
1089
- children: getDisplayText()
1090
- }
1091
- ),
1092
- isUploading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
1093
- "button",
1094
- {
1095
- type: "button",
1096
- onClick: handleCancelUpload,
1097
- className: "ml-2 p-1 hover:bg-gray-100 rounded-full transition-colors flex-shrink-0 flex items-center gap-1",
1098
- title: "Cancel upload",
1099
- children: [
1100
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-primary-500" }),
1101
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1102
- "svg",
1103
- {
1104
- className: "w-3 h-3 text-gray-500",
1105
- fill: "none",
1106
- stroke: "currentColor",
1107
- viewBox: "0 0 24 24",
1108
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1109
- "path",
1110
- {
1111
- strokeLinecap: "round",
1112
- strokeLinejoin: "round",
1113
- strokeWidth: 2,
1114
- d: "M6 18L18 6M6 6l12 12"
1115
- }
1116
- )
1117
- }
1118
- )
1119
- ]
1120
- }
1121
- ) : uploadedFile ? /* @__PURE__ */ jsxRuntimeExports.jsx(
1122
- "button",
1123
- {
1124
- type: "button",
1125
- onClick: handleRemoveFile,
1126
- className: "ml-2 p-1 hover:bg-red-100 rounded-full transition-colors flex-shrink-0",
1127
- title: "Delete file",
1128
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1129
- "svg",
1130
- {
1131
- className: "w-4 h-4 text-red-500",
1132
- fill: "none",
1133
- stroke: "currentColor",
1134
- viewBox: "0 0 24 24",
1135
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1136
- "path",
1137
- {
1138
- strokeLinecap: "round",
1139
- strokeLinejoin: "round",
1140
- strokeWidth: 2,
1141
- d: "M6 18L18 6M6 6l12 12"
1142
- }
1143
- )
1144
- }
1145
- )
1146
- }
1147
- ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
1148
- "svg",
1149
- {
1150
- className: "w-5 h-5 text-gray-400 flex-shrink-0",
1151
- fill: "none",
1152
- stroke: "currentColor",
1153
- viewBox: "0 0 24 24",
1154
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1155
- "path",
1156
- {
1157
- strokeLinecap: "round",
1158
- strokeLinejoin: "round",
1159
- strokeWidth: 2,
1160
- d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
1161
- }
1162
- )
1163
- }
1164
- )
1165
- ]
1166
- }
1167
- ),
1168
- (error || uploadError) && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1 text-sm", children: error || uploadError })
1169
- ]
1170
- }
1171
- );
1172
- }
1173
- );
1174
- const Input = forwardRef((props, ref) => {
1175
- const {
1176
- label,
1177
- name,
1178
- required,
1179
- requiredClassName,
1180
- labelClassName,
1181
- inputClassName,
1182
- type,
1183
- autoFocus,
1184
- value,
1185
- onChange,
1186
- error,
1187
- ...rest
1188
- } = props;
1189
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...rest, children: [
1190
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: name, className: labelClassName, children: [
1191
- label,
1192
- required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
1193
- ] }),
1194
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1195
- "input",
1196
- {
1197
- ref,
1198
- type: type || "text",
1199
- id: name,
1200
- name,
1201
- required,
1202
- className: inputClassName,
1203
- autoComplete: name,
1204
- autoFocus,
1205
- value,
1206
- onChange
1207
- }
1208
- ),
1209
- error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1", children: error })
1210
- ] });
1211
- });
1212
- const Input2 = forwardRef((props, ref) => {
1213
- const {
1214
- label,
1215
- name,
1216
- required,
1217
- requiredClassName,
1218
- className,
1219
- labelClassName,
1220
- inputClassName,
1221
- type = "text",
1222
- autoFocus,
1223
- value,
1224
- placeholder,
1225
- onChange,
1226
- error,
1227
- ...rest
1228
- } = props;
1229
- const { labelRef, paddingLeft } = useInlineLabelPadding(16);
1230
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("relative w-full", className), ...rest, children: [
1231
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1232
- "label",
1233
- {
1234
- ref: labelRef,
1235
- htmlFor: name,
1236
- className: clsx(
1237
- "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
1238
- labelClassName
1239
- ),
1240
- children: [
1241
- label,
1242
- required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
1243
- ]
1244
- }
1245
- ),
1246
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1247
- "input",
1248
- {
1249
- ref,
1250
- type,
1251
- id: name,
1252
- name,
1253
- required,
1254
- placeholder,
1255
- className: clsx(
1256
- "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent focus:bg-white transition-colors duration-200",
1257
- inputClassName
1258
- ),
1259
- style: { paddingLeft },
1260
- autoComplete: name,
1261
- autoFocus,
1262
- value,
1263
- onChange
1264
- }
1265
- ),
1266
- error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1 text-sm", children: error })
1267
- ] });
1268
- });
1269
- const Textarea = forwardRef(
1270
- (props, ref) => {
1271
- const {
1272
- label,
1273
- name,
1274
- required,
1275
- requiredClassName,
1276
- labelClassName,
1277
- inputClassName,
1278
- rows = 8,
1279
- value,
1280
- onChange,
1281
- error,
1282
- ...rest
1283
- } = props;
1284
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...rest, children: [
1285
- /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: name, className: labelClassName, children: [
1286
- label,
1287
- required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
1288
- ] }),
1289
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1290
- "textarea",
1291
- {
1292
- ref,
1293
- id: name,
1294
- name,
1295
- required,
1296
- className: inputClassName,
1297
- rows,
1298
- value,
1299
- onChange,
1300
- autoComplete: name
1301
- }
1302
- ),
1303
- error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1", children: error })
1304
- ] });
1305
- }
1306
- );
1307
- const Textarea2 = forwardRef(
1308
- (props, ref) => {
1309
- const {
1310
- label,
1311
- name,
1312
- required,
1313
- requiredClassName,
1314
- labelClassName,
1315
- inputClassName,
1316
- className,
1317
- rows = 6,
1318
- value,
1319
- onChange,
1320
- error,
1321
- ...rest
1322
- } = props;
1323
- const [paddingTop, setPaddingTop] = useState("2.5rem");
1324
- const labelRef = useRef(null);
1325
- useEffect(() => {
1326
- const labelEl = labelRef.current;
1327
- if (!labelEl)
1328
- return;
1329
- let rafId = 0;
1330
- const measure = () => {
1331
- const height = labelEl.getBoundingClientRect().height;
1332
- setPaddingTop(`${height + 12}px`);
1333
- };
1334
- measure();
1335
- rafId = requestAnimationFrame(measure);
1336
- if (typeof ResizeObserver === "undefined") {
1337
- return () => {
1338
- cancelAnimationFrame(rafId);
1339
- };
1340
- }
1341
- const ro = new ResizeObserver(() => {
1342
- measure();
1343
- });
1344
- ro.observe(labelEl);
1345
- return () => {
1346
- cancelAnimationFrame(rafId);
1347
- ro.disconnect();
1348
- };
1349
- }, [label]);
1350
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, ...rest, children: [
1351
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
1352
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1353
- "label",
1354
- {
1355
- ref: labelRef,
1356
- htmlFor: name,
1357
- className: `absolute left-3 top-2 opacity-70 text-sm pointer-events-none ${labelClassName || ""}`,
1358
- children: [
1359
- label,
1360
- required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : ""
1361
- ]
1362
- }
1363
- ),
1364
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1365
- "textarea",
1366
- {
1367
- ref,
1368
- id: name,
1369
- name,
1370
- required,
1371
- rows,
1372
- value,
1373
- onChange,
1374
- autoComplete: name,
1375
- style: { paddingTop },
1376
- className: `w-full px-3 pb-2 border border-gray-300 rounded-md shadow-sm focus:outline-none
1377
- focus:ring-2 focus:ring-primary-300 focus:border-transparent resize-y bg-transparent focus:bg-white transition-colors duration-200 ${inputClassName || ""}`
1378
- }
1379
- )
1380
- ] }),
1381
- error && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-red-500 mt-1 text-sm", children: error })
1382
- ] });
1383
- }
1384
- );
1385
- Textarea2.displayName = "Textarea2";
1386
- const countries = [
1387
- { code: "AF", name: "Afghanistan", region: "Asia", dialCode: "+93" },
1388
- { code: "AL", name: "Albania", region: "Europe", dialCode: "+355" },
1389
- { code: "DZ", name: "Algeria", region: "Africa", dialCode: "+213" },
1390
- { code: "AS", name: "American Samoa", region: "Oceania", dialCode: "+1" },
1391
- { code: "AD", name: "Andorra", region: "Europe", dialCode: "+376" },
1392
- { code: "AO", name: "Angola", region: "Africa", dialCode: "+244" },
1393
- { code: "AI", name: "Anguilla", region: "North America", dialCode: "+1" },
1394
- { code: "AG", name: "Antigua and Barbuda", region: "North America", dialCode: "+1" },
1395
- { code: "AR", name: "Argentina", region: "South America", dialCode: "+54" },
1396
- { code: "AM", name: "Armenia", region: "Asia", dialCode: "+374" },
1397
- { code: "AW", name: "Aruba", region: "North America", dialCode: "+297" },
1398
- { code: "AU", name: "Australia", region: "Oceania", dialCode: "+61" },
1399
- { code: "AT", name: "Austria", region: "Europe", dialCode: "+43" },
1400
- { code: "AZ", name: "Azerbaijan", region: "Asia", dialCode: "+994" },
1401
- { code: "BS", name: "Bahamas", region: "North America", dialCode: "+1" },
1402
- { code: "BH", name: "Bahrain", region: "Asia", dialCode: "+973" },
1403
- { code: "BD", name: "Bangladesh", region: "Asia", dialCode: "+880" },
1404
- { code: "BB", name: "Barbados", region: "North America", dialCode: "+1" },
1405
- { code: "BY", name: "Belarus", region: "Europe", dialCode: "+375" },
1406
- { code: "BE", name: "Belgium", region: "Europe", dialCode: "+32" },
1407
- { code: "BZ", name: "Belize", region: "North America", dialCode: "+501" },
1408
- { code: "BJ", name: "Benin", region: "Africa", dialCode: "+229" },
1409
- { code: "BM", name: "Bermuda", region: "North America", dialCode: "+1" },
1410
- { code: "BT", name: "Bhutan", region: "Asia", dialCode: "+975" },
1411
- { code: "BO", name: "Bolivia", region: "South America", dialCode: "+591" },
1412
- { code: "BA", name: "Bosnia and Herzegovina", region: "Europe", dialCode: "+387" },
1413
- { code: "BW", name: "Botswana", region: "Africa", dialCode: "+267" },
1414
- { code: "BR", name: "Brazil", region: "South America", dialCode: "+55" },
1415
- { code: "VG", name: "British Virgin Islands", region: "North America", dialCode: "+1" },
1416
- { code: "BN", name: "Brunei", region: "Asia", dialCode: "+673" },
1417
- { code: "BG", name: "Bulgaria", region: "Europe", dialCode: "+359" },
1418
- { code: "BF", name: "Burkina Faso", region: "Africa", dialCode: "+226" },
1419
- { code: "BI", name: "Burundi", region: "Africa", dialCode: "+257" },
1420
- { code: "KH", name: "Cambodia", region: "Asia", dialCode: "+855" },
1421
- { code: "CM", name: "Cameroon", region: "Africa", dialCode: "+237" },
1422
- { code: "CA", name: "Canada", region: "North America", dialCode: "+1" },
1423
- { code: "CV", name: "Cape Verde", region: "Africa", dialCode: "+238" },
1424
- { code: "KY", name: "Cayman Islands", region: "North America", dialCode: "+1" },
1425
- { code: "CF", name: "Central African Republic", region: "Africa", dialCode: "+236" },
1426
- { code: "TD", name: "Chad", region: "Africa", dialCode: "+235" },
1427
- { code: "CL", name: "Chile", region: "South America", dialCode: "+56" },
1428
- { code: "CN", name: "China", region: "Asia", dialCode: "+86" },
1429
- { code: "HK", name: "Hong Kong, China", region: "Asia", dialCode: "+852" },
1430
- { code: "MO", name: "Macao, China", region: "Asia", dialCode: "+853" },
1431
- { code: "TW", name: "Taiwan, China", region: "Asia", dialCode: "+886" },
1432
- { code: "CO", name: "Colombia", region: "South America", dialCode: "+57" },
1433
- { code: "KM", name: "Comoros", region: "Africa", dialCode: "+269" },
1434
- { code: "CG", name: "Congo", region: "Africa", dialCode: "+242" },
1435
- { code: "CD", name: "Congo (DRC)", region: "Africa", dialCode: "+243" },
1436
- { code: "CR", name: "Costa Rica", region: "North America", dialCode: "+506" },
1437
- { code: "CI", name: "Côte d’Ivoire", region: "Africa", dialCode: "+225" },
1438
- { code: "HR", name: "Croatia", region: "Europe", dialCode: "+385" },
1439
- { code: "CU", name: "Cuba", region: "North America", dialCode: "+53" },
1440
- { code: "CY", name: "Cyprus", region: "Europe", dialCode: "+357" },
1441
- { code: "CZ", name: "Czechia", region: "Europe", dialCode: "+420" },
1442
- { code: "DK", name: "Denmark", region: "Europe", dialCode: "+45" },
1443
- { code: "DJ", name: "Djibouti", region: "Africa", dialCode: "+253" },
1444
- { code: "DM", name: "Dominica", region: "North America", dialCode: "+1" },
1445
- { code: "DO", name: "Dominican Republic", region: "North America", dialCode: "+1" },
1446
- { code: "EC", name: "Ecuador", region: "South America", dialCode: "+593" },
1447
- { code: "EG", name: "Egypt", region: "Africa", dialCode: "+20" },
1448
- { code: "SV", name: "El Salvador", region: "North America", dialCode: "+503" },
1449
- { code: "GQ", name: "Equatorial Guinea", region: "Africa", dialCode: "+240" },
1450
- { code: "ER", name: "Eritrea", region: "Africa", dialCode: "+291" },
1451
- { code: "EE", name: "Estonia", region: "Europe", dialCode: "+372" },
1452
- { code: "SZ", name: "Eswatini", region: "Africa", dialCode: "+268" },
1453
- { code: "ET", name: "Ethiopia", region: "Africa", dialCode: "+251" },
1454
- { code: "FO", name: "Faroe Islands", region: "Europe", dialCode: "+298" },
1455
- { code: "FJ", name: "Fiji", region: "Oceania", dialCode: "+679" },
1456
- { code: "FI", name: "Finland", region: "Europe", dialCode: "+358" },
1457
- { code: "FR", name: "France", region: "Europe", dialCode: "+33" },
1458
- { code: "GF", name: "French Guiana", region: "South America", dialCode: "+594" },
1459
- { code: "PF", name: "French Polynesia", region: "Oceania", dialCode: "+689" },
1460
- { code: "GA", name: "Gabon", region: "Africa", dialCode: "+241" },
1461
- { code: "GM", name: "Gambia", region: "Africa", dialCode: "+220" },
1462
- { code: "GE", name: "Georgia", region: "Asia", dialCode: "+995" },
1463
- { code: "DE", name: "Germany", region: "Europe", dialCode: "+49" },
1464
- { code: "GH", name: "Ghana", region: "Africa", dialCode: "+233" },
1465
- { code: "GI", name: "Gibraltar", region: "Europe", dialCode: "+350" },
1466
- { code: "GR", name: "Greece", region: "Europe", dialCode: "+30" },
1467
- { code: "GL", name: "Greenland", region: "North America", dialCode: "+299" },
1468
- { code: "GD", name: "Grenada", region: "North America", dialCode: "+1" },
1469
- { code: "GP", name: "Guadeloupe", region: "North America", dialCode: "+590" },
1470
- { code: "GU", name: "Guam", region: "Oceania", dialCode: "+1" },
1471
- { code: "GT", name: "Guatemala", region: "North America", dialCode: "+502" },
1472
- { code: "GG", name: "Guernsey", region: "Europe", dialCode: "+44" },
1473
- { code: "GN", name: "Guinea", region: "Africa", dialCode: "+224" },
1474
- { code: "GW", name: "Guinea-Bissau", region: "Africa", dialCode: "+245" },
1475
- { code: "GY", name: "Guyana", region: "South America", dialCode: "+592" },
1476
- { code: "HT", name: "Haiti", region: "North America", dialCode: "+509" },
1477
- { code: "HN", name: "Honduras", region: "North America", dialCode: "+504" },
1478
- { code: "HU", name: "Hungary", region: "Europe", dialCode: "+36" },
1479
- { code: "IS", name: "Iceland", region: "Europe", dialCode: "+354" },
1480
- { code: "IN", name: "India", region: "Asia", dialCode: "+91" },
1481
- { code: "ID", name: "Indonesia", region: "Asia", dialCode: "+62" },
1482
- { code: "IR", name: "Iran", region: "Asia", dialCode: "+98" },
1483
- { code: "IQ", name: "Iraq", region: "Asia", dialCode: "+964" },
1484
- { code: "IE", name: "Ireland", region: "Europe", dialCode: "+353" },
1485
- { code: "IM", name: "Isle of Man", region: "Europe", dialCode: "+44" },
1486
- { code: "IL", name: "Israel", region: "Asia", dialCode: "+972" },
1487
- { code: "IT", name: "Italy", region: "Europe", dialCode: "+39" },
1488
- { code: "JM", name: "Jamaica", region: "North America", dialCode: "+1" },
1489
- { code: "JP", name: "Japan", region: "Asia", dialCode: "+81" },
1490
- { code: "JE", name: "Jersey", region: "Europe", dialCode: "+44" },
1491
- { code: "JO", name: "Jordan", region: "Asia", dialCode: "+962" },
1492
- { code: "KZ", name: "Kazakhstan", region: "Asia", dialCode: "+7" },
1493
- { code: "KE", name: "Kenya", region: "Africa", dialCode: "+254" },
1494
- { code: "KI", name: "Kiribati", region: "Oceania", dialCode: "+686" },
1495
- { code: "XK", name: "Kosovo", region: "Europe", dialCode: "+383" },
1496
- { code: "KW", name: "Kuwait", region: "Asia", dialCode: "+965" },
1497
- { code: "KG", name: "Kyrgyzstan", region: "Asia", dialCode: "+996" },
1498
- { code: "LA", name: "Laos", region: "Asia", dialCode: "+856" },
1499
- { code: "LV", name: "Latvia", region: "Europe", dialCode: "+371" },
1500
- { code: "LB", name: "Lebanon", region: "Asia", dialCode: "+961" },
1501
- { code: "LS", name: "Lesotho", region: "Africa", dialCode: "+266" },
1502
- { code: "LR", name: "Liberia", region: "Africa", dialCode: "+231" },
1503
- { code: "LY", name: "Libya", region: "Africa", dialCode: "+218" },
1504
- { code: "LI", name: "Liechtenstein", region: "Europe", dialCode: "+423" },
1505
- { code: "LT", name: "Lithuania", region: "Europe", dialCode: "+370" },
1506
- { code: "LU", name: "Luxembourg", region: "Europe", dialCode: "+352" },
1507
- { code: "MG", name: "Madagascar", region: "Africa", dialCode: "+261" },
1508
- { code: "MW", name: "Malawi", region: "Africa", dialCode: "+265" },
1509
- { code: "MY", name: "Malaysia", region: "Asia", dialCode: "+60" },
1510
- { code: "MV", name: "Maldives", region: "Asia", dialCode: "+960" },
1511
- { code: "ML", name: "Mali", region: "Africa", dialCode: "+223" },
1512
- { code: "MT", name: "Malta", region: "Europe", dialCode: "+356" },
1513
- { code: "MH", name: "Marshall Islands", region: "Oceania", dialCode: "+692" },
1514
- { code: "MQ", name: "Martinique", region: "North America", dialCode: "+596" },
1515
- { code: "MR", name: "Mauritania", region: "Africa", dialCode: "+222" },
1516
- { code: "MU", name: "Mauritius", region: "Africa", dialCode: "+230" },
1517
- { code: "YT", name: "Mayotte", region: "Africa", dialCode: "+262" },
1518
- { code: "MX", name: "Mexico", region: "North America", dialCode: "+52" },
1519
- { code: "FM", name: "Micronesia", region: "Oceania", dialCode: "+691" },
1520
- { code: "MD", name: "Moldova", region: "Europe", dialCode: "+373" },
1521
- { code: "MC", name: "Monaco", region: "Europe", dialCode: "+377" },
1522
- { code: "MN", name: "Mongolia", region: "Asia", dialCode: "+976" },
1523
- { code: "ME", name: "Montenegro", region: "Europe", dialCode: "+382" },
1524
- { code: "MS", name: "Montserrat", region: "North America", dialCode: "+1" },
1525
- { code: "MA", name: "Morocco", region: "Africa", dialCode: "+212" },
1526
- { code: "MZ", name: "Mozambique", region: "Africa", dialCode: "+258" },
1527
- { code: "MM", name: "Myanmar", region: "Asia", dialCode: "+95" },
1528
- { code: "NA", name: "Namibia", region: "Africa", dialCode: "+264" },
1529
- { code: "NR", name: "Nauru", region: "Oceania", dialCode: "+674" },
1530
- { code: "NP", name: "Nepal", region: "Asia", dialCode: "+977" },
1531
- { code: "NL", name: "Netherlands", region: "Europe", dialCode: "+31" },
1532
- { code: "NC", name: "New Caledonia", region: "Oceania", dialCode: "+687" },
1533
- { code: "NZ", name: "New Zealand", region: "Oceania", dialCode: "+64" },
1534
- { code: "NI", name: "Nicaragua", region: "North America", dialCode: "+505" },
1535
- { code: "NE", name: "Niger", region: "Africa", dialCode: "+227" },
1536
- { code: "NG", name: "Nigeria", region: "Africa", dialCode: "+234" },
1537
- { code: "NU", name: "Niue", region: "Oceania", dialCode: "+683" },
1538
- { code: "NF", name: "Norfolk Island", region: "Oceania", dialCode: "+672" },
1539
- { code: "KP", name: "North Korea", region: "Asia", dialCode: "+850" },
1540
- { code: "MK", name: "North Macedonia", region: "Europe", dialCode: "+389" },
1541
- { code: "MP", name: "Northern Mariana Islands", region: "Oceania", dialCode: "+1" },
1542
- { code: "NO", name: "Norway", region: "Europe", dialCode: "+47" },
1543
- { code: "OM", name: "Oman", region: "Asia", dialCode: "+968" },
1544
- { code: "PK", name: "Pakistan", region: "Asia", dialCode: "+92" },
1545
- { code: "PW", name: "Palau", region: "Oceania", dialCode: "+680" },
1546
- { code: "PS", name: "Palestine", region: "Asia", dialCode: "+970" },
1547
- { code: "PA", name: "Panama", region: "North America", dialCode: "+507" },
1548
- { code: "PG", name: "Papua New Guinea", region: "Oceania", dialCode: "+675" },
1549
- { code: "PY", name: "Paraguay", region: "South America", dialCode: "+595" },
1550
- { code: "PE", name: "Peru", region: "South America", dialCode: "+51" },
1551
- { code: "PH", name: "Philippines", region: "Asia", dialCode: "+63" },
1552
- { code: "PL", name: "Poland", region: "Europe", dialCode: "+48" },
1553
- { code: "PT", name: "Portugal", region: "Europe", dialCode: "+351" },
1554
- { code: "PR", name: "Puerto Rico", region: "North America", dialCode: "+1" },
1555
- { code: "QA", name: "Qatar", region: "Asia", dialCode: "+974" },
1556
- { code: "RE", name: "Réunion", region: "Africa", dialCode: "+262" },
1557
- { code: "RO", name: "Romania", region: "Europe", dialCode: "+40" },
1558
- { code: "RU", name: "Russia", region: "Europe", dialCode: "+7" },
1559
- { code: "RW", name: "Rwanda", region: "Africa", dialCode: "+250" },
1560
- { code: "BL", name: "Saint Barthélemy", region: "North America", dialCode: "+590" },
1561
- { code: "KN", name: "Saint Kitts and Nevis", region: "North America", dialCode: "+1" },
1562
- { code: "LC", name: "Saint Lucia", region: "North America", dialCode: "+1" },
1563
- { code: "MF", name: "Saint Martin", region: "North America", dialCode: "+590" },
1564
- { code: "PM", name: "Saint Pierre and Miquelon", region: "North America", dialCode: "+508" },
1565
- { code: "VC", name: "Saint Vincent and the Grenadines", region: "North America", dialCode: "+1" },
1566
- { code: "WS", name: "Samoa", region: "Oceania", dialCode: "+685" },
1567
- { code: "SM", name: "San Marino", region: "Europe", dialCode: "+378" },
1568
- { code: "ST", name: "São Tomé and Príncipe", region: "Africa", dialCode: "+239" },
1569
- { code: "SA", name: "Saudi Arabia", region: "Asia", dialCode: "+966" },
1570
- { code: "SN", name: "Senegal", region: "Africa", dialCode: "+221" },
1571
- { code: "RS", name: "Serbia", region: "Europe", dialCode: "+381" },
1572
- { code: "SC", name: "Seychelles", region: "Africa", dialCode: "+248" },
1573
- { code: "SL", name: "Sierra Leone", region: "Africa", dialCode: "+232" },
1574
- { code: "SG", name: "Singapore", region: "Asia", dialCode: "+65" },
1575
- { code: "SX", name: "Sint Maarten", region: "North America", dialCode: "+1" },
1576
- { code: "SK", name: "Slovakia", region: "Europe", dialCode: "+421" },
1577
- { code: "SI", name: "Slovenia", region: "Europe", dialCode: "+386" },
1578
- { code: "SB", name: "Solomon Islands", region: "Oceania", dialCode: "+677" },
1579
- { code: "SO", name: "Somalia", region: "Africa", dialCode: "+252" },
1580
- { code: "ZA", name: "South Africa", region: "Africa", dialCode: "+27" },
1581
- { code: "KR", name: "South Korea", region: "Asia", dialCode: "+82" },
1582
- { code: "SS", name: "South Sudan", region: "Africa", dialCode: "+211" },
1583
- { code: "ES", name: "Spain", region: "Europe", dialCode: "+34" },
1584
- { code: "LK", name: "Sri Lanka", region: "Asia", dialCode: "+94" },
1585
- { code: "SD", name: "Sudan", region: "Africa", dialCode: "+249" },
1586
- { code: "SR", name: "Suriname", region: "South America", dialCode: "+597" },
1587
- { code: "SE", name: "Sweden", region: "Europe", dialCode: "+46" },
1588
- { code: "CH", name: "Switzerland", region: "Europe", dialCode: "+41" },
1589
- { code: "SY", name: "Syria", region: "Asia", dialCode: "+963" },
1590
- { code: "TJ", name: "Tajikistan", region: "Asia", dialCode: "+992" },
1591
- { code: "TZ", name: "Tanzania", region: "Africa", dialCode: "+255" },
1592
- { code: "TH", name: "Thailand", region: "Asia", dialCode: "+66" },
1593
- { code: "TG", name: "Togo", region: "Africa", dialCode: "+228" },
1594
- { code: "TK", name: "Tokelau", region: "Oceania", dialCode: "+690" },
1595
- { code: "TO", name: "Tonga", region: "Oceania", dialCode: "+676" },
1596
- { code: "TT", name: "Trinidad and Tobago", region: "North America", dialCode: "+1" },
1597
- { code: "TN", name: "Tunisia", region: "Africa", dialCode: "+216" },
1598
- { code: "TR", name: "Türkiye", region: "Europe", dialCode: "+90" },
1599
- { code: "TM", name: "Turkmenistan", region: "Asia", dialCode: "+993" },
1600
- { code: "TC", name: "Turks and Caicos Islands", region: "North America", dialCode: "+1" },
1601
- { code: "TV", name: "Tuvalu", region: "Oceania", dialCode: "+688" },
1602
- { code: "UG", name: "Uganda", region: "Africa", dialCode: "+256" },
1603
- { code: "UA", name: "Ukraine", region: "Europe", dialCode: "+380" },
1604
- { code: "AE", name: "United Arab Emirates", region: "Asia", dialCode: "+971" },
1605
- { code: "GB", name: "United Kingdom", region: "Europe", dialCode: "+44" },
1606
- { code: "US", name: "United States", region: "North America", dialCode: "+1" },
1607
- { code: "UY", name: "Uruguay", region: "South America", dialCode: "+598" },
1608
- { code: "UZ", name: "Uzbekistan", region: "Asia", dialCode: "+998" },
1609
- { code: "VU", name: "Vanuatu", region: "Oceania", dialCode: "+678" },
1610
- { code: "VA", name: "Vatican City", region: "Europe", dialCode: "+39" },
1611
- { code: "VE", name: "Venezuela", region: "South America", dialCode: "+58" },
1612
- { code: "VN", name: "Vietnam", region: "Asia", dialCode: "+84" },
1613
- { code: "VI", name: "U.S. Virgin Islands", region: "North America", dialCode: "+1" },
1614
- { code: "WF", name: "Wallis and Futuna", region: "Oceania", dialCode: "+681" },
1615
- { code: "EH", name: "Western Sahara", region: "Africa", dialCode: "+212" },
1616
- { code: "YE", name: "Yemen", region: "Asia", dialCode: "+967" },
1617
- { code: "ZM", name: "Zambia", region: "Africa", dialCode: "+260" },
1618
- { code: "ZW", name: "Zimbabwe", region: "Africa", dialCode: "+263" }
1619
- ];
1620
- function useTelControl({ countries: countries$1, name, value, onChange }) {
1621
- const allCountries = useMemo(() => countries$1 || countries, [countries$1]);
1622
- const [selected, setSelected] = useState(null);
1623
- const [localNumber, setLocalNumber] = useState("");
1624
- const toStringValue = (val) => {
1625
- if (typeof val === "string")
1626
- return val;
1627
- if (typeof val === "number")
1628
- return String(val);
1629
- if (Array.isArray(val))
1630
- return val[0] ?? "";
1631
- return "";
1632
- };
1633
- useEffect(() => {
1634
- const s = toStringValue(value).trim();
1635
- const m = s.match(/^\+\d{1,4}/);
1636
- const dial = m ? m[0] : "";
1637
- const number = s.slice(dial.length).trimStart();
1638
- setLocalNumber(number || "");
1639
- if (dial) {
1640
- const found = allCountries.find((c) => c.dialCode === dial) || null;
1641
- setSelected(found);
1642
- } else {
1643
- setSelected(null);
1644
- }
1645
- }, [value, allCountries]);
1646
- const emitChange = (combined) => {
1647
- if (!onChange)
1648
- return;
1649
- const evt = {
1650
- target: { value: combined, name },
1651
- currentTarget: { value: combined, name }
1652
- };
1653
- onChange(evt);
1654
- };
1655
- const filtered = (query) => {
1656
- if (!query)
1657
- return allCountries;
1658
- const q = query.toLowerCase();
1659
- return allCountries.filter(
1660
- (c) => c.name.toLowerCase().includes(q) || c.region && c.region.toLowerCase().includes(q) || c.dialCode.replace("+", "").includes(q.replace("+", ""))
1661
- );
1662
- };
1663
- const onSelectCountry = (c) => {
1664
- setSelected(c);
1665
- const combined = `${c.dialCode} ${localNumber}`.trim();
1666
- emitChange(combined);
1667
- };
1668
- const onChangeLocal = (next) => {
1669
- setLocalNumber(next);
1670
- const combined = `${(selected == null ? void 0 : selected.dialCode) || ""} ${next}`.trim();
1671
- emitChange(combined);
1672
- };
1673
- return {
1674
- allCountries,
1675
- selected,
1676
- setSelected,
1677
- localNumber,
1678
- setLocalNumber,
1679
- filtered,
1680
- onSelectCountry,
1681
- onChangeLocal
1682
- };
1683
- }
1684
- const TelInput = forwardRef(
1685
- (props, ref) => {
1686
- const {
1687
- label,
1688
- name,
1689
- required,
1690
- requiredClassName,
1691
- className,
1692
- labelClassName,
1693
- inputClassName,
1694
- countries: countries2,
1695
- placeholder,
1696
- value,
1697
- onChange
1698
- } = props;
1699
- const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } = useTelControl({ countries: countries2, name, value, onChange });
1700
- const [open, setOpen] = useState(false);
1701
- const [query, setQuery] = useState("");
1702
- const panelRef = useRef(null);
1703
- const buttonRef = useRef(null);
1704
- useEffect(() => {
1705
- const onDocClick = (e) => {
1706
- const target = e.target;
1707
- if (open && panelRef.current && !panelRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
1708
- setOpen(false);
1709
- }
1710
- };
1711
- document.addEventListener("mousedown", onDocClick);
1712
- return () => document.removeEventListener("mousedown", onDocClick);
1713
- }, [open]);
1714
- const filtered = useMemo(() => {
1715
- if (!query)
1716
- return allCountries;
1717
- const q = query.toLowerCase();
1718
- return allCountries.filter(
1719
- (c) => c.name.toLowerCase().includes(q) || c.region && c.region.toLowerCase().includes(q) || c.dialCode.replace("+", "").includes(q.replace("+", ""))
1720
- );
1721
- }, [allCountries, query]);
1722
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("w-full", className), children: [
1723
- label ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
1724
- "label",
1725
- {
1726
- htmlFor: name,
1727
- className: clsx(
1728
- "mb-1 inline-flex items-center text-sm text-gray-600",
1729
- labelClassName
1730
- ),
1731
- children: [
1732
- label,
1733
- required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : null
1734
- ]
1735
- }
1736
- ) : null,
1737
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1738
- "div",
1739
- {
1740
- className: clsx(
1741
- "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
1742
- inputClassName
1743
- ),
1744
- children: [
1745
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-full", children: [
1746
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1747
- "button",
1748
- {
1749
- ref: buttonRef,
1750
- type: "button",
1751
- "aria-haspopup": "listbox",
1752
- "aria-expanded": open,
1753
- onClick: () => setOpen((v) => !v),
1754
- className: "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm",
1755
- children: [
1756
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-left leading-tight", children: selected ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
1757
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selected.name }),
1758
- selected.region ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
1759
- ", ",
1760
- selected.region
1761
- ] }) : null,
1762
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-gray-700", children: selected.dialCode })
1763
- ] }) : "Select Country/Region" }),
1764
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1765
- "svg",
1766
- {
1767
- className: "ml-2 h-4 w-4 text-gray-500",
1768
- viewBox: "0 0 20 20",
1769
- fill: "currentColor",
1770
- "aria-hidden": "true",
1771
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1772
- "path",
1773
- {
1774
- fillRule: "evenodd",
1775
- d: "M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z",
1776
- clipRule: "evenodd"
1777
- }
1778
- )
1779
- }
1780
- )
1781
- ]
1782
- }
1783
- ),
1784
- open ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
1785
- "div",
1786
- {
1787
- ref: panelRef,
1788
- className: "absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg",
1789
- children: [
1790
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5", children: [
1791
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1792
- "input",
1793
- {
1794
- value: query,
1795
- onChange: (e) => setQuery(e.target.value),
1796
- placeholder: "Enter Country/Region",
1797
- className: "h-8 w-full bg-transparent text-sm outline-none"
1798
- }
1799
- ),
1800
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1801
- "svg",
1802
- {
1803
- className: "h-4 w-4 text-gray-500",
1804
- viewBox: "0 0 20 20",
1805
- fill: "currentColor",
1806
- "aria-hidden": "true",
1807
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1808
- "path",
1809
- {
1810
- fillRule: "evenodd",
1811
- d: "M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z",
1812
- clipRule: "evenodd"
1813
- }
1814
- )
1815
- }
1816
- )
1817
- ] }),
1818
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-h-64 overflow-auto pr-1", children: filtered.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
1819
- "button",
1820
- {
1821
- type: "button",
1822
- onClick: () => {
1823
- onSelectCountry(c);
1824
- setOpen(false);
1825
- },
1826
- className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50",
1827
- children: [
1828
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1829
- "span",
1830
- {
1831
- className: clsx(
1832
- "inline-block h-3 w-3 rounded-full border",
1833
- (selected == null ? void 0 : selected.code) === c.code ? "border-primary-500 ring-4 ring-primary-200" : "border-gray-400"
1834
- )
1835
- }
1836
- ),
1837
- /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex-1 truncate", children: [
1838
- c.name,
1839
- c.region ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
1840
- ", ",
1841
- c.region
1842
- ] }) : null
1843
- ] }),
1844
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700", children: c.dialCode })
1845
- ]
1846
- },
1847
- c.code
1848
- )) })
1849
- ]
1850
- }
1851
- ) : null
1852
- ] }),
1853
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1854
- "input",
1855
- {
1856
- ref,
1857
- id: name,
1858
- name,
1859
- required,
1860
- placeholder: placeholder || "Phone number",
1861
- inputMode: "tel",
1862
- className: clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md"),
1863
- value: localNumber,
1864
- onChange: (e) => {
1865
- const next = e.target.value;
1866
- onChangeLocal(next);
1867
- },
1868
- autoComplete: name,
1869
- autoCorrect: "off",
1870
- spellCheck: false
1871
- }
1872
- )
1873
- ]
1874
- }
1875
- )
1876
- ] });
1877
- }
1878
- );
1879
- const TelInput2 = forwardRef(
1880
- (props, ref) => {
1881
- const {
1882
- label,
1883
- name,
1884
- required,
1885
- requiredClassName,
1886
- className,
1887
- labelClassName,
1888
- inputClassName,
1889
- countries: countries2,
1890
- placeholder,
1891
- selectPlaceholder,
1892
- value,
1893
- onChange
1894
- } = props;
1895
- const { labelRef, paddingLeft } = useInlineLabelPadding(16);
1896
- const {
1897
- allCountries,
1898
- selected,
1899
- localNumber,
1900
- onSelectCountry,
1901
- onChangeLocal
1902
- } = useTelControl({ countries: countries2, name, value, onChange });
1903
- const [open, setOpen] = useState(false);
1904
- const [query, setQuery] = useState("");
1905
- const panelRef = useRef(null);
1906
- const buttonRef = useRef(null);
1907
- const filtered = useMemo(() => {
1908
- if (!query)
1909
- return allCountries;
1910
- const q = query.toLowerCase();
1911
- return allCountries.filter(
1912
- (c) => c.name.toLowerCase().includes(q) || c.region && c.region.toLowerCase().includes(q) || c.dialCode.replace("+", "").includes(q.replace("+", ""))
1913
- );
1914
- }, [allCountries, query]);
1915
- useEffect(() => {
1916
- const onDocClick = (e) => {
1917
- const target = e.target;
1918
- if (open && panelRef.current && !panelRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
1919
- setOpen(false);
1920
- }
1921
- };
1922
- document.addEventListener("mousedown", onDocClick);
1923
- return () => document.removeEventListener("mousedown", onDocClick);
1924
- }, [open]);
1925
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("relative w-full", className), children: [
1926
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1927
- "label",
1928
- {
1929
- ref: labelRef,
1930
- htmlFor: name,
1931
- className: clsx(
1932
- "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
1933
- labelClassName
1934
- ),
1935
- children: [
1936
- label,
1937
- required ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: requiredClassName, children: "*" }) : null
1938
- ]
1939
- }
1940
- ),
1941
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1942
- "div",
1943
- {
1944
- className: clsx(
1945
- "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
1946
- inputClassName
1947
- ),
1948
- style: { paddingLeft },
1949
- children: [
1950
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-full", children: [
1951
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
1952
- "button",
1953
- {
1954
- ref: buttonRef,
1955
- type: "button",
1956
- "aria-haspopup": "listbox",
1957
- "aria-expanded": open,
1958
- onClick: () => setOpen((v) => !v),
1959
- className: "h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm",
1960
- children: [
1961
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-left leading-tight", children: selected ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selected.dialCode }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "+ Code" }) }),
1962
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1963
- "svg",
1964
- {
1965
- className: "ml-2 h-4 w-4 text-gray-500",
1966
- viewBox: "0 0 20 20",
1967
- fill: "currentColor",
1968
- "aria-hidden": "true",
1969
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1970
- "path",
1971
- {
1972
- fillRule: "evenodd",
1973
- d: "M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z",
1974
- clipRule: "evenodd"
1975
- }
1976
- )
1977
- }
1978
- )
1979
- ]
1980
- }
1981
- ),
1982
- open ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
1983
- "div",
1984
- {
1985
- ref: panelRef,
1986
- className: "absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg",
1987
- children: [
1988
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5", children: [
1989
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1990
- "input",
1991
- {
1992
- value: query,
1993
- onChange: (e) => setQuery(e.target.value),
1994
- placeholder: selectPlaceholder || "Enter Country/Region",
1995
- className: "h-8 w-full bg-transparent text-sm outline-none"
1996
- }
1997
- ),
1998
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1999
- "svg",
2000
- {
2001
- className: "h-4 w-4 text-gray-500",
2002
- viewBox: "0 0 20 20",
2003
- fill: "currentColor",
2004
- "aria-hidden": "true",
2005
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2006
- "path",
2007
- {
2008
- fillRule: "evenodd",
2009
- d: "M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z",
2010
- clipRule: "evenodd"
2011
- }
2012
- )
2013
- }
2014
- )
2015
- ] }),
2016
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-h-64 overflow-auto pr-1", children: filtered.map((c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
2017
- "button",
2018
- {
2019
- type: "button",
2020
- onClick: () => {
2021
- onSelectCountry(c);
2022
- setOpen(false);
2023
- },
2024
- className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50",
2025
- children: [
2026
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2027
- "span",
2028
- {
2029
- className: clsx(
2030
- "inline-block h-3 w-3 rounded-full border",
2031
- (selected == null ? void 0 : selected.code) === c.code ? "border-primary-500 ring-4 ring-primary-200" : "border-gray-400"
2032
- )
2033
- }
2034
- ),
2035
- /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex-1 truncate", children: [
2036
- c.name,
2037
- c.region ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
2038
- ", ",
2039
- c.region
2040
- ] }) : null
2041
- ] }),
2042
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-700", children: c.dialCode })
2043
- ]
2044
- },
2045
- c.code
2046
- )) })
2047
- ]
2048
- }
2049
- ) : null
2050
- ] }),
2051
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2052
- "input",
2053
- {
2054
- ref,
2055
- id: name,
2056
- name,
2057
- required,
2058
- placeholder: placeholder || "Phone number",
2059
- inputMode: "tel",
2060
- className: clsx(
2061
- "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none"
2062
- ),
2063
- value: localNumber,
2064
- onChange: (e) => onChangeLocal(e.target.value),
2065
- autoComplete: name,
2066
- autoCorrect: "off",
2067
- spellCheck: false
2068
- }
2069
- )
2070
- ]
2071
- }
2072
- )
2073
- ] });
2074
- }
2075
- );
2076
- const getControl = (controlName, fieldStyle) => {
2077
- switch (controlName) {
2078
- case "Input":
2079
- return getInput(fieldStyle);
2080
- case "Textarea":
2081
- return getTextarea(fieldStyle);
2082
- case "TelInput":
2083
- return getTelInput(fieldStyle);
2084
- default:
2085
- return getInput(fieldStyle);
2086
- }
2087
- };
2088
- const getInput = (fieldStyle) => {
2089
- if (fieldStyle === "default") {
2090
- return Input;
2091
- } else if (fieldStyle === "label-inline") {
2092
- return Input2;
2093
- } else {
2094
- return Input;
2095
- }
2096
- };
2097
- const getTextarea = (fieldStyle) => {
2098
- if (fieldStyle === "default") {
2099
- return Textarea;
2100
- } else if (fieldStyle === "label-inline") {
2101
- return Textarea2;
2102
- } else {
2103
- return Textarea;
2104
- }
2105
- };
2106
- const getTelInput = (fieldStyle) => {
2107
- if (fieldStyle === "label-inline") {
2108
- return TelInput2;
2109
- }
2110
- return TelInput;
2111
- };
2112
- const getFileUpload = (fieldStyle) => {
2113
- if (fieldStyle === "default") {
2114
- return FileUpload2;
2115
- } else if (fieldStyle === "label-inline") {
2116
- return FileUpload2;
2117
- } else {
2118
- return FileUpload2;
2119
- }
2120
- };
2121
- const ContactForm = forwardRef(
2122
- (props, ref) => {
2123
- const {
2124
- submit,
2125
- actionUrl = "/api/ask-for-quote",
2126
- formSalt,
2127
- fields = [],
2128
- className,
2129
- classNames,
2130
- fromCta,
2131
- ...rest
2132
- } = props;
2133
- const [formData, setFormData] = useState({
2134
- name: "",
2135
- email: "",
2136
- company: "",
2137
- message: "",
2138
- phone: "",
2139
- // 初始化蜜罐字段
2140
- attachments: []
2141
- // 附件 ID 列表
2142
- });
2143
- const [errors, setErrors] = useState({});
2144
- const [submitting, setSubmitting] = useState(false);
2145
- const [isUploading, setIsUploading] = useState(false);
2146
- const [submitStatus, setSubmitStatus] = useState({});
2147
- const lastCta = window.lastCta;
2148
- const handleChange = (e, isExtends) => {
2149
- const { name, value } = e.target;
2150
- if (isExtends) {
2151
- setFormData((prev) => ({
2152
- ...prev,
2153
- extents: {
2154
- ...prev.extends || {},
2155
- [name]: value
2156
- }
2157
- }));
2158
- } else {
2159
- setFormData((prev) => ({
2160
- ...prev,
2161
- [name]: value
2162
- }));
2163
- }
2164
- setSubmitStatus({});
2165
- if (errors[name]) {
2166
- setErrors((prev) => ({
2167
- ...prev,
2168
- [name]: void 0
2169
- }));
2170
- }
2171
- };
2172
- const handleFileChange = (fileInfo) => {
2173
- setFormData((prev) => ({
2174
- ...prev,
2175
- attachments: fileInfo ? [fileInfo] : []
2176
- // 存储完整的文件信息
2177
- }));
2178
- };
2179
- const handleFileUploadStateChange = (uploading) => {
2180
- setIsUploading(uploading);
2181
- };
2182
- const validateForm = () => {
2183
- var _a, _b;
2184
- const newErrors = {};
2185
- if (!((_a = formData.email) == null ? void 0 : _a.trim())) {
2186
- newErrors.email = "Please enter your email";
2187
- } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
2188
- newErrors.email = "Please enter a valid email address";
2189
- }
2190
- if (!((_b = formData.message) == null ? void 0 : _b.trim())) {
2191
- newErrors.message = "Please enter your message";
2192
- }
2193
- if (formData.phone) {
2194
- console.log("Honeypot triggered - likely spam submission");
2195
- return false;
2196
- }
2197
- setErrors(newErrors);
2198
- return Object.keys(newErrors).length === 0;
2199
- };
2200
- const handleClick = async (event) => {
2201
- event.preventDefault();
2202
- if (!validateForm()) {
2203
- return;
2204
- }
2205
- try {
2206
- setSubmitting(true);
2207
- setSubmitStatus({});
2208
- const response = await fetch(actionUrl, {
2209
- method: "POST",
2210
- body: JSON.stringify({
2211
- ...formData,
2212
- //TODO:后面改成从window 或者传入
2213
- fromCta: fromCta || lastCta,
2214
- encryptedField: encrypt(formData.phone, formSalt)
2215
- }),
2216
- headers: {
2217
- "X-Request-URL": window.location.href,
2218
- "Content-Type": "application/json"
2219
- }
2220
- });
2221
- if (!response.ok) {
2222
- throw new Error(`Server responded with status: ${response.status}`);
2223
- }
2224
- const result = await response.json();
2225
- setSubmitStatus({
2226
- success: result.success,
2227
- message: result.message
2228
- });
2229
- if (result.success) {
2230
- setFormData({
2231
- name: "",
2232
- email: "",
2233
- company: "",
2234
- message: "",
2235
- phone: "",
2236
- attachments: []
2237
- });
2238
- window.location.href = "/thanks";
2239
- }
2240
- } catch (error) {
2241
- console.error("Form submission error:", error);
2242
- setSubmitStatus({
2243
- success: false,
2244
- message: error instanceof Error ? `Error: ${error.message}` : "Failed to submit the form. Please try again later."
2245
- });
2246
- } finally {
2247
- setSubmitting(false);
2248
- }
2249
- };
2250
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
2251
- "div",
2252
- {
2253
- ref,
2254
- className: clsx(
2255
- "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2 w-full",
2256
- className || "gap-y-6"
2257
- ),
2258
- ...rest,
2259
- children: [
2260
- fields.map((field, index) => {
2261
- const {
2262
- controlName,
2263
- feildStyle,
2264
- isExtends,
2265
- name,
2266
- className: className2,
2267
- inputClassName,
2268
- labelClassName,
2269
- ...rest2
2270
- } = field;
2271
- if (controlName === "FileUpload") {
2272
- const FileUploadControl = getFileUpload(feildStyle);
2273
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2274
- FileUploadControl,
2275
- {
2276
- name: name || "attachments",
2277
- formSalt,
2278
- className: clsx(classNames == null ? void 0 : classNames.inputContainer, className2),
2279
- inputClassName: clsx(classNames == null ? void 0 : classNames.input, inputClassName),
2280
- labelClassName: clsx(classNames == null ? void 0 : classNames.label, labelClassName),
2281
- maxSize: 3 * 1024 * 1024,
2282
- onChange: handleFileChange,
2283
- onUploadStateChange: handleFileUploadStateChange,
2284
- placeholder: "Click to select file",
2285
- uploadingText: "Uploading...",
2286
- selectedText: "Selected: {name}",
2287
- accept: "*/*",
2288
- ...rest2
2289
- },
2290
- name || index
2291
- );
2292
- }
2293
- const Control = getControl(controlName, feildStyle);
2294
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2295
- Control,
2296
- {
2297
- name,
2298
- className: clsx(classNames == null ? void 0 : classNames.inputContainer, className2),
2299
- labelClassName: clsx(classNames == null ? void 0 : classNames.label, labelClassName),
2300
- inputClassName: clsx(classNames == null ? void 0 : classNames.input, inputClassName),
2301
- requiredClassName: classNames == null ? void 0 : classNames.required,
2302
- value: formData[name],
2303
- onChange: (e) => handleChange(e, isExtends),
2304
- error: errors[name],
2305
- ...rest2
2306
- },
2307
- name || index
2308
- );
2309
- }),
2310
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2311
- "input",
2312
- {
2313
- type: "text",
2314
- name: "phone",
2315
- value: formData.phone,
2316
- onChange: handleChange,
2317
- tabIndex: -1,
2318
- autoComplete: "off"
2319
- }
2320
- ) }),
2321
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
2322
- "div",
2323
- {
2324
- className: clsx(
2325
- "col-span-full flex items-center gap-x-6 px-0 py-2",
2326
- submit == null ? void 0 : submit.containerClassName
2327
- ),
2328
- children: [
2329
- submitStatus.message && !submitStatus.success && /* @__PURE__ */ jsxRuntimeExports.jsx(
2330
- "div",
2331
- {
2332
- className: `text-sm ${submitStatus.success ? "text-green-600" : "text-red-600"}`,
2333
- children: submitStatus.message
2334
- }
2335
- ),
2336
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2337
- Submit,
2338
- {
2339
- className: clsx(
2340
- "flex gap-2 items-center relative shadow-sm btn btn-lg nowrap",
2341
- (submit == null ? void 0 : submit.className) || "btn-primary"
2342
- ),
2343
- title: (submit == null ? void 0 : submit.title) || "Send Message",
2344
- spinner: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "left-8 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" }) }),
2345
- rawHtml: submit == null ? void 0 : submit.rawHtml,
2346
- needClasses: submit == null ? void 0 : submit.needClasses,
2347
- submitting,
2348
- disabled: submitting || isUploading,
2349
- onClick: handleClick
2350
- }
2351
- )
2352
- ]
2353
- }
2354
- )
2355
- ]
2356
- }
2357
- );
2358
- }
2359
- );
2360
- const Icon = forwardRef((props, ref) => {
2361
- const { icon, ...rest } = props;
2362
- if (!icon) {
2363
- return null;
2364
- }
2365
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1, { ref, ...rest, icon });
2366
- });
2367
- function VideoPlayer(props) {
2368
- var _a, _b;
2369
- const { media, size = "normal", playButtonClass } = props;
2370
- const videoRef = useRef(null);
2371
- const hlsRef = useRef(null);
2372
- const [isPlaying, setIsPlaying] = useState(false);
2373
- const handlePlayClick = require$$0.useCallback(
2374
- (e) => {
2375
- e.stopPropagation();
2376
- if (videoRef.current) {
2377
- if (isPlaying) {
2378
- videoRef.current.pause();
2379
- } else {
2380
- videoRef.current.play();
2381
- }
2382
- }
2383
- },
2384
- [isPlaying]
2385
- );
2386
- useEffect(() => {
2387
- var _a2;
2388
- if (!videoRef.current || !((_a2 = media.file) == null ? void 0 : _a2.original))
2389
- return;
2390
- const video = videoRef.current;
2391
- const videoUrl = media.file.original;
2392
- const handlePlay = () => {
2393
- setIsPlaying(true);
2394
- };
2395
- const handlePause = () => {
2396
- setIsPlaying(false);
2397
- };
2398
- video.addEventListener("play", handlePlay);
2399
- video.addEventListener("pause", handlePause);
2400
- if (media.storageType === "cloudflare_stream") {
2401
- if (!Hls.isSupported()) {
2402
- if (video.canPlayType("application/vnd.apple.mpegurl")) {
2403
- video.src = videoUrl;
2404
- }
2405
- } else {
2406
- const hls = new Hls({
2407
- enableWorker: true
2408
- });
2409
- hls.loadSource(videoUrl);
2410
- hls.attachMedia(video);
2411
- hlsRef.current = hls;
2412
- }
2413
- } else {
2414
- video.src = videoUrl;
2415
- }
2416
- return () => {
2417
- video.removeEventListener("play", handlePlay);
2418
- video.removeEventListener("pause", handlePause);
2419
- if (hlsRef.current) {
2420
- hlsRef.current.destroy();
2421
- hlsRef.current = null;
2422
- }
2423
- };
2424
- }, [(_a = media.file) == null ? void 0 : _a.original, media.storageType]);
2425
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full h-full group cursor-pointer", onClick: handlePlayClick, children: [
2426
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2427
- "video",
2428
- {
2429
- ref: videoRef,
2430
- preload: "metadata",
2431
- poster: (_b = media.file) == null ? void 0 : _b.thumbnail,
2432
- className: "absolute inset-0 w-full h-full object-cover",
2433
- controls: false,
2434
- playsInline: true
2435
- }
2436
- ),
2437
- !isPlaying && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-black/10 group-hover:bg-black/20 transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2438
- "div",
2439
- {
2440
- className: clsx(
2441
- "rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow-lg transition-all hover:scale-110 backdrop-blur-sm",
2442
- size === "small" ? "w-8 h-8" : "w-14 h-14",
2443
- playButtonClass
2444
- ),
2445
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2446
- "svg",
2447
- {
2448
- xmlns: "http://www.w3.org/2000/svg",
2449
- viewBox: "0 0 24 24",
2450
- fill: "currentColor",
2451
- className: clsx(
2452
- "text-gray-900 ml-1",
2453
- size === "small" ? "w-4 h-4" : "w-8 h-8"
2454
- ),
2455
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2456
- "path",
2457
- {
2458
- fillRule: "evenodd",
2459
- d: "M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.248L7.28 19.987C6.03 20.673 4.5 19.77 4.5 18.562V5.653z",
2460
- clipRule: "evenodd"
2461
- }
2462
- )
2463
- }
2464
- )
2465
- }
2466
- ) })
2467
- ] });
2468
- }
2469
- const MainMedia = ({
2470
- value,
2471
- selectedId,
2472
- aspect,
2473
- enableZoom,
2474
- className,
2475
- arrowButtonClass,
2476
- arrowIconClass,
2477
- playButtonClass,
2478
- onPrevious,
2479
- onNext,
2480
- canPrevious,
2481
- canNext
2482
- }) => {
2483
- const mainAreaRef = useRef(null);
2484
- const [isZoomed, setIsZoomed] = useState(false);
2485
- const [position, setPosition] = useState({ x: 0, y: 0 });
2486
- const hoverTimerRef = useRef(null);
2487
- const lastMousePosRef = useRef({ x: 0, y: 0 });
2488
- const selectedMedia = value == null ? void 0 : value.find((media) => media.id === selectedId);
2489
- const isVideo = (selectedMedia == null ? void 0 : selectedMedia.mediaType) === MediaType.video;
2490
- useEffect(() => {
2491
- setIsZoomed(false);
2492
- setPosition({ x: 0, y: 0 });
2493
- if (hoverTimerRef.current) {
2494
- clearTimeout(hoverTimerRef.current);
2495
- }
2496
- }, [selectedId]);
2497
- useEffect(() => {
2498
- return () => {
2499
- if (hoverTimerRef.current) {
2500
- clearTimeout(hoverTimerRef.current);
2501
- }
2502
- };
2503
- }, []);
2504
- const updateZoomPosition = useCallback((clientX, clientY) => {
2505
- if (mainAreaRef.current) {
2506
- const { left, top, width, height } = mainAreaRef.current.getBoundingClientRect();
2507
- const x = clientX - left;
2508
- const y = clientY - top;
2509
- const ratioX = Math.max(0, Math.min(1, x / width));
2510
- const ratioY = Math.max(0, Math.min(1, y / height));
2511
- const newX = width * (0.5 - ratioX);
2512
- const newY = height * (0.5 - ratioY);
2513
- setPosition({ x: newX, y: newY });
2514
- }
2515
- }, []);
2516
- const handleMouseEnter = useCallback(
2517
- (e) => {
2518
- if (!enableZoom || isVideo)
2519
- return;
2520
- lastMousePosRef.current = { x: e.clientX, y: e.clientY };
2521
- hoverTimerRef.current = setTimeout(() => {
2522
- setIsZoomed(true);
2523
- updateZoomPosition(
2524
- lastMousePosRef.current.x,
2525
- lastMousePosRef.current.y
2526
- );
2527
- }, 1e3);
2528
- },
2529
- [enableZoom, isVideo, updateZoomPosition]
2530
- );
2531
- const handleMouseMove = useCallback(
2532
- (e) => {
2533
- if (!enableZoom || isVideo)
2534
- return;
2535
- lastMousePosRef.current = { x: e.clientX, y: e.clientY };
2536
- if (isZoomed) {
2537
- updateZoomPosition(e.clientX, e.clientY);
2538
- }
2539
- },
2540
- [enableZoom, isVideo, isZoomed, updateZoomPosition]
2541
- );
2542
- const handleMouseLeave = useCallback(() => {
2543
- if (hoverTimerRef.current) {
2544
- clearTimeout(hoverTimerRef.current);
2545
- }
2546
- setIsZoomed(false);
2547
- setPosition({ x: 0, y: 0 });
2548
- }, []);
2549
- const handleClick = useCallback(
2550
- (e) => {
2551
- if (!enableZoom || isVideo)
2552
- return;
2553
- if (hoverTimerRef.current) {
2554
- clearTimeout(hoverTimerRef.current);
2555
- }
2556
- if (isZoomed) {
2557
- setIsZoomed(false);
2558
- setPosition({ x: 0, y: 0 });
2559
- } else {
2560
- setIsZoomed(true);
2561
- updateZoomPosition(e.clientX, e.clientY);
2562
- }
2563
- },
2564
- [enableZoom, isVideo, isZoomed, updateZoomPosition]
2565
- );
2566
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
2567
- "div",
2568
- {
2569
- ref: mainAreaRef,
2570
- className: clsx(
2571
- "relative group overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 z-0",
2572
- aspect,
2573
- className,
2574
- enableZoom && !isVideo && "cursor-crosshair"
2575
- ),
2576
- onMouseEnter: handleMouseEnter,
2577
- onMouseMove: handleMouseMove,
2578
- onMouseLeave: handleMouseLeave,
2579
- onClick: handleClick,
2580
- children: [
2581
- !isZoomed && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 flex items-center justify-between p-4 pointer-events-none z-20", children: [
2582
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2583
- "button",
2584
- {
2585
- onClick: (e) => {
2586
- e.stopPropagation();
2587
- onPrevious();
2588
- },
2589
- disabled: !canPrevious,
2590
- className: clsx(
2591
- "pointer-events-auto transition-all duration-200 rounded-full p-2",
2592
- "bg-white/80 dark:bg-black/50 backdrop-blur-sm shadow-sm",
2593
- "hover:bg-white dark:hover:bg-black/70 hover:scale-105 active:scale-95",
2594
- "text-gray-800 dark:text-white",
2595
- !canPrevious ? "opacity-0 translate-x-[-10px]" : "opacity-0 group-hover:opacity-100 translate-x-0",
2596
- arrowButtonClass
2597
- ),
2598
- "aria-label": "Previous slide",
2599
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2600
- "svg",
2601
- {
2602
- xmlns: "http://www.w3.org/2000/svg",
2603
- className: clsx("h-5 w-5", arrowIconClass),
2604
- fill: "none",
2605
- viewBox: "0 0 24 24",
2606
- stroke: "currentColor",
2607
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2608
- "path",
2609
- {
2610
- strokeLinecap: "round",
2611
- strokeLinejoin: "round",
2612
- strokeWidth: 2,
2613
- d: "M15 19l-7-7 7-7"
2614
- }
2615
- )
2616
- }
2617
- )
2618
- }
2619
- ),
2620
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2621
- "button",
2622
- {
2623
- onClick: (e) => {
2624
- e.stopPropagation();
2625
- onNext();
2626
- },
2627
- disabled: !canNext,
2628
- className: clsx(
2629
- "pointer-events-auto transition-all duration-200 rounded-full p-2",
2630
- "bg-white/80 dark:bg-black/50 backdrop-blur-sm shadow-sm",
2631
- "hover:bg-white dark:hover:bg-black/70 hover:scale-105 active:scale-95",
2632
- "text-gray-800 dark:text-white",
2633
- !canNext ? "opacity-0 translate-x-[10px]" : "opacity-0 group-hover:opacity-100 translate-x-0",
2634
- arrowButtonClass
2635
- ),
2636
- "aria-label": "Next slide",
2637
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2638
- "svg",
2639
- {
2640
- xmlns: "http://www.w3.org/2000/svg",
2641
- className: clsx("h-5 w-5", arrowIconClass),
2642
- fill: "none",
2643
- viewBox: "0 0 24 24",
2644
- stroke: "currentColor",
2645
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2646
- "path",
2647
- {
2648
- strokeLinecap: "round",
2649
- strokeLinejoin: "round",
2650
- strokeWidth: 2,
2651
- d: "M9 5l7 7-7 7"
2652
- }
2653
- )
2654
- }
2655
- )
2656
- }
2657
- )
2658
- ] }),
2659
- value == null ? void 0 : value.map((media) => {
2660
- var _a, _b;
2661
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2662
- "div",
2663
- {
2664
- className: clsx(
2665
- "absolute inset-0 transition-opacity duration-500 ease-in-out",
2666
- media.id === selectedId ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"
2667
- ),
2668
- children: media.mediaType === MediaType.video ? /* @__PURE__ */ jsxRuntimeExports.jsx(VideoPlayer, { media, playButtonClass }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
2669
- "img",
2670
- {
2671
- src: ((_a = media == null ? void 0 : media.file) == null ? void 0 : _a.resize) || ((_b = media == null ? void 0 : media.file) == null ? void 0 : _b.url),
2672
- alt: media == null ? void 0 : media.alt,
2673
- className: "w-full h-full object-cover object-center origin-center",
2674
- style: {
2675
- transform: media.id === selectedId ? `translate(${position.x}px, ${position.y}px) scale(${isZoomed ? 2 : 1})` : void 0,
2676
- transition: isZoomed ? "none" : "transform 0.3s ease-out"
2677
- }
2678
- }
2679
- )
2680
- },
2681
- media.id
2682
- );
2683
- })
2684
- ]
2685
- }
2686
- );
2687
- };
2688
- const Thumbnail = ({
2689
- media,
2690
- isSelected,
2691
- onClick,
2692
- aspect,
2693
- className,
2694
- imageClass,
2695
- playButtonClass
2696
- }) => {
2697
- var _a, _b, _c;
2698
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2699
- "div",
2700
- {
2701
- className: clsx(
2702
- "relative cursor-pointer overflow-hidden rounded-lg transition-all duration-200",
2703
- aspect,
2704
- isSelected ? "ring-2 ring-primary ring-offset-2 ring-offset-white dark:ring-offset-gray-950" : "opacity-70 hover:opacity-100 hover:ring-2 hover:ring-gray-200 dark:hover:ring-gray-700",
2705
- className
2706
- ),
2707
- onClick,
2708
- children: media.mediaType === MediaType.video ? /* @__PURE__ */ jsxRuntimeExports.jsx(
2709
- "div",
2710
- {
2711
- className: clsx(
2712
- "w-full h-full relative pointer-events-none [&>div]:!aspect-auto [&>div]:!w-full [&>div]:!h-full transition-transform duration-500",
2713
- isSelected ? "scale-110" : "scale-100",
2714
- imageClass
2715
- ),
2716
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(VideoPlayer, { media, size: "small", playButtonClass })
2717
- }
2718
- ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
2719
- "img",
2720
- {
2721
- src: ((_a = media == null ? void 0 : media.file) == null ? void 0 : _a.thumbnail) || ((_b = media == null ? void 0 : media.file) == null ? void 0 : _b.resize) || ((_c = media == null ? void 0 : media.file) == null ? void 0 : _c.url),
2722
- alt: media == null ? void 0 : media.alt,
2723
- className: clsx(
2724
- "w-full h-full object-cover transition-transform duration-500",
2725
- isSelected ? "scale-110" : "scale-100",
2726
- imageClass
2727
- )
2728
- }
2729
- )
2730
- }
2731
- );
2732
- };
2733
- const Medias = forwardRef((props, ref) => {
2734
- var _a;
2735
- const {
2736
- value,
2737
- className,
2738
- children,
2739
- aspect = "aspect-[1/1]",
2740
- thumbnailAspect = "aspect-[1/1]",
2741
- enableZoom = true,
2742
- thumbnailPosition = "bottom",
2743
- visibleCount = 6,
2744
- classNames,
2745
- ...rest
2746
- } = props;
2747
- const {
2748
- mainArea,
2749
- navigation,
2750
- thumbnail,
2751
- thumbnailImage,
2752
- arrowButton,
2753
- arrowIcon,
2754
- playButton,
2755
- navigationInner
2756
- } = classNames || {};
2757
- const [selectedId, setSelectedId] = useState(
2758
- ((_a = value == null ? void 0 : value[0]) == null ? void 0 : _a.id) || ""
2759
- );
2760
- useEffect(() => {
2761
- var _a2;
2762
- setSelectedId(((_a2 = value == null ? void 0 : value[0]) == null ? void 0 : _a2.id) || "");
2763
- }, [value]);
2764
- const selectedIndex = (value == null ? void 0 : value.findIndex((media) => media.id === selectedId)) || 0;
2765
- const totalItems = (value == null ? void 0 : value.length) || 0;
2766
- const handlePrevious = useCallback(() => {
2767
- var _a2;
2768
- if (selectedIndex > 0) {
2769
- const prevIndex = selectedIndex - 1;
2770
- setSelectedId(((_a2 = value == null ? void 0 : value[prevIndex]) == null ? void 0 : _a2.id) || "");
2771
- }
2772
- }, [selectedIndex, value]);
2773
- const handleNext = useCallback(() => {
2774
- var _a2;
2775
- if (selectedIndex < totalItems - 1) {
2776
- const currentMediaIndex = (value == null ? void 0 : value.findIndex((media) => media.id === selectedId)) || 0;
2777
- const nextIndex = currentMediaIndex + 1;
2778
- setSelectedId(((_a2 = value == null ? void 0 : value[nextIndex]) == null ? void 0 : _a2.id) || "");
2779
- }
2780
- }, [selectedIndex, totalItems, value, selectedId]);
2781
- const handleKeyDown = useCallback(
2782
- (e) => {
2783
- if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
2784
- handlePrevious();
2785
- } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
2786
- handleNext();
2787
- }
2788
- },
2789
- [handleNext, handlePrevious]
2790
- );
2791
- useEffect(() => {
2792
- window.addEventListener("keydown", handleKeyDown);
2793
- return () => window.removeEventListener("keydown", handleKeyDown);
2794
- }, [handleKeyDown]);
2795
- const canPrevious = selectedIndex > 0;
2796
- const canNext = selectedIndex < totalItems - 1;
2797
- const isVerticalThumbs = thumbnailPosition === "left";
2798
- const actualVisibleCount = visibleCount;
2799
- const halfVisible = Math.floor(actualVisibleCount / 2);
2800
- const startIndex = Math.max(
2801
- 0,
2802
- Math.min(selectedIndex - halfVisible, totalItems - actualVisibleCount)
2803
- );
2804
- const endIndex = Math.min(startIndex + actualVisibleCount, totalItems);
2805
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
2806
- "div",
2807
- {
2808
- ref,
2809
- className: clsx(
2810
- "flex gap-4",
2811
- isVerticalThumbs ? "flex-col md:flex-row-reverse" : "flex-col",
2812
- className
2813
- ),
2814
- ...rest,
2815
- children: [
2816
- children,
2817
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2818
- MainMedia,
2819
- {
2820
- value,
2821
- selectedId,
2822
- aspect,
2823
- enableZoom,
2824
- className: clsx(
2825
- isVerticalThumbs ? "w-full md:flex-1" : "w-full",
2826
- mainArea
2827
- ),
2828
- arrowButtonClass: arrowButton,
2829
- arrowIconClass: arrowIcon,
2830
- playButtonClass: playButton,
2831
- onPrevious: handlePrevious,
2832
- onNext: handleNext,
2833
- canPrevious,
2834
- canNext
2835
- }
2836
- ),
2837
- totalItems > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
2838
- "div",
2839
- {
2840
- className: clsx(
2841
- "relative group/thumbs",
2842
- isVerticalThumbs ? "w-full mt-4 md:w-24 md:h-full md:px-1" : "w-full mt-4",
2843
- navigation
2844
- ),
2845
- children: [
2846
- totalItems > actualVisibleCount && /* @__PURE__ */ jsxRuntimeExports.jsx(
2847
- "button",
2848
- {
2849
- onClick: handlePrevious,
2850
- disabled: !canPrevious,
2851
- className: clsx(
2852
- "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
2853
- "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
2854
- "text-gray-700 dark:text-gray-200 transition-all duration-200",
2855
- isVerticalThumbs ? "left-2 top-1/2 -translate-y-1/2 md:top-2 md:left-1/2 md:-translate-x-1/2" : "left-2 top-1/2 -translate-y-1/2",
2856
- !canPrevious ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
2857
- arrowButton
2858
- ),
2859
- "aria-label": "Previous",
2860
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2861
- "svg",
2862
- {
2863
- xmlns: "http://www.w3.org/2000/svg",
2864
- className: clsx(
2865
- "h-4 w-4",
2866
- isVerticalThumbs && "md:rotate-90",
2867
- arrowIcon
2868
- ),
2869
- fill: "none",
2870
- viewBox: "0 0 24 24",
2871
- stroke: "currentColor",
2872
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2873
- "path",
2874
- {
2875
- strokeLinecap: "round",
2876
- strokeLinejoin: "round",
2877
- strokeWidth: 2,
2878
- d: "M15 19l-7-7 7-7"
2879
- }
2880
- )
2881
- }
2882
- )
2883
- }
2884
- ),
2885
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2886
- "div",
2887
- {
2888
- className: clsx(
2889
- "flex-1",
2890
- isVerticalThumbs ? "w-full px-0.5 md:h-full md:py-0.5" : "w-full px-0.5"
2891
- ),
2892
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2893
- "div",
2894
- {
2895
- className: clsx(
2896
- "gap-2 md:gap-3",
2897
- navigationInner,
2898
- isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
2899
- ),
2900
- style: {
2901
- gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`
2902
- },
2903
- children: value == null ? void 0 : value.map((media, index) => {
2904
- if (index < startIndex || index >= endIndex)
2905
- return null;
2906
- const isSelected = selectedId === media.id;
2907
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2908
- Thumbnail,
2909
- {
2910
- media,
2911
- isSelected,
2912
- onClick: () => setSelectedId(media.id),
2913
- aspect: thumbnailAspect,
2914
- className: thumbnail,
2915
- imageClass: thumbnailImage,
2916
- playButtonClass: playButton
2917
- },
2918
- media.id
2919
- );
2920
- })
2921
- }
2922
- )
2923
- }
2924
- ),
2925
- totalItems > actualVisibleCount && /* @__PURE__ */ jsxRuntimeExports.jsx(
2926
- "button",
2927
- {
2928
- onClick: handleNext,
2929
- disabled: !canNext,
2930
- className: clsx(
2931
- "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
2932
- "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
2933
- "text-gray-700 dark:text-gray-200 transition-all duration-200",
2934
- isVerticalThumbs ? "right-2 top-1/2 -translate-y-1/2 md:bottom-2 md:left-1/2 md:-translate-x-1/2" : "right-2 top-1/2 -translate-y-1/2",
2935
- !canNext ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
2936
- arrowButton
2937
- ),
2938
- "aria-label": "Next",
2939
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2940
- "svg",
2941
- {
2942
- xmlns: "http://www.w3.org/2000/svg",
2943
- className: clsx(
2944
- "h-4 w-4",
2945
- isVerticalThumbs && "md:rotate-90",
2946
- arrowIcon
2947
- ),
2948
- fill: "none",
2949
- viewBox: "0 0 24 24",
2950
- stroke: "currentColor",
2951
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2952
- "path",
2953
- {
2954
- strokeLinecap: "round",
2955
- strokeLinejoin: "round",
2956
- strokeWidth: 2,
2957
- d: "M9 5l7 7-7 7"
2958
- }
2959
- )
2960
- }
2961
- )
2962
- }
2963
- )
2964
- ]
2965
- }
2966
- )
2967
- ]
2968
- }
2969
- );
2970
- });
2971
- const style$3 = "";
2972
- function ProductCta(props) {
2973
- const { product, openableKey = "enquiry-modal", children } = props;
2974
- const roleProps = {
2975
- "data-modal-open": openableKey,
2976
- "data-call-to-action": `From RichText ProductCard-${product == null ? void 0 : product.title}-${product == null ? void 0 : product.id}`
2977
- };
2978
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2979
- "button",
2980
- {
2981
- ...roleProps,
2982
- className: "product-cta-button relative flex-1 mt-2 flex items-center justify-center rounded-md border border-transparent bg-sky-600 text-md font-smibold text-white hover:bg-sky-700",
2983
- type: "button",
2984
- children: children || "Get a quote"
2985
- }
2986
- ) });
2987
- }
2988
- const style$2 = "";
2989
- function ProductTitle(props) {
2990
- const { className, ...rest } = props;
2991
- return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "product-title " + className, ...rest });
2992
- }
2993
- const style$1 = "";
2994
- function ProductDescription(props) {
2995
- const { className, ...rest } = props;
2996
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
2997
- "p",
2998
- {
2999
- className: clsx("product-description", className),
3000
- ...rest
3001
- }
3002
- );
3003
- }
3004
- const style = "";
3005
- function ProductMedia(props) {
3006
- const { product, style: style2, width, className, aspect, ...rest } = props;
3007
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3008
- "div",
3009
- {
3010
- className: "product-media " + className,
3011
- style: {
3012
- aspectRatio: aspect || "4 / 3",
3013
- borderRadius: "1rem",
3014
- overflow: "hidden",
3015
- ...style2,
3016
- width
3017
- },
3018
- ...rest,
3019
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3020
- "img",
3021
- {
3022
- style: {
3023
- width: "100%"
3024
- },
3025
- src: product == null ? void 0 : product.coverUrl,
3026
- alt: product == null ? void 0 : product.title
3027
- }
3028
- )
3029
- }
3030
- );
3031
- }
3032
- function ProductView(props) {
3033
- const { product, ctaTitle, node } = props;
3034
- const title = (node == null ? void 0 : node.title) || (product == null ? void 0 : product.title);
3035
- const description = (node == null ? void 0 : node.description) || (product == null ? void 0 : product.description);
3036
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(Figure, { children: [
3037
- /* @__PURE__ */ jsxRuntimeExports.jsx(FigureContent, { width: node == null ? void 0 : node.width, align: node == null ? void 0 : node.align, children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `/products/${product == null ? void 0 : product.slug}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProductMedia, { product, aspect: node == null ? void 0 : node.aspect }) }) }),
3038
- /* @__PURE__ */ jsxRuntimeExports.jsxs(Figcaption, { width: node == null ? void 0 : node.width, align: node == null ? void 0 : node.align, children: [
3039
- /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `/products/${product == null ? void 0 : product.slug}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProductTitle, { children: title }) }),
3040
- /* @__PURE__ */ jsxRuntimeExports.jsx(ProductDescription, { children: description }),
3041
- /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCta, { product, children: ctaTitle })
3042
- ] })
3043
- ] });
3044
- }
3045
- const PRODUCT_KEY = "Product";
3046
- const ProductCard = ({ node }) => {
3047
- return /* @__PURE__ */ jsxRuntimeExports.jsx(ProductView, { product: node == null ? void 0 : node.product, node, ctaTitle: node == null ? void 0 : node.ctaTitle });
3048
- };
3049
- function throttle(fn, wait, options = {}) {
3050
- const { leading = true, trailing = true } = options;
3051
- let timeoutId = null;
3052
- let lastInvokeTime = 0;
3053
- let lastArgs = null;
3054
- const invoke = (time, args) => {
3055
- lastInvokeTime = time;
3056
- fn(...args);
3057
- };
3058
- const throttled = (...args) => {
3059
- const now = Date.now();
3060
- if (!lastInvokeTime && !leading) {
3061
- lastInvokeTime = now;
3062
- }
3063
- const remaining = wait - (now - lastInvokeTime);
3064
- lastArgs = args;
3065
- if (remaining <= 0 || remaining > wait) {
3066
- if (timeoutId) {
3067
- clearTimeout(timeoutId);
3068
- timeoutId = null;
3069
- }
3070
- invoke(now, args);
3071
- lastArgs = null;
3072
- return;
3073
- }
3074
- if (!timeoutId && trailing) {
3075
- timeoutId = setTimeout(() => {
3076
- timeoutId = null;
3077
- if (lastArgs) {
3078
- invoke(leading ? Date.now() : 0, lastArgs);
3079
- lastArgs = null;
3080
- }
3081
- }, remaining);
3082
- }
3083
- };
3084
- throttled.cancel = () => {
3085
- if (timeoutId) {
3086
- clearTimeout(timeoutId);
3087
- timeoutId = null;
3088
- }
3089
- lastArgs = null;
3090
- lastInvokeTime = 0;
3091
- };
3092
- return throttled;
3093
- }
3094
- function useAcitviedHeading(yOffset = 200) {
3095
- const [activeId, setActiveId] = useState(null);
3096
- const anchorElementsRef = useRef([]);
3097
- const lastScrollTopRef = useRef(0);
3098
- const activeIdRef = useRef(null);
3099
- useEffect(() => {
3100
- activeIdRef.current = activeId;
3101
- }, [activeId]);
3102
- useEffect(() => {
3103
- anchorElementsRef.current = Array.from(
3104
- document.querySelectorAll('a[href^="#"]')
3105
- );
3106
- }, []);
3107
- const handleScroll = useCallback(() => {
3108
- const scrollTop = window.scrollY;
3109
- lastScrollTopRef.current = scrollTop;
3110
- let closestId = null;
3111
- let closestDistance = Infinity;
3112
- anchorElementsRef.current.forEach((element) => {
3113
- var _a;
3114
- const id = ((_a = element.getAttribute("href")) == null ? void 0 : _a.slice(1)) || "";
3115
- const targetElement = document.getElementById(id);
3116
- if (targetElement) {
3117
- const { top } = targetElement.getBoundingClientRect();
3118
- const distance = Math.abs(top);
3119
- if (top <= yOffset && distance < closestDistance) {
3120
- closestId = id;
3121
- closestDistance = distance;
3122
- }
3123
- }
3124
- });
3125
- if (activeIdRef.current !== closestId) {
3126
- setActiveId(closestId);
3127
- }
3128
- }, [yOffset]);
3129
- const throttledHandleScroll = useMemo(
3130
- () => throttle(handleScroll, 100, { leading: true, trailing: true }),
3131
- [handleScroll]
3132
- );
3133
- useEffect(() => {
3134
- const handleHashChange = () => {
3135
- const hash = window.location.hash.substring(1);
3136
- setActiveId(hash);
3137
- const element = document.getElementById(hash);
3138
- if (element) {
3139
- const y = element.getBoundingClientRect().top + window.scrollY - yOffset;
3140
- window.scrollTo({ top: y, behavior: "smooth" });
3141
- }
3142
- };
3143
- window.addEventListener("hashchange", handleHashChange);
3144
- window.addEventListener("scroll", throttledHandleScroll);
3145
- handleHashChange();
3146
- return () => {
3147
- window.removeEventListener("hashchange", handleHashChange);
3148
- window.removeEventListener("scroll", throttledHandleScroll);
3149
- throttledHandleScroll.cancel();
3150
- };
3151
- }, [handleScroll, throttledHandleScroll, yOffset]);
3152
- return activeId;
3153
- }
3154
- const RichTextOutline = forwardRef((props, ref) => {
3155
- const { className, itemClassName, value, yOffset = 200, ...rest } = props;
3156
- const activiedId = useAcitviedHeading(yOffset);
3157
- const doc = mdxToTiptap(value ?? "");
3158
- const outline = extractOutlineFromTiptap(doc);
3159
- useEffect(() => {
3160
- const handleHashChange = () => {
3161
- const element = document.getElementById(
3162
- window.location.hash.substring(1)
3163
- );
3164
- if (element) {
3165
- const y = element.getBoundingClientRect().top + window.scrollY - yOffset;
3166
- window.scrollTo({ top: y, behavior: "smooth" });
3167
- }
3168
- };
3169
- window.addEventListener("hashchange", handleHashChange);
3170
- return () => {
3171
- window.removeEventListener("hashchange", handleHashChange);
3172
- };
3173
- }, [yOffset]);
3174
- return (outline == null ? void 0 : outline.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref, className, ...rest, children: outline == null ? void 0 : outline.map((item, index) => {
3175
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3176
- "li",
3177
- {
3178
- className: clsx(
3179
- activiedId === (item == null ? void 0 : item.key) ? "actived" : "",
3180
- itemClassName
3181
- ),
3182
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3183
- "a",
3184
- {
3185
- href: `#${item == null ? void 0 : item.key}`,
3186
- onClick: (e) => {
3187
- e.preventDefault();
3188
- const element = document.getElementById(item == null ? void 0 : item.key);
3189
- if (element) {
3190
- const y = element.getBoundingClientRect().top + window.scrollY + yOffset;
3191
- window.scrollTo({ top: y, behavior: "smooth" });
3192
- }
3193
- },
3194
- children: item == null ? void 0 : item.text
3195
- }
3196
- )
3197
- },
3198
- (item == null ? void 0 : item.key) + index
3199
- );
3200
- }) }) : null;
3201
- });
3202
- const iconList = {
3203
- linkedin: {
3204
- title: "LinkedIn",
3205
- path: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z" }),
3206
- color: "#0073b1",
3207
- url: (l, t, ti) => `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(l)}&title=${encodeURIComponent(ti || "")}&summary=${encodeURIComponent(t || "")}`
3208
- },
3209
- facebook: {
3210
- title: "Facebook",
3211
- path: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M24 12a12 12 0 10-13.9 11.9v-8.4h-3V12h3V9.4c0-3 1.8-4.7 4.6-4.7l2.6.2v3h-1.5c-1.5 0-2 .9-2 1.8V12h3.4l-.5 3.5h-2.8v8.4A12 12 0 0024 12z" }),
3212
- color: "#0076FB",
3213
- url: (l) => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(l)}`
3214
- },
3215
- twitter: {
3216
- title: "X",
3217
- path: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }),
3218
- color: "#0F1419",
3219
- url: (l, t) => `https://twitter.com/intent/tweet?text=${t}&url=${encodeURIComponent(l)}`
3220
- },
3221
- whatsapp: {
3222
- title: "WhatsApp",
3223
- path: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.5 14.4l-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.3-.6.1s-1.3-.5-2.4-1.5a9 9 0 01-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5h-.6c-.2 0-.5 0-.8.4-.2.3-1 1-1 2.5s1 2.8 1.2 3c.2.2 2.1 3.2 5.1 4.5l1.7.6a4 4 0 001.9.2c.5-.1 1.7-.8 2-1.5.2-.6.2-1.2.1-1.4l-.5-.3M12 21.8a9.9 9.9 0 01-5-1.4l-.4-.2-3.7 1 1-3.7-.2-.3a9.9 9.9 0 01-1.5-5.3 9.9 9.9 0 0116.8-7 9.8 9.8 0 013 7 9.9 9.9 0 01-10 9.9m8.4-18.3A11.8 11.8 0 0012.1 0 12 12 0 001.8 17.8L0 24l6.4-1.6a11.9 11.9 0 005.6 1.4 12 12 0 0012-11.9 11.8 11.8 0 00-3.5-8.4z" }),
3224
- color: "#25D366",
3225
- url: (l, t) => `https://api.whatsapp.com/send?text=${encodeURIComponent(t || "")} ${encodeURIComponent(l)}`
3226
- },
3227
- reddit: {
3228
- title: "Reddit",
3229
- path: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm5.01 4.74c.69 0 1.25.56 1.25 1.25a1.25 1.25 0 01-2.5.06l-2.6-.55-.8 3.75c1.83.07 3.48.63 4.68 1.49.3-.31.73-.5 1.2-.5.97 0 1.76.8 1.76 1.76 0 .72-.43 1.33-1.01 1.61a3.11 3.11 0 01.04.52c0 2.7-3.13 4.87-7 4.87-3.88 0-7-2.17-7-4.87 0-.18 0-.36.04-.53A1.75 1.75 0 014.03 12a1.75 1.75 0 012.96-1.26 8.52 8.52 0 014.74-1.5l.89-4.17a.34.34 0 01.14-.2.35.35 0 01.24-.04l2.9.62a1.21 1.21 0 011.11-.7zM9.25 12a1.25 1.25 0 101.25 1.25c0-.69-.56-1.25-1.25-1.25zm5.5 0a1.25 1.25 0 000 2.5 1.25 1.25 0 000-2.5zm-5.47 3.99a.33.33 0 00-.23.1.33.33 0 000 .46c.84.84 2.49.91 2.96.91.48 0 2.1-.06 2.96-.91a.36.36 0 00.03-.47.33.33 0 00-.46 0c-.55.54-1.68.73-2.51.73-.83 0-1.98-.2-2.51-.73a.33.33 0 00-.24-.1z" }),
3230
- color: "#FF4500",
3231
- url: (l, t) => `https://www.reddit.com/submit?url=${encodeURIComponent(l)}&title=${encodeURIComponent(t || "")}`
3232
- }
3233
- // telegram: {
3234
- // title: "Telegram",
3235
- // path: (
3236
- // <path d="M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7.85 12c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z" />
3237
- // ),
3238
- // color: "#0088CC",
3239
- // url: (l, t) => `https://telegram.me/share/msg?url=${encodeURIComponent(l)}&text=${encodeURIComponent(t || "")}`,
3240
- // },
3241
- // pinterest: {
3242
- // title: "Pinterest",
3243
- // path: (
3244
- // <path d="M0 12C0 17.123 3.211 21.497 7.73 23.218C7.62 22.281 7.503 20.736 7.755 19.652C7.972 18.72 9.156 13.714 9.156 13.714C9.156 13.714 8.799 12.999 8.799 11.94C8.799 10.28 9.761 9.04 10.96 9.04C11.98 9.04 12.472 9.805 12.472 10.722C12.472 11.747 11.819 13.279 11.482 14.7C11.201 15.889 12.079 16.859 13.251 16.859C15.374 16.859 17.007 14.62 17.007 11.388C17.007 8.527 14.951 6.528 12.016 6.528C8.618 6.528 6.623 9.077 6.623 11.712C6.623 12.739 7.018 13.839 7.512 14.438C7.55412 14.4832 7.58387 14.5386 7.59841 14.5986C7.61295 14.6587 7.61177 14.7215 7.595 14.781C7.504 15.159 7.302 15.97 7.263 16.136C7.21 16.354 7.09 16.401 6.863 16.295C5.371 15.601 4.439 13.42 4.439 11.668C4.439 7.899 7.176 4.439 12.331 4.439C16.475 4.439 19.696 7.392 19.696 11.338C19.696 15.455 17.101 18.769 13.497 18.769C12.286 18.769 11.149 18.139 10.759 17.396C10.759 17.396 10.16 19.678 10.015 20.236C9.733 21.32 8.951 22.692 8.466 23.471C9.584 23.815 10.77 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12Z" />
3245
- // ),
3246
- // color: "#c8232c",
3247
- // url: (l) => `http://pinterest.com/pin/create/link/?url=${encodeURIComponent(l)}`,
3248
- // },
3249
- // email: {
3250
- // title: "Email",
3251
- // path: (
3252
- // <path d="M20 4H4a2 2 0 00-2 2v12c0 1.1.9 2 2 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
3253
- // ),
3254
- // color: "#E53E3E",
3255
- // url: (l, t) => `mailto:?body=${encodeURIComponent(l)}&subject=${encodeURIComponent(t || "")}`,
3256
- // },
3257
- };
3258
- function getPageDetails() {
3259
- var _a;
3260
- if (typeof window === "undefined") {
3261
- return null;
3262
- }
3263
- const details = {
3264
- url: (_a = window == null ? void 0 : window.location) == null ? void 0 : _a.href,
3265
- title: (document == null ? void 0 : document.title) || "null",
3266
- description: "null"
3267
- // 默认为空字符串
3268
- };
3269
- const descriptionMetaTag = document.querySelector('meta[name="description"]');
3270
- if (descriptionMetaTag) {
3271
- details.description = descriptionMetaTag.content;
3272
- }
3273
- return details;
3274
- }
3275
- const Share = forwardRef(
3276
- (props, ref) => {
3277
- const { className, classNames, ...rest } = props;
3278
- const [socialList, setSolicalList] = useState();
3279
- const details = getPageDetails();
3280
- useEffect(() => {
3281
- setSolicalList(iconList);
3282
- }, [props.socials]);
3283
- const generateLink = (key) => {
3284
- const social = iconList[key];
3285
- if (!social)
3286
- return "#";
3287
- return social.url(
3288
- (details == null ? void 0 : details.url) || "",
3289
- details == null ? void 0 : details.title,
3290
- details == null ? void 0 : details.description
3291
- );
3292
- };
3293
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: clsx("flex items-center", className), ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex space-x-3", children: Object.keys(socialList || {}).map((key) => /* @__PURE__ */ jsxRuntimeExports.jsx(
3294
- "a",
3295
- {
3296
- href: generateLink(key),
3297
- target: "_blank",
3298
- rel: "noopener noreferrer",
3299
- title: `Share on ${iconList[key].title}`,
3300
- className: clsx(
3301
- "flex h-6 w-6 items-center justify-center ",
3302
- classNames == null ? void 0 : classNames.item
3303
- ),
3304
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3305
- "svg",
3306
- {
3307
- className: clsx("w-5 h-5", classNames == null ? void 0 : classNames.itemIcon),
3308
- fill: "currentColor",
3309
- viewBox: "0 0 24 24",
3310
- focusable: "false",
3311
- "aria-hidden": "true",
3312
- children: iconList[key].path
3313
- }
3314
- )
3315
- },
3316
- key
3317
- )) }) });
3318
- }
3319
- );
3320
- const defaultThreshold = 10;
3321
- function Scroller(props) {
3322
- const { threshold = defaultThreshold } = props;
3323
- const ref = useRef(null);
3324
- const [win, setWin] = useState(null);
3325
- useEffect(() => {
3326
- if (ref.current) {
3327
- setWin(ref.current.ownerDocument.defaultView);
3328
- }
3329
- }, []);
3330
- const onScroll = useCallback(() => {
3331
- if (!win)
3332
- return;
3333
- const scrolled = win.scrollY > threshold;
3334
- const doc = win.document;
3335
- if (scrolled) {
3336
- doc.body.classList.add("scrolled");
3337
- } else {
3338
- doc.body.classList.remove("scrolled");
3339
- }
3340
- }, [threshold, win]);
3341
- useEffect(() => {
3342
- if (!win)
3343
- return;
3344
- win.addEventListener("scroll", onScroll);
3345
- return () => win.removeEventListener("scroll", onScroll);
3346
- }, [onScroll, win]);
3347
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, style: { display: "none" } });
3348
- }
3349
- const SearchInput = forwardRef(
3350
- (props, ref) => {
3351
- const { children, ...rest } = props;
3352
- const [keyword, setKeyword] = useState();
3353
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3354
- "input",
3355
- {
3356
- ref,
3357
- name: "q",
3358
- value: keyword,
3359
- onChange: (e) => setKeyword(e.target.value),
3360
- ...rest
3361
- }
3362
- );
3363
- }
3364
- );
3365
- const topIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsx(
3366
- "svg",
3367
- {
3368
- className: "h-6 w-6",
3369
- width: "1.5rem",
3370
- height: "1.5rem",
3371
- fill: "none",
3372
- viewBox: "0 0 24 24",
3373
- stroke: "currentColor",
3374
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3375
- "path",
3376
- {
3377
- strokeLinecap: "round",
3378
- strokeLinejoin: "round",
3379
- strokeWidth: 2,
3380
- d: "M5 15l7-7 7 7"
3381
- }
3382
- )
3383
- }
3384
- );
3385
- const ToTop = forwardRef((props, ref) => {
3386
- const { className, svg, ...rest } = props;
3387
- const [win, setWin] = useState(null);
3388
- const innerRef = useRef(null);
3389
- useEffect(() => {
3390
- if (!innerRef.current)
3391
- return;
3392
- const currentWin = innerRef.current.ownerDocument.defaultView;
3393
- setWin(currentWin);
3394
- if (ref && typeof ref === "object") {
3395
- ref.current = innerRef.current;
3396
- }
3397
- }, [ref]);
3398
- const handleClick = () => {
3399
- if (win) {
3400
- win.scrollTo({ top: 0, behavior: "smooth" });
3401
- } else if (typeof window !== "undefined") {
3402
- window.scrollTo({ top: 0, behavior: "smooth" });
3403
- }
3404
- };
3405
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3406
- "div",
3407
- {
3408
- ref: innerRef,
3409
- className: clsx(
3410
- "fixed bottom-4 right-4 hidden user-select-none shadow-lg scrolled:flex cursor-pointer transition duration-300 ease-in-out z-50",
3411
- className
3412
- ),
3413
- ...rest,
3414
- onClick: handleClick,
3415
- children: svg ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "contents", dangerouslySetInnerHTML: { __html: svg } }) : topIcon()
3416
- }
3417
- );
3418
- });
3419
- function BackgroundVideoPlayer(props) {
3420
- const { poster, src, className, ...restProps } = props;
3421
- const videoRef = useRef(null);
3422
- useEffect(() => {
3423
- if (videoRef.current) {
3424
- const video = videoRef.current;
3425
- video.play().catch((error) => {
3426
- console.log("自动播放失败:", error);
3427
- });
3428
- }
3429
- }, []);
3430
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3431
- "video",
3432
- {
3433
- ref: videoRef,
3434
- autoPlay: true,
3435
- loop: true,
3436
- muted: true,
3437
- playsInline: true,
3438
- poster,
3439
- className,
3440
- preload: "metadata",
3441
- src,
3442
- ...restProps
3443
- }
3444
- );
3445
- }
3446
- const FORBIDDEN_PROPS = /* @__PURE__ */ new Set([
3447
- "createMetadata",
3448
- "createComponent",
3449
- "createAstro",
3450
- "renderComponent",
3451
- "renderSlot",
3452
- "render",
3453
- "addAttribute",
3454
- "spreadAttributes",
3455
- "defineStyleVars",
3456
- "defineScriptVars",
3457
- "Fragment",
3458
- "unescapeHTML",
3459
- "maybeRenderHead",
3460
- "renderHead",
3461
- "slots",
3462
- "props",
3463
- "children"
3464
- ]);
3465
- function BackgroundHlsVideoPlayer(props) {
3466
- const { poster, src, className, ...rawRestProps } = props;
3467
- const restProps = {};
3468
- for (const [k, v] of Object.entries(rawRestProps)) {
3469
- if (FORBIDDEN_PROPS.has(k))
3470
- continue;
3471
- if (k.startsWith("_"))
3472
- continue;
3473
- if (typeof v === "function")
3474
- continue;
3475
- restProps[k] = v;
3476
- }
3477
- const videoRef = useRef(null);
3478
- useEffect(() => {
3479
- if (!videoRef.current || !src)
3480
- return;
3481
- const video = videoRef.current;
3482
- if (!Hls.isSupported()) {
3483
- if (video.canPlayType("application/vnd.apple.mpegurl")) {
3484
- video.src = src;
3485
- video.play().catch(() => {
3486
- });
3487
- }
3488
- return;
3489
- }
3490
- const hls = new Hls({
3491
- enableWorker: true
3492
- });
3493
- hls.on(Hls.Events.MANIFEST_PARSED, () => {
3494
- video.play().catch(() => {
3495
- });
3496
- });
3497
- hls.on(Hls.Events.ERROR, (event, data) => {
3498
- if (data.fatal) {
3499
- switch (data.type) {
3500
- case Hls.ErrorTypes.NETWORK_ERROR:
3501
- hls.startLoad();
3502
- break;
3503
- case Hls.ErrorTypes.MEDIA_ERROR:
3504
- hls.recoverMediaError();
3505
- break;
3506
- default:
3507
- hls.destroy();
3508
- break;
3509
- }
3510
- }
3511
- });
3512
- hls.loadSource(src);
3513
- hls.attachMedia(video);
3514
- return () => {
3515
- hls.destroy();
3516
- };
3517
- }, [src]);
3518
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3519
- "video",
3520
- {
3521
- ref: videoRef,
3522
- autoPlay: true,
3523
- loop: true,
3524
- muted: true,
3525
- playsInline: true,
3526
- poster,
3527
- className,
3528
- preload: "metadata",
3529
- ...restProps
3530
- }
3531
- );
3532
- }
3533
- function Bulletin(props) {
3534
- const { className, ...rest } = props;
3535
- const [bulletin, setBulletin] = useState(null);
3536
- useEffect(() => {
3537
- fetch("/api/get-bulletin").then((res) => res.json()).then((res) => {
3538
- if (res.success) {
3539
- setBulletin(res.data);
3540
- }
3541
- }).catch((err) => {
3542
- console.error("Failed to fetch bulletin", err);
3543
- });
3544
- }, []);
3545
- console.log("====>bulletin", bulletin);
3546
- if (!bulletin)
3547
- return null;
3548
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className, ...rest, children: bulletin.content });
3549
- }
3550
- function ReactModalTrigger(props) {
3551
- const {
3552
- className,
3553
- callToAction,
3554
- openableKey = "enquiry-modal",
3555
- children
3556
- } = props;
3557
- const roleProps = {
3558
- "data-modal-open": openableKey,
3559
- "data-call-to-action": callToAction
3560
- };
3561
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3562
- "button",
3563
- {
3564
- ...roleProps,
3565
- className,
3566
- type: "button",
3567
- children: children || "Get a quote"
3568
- }
3569
- );
3570
- }
3571
- function VideoPlayIcon(props) {
3572
- const { classNames } = props;
3573
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
3574
- "div",
3575
- {
3576
- className: clsx$1(
3577
- "flex items-center justify-center w-14 h-14 lg:w-[130px] lg:h-[130px] bg-white/15 rounded-full backdrop-blur-sm hover:shadow-md transition-all duration-300 hover:scale-110 group",
3578
- classNames == null ? void 0 : classNames.playButtonOuter
3579
- ),
3580
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3581
- "div",
3582
- {
3583
- className: clsx$1(
3584
- "w-10 h-10 lg:w-[90px] lg:h-[90px] bg-white relative overflow-hidden rounded-full",
3585
- classNames == null ? void 0 : classNames.playButtonInner
3586
- ),
3587
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 cross-gradient box-shadow-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
3588
- "svg",
3589
- {
3590
- className: clsx$1(
3591
- "size-4 lg:size-8 text-gray-700",
3592
- classNames == null ? void 0 : classNames.playIcon
3593
- ),
3594
- viewBox: "0 0 30 32",
3595
- fill: "currentColor",
3596
- xmlns: "http://www.w3.org/2000/svg",
3597
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M27.2003 19.4972C29.945 17.9735 29.945 14.0264 27.2003 12.5027L6.44148 0.978573C3.77538 -0.501503 0.5 1.42643 0.5 4.47581V27.5241C0.5 30.5735 3.77537 32.5014 6.44147 31.0214L27.2003 19.4972Z" })
3598
- }
3599
- ) }) })
3600
- }
3601
- )
3602
- }
3603
- );
3604
- }
3605
- const ReactVideoPlayer = forwardRef((props, ref) => {
3606
- var _a, _b, _c, _d;
3607
- const {
3608
- endTitle,
3609
- media,
3610
- onToggleSelect,
3611
- posterUrl,
3612
- eagerLoad,
3613
- classNames,
3614
- callToAction,
3615
- designMode,
3616
- children,
3617
- ...rest
3618
- } = props;
3619
- const videoRef = useRef(null);
3620
- const hlsRef = useRef(null);
3621
- const [isPlaying, setIsPlaying] = useState(false);
3622
- const [isEnded, setIsEnded] = useState(false);
3623
- const [isSourceReady, setIsSourceReady] = useState(false);
3624
- const sourceReadyRef = useRef(false);
3625
- const [isLoading, setIsLoading] = useState(false);
3626
- const isEndedRef = useRef(false);
3627
- const [hasStarted, setHasStarted] = useState(false);
3628
- const ensureSourceReady = useCallback(() => {
3629
- var _a2;
3630
- const video = videoRef.current;
3631
- const url = (_a2 = media == null ? void 0 : media.file) == null ? void 0 : _a2.original;
3632
- if (!video || !url)
3633
- return false;
3634
- if (sourceReadyRef.current)
3635
- return true;
3636
- if ((media == null ? void 0 : media.storageType) === "cloudflare_stream") {
3637
- if (!Hls.isSupported()) {
3638
- if (video.canPlayType("application/vnd.apple.mpegurl")) {
3639
- video.src = url;
3640
- sourceReadyRef.current = true;
3641
- setIsSourceReady(true);
3642
- return true;
3643
- }
3644
- return false;
3645
- }
3646
- const hls = new Hls({ enableWorker: true });
3647
- hls.on(Hls.Events.ERROR, (_event, data) => {
3648
- if (data.fatal) {
3649
- switch (data.type) {
3650
- case Hls.ErrorTypes.NETWORK_ERROR:
3651
- hls.startLoad();
3652
- break;
3653
- case Hls.ErrorTypes.MEDIA_ERROR:
3654
- hls.recoverMediaError();
3655
- break;
3656
- default:
3657
- hls.destroy();
3658
- break;
3659
- }
3660
- }
3661
- });
3662
- hls.loadSource(url);
3663
- hls.attachMedia(video);
3664
- hlsRef.current = hls;
3665
- sourceReadyRef.current = true;
3666
- setIsSourceReady(true);
3667
- return true;
3668
- }
3669
- video.src = url;
3670
- sourceReadyRef.current = true;
3671
- setIsSourceReady(true);
3672
- return true;
3673
- }, [(_a = media == null ? void 0 : media.file) == null ? void 0 : _a.original, media == null ? void 0 : media.storageType]);
3674
- const handleContainerClick = useCallback(
3675
- (e) => {
3676
- if (designMode)
3677
- return;
3678
- if (isPlaying && videoRef.current) {
3679
- e.stopPropagation();
3680
- videoRef.current.pause();
3681
- return;
3682
- }
3683
- if ((media == null ? void 0 : media.id) != null) {
3684
- onToggleSelect == null ? void 0 : onToggleSelect(media.id);
3685
- }
3686
- },
3687
- [isPlaying, media == null ? void 0 : media.id, onToggleSelect, designMode]
3688
- );
3689
- const handlePlayClick = useCallback(
3690
- (e) => {
3691
- if (designMode)
3692
- return;
3693
- e.stopPropagation();
3694
- const v = videoRef.current;
3695
- if (!v)
3696
- return;
3697
- if (isPlaying) {
3698
- v.pause();
3699
- return;
3700
- }
3701
- const ok = ensureSourceReady();
3702
- if (!ok)
3703
- return;
3704
- setIsLoading(true);
3705
- v.play().catch((error) => {
3706
- console.log("ReactVideoPlayer play() failed:", error);
3707
- setIsLoading(false);
3708
- });
3709
- },
3710
- [isPlaying, designMode, ensureSourceReady]
3711
- );
3712
- useEffect(() => {
3713
- const video = videoRef.current;
3714
- if (!video)
3715
- return;
3716
- video.pause();
3717
- if (hlsRef.current) {
3718
- hlsRef.current.destroy();
3719
- hlsRef.current = null;
3720
- }
3721
- video.removeAttribute("src");
3722
- video.load();
3723
- setIsSourceReady(false);
3724
- sourceReadyRef.current = false;
3725
- const onPlay = () => {
3726
- setIsPlaying(true);
3727
- setIsEnded(false);
3728
- isEndedRef.current = false;
3729
- setIsLoading(false);
3730
- setHasStarted(true);
3731
- };
3732
- const onPause = () => setIsPlaying(false);
3733
- const onEnded = () => {
3734
- setIsPlaying(false);
3735
- setIsEnded(true);
3736
- isEndedRef.current = true;
3737
- setIsLoading(false);
3738
- };
3739
- const onWaiting = () => {
3740
- if (!isEndedRef.current)
3741
- setIsLoading(true);
3742
- };
3743
- const onCanPlay = () => {
3744
- setIsLoading(false);
3745
- };
3746
- video.addEventListener("play", onPlay);
3747
- video.addEventListener("pause", onPause);
3748
- video.addEventListener("ended", onEnded);
3749
- video.addEventListener("waiting", onWaiting);
3750
- video.addEventListener("canplay", onCanPlay);
3751
- video.addEventListener("playing", onCanPlay);
3752
- if (eagerLoad) {
3753
- ensureSourceReady();
3754
- }
3755
- return () => {
3756
- video.removeEventListener("play", onPlay);
3757
- video.removeEventListener("pause", onPause);
3758
- video.removeEventListener("ended", onEnded);
3759
- video.removeEventListener("waiting", onWaiting);
3760
- video.removeEventListener("canplay", onCanPlay);
3761
- video.removeEventListener("playing", onCanPlay);
3762
- if (hlsRef.current) {
3763
- hlsRef.current.destroy();
3764
- hlsRef.current = null;
3765
- }
3766
- };
3767
- }, [eagerLoad, ensureSourceReady, (_b = media == null ? void 0 : media.file) == null ? void 0 : _b.original, media == null ? void 0 : media.storageType]);
3768
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(
3769
- "div",
3770
- {
3771
- ref,
3772
- className: clsx(
3773
- "relative w-full rounded-2xl",
3774
- (classNames == null ? void 0 : classNames.aspect) ?? "aspect-video",
3775
- classNames == null ? void 0 : classNames.container
3776
- ),
3777
- onClick: handleContainerClick,
3778
- ...rest,
3779
- children: [
3780
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
3781
- "video",
3782
- {
3783
- ref: videoRef,
3784
- onClick: (e) => !designMode && e.stopPropagation(),
3785
- preload: eagerLoad ? "metadata" : "none",
3786
- poster: posterUrl ?? ((_c = media == null ? void 0 : media.file) == null ? void 0 : _c.thumbnail),
3787
- className: clsx(
3788
- "w-full h-full rounded-lg object-cover",
3789
- classNames == null ? void 0 : classNames.video
3790
- ),
3791
- playsInline: true,
3792
- controls: !designMode && hasStarted,
3793
- disablePictureInPicture: true,
3794
- controlsList: "nodownload noremoteplayback noplaybackrate",
3795
- children: [
3796
- !(media == null ? void 0 : media.storageType) && ((_d = media == null ? void 0 : media.file) == null ? void 0 : _d.original) && (eagerLoad || isSourceReady) ? /* @__PURE__ */ jsxRuntimeExports.jsx("source", { src: media.file.original }) : null,
3797
- "Your browser does not support video playback."
3798
- ]
3799
- }
3800
- ),
3801
- !isPlaying && !isEnded && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
3802
- "button",
3803
- {
3804
- type: "button",
3805
- onClick: handlePlayClick,
3806
- className: clsx(
3807
- "absolute inset-0 items-center justify-center w-full h-full transition rounded-lg z-10",
3808
- hasStarted ? "hidden md:flex" : "flex",
3809
- classNames == null ? void 0 : classNames.playButton
3810
- ),
3811
- children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(VideoPlayIcon, { classNames })
3812
- }
3813
- ),
3814
- !isPlaying && !isEnded && isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
3815
- "div",
3816
- {
3817
- className: clsx(
3818
- "absolute inset-0 flex items-center justify-center w-full h-full rounded-lg z-10 bg-black/20",
3819
- classNames == null ? void 0 : classNames.loadingOverlay
3820
- ),
3821
- onClick: (e) => e.stopPropagation(),
3822
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
3823
- "div",
3824
- {
3825
- className: clsx(
3826
- "flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white",
3827
- classNames == null ? void 0 : classNames.loadingContent
3828
- ),
3829
- children: [
3830
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }),
3831
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: "Loading..." })
3832
- ]
3833
- }
3834
- )
3835
- }
3836
- ),
3837
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
3838
- "div",
3839
- {
3840
- className: clsx(
3841
- "absolute inset-0 bg-black/50 flex-col gap-6 items-center justify-center text-center text-white hidden z-10 rounded-2xl",
3842
- classNames == null ? void 0 : classNames.overlay
3843
- ),
3844
- style: { display: isEnded ? "flex" : "none" },
3845
- children: [
3846
- /* @__PURE__ */ jsxRuntimeExports.jsx(
3847
- "p",
3848
- {
3849
- className: clsx("text-4xl drop-shadow-lg", classNames == null ? void 0 : classNames.overlayTitle),
3850
- children: endTitle ?? "Contact Us Now"
3851
- }
3852
- ),
3853
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
3854
- /* @__PURE__ */ jsxRuntimeExports.jsx(
3855
- ReactModalTrigger,
3856
- {
3857
- className: clsx(
3858
- "btn btn-primary px-10 py-2.5 rounded-full ripple",
3859
- classNames == null ? void 0 : classNames.ctaButton
3860
- ),
3861
- callToAction,
3862
- children: "Consult Now"
3863
- }
3864
- ),
3865
- /* @__PURE__ */ jsxRuntimeExports.jsx(
3866
- "button",
3867
- {
3868
- type: "button",
3869
- className: clsx(
3870
- "px-10 py-2.5 bg-white/20 hover:bg-white/30 rounded-full transition text-sm",
3871
- classNames == null ? void 0 : classNames.overlayReplayButton
3872
- ),
3873
- onClick: (e) => {
3874
- e.stopPropagation();
3875
- const v = videoRef.current;
3876
- if (!v)
3877
- return;
3878
- const ok = ensureSourceReady();
3879
- if (!ok)
3880
- return;
3881
- setIsLoading(true);
3882
- v.currentTime = 0;
3883
- setIsEnded(false);
3884
- v.play().catch((error) => {
3885
- console.log("ReactVideoPlayer play() failed:", error);
3886
- setIsLoading(false);
3887
- });
3888
- },
3889
- children: "Replay"
3890
- }
3891
- )
3892
- ] })
3893
- ]
3894
- }
3895
- )
3896
- ]
3897
- }
3898
- );
3899
- });
1
+ import { Analytics, AttachmentIcon, BackgroundVideoPlayer, Bulletin, Icon, Scroller, SearchInput, Share, ToTop } from "./ui.mjs";
2
+ import { defaultThreshold, topIcon } from "./ui.mjs";
3
+ import { ContactForm } from "./forms.mjs";
4
+ import { FileUpload2, Input, Submit, Textarea, encrypt, verifyEncryption } from "./forms.mjs";
5
+ import { R as ReactModalTrigger } from "./ReactModalTrigger-9207e763.js";
6
+ import "./jsx-runtime-c02cc059.js";
7
+ import "react";
8
+ import "@iconify/react";
9
+ import "clsx";
3900
10
  const allCoreComponents = {
3901
11
  Analytics,
3902
12
  AttachmentIcon,
3903
- BackgroundHlsVideoPlayer,
3904
13
  BackgroundVideoPlayer,
3905
14
  Bulletin,
3906
15
  ContactForm,
3907
16
  Icon,
3908
- Medias,
3909
- ProductCard,
3910
- ProductCta,
3911
- ProductDescription,
3912
- ProductMedia,
3913
- ProductTitle,
3914
17
  ReactModalTrigger,
3915
- ReactVideoPlayer,
3916
- RichTextOutline,
3917
18
  Scroller,
3918
19
  SearchInput,
3919
20
  Share,
@@ -3922,23 +23,13 @@ const allCoreComponents = {
3922
23
  export {
3923
24
  Analytics,
3924
25
  AttachmentIcon,
3925
- BackgroundHlsVideoPlayer,
3926
26
  BackgroundVideoPlayer,
3927
27
  Bulletin,
3928
28
  ContactForm,
3929
29
  FileUpload2,
3930
30
  Icon,
3931
31
  Input,
3932
- Medias,
3933
- PRODUCT_KEY,
3934
- ProductCard,
3935
- ProductCta,
3936
- ProductDescription,
3937
- ProductMedia,
3938
- ProductTitle,
3939
32
  ReactModalTrigger,
3940
- ReactVideoPlayer,
3941
- RichTextOutline,
3942
33
  Scroller,
3943
34
  SearchInput,
3944
35
  Share,