@anker-in/ui 0.1.9 → 0.1.11

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 (13) hide show
  1. package/dist/demo-room.d.mts +3 -57
  2. package/dist/demo-room.d.ts +3 -57
  3. package/dist/demo-room.js +123 -303
  4. package/dist/demo-room.js.map +1 -1
  5. package/dist/demo-room.mjs +124 -302
  6. package/dist/demo-room.mjs.map +1 -1
  7. package/dist/index.d.mts +3 -2
  8. package/dist/index.d.ts +3 -2
  9. package/dist/index.js +559 -359
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +559 -359
  12. package/dist/index.mjs.map +1 -1
  13. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -61,7 +61,10 @@ var StudioCard = ({
61
61
  "div",
62
62
  {
63
63
  ...props,
64
- className: cn("p-6 cursor-pointer transition-colors duration-200", className),
64
+ className: cn(
65
+ "p-6 cursor-pointer transition-colors duration-200 border-b border-[#E4E5E6] last:border-b-0",
66
+ className
67
+ ),
65
68
  style: {
66
69
  backgroundColor: isHovered ? "#f3f4f6" : "transparent",
67
70
  ...style
@@ -76,14 +79,14 @@ var StudioCard = ({
76
79
  },
77
80
  children: [
78
81
  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
79
- /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
80
- distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
82
+ /* @__PURE__ */ jsx("h3", { className: "text-[24px] l:text-[20px] font-bold text-[#080A0F]", children: name }),
83
+ distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-[16px] l:text-[14px] font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
81
84
  formatDistance(distance),
82
85
  " ",
83
86
  pageData.away
84
87
  ] })
85
88
  ] }),
86
- /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
89
+ availableTime && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
87
90
  /* @__PURE__ */ jsxs(
88
91
  "svg",
89
92
  {
@@ -136,8 +139,8 @@ var StudioCard = ({
136
139
  ]
137
140
  }
138
141
  ),
139
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
140
- pageData.available,
142
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-[16px] l:text-[12px] text-[#2A2C32]", children: [
143
+ availableTime === pageData.noAvailableTime ? "" : pageData.available,
141
144
  " ",
142
145
  availableTime
143
146
  ] }) })
@@ -172,7 +175,7 @@ var StudioCard = ({
172
175
  ]
173
176
  }
174
177
  ),
175
- /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
178
+ /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32] break-words", children: address }) })
176
179
  ] }),
177
180
  /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
178
181
  /* @__PURE__ */ jsxs(
@@ -180,55 +183,44 @@ var StudioCard = ({
180
183
  {
181
184
  width: "20",
182
185
  height: "20",
183
- viewBox: "0 0 20 20",
186
+ viewBox: "0 0 24 24",
184
187
  fill: "none",
185
188
  xmlns: "http://www.w3.org/2000/svg",
186
189
  className: "flex-shrink-0 mt-0.5",
187
190
  children: [
188
- /* @__PURE__ */ jsx(
189
- "rect",
190
- {
191
- x: "3",
192
- y: "5",
193
- width: "14",
194
- height: "10",
195
- rx: "1.5",
196
- stroke: "currentColor",
197
- strokeWidth: "1.5"
198
- }
199
- ),
200
191
  /* @__PURE__ */ jsx(
201
192
  "path",
202
193
  {
203
- d: "M7 15V17",
194
+ d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
204
195
  stroke: "currentColor",
205
- strokeWidth: "1.5",
206
- strokeLinecap: "round"
196
+ strokeWidth: "2",
197
+ strokeLinecap: "round",
198
+ strokeLinejoin: "round"
207
199
  }
208
200
  ),
209
201
  /* @__PURE__ */ jsx(
210
202
  "path",
211
203
  {
212
- d: "M13 15V17",
204
+ d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
213
205
  stroke: "currentColor",
214
- strokeWidth: "1.5",
215
- strokeLinecap: "round"
206
+ strokeWidth: "2",
207
+ strokeLinecap: "round",
208
+ strokeLinejoin: "round"
216
209
  }
217
- ),
218
- /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
210
+ )
219
211
  ]
220
212
  }
221
213
  ),
222
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: euifyMakeModel }) })
214
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32]", children: euifyMakeModel }) })
223
215
  ] }),
224
216
  /* @__PURE__ */ jsx(
225
217
  "button",
226
218
  {
227
219
  onClick: handleScheduleClick,
228
220
  className: cn(
229
- "w-full px-6 py-3 rounded-full",
230
- "bg-white text-gray-900 border border-gray-900",
231
- "font-medium text-sm",
221
+ "w-fit px-[28px] l:px-[20px] l:py-[8px] py-3 rounded-full",
222
+ "bg-white text-gray-900 border-2 border-gray-900",
223
+ "font-bold text-[16px] l:text-[14px]",
232
224
  "hover:bg-gray-900 hover:text-white",
233
225
  "transition-all duration-200"
234
226
  ),
@@ -348,14 +340,12 @@ var StudioMap = ({
348
340
  const lng = Number(location.lng);
349
341
  const svgIcon = {
350
342
  url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
351
- <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
352
- <circle cx="24" cy="24" r="22" fill="#00000010"/>
353
- <circle cx="24" cy="24" r="10" fill="#000000"/>
354
- <circle cx="24" cy="24" r="5" fill="#3ADB67"/>
343
+ <svg xmlns="http://www.w3.org/2000/svg" width="34" height="44" viewBox="0 0 17 22" fill="none">
344
+ <path d="M8.5 0C13.1944 0 17 3.80557 17 8.5C17 12.1044 14.94 15.4573 13.0264 17.8174C12.0543 19.0162 11.0847 20.0016 10.3584 20.6875C9.99466 21.031 9.69081 21.3018 9.47559 21.4873C9.36796 21.5801 9.28226 21.6518 9.22266 21.7012C9.19285 21.7259 9.16878 21.7444 9.15234 21.7578C9.14444 21.7642 9.13843 21.7697 9.13379 21.7734C9.13156 21.7752 9.12935 21.7772 9.12793 21.7783L9.12598 21.7803H9.125C9.12232 21.7774 9.08429 21.7304 8.5 21L9.125 21.7812C8.75978 22.0734 8.24022 22.0734 7.875 21.7812L8.5 21C7.91571 21.7304 7.87768 21.7774 7.875 21.7803H7.87402L7.87207 21.7783C7.87065 21.7772 7.86844 21.7752 7.86621 21.7734C7.86157 21.7697 7.85556 21.7642 7.84766 21.7578C7.83122 21.7444 7.80715 21.7259 7.77734 21.7012C7.71774 21.6518 7.63204 21.5801 7.52441 21.4873C7.30919 21.3018 7.00534 21.031 6.6416 20.6875C5.91533 20.0016 4.94566 19.0162 3.97363 17.8174C2.06001 15.4573 0 12.1044 0 8.5C0 3.80557 3.80557 0 8.5 0ZM8.5 2C4.91013 2 2 4.91013 2 8.5C2 11.3955 3.69006 14.2928 5.52637 16.5576C6.4292 17.6711 7.33473 18.5922 8.01465 19.2344C8.19381 19.4036 8.3573 19.5526 8.5 19.6807C8.6427 19.5526 8.80619 19.4036 8.98535 19.2344C9.66527 18.5922 10.5708 17.6711 11.4736 16.5576C13.3099 14.2928 15 11.3955 15 8.5C15 4.91013 12.0899 2 8.5 2ZM8.5 4.59961C10.6539 4.59961 12.4004 6.34609 12.4004 8.5C12.4004 10.6539 10.6539 12.4004 8.5 12.4004C6.34609 12.4004 4.59961 10.6539 4.59961 8.5C4.59961 6.34609 6.34609 4.59961 8.5 4.59961ZM8.5 6.40039C7.34021 6.40039 6.40039 7.34021 6.40039 8.5C6.40039 9.65979 7.34021 10.5996 8.5 10.5996C9.65979 10.5996 10.5996 9.65979 10.5996 8.5C10.5996 7.34021 9.65979 6.40039 8.5 6.40039Z" fill="#3D3D3F"/>
355
345
  </svg>
356
346
  `)}`,
357
- scaledSize: { width: 48, height: 48 },
358
- anchor: { x: 24, y: 24 }
347
+ scaledSize: { width: 34, height: 44 },
348
+ anchor: { x: 17, y: 44 }
359
349
  };
360
350
  const marker = new google.maps.Marker({
361
351
  position: { lat, lng },
@@ -366,41 +356,53 @@ var StudioMap = ({
366
356
  marker.addListener("click", () => {
367
357
  setSelectedLocation(location);
368
358
  const content = `
369
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
370
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
371
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
372
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
373
- <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
359
+ <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
360
+ <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
361
+ ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
362
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
363
+ <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
364
+ <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
365
+ <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
366
+ <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
374
367
  </svg>
375
- <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
368
+ <div>
369
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
370
+ </div>
376
371
  </div>` : ""}
377
- <div style="margin-bottom: 8px; color: #666;">
378
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
379
- <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
372
+ <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
373
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
374
+ <path d="M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
375
+ <path d="M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
380
376
  </svg>
381
- <span style="vertical-align: middle;">${location.address}</span>
377
+ <div style="flex: 1;">
378
+ <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
379
+ </div>
382
380
  </div>
383
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
384
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
385
- <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
381
+ ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
382
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
383
+ <path d="M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
384
+ <path d="M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
386
385
  </svg>
387
- <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
386
+ <div>
387
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
388
+ </div>
388
389
  </div>` : ""}
389
390
  <button
390
391
  id="schedule-btn-${location.id}"
391
392
  style="
392
- width: 100%;
393
- padding: 10px 16px;
394
- background: #000;
395
- color: #fff;
396
- border: none;
397
- border-radius: 6px;
398
- font-weight: 500;
393
+ width: fit-content;
394
+ padding: 12px 28px;
395
+ background: #fff;
396
+ color: #111827;
397
+ border: 2px solid #111827;
398
+ border-radius: 9999px;
399
+ font-weight: 700;
399
400
  cursor: pointer;
400
- font-size: 14px;
401
+ font-size: 16px;
402
+ transition: all 0.2s;
401
403
  "
402
- onmouseover="this.style.background='#333'"
403
- onmouseout="this.style.background='#000'"
404
+ onmouseover="this.style.background='#111827'; this.style.color='#fff';"
405
+ onmouseout="this.style.background='#fff'; this.style.color='#111827';"
404
406
  >
405
407
  ${pageData.scheduleNow}
406
408
  </button>
@@ -452,41 +454,53 @@ var StudioMap = ({
452
454
  const marker = markersRef.current[markerIndex];
453
455
  if (location && marker) {
454
456
  const content = `
455
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
456
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
457
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
458
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
459
- <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
457
+ <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
458
+ <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
459
+ ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
460
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
461
+ <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
462
+ <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
463
+ <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
464
+ <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
460
465
  </svg>
461
- <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
466
+ <div>
467
+ <p style="margin: 0;font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
468
+ </div>
462
469
  </div>` : ""}
463
- <div style="margin-bottom: 8px; color: #666;">
464
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
465
- <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
470
+ <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
471
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
472
+ <path d="M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
473
+ <path d="M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
466
474
  </svg>
467
- <span style="vertical-align: middle;">${location.address}</span>
475
+ <div style="flex: 1;">
476
+ <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
477
+ </div>
468
478
  </div>
469
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
470
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
471
- <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
479
+ ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
480
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
481
+ <path d="M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
482
+ <path d="M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
472
483
  </svg>
473
- <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
484
+ <div>
485
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
486
+ </div>
474
487
  </div>` : ""}
475
488
  <button
476
489
  id="schedule-btn-hover-${location.id}"
477
490
  style="
478
- width: 100%;
479
- padding: 10px 16px;
480
- background: #000;
481
- color: #fff;
482
- border: none;
483
- border-radius: 6px;
484
- font-weight: 500;
491
+ width: fit-content;
492
+ padding: 12px 28px;
493
+ background: #fff;
494
+ color: #111827;
495
+ border: 2px solid #111827;
496
+ border-radius: 9999px;
497
+ font-weight: 700;
485
498
  cursor: pointer;
486
- font-size: 14px;
499
+ font-size: 16px;
500
+ transition: all 0.2s;
487
501
  "
488
- onmouseover="this.style.background='#333'"
489
- onmouseout="this.style.background='#000'"
502
+ onmouseover="this.style.background='#111827'; this.style.color='#fff';"
503
+ onmouseout="this.style.background='#fff'; this.style.color='#111827';"
490
504
  >
491
505
  ${pageData.scheduleNow}
492
506
  </button>
@@ -976,9 +990,9 @@ var LocationFilter = ({
976
990
  "div",
977
991
  {
978
992
  style: { background: "#F8F8F8" },
979
- className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
993
+ className: "rounded-[12px] rounded-b-none h-[108px] font-bold text-[14px] flex flex-col",
980
994
  children: [
981
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
995
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[24px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
982
996
  "button",
983
997
  {
984
998
  onClick: onClose,
@@ -1002,14 +1016,14 @@ var LocationFilter = ({
1002
1016
  )
1003
1017
  }
1004
1018
  ) }),
1005
- /* @__PURE__ */ jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
1019
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[16px]", children: [
1006
1020
  /* @__PURE__ */ jsx(
1007
1021
  "button",
1008
1022
  {
1009
1023
  onClick: () => handleTabClick("country"),
1010
1024
  className: cn(
1011
1025
  "pb-[4px] transition-colors",
1012
- currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
1026
+ currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
1013
1027
  ),
1014
1028
  children: pageData.country
1015
1029
  }
@@ -1021,7 +1035,7 @@ var LocationFilter = ({
1021
1035
  disabled: !selectedCountry,
1022
1036
  className: cn(
1023
1037
  "pb-[4px] transition-colors",
1024
- currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1038
+ currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
1025
1039
  !selectedCountry && "opacity-50 cursor-not-allowed"
1026
1040
  ),
1027
1041
  children: pageData.state
@@ -1034,7 +1048,7 @@ var LocationFilter = ({
1034
1048
  disabled: !selectedState,
1035
1049
  className: cn(
1036
1050
  "pb-[4px] transition-colors",
1037
- currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1051
+ currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
1038
1052
  !selectedState && "opacity-50 cursor-not-allowed"
1039
1053
  ),
1040
1054
  children: pageData.city
@@ -1044,12 +1058,13 @@ var LocationFilter = ({
1044
1058
  ]
1045
1059
  }
1046
1060
  ),
1047
- /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
1061
+ /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 108px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
1048
1062
  const { title, items } = group;
1049
1063
  return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
1050
1064
  List.Item,
1051
1065
  {
1052
1066
  onClick: () => handleItemClick(item),
1067
+ className: "text-[16px] !pl-[24px]",
1053
1068
  style: { cursor: "pointer" },
1054
1069
  children: item.name
1055
1070
  },
@@ -1059,6 +1074,7 @@ var LocationFilter = ({
1059
1074
  List.Item,
1060
1075
  {
1061
1076
  onClick: () => handleItemClick(item),
1077
+ className: "text-[16px] !pl-[24px]",
1062
1078
  style: { cursor: "pointer" },
1063
1079
  children: item.name
1064
1080
  },
@@ -1256,13 +1272,13 @@ var RoomsList = ({
1256
1272
  state,
1257
1273
  zipCode: "",
1258
1274
  country,
1259
- lat: Number(room.latitude) || 34.0522,
1260
- lng: Number(room.longitude) || -118.2437,
1275
+ lat: Number(room.latitude) || 0,
1276
+ lng: Number(room.longitude) || 0,
1261
1277
  availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
1262
- euifyMakeModel: room?.description
1278
+ euifyMakeModel: room?.equipment?.join(", ") || ""
1263
1279
  };
1264
1280
  });
1265
- }, [demoRooms]);
1281
+ }, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
1266
1282
  const filteredStudioLocations = useMemo(() => {
1267
1283
  if (!selectedLocation) return studioLocations;
1268
1284
  return studioLocations.filter((location) => {
@@ -1311,7 +1327,7 @@ var RoomsList = ({
1311
1327
  /* @__PURE__ */ jsxs(
1312
1328
  "button",
1313
1329
  {
1314
- className: "flex cursor-pointer items-center hover:text-[#2E8B57] transition-colors",
1330
+ className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
1315
1331
  onClick: () => setShowLocationFilter(true),
1316
1332
  children: [
1317
1333
  /* @__PURE__ */ jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
@@ -1368,7 +1384,7 @@ var RoomsList = ({
1368
1384
  "div",
1369
1385
  {
1370
1386
  style: { maxHeight: "706px", overflow: "auto" },
1371
- className: "rounded-[12px] bg-white border border-[#E4E5E6]",
1387
+ className: "rounded-[12px] bg-white border h-[706px] border-[#E4E5E6]",
1372
1388
  children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
1373
1389
  return /* @__PURE__ */ jsx(
1374
1390
  StudioCard,
@@ -1384,7 +1400,10 @@ var RoomsList = ({
1384
1400
  onSchedule,
1385
1401
  onMouseEnter: () => setHoveredRoomId(item.id),
1386
1402
  onMouseLeave: () => setHoveredRoomId(null),
1387
- pageData: mergedPageData.studioCard
1403
+ pageData: {
1404
+ ...mergedPageData.studioCard,
1405
+ noAvailableTime: mergedPageData?.noAvailableTime
1406
+ }
1388
1407
  },
1389
1408
  item.id
1390
1409
  );
@@ -1417,7 +1436,10 @@ var RoomsList = ({
1417
1436
  hoveredLocationId: hoveredRoomId,
1418
1437
  onSchedule,
1419
1438
  mapHeight: "794px",
1420
- pageData: mergedPageData.map
1439
+ pageData: {
1440
+ ...mergedPageData.map,
1441
+ noAvailableTime: pageData?.noAvailableTime
1442
+ }
1421
1443
  }
1422
1444
  ) })
1423
1445
  ] })
@@ -1632,6 +1654,21 @@ var QuestionnaireForm = ({
1632
1654
  const [errors, setErrors] = useState({});
1633
1655
  const [agreements, setAgreements] = useState({});
1634
1656
  const [agreementError, setAgreementError] = useState("");
1657
+ const [phoneCountryCodes, setPhoneCountryCodes] = useState({});
1658
+ const defaultCountryCodes = [
1659
+ { code: "+1", country: "US/CA" },
1660
+ { code: "+86", country: "CN" },
1661
+ { code: "+44", country: "UK" },
1662
+ { code: "+81", country: "JP" },
1663
+ { code: "+82", country: "KR" },
1664
+ { code: "+65", country: "SG" },
1665
+ { code: "+852", country: "HK" },
1666
+ { code: "+886", country: "TW" },
1667
+ { code: "+61", country: "AU" },
1668
+ { code: "+49", country: "DE" },
1669
+ { code: "+33", country: "FR" }
1670
+ ];
1671
+ const countryCodes = pageData?.countryCodes || defaultCountryCodes;
1635
1672
  const getQuestionId = (question) => {
1636
1673
  return question.id || question.key || "";
1637
1674
  };
@@ -1648,6 +1685,22 @@ var QuestionnaireForm = ({
1648
1685
  });
1649
1686
  }
1650
1687
  };
1688
+ const handleEmailBlur = (questionId, value) => {
1689
+ if (!value) return;
1690
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
1691
+ if (!emailRegex.test(value)) {
1692
+ setErrors((prev) => ({
1693
+ ...prev,
1694
+ [questionId]: "Please enter a valid email address"
1695
+ }));
1696
+ }
1697
+ };
1698
+ const handleCountryCodeChange = (questionId, code) => {
1699
+ setPhoneCountryCodes((prev) => ({
1700
+ ...prev,
1701
+ [questionId]: code
1702
+ }));
1703
+ };
1651
1704
  const handleCheckboxChange = (questionId, optionValue, checked) => {
1652
1705
  const currentValues = responses[questionId] || [];
1653
1706
  const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
@@ -1693,7 +1746,22 @@ var QuestionnaireForm = ({
1693
1746
  const handleSubmit = (e) => {
1694
1747
  e.preventDefault();
1695
1748
  if (validateForm()) {
1696
- onSubmit?.(responses);
1749
+ const finalResponses = { ...responses };
1750
+ questions.forEach((question) => {
1751
+ if (question.type === "tel" || question.type === "phone") {
1752
+ const questionId = getQuestionId(question);
1753
+ const countryCode = phoneCountryCodes[questionId] || "+1";
1754
+ const phoneNumber = responses[questionId];
1755
+ if (phoneNumber) {
1756
+ finalResponses[questionId] = phoneNumber;
1757
+ if (questionId === "phone" || questionId === "customer_phone_number") {
1758
+ finalResponses["phone_code"] = countryCode;
1759
+ finalResponses["customer_phone_code"] = countryCode;
1760
+ }
1761
+ }
1762
+ }
1763
+ });
1764
+ onSubmit?.(finalResponses);
1697
1765
  }
1698
1766
  };
1699
1767
  const renderQuestion = (question) => {
@@ -1701,9 +1769,6 @@ var QuestionnaireForm = ({
1701
1769
  const hasError = !!errors[questionId];
1702
1770
  switch (question.type) {
1703
1771
  case "text":
1704
- case "email":
1705
- case "tel":
1706
- case "phone":
1707
1772
  return /* @__PURE__ */ jsx(
1708
1773
  "input",
1709
1774
  {
@@ -1712,12 +1777,83 @@ var QuestionnaireForm = ({
1712
1777
  onChange: (e) => handleChange(questionId, e.target.value),
1713
1778
  placeholder: question.placeholder,
1714
1779
  className: cn(
1715
- "w-full px-4 py-3 rounded-lg border text-base",
1780
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1781
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1782
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1783
+ )
1784
+ }
1785
+ );
1786
+ case "email":
1787
+ return /* @__PURE__ */ jsx(
1788
+ "input",
1789
+ {
1790
+ type: "email",
1791
+ value: responses[questionId] || "",
1792
+ onChange: (e) => handleChange(questionId, e.target.value),
1793
+ onBlur: (e) => handleEmailBlur(questionId, e.target.value),
1794
+ placeholder: question.placeholder,
1795
+ className: cn(
1796
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1716
1797
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1717
1798
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1718
1799
  )
1719
1800
  }
1720
1801
  );
1802
+ case "tel":
1803
+ case "phone":
1804
+ return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1805
+ /* @__PURE__ */ jsxs("div", { className: "relative", children: [
1806
+ /* @__PURE__ */ jsx(
1807
+ "select",
1808
+ {
1809
+ value: phoneCountryCodes[questionId] || "+1",
1810
+ onChange: (e) => handleCountryCodeChange(questionId, e.target.value),
1811
+ className: cn(
1812
+ "appearance-none pl-3 pr-8 py-3 rounded-lg border text-base",
1813
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1814
+ "bg-white cursor-pointer w-[80px]",
1815
+ "dark:bg-white dark:text-gray-900",
1816
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1817
+ ),
1818
+ children: countryCodes.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.code }, item.code))
1819
+ }
1820
+ ),
1821
+ /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
1822
+ "svg",
1823
+ {
1824
+ width: "12",
1825
+ height: "8",
1826
+ viewBox: "0 0 12 8",
1827
+ fill: "none",
1828
+ xmlns: "http://www.w3.org/2000/svg",
1829
+ children: /* @__PURE__ */ jsx(
1830
+ "path",
1831
+ {
1832
+ d: "M1 1.5L6 6.5L11 1.5",
1833
+ stroke: "#9CA3AF",
1834
+ strokeWidth: "1.5",
1835
+ strokeLinecap: "round",
1836
+ strokeLinejoin: "round"
1837
+ }
1838
+ )
1839
+ }
1840
+ ) })
1841
+ ] }),
1842
+ /* @__PURE__ */ jsx(
1843
+ "input",
1844
+ {
1845
+ type: "tel",
1846
+ value: responses[questionId] || "",
1847
+ onChange: (e) => handleChange(questionId, e.target.value),
1848
+ placeholder: question.placeholder,
1849
+ className: cn(
1850
+ "flex-1 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1851
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1852
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1853
+ )
1854
+ }
1855
+ )
1856
+ ] });
1721
1857
  case "textarea":
1722
1858
  return /* @__PURE__ */ jsx(
1723
1859
  "textarea",
@@ -1727,8 +1863,9 @@ var QuestionnaireForm = ({
1727
1863
  placeholder: question.placeholder,
1728
1864
  rows: 4,
1729
1865
  className: cn(
1730
- "w-full px-4 py-3 rounded-lg border text-base resize-none",
1866
+ "w-full px-4 py-3 rounded-lg border text-base resize-none bg-white",
1731
1867
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1868
+ "dark:bg-white dark:text-gray-900",
1732
1869
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1733
1870
  )
1734
1871
  }
@@ -1747,10 +1884,15 @@ var QuestionnaireForm = ({
1747
1884
  value: option.value || option.label,
1748
1885
  checked: responses[questionId] === (option.value || option.label),
1749
1886
  onChange: (e) => handleChange(questionId, e.target.value),
1750
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
1887
+ className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2",
1888
+ style: {
1889
+ backgroundColor: "white",
1890
+ borderColor: "#D1D5DB",
1891
+ colorScheme: "light"
1892
+ }
1751
1893
  }
1752
1894
  ),
1753
- /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
1895
+ /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
1754
1896
  ]
1755
1897
  },
1756
1898
  option.value || option.label
@@ -1776,10 +1918,15 @@ var QuestionnaireForm = ({
1776
1918
  optionValue,
1777
1919
  e.target.checked
1778
1920
  ),
1779
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded"
1921
+ className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded",
1922
+ style: {
1923
+ backgroundColor: "white",
1924
+ borderColor: "#D1D5DB",
1925
+ colorScheme: "light"
1926
+ }
1780
1927
  }
1781
1928
  ),
1782
- /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
1929
+ /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
1783
1930
  ]
1784
1931
  },
1785
1932
  optionValue
@@ -1792,9 +1939,9 @@ var QuestionnaireForm = ({
1792
1939
  value: responses[questionId] || "",
1793
1940
  onChange: (e) => handleChange(questionId, e.target.value),
1794
1941
  className: cn(
1795
- "w-full px-4 py-3 rounded-lg border text-base",
1942
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1796
1943
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1797
- "bg-white cursor-pointer",
1944
+ "cursor-pointer",
1798
1945
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1799
1946
  ),
1800
1947
  children: [
@@ -1814,20 +1961,21 @@ var QuestionnaireForm = ({
1814
1961
  return null;
1815
1962
  }
1816
1963
  };
1817
- return /* @__PURE__ */ jsxs("div", { className: "pb-[80px]", children: [
1818
- questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
1964
+ return /* @__PURE__ */ jsxs("div", { className: "pb-[80px] light", children: [
1965
+ questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
1819
1966
  const questionId = getQuestionId(question);
1820
1967
  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
1821
1968
  /* @__PURE__ */ jsxs("label", { className: "block", children: [
1822
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-gray-900", children: [
1969
+ /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
1823
1970
  question.label,
1824
1971
  question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
1825
1972
  ] }),
1826
- question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 mt-1", children: question.description })
1973
+ question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
1974
+ question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
1827
1975
  ] }),
1828
1976
  renderQuestion(question),
1829
- question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
1830
- errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
1977
+ question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
1978
+ errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", style: { color: "#FF4D4D" }, children: errors[questionId] })
1831
1979
  ] }, questionId);
1832
1980
  }) }) }),
1833
1981
  !!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
@@ -1840,20 +1988,25 @@ var QuestionnaireForm = ({
1840
1988
  id: `agreement-${index}`,
1841
1989
  checked: agreements[index] || false,
1842
1990
  onChange: (e) => handleAgreementChange(index, e.target.checked),
1843
- className: "w-5 h-5 rounded border-gray-300 text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0"
1991
+ className: "w-5 h-5 rounded text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0",
1992
+ style: {
1993
+ backgroundColor: "white",
1994
+ borderColor: "#D1D5DB",
1995
+ colorScheme: "light"
1996
+ }
1844
1997
  }
1845
1998
  ),
1846
1999
  /* @__PURE__ */ jsx(
1847
2000
  "label",
1848
2001
  {
1849
2002
  htmlFor: `agreement-${index}`,
1850
- className: "text-sm text-gray-700 cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2003
+ className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
1851
2004
  dangerouslySetInnerHTML: { __html: agreeContent },
1852
2005
  "aria-label": `Agreement ${index + 1}`
1853
2006
  }
1854
2007
  )
1855
2008
  ] }, index)),
1856
- agreementError && /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: agreementError })
2009
+ agreementError && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold mt-2", style: { color: "#FF4D4D" }, children: agreementError })
1857
2010
  ] }),
1858
2011
  /* @__PURE__ */ jsx(
1859
2012
  "button",
@@ -1863,7 +2016,7 @@ var QuestionnaireForm = ({
1863
2016
  onClick: handleSubmit,
1864
2017
  className: cn(
1865
2018
  "w-fit mt-6 px-6 py-4 rounded-full",
1866
- "bg-[#080A0F] text-white font-medium text-base",
2019
+ "bg-[#080A0F] text-white font-bold text-base",
1867
2020
  "hover:bg-[#2FC257] transition-colors",
1868
2021
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
1869
2022
  "disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1897,7 +2050,6 @@ var DateTimePicker = ({
1897
2050
  onBookingSuccess
1898
2051
  }) => {
1899
2052
  const { token } = theme.useToken();
1900
- const [selectMonth, setSelectMonth] = useState("");
1901
2053
  const [selectedDate, setSelectedDate] = useState(null);
1902
2054
  const [calendarValue, setCalendarValue] = useState(dayjs());
1903
2055
  const [selectedTimeslotId, setSelectedTimeslotId] = useState(
@@ -1922,9 +2074,8 @@ var DateTimePicker = ({
1922
2074
  locale,
1923
2075
  { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
1924
2076
  );
1925
- const currentDate = selectedDate || dayjs();
1926
- const startDate = currentDate.startOf("month").format("YYYY-MM-DD");
1927
- const endDate = currentDate.endOf("month").format("YYYY-MM-DD");
2077
+ const startDate = calendarValue.startOf("month").format("YYYY-MM-DD");
2078
+ const endDate = calendarValue.endOf("month").format("YYYY-MM-DD");
1928
2079
  const {
1929
2080
  data: timeslotsData,
1930
2081
  loading: timeslotsLoading,
@@ -1980,6 +2131,28 @@ var DateTimePicker = ({
1980
2131
  setIsInitialized(true);
1981
2132
  }
1982
2133
  }, [timeslotsData, isInitialized, selectedDate]);
2134
+ useEffect(() => {
2135
+ if (!timeslotsData?.timeslots || !isInitialized) return;
2136
+ if (selectedDate && selectedDate.isSame(calendarValue, "month")) {
2137
+ return;
2138
+ }
2139
+ const currentMonthStart = calendarValue.startOf("month");
2140
+ const currentMonthEnd = calendarValue.endOf("month");
2141
+ const now = dayjs();
2142
+ const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
2143
+ const slotDate = dayjs(slot.start_time);
2144
+ return slot.status === "available" && slotDate.isAfter(now) && (slotDate.isAfter(currentMonthStart) || slotDate.isSame(currentMonthStart, "day")) && (slotDate.isBefore(currentMonthEnd) || slotDate.isSame(currentMonthEnd, "day"));
2145
+ });
2146
+ if (availableTimeslots.length > 0) {
2147
+ const sortedSlots = [...availableTimeslots].sort(
2148
+ (a, b) => dayjs(a.start_time).unix() - dayjs(b.start_time).unix()
2149
+ );
2150
+ const firstSlot = sortedSlots[0];
2151
+ const firstDate = dayjs(firstSlot.start_time);
2152
+ setSelectedDate(firstDate);
2153
+ setSelectedTimeslotId(firstSlot.id);
2154
+ }
2155
+ }, [calendarValue, timeslotsData, isInitialized, selectedDate]);
1983
2156
  const formatTimeslot = (slot) => {
1984
2157
  const start = dayjs(slot.start_time).format("h:mm A");
1985
2158
  const end = dayjs(slot.end_time).format("h:mm A");
@@ -1988,10 +2161,10 @@ var DateTimePicker = ({
1988
2161
  const wrapperStyle = {
1989
2162
  background: "#fff",
1990
2163
  border: `1px solid ${token.colorBorderSecondary}`,
1991
- borderRadius: token.borderRadiusLG
2164
+ borderRadius: 16
1992
2165
  };
1993
2166
  return /* @__PURE__ */ jsxs("div", { children: [
1994
- /* @__PURE__ */ jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] font-bold text-center", children: pageData.scheduleYourVisit }),
2167
+ /* @__PURE__ */ jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] l:pt-[64px] font-bold text-center", children: pageData.scheduleYourVisit }),
1995
2168
  /* @__PURE__ */ jsxs("div", { className: "flex gap-4 l:flex-col", children: [
1996
2169
  /* @__PURE__ */ jsx(
1997
2170
  ConfigProvider,
@@ -2008,8 +2181,27 @@ var DateTimePicker = ({
2008
2181
  }
2009
2182
  }
2010
2183
  },
2011
- children: /* @__PURE__ */ jsxs("div", { style: wrapperStyle, className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full", children: [
2012
- /* @__PURE__ */ jsx("style", { children: `
2184
+ children: /* @__PURE__ */ jsxs(
2185
+ "div",
2186
+ {
2187
+ style: wrapperStyle,
2188
+ className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full",
2189
+ children: [
2190
+ /* @__PURE__ */ jsx("style", { children: `
2191
+ .calendar-custom-cell {
2192
+ border-radius: 16px !important;
2193
+ overflow: hidden;
2194
+ padding: 0 24px 16px 24px !important;
2195
+ }
2196
+ .calendar-custom-cell,
2197
+ .calendar-custom-cell *,
2198
+ .calendar-custom-cell .ant-picker-panel,
2199
+ .calendar-custom-cell .ant-picker-calendar,
2200
+ .calendar-custom-cell .ant-picker-content,
2201
+ .calendar-custom-cell .ant-picker-cell,
2202
+ .calendar-custom-cell .ant-picker-calendar-date-value {
2203
+ font-family: 'MontForAnker' !important;
2204
+ }
2013
2205
  .calendar-custom-cell .ant-picker-cell {
2014
2206
  padding: 6px !important;
2015
2207
  text-align: center !important;
@@ -2027,6 +2219,11 @@ var DateTimePicker = ({
2027
2219
  border: 1px solid #E4E5E6 !important;
2028
2220
  aspect-ratio: 1 / 1 !important;
2029
2221
  }
2222
+ .calendar-custom-cell .ant-picker-calendar-date-value {
2223
+ line-height: 38px !important;
2224
+ font-weight: 700 !important;
2225
+ font-size: 14px !important;
2226
+ }
2030
2227
  @media (min-width: 1024px) and (max-width: 1919px) {
2031
2228
  .calendar-custom-cell .ant-picker-cell-inner {
2032
2229
  width: 54px !important;
@@ -2035,6 +2232,8 @@ var DateTimePicker = ({
2035
2232
  }
2036
2233
  .calendar-custom-cell .ant-picker-calendar-date-value {
2037
2234
  line-height: 54px !important;
2235
+ font-weight: 700 !important;
2236
+ font-size: 20px !important;
2038
2237
  }
2039
2238
  }
2040
2239
  @media (min-width: 1920px) {
@@ -2045,17 +2244,19 @@ var DateTimePicker = ({
2045
2244
  }
2046
2245
  .calendar-custom-cell .ant-picker-calendar-date-value {
2047
2246
  line-height: 100px !important;
2247
+ font-weight: 700 !important;
2248
+ font-size: 20px !important;
2048
2249
  }
2049
2250
  }
2050
2251
  .calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner,
2051
2252
  .calendar-custom-cell .ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
2052
2253
  background-color: #3ADB67 !important;
2053
- color: white !important;
2254
+ color: #080A0F !important;
2054
2255
  border-color: #3ADB67 !important;
2055
2256
  }
2056
2257
  .calendar-custom-cell .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
2057
2258
  background-color: #3ADB67 !important;
2058
- color: white !important;
2259
+ color: #080A0F !important;
2059
2260
  }
2060
2261
  .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
2061
2262
  border-color: #3ADB67 !important;
@@ -2074,25 +2275,24 @@ var DateTimePicker = ({
2074
2275
  .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner::before {
2075
2276
  display: none !important;
2076
2277
  }
2077
- .calendar-custom-cell .ant-picker-calendar-date-value {
2078
- line-height: 38px !important;
2079
- }
2080
2278
  .calendar-custom-cell .ant-picker-content {
2081
2279
  width: 100% !important;
2082
2280
  }
2083
2281
  .calendar-custom-cell .ant-picker-content thead tr th {
2084
2282
  line-height: 48px !important;
2283
+ font-weight: 700 !important;
2284
+ font-size: 18px !important;
2085
2285
  }
2086
2286
  .calendar-custom-cell .ant-picker-cell-disabled .ant-picker-cell-inner {
2087
2287
  background-color: #F5F5F5 !important;
2088
- color: #BDBDBD !important;
2089
- border-color: #E4E5E6 !important;
2288
+ color: #2A2C32 !important;
2289
+ border: none !important;
2090
2290
  cursor: not-allowed !important;
2091
2291
  box-shadow: none !important;
2092
2292
  }
2093
2293
  .calendar-custom-cell .ant-picker-cell-disabled:hover .ant-picker-cell-inner {
2094
2294
  background-color: #F5F5F5 !important;
2095
- border-color: #E4E5E6 !important;
2295
+ border: none !important;
2096
2296
  box-shadow: none !important;
2097
2297
  }
2098
2298
  .calendar-custom-cell .ant-picker-cell-disabled::before {
@@ -2102,170 +2302,169 @@ var DateTimePicker = ({
2102
2302
  display: none !important;
2103
2303
  }
2104
2304
  ` }),
2105
- /* @__PURE__ */ jsx(
2106
- Calendar,
2107
- {
2108
- fullscreen: false,
2109
- value: calendarValue,
2110
- onSelect: (date) => {
2111
- setSelectedDate(date);
2112
- setCalendarValue(date);
2113
- },
2114
- onPanelChange: (date) => {
2115
- setCalendarValue(date);
2116
- },
2117
- disabledDate: (current) => {
2118
- if (!current) return false;
2119
- if (current.isSame(dayjs(), "day")) return false;
2120
- if (current.isBefore(dayjs(), "day")) return true;
2121
- const dateStr = current.format("YYYY-MM-DD");
2122
- return !availableDates.has(dateStr);
2123
- },
2124
- fullCellRender: (date) => {
2125
- const isSelected = selectedDate && date.isSame(selectedDate, "day");
2126
- const isToday = date.isSame(dayjs(), "day");
2127
- const dateStr = date.format("YYYY-MM-DD");
2128
- const isDisabled = !isToday && (date.isBefore(dayjs(), "day") || !availableDates.has(dateStr));
2129
- return /* @__PURE__ */ jsx(
2130
- "div",
2131
- {
2132
- className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
2133
- style: {
2134
- backgroundColor: isSelected ? "#3ADB67" : void 0,
2135
- color: isSelected ? "white" : isDisabled ? "#BDBDBD" : void 0,
2136
- borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
2137
- },
2138
- children: /* @__PURE__ */ jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
2139
- }
2140
- );
2141
- },
2142
- headerRender: ({ value, onChange }) => {
2143
- const year = value.year();
2144
- const month = value.month();
2145
- const yearOptions = Array.from({ length: 20 }, (_, i) => {
2146
- const label = year - 10 + i;
2147
- return { label, value: label };
2148
- });
2149
- const monthOptions = value.localeData().months().map((label, index) => ({
2150
- label,
2151
- value: index
2152
- }));
2153
- const monthText = monthOptions?.find((item) => {
2154
- return item?.value === month;
2155
- });
2156
- setSelectMonth(monthText?.label || "");
2157
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2158
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2159
- /* @__PURE__ */ jsx(
2160
- Select,
2305
+ /* @__PURE__ */ jsx(
2306
+ Calendar,
2307
+ {
2308
+ fullscreen: false,
2309
+ value: calendarValue,
2310
+ onSelect: (date) => {
2311
+ setSelectedDate(date);
2312
+ setCalendarValue(date);
2313
+ },
2314
+ onPanelChange: (date) => {
2315
+ setCalendarValue(date);
2316
+ },
2317
+ disabledDate: (current) => {
2318
+ if (!current) return false;
2319
+ if (current.isSame(dayjs(), "day")) return false;
2320
+ if (current.isBefore(dayjs(), "day")) return true;
2321
+ const dateStr = current.format("YYYY-MM-DD");
2322
+ return !availableDates.has(dateStr);
2323
+ },
2324
+ fullCellRender: (date) => {
2325
+ const isSelected = selectedDate && date.isSame(selectedDate, "day");
2326
+ const isToday = date.isSame(dayjs(), "day");
2327
+ const dateStr = date.format("YYYY-MM-DD");
2328
+ const isDisabled = !isToday && (date.isBefore(dayjs(), "day") || !availableDates.has(dateStr));
2329
+ return /* @__PURE__ */ jsx(
2330
+ "div",
2161
2331
  {
2162
- value: month,
2163
- options: monthOptions,
2164
- onChange: (newMonth) => {
2165
- const now = value.clone().month(newMonth);
2166
- onChange(now);
2167
- },
2168
- variant: "borderless",
2169
- className: "text-2xl font-medium",
2170
- popupMatchSelectWidth: false,
2332
+ className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
2171
2333
  style: {
2172
- fontSize: "24px",
2173
- fontWeight: 500
2174
- }
2175
- }
2176
- ),
2177
- /* @__PURE__ */ jsx(
2178
- Select,
2179
- {
2180
- value: year,
2181
- options: yearOptions,
2182
- onChange: (newYear) => {
2183
- const now = value.clone().year(newYear);
2184
- onChange(now);
2334
+ backgroundColor: isSelected ? "#3ADB67" : void 0,
2335
+ color: isSelected ? "#080A0F" : isDisabled ? "#2A2C32" : void 0,
2336
+ borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
2185
2337
  },
2186
- variant: "borderless",
2187
- className: "text-2xl font-medium",
2188
- popupMatchSelectWidth: false,
2189
- style: {
2190
- fontSize: "24px",
2191
- fontWeight: 500
2192
- }
2338
+ children: /* @__PURE__ */ jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
2193
2339
  }
2194
- )
2195
- ] }),
2196
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
2197
- /* @__PURE__ */ jsx(
2198
- "button",
2199
- {
2200
- onClick: () => {
2201
- const newDate = value.subtract(1, "month");
2202
- onChange(newDate);
2203
- },
2204
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2205
- children: /* @__PURE__ */ jsx(
2206
- "svg",
2340
+ );
2341
+ },
2342
+ headerRender: ({ value, onChange }) => {
2343
+ const year = value.year();
2344
+ const month = value.month();
2345
+ const yearOptions = Array.from({ length: 20 }, (_, i) => {
2346
+ const label = year - 10 + i;
2347
+ return { label, value: label };
2348
+ });
2349
+ const monthOptions = value.localeData().months().map((label, index) => ({
2350
+ label,
2351
+ value: index
2352
+ }));
2353
+ return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3 l:pb-[0px]", children: [
2354
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2355
+ /* @__PURE__ */ jsx(
2356
+ Select,
2207
2357
  {
2208
- width: "20",
2209
- height: "20",
2210
- viewBox: "0 0 20 20",
2211
- fill: "none",
2212
- xmlns: "http://www.w3.org/2000/svg",
2358
+ value: month,
2359
+ options: monthOptions,
2360
+ onChange: (newMonth) => {
2361
+ const now = value.clone().month(newMonth);
2362
+ onChange(now);
2363
+ },
2364
+ variant: "borderless",
2365
+ className: "text-[32px] l:text-[20px] font-bold",
2366
+ popupMatchSelectWidth: false,
2367
+ suffixIcon: null,
2368
+ style: {
2369
+ fontWeight: 700
2370
+ }
2371
+ }
2372
+ ),
2373
+ /* @__PURE__ */ jsx("div", { className: "text-[20px] text-[#E4E5E6]", children: "/" }),
2374
+ /* @__PURE__ */ jsx(
2375
+ Select,
2376
+ {
2377
+ value: year,
2378
+ options: yearOptions,
2379
+ onChange: (newYear) => {
2380
+ const now = value.clone().year(newYear);
2381
+ onChange(now);
2382
+ },
2383
+ variant: "borderless",
2384
+ className: "text-[32px] l:text-[20px] font-bold",
2385
+ popupMatchSelectWidth: false,
2386
+ suffixIcon: null,
2387
+ style: {
2388
+ fontWeight: 700
2389
+ }
2390
+ }
2391
+ )
2392
+ ] }),
2393
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
2394
+ /* @__PURE__ */ jsx(
2395
+ "button",
2396
+ {
2397
+ onClick: () => {
2398
+ const newDate = value.subtract(1, "month");
2399
+ onChange(newDate);
2400
+ },
2401
+ className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2213
2402
  children: /* @__PURE__ */ jsx(
2214
- "path",
2403
+ "svg",
2215
2404
  {
2216
- d: "M12 16L6 10L12 4",
2217
- stroke: "currentColor",
2218
- strokeWidth: "2",
2219
- strokeLinecap: "round",
2220
- strokeLinejoin: "round"
2405
+ width: "20",
2406
+ height: "20",
2407
+ viewBox: "0 0 20 20",
2408
+ fill: "none",
2409
+ xmlns: "http://www.w3.org/2000/svg",
2410
+ children: /* @__PURE__ */ jsx(
2411
+ "path",
2412
+ {
2413
+ d: "M12 16L6 10L12 4",
2414
+ stroke: "currentColor",
2415
+ strokeWidth: "2",
2416
+ strokeLinecap: "round",
2417
+ strokeLinejoin: "round"
2418
+ }
2419
+ )
2221
2420
  }
2222
2421
  )
2223
2422
  }
2224
- )
2225
- }
2226
- ),
2227
- /* @__PURE__ */ jsx(
2228
- "button",
2229
- {
2230
- onClick: () => {
2231
- const newDate = value.add(1, "month");
2232
- onChange(newDate);
2233
- },
2234
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2235
- children: /* @__PURE__ */ jsx(
2236
- "svg",
2423
+ ),
2424
+ /* @__PURE__ */ jsx(
2425
+ "button",
2237
2426
  {
2238
- width: "20",
2239
- height: "20",
2240
- viewBox: "0 0 20 20",
2241
- fill: "none",
2242
- xmlns: "http://www.w3.org/2000/svg",
2427
+ onClick: () => {
2428
+ const newDate = value.add(1, "month");
2429
+ onChange(newDate);
2430
+ },
2431
+ className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2243
2432
  children: /* @__PURE__ */ jsx(
2244
- "path",
2433
+ "svg",
2245
2434
  {
2246
- d: "M8 4L14 10L8 16",
2247
- stroke: "currentColor",
2248
- strokeWidth: "2",
2249
- strokeLinecap: "round",
2250
- strokeLinejoin: "round"
2435
+ width: "20",
2436
+ height: "20",
2437
+ viewBox: "0 0 20 20",
2438
+ fill: "none",
2439
+ xmlns: "http://www.w3.org/2000/svg",
2440
+ children: /* @__PURE__ */ jsx(
2441
+ "path",
2442
+ {
2443
+ d: "M8 4L14 10L8 16",
2444
+ stroke: "currentColor",
2445
+ strokeWidth: "2",
2446
+ strokeLinecap: "round",
2447
+ strokeLinejoin: "round"
2448
+ }
2449
+ )
2251
2450
  }
2252
2451
  )
2253
2452
  }
2254
2453
  )
2255
- }
2256
- )
2257
- ] })
2258
- ] });
2259
- }
2260
- }
2261
- )
2262
- ] })
2454
+ ] })
2455
+ ] });
2456
+ }
2457
+ }
2458
+ )
2459
+ ]
2460
+ }
2461
+ )
2263
2462
  }
2264
2463
  ),
2265
- /* @__PURE__ */ jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
2266
- /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
2267
- pageData.timeSlot,
2268
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
2464
+ /* @__PURE__ */ jsxs("div", { className: "bg-white p-[24px] rounded-[16px] flex-1", children: [
2465
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
2466
+ /* @__PURE__ */ jsx("div", { className: "text-[24px] l:text-[16px]", children: pageData.timeSlot }),
2467
+ /* @__PURE__ */ jsxs("div", { className: "flex text-[18px] l:text-[14px] l:gap-1 gap-2", children: [
2269
2468
  /* @__PURE__ */ jsx(
2270
2469
  "button",
2271
2470
  {
@@ -2279,7 +2478,7 @@ var DateTimePicker = ({
2279
2478
  }
2280
2479
  },
2281
2480
  disabled: !selectedDate || selectedDate.isSame(dayjs(), "day") || selectedDate.isBefore(dayjs(), "day"),
2282
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2481
+ className: "w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2283
2482
  children: /* @__PURE__ */ jsx(
2284
2483
  "svg",
2285
2484
  {
@@ -2299,7 +2498,7 @@ var DateTimePicker = ({
2299
2498
  )
2300
2499
  }
2301
2500
  ),
2302
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: selectMonth }),
2501
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D") : "" }),
2303
2502
  /* @__PURE__ */ jsx(
2304
2503
  "button",
2305
2504
  {
@@ -2311,7 +2510,7 @@ var DateTimePicker = ({
2311
2510
  }
2312
2511
  },
2313
2512
  disabled: !selectedDate,
2314
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2513
+ className: "w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2315
2514
  children: /* @__PURE__ */ jsx(
2316
2515
  "svg",
2317
2516
  {
@@ -2333,7 +2532,7 @@ var DateTimePicker = ({
2333
2532
  )
2334
2533
  ] })
2335
2534
  ] }),
2336
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: pageData.loadingTimeSlots }) : timeslotsError ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: pageData.failedToLoadTimeSlots }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: pageData.noAvailableTimeSlots }) : dayTimeslots.map((slot) => {
2535
+ /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4 l:mt-[16px] l:flex l:flex-col l:gap-2", children: timeslotsLoading ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#2A2C32] py-8", children: pageData.loadingTimeSlots }) : timeslotsError ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: pageData.failedToLoadTimeSlots }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#2A2C32] py-8", children: pageData.noAvailableTimeSlots }) : dayTimeslots.map((slot) => {
2337
2536
  const isAvailable = slot.status === "available";
2338
2537
  const isFull = slot.status === "full";
2339
2538
  const isSelected = selectedTimeslotId === slot.id;
@@ -2347,19 +2546,19 @@ var DateTimePicker = ({
2347
2546
  }
2348
2547
  },
2349
2548
  className: `
2350
- rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
2549
+ rounded-[20px] w-full text-[18px] l:gap-2 l:text-[16px] flex items-center justify-center gap-4 h-[76px]
2351
2550
  border text-center transition-colors
2352
- ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] text-white cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#BDBDBD] cursor-not-allowed"}
2551
+ ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#2A2C32] cursor-not-allowed"}
2353
2552
  `,
2354
2553
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
2355
2554
  /* @__PURE__ */ jsx("div", { children: formatTimeslot(slot) }),
2356
- isFull && /* @__PURE__ */ jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: pageData.full }),
2357
- isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
2555
+ isFull && /* @__PURE__ */ jsx("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-[2px]", children: pageData.full }),
2556
+ isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-1", children: [
2358
2557
  slot.capacity - slot.booked_count,
2359
2558
  " ",
2360
2559
  pageData.spotsLeft
2361
2560
  ] }),
2362
- isAvailable && isSelected && /* @__PURE__ */ jsxs("div", { className: "text-xs text-white mt-1", children: [
2561
+ isAvailable && isSelected && /* @__PURE__ */ jsxs("div", { className: "text-[16px] l:text-[14px] mt-1", children: [
2363
2562
  slot.capacity - slot.booked_count,
2364
2563
  " ",
2365
2564
  pageData.spotsLeft
@@ -2368,12 +2567,16 @@ var DateTimePicker = ({
2368
2567
  },
2369
2568
  slot.id
2370
2569
  );
2371
- }) })
2570
+ }) }),
2571
+ !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsx("div", { className: "pt-[24px] text-[#6d6d6F] text-center", children: pageData?.timezone?.replace(
2572
+ "{{timezone}}",
2573
+ demoRoom?.timezone || timezone || ""
2574
+ ) })
2372
2575
  ] })
2373
2576
  ] }),
2374
2577
  /* @__PURE__ */ jsxs("div", { className: "mt-12", children: [
2375
- !!questionnaire?.questions?.length && /* @__PURE__ */ jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
2376
- questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsx(
2578
+ !!questionnaire?.questions?.length && /* @__PURE__ */ jsx("div", { className: "text-[48px] font-bold text-center mb-8 l:mb-[24px] l:text-[32px] l:text-left", children: pageData.fillOutForm }),
2579
+ questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#2A2C32] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsx(
2377
2580
  QuestionnaireForm,
2378
2581
  {
2379
2582
  questions: questionnaire?.questions || [],
@@ -2494,7 +2697,7 @@ var DemoRoomDetail = ({
2494
2697
  });
2495
2698
  const title = demoRoom?.name || titleProp || "Design District Demo Room";
2496
2699
  const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
2497
- const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
2700
+ const devices = demoRoom?.equipment?.join(", ") || devicesProp || "eufyMake E1, eufyMake M5";
2498
2701
  const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
2499
2702
  const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
2500
2703
  const googleMapsLink = mapsLink || (() => {
@@ -2520,10 +2723,10 @@ var DemoRoomDetail = ({
2520
2723
  /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: error.message })
2521
2724
  ] }) });
2522
2725
  }
2523
- return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 l:flex l:flex-col items-start", children: [
2524
- /* @__PURE__ */ jsxs("div", { className: "space-y-6 py-[24px]", children: [
2525
- /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
2526
- /* @__PURE__ */ jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsx(
2726
+ return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-[80px] l:gap-[40px] l:flex l:flex-col-reverse items-start py-[24px] l:pb-[64px]", children: [
2727
+ /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
2728
+ /* @__PURE__ */ jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
2729
+ /* @__PURE__ */ jsx("div", { className: "mt-[20px]", children: descriptions.map((desc, index) => /* @__PURE__ */ jsx(
2527
2730
  "p",
2528
2731
  {
2529
2732
  className: "text-base text-gray-600 leading-relaxed",
@@ -2542,34 +2745,24 @@ var DemoRoomDetail = ({
2542
2745
  xmlns: "http://www.w3.org/2000/svg",
2543
2746
  className: "flex-shrink-0 mt-0.5",
2544
2747
  children: [
2545
- /* @__PURE__ */ jsx(
2546
- "rect",
2547
- {
2548
- x: "3",
2549
- y: "3",
2550
- width: "18",
2551
- height: "18",
2552
- rx: "2",
2553
- stroke: "currentColor",
2554
- strokeWidth: "2"
2555
- }
2556
- ),
2557
2748
  /* @__PURE__ */ jsx(
2558
2749
  "path",
2559
2750
  {
2560
- d: "M8 10H16",
2751
+ d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
2561
2752
  stroke: "currentColor",
2562
2753
  strokeWidth: "2",
2563
- strokeLinecap: "round"
2754
+ strokeLinecap: "round",
2755
+ strokeLinejoin: "round"
2564
2756
  }
2565
2757
  ),
2566
2758
  /* @__PURE__ */ jsx(
2567
2759
  "path",
2568
2760
  {
2569
- d: "M8 14H16",
2761
+ d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
2570
2762
  stroke: "currentColor",
2571
2763
  strokeWidth: "2",
2572
- strokeLinecap: "round"
2764
+ strokeLinecap: "round",
2765
+ strokeLinejoin: "round"
2573
2766
  }
2574
2767
  )
2575
2768
  ]
@@ -2648,7 +2841,7 @@ var DemoRoomDetail = ({
2648
2841
  ] })
2649
2842
  ] })
2650
2843
  ] }),
2651
- /* @__PURE__ */ jsx("div", { className: "relative l:w-full h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
2844
+ /* @__PURE__ */ jsx("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
2652
2845
  Swiper,
2653
2846
  {
2654
2847
  ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
@@ -2726,15 +2919,18 @@ var BookingForm = ({
2726
2919
  () => createDemoRoomApi(apiConfig),
2727
2920
  [apiConfig]
2728
2921
  );
2729
- const dateTimePickerPageData = useMemo(() => ({
2730
- ...pageData?.dateTimePicker,
2731
- ...pageData?.questionnaireForm
2732
- }), [pageData?.dateTimePicker, pageData?.questionnaireForm]);
2922
+ const dateTimePickerPageData = useMemo(
2923
+ () => ({
2924
+ ...pageData?.dateTimePicker,
2925
+ ...pageData?.questionnaireForm
2926
+ }),
2927
+ [pageData?.dateTimePicker, pageData?.questionnaireForm]
2928
+ );
2733
2929
  return /* @__PURE__ */ jsxs("div", { children: [
2734
2930
  /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(
2735
2931
  DemoRoomDetail,
2736
2932
  {
2737
- className: cn("mt-8", layoutClassName),
2933
+ className: cn("min-l:mt-8", layoutClassName),
2738
2934
  apiClient,
2739
2935
  demoRoomCode,
2740
2936
  locale: apiConfig.locale,
@@ -2812,7 +3008,9 @@ var BookingSuccess = ({
2812
3008
  }, [token, apiConfig, initialBookingData]);
2813
3009
  const handleCancelAppointment = async () => {
2814
3010
  if (!token || !apiConfig) {
2815
- setCancelError(pageData.cancelError || "Unable to cancel: Missing token or API configuration");
3011
+ setCancelError(
3012
+ pageData.cancelError || "Unable to cancel: Missing token or API configuration"
3013
+ );
2816
3014
  return;
2817
3015
  }
2818
3016
  setCancelLoading(true);
@@ -2833,13 +3031,15 @@ var BookingSuccess = ({
2833
3031
  }
2834
3032
  } catch (err) {
2835
3033
  console.error("Failed to cancel booking:", err);
2836
- setCancelError(pageData.cancelError || "Failed to cancel appointment. Please try again.");
3034
+ setCancelError(
3035
+ pageData.cancelError || "Failed to cancel appointment. Please try again."
3036
+ );
2837
3037
  } finally {
2838
3038
  setCancelLoading(false);
2839
3039
  }
2840
3040
  };
2841
3041
  if (loading) {
2842
- return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
3042
+ return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
2843
3043
  /* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
2844
3044
  /* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded" }),
2845
3045
  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -2852,24 +3052,24 @@ var BookingSuccess = ({
2852
3052
  if (!bookingData) {
2853
3053
  return null;
2854
3054
  }
2855
- return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
3055
+ return /* @__PURE__ */ jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto", children: [
2856
3056
  /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
2857
- isCancelled && /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg p-6 mb-8 flex items-center justify-between", children: [
3057
+ isCancelled && /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[16px] l:items-start p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between", children: [
2858
3058
  /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
2859
- onScheduleAgain && /* @__PURE__ */ jsx(
3059
+ onScheduleAgain && bookingData && /* @__PURE__ */ jsx(
2860
3060
  "button",
2861
3061
  {
2862
- onClick: onScheduleAgain,
2863
- className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
3062
+ onClick: () => onScheduleAgain(bookingData.demoroom_code),
3063
+ className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
2864
3064
  children: pageData.scheduleAgain
2865
3065
  }
2866
3066
  )
2867
3067
  ] }),
2868
- /* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-lg", children: [
3068
+ /* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
2869
3069
  /* @__PURE__ */ jsxs("div", { children: [
2870
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.location }),
3070
+ /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
2871
3071
  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
2872
- bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
3072
+ bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
2873
3073
  bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
2874
3074
  bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsx(
2875
3075
  "a",
@@ -2884,7 +3084,7 @@ var BookingSuccess = ({
2884
3084
  ] })
2885
3085
  ] }),
2886
3086
  /* @__PURE__ */ jsxs("div", { children: [
2887
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.dateAndTime }),
3087
+ /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
2888
3088
  /* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
2889
3089
  bookingData.booking_date,
2890
3090
  bookingData.time_slot && `, ${bookingData.time_slot}`,
@@ -2892,15 +3092,15 @@ var BookingSuccess = ({
2892
3092
  ] })
2893
3093
  ] }),
2894
3094
  bookingData.equipment && /* @__PURE__ */ jsxs("div", { children: [
2895
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.event }),
2896
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
3095
+ /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
3096
+ /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
2897
3097
  ] }),
2898
3098
  /* @__PURE__ */ jsxs("div", { children: [
2899
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.demoRoom }),
3099
+ /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
2900
3100
  /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
2901
3101
  ] }),
2902
3102
  /* @__PURE__ */ jsxs("div", { children: [
2903
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.visitorInfo }),
3103
+ /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
2904
3104
  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
2905
3105
  /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
2906
3106
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
@@ -2958,13 +3158,13 @@ var BookingSuccess = ({
2958
3158
  {
2959
3159
  onClick: () => setShowCancelDialog(true),
2960
3160
  disabled: cancelLoading,
2961
- className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
3161
+ className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2962
3162
  children: pageData.cancelAppointment
2963
3163
  }
2964
3164
  ),
2965
3165
  cancelError && /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
2966
3166
  ] }),
2967
- showCancelDialog && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[24px] max-w-[400px] p-8 shadow-xl relative", children: [
3167
+ showCancelDialog && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[24px] max-w-[600px] p-8 shadow-xl relative", children: [
2968
3168
  /* @__PURE__ */ jsx(
2969
3169
  "button",
2970
3170
  {
@@ -2994,28 +3194,28 @@ var BookingSuccess = ({
2994
3194
  )
2995
3195
  }
2996
3196
  ),
2997
- /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-[#F59E0B] flex items-center justify-center", children: /* @__PURE__ */ jsx(
3197
+ /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxs(
2998
3198
  "svg",
2999
3199
  {
3000
- width: "32",
3001
- height: "32",
3002
- viewBox: "0 0 32 32",
3003
- fill: "none",
3004
3200
  xmlns: "http://www.w3.org/2000/svg",
3005
- children: /* @__PURE__ */ jsx(
3006
- "path",
3007
- {
3008
- d: "M16 10V17M16 22H16.01",
3009
- stroke: "white",
3010
- strokeWidth: "3",
3011
- strokeLinecap: "round",
3012
- strokeLinejoin: "round"
3013
- }
3014
- )
3201
+ width: "48",
3202
+ height: "48",
3203
+ viewBox: "0 0 48 48",
3204
+ fill: "none",
3205
+ children: [
3206
+ /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "21", fill: "#FFC24D" }),
3207
+ /* @__PURE__ */ jsx(
3208
+ "path",
3209
+ {
3210
+ d: "M23.9971 30.5703C25.4881 30.5704 26.6972 31.7795 26.6973 33.2705C26.6973 34.7616 25.4881 35.9706 23.9971 35.9707C22.5059 35.9707 21.2969 34.7617 21.2969 33.2705C21.297 31.7794 22.506 30.5703 23.9971 30.5703ZM23.9961 12.0176C25.2387 12.0176 26.2461 13.0249 26.2461 14.2676V26.2676C26.2461 27.5102 25.2387 28.5176 23.9961 28.5176C22.7535 28.5176 21.7461 27.5102 21.7461 26.2676V14.2676C21.7461 13.0249 22.7535 12.0176 23.9961 12.0176Z",
3211
+ fill: "white"
3212
+ }
3213
+ )
3214
+ ]
3015
3215
  }
3016
3216
  ) }) }),
3017
3217
  /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
3018
- /* @__PURE__ */ jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
3218
+ /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
3019
3219
  /* @__PURE__ */ jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
3020
3220
  ] }),
3021
3221
  /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
@@ -3024,7 +3224,7 @@ var BookingSuccess = ({
3024
3224
  {
3025
3225
  onClick: () => setShowCancelDialog(false),
3026
3226
  disabled: cancelLoading,
3027
- className: "px-8 py-3 border-2 border-black rounded-full text-black font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 min-w-[120px]",
3227
+ className: "px-8 py-3 border-2 border-black rounded-full text-black hover:bg-gray-50 transition-colors disabled:opacity-50 min-w-[120px]",
3028
3228
  children: pageData.cancelDialog?.backButton
3029
3229
  }
3030
3230
  ),
@@ -3033,7 +3233,7 @@ var BookingSuccess = ({
3033
3233
  {
3034
3234
  onClick: handleCancelAppointment,
3035
3235
  disabled: cancelLoading,
3036
- className: "px-8 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[180px] justify-center",
3236
+ className: "px-8 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[180px] justify-center",
3037
3237
  children: cancelLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
3038
3238
  /* @__PURE__ */ jsxs(
3039
3239
  "svg",