@idkwebsites/components 0.1.16 → 0.1.17

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(src_exports, {
   TimePicker: () => TimePicker,
   useAvailability: () => useAvailability,
   useBookingLookup: () => useBookingLookup,
+  useBookingWidget: () => useBookingWidget,
   useCancelBooking: () => useCancelBooking,
   useCreateBooking: () => useCreateBooking,
   useServices: () => useServices,
@@ -282,367 +283,8 @@ function useBookingLookup(uid, enabled = true) {
   });
 }
 
-// src/components/ServiceCard.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ServiceCard({
-  service,
-  className,
-  showDescription = true,
-  showPrice = true,
-  showImage = false,
-  onSelect
-}) {
-  const handleClick = () => {
-    if (onSelect) onSelect(service);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      className: ["idk-card", onSelect ? "idk-card--clickable" : "", className].filter(Boolean).join(" "),
-      onClick: onSelect ? handleClick : void 0,
-      role: onSelect ? "button" : void 0,
-      tabIndex: onSelect ? 0 : void 0,
-      children: [
-        showImage && service.image?.url ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "idk-card__media", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: service.image.url, alt: service.name }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "idk-card__title", children: service.name }),
-          showPrice && typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "idk-card__price", children: [
-            "$",
-            (service.price / 100).toFixed(2)
-          ] }) : null
-        ] }),
-        showDescription && service.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "idk-card__description", children: service.description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__meta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
-            service.duration,
-            " min"
-          ] }),
-          service.category ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: service.category }) : null
-        ] })
-      ]
-    }
-  );
-}
-
-// src/components/ServicesList.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ServicesList({
-  layout = "grid",
-  columns = 3,
-  className,
-  showDescription,
-  showPrice,
-  showImage,
-  query,
-  filter,
-  sort,
-  limit,
-  emptyMessage = "No services available.",
-  loadingMessage = "Loading services...",
-  onSelect
-}) {
-  const { data, isLoading, error } = useServices(query);
-  if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: loadingMessage });
-  }
-  let services = data?.services ? [...data.services] : [];
-  if (filter) {
-    services = services.filter(filter);
-  }
-  if (sort) {
-    services = services.sort(sort);
-  }
-  if (typeof limit === "number") {
-    services = services.slice(0, Math.max(0, limit));
-  }
-  if (error || services.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: emptyMessage });
-  }
-  const gridStyle = layout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      className: [
-        "idk-services",
-        layout === "grid" ? "idk-services--grid" : "idk-services--list",
-        className
-      ].filter(Boolean).join(" "),
-      style: gridStyle,
-      children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        ServiceCard,
-        {
-          service,
-          showDescription,
-          showPrice,
-          showImage,
-          onSelect
-        },
-        service.id
-      ))
-    }
-  );
-}
-
-// src/lib/linkify.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var LINK_REGEX = /((https?:\/\/|www\.)[^\s]+|[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}|(?:[a-z0-9-]+\.)+[a-z]{2,}(?:\/[^\s]*)?)/gi;
-function buildHref(raw) {
-  if (raw.includes("@") && !raw.startsWith("http")) {
-    return `mailto:${raw}`;
-  }
-  if (raw.startsWith("http://") || raw.startsWith("https://")) {
-    return raw;
-  }
-  if (raw.startsWith("www.")) {
-    return `https://${raw}`;
-  }
-  return `https://${raw}`;
-}
-function trimTrailingPunctuation(value) {
-  let text = value;
-  let trailing = "";
-  while (text && /[),.!?:;]+$/.test(text)) {
-    trailing = text.slice(-1) + trailing;
-    text = text.slice(0, -1);
-  }
-  return { text, trailing };
-}
-function renderLinkedText(text) {
-  if (!text) return null;
-  const matches = Array.from(text.matchAll(LINK_REGEX));
-  if (matches.length === 0) return text;
-  const nodes = [];
-  let lastIndex = 0;
-  matches.forEach((match, index) => {
-    const matchText = match[0];
-    const start = match.index ?? 0;
-    if (start > lastIndex) {
-      nodes.push(text.slice(lastIndex, start));
-    }
-    const { text: cleanText, trailing } = trimTrailingPunctuation(matchText);
-    if (cleanText) {
-      const href = buildHref(cleanText);
-      nodes.push(
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", children: cleanText }, `link-${start}-${index}`)
-      );
-    }
-    if (trailing) {
-      nodes.push(trailing);
-    }
-    lastIndex = start + matchText.length;
-  });
-  if (lastIndex < text.length) {
-    nodes.push(text.slice(lastIndex));
-  }
-  return nodes;
-}
-
-// src/components/TeamMember.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function TeamMember({
-  member,
-  className,
-  showRole = true,
-  showEmail = false,
-  showBio = false,
-  layout = "card",
-  imagePosition = "left"
-}) {
-  const initials = member.name?.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
-  const avatar = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: initials }) });
-  if (layout === "profile") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: ["idk-team__profile", className].filter(Boolean).join(" "), children: [
-      imagePosition === "left" ? avatar : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "idk-team__info", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "idk-card__title", children: member.name }),
-        showRole ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
-        showBio && member.bio ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
-        showEmail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
-      ] }),
-      imagePosition === "right" ? avatar : null
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: initials }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "idk-team__info", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "idk-card__title", children: member.name }),
-      showRole ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
-      showBio && member.bio ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
-      showEmail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
-    ] })
-  ] });
-}
-
-// src/components/TeamGrid.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function TeamGrid({
-  columns = 3,
-  className,
-  showRole,
-  showEmail,
-  showBio,
-  layout = "card",
-  imagePosition = "left",
-  query,
-  filter,
-  sort,
-  limit,
-  emptyMessage = "No team members available.",
-  loadingMessage = "Loading team..."
-}) {
-  const { data, isLoading, error } = useTeam(query);
-  if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "idk-state", children: loadingMessage });
-  }
-  let members = data?.team ? [...data.team] : [];
-  if (filter) {
-    members = members.filter(filter);
-  }
-  if (sort) {
-    members = members.sort(sort);
-  }
-  if (typeof limit === "number") {
-    members = members.slice(0, Math.max(0, limit));
-  }
-  if (error || members.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "idk-state", children: emptyMessage });
-  }
-  const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
-    {
-      className: ["idk-team", className].filter(Boolean).join(" "),
-      style: gridStyle,
-      children: members.map((member) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        TeamMember,
-        {
-          member,
-          showRole,
-          showEmail,
-          showBio,
-          layout,
-          imagePosition
-        },
-        member.id
-      ))
-    }
-  );
-}
-
-// src/components/ContactForm.tsx
+// src/core/hooks/useBookingWidget.ts
 var import_react6 = require("react");
-var import_react_query7 = require("@tanstack/react-query");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DEFAULT_FIELDS = ["name", "email", "phone", "message"];
-function ContactForm({
-  fields = DEFAULT_FIELDS,
-  formType = "contact",
-  submitLabel = "Send Message",
-  className,
-  onSuccess,
-  onError
-}) {
-  const config = usePlatformConfig();
-  const [formState, setFormState] = (0, import_react6.useState)({
-    name: "",
-    email: "",
-    phone: "",
-    subject: "",
-    message: ""
-  });
-  const mutation = (0, import_react_query7.useMutation)({
-    mutationFn: (payload) => apiRequest(config, "/contact", {
-      method: "POST",
-      body: JSON.stringify(payload)
-    }),
-    onSuccess: () => {
-      setFormState({ name: "", email: "", phone: "", subject: "", message: "" });
-      onSuccess?.();
-    },
-    onError: (error) => {
-      const message = error instanceof Error ? error.message : "Failed to submit form";
-      onError?.(message);
-    }
-  });
-  const handleChange = (field, value) => {
-    setFormState((prev) => ({ ...prev, [field]: value }));
-  };
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    mutation.mutate({
-      name: formState.name,
-      email: formState.email,
-      phone: formState.phone || void 0,
-      subject: formState.subject || void 0,
-      message: formState.message,
-      formType
-    });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
-    fields.includes("name") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "input",
-        {
-          value: formState.name,
-          onChange: (event) => handleChange("name", event.target.value),
-          required: true
-        }
-      )
-    ] }),
-    fields.includes("email") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "input",
-        {
-          type: "email",
-          value: formState.email,
-          onChange: (event) => handleChange("email", event.target.value),
-          required: true
-        }
-      )
-    ] }),
-    fields.includes("phone") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Phone" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "input",
-        {
-          value: formState.phone,
-          onChange: (event) => handleChange("phone", event.target.value)
-        }
-      )
-    ] }),
-    fields.includes("subject") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Subject" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "input",
-        {
-          value: formState.subject,
-          onChange: (event) => handleChange("subject", event.target.value)
-        }
-      )
-    ] }),
-    fields.includes("message") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Message" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "textarea",
-        {
-          value: formState.message,
-          onChange: (event) => handleChange("message", event.target.value),
-          rows: 5,
-          required: true
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
-    mutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
-    mutation.isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
-  ] });
-}
-
-// src/components/BookingWidget.tsx
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
 var parseDateOnly = (value) => {
   if (!value) return null;
   const normalized = value.includes("T") ? value.split("T")[0] : value;
@@ -655,92 +297,71 @@ var addDays = (dateStr, days) => {
   parsed.setDate(parsed.getDate() + days);
   return parsed.toISOString().slice(0, 10);
 };
-function BookingWidget({
-  className,
-  showStaffSelection = true,
-  onSuccess,
-  services,
-  servicesQuery,
-  teamQuery,
-  serviceFilter,
-  teamFilter,
-  title = "Book an Appointment",
-  subtitle,
-  autoAdvanceOnSelect = false,
-  scrollToStep = true,
-  scrollOffset = 96,
-  enableServiceSearch = true,
-  serviceSearchPlaceholder = "Search services",
-  enableCategoryFilter = false,
-  categoryLabel = "All categories",
-  serviceListMaxHeight,
-  serviceLayout = "list",
-  serviceColumns = 2,
-  servicePageSize = 10,
-  showServicePagination,
-  staffLayout = "grid",
-  staffColumns = 2,
-  showAnyStaffOption = true,
-  staffPageSize = 8,
-  showStaffPagination,
-  timeLayout = "split",
-  availabilityDays: availabilityDaysProp = 7,
-  enableDatePaging = true,
-  datePickerMode = "list",
-  calendarVariant = "default",
-  maxAdvanceMonths = 3,
-  disabledWeekdays = [],
-  showFullyBookedLabel = true
-}) {
-  const resolvedServicesQuery = (0, import_react7.useMemo)(
-    () => services ? { ...servicesQuery, enabled: false } : servicesQuery,
-    [services, servicesQuery]
+function useBookingWidget(options = {}) {
+  const {
+    services: servicesProp,
+    servicesQuery,
+    teamQuery,
+    serviceFilter,
+    teamFilter,
+    showStaffSelection = true,
+    autoAdvanceOnSelect = false,
+    scrollToStep: scrollToStepEnabled = true,
+    scrollOffset = 96,
+    widgetRef,
+    onSuccess,
+    availabilityDays: availabilityDaysProp = 7,
+    enableDatePaging = true,
+    datePickerMode = "list",
+    calendarVariant = "default",
+    maxAdvanceMonths = 3,
+    disabledWeekdays = [],
+    showFullyBookedLabel = true,
+    enableServiceSearch = true,
+    enableCategoryFilter = false,
+    servicePageSize = 10,
+    staffPageSize = 8,
+    showAnyStaffOption = true
+  } = options;
+  const resolvedServicesQuery = (0, import_react6.useMemo)(
+    () => servicesProp ? { ...servicesQuery, enabled: false } : servicesQuery,
+    [servicesProp, servicesQuery]
   );
   const { data: servicesData, isLoading: servicesLoading } = useServices(resolvedServicesQuery);
   const { data: teamData } = useTeam(teamQuery);
   const createBooking = useCreateBooking();
-  const widgetRef = (0, import_react7.useRef)(null);
-  const [step, setStep] = (0, import_react7.useState)("service");
-  const [selectedService, setSelectedService] = (0, import_react7.useState)(null);
-  const [selectedStaff, setSelectedStaff] = (0, import_react7.useState)(null);
-  const [selectedDate, setSelectedDate] = (0, import_react7.useState)(null);
-  const [selectedTime, setSelectedTime] = (0, import_react7.useState)(null);
-  const [selectedEndTime, setSelectedEndTime] = (0, import_react7.useState)(null);
-  const [serviceSearch, setServiceSearch] = (0, import_react7.useState)("");
-  const [categoryFilter, setCategoryFilter] = (0, import_react7.useState)("all");
-  const [servicePage, setServicePage] = (0, import_react7.useState)(1);
-  const [staffPage, setStaffPage] = (0, import_react7.useState)(1);
-  const [availabilityDays, setAvailabilityDays] = (0, import_react7.useState)(
-    Math.max(1, availabilityDaysProp)
-  );
-  const [availabilityStartDate, setAvailabilityStartDate] = (0, import_react7.useState)(
+  const [step, setStep] = (0, import_react6.useState)("service");
+  const [selectedService, setSelectedService] = (0, import_react6.useState)(null);
+  const [selectedStaff, setSelectedStaff] = (0, import_react6.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react6.useState)(null);
+  const [selectedTime, setSelectedTime] = (0, import_react6.useState)(null);
+  const [selectedEndTime, setSelectedEndTime] = (0, import_react6.useState)(null);
+  const [serviceSearch, setServiceSearch] = (0, import_react6.useState)("");
+  const [categoryFilter, setCategoryFilter] = (0, import_react6.useState)("all");
+  const [servicePage, setServicePage] = (0, import_react6.useState)(1);
+  const [staffPage, setStaffPage] = (0, import_react6.useState)(1);
+  const [availabilityDays, setAvailabilityDays] = (0, import_react6.useState)(Math.max(1, availabilityDaysProp));
+  const [availabilityStartDate, setAvailabilityStartDate] = (0, import_react6.useState)(
     () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
   );
-  const [calendarMonth, setCalendarMonth] = (0, import_react7.useState)(() => {
+  const [calendarMonth, setCalendarMonth] = (0, import_react6.useState)(() => {
     const now = /* @__PURE__ */ new Date();
     return new Date(now.getFullYear(), now.getMonth(), 1);
   });
-  const [bookingError, setBookingError] = (0, import_react7.useState)(null);
-  const [details, setDetails] = (0, import_react7.useState)({
-    name: "",
-    email: "",
-    phone: "",
-    notes: ""
-  });
-  const servicesList = (0, import_react7.useMemo)(() => {
-    const list = services ? [...services] : servicesData?.services ? [...servicesData.services] : [];
+  const [bookingError, setBookingError] = (0, import_react6.useState)(null);
+  const [details, setDetails] = (0, import_react6.useState)({ name: "", email: "", phone: "", notes: "" });
+  const servicesList = (0, import_react6.useMemo)(() => {
+    const list = servicesProp ? [...servicesProp] : servicesData?.services ? [...servicesData.services] : [];
     return serviceFilter ? list.filter(serviceFilter) : list;
-  }, [services, servicesData, serviceFilter]);
-  const categories = (0, import_react7.useMemo)(() => {
+  }, [servicesProp, servicesData, serviceFilter]);
+  const categories = (0, import_react6.useMemo)(() => {
     const set = /* @__PURE__ */ new Set();
-    servicesList.forEach((service) => {
-      if (service.category) {
-        set.add(service.category);
-      }
+    servicesList.forEach((s) => {
+      if (s.category) set.add(s.category);
     });
     return Array.from(set).sort();
   }, [servicesList]);
-  const filteredServices = (0, import_react7.useMemo)(() => {
+  const filteredServices = (0, import_react6.useMemo)(() => {
     const search = serviceSearch.trim().toLowerCase();
     return servicesList.filter((service) => {
       const matchesSearch = !search || service.name.toLowerCase().includes(search) || (service.description || "").toLowerCase().includes(search) || (service.category || "").toLowerCase().includes(search);
@@ -748,19 +369,18 @@ function BookingWidget({
       return matchesSearch && matchesCategory;
     });
   }, [servicesList, serviceSearch, categoryFilter]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setServicePage(1);
   }, [serviceSearch, categoryFilter]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setStaffPage(1);
   }, [selectedService?.id, teamData, teamFilter]);
-  const pagedServices = (0, import_react7.useMemo)(() => {
+  const pagedServices = (0, import_react6.useMemo)(() => {
     const pageSize = Math.max(1, servicePageSize);
     return filteredServices.slice(0, pageSize * servicePage);
   }, [filteredServices, servicePage, servicePageSize]);
   const hasMoreServices = filteredServices.length > pagedServices.length;
-  const shouldPaginate = showServicePagination ?? hasMoreServices;
-  const staffOptions = (0, import_react7.useMemo)(() => {
+  const staffOptions = (0, import_react6.useMemo)(() => {
     if (!selectedService) return [];
     if (selectedService.assignedStaff && selectedService.assignedStaff.length > 0) {
       const assigned = selectedService.assignedStaff;
@@ -769,66 +389,12 @@ function BookingWidget({
     const teamList = teamData?.team || [];
     return teamFilter ? teamList.filter(teamFilter) : teamList;
   }, [selectedService, teamData, teamFilter]);
-  const pagedStaff = (0, import_react7.useMemo)(() => {
+  const pagedStaff = (0, import_react6.useMemo)(() => {
     const pageSize = Math.max(1, staffPageSize);
     return staffOptions.slice(0, pageSize * staffPage);
   }, [staffOptions, staffPage, staffPageSize]);
   const hasMoreStaff = staffOptions.length > pagedStaff.length;
-  const shouldPaginateStaff = showStaffPagination ?? hasMoreStaff;
-  const availabilityEndDate = (0, import_react7.useMemo)(
-    () => addDays(availabilityStartDate, Math.max(1, availabilityDays) - 1),
-    [availabilityStartDate, availabilityDays]
-  );
-  const availability = useAvailability({
-    serviceId: selectedService?.id || "",
-    staffId: selectedStaff?.id,
-    startDate: availabilityStartDate,
-    endDate: availabilityEndDate,
-    enabled: Boolean(selectedService)
-  });
-  const timeZone = availability.data?.timeZone || "America/Chicago";
-  const safeTimeZone = (0, import_react7.useMemo)(() => {
-    if (!timeZone) return void 0;
-    try {
-      new Intl.DateTimeFormat("en-US", { timeZone }).format(/* @__PURE__ */ new Date());
-      return timeZone;
-    } catch {
-      return void 0;
-    }
-  }, [timeZone]);
-  const timeZoneLabel = (0, import_react7.useMemo)(() => {
-    if (timeZone) return timeZone;
-    try {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    } catch {
-      return "Local time";
-    }
-  }, [timeZone]);
-  const dateLabelFormatter = (0, import_react7.useMemo)(
-    () => new Intl.DateTimeFormat("en-US", {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    }),
-    []
-  );
-  const dateHeadingFormatter = (0, import_react7.useMemo)(
-    () => new Intl.DateTimeFormat("en-US", {
-      weekday: "long",
-      month: "long",
-      day: "numeric"
-    }),
-    []
-  );
-  const timeFormatter = (0, import_react7.useMemo)(
-    () => new Intl.DateTimeFormat("en-US", {
-      timeZone: safeTimeZone,
-      hour: "numeric",
-      minute: "2-digit"
-    }),
-    [safeTimeZone]
-  );
-  const requiresStaff = showStaffSelection || selectedService?.requiresStaffSelection || selectedService?.schedulingType === "customer-choice";
+  const requiresStaff = showStaffSelection || Boolean(selectedService?.requiresStaffSelection) || selectedService?.schedulingType === "customer-choice";
   const canSkipStaff = !selectedService?.requiresStaffSelection;
   const totalSteps = requiresStaff ? 4 : 3;
   const stepNumber = (() => {
@@ -837,81 +403,122 @@ function BookingWidget({
     if (step === "time") return requiresStaff ? 3 : 2;
     if (step === "details") return requiresStaff ? 4 : 3;
     return totalSteps;
-  })();
-  const scrollToTop = (0, import_react7.useCallback)(() => {
-    if (!scrollToStep || !widgetRef.current) return;
-    const top = widgetRef.current.getBoundingClientRect().top + window.scrollY;
-    window.scrollTo({
-      top: Math.max(0, top - scrollOffset),
-      behavior: "smooth"
-    });
-  }, [scrollToStep, scrollOffset]);
-  const resetSelections = () => {
-    setSelectedStaff(null);
-    setSelectedDate(null);
-    setSelectedTime(null);
-    setSelectedEndTime(null);
-    setBookingError(null);
-  };
-  const parseDateTime = (value, fallbackDate) => {
-    if (!value) return null;
-    const direct = new Date(value);
-    if (!Number.isNaN(direct.getTime())) return direct;
-    if (fallbackDate) {
-      const normalized = fallbackDate.includes("T") ? fallbackDate.split("T")[0] : fallbackDate;
-      const combined = /* @__PURE__ */ new Date(`${normalized}T${value}`);
-      if (!Number.isNaN(combined.getTime())) return combined;
-    }
-    return null;
-  };
-  const formatDateLabel = (date) => {
-    const parsed = parseDateOnly(date);
-    if (!parsed) return date;
-    try {
-      return dateLabelFormatter.format(parsed);
-    } catch {
-      return date;
-    }
-  };
-  const formatDateHeading = (date) => {
-    const parsed = parseDateOnly(date);
-    if (!parsed) return date;
+  })();
+  const availabilityEndDate = (0, import_react6.useMemo)(
+    () => addDays(availabilityStartDate, Math.max(1, availabilityDays) - 1),
+    [availabilityStartDate, availabilityDays]
+  );
+  const availability = useAvailability({
+    serviceId: selectedService?.id || "",
+    staffId: selectedStaff?.id,
+    startDate: availabilityStartDate,
+    endDate: availabilityEndDate,
+    enabled: Boolean(selectedService)
+  });
+  const timeZone = availability.data?.timeZone || "America/Chicago";
+  const safeTimeZone = (0, import_react6.useMemo)(() => {
+    if (!timeZone) return void 0;
     try {
-      return dateHeadingFormatter.format(parsed);
+      new Intl.DateTimeFormat("en-US", { timeZone }).format(/* @__PURE__ */ new Date());
+      return timeZone;
     } catch {
-      return date;
+      return void 0;
     }
-  };
-  const formatTimeLabel = (iso) => {
-    const parsed = parseDateTime(iso, selectedDate);
-    if (!parsed) return iso;
+  }, [timeZone]);
+  const timeZoneLabel = (0, import_react6.useMemo)(() => {
+    if (timeZone) return timeZone;
     try {
-      return timeFormatter.format(parsed);
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
     } catch {
-      return parsed.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+      return "Local time";
     }
-  };
-  const formatDuration = (minutes) => {
+  }, [timeZone]);
+  const availabilityByDate = (0, import_react6.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    (availability.data?.dates || []).forEach((entry) => {
+      map.set(entry.date, entry);
+    });
+    return map;
+  }, [availability.data]);
+  const dateLabelFormatter = (0, import_react6.useMemo)(
+    () => new Intl.DateTimeFormat("en-US", { weekday: "short", month: "short", day: "numeric" }),
+    []
+  );
+  const dateHeadingFormatter = (0, import_react6.useMemo)(
+    () => new Intl.DateTimeFormat("en-US", { weekday: "long", month: "long", day: "numeric" }),
+    []
+  );
+  const timeFormatter = (0, import_react6.useMemo)(
+    () => new Intl.DateTimeFormat("en-US", { timeZone: safeTimeZone, hour: "numeric", minute: "2-digit" }),
+    [safeTimeZone]
+  );
+  const parseDateTime = (0, import_react6.useCallback)(
+    (value, fallbackDate) => {
+      if (!value) return null;
+      const direct = new Date(value);
+      if (!Number.isNaN(direct.getTime())) return direct;
+      if (fallbackDate) {
+        const normalized = fallbackDate.includes("T") ? fallbackDate.split("T")[0] : fallbackDate;
+        const combined = /* @__PURE__ */ new Date(`${normalized}T${value}`);
+        if (!Number.isNaN(combined.getTime())) return combined;
+      }
+      return null;
+    },
+    []
+  );
+  const formatDateLabel = (0, import_react6.useCallback)(
+    (date) => {
+      const parsed = parseDateOnly(date);
+      if (!parsed) return date;
+      try {
+        return dateLabelFormatter.format(parsed);
+      } catch {
+        return date;
+      }
+    },
+    [dateLabelFormatter]
+  );
+  const formatDateHeading = (0, import_react6.useCallback)(
+    (date) => {
+      const parsed = parseDateOnly(date);
+      if (!parsed) return date;
+      try {
+        return dateHeadingFormatter.format(parsed);
+      } catch {
+        return date;
+      }
+    },
+    [dateHeadingFormatter]
+  );
+  const formatTimeLabel = (0, import_react6.useCallback)(
+    (iso) => {
+      const parsed = parseDateTime(iso, selectedDate);
+      if (!parsed) return iso;
+      try {
+        return timeFormatter.format(parsed);
+      } catch {
+        return parsed.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+      }
+    },
+    [parseDateTime, selectedDate, timeFormatter]
+  );
+  const formatDuration = (0, import_react6.useCallback)((minutes) => {
     if (!Number.isFinite(minutes)) return "";
     if (minutes < 60) return `${minutes} min`;
     const hours = Math.floor(minutes / 60);
     const remaining = minutes % 60;
     return remaining === 0 ? `${hours} hr${hours > 1 ? "s" : ""}` : `${hours} hr ${remaining} min`;
-  };
-  const todayString = (0, import_react7.useMemo)(() => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), []);
-  const todayDate = (0, import_react7.useMemo)(() => {
+  }, []);
+  const todayString = (0, import_react6.useMemo)(() => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), []);
+  const todayDate = (0, import_react6.useMemo)(() => {
     const now = /* @__PURE__ */ new Date();
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const disabledWeekdaysSet = (0, import_react7.useMemo)(() => new Set(disabledWeekdays), [disabledWeekdays]);
-  const getMonthStart = (0, import_react7.useCallback)((date) => {
-    return new Date(date.getFullYear(), date.getMonth(), 1);
-  }, []);
-  const getMonthEnd = (0, import_react7.useCallback)((date) => {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
-  }, []);
-  const getMonthDays = (0, import_react7.useCallback)(
+  const disabledWeekdaysSet = (0, import_react6.useMemo)(() => new Set(disabledWeekdays), [disabledWeekdays]);
+  const getMonthStart = (0, import_react6.useCallback)((date) => new Date(date.getFullYear(), date.getMonth(), 1), []);
+  const getMonthEnd = (0, import_react6.useCallback)((date) => new Date(date.getFullYear(), date.getMonth() + 1, 0), []);
+  const getMonthDays = (0, import_react6.useCallback)(
     (date) => {
       const start = getMonthStart(date);
       const end = getMonthEnd(date);
@@ -936,20 +543,20 @@ function BookingWidget({
     },
     [getMonthEnd, getMonthStart]
   );
-  const maxAdvanceDate = (0, import_react7.useMemo)(() => {
+  const maxAdvanceDate = (0, import_react6.useMemo)(() => {
     if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return null;
     const maxMonth = new Date(todayDate.getFullYear(), todayDate.getMonth() + maxAdvanceMonths - 1, 1);
     return getMonthEnd(maxMonth);
   }, [getMonthEnd, maxAdvanceMonths, todayDate]);
-  const maxAdvanceMonthStart = (0, import_react7.useMemo)(() => {
+  const maxAdvanceMonthStart = (0, import_react6.useMemo)(() => {
     if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return null;
     return new Date(todayDate.getFullYear(), todayDate.getMonth() + maxAdvanceMonths - 1, 1);
   }, [maxAdvanceMonths, todayDate]);
-  const monthOptionCount = (0, import_react7.useMemo)(() => {
+  const monthOptionCount = (0, import_react6.useMemo)(() => {
     if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return 12;
     return maxAdvanceMonths;
   }, [maxAdvanceMonths]);
-  const monthOptions = (0, import_react7.useMemo)(() => {
+  const monthOptions = (0, import_react6.useMemo)(() => {
     return Array.from({ length: monthOptionCount }, (_, index) => {
       const date = new Date(todayDate.getFullYear(), todayDate.getMonth() + index, 1);
       return {
@@ -959,700 +566,1153 @@ function BookingWidget({
       };
     });
   }, [monthOptionCount, todayDate]);
-  const calendarDays = (0, import_react7.useMemo)(() => getMonthDays(calendarMonth), [getMonthDays, calendarMonth]);
-  const availabilityByDate = (0, import_react7.useMemo)(() => {
-    const map = /* @__PURE__ */ new Map();
-    (availability.data?.dates || []).forEach((entry) => {
-      map.set(entry.date, entry);
-    });
-    return map;
-  }, [availability.data]);
-  const hasBlockedInCalendarView = (0, import_react7.useMemo)(() => {
+  const calendarDays = (0, import_react6.useMemo)(() => getMonthDays(calendarMonth), [getMonthDays, calendarMonth]);
+  const hasBlockedInCalendarView = (0, import_react6.useMemo)(() => {
     return calendarDays.some((day) => {
       const entry = availabilityByDate.get(day.date);
       if (!entry) return false;
       return !entry.slots.some((slot) => slot.available);
     });
   }, [calendarDays, availabilityByDate]);
-  const handlePrevDates = () => {
+  const scrollToTop = (0, import_react6.useCallback)(() => {
+    if (!scrollToStepEnabled || !widgetRef?.current) return;
+    const top = widgetRef.current.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({ top: Math.max(0, top - scrollOffset), behavior: "smooth" });
+  }, [scrollToStepEnabled, scrollOffset, widgetRef]);
+  const resetSelections = (0, import_react6.useCallback)(() => {
+    setSelectedStaff(null);
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (step !== "time") return;
+    if (!availability.data?.dates?.length) return;
+    const matches = selectedDate ? availability.data.dates.some((entry) => entry.date === selectedDate) : false;
+    if (matches) return;
+    setSelectedDate(availability.data.dates[0].date);
+  }, [step, availability.data, selectedDate]);
+  (0, import_react6.useEffect)(() => {
+    if (!selectedService) return;
+    if (datePickerMode === "calendar") {
+      const now = /* @__PURE__ */ new Date();
+      setCalendarMonth(new Date(now.getFullYear(), now.getMonth(), 1));
+      return;
+    }
+    setAvailabilityStartDate((/* @__PURE__ */ new Date()).toISOString().slice(0, 10));
+    setAvailabilityDays(Math.max(1, availabilityDaysProp));
+  }, [selectedService?.id, selectedStaff?.id, availabilityDaysProp, datePickerMode]);
+  (0, import_react6.useEffect)(() => {
+    if (datePickerMode !== "calendar") return;
+    const start = getMonthStart(calendarMonth);
+    const end = getMonthEnd(calendarMonth);
+    setAvailabilityStartDate(start.toISOString().slice(0, 10));
+    setAvailabilityDays(end.getDate());
+  }, [calendarMonth, datePickerMode, getMonthEnd, getMonthStart]);
+  const selectService = (0, import_react6.useCallback)(
+    (service) => {
+      setSelectedService(service);
+      resetSelections();
+      if (autoAdvanceOnSelect) {
+        if (requiresStaff) setStep("staff");
+        else setStep("time");
+        scrollToTop();
+      }
+    },
+    [autoAdvanceOnSelect, requiresStaff, resetSelections, scrollToTop]
+  );
+  const selectStaff = (0, import_react6.useCallback)(
+    (staff) => {
+      setSelectedStaff(staff);
+      setSelectedDate(null);
+      setSelectedTime(null);
+      setSelectedEndTime(null);
+      setBookingError(null);
+      if (autoAdvanceOnSelect) {
+        setStep("time");
+        scrollToTop();
+      }
+    },
+    [autoAdvanceOnSelect, scrollToTop]
+  );
+  const selectDate = (0, import_react6.useCallback)((date) => {
+    setSelectedDate(date);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  }, []);
+  const selectTime = (0, import_react6.useCallback)(
+    (time, endTime) => {
+      setSelectedTime(time);
+      setSelectedEndTime(endTime);
+      setBookingError(null);
+      if (autoAdvanceOnSelect) {
+        setStep("details");
+        scrollToTop();
+      }
+    },
+    [autoAdvanceOnSelect, scrollToTop]
+  );
+  const continueFromService = (0, import_react6.useCallback)(() => {
+    if (!selectedService) return;
+    if (requiresStaff) setStep("staff");
+    else setStep("time");
+    scrollToTop();
+  }, [selectedService, requiresStaff, scrollToTop]);
+  const continueFromStaff = (0, import_react6.useCallback)(() => {
+    if (!canSkipStaff && !selectedStaff) return;
+    setStep("time");
+    scrollToTop();
+  }, [canSkipStaff, selectedStaff, scrollToTop]);
+  const continueFromTime = (0, import_react6.useCallback)(() => {
+    if (!selectedTime || !selectedEndTime) return;
+    setStep("details");
+    scrollToTop();
+  }, [selectedTime, selectedEndTime, scrollToTop]);
+  const goBack = (0, import_react6.useCallback)(() => {
+    if (step === "service") return;
+    if (step === "staff") setStep("service");
+    else if (step === "time") setStep(requiresStaff ? "staff" : "service");
+    else if (step === "details") setStep("time");
+    else if (step === "done") setStep("details");
+    setBookingError(null);
+    scrollToTop();
+  }, [step, requiresStaff, scrollToTop]);
+  const goToServiceStep = (0, import_react6.useCallback)(() => {
+    setStep("service");
+    scrollToTop();
+  }, [scrollToTop]);
+  const reset = (0, import_react6.useCallback)(() => {
+    setStep("service");
+    setSelectedService(null);
+    resetSelections();
+    setDetails({ name: "", email: "", phone: "", notes: "" });
+    scrollToTop();
+  }, [resetSelections, scrollToTop]);
+  const submitBooking = (0, import_react6.useCallback)(
+    async (event) => {
+      event?.preventDefault();
+      if (!selectedService || !selectedDate || !selectedTime || !selectedEndTime) return;
+      const start = parseDateTime(selectedTime, selectedDate);
+      const end = parseDateTime(selectedEndTime, selectedDate);
+      if (!start || !end) {
+        setBookingError("Please select a valid time slot.");
+        return;
+      }
+      try {
+        setBookingError(null);
+        const result = await createBooking.mutateAsync({
+          serviceId: selectedService.id,
+          staffId: selectedStaff?.id,
+          startTime: start.toISOString(),
+          endTime: end.toISOString(),
+          customerName: details.name,
+          customerEmail: details.email,
+          customerPhone: details.phone || void 0,
+          customerNotes: details.notes || void 0
+        });
+        setStep("done");
+        onSuccess?.(result?.booking);
+        scrollToTop();
+      } catch (error) {
+        setBookingError(
+          error instanceof Error ? error.message : "Unable to complete booking. Please try again."
+        );
+      }
+    },
+    [selectedService, selectedDate, selectedTime, selectedEndTime, selectedStaff, details, createBooking, onSuccess, scrollToTop, parseDateTime]
+  );
+  const handlePrevDates = (0, import_react6.useCallback)(() => {
     if (availabilityStartDate <= todayString) return;
     setAvailabilityStartDate((prev) => addDays(prev, -availabilityDays));
     setSelectedDate(null);
     setSelectedTime(null);
     setSelectedEndTime(null);
     setBookingError(null);
-  };
-  const handleNextDates = () => {
+  }, [availabilityStartDate, availabilityDays, todayString]);
+  const handleNextDates = (0, import_react6.useCallback)(() => {
     if (maxAdvanceDate) {
       const nextStart = parseDateOnly(addDays(availabilityStartDate, availabilityDays));
-      if (nextStart && nextStart > maxAdvanceDate) {
-        return;
-      }
+      if (nextStart && nextStart > maxAdvanceDate) return;
+    }
+    setAvailabilityStartDate((prev) => addDays(prev, availabilityDays));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  }, [availabilityStartDate, availabilityDays, maxAdvanceDate]);
+  const handlePrevMonth = (0, import_react6.useCallback)(() => {
+    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  }, []);
+  const handleNextMonth = (0, import_react6.useCallback)(() => {
+    if (maxAdvanceMonthStart) {
+      const nextMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 1);
+      if (nextMonth > maxAdvanceMonthStart) return;
+    }
+    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  }, [calendarMonth, maxAdvanceMonthStart]);
+  const handleMonthSelect = (0, import_react6.useCallback)((value) => {
+    const [year, month] = value.split("-").map(Number);
+    if (!year || !month) return;
+    setCalendarMonth(new Date(year, month - 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  }, []);
+  const loadMoreServices = (0, import_react6.useCallback)(() => setServicePage((p) => p + 1), []);
+  const loadMoreStaff = (0, import_react6.useCallback)(() => setStaffPage((p) => hasMoreStaff ? p + 1 : 1), [hasMoreStaff]);
+  return {
+    step,
+    stepNumber,
+    totalSteps,
+    selectedService,
+    selectedStaff,
+    selectedDate,
+    selectedTime,
+    selectedEndTime,
+    details,
+    servicesList,
+    filteredServices,
+    pagedServices,
+    hasMoreServices,
+    categories,
+    staffOptions,
+    pagedStaff,
+    hasMoreStaff,
+    availabilityDates: availability.data?.dates || [],
+    availabilityByDate,
+    timeZone,
+    timeZoneLabel,
+    calendarMonth,
+    calendarDays,
+    hasBlockedInCalendarView,
+    maxAdvanceDate,
+    maxAdvanceMonthStart,
+    monthOptions,
+    isServicesLoading: servicesProp ? false : servicesLoading,
+    isAvailabilityLoading: availability.isLoading,
+    isSubmitting: createBooking.isPending,
+    bookingError,
+    requiresStaff,
+    canSkipStaff,
+    serviceSearch,
+    categoryFilter,
+    servicePage,
+    staffPage,
+    availabilityStartDate,
+    formatDateLabel,
+    formatDateHeading,
+    formatTimeLabel,
+    formatDuration,
+    setServiceSearch,
+    setCategoryFilter,
+    loadMoreServices,
+    loadMoreStaff,
+    selectService,
+    selectStaff,
+    selectDate,
+    selectTime,
+    setDetails,
+    goToServiceStep,
+    continueFromService,
+    continueFromStaff,
+    continueFromTime,
+    submitBooking,
+    goBack,
+    reset,
+    scrollToTop,
+    handlePrevDates,
+    handleNextDates,
+    handlePrevMonth,
+    handleNextMonth,
+    handleMonthSelect
+  };
+}
+
+// src/components/ServiceCard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ServiceCard({
+  service,
+  className,
+  showDescription = true,
+  showPrice = true,
+  showImage = false,
+  onSelect
+}) {
+  const handleClick = () => {
+    if (onSelect) onSelect(service);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: ["idk-card", onSelect ? "idk-card--clickable" : "", className].filter(Boolean).join(" "),
+      onClick: onSelect ? handleClick : void 0,
+      role: onSelect ? "button" : void 0,
+      tabIndex: onSelect ? 0 : void 0,
+      children: [
+        showImage && service.image?.url ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "idk-card__media", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: service.image.url, alt: service.name }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "idk-card__title", children: service.name }),
+          showPrice && typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "idk-card__price", children: [
+            "$",
+            (service.price / 100).toFixed(2)
+          ] }) : null
+        ] }),
+        showDescription && service.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "idk-card__description", children: service.description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "idk-card__meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+            service.duration,
+            " min"
+          ] }),
+          service.category ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: service.category }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ServicesList.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ServicesList({
+  layout = "grid",
+  columns = 3,
+  className,
+  showDescription,
+  showPrice,
+  showImage,
+  query,
+  filter,
+  sort,
+  limit,
+  emptyMessage = "No services available.",
+  loadingMessage = "Loading services...",
+  onSelect
+}) {
+  const { data, isLoading, error } = useServices(query);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: loadingMessage });
+  }
+  let services = data?.services ? [...data.services] : [];
+  if (filter) {
+    services = services.filter(filter);
+  }
+  if (sort) {
+    services = services.sort(sort);
+  }
+  if (typeof limit === "number") {
+    services = services.slice(0, Math.max(0, limit));
+  }
+  if (error || services.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "idk-state", children: emptyMessage });
+  }
+  const gridStyle = layout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: [
+        "idk-services",
+        layout === "grid" ? "idk-services--grid" : "idk-services--list",
+        className
+      ].filter(Boolean).join(" "),
+      style: gridStyle,
+      children: services.map((service) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ServiceCard,
+        {
+          service,
+          showDescription,
+          showPrice,
+          showImage,
+          onSelect
+        },
+        service.id
+      ))
+    }
+  );
+}
+
+// src/lib/linkify.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var LINK_REGEX = /((https?:\/\/|www\.)[^\s]+|[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}|(?:[a-z0-9-]+\.)+[a-z]{2,}(?:\/[^\s]*)?)/gi;
+function buildHref(raw) {
+  if (raw.includes("@") && !raw.startsWith("http")) {
+    return `mailto:${raw}`;
+  }
+  if (raw.startsWith("http://") || raw.startsWith("https://")) {
+    return raw;
+  }
+  if (raw.startsWith("www.")) {
+    return `https://${raw}`;
+  }
+  return `https://${raw}`;
+}
+function trimTrailingPunctuation(value) {
+  let text = value;
+  let trailing = "";
+  while (text && /[),.!?:;]+$/.test(text)) {
+    trailing = text.slice(-1) + trailing;
+    text = text.slice(0, -1);
+  }
+  return { text, trailing };
+}
+function renderLinkedText(text) {
+  if (!text) return null;
+  const matches = Array.from(text.matchAll(LINK_REGEX));
+  if (matches.length === 0) return text;
+  const nodes = [];
+  let lastIndex = 0;
+  matches.forEach((match, index) => {
+    const matchText = match[0];
+    const start = match.index ?? 0;
+    if (start > lastIndex) {
+      nodes.push(text.slice(lastIndex, start));
     }
-    setAvailabilityStartDate((prev) => addDays(prev, availabilityDays));
-    setSelectedDate(null);
-    setSelectedTime(null);
-    setSelectedEndTime(null);
-    setBookingError(null);
-  };
-  const handlePrevMonth = () => {
-    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
-    setSelectedDate(null);
-    setSelectedTime(null);
-    setSelectedEndTime(null);
-    setBookingError(null);
-  };
-  const handleNextMonth = () => {
-    if (maxAdvanceMonthStart) {
-      const nextMonth = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 1);
-      if (nextMonth > maxAdvanceMonthStart) return;
+    const { text: cleanText, trailing } = trimTrailingPunctuation(matchText);
+    if (cleanText) {
+      const href = buildHref(cleanText);
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", children: cleanText }, `link-${start}-${index}`)
+      );
     }
-    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
-    setSelectedDate(null);
-    setSelectedTime(null);
-    setSelectedEndTime(null);
-    setBookingError(null);
-  };
-  const handleMonthSelect = (value) => {
-    const [year, month] = value.split("-").map(Number);
-    if (!year || !month) return;
-    setCalendarMonth(new Date(year, month - 1, 1));
-    setSelectedDate(null);
-    setSelectedTime(null);
-    setSelectedEndTime(null);
-    setBookingError(null);
-  };
-  (0, import_react7.useEffect)(() => {
-    if (step !== "time") return;
-    if (!availability.data?.dates?.length) return;
-    const matches = selectedDate ? availability.data.dates.some((entry) => entry.date === selectedDate) : false;
-    if (matches) return;
-    setSelectedDate(availability.data.dates[0].date);
-  }, [step, availability.data, selectedDate]);
-  (0, import_react7.useEffect)(() => {
-    if (!selectedService) return;
-    if (datePickerMode === "calendar") {
-      const now = /* @__PURE__ */ new Date();
-      setCalendarMonth(new Date(now.getFullYear(), now.getMonth(), 1));
-      return;
+    if (trailing) {
+      nodes.push(trailing);
     }
-    setAvailabilityStartDate((/* @__PURE__ */ new Date()).toISOString().slice(0, 10));
-    setAvailabilityDays(Math.max(1, availabilityDaysProp));
-  }, [selectedService?.id, selectedStaff?.id, availabilityDaysProp, datePickerMode]);
-  (0, import_react7.useEffect)(() => {
-    if (datePickerMode !== "calendar") return;
-    const start = getMonthStart(calendarMonth);
-    const end = getMonthEnd(calendarMonth);
-    const startString = start.toISOString().slice(0, 10);
-    const daysInMonth = end.getDate();
-    setAvailabilityStartDate(startString);
-    setAvailabilityDays(daysInMonth);
-  }, [calendarMonth, datePickerMode, getMonthEnd, getMonthStart]);
-  const handleBack = () => {
-    if (step === "service") return;
-    if (step === "staff") {
-      setStep("service");
-    } else if (step === "time") {
-      if (requiresStaff) {
-        setStep("staff");
-      } else {
-        setStep("service");
-      }
-    } else if (step === "details") {
-      setStep("time");
-    } else if (step === "done") {
-      setStep("details");
+    lastIndex = start + matchText.length;
+  });
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes;
+}
+
+// src/components/TeamMember.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TeamMember({
+  member,
+  className,
+  showRole = true,
+  showEmail = false,
+  showBio = false,
+  layout = "card",
+  imagePosition = "left"
+}) {
+  const initials = member.name?.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
+  const avatar = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: initials }) });
+  if (layout === "profile") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: ["idk-team__profile", className].filter(Boolean).join(" "), children: [
+      imagePosition === "left" ? avatar : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "idk-team__info", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "idk-card__title", children: member.name }),
+        showRole ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+        showBio && member.bio ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
+        showEmail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
+      ] }),
+      imagePosition === "right" ? avatar : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: initials }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "idk-team__info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "idk-card__title", children: member.name }),
+      showRole ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+      showBio && member.bio ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
+      showEmail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "idk-card__meta", children: member.email }) : null
+    ] })
+  ] });
+}
+
+// src/components/TeamGrid.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function TeamGrid({
+  columns = 3,
+  className,
+  showRole,
+  showEmail,
+  showBio,
+  layout = "card",
+  imagePosition = "left",
+  query,
+  filter,
+  sort,
+  limit,
+  emptyMessage = "No team members available.",
+  loadingMessage = "Loading team..."
+}) {
+  const { data, isLoading, error } = useTeam(query);
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "idk-state", children: loadingMessage });
+  }
+  let members = data?.team ? [...data.team] : [];
+  if (filter) {
+    members = members.filter(filter);
+  }
+  if (sort) {
+    members = members.sort(sort);
+  }
+  if (typeof limit === "number") {
+    members = members.slice(0, Math.max(0, limit));
+  }
+  if (error || members.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "idk-state", children: emptyMessage });
+  }
+  const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      className: ["idk-team", className].filter(Boolean).join(" "),
+      style: gridStyle,
+      children: members.map((member) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        TeamMember,
+        {
+          member,
+          showRole,
+          showEmail,
+          showBio,
+          layout,
+          imagePosition
+        },
+        member.id
+      ))
     }
-    setBookingError(null);
-    scrollToTop();
-  };
-  const handleServiceContinue = () => {
-    if (!selectedService) return;
-    if (requiresStaff) {
-      setStep("staff");
-    } else {
-      setStep("time");
+  );
+}
+
+// src/components/ContactForm.tsx
+var import_react7 = require("react");
+var import_react_query7 = require("@tanstack/react-query");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DEFAULT_FIELDS = ["name", "email", "phone", "message"];
+function ContactForm({
+  fields = DEFAULT_FIELDS,
+  formType = "contact",
+  submitLabel = "Send Message",
+  className,
+  onSuccess,
+  onError
+}) {
+  const config = usePlatformConfig();
+  const [formState, setFormState] = (0, import_react7.useState)({
+    name: "",
+    email: "",
+    phone: "",
+    subject: "",
+    message: ""
+  });
+  const mutation = (0, import_react_query7.useMutation)({
+    mutationFn: (payload) => apiRequest(config, "/contact", {
+      method: "POST",
+      body: JSON.stringify(payload)
+    }),
+    onSuccess: () => {
+      setFormState({ name: "", email: "", phone: "", subject: "", message: "" });
+      onSuccess?.();
+    },
+    onError: (error) => {
+      const message = error instanceof Error ? error.message : "Failed to submit form";
+      onError?.(message);
     }
-    scrollToTop();
-  };
-  const handleStaffContinue = () => {
-    if (!canSkipStaff && !selectedStaff) return;
-    setStep("time");
-    scrollToTop();
-  };
-  const handleTimeContinue = () => {
-    if (!selectedTime || !selectedEndTime) return;
-    setStep("details");
-    scrollToTop();
+  });
+  const handleChange = (field, value) => {
+    setFormState((prev) => ({ ...prev, [field]: value }));
   };
-  const handleSubmit = async (event) => {
+  const handleSubmit = (event) => {
     event.preventDefault();
-    if (!selectedService || !selectedDate || !selectedTime || !selectedEndTime) return;
-    const start = parseDateTime(selectedTime, selectedDate);
-    const end = parseDateTime(selectedEndTime, selectedDate);
-    if (!start || !end) {
-      setBookingError("Please select a valid time slot.");
-      return;
-    }
-    try {
-      setBookingError(null);
-      const result = await createBooking.mutateAsync({
-        serviceId: selectedService.id,
-        staffId: selectedStaff?.id,
-        startTime: start.toISOString(),
-        endTime: end.toISOString(),
-        customerName: details.name,
-        customerEmail: details.email,
-        customerPhone: details.phone || void 0,
-        customerNotes: details.notes || void 0
-      });
-      setStep("done");
-      onSuccess?.(result?.booking);
-      scrollToTop();
-    } catch (error) {
-      setBookingError(
-        error instanceof Error ? error.message : "Unable to complete booking. Please try again."
-      );
-    }
+    mutation.mutate({
+      name: formState.name,
+      email: formState.email,
+      phone: formState.phone || void 0,
+      subject: formState.subject || void 0,
+      message: formState.message,
+      formType
+    });
   };
-  const isServicesLoading = services ? false : servicesLoading;
-  if (isServicesLoading) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
+    fields.includes("name") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          value: formState.name,
+          onChange: (event) => handleChange("name", event.target.value),
+          required: true
+        }
+      )
+    ] }),
+    fields.includes("email") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          type: "email",
+          value: formState.email,
+          onChange: (event) => handleChange("email", event.target.value),
+          required: true
+        }
+      )
+    ] }),
+    fields.includes("phone") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Phone" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          value: formState.phone,
+          onChange: (event) => handleChange("phone", event.target.value)
+        }
+      )
+    ] }),
+    fields.includes("subject") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Subject" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          value: formState.subject,
+          onChange: (event) => handleChange("subject", event.target.value)
+        }
+      )
+    ] }),
+    fields.includes("message") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "idk-form__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "textarea",
+        {
+          value: formState.message,
+          onChange: (event) => handleChange("message", event.target.value),
+          rows: 5,
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
+    mutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
+    mutation.isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
+  ] });
+}
+
+// src/components/BookingWidget.tsx
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var parseDateOnly2 = (value) => {
+  if (!value) return null;
+  const normalized = value.includes("T") ? value.split("T")[0] : value;
+  const parsed = /* @__PURE__ */ new Date(`${normalized}T00:00:00`);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+function BookingWidget({
+  className,
+  title = "Book an Appointment",
+  subtitle,
+  serviceSearchPlaceholder = "Search services",
+  categoryLabel = "All categories",
+  serviceListMaxHeight,
+  serviceLayout = "list",
+  serviceColumns = 2,
+  showServicePagination,
+  staffLayout = "grid",
+  staffColumns = 2,
+  showStaffPagination,
+  timeLayout = "split",
+  showFullyBookedLabel = true,
+  calendarVariant = "default",
+  enableServiceSearch = true,
+  enableCategoryFilter = false,
+  enableDatePaging = true,
+  disabledWeekdays = [],
+  ...hookProps
+}) {
+  const widgetRef = (0, import_react8.useRef)(null);
+  const bw = useBookingWidget({
+    ...hookProps,
+    enableServiceSearch,
+    enableCategoryFilter,
+    enableDatePaging,
+    calendarVariant,
+    disabledWeekdays,
+    showFullyBookedLabel,
+    widgetRef
+  });
+  const todayDate = (() => {
+    const now = /* @__PURE__ */ new Date();
+    now.setHours(0, 0, 0, 0);
+    return now;
+  })();
+  const disabledWeekdaysSet = new Set(disabledWeekdays);
+  const shouldPaginate = showServicePagination ?? bw.hasMoreServices;
+  const shouldPaginateStaff = showStaffPagination ?? bw.hasMoreStaff;
+  if (bw.isServicesLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading booking options..." });
   }
-  if (!servicesList.length) {
+  if (!bw.servicesList.length) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No services available." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
-    {
-      ref: widgetRef,
-      className: ["idk-booking", className].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__title-wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "idk-booking__title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-booking__subtitle", children: subtitle }) : null
-          ] }),
-          step !== "service" && step !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-link", onClick: handleBack, children: "Back" }) : null
-        ] }),
-        step !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__progress", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-            "Step ",
-            stepNumber,
-            " of ",
-            totalSteps
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__bar", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              className: "idk-booking__bar-fill",
-              style: { width: `${stepNumber / totalSteps * 100}%` }
-            }
-          ) })
-        ] }) : null,
-        step === "service" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a service" }),
-          enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__filters", children: [
-            enableServiceSearch ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
-              {
-                type: "search",
-                value: serviceSearch,
-                onChange: (event) => setServiceSearch(event.target.value),
-                placeholder: serviceSearchPlaceholder
-              }
-            ) : null,
-            enableCategoryFilter && categories.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "select",
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: widgetRef, className: ["idk-booking", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__title-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "idk-booking__title", children: title }),
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-booking__subtitle", children: subtitle }) : null
+      ] }),
+      bw.step !== "service" && bw.step !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-link", onClick: bw.goBack, children: "Back" }) : null
+    ] }),
+    bw.step !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__progress", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+        "Step ",
+        bw.stepNumber,
+        " of ",
+        bw.totalSteps
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__bar", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: "idk-booking__bar-fill",
+          style: { width: `${bw.stepNumber / bw.totalSteps * 100}%` }
+        }
+      ) })
+    ] }) : null,
+    bw.step === "service" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a service" }),
+      enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__filters", children: [
+        enableServiceSearch ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "input",
+          {
+            type: "search",
+            value: bw.serviceSearch,
+            onChange: (event) => bw.setServiceSearch(event.target.value),
+            placeholder: serviceSearchPlaceholder
+          }
+        ) : null,
+        enableCategoryFilter && bw.categories.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "select",
+          {
+            value: bw.categoryFilter,
+            onChange: (event) => bw.setCategoryFilter(event.target.value),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "all", children: categoryLabel }),
+              bw.categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: category, children: category }, category))
+            ]
+          }
+        ) : null
+      ] }) : null,
+      bw.filteredServices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: [
+            "idk-services",
+            serviceLayout === "grid" ? "idk-services--grid" : "idk-services--list"
+          ].join(" "),
+          style: {
+            ...serviceLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, serviceColumns)}, minmax(0, 1fr))` } : void 0,
+            ...serviceListMaxHeight ? { maxHeight: serviceListMaxHeight, overflow: "auto" } : void 0
+          },
+          children: bw.pagedServices.map((service) => {
+            const isSelected = bw.selectedService?.id === service.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "button",
               {
-                value: categoryFilter,
-                onChange: (event) => setCategoryFilter(event.target.value),
+                type: "button",
+                className: ["idk-card", "idk-card--clickable", isSelected ? "is-active" : ""].join(" "),
+                onClick: () => bw.selectService(service),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "all", children: categoryLabel }),
-                  categories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: category, children: category }, category))
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: service.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "idk-card__aside", children: [
+                      isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__check", children: "\u2713" }) : null,
+                      typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "idk-card__price", children: [
+                        "$",
+                        (service.price / 100).toFixed(2)
+                      ] }) : null
+                    ] })
+                  ] }),
+                  service.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-card__description", children: service.description }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__meta", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: bw.formatDuration(service.duration) }),
+                    service.category ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-pill", children: service.category }) : null
+                  ] })
                 ]
-              }
-            ) : null
-          ] }) : null,
-          filteredServices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "div",
-            {
-              className: [
-                "idk-services",
-                serviceLayout === "grid" ? "idk-services--grid" : "idk-services--list"
-              ].join(" "),
-              style: {
-                ...serviceLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, serviceColumns)}, minmax(0, 1fr))` } : void 0,
-                ...serviceListMaxHeight ? { maxHeight: serviceListMaxHeight, overflow: "auto" } : void 0
               },
-              children: pagedServices.map((service) => {
-                const isSelected = selectedService?.id === service.id;
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    className: ["idk-card", "idk-card--clickable", isSelected ? "is-active" : ""].join(" "),
-                    onClick: () => {
-                      setSelectedService(service);
-                      resetSelections();
-                      if (autoAdvanceOnSelect) {
-                        if (requiresStaff) {
-                          setStep("staff");
-                        } else {
-                          setStep("time");
-                        }
-                        scrollToTop();
-                      }
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__header", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: service.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "idk-card__aside", children: [
-                          isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__check", children: "\u2713" }) : null,
-                          typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "idk-card__price", children: [
-                            "$",
-                            (service.price / 100).toFixed(2)
-                          ] }) : null
-                        ] })
-                      ] }),
-                      service.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-card__description", children: service.description }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__meta", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: formatDuration(service.duration) }),
-                        service.category ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-pill", children: service.category }) : null
-                      ] })
-                    ]
-                  },
-                  service.id
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__actions", children: [
-            shouldPaginate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              service.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__actions", children: [
+        shouldPaginate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "idk-button idk-button--ghost",
+            onClick: bw.loadMoreServices,
+            disabled: !bw.hasMoreServices,
+            children: bw.hasMoreServices ? "Show more services" : "All services shown"
+          }
+        ) : null,
+        bw.selectedService && !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-button", onClick: bw.continueFromService, children: "Continue" }) : null
+      ] })
+    ] }),
+    bw.step === "staff" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a team member" }),
+      bw.staffOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "div",
+        {
+          className: [
+            "idk-team",
+            staffLayout === "grid" ? "idk-team--grid" : "idk-team--list"
+          ].join(" "),
+          style: staffLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, staffColumns)}, minmax(0, 1fr))` } : void 0,
+          children: [
+            (hookProps.showAnyStaffOption ?? true) && bw.canSkipStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "button",
               {
                 type: "button",
-                className: "idk-button idk-button--ghost",
-                onClick: () => setServicePage((prev) => prev + 1),
-                disabled: !hasMoreServices,
-                children: hasMoreServices ? "Show more services" : "All services shown"
-              }
+                className: ["idk-card", "idk-card--clickable", !bw.selectedStaff ? "is-active" : ""].join(" "),
+                onClick: () => bw.selectStaff(null),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__header", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: "Any Available" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__badge", children: "Recommended" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
+                ]
+              },
+              "any-staff"
             ) : null,
-            selectedService && !autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-button", onClick: handleServiceContinue, children: "Continue" }) : null
-          ] })
-        ] }),
-        step === "staff" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a team member" }),
-          staffOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-            "div",
-            {
-              className: [
-                "idk-team",
-                staffLayout === "grid" ? "idk-team--grid" : "idk-team--list"
-              ].join(" "),
-              style: staffLayout === "grid" ? { gridTemplateColumns: `repeat(${Math.max(1, staffColumns)}, minmax(0, 1fr))` } : void 0,
-              children: [
-                showAnyStaffOption && canSkipStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            bw.pagedStaff.map((staff) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                className: ["idk-card", "idk-card--clickable", bw.selectedStaff?.id === staff.id ? "is-active" : ""].join(" "),
+                onClick: () => bw.selectStaff(staff),
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-team__card", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: staff.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
+                    staff.bio ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-card__description", children: renderLinkedText(staff.bio) }) : null
+                  ] })
+                ] })
+              },
+              staff.id
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__actions", children: [
+        shouldPaginateStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "idk-button idk-button--ghost",
+            onClick: bw.loadMoreStaff,
+            disabled: !bw.hasMoreStaff && bw.staffPage === 1,
+            children: bw.hasMoreStaff ? "Show more staff" : bw.staffPage > 1 ? "Show fewer staff" : "All staff shown"
+          }
+        ) : null,
+        bw.canSkipStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "idk-link",
+            onClick: () => {
+              bw.selectStaff(null);
+              bw.continueFromStaff();
+            },
+            children: "Continue without selecting"
+          }
+        ) : null,
+        !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "idk-button",
+            onClick: bw.continueFromStaff,
+            disabled: !bw.canSkipStaff && !bw.selectedStaff,
+            children: "Continue"
+          }
+        ) : null
+      ] })
+    ] }),
+    bw.step === "time" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a time" }),
+      bw.isAvailabilityLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading availability..." }) : bw.availabilityDates.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__dates", children: (hookProps.datePickerMode ?? "list") === "calendar" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: [
+              "idk-calendar",
+              calendarVariant === "compact" ? "idk-calendar--compact" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__header", children: calendarVariant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__header idk-calendar__header--compact", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
-                    className: ["idk-card", "idk-card--clickable", !selectedStaff ? "is-active" : ""].join(" "),
-                    onClick: () => {
-                      setSelectedStaff(null);
-                      setSelectedDate(null);
-                      setSelectedTime(null);
-                      setSelectedEndTime(null);
-                      if (autoAdvanceOnSelect) {
-                        setStep("time");
-                        scrollToTop();
-                      }
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-card__header", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: "Any Available" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__badge", children: "Recommended" })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
-                    ]
-                  },
-                  "any-staff"
-                ) : null,
-                pagedStaff.map((staff) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    className: "idk-calendar__nav-btn",
+                    onClick: bw.handlePrevMonth,
+                    disabled: bw.calendarMonth <= new Date(todayDate.getFullYear(), todayDate.getMonth(), 1),
+                    "aria-label": "Previous month",
+                    children: "<"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "select",
+                  {
+                    className: "idk-calendar__month-select",
+                    value: `${bw.calendarMonth.getFullYear()}-${String(bw.calendarMonth.getMonth() + 1).padStart(2, "0")}`,
+                    onChange: (event) => bw.handleMonthSelect(event.target.value),
+                    children: bw.monthOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: option.value, children: option.label }, option.value))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
-                    className: ["idk-card", "idk-card--clickable", selectedStaff?.id === staff.id ? "is-active" : ""].join(" "),
-                    onClick: () => {
-                      setSelectedStaff(staff);
-                      setSelectedDate(null);
-                      setSelectedTime(null);
-                      setSelectedEndTime(null);
-                      setBookingError(null);
-                      if (autoAdvanceOnSelect) {
-                        setStep("time");
-                        scrollToTop();
-                      }
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-team__card", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__title", children: staff.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
-                        staff.bio ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-card__description", children: renderLinkedText(staff.bio) }) : null
-                      ] })
-                    ] })
-                  },
-                  staff.id
-                ))
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__actions", children: [
-            shouldPaginateStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "idk-button idk-button--ghost",
-                onClick: () => setStaffPage((prev) => hasMoreStaff ? prev + 1 : 1),
-                disabled: !hasMoreStaff && staffPage === 1,
-                children: hasMoreStaff ? "Show more staff" : staffPage > 1 ? "Show fewer staff" : "All staff shown"
-              }
-            ) : null,
-            canSkipStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "idk-link",
-                onClick: () => {
-                  setSelectedStaff(null);
-                  setStep("time");
-                  scrollToTop();
-                },
-                children: "Continue without selecting"
-              }
-            ) : null,
-            !autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "idk-button",
-                onClick: handleStaffContinue,
-                disabled: !canSkipStaff && !selectedStaff,
-                children: "Continue"
-              }
-            ) : null
-          ] })
-        ] }),
-        step === "time" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__step", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Select a time" }),
-          availability.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__dates", children: datePickerMode === "calendar" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-              "div",
-              {
-                className: [
-                  "idk-calendar",
-                  calendarVariant === "compact" ? "idk-calendar--compact" : ""
-                ].filter(Boolean).join(" "),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__header", children: calendarVariant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__header idk-calendar__header--compact", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "idk-calendar__nav-btn",
-                        onClick: handlePrevMonth,
-                        disabled: calendarMonth <= getMonthStart(todayDate),
-                        "aria-label": "Previous month",
-                        children: "<"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "select",
-                      {
-                        className: "idk-calendar__month-select",
-                        value: `${calendarMonth.getFullYear()}-${String(calendarMonth.getMonth() + 1).padStart(2, "0")}`,
-                        onChange: (event) => handleMonthSelect(event.target.value),
-                        children: monthOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: option.value, children: option.label }, option.value))
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "idk-calendar__nav-btn",
-                        onClick: handleNextMonth,
-                        disabled: Boolean(maxAdvanceMonthStart && calendarMonth >= maxAdvanceMonthStart),
-                        "aria-label": "Next month",
-                        children: ">"
-                      }
-                    )
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "idk-button idk-button--ghost",
-                        onClick: handlePrevMonth,
-                        disabled: calendarMonth <= getMonthStart(todayDate),
-                        children: "Prev"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", {
-                      month: "long",
-                      year: "numeric"
-                    }).format(calendarMonth) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        className: "idk-button idk-button--ghost",
-                        onClick: handleNextMonth,
-                        disabled: Boolean(maxAdvanceMonthStart && calendarMonth >= maxAdvanceMonthStart),
-                        children: "Next"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }, label)) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__grid", children: calendarDays.map((day) => {
-                    const entry = availabilityByDate.get(day.date);
-                    const hasAvailable = entry?.slots?.some((slot) => slot.available) ?? false;
-                    const dateValue = parseDateOnly(day.date);
-                    const isPast = dateValue ? dateValue < todayDate : false;
-                    const isBeyondMax = maxAdvanceDate ? dateValue ? dateValue > maxAdvanceDate : false : false;
-                    const weekday = dateValue ? dateValue.getDay() : null;
-                    const isDisabledWeekday = weekday !== null ? disabledWeekdaysSet.has(weekday) : false;
-                    const isBlocked = Boolean(entry) && !hasAvailable;
-                    const isDisabled = !entry || isPast || isBeyondMax || isBlocked || isDisabledWeekday;
-                    const isActive = selectedDate === day.date;
-                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                      "button",
-                      {
-                        type: "button",
-                        className: [
-                          "idk-calendar__day",
-                          day.isCurrentMonth ? "" : "is-muted",
-                          hasAvailable ? "is-available" : "",
-                          isBlocked ? "is-blocked" : "",
-                          isDisabledWeekday ? "is-disabled" : "",
-                          isActive ? "is-active" : ""
-                        ].filter(Boolean).join(" "),
-                        disabled: isDisabled,
-                        onClick: () => {
-                          setSelectedDate(day.date);
-                          setSelectedTime(null);
-                          setSelectedEndTime(null);
-                          setBookingError(null);
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: day.date.split("-")[2] }),
-                          showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "\u2022" : "Fully booked" }) : null
-                        ]
-                      },
-                      day.date
-                    );
-                  }) }),
-                  showFullyBookedLabel && calendarVariant === "compact" && hasBlockedInCalendarView ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__legend", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__legend-dot", children: "\u2022" }),
-                    " Fully booked"
-                  ] }) : null
-                ]
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-              enableDatePaging ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-availability__nav", children: [
+                    className: "idk-calendar__nav-btn",
+                    onClick: bw.handleNextMonth,
+                    disabled: Boolean(bw.maxAdvanceMonthStart && bw.calendarMonth >= bw.maxAdvanceMonthStart),
+                    "aria-label": "Next month",
+                    children: ">"
+                  }
+                )
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
                     className: "idk-button idk-button--ghost",
-                    onClick: handlePrevDates,
-                    disabled: availabilityStartDate <= todayString,
-                    children: "Previous"
+                    onClick: bw.handlePrevMonth,
+                    disabled: bw.calendarMonth <= new Date(todayDate.getFullYear(), todayDate.getMonth(), 1),
+                    children: "Prev"
                   }
                 ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(bw.calendarMonth) }),
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
                     className: "idk-button idk-button--ghost",
-                    onClick: handleNextDates,
+                    onClick: bw.handleNextMonth,
+                    disabled: Boolean(bw.maxAdvanceMonthStart && bw.calendarMonth >= bw.maxAdvanceMonthStart),
                     children: "Next"
                   }
                 )
-              ] }) : null,
-              availability.data.dates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: entry.date === selectedDate ? "is-active" : void 0,
-                  onClick: () => {
-                    setSelectedDate(entry.date);
-                    setSelectedTime(null);
-                    setSelectedEndTime(null);
-                    setBookingError(null);
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-date-chip__day", children: formatDateLabel(entry.date) })
-                },
-                entry.date
-              ))
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-availability__panel", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-title", children: selectedDate ? formatDateHeading(selectedDate) : availability.data.dates[0]?.date ? formatDateHeading(availability.data.dates[0].date) : "Select a date" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-subtitle", children: timeZoneLabel })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__slots", children: (() => {
-                const activeEntry = selectedDate ? availability.data.dates.find((entry) => entry.date === selectedDate) : availability.data.dates[0];
-                if (!activeEntry) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Select a date to see times." });
-                const availableSlots = (activeEntry.slots || []).filter((slot) => slot.available).sort((a, b) => {
-                  const aTime = parseDateTime(a.time, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
-                  const bTime = parseDateTime(b.time, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
-                  if (aTime === bTime) {
-                    const aEnd = parseDateTime(a.endTime, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
-                    const bEnd = parseDateTime(b.endTime, activeEntry.date)?.getTime() ?? Number.POSITIVE_INFINITY;
-                    return aEnd - bEnd;
-                  }
-                  return aTime - bTime;
-                });
-                const slots = availableSlots.filter(
-                  (slot, index) => index === 0 || slot.time !== availableSlots[index - 1].time || slot.endTime !== availableSlots[index - 1].endTime
-                );
-                if (slots.length === 0) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No available times for this date." });
-                }
-                return slots.map((slot, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }, label)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-calendar__grid", children: bw.calendarDays.map((day) => {
+                const entry = bw.availabilityByDate.get(day.date);
+                const hasAvailable = entry?.slots?.some((slot) => slot.available) ?? false;
+                const dateValue = parseDateOnly2(day.date);
+                const isPast = dateValue ? dateValue < todayDate : false;
+                const isBeyondMax = bw.maxAdvanceDate ? dateValue ? dateValue > bw.maxAdvanceDate : false : false;
+                const weekday = dateValue ? dateValue.getDay() : null;
+                const isDisabledWeekday = weekday !== null ? disabledWeekdaysSet.has(weekday) : false;
+                const isBlocked = Boolean(entry) && !hasAvailable;
+                const isDisabled = !entry || isPast || isBeyondMax || isBlocked || isDisabledWeekday;
+                const isActive = bw.selectedDate === day.date;
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                   "button",
                   {
                     type: "button",
-                    className: slot.time === selectedTime && slot.endTime === selectedEndTime ? "is-active" : void 0,
-                    onClick: () => {
-                      const date = selectedDate || activeEntry.date;
-                      setSelectedDate(date || null);
-                      setSelectedTime(slot.time);
-                      setSelectedEndTime(slot.endTime);
-                      setBookingError(null);
-                      if (autoAdvanceOnSelect) {
-                        setStep("details");
-                        scrollToTop();
-                      }
-                    },
-                    children: formatTimeLabel(slot.time)
+                    className: [
+                      "idk-calendar__day",
+                      day.isCurrentMonth ? "" : "is-muted",
+                      hasAvailable ? "is-available" : "",
+                      isBlocked ? "is-blocked" : "",
+                      isDisabledWeekday ? "is-disabled" : "",
+                      isActive ? "is-active" : ""
+                    ].filter(Boolean).join(" "),
+                    disabled: isDisabled,
+                    onClick: () => bw.selectDate(day.date),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: day.date.split("-")[2] }),
+                      showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "\u2022" : "Fully booked" }) : null
+                    ]
                   },
-                  `${activeEntry.date}-${slot.time}-${slot.endTime}-${index}`
-                ));
-              })() })
-            ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No availability found." }),
-          !autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__actions", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "idk-button",
-              onClick: handleTimeContinue,
-              disabled: !selectedTime || !selectedEndTime,
-              children: "Continue"
-            }
-          ) }) : null
-        ] }),
-        step === "details" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { className: "idk-form", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Your details" }),
-          bookingError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__error", children: bookingError }) : null,
-          selectedService && selectedTime ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__summary", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Service" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: selectedService.name })
-            ] }),
-            selectedStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Staff" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: selectedStaff.name })
-            ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "When" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
-                formatDateHeading(selectedDate || ""),
-                " \xB7 ",
-                formatTimeLabel(selectedTime)
-              ] })
-            ] }),
-            selectedService.price ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Price" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
-                "$",
-                (selectedService.price / 100).toFixed(2)
-              ] })
-            ] }) : null
-          ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Name" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
-              {
-                value: details.name,
-                onChange: (event) => setDetails((prev) => ({ ...prev, name: event.target.value })),
-                required: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Email" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
-              {
-                type: "email",
-                value: details.email,
-                onChange: (event) => setDetails((prev) => ({ ...prev, email: event.target.value })),
-                required: true
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Phone" }),
+                  day.date
+                );
+              }) }),
+              showFullyBookedLabel && calendarVariant === "compact" && bw.hasBlockedInCalendarView ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-calendar__legend", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-calendar__legend-dot", children: "\u2022" }),
+                " Fully booked"
+              ] }) : null
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          enableDatePaging ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-availability__nav", children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "input",
+              "button",
               {
-                value: details.phone,
-                onChange: (event) => setDetails((prev) => ({ ...prev, phone: event.target.value }))
+                type: "button",
+                className: "idk-button idk-button--ghost",
+                onClick: bw.handlePrevDates,
+                disabled: bw.availabilityStartDate <= (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+                children: "Previous"
               }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Notes" }),
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "textarea",
+              "button",
               {
-                rows: 4,
-                value: details.notes,
-                onChange: (event) => setDetails((prev) => ({ ...prev, notes: event.target.value }))
+                type: "button",
+                className: "idk-button idk-button--ghost",
+                onClick: bw.handleNextDates,
+                children: "Next"
               }
             )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
-        ] }),
-        step === "done" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__done", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ] }) : null,
+          bw.availabilityDates.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
-              className: "idk-link",
-              onClick: () => {
-                setStep("service");
-                setSelectedService(null);
-                resetSelections();
-                setDetails({ name: "", email: "", phone: "", notes: "" });
-                scrollToTop();
-              },
-              children: "Book another appointment"
+              className: entry.date === bw.selectedDate ? "is-active" : void 0,
+              onClick: () => bw.selectDate(entry.date),
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-date-chip__day", children: bw.formatDateLabel(entry.date) })
+            },
+            entry.date
+          ))
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-availability__panel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-title", children: bw.selectedDate ? bw.formatDateHeading(bw.selectedDate) : bw.availabilityDates[0]?.date ? bw.formatDateHeading(bw.availabilityDates[0].date) : "Select a date" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__panel-subtitle", children: bw.timeZoneLabel })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-availability__slots", children: (() => {
+            const activeEntry = bw.selectedDate ? bw.availabilityDates.find((entry) => entry.date === bw.selectedDate) : bw.availabilityDates[0];
+            if (!activeEntry) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "Select a date to see times." });
+            const availableSlots = (activeEntry.slots || []).filter((slot) => slot.available).sort((a, b) => {
+              const aTime = new Date(a.time).getTime() || Number.POSITIVE_INFINITY;
+              const bTime = new Date(b.time).getTime() || Number.POSITIVE_INFINITY;
+              if (aTime === bTime) {
+                const aEnd = new Date(a.endTime).getTime() || Number.POSITIVE_INFINITY;
+                const bEnd = new Date(b.endTime).getTime() || Number.POSITIVE_INFINITY;
+                return aEnd - bEnd;
+              }
+              return aTime - bTime;
+            });
+            const slots = availableSlots.filter(
+              (slot, index) => index === 0 || slot.time !== availableSlots[index - 1].time || slot.endTime !== availableSlots[index - 1].endTime
+            );
+            if (slots.length === 0) {
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No available times for this date." });
             }
-          )
+            return slots.map((slot, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "button",
+              {
+                type: "button",
+                className: slot.time === bw.selectedTime && slot.endTime === bw.selectedEndTime ? "is-active" : void 0,
+                onClick: () => {
+                  const date = bw.selectedDate || activeEntry.date;
+                  if (!bw.selectedDate) bw.selectDate(date);
+                  bw.selectTime(slot.time, slot.endTime);
+                },
+                children: bw.formatTimeLabel(slot.time)
+              },
+              `${activeEntry.date}-${slot.time}-${slot.endTime}-${index}`
+            ));
+          })() })
         ] })
-      ]
-    }
-  );
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-state", children: "No availability found." }),
+      !hookProps.autoAdvanceOnSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__actions", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "idk-button",
+          onClick: bw.continueFromTime,
+          disabled: !bw.selectedTime || !bw.selectedEndTime,
+          children: "Continue"
+        }
+      ) }) : null
+    ] }),
+    bw.step === "details" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { className: "idk-form", onSubmit: bw.submitBooking, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: "Your details" }),
+      bw.bookingError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__error", children: bw.bookingError }) : null,
+      bw.selectedService && bw.selectedTime ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__summary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Service" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: bw.selectedService.name })
+        ] }),
+        bw.selectedStaff ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Staff" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: bw.selectedStaff.name })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "When" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
+            bw.formatDateHeading(bw.selectedDate || ""),
+            " \xB7 ",
+            bw.formatTimeLabel(bw.selectedTime)
+          ] })
+        ] }),
+        bw.selectedService.price ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "idk-booking__summary-label", children: "Price" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { children: [
+            "$",
+            (bw.selectedService.price / 100).toFixed(2)
+          ] })
+        ] }) : null
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "input",
+          {
+            value: bw.details.name,
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, name: event.target.value })),
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "input",
+          {
+            type: "email",
+            value: bw.details.email,
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, email: event.target.value })),
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Phone" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "input",
+          {
+            value: bw.details.phone,
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, phone: event.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "idk-form__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Notes" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "textarea",
+          {
+            rows: 4,
+            value: bw.details.notes,
+            onChange: (event) => bw.setDetails((prev) => ({ ...prev, notes: event.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", className: "idk-button", disabled: bw.isSubmitting, children: bw.isSubmitting ? "Booking..." : "Confirm booking" })
+    ] }),
+    bw.step === "done" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "idk-booking__done", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "idk-link", onClick: bw.reset, children: "Book another appointment" })
+    ] })
+  ] });
 }
 
 // src/components/AvailabilityPicker.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function AvailabilityPicker({
   serviceId,
@@ -1662,8 +1722,8 @@ function AvailabilityPicker({
   className,
   onSelect
 }) {
-  const [selectedDate, setSelectedDate] = (0, import_react8.useState)(date || null);
-  const [selectedTime, setSelectedTime] = (0, import_react8.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, import_react9.useState)(date || null);
+  const [selectedTime, setSelectedTime] = (0, import_react9.useState)(null);
   const { data, isLoading } = useAvailability({
     serviceId,
     staffId,
@@ -1819,6 +1879,7 @@ function TimePicker({
   TimePicker,
   useAvailability,
   useBookingLookup,
+  useBookingWidget,
   useCancelBooking,
   useCreateBooking,
   useServices,