@anker-in/ui 0.1.11 → 0.1.13

package/dist/index.mjs

@@ -13,13 +13,11 @@ import dayLocaleData from 'dayjs/plugin/localeData';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -340,12 +338,14 @@ var StudioMap = ({
       const lng = Number(location.lng);
       const svgIcon = {
         url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="44" viewBox="0 0 17 22" fill="none">
-            <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"/>
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="24" cy="24" r="22" fill="#00000010"/>
+            <circle cx="24" cy="24" r="10" fill="#000000"/>
+            <circle cx="24" cy="24" r="5" fill="#3ADB67"/>
           </svg>
         `)}`,
-        scaledSize: { width: 34, height: 44 },
-        anchor: { x: 17, y: 44 }
+        scaledSize: { width: 48, height: 48 },
+        anchor: { x: 24, y: 24 }
       };
       const marker = new google.maps.Marker({
         position: { lat, lng },
@@ -533,7 +533,7 @@ var StudioMap = ({
       "div",
       {
         className: cn(
-          "flex items-center justify-center bg-gray-100 rounded-lg",
+          "flex items-center overflow-hidden justify-center bg-gray-100 rounded-[16px]",
           className
         ),
         style: { height: mapHeight },
@@ -545,7 +545,7 @@ var StudioMap = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("relative w-full rounded-lg overflow-hidden", className),
+      className: cn("relative w-full rounded-[16px] overflow-hidden", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("div", { ref: mapRef, style: { height: mapHeight } }),
@@ -950,6 +950,29 @@ var LocationFilter = ({
   );
   const showIndexBar = filteredItems.length >= 10;
   const handleItemClick = (item) => {
+    if (item.code === "__all__") {
+      if (currentLevel === "country") {
+        onSelect?.({
+          level: "country"
+        });
+        onClose?.();
+      } else if (currentLevel === "state") {
+        onSelect?.({
+          level: "state",
+          country: selectedCountry
+        });
+        onClose?.();
+      } else if (currentLevel === "city") {
+        const parts = selectedState?.split("/") || [];
+        onSelect?.({
+          level: "city",
+          country: parts[0],
+          state: parts[1]
+        });
+        onClose?.();
+      }
+      return;
+    }
     if (currentLevel === "country") {
       setSelectedCountry(item.code);
       setCurrentLevel("state");
@@ -980,87 +1003,94 @@ var LocationFilter = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      style: { height: "794px" },
+      style: { height: "724px" },
       className: cn(
-        "w-full rounded-[12px] absolute z-10 top-0 left-0 bg-white border border-[#E4E5E6]",
+        "w-full rounded-b-[12px] absolute z-10 bottom-[-2px] left-0 bg-white border border-[#E4E5E6]",
         RoomsList_default.antdMobileScope
       ),
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: { background: "#F8F8F8" },
-            className: "rounded-[12px] rounded-b-none h-[108px] font-bold text-[14px] flex flex-col",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[24px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
+            className: "h-[76px] font-bold text-[14px] flex flex-col",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[24px]", children: [
+              /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: onClose,
-                  className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "24",
-                      height: "24",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
-                          fill: "#1D1D1F"
-                        }
-                      )
-                    }
-                  )
+                  onClick: () => handleTabClick("country"),
+                  className: cn(
+                    "pb-[4px] transition-colors",
+                    currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
+                  ),
+                  children: pageData.country
                 }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[16px]", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => handleTabClick("country"),
-                    className: cn(
-                      "pb-[4px] transition-colors",
-                      currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
-                    ),
-                    children: pageData.country
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => handleTabClick("state"),
-                    disabled: !selectedCountry,
-                    className: cn(
-                      "pb-[4px] transition-colors",
-                      currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
-                      !selectedCountry && "opacity-50 cursor-not-allowed"
-                    ),
-                    children: pageData.state
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => handleTabClick("city"),
-                    disabled: !selectedState,
-                    className: cn(
-                      "pb-[4px] transition-colors",
-                      currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
-                      !selectedState && "opacity-50 cursor-not-allowed"
-                    ),
-                    children: pageData.city
-                  }
-                )
-              ] })
-            ]
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => handleTabClick("state"),
+                  disabled: !selectedCountry,
+                  className: cn(
+                    "pb-[4px] transition-colors",
+                    currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
+                    !selectedCountry && "opacity-50 cursor-not-allowed"
+                  ),
+                  children: pageData.state
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => handleTabClick("city"),
+                  disabled: !selectedState,
+                  className: cn(
+                    "pb-[4px] transition-colors",
+                    currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
+                    !selectedState && "opacity-50 cursor-not-allowed"
+                  ),
+                  children: pageData.city
+                }
+              )
+            ] })
           }
         ),
-        /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 108px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
-          const { title, items } = group;
-          return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 76px)" }, children: showIndexBar ? /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx(List, { children: /* @__PURE__ */ jsx(
+            List.Item,
+            {
+              onClick: () => handleItemClick({ code: "__all__", name: pageData.allLocations || "All", count: filteredItems.length }),
+              className: "text-[16px] !pl-[24px] font-bold",
+              style: { cursor: "pointer", borderBottom: "1px solid #E4E5E6" },
+              children: pageData.allLocations
+            },
+            "__all__"
+          ) }),
+          /* @__PURE__ */ jsx(IndexBar, { style: { flex: 1 }, children: groupedItems.map((group) => {
+            const { title, items } = group;
+            return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
+              List.Item,
+              {
+                onClick: () => handleItemClick(item),
+                className: "text-[16px] !pl-[24px]",
+                style: { cursor: "pointer" },
+                children: item.name
+              },
+              item.code
+            )) }) }, title);
+          }) })
+        ] }) : /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxs(List, { children: [
+          /* @__PURE__ */ jsx(
+            List.Item,
+            {
+              onClick: () => handleItemClick({ code: "__all__", name: pageData.allLocations || "All", count: filteredItems.length }),
+              className: "text-[16px] !pl-[24px] font-bold",
+              style: { cursor: "pointer", borderBottom: "1px solid #E4E5E6" },
+              children: pageData.allLocations
+            },
+            "__all__"
+          ),
+          filteredItems.map((item) => /* @__PURE__ */ jsx(
             List.Item,
             {
               onClick: () => handleItemClick(item),
@@ -1069,17 +1099,8 @@ var LocationFilter = ({
               children: item.name
             },
             item.code
-          )) }) }, title);
-        }) }) : /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsx(List, { children: filteredItems.map((item) => /* @__PURE__ */ jsx(
-          List.Item,
-          {
-            onClick: () => handleItemClick(item),
-            className: "text-[16px] !pl-[24px]",
-            style: { cursor: "pointer" },
-            children: item.name
-          },
-          item.code
-        )) }) }) })
+          ))
+        ] }) }) })
       ]
     }
   );
@@ -1305,10 +1326,6 @@ var RoomsList = ({
     setSelectedLocation(selection);
     setShowLocationFilter(false);
   };
-  const handleClearFilter = () => {
-    setSelectedLocation(void 0);
-  };
-  console.log(filteredStudioLocations);
   return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
     /* @__PURE__ */ jsx(Title, { title: mergedPageData.title }),
     loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: mergedPageData.loadingText }) }) }),
@@ -1323,12 +1340,15 @@ var RoomsList = ({
           className: "flex-none relative w-[420px] l:!w-full",
           style: { height: "794px" },
           children: [
-            /* @__PURE__ */ jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]",
+              showLocationFilter ? "rounded-t-[12px] rounded-b-none" : "rounded-[12px]"
+            ), children: /* @__PURE__ */ jsxs("div", { className: "h-[40px] font-bold text-[16px] l:text-[14px] gap-10 l:gap-4 flex items-center", children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {
                   className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
-                  onClick: () => setShowLocationFilter(true),
+                  onClick: () => setShowLocationFilter(!showLocationFilter),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
                     /* @__PURE__ */ jsx(
@@ -1339,6 +1359,10 @@ var RoomsList = ({
                         height: "24",
                         viewBox: "0 0 24 24",
                         fill: "none",
+                        className: cn(
+                          "transition-transform duration-300",
+                          showLocationFilter && "rotate-180"
+                        ),
                         children: /* @__PURE__ */ jsx(
                           "path",
                           {
@@ -1351,14 +1375,7 @@ var RoomsList = ({
                   ]
                 }
               ),
-              selectedLocation && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleClearFilter,
-                  className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
-                  children: mergedPageData.locationFilter.clear
-                }
-              ),
+              selectedLocation && false,
               /* @__PURE__ */ jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
                 mergedPageData.machine,
                 /* @__PURE__ */ jsx(
@@ -1399,7 +1416,6 @@ var RoomsList = ({
                       euifyMakeModel: item?.euifyMakeModel || "",
                       onSchedule,
                       onMouseEnter: () => setHoveredRoomId(item.id),
-                      onMouseLeave: () => setHoveredRoomId(null),
                       pageData: {
                         ...mergedPageData.studioCard,
                         noAvailableTime: mergedPageData?.noAvailableTime
@@ -1655,6 +1671,7 @@ var QuestionnaireForm = ({
   const [agreements, setAgreements] = useState({});
   const [agreementError, setAgreementError] = useState("");
   const [phoneCountryCodes, setPhoneCountryCodes] = useState({});
+  const [otherInputs, setOtherInputs] = useState({});
   const defaultCountryCodes = [
     { code: "+1", country: "US/CA" },
     { code: "+86", country: "CN" },
@@ -1715,6 +1732,13 @@ var QuestionnaireForm = ({
       setAgreementError("");
     }
   };
+  const handleOtherInputChange = (questionId, value) => {
+    setOtherInputs((prev) => ({
+      ...prev,
+      [questionId]: value
+    }));
+    handleChange(questionId, value);
+  };
   const validateForm = () => {
     const newErrors = {};
     questions.forEach((question) => {
@@ -1884,11 +1908,12 @@ var QuestionnaireForm = ({
                   value: option.value || option.label,
                   checked: responses[questionId] === (option.value || option.label),
                   onChange: (e) => handleChange(questionId, e.target.value),
-                  className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2",
+                  className: "w-5 h-5 appearance-none cursor-pointer flex-shrink-0",
                   style: {
-                    backgroundColor: "white",
-                    borderColor: "#D1D5DB",
-                    colorScheme: "light"
+                    backgroundImage: responses[questionId] === (option.value || option.label) ? "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/SelectBox.png?v=1769507941)" : "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Frame_2121235232_2.png?v=1769507995)",
+                    backgroundSize: "contain",
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "center"
                   }
                 }
               ),
@@ -1897,6 +1922,61 @@ var QuestionnaireForm = ({
           },
           option.value || option.label
         )) });
+      case "radio_with_other": {
+        const isOtherSelected = responses[questionId] === "__other__" || responses[questionId] && !question?.options?.find(
+          (opt) => (opt.value || opt.label) === responses[questionId]
+        );
+        return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question?.options?.map((option) => {
+          const optionValue = option.value || option.label;
+          const isOtherOption = optionValue === "__other__";
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: questionId,
+                  value: optionValue,
+                  checked: isOtherOption ? isOtherSelected : responses[questionId] === optionValue,
+                  onChange: (e) => {
+                    if (isOtherOption) {
+                      handleChange(questionId, "__other__");
+                      setOtherInputs((prev) => ({
+                        ...prev,
+                        [questionId]: ""
+                      }));
+                    } else {
+                      handleChange(questionId, e.target.value);
+                    }
+                  },
+                  className: "w-5 h-5 appearance-none cursor-pointer flex-shrink-0",
+                  style: {
+                    backgroundImage: (isOtherOption ? isOtherSelected : responses[questionId] === optionValue) ? "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/SelectBox.png?v=1769507941)" : "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Frame_2121235232_2.png?v=1769507995)",
+                    backgroundSize: "contain",
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: "center"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
+            ] }),
+            isOtherOption && isOtherSelected && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: otherInputs[questionId] || "",
+                onChange: (e) => handleOtherInputChange(questionId, e.target.value),
+                placeholder: question.placeholder || "Please specify...",
+                className: cn(
+                  "w-full ml-8 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
+                  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
+                  hasError ? "border-red-500" : "border-[#E4E5E6]"
+                )
+              }
+            )
+          ] }, optionValue);
+        }) });
+      }
       case "checkbox":
         return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question?.options?.map((option) => {
           const optionValue = option.value || option.label;
@@ -1920,9 +2000,7 @@ var QuestionnaireForm = ({
                     ),
                     className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded",
                     style: {
-                      backgroundColor: "white",
-                      borderColor: "#D1D5DB",
-                      colorScheme: "light"
+                      accentColor: "#3ADB67"
                     }
                   }
                 ),
@@ -1933,7 +2011,7 @@ var QuestionnaireForm = ({
           );
         }) });
       case "select":
-        return /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsx(
           "select",
           {
             value: responses[questionId] || "",
@@ -1944,17 +2022,14 @@ var QuestionnaireForm = ({
               "cursor-pointer",
               hasError ? "border-red-500" : "border-[#E4E5E6]"
             ),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: question.placeholder || "Please select..." }),
-              question.options?.map((option) => /* @__PURE__ */ jsx(
-                "option",
-                {
-                  value: option.value || option.label,
-                  children: option.label
-                },
-                option.value || option.label
-              ))
-            ]
+            children: question.options?.map((option) => /* @__PURE__ */ jsx(
+              "option",
+              {
+                value: option.value || option.label,
+                children: option.label
+              },
+              option.value || option.label
+            ))
           }
         );
       default:
@@ -1975,7 +2050,14 @@ var QuestionnaireForm = ({
         ] }),
         renderQuestion(question),
         question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
-        errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", style: { color: "#FF4D4D" }, children: errors[questionId] })
+        errors[questionId] && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm font-bold",
+            style: { color: "#FF4D4D" },
+            children: errors[questionId]
+          }
+        )
       ] }, questionId);
     }) }) }),
     !!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
@@ -1988,11 +2070,9 @@ var QuestionnaireForm = ({
               id: `agreement-${index}`,
               checked: agreements[index] || false,
               onChange: (e) => handleAgreementChange(index, e.target.checked),
-              className: "w-5 h-5 rounded text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0",
+              className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
               style: {
-                backgroundColor: "white",
-                borderColor: "#D1D5DB",
-                colorScheme: "light"
+                accentColor: "#3ADB67"
               }
             }
           ),
@@ -2006,7 +2086,14 @@ var QuestionnaireForm = ({
             }
           )
         ] }, index)),
-        agreementError && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold mt-2", style: { color: "#FF4D4D" }, children: agreementError })
+        agreementError && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm font-bold mt-2",
+            style: { color: "#FF4D4D" },
+            children: agreementError
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(
         "button",
@@ -2047,7 +2134,8 @@ var DateTimePicker = ({
     bookingFailed: "Booking failed"
   },
   locale,
-  onBookingSuccess
+  onBookingSuccess,
+  onQuestionnaireSubmit
 }) => {
   const { token } = theme.useToken();
   const [selectedDate, setSelectedDate] = useState(null);
@@ -2285,7 +2373,7 @@ var DateTimePicker = ({
               }
               .calendar-custom-cell .ant-picker-cell-disabled .ant-picker-cell-inner {
                 background-color: #F5F5F5 !important;
-                color: #2A2C32 !important;
+                color: #767880 !important;
                 border: none !important;
                 cursor: not-allowed !important;
                 box-shadow: none !important;
@@ -2332,7 +2420,7 @@ var DateTimePicker = ({
                           className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
                           style: {
                             backgroundColor: isSelected ? "#3ADB67" : void 0,
-                            color: isSelected ? "#080A0F" : isDisabled ? "#2A2C32" : void 0,
+                            color: isSelected ? "#080A0F" : isDisabled ? "#767880" : void 0,
                             borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
                           },
                           children: /* @__PURE__ */ jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
@@ -2532,7 +2620,7 @@ var DateTimePicker = ({
             )
           ] })
         ] }),
-        /* @__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) => {
+        /* @__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-[#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) => {
           const isAvailable = slot.status === "available";
           const isFull = slot.status === "full";
           const isSelected = selectedTimeslotId === slot.id;
@@ -2548,12 +2636,12 @@ var DateTimePicker = ({
               className: `
                       rounded-[20px] w-full text-[18px] l:gap-2 l:text-[16px] flex items-center justify-center gap-4 h-[76px]
                       border text-center transition-colors
-                      ${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"}
+                      ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#767880] cursor-not-allowed"}
                     `,
               children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
                 /* @__PURE__ */ jsx("div", { children: formatTimeslot(slot) }),
-                isFull && /* @__PURE__ */ jsx("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-[2px]", children: pageData.full }),
-                isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-1", children: [
+                isFull && /* @__PURE__ */ jsx("div", { className: "text-[16px] l:text-[14px] text-[#767880] mt-[2px]", children: pageData.full }),
+                isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-[16px] l:text-[14px] text-[#767880] mt-1", children: [
                   slot.capacity - slot.booked_count,
                   " ",
                   pageData.spotsLeft
@@ -2576,7 +2664,7 @@ var DateTimePicker = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-12", children: [
       !!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 }),
-      questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#2A2C32] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsx(
+      questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsx(
         QuestionnaireForm,
         {
           questions: questionnaire?.questions || [],
@@ -2584,6 +2672,9 @@ var DateTimePicker = ({
           pageData,
           selectedTimeslotId,
           onSubmit: async (responses) => {
+            if (onQuestionnaireSubmit) {
+              await onQuestionnaireSubmit(responses);
+            }
             try {
               const customerName = responses.name || responses.customer_name || "";
               const customerEmail = responses.email || responses.customer_email || "";
@@ -2614,61 +2705,6 @@ var DateTimePicker = ({
   ] });
 };
 var DateTimePicker_default = DateTimePicker;
-var Navigation;
-var Pagination;
-var Autoplay;
-var swiperVersion = "11+";
-try {
-  const modules = __require("swiper/modules");
-  Navigation = modules.Navigation;
-  Pagination = modules.Pagination;
-  Autoplay = modules.Autoplay;
-  swiperVersion = "11+";
-} catch (e) {
-  try {
-    const SwiperCore = __require("swiper");
-    const SwiperNavigation = __require("swiper/modules/navigation");
-    const SwiperPagination = __require("swiper/modules/pagination");
-    const SwiperAutoplay = __require("swiper/modules/autoplay");
-    const SwiperClass = SwiperCore.default || SwiperCore;
-    if (SwiperClass && SwiperClass.use) {
-      SwiperClass.use([
-        SwiperNavigation.default || SwiperNavigation,
-        SwiperPagination.default || SwiperPagination,
-        SwiperAutoplay.default || SwiperAutoplay
-      ]);
-    }
-    Navigation = SwiperNavigation.default || SwiperNavigation;
-    Pagination = SwiperPagination.default || SwiperPagination;
-    Autoplay = SwiperAutoplay.default || SwiperAutoplay;
-    swiperVersion = "8";
-  } catch (e2) {
-    console.warn("Failed to load swiper modules:", e2);
-  }
-}
-if (typeof window !== "undefined") {
-  try {
-    __require("swiper/css");
-    __require("swiper/css/navigation");
-    __require("swiper/css/pagination");
-  } catch (e) {
-    try {
-      __require("swiper/swiper.min.css");
-      __require("swiper/modules/navigation/navigation.min.css");
-      __require("swiper/modules/pagination/pagination.min.css");
-    } catch (e2) {
-      console.warn("Failed to load swiper styles");
-    }
-  }
-}
-var defaultDescriptions = [
-  "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
-];
-var defaultImages = [
-  "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
-  "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
-];
 var DemoRoomDetail = ({
   apiClient,
   demoRoomCode,
@@ -2695,20 +2731,21 @@ var DemoRoomDetail = ({
   } = useDemoRoom(apiClient, demoRoomCode || "", locale, {
     enabled: !!apiClient && !!demoRoomCode
   });
-  const title = demoRoom?.name || titleProp || "Design District Demo Room";
-  const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
-  const devices = demoRoom?.equipment?.join(", ") || devicesProp || "eufyMake E1, eufyMake M5";
-  const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
-  const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
+  const title = demoRoom?.name || titleProp || "";
+  const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp;
+  const devices = demoRoom?.equipment?.join(", ") || devicesProp || "";
+  const address = demoRoom?.address || addressProp || "";
+  const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || [];
   const googleMapsLink = mapsLink || (() => {
     if (demoRoom?.latitude && demoRoom?.longitude) {
       return `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}`;
-    } else {
+    } else if (address) {
       return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
     }
+    return "#";
   })();
   if (loading && apiClient && demoRoomCode) {
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full pb-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
         /* @__PURE__ */ jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
         /* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
@@ -2723,10 +2760,13 @@ var DemoRoomDetail = ({
       /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: error.message })
     ] }) });
   }
-  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: [
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: cn(
+    "gap-[80px] l:gap-[40px] l:flex l:flex-col-reverse items-start py-[24px] l:pb-[64px]",
+    images.length > 0 ? "grid grid-cols-2" : "flex"
+  ), children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
       /* @__PURE__ */ jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "mt-[20px]", children: descriptions.map((desc, index) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "mt-[20px]", children: descriptions?.map((desc, index) => /* @__PURE__ */ jsx(
         "p",
         {
           className: "text-base text-gray-600 leading-relaxed",
@@ -2841,67 +2881,62 @@ var DemoRoomDetail = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
-      Swiper,
-      {
-        ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
-        spaceBetween: 0,
-        slidesPerView: 1,
-        navigation: true,
-        pagination: { clickable: true },
-        autoplay: {
-          delay: 3e3,
-          disableOnInteraction: false
-        },
-        loop: true,
-        className: "h-full rounded-2xl",
-        children: images.map((img, index) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: img,
-            alt: `Demo room view ${index + 1}`,
-            className: "w-full h-full object-cover"
-          }
-        ) }) }, index))
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-white flex items-center justify-center", children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "32",
-          height: "32",
-          viewBox: "0 0 32 32",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: "4",
-                y: "8",
-                width: "24",
-                height: "16",
-                rx: "2",
-                stroke: "currentColor",
-                strokeWidth: "2"
+    images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden demo-room-swiper", children: [
+      /* @__PURE__ */ jsx("style", { children: `
+              .demo-room-swiper .swiper-pagination-bullet {
+                background-color: rgba(255, 255, 255, 0.5);
               }
-            ),
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M28 20L22 14L16 20",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+              .demo-room-swiper .swiper-pagination-bullet-active {
+                background-color: #3ADB67 !important;
               }
-            )
-          ]
+              .demo-room-swiper .swiper-button-prev,
+              .demo-room-swiper .swiper-button-next {
+                width: 48px !important;
+                height: 48px !important;
+                background-size: contain !important;
+                background-repeat: no-repeat !important;
+                background-position: center !important;
+                color: transparent !important;
+              }
+              .demo-room-swiper .swiper-button-prev::after,
+              .demo-room-swiper .swiper-button-next::after {
+                display: none !important;
+                content: '' !important;
+              }
+              .demo-room-swiper .swiper-button-prev {
+                background-image: url('https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Group_2121235586_572f0715-aa60-4188-9591-248f6ac53f40.svg?v=1736951731') !important;
+                left: 16px !important;
+              }
+              .demo-room-swiper .swiper-button-next {
+                background-image: url('https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Group_2121235583_3071dda3-e1ee-4fb8-b488-2402c8ea8018.svg?v=1736951731') !important;
+                right: 16px !important;
+              }
+            ` }),
+      /* @__PURE__ */ jsx(
+        Swiper,
+        {
+          modules: [Navigation, Pagination, Autoplay],
+          spaceBetween: 0,
+          slidesPerView: 1,
+          navigation: images.length > 1,
+          pagination: images.length > 1 ? { clickable: true } : false,
+          autoplay: images.length > 1 ? {
+            delay: 3e3,
+            disableOnInteraction: false
+          } : false,
+          loop: images.length > 1,
+          className: "h-full rounded-2xl",
+          children: images.map((img, index) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: img,
+              alt: `Demo room view ${index + 1}`,
+              className: "w-full h-full object-cover"
+            }
+          ) }) }, index))
         }
-      ) }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm", children: pageData.demoRoomImages })
-    ] }) }) })
+      )
+    ] })
   ] }) });
 };
 DemoRoomDetail.displayName = "DemoRoomDetail";
@@ -2913,6 +2948,7 @@ var BookingForm = ({
   pageData,
   timezone,
   handleBookingSuccess,
+  onQuestionnaireSubmit,
   ...props
 }) => {
   const apiClient = useMemo(
@@ -2945,6 +2981,7 @@ var BookingForm = ({
         timezone,
         locale: apiConfig.locale,
         onBookingSuccess: handleBookingSuccess,
+        onQuestionnaireSubmit,
         pageData: dateTimePickerPageData
       }
     ) }) })