@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/demo-room.js CHANGED
@@ -56,7 +56,10 @@ var StudioCard = ({
56
56
  "div",
57
57
  {
58
58
  ...props,
59
- className: cn("p-6 cursor-pointer transition-colors duration-200", className),
59
+ className: cn(
60
+ "p-6 cursor-pointer transition-colors duration-200 border-b border-[#E4E5E6] last:border-b-0",
61
+ className
62
+ ),
60
63
  style: {
61
64
  backgroundColor: isHovered ? "#f3f4f6" : "transparent",
62
65
  ...style
@@ -71,14 +74,14 @@ var StudioCard = ({
71
74
  },
72
75
  children: [
73
76
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
74
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
75
- distance !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
77
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[24px] l:text-[20px] font-bold text-[#080A0F]", children: name }),
78
+ distance !== void 0 && /* @__PURE__ */ jsxRuntime.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: [
76
79
  formatDistance(distance),
77
80
  " ",
78
81
  pageData.away
79
82
  ] })
80
83
  ] }),
81
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
84
+ availableTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
82
85
  /* @__PURE__ */ jsxRuntime.jsxs(
83
86
  "svg",
84
87
  {
@@ -131,8 +134,8 @@ var StudioCard = ({
131
134
  ]
132
135
  }
133
136
  ),
134
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
135
- pageData.available,
137
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[16px] l:text-[12px] text-[#2A2C32]", children: [
138
+ availableTime === pageData.noAvailableTime ? "" : pageData.available,
136
139
  " ",
137
140
  availableTime
138
141
  ] }) })
@@ -167,7 +170,7 @@ var StudioCard = ({
167
170
  ]
168
171
  }
169
172
  ),
170
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
173
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32] break-words", children: address }) })
171
174
  ] }),
172
175
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
173
176
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -175,55 +178,44 @@ var StudioCard = ({
175
178
  {
176
179
  width: "20",
177
180
  height: "20",
178
- viewBox: "0 0 20 20",
181
+ viewBox: "0 0 24 24",
179
182
  fill: "none",
180
183
  xmlns: "http://www.w3.org/2000/svg",
181
184
  className: "flex-shrink-0 mt-0.5",
182
185
  children: [
183
- /* @__PURE__ */ jsxRuntime.jsx(
184
- "rect",
185
- {
186
- x: "3",
187
- y: "5",
188
- width: "14",
189
- height: "10",
190
- rx: "1.5",
191
- stroke: "currentColor",
192
- strokeWidth: "1.5"
193
- }
194
- ),
195
186
  /* @__PURE__ */ jsxRuntime.jsx(
196
187
  "path",
197
188
  {
198
- d: "M7 15V17",
189
+ 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",
199
190
  stroke: "currentColor",
200
- strokeWidth: "1.5",
201
- strokeLinecap: "round"
191
+ strokeWidth: "2",
192
+ strokeLinecap: "round",
193
+ strokeLinejoin: "round"
202
194
  }
203
195
  ),
204
196
  /* @__PURE__ */ jsxRuntime.jsx(
205
197
  "path",
206
198
  {
207
- d: "M13 15V17",
199
+ 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",
208
200
  stroke: "currentColor",
209
- strokeWidth: "1.5",
210
- strokeLinecap: "round"
201
+ strokeWidth: "2",
202
+ strokeLinecap: "round",
203
+ strokeLinejoin: "round"
211
204
  }
212
- ),
213
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
205
+ )
214
206
  ]
215
207
  }
216
208
  ),
217
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: euifyMakeModel }) })
209
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32]", children: euifyMakeModel }) })
218
210
  ] }),
219
211
  /* @__PURE__ */ jsxRuntime.jsx(
220
212
  "button",
221
213
  {
222
214
  onClick: handleScheduleClick,
223
215
  className: cn(
224
- "w-full px-6 py-3 rounded-full",
225
- "bg-white text-gray-900 border border-gray-900",
226
- "font-medium text-sm",
216
+ "w-fit px-[28px] l:px-[20px] l:py-[8px] py-3 rounded-full",
217
+ "bg-white text-gray-900 border-2 border-gray-900",
218
+ "font-bold text-[16px] l:text-[14px]",
227
219
  "hover:bg-gray-900 hover:text-white",
228
220
  "transition-all duration-200"
229
221
  ),
@@ -343,14 +335,12 @@ var StudioMap = ({
343
335
  const lng = Number(location.lng);
344
336
  const svgIcon = {
345
337
  url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
346
- <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
347
- <circle cx="24" cy="24" r="22" fill="#00000010"/>
348
- <circle cx="24" cy="24" r="10" fill="#000000"/>
349
- <circle cx="24" cy="24" r="5" fill="#3ADB67"/>
338
+ <svg xmlns="http://www.w3.org/2000/svg" width="34" height="44" viewBox="0 0 17 22" fill="none">
339
+ <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"/>
350
340
  </svg>
351
341
  `)}`,
352
- scaledSize: { width: 48, height: 48 },
353
- anchor: { x: 24, y: 24 }
342
+ scaledSize: { width: 34, height: 44 },
343
+ anchor: { x: 17, y: 44 }
354
344
  };
355
345
  const marker = new google.maps.Marker({
356
346
  position: { lat, lng },
@@ -361,41 +351,53 @@ var StudioMap = ({
361
351
  marker.addListener("click", () => {
362
352
  setSelectedLocation(location);
363
353
  const content = `
364
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
365
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
366
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
367
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
368
- <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"/>
354
+ <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
355
+ <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
356
+ ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
357
+ <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">
358
+ <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
359
+ <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
360
+ <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
361
+ <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
369
362
  </svg>
370
- <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
363
+ <div>
364
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
365
+ </div>
371
366
  </div>` : ""}
372
- <div style="margin-bottom: 8px; color: #666;">
373
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
374
- <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"/>
367
+ <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
368
+ <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">
369
+ <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"/>
370
+ <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"/>
375
371
  </svg>
376
- <span style="vertical-align: middle;">${location.address}</span>
372
+ <div style="flex: 1;">
373
+ <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
374
+ </div>
377
375
  </div>
378
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
379
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
380
- <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"/>
376
+ ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
377
+ <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">
378
+ <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"/>
379
+ <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"/>
381
380
  </svg>
382
- <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
381
+ <div>
382
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
383
+ </div>
383
384
  </div>` : ""}
384
385
  <button
385
386
  id="schedule-btn-${location.id}"
386
387
  style="
387
- width: 100%;
388
- padding: 10px 16px;
389
- background: #000;
390
- color: #fff;
391
- border: none;
392
- border-radius: 6px;
393
- font-weight: 500;
388
+ width: fit-content;
389
+ padding: 12px 28px;
390
+ background: #fff;
391
+ color: #111827;
392
+ border: 2px solid #111827;
393
+ border-radius: 9999px;
394
+ font-weight: 700;
394
395
  cursor: pointer;
395
- font-size: 14px;
396
+ font-size: 16px;
397
+ transition: all 0.2s;
396
398
  "
397
- onmouseover="this.style.background='#333'"
398
- onmouseout="this.style.background='#000'"
399
+ onmouseover="this.style.background='#111827'; this.style.color='#fff';"
400
+ onmouseout="this.style.background='#fff'; this.style.color='#111827';"
399
401
  >
400
402
  ${pageData.scheduleNow}
401
403
  </button>
@@ -447,41 +449,53 @@ var StudioMap = ({
447
449
  const marker = markersRef.current[markerIndex];
448
450
  if (location && marker) {
449
451
  const content = `
450
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
451
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
452
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
453
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
454
- <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"/>
452
+ <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
453
+ <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
454
+ ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
455
+ <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">
456
+ <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
457
+ <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
458
+ <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
459
+ <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
455
460
  </svg>
456
- <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
461
+ <div>
462
+ <p style="margin: 0;font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
463
+ </div>
457
464
  </div>` : ""}
458
- <div style="margin-bottom: 8px; color: #666;">
459
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
460
- <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"/>
465
+ <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
466
+ <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">
467
+ <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"/>
468
+ <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"/>
461
469
  </svg>
462
- <span style="vertical-align: middle;">${location.address}</span>
470
+ <div style="flex: 1;">
471
+ <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
472
+ </div>
463
473
  </div>
464
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
465
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
466
- <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"/>
474
+ ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
475
+ <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">
476
+ <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"/>
477
+ <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"/>
467
478
  </svg>
468
- <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
479
+ <div>
480
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
481
+ </div>
469
482
  </div>` : ""}
470
483
  <button
471
484
  id="schedule-btn-hover-${location.id}"
472
485
  style="
473
- width: 100%;
474
- padding: 10px 16px;
475
- background: #000;
476
- color: #fff;
477
- border: none;
478
- border-radius: 6px;
479
- font-weight: 500;
486
+ width: fit-content;
487
+ padding: 12px 28px;
488
+ background: #fff;
489
+ color: #111827;
490
+ border: 2px solid #111827;
491
+ border-radius: 9999px;
492
+ font-weight: 700;
480
493
  cursor: pointer;
481
- font-size: 14px;
494
+ font-size: 16px;
495
+ transition: all 0.2s;
482
496
  "
483
- onmouseover="this.style.background='#333'"
484
- onmouseout="this.style.background='#000'"
497
+ onmouseover="this.style.background='#111827'; this.style.color='#fff';"
498
+ onmouseout="this.style.background='#fff'; this.style.color='#111827';"
485
499
  >
486
500
  ${pageData.scheduleNow}
487
501
  </button>
@@ -775,9 +789,9 @@ var LocationFilter = ({
775
789
  "div",
776
790
  {
777
791
  style: { background: "#F8F8F8" },
778
- className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
792
+ className: "rounded-[12px] rounded-b-none h-[108px] font-bold text-[14px] flex flex-col",
779
793
  children: [
780
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
794
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[24px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
781
795
  "button",
782
796
  {
783
797
  onClick: onClose,
@@ -801,14 +815,14 @@ var LocationFilter = ({
801
815
  )
802
816
  }
803
817
  ) }),
804
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
818
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[16px]", children: [
805
819
  /* @__PURE__ */ jsxRuntime.jsx(
806
820
  "button",
807
821
  {
808
822
  onClick: () => handleTabClick("country"),
809
823
  className: cn(
810
824
  "pb-[4px] transition-colors",
811
- currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
825
+ currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
812
826
  ),
813
827
  children: pageData.country
814
828
  }
@@ -820,7 +834,7 @@ var LocationFilter = ({
820
834
  disabled: !selectedCountry,
821
835
  className: cn(
822
836
  "pb-[4px] transition-colors",
823
- currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
837
+ currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
824
838
  !selectedCountry && "opacity-50 cursor-not-allowed"
825
839
  ),
826
840
  children: pageData.state
@@ -833,7 +847,7 @@ var LocationFilter = ({
833
847
  disabled: !selectedState,
834
848
  className: cn(
835
849
  "pb-[4px] transition-colors",
836
- currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
850
+ currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
837
851
  !selectedState && "opacity-50 cursor-not-allowed"
838
852
  ),
839
853
  children: pageData.city
@@ -843,12 +857,13 @@ var LocationFilter = ({
843
857
  ]
844
858
  }
845
859
  ),
846
- /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
860
+ /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 108px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
847
861
  const { title, items } = group;
848
862
  return /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default.Panel, { index: title, title, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
849
863
  List__default.default.Item,
850
864
  {
851
865
  onClick: () => handleItemClick(item),
866
+ className: "text-[16px] !pl-[24px]",
852
867
  style: { cursor: "pointer" },
853
868
  children: item.name
854
869
  },
@@ -858,6 +873,7 @@ var LocationFilter = ({
858
873
  List__default.default.Item,
859
874
  {
860
875
  onClick: () => handleItemClick(item),
876
+ className: "text-[16px] !pl-[24px]",
861
877
  style: { cursor: "pointer" },
862
878
  children: item.name
863
879
  },
@@ -1055,13 +1071,13 @@ var RoomsList = ({
1055
1071
  state,
1056
1072
  zipCode: "",
1057
1073
  country,
1058
- lat: Number(room.latitude) || 34.0522,
1059
- lng: Number(room.longitude) || -118.2437,
1074
+ lat: Number(room.latitude) || 0,
1075
+ lng: Number(room.longitude) || 0,
1060
1076
  availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
1061
- euifyMakeModel: room?.description
1077
+ euifyMakeModel: room?.equipment?.join(", ") || ""
1062
1078
  };
1063
1079
  });
1064
- }, [demoRooms]);
1080
+ }, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
1065
1081
  const filteredStudioLocations = React2.useMemo(() => {
1066
1082
  if (!selectedLocation) return studioLocations;
1067
1083
  return studioLocations.filter((location) => {
@@ -1110,7 +1126,7 @@ var RoomsList = ({
1110
1126
  /* @__PURE__ */ jsxRuntime.jsxs(
1111
1127
  "button",
1112
1128
  {
1113
- className: "flex cursor-pointer items-center hover:text-[#2E8B57] transition-colors",
1129
+ className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
1114
1130
  onClick: () => setShowLocationFilter(true),
1115
1131
  children: [
1116
1132
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
@@ -1167,7 +1183,7 @@ var RoomsList = ({
1167
1183
  "div",
1168
1184
  {
1169
1185
  style: { maxHeight: "706px", overflow: "auto" },
1170
- className: "rounded-[12px] bg-white border border-[#E4E5E6]",
1186
+ className: "rounded-[12px] bg-white border h-[706px] border-[#E4E5E6]",
1171
1187
  children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
1172
1188
  return /* @__PURE__ */ jsxRuntime.jsx(
1173
1189
  StudioCard,
@@ -1183,7 +1199,10 @@ var RoomsList = ({
1183
1199
  onSchedule,
1184
1200
  onMouseEnter: () => setHoveredRoomId(item.id),
1185
1201
  onMouseLeave: () => setHoveredRoomId(null),
1186
- pageData: mergedPageData.studioCard
1202
+ pageData: {
1203
+ ...mergedPageData.studioCard,
1204
+ noAvailableTime: mergedPageData?.noAvailableTime
1205
+ }
1187
1206
  },
1188
1207
  item.id
1189
1208
  );
@@ -1216,7 +1235,10 @@ var RoomsList = ({
1216
1235
  hoveredLocationId: hoveredRoomId,
1217
1236
  onSchedule,
1218
1237
  mapHeight: "794px",
1219
- pageData: mergedPageData.map
1238
+ pageData: {
1239
+ ...mergedPageData.map,
1240
+ noAvailableTime: pageData?.noAvailableTime
1241
+ }
1220
1242
  }
1221
1243
  ) })
1222
1244
  ] })
@@ -1419,211 +1441,9 @@ var DemoRoom = ({
1419
1441
  ) });
1420
1442
  };
1421
1443
  DemoRoom.displayName = "DemoRoom";
1422
- var EventCard = ({
1423
- title,
1424
- description,
1425
- backgroundImage,
1426
- aspectRatio,
1427
- variant = "medium",
1428
- buttons = [],
1429
- subtitle,
1430
- className,
1431
- ...props
1432
- }) => {
1433
- const isLarge = variant === "large";
1434
- const isMedium = variant === "medium";
1435
- const isProduct = variant === "product";
1436
- return /* @__PURE__ */ jsxRuntime.jsx(
1437
- "div",
1438
- {
1439
- className: cn("rounded-3xl overflow-hidden relative", className),
1440
- style: {
1441
- backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
1442
- backgroundSize: "cover",
1443
- backgroundPosition: "center",
1444
- aspectRatio
1445
- },
1446
- ...props,
1447
- children: /* @__PURE__ */ jsxRuntime.jsxs(
1448
- "div",
1449
- {
1450
- className: cn(
1451
- "relative h-full flex flex-col",
1452
- isLarge && "justify-center pl-8",
1453
- !isLarge && "justify-end pl-8 pb-8"
1454
- ),
1455
- children: [
1456
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1457
- /* @__PURE__ */ jsxRuntime.jsx(
1458
- "h3",
1459
- {
1460
- className: cn(
1461
- "font-semibold mb-3",
1462
- isLarge && "text-3xl text-gray-900",
1463
- isMedium && "text-2xl text-white",
1464
- isProduct && "text-2xl text-gray-900"
1465
- ),
1466
- children: title
1467
- }
1468
- ),
1469
- subtitle && isProduct && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
1470
- description && /* @__PURE__ */ jsxRuntime.jsx(
1471
- "p",
1472
- {
1473
- className: cn(
1474
- "text-sm leading-relaxed",
1475
- isMedium && "text-white/90",
1476
- (isLarge || isProduct) && "text-gray-600"
1477
- ),
1478
- children: description
1479
- }
1480
- )
1481
- ] }),
1482
- buttons.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntime.jsx(
1483
- "button",
1484
- {
1485
- onClick: button.onClick,
1486
- className: cn(
1487
- "px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
1488
- button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
1489
- button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
1490
- ),
1491
- children: button.label
1492
- },
1493
- index
1494
- )) })
1495
- ]
1496
- }
1497
- )
1498
- }
1499
- );
1500
- };
1501
- EventCard.displayName = "EventCard";
1502
- var defaultEvents = [
1503
- {
1504
- variant: "large",
1505
- title: "IFA 2025 Event Name Event Name",
1506
- description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
1507
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
1508
- buttons: [
1509
- {
1510
- label: "Schedule Now",
1511
- variant: "primary"
1512
- }
1513
- ],
1514
- aspectRatio: "1664 / 640"
1515
- },
1516
- {
1517
- variant: "medium",
1518
- title: "Local Event Name Local Event Name Local Event Name",
1519
- description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
1520
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
1521
- buttons: [
1522
- {
1523
- label: "Schedule Now",
1524
- variant: "primary"
1525
- }
1526
- ],
1527
- aspectRatio: "824 / 640"
1528
- },
1529
- {
1530
- variant: "product",
1531
- title: "Anker Prime",
1532
- subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
1533
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
1534
- buttons: [
1535
- {
1536
- label: "Learn More",
1537
- variant: "secondary"
1538
- },
1539
- {
1540
- label: "Shop Now",
1541
- variant: "primary"
1542
- }
1543
- ],
1544
- aspectRatio: "824 / 640"
1545
- },
1546
- {
1547
- variant: "medium",
1548
- title: "Local Event Name Local Event Name Local Event Name",
1549
- description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
1550
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
1551
- buttons: [
1552
- {
1553
- label: "Schedule Now",
1554
- variant: "primary"
1555
- }
1556
- ],
1557
- aspectRatio: "824 / 640"
1558
- },
1559
- {
1560
- variant: "product",
1561
- title: "Anker Prime",
1562
- subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
1563
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
1564
- buttons: [
1565
- {
1566
- label: "Learn More",
1567
- variant: "secondary"
1568
- },
1569
- {
1570
- label: "Shop Now",
1571
- variant: "primary"
1572
- }
1573
- ],
1574
- aspectRatio: "824 / 640"
1575
- }
1576
- ];
1577
- var UpcomingEvents = ({
1578
- title = "Upcoming Events",
1579
- events = defaultEvents,
1580
- showViewMore = true,
1581
- onViewMore,
1582
- className,
1583
- ...props
1584
- }) => {
1585
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
1586
- /* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
1587
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { ...event }) }, index)) }),
1588
- showViewMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
1589
- "button",
1590
- {
1591
- onClick: onViewMore,
1592
- className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
1593
- children: [
1594
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: "View More" }),
1595
- /* @__PURE__ */ jsxRuntime.jsx(
1596
- "svg",
1597
- {
1598
- width: "16",
1599
- height: "16",
1600
- viewBox: "0 0 16 16",
1601
- fill: "none",
1602
- xmlns: "http://www.w3.org/2000/svg",
1603
- className: "transition-transform duration-200 group-hover:translate-y-0.5",
1604
- children: /* @__PURE__ */ jsxRuntime.jsx(
1605
- "path",
1606
- {
1607
- d: "M8 3L8 13M8 13L12 9M8 13L4 9",
1608
- stroke: "currentColor",
1609
- strokeWidth: "2",
1610
- strokeLinecap: "round",
1611
- strokeLinejoin: "round"
1612
- }
1613
- )
1614
- }
1615
- )
1616
- ]
1617
- }
1618
- ) })
1619
- ] });
1620
- };
1621
- UpcomingEvents.displayName = "UpcomingEvents";
1622
1444
 
1623
1445
  exports.DemoRoom = DemoRoom;
1624
- exports.EventCard = EventCard;
1625
1446
  exports.StudioCard = StudioCard;
1626
1447
  exports.StudioMap = StudioMap;
1627
- exports.UpcomingEvents = UpcomingEvents;
1628
1448
  //# sourceMappingURL=demo-room.js.map
1629
1449
  //# sourceMappingURL=demo-room.js.map