@idkwebsites/components 0.1.8 → 0.1.14

package/dist/index.js

@@ -344,8 +344,62 @@ function ServicesList({
   );
 }
 
+// src/lib/linkify.tsx
+import { jsx as jsx4 } from "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__ */ jsx4("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
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function TeamMember({
   member,
   className,
@@ -356,32 +410,32 @@ function TeamMember({
   imagePosition = "left"
 }) {
   const initials = member.name?.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
-  const avatar = /* @__PURE__ */ jsx4("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ jsx4("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ jsx4("span", { children: initials }) });
+  const avatar = /* @__PURE__ */ jsx5("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ jsx5("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ jsx5("span", { children: initials }) });
   if (layout === "profile") {
     return /* @__PURE__ */ jsxs2("div", { className: ["idk-team__profile", className].filter(Boolean).join(" "), children: [
       imagePosition === "left" ? avatar : null,
       /* @__PURE__ */ jsxs2("div", { className: "idk-team__info", children: [
-        /* @__PURE__ */ jsx4("h3", { className: "idk-card__title", children: member.name }),
-        showRole ? /* @__PURE__ */ jsx4("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
-        showBio && member.bio ? /* @__PURE__ */ jsx4("p", { className: "idk-team__bio", children: member.bio }) : null,
-        showEmail ? /* @__PURE__ */ jsx4("p", { className: "idk-card__meta", children: member.email }) : null
+        /* @__PURE__ */ jsx5("h3", { className: "idk-card__title", children: member.name }),
+        showRole ? /* @__PURE__ */ jsx5("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+        showBio && member.bio ? /* @__PURE__ */ jsx5("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
+        showEmail ? /* @__PURE__ */ jsx5("p", { className: "idk-card__meta", children: member.email }) : null
       ] }),
       imagePosition === "right" ? avatar : null
     ] });
   }
   return /* @__PURE__ */ jsxs2("div", { className: ["idk-card", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx4("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ jsx4("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ jsx4("span", { children: initials }) }),
+    /* @__PURE__ */ jsx5("div", { className: "idk-team__avatar", children: member.photo?.url ? /* @__PURE__ */ jsx5("img", { src: member.photo.url, alt: member.name }) : /* @__PURE__ */ jsx5("span", { children: initials }) }),
     /* @__PURE__ */ jsxs2("div", { className: "idk-team__info", children: [
-      /* @__PURE__ */ jsx4("h3", { className: "idk-card__title", children: member.name }),
-      showRole ? /* @__PURE__ */ jsx4("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
-      showBio && member.bio ? /* @__PURE__ */ jsx4("p", { className: "idk-team__bio", children: member.bio }) : null,
-      showEmail ? /* @__PURE__ */ jsx4("p", { className: "idk-card__meta", children: member.email }) : null
+      /* @__PURE__ */ jsx5("h3", { className: "idk-card__title", children: member.name }),
+      showRole ? /* @__PURE__ */ jsx5("p", { className: "idk-card__description", children: member.role || "Staff" }) : null,
+      showBio && member.bio ? /* @__PURE__ */ jsx5("p", { className: "idk-team__bio", children: renderLinkedText(member.bio) }) : null,
+      showEmail ? /* @__PURE__ */ jsx5("p", { className: "idk-card__meta", children: member.email }) : null
     ] })
   ] });
 }
 
 // src/components/TeamGrid.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function TeamGrid({
   columns = 3,
   className,
@@ -399,7 +453,7 @@ function TeamGrid({
 }) {
   const { data, isLoading, error } = useTeam(query);
   if (isLoading) {
-    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: loadingMessage });
+    return /* @__PURE__ */ jsx6("div", { className: "idk-state", children: loadingMessage });
   }
   let members = data?.team ? [...data.team] : [];
   if (filter) {
@@ -412,15 +466,15 @@ function TeamGrid({
     members = members.slice(0, Math.max(0, limit));
   }
   if (error || members.length === 0) {
-    return /* @__PURE__ */ jsx5("div", { className: "idk-state", children: emptyMessage });
+    return /* @__PURE__ */ jsx6("div", { className: "idk-state", children: emptyMessage });
   }
   const gridStyle = { gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: ["idk-team", className].filter(Boolean).join(" "),
       style: gridStyle,
-      children: members.map((member) => /* @__PURE__ */ jsx5(
+      children: members.map((member) => /* @__PURE__ */ jsx6(
         TeamMember,
         {
           member,
@@ -439,7 +493,7 @@ function TeamGrid({
 // src/components/ContactForm.tsx
 import { useState as useState2 } from "react";
 import { useMutation as useMutation2 } from "@tanstack/react-query";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_FIELDS = ["name", "email", "phone", "message"];
 function ContactForm({
   fields = DEFAULT_FIELDS,
@@ -487,8 +541,8 @@ function ContactForm({
   };
   return /* @__PURE__ */ jsxs3("form", { className: ["idk-form", className].filter(Boolean).join(" "), onSubmit: handleSubmit, children: [
     fields.includes("name") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ jsx6("span", { children: "Name" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { children: "Name" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           value: formState.name,
@@ -498,8 +552,8 @@ function ContactForm({
       )
     ] }),
     fields.includes("email") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ jsx6("span", { children: "Email" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { children: "Email" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "email",
@@ -510,8 +564,8 @@ function ContactForm({
       )
     ] }),
     fields.includes("phone") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ jsx6("span", { children: "Phone" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { children: "Phone" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           value: formState.phone,
@@ -520,8 +574,8 @@ function ContactForm({
       )
     ] }),
     fields.includes("subject") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ jsx6("span", { children: "Subject" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { children: "Subject" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           value: formState.subject,
@@ -530,8 +584,8 @@ function ContactForm({
       )
     ] }),
     fields.includes("message") && /* @__PURE__ */ jsxs3("label", { className: "idk-form__field", children: [
-      /* @__PURE__ */ jsx6("span", { children: "Message" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { children: "Message" }),
+      /* @__PURE__ */ jsx7(
         "textarea",
         {
           value: formState.message,
@@ -541,15 +595,27 @@ function ContactForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
-    mutation.isError ? /* @__PURE__ */ jsx6("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
-    mutation.isSuccess ? /* @__PURE__ */ jsx6("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
+    /* @__PURE__ */ jsx7("button", { type: "submit", className: "idk-button", disabled: mutation.isPending, children: mutation.isPending ? "Sending..." : submitLabel }),
+    mutation.isError ? /* @__PURE__ */ jsx7("p", { className: "idk-form__error", children: "Something went wrong. Please try again." }) : null,
+    mutation.isSuccess ? /* @__PURE__ */ jsx7("p", { className: "idk-form__success", children: "Thanks! We'll be in touch soon." }) : null
   ] });
 }
 
 // src/components/BookingWidget.tsx
 import { useCallback, useEffect, useMemo as useMemo4, useRef, useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var parseDateOnly = (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;
+};
+var addDays = (dateStr, days) => {
+  const parsed = parseDateOnly(dateStr);
+  if (!parsed) return dateStr;
+  parsed.setDate(parsed.getDate() + days);
+  return parsed.toISOString().slice(0, 10);
+};
 function BookingWidget({
   className,
   showStaffSelection = true,
@@ -576,7 +642,16 @@ function BookingWidget({
   staffLayout = "grid",
   staffColumns = 2,
   showAnyStaffOption = true,
-  timeLayout = "split"
+  staffPageSize = 8,
+  showStaffPagination,
+  timeLayout = "split",
+  availabilityDays: availabilityDaysProp = 7,
+  enableDatePaging = true,
+  datePickerMode = "list",
+  calendarVariant = "default",
+  maxAdvanceMonths = 3,
+  disabledWeekdays = [],
+  showFullyBookedLabel = true
 }) {
   const resolvedServicesQuery = useMemo4(
     () => services ? { ...servicesQuery, enabled: false } : servicesQuery,
@@ -595,6 +670,17 @@ function BookingWidget({
   const [serviceSearch, setServiceSearch] = useState3("");
   const [categoryFilter, setCategoryFilter] = useState3("all");
   const [servicePage, setServicePage] = useState3(1);
+  const [staffPage, setStaffPage] = useState3(1);
+  const [availabilityDays, setAvailabilityDays] = useState3(
+    Math.max(1, availabilityDaysProp)
+  );
+  const [availabilityStartDate, setAvailabilityStartDate] = useState3(
+    () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
+  );
+  const [calendarMonth, setCalendarMonth] = useState3(() => {
+    const now = /* @__PURE__ */ new Date();
+    return new Date(now.getFullYear(), now.getMonth(), 1);
+  });
   const [bookingError, setBookingError] = useState3(null);
   const [details, setDetails] = useState3({
     name: "",
@@ -626,6 +712,9 @@ function BookingWidget({
   useEffect(() => {
     setServicePage(1);
   }, [serviceSearch, categoryFilter]);
+  useEffect(() => {
+    setStaffPage(1);
+  }, [selectedService?.id, teamData, teamFilter]);
   const pagedServices = useMemo4(() => {
     const pageSize = Math.max(1, servicePageSize);
     return filteredServices.slice(0, pageSize * servicePage);
@@ -641,10 +730,21 @@ function BookingWidget({
     const teamList = teamData?.team || [];
     return teamFilter ? teamList.filter(teamFilter) : teamList;
   }, [selectedService, teamData, teamFilter]);
+  const pagedStaff = useMemo4(() => {
+    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 = useMemo4(
+    () => addDays(availabilityStartDate, Math.max(1, availabilityDays) - 1),
+    [availabilityStartDate, availabilityDays]
+  );
   const availability = useAvailability({
     serviceId: selectedService?.id || "",
     staffId: selectedStaff?.id,
-    days: 7,
+    startDate: availabilityStartDate,
+    endDate: availabilityEndDate,
     enabled: Boolean(selectedService)
   });
   const timeZone = availability.data?.timeZone || "America/Chicago";
@@ -714,18 +814,6 @@ function BookingWidget({
     setSelectedEndTime(null);
     setBookingError(null);
   };
-  useEffect(() => {
-    if (step !== "time") return;
-    if (!availability.data?.dates?.length) return;
-    if (selectedDate) return;
-    setSelectedDate(availability.data.dates[0].date);
-  }, [step, availability.data, selectedDate]);
-  const parseDateOnly = (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;
-  };
   const parseDateTime = (value, fallbackDate) => {
     if (!value) return null;
     const direct = new Date(value);
@@ -771,6 +859,118 @@ function BookingWidget({
     const remaining = minutes % 60;
     return remaining === 0 ? `${hours} hr${hours > 1 ? "s" : ""}` : `${hours} hr ${remaining} min`;
   };
+  const todayString = useMemo4(() => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), []);
+  const todayDate = useMemo4(() => {
+    const now = /* @__PURE__ */ new Date();
+    now.setHours(0, 0, 0, 0);
+    return now;
+  }, []);
+  const disabledWeekdaysSet = useMemo4(() => new Set(disabledWeekdays), [disabledWeekdays]);
+  const getMonthStart = useCallback((date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  }, []);
+  const getMonthEnd = useCallback((date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  }, []);
+  const getMonthDays = useCallback(
+    (date) => {
+      const start = getMonthStart(date);
+      const end = getMonthEnd(date);
+      const days = [];
+      const startDay = start.getDay();
+      for (let i = startDay; i > 0; i -= 1) {
+        const d = new Date(start);
+        d.setDate(start.getDate() - i);
+        days.push({ date: d.toISOString().slice(0, 10), isCurrentMonth: false });
+      }
+      for (let day = 1; day <= end.getDate(); day += 1) {
+        const d = new Date(date.getFullYear(), date.getMonth(), day);
+        days.push({ date: d.toISOString().slice(0, 10), isCurrentMonth: true });
+      }
+      const remainder = 7 - (days.length % 7 || 7);
+      for (let i = 1; i <= remainder; i += 1) {
+        const d = new Date(end);
+        d.setDate(end.getDate() + i);
+        days.push({ date: d.toISOString().slice(0, 10), isCurrentMonth: false });
+      }
+      return days;
+    },
+    [getMonthEnd, getMonthStart]
+  );
+  const maxAdvanceDate = useMemo4(() => {
+    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 = useMemo4(() => {
+    if (!maxAdvanceMonths || maxAdvanceMonths <= 0) return null;
+    return new Date(todayDate.getFullYear(), todayDate.getMonth() + maxAdvanceMonths - 1, 1);
+  }, [maxAdvanceMonths, todayDate]);
+  const handlePrevDates = () => {
+    if (availabilityStartDate <= todayString) return;
+    setAvailabilityStartDate((prev) => addDays(prev, -availabilityDays));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  const handleNextDates = () => {
+    if (maxAdvanceDate) {
+      const nextStart = parseDateOnly(addDays(availabilityStartDate, availabilityDays));
+      if (nextStart && nextStart > maxAdvanceDate) {
+        return;
+      }
+    }
+    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;
+    }
+    setCalendarMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+    setSelectedDate(null);
+    setSelectedTime(null);
+    setSelectedEndTime(null);
+    setBookingError(null);
+  };
+  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]);
+  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]);
+  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") {
@@ -840,10 +1040,10 @@ function BookingWidget({
   };
   const isServicesLoading = services ? false : servicesLoading;
   if (isServicesLoading) {
-    return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Loading booking options..." });
+    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Loading booking options..." });
   }
   if (!servicesList.length) {
-    return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No services available." });
+    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No services available." });
   }
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -853,10 +1053,10 @@ function BookingWidget({
       children: [
         /* @__PURE__ */ jsxs4("div", { className: "idk-booking__header", children: [
           /* @__PURE__ */ jsxs4("div", { className: "idk-booking__title-wrap", children: [
-            /* @__PURE__ */ jsx7("h3", { className: "idk-booking__title", children: title }),
-            subtitle ? /* @__PURE__ */ jsx7("p", { className: "idk-booking__subtitle", children: subtitle }) : null
+            /* @__PURE__ */ jsx8("h3", { className: "idk-booking__title", children: title }),
+            subtitle ? /* @__PURE__ */ jsx8("p", { className: "idk-booking__subtitle", children: subtitle }) : null
           ] }),
-          step !== "service" && step !== "done" ? /* @__PURE__ */ jsx7("button", { type: "button", className: "idk-link", onClick: handleBack, children: "Back" }) : null
+          step !== "service" && step !== "done" ? /* @__PURE__ */ jsx8("button", { type: "button", className: "idk-link", onClick: handleBack, children: "Back" }) : null
         ] }),
         step !== "done" ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__progress", children: [
           /* @__PURE__ */ jsxs4("span", { children: [
@@ -865,7 +1065,7 @@ function BookingWidget({
             " of ",
             totalSteps
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "idk-booking__bar", children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "idk-booking__bar", children: /* @__PURE__ */ jsx8(
             "div",
             {
               className: "idk-booking__bar-fill",
@@ -874,9 +1074,9 @@ function BookingWidget({
           ) })
         ] }) : null,
         step === "service" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-          /* @__PURE__ */ jsx7("h4", { children: "Select a service" }),
+          /* @__PURE__ */ jsx8("h4", { children: "Select a service" }),
           enableServiceSearch || enableCategoryFilter ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__filters", children: [
-            enableServiceSearch ? /* @__PURE__ */ jsx7(
+            enableServiceSearch ? /* @__PURE__ */ jsx8(
               "input",
               {
                 type: "search",
@@ -891,13 +1091,13 @@ function BookingWidget({
                 value: categoryFilter,
                 onChange: (event) => setCategoryFilter(event.target.value),
                 children: [
-                  /* @__PURE__ */ jsx7("option", { value: "all", children: categoryLabel }),
-                  categories.map((category) => /* @__PURE__ */ jsx7("option", { value: category, children: category }, category))
+                  /* @__PURE__ */ jsx8("option", { value: "all", children: categoryLabel }),
+                  categories.map((category) => /* @__PURE__ */ jsx8("option", { value: category, children: category }, category))
                 ]
               }
             ) : null
           ] }) : null,
-          filteredServices.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ jsx7(
+          filteredServices.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No services match your filters." }) : /* @__PURE__ */ jsx8(
             "div",
             {
               className: [
@@ -929,19 +1129,19 @@ function BookingWidget({
                     },
                     children: [
                       /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
-                        /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: service.name }),
+                        /* @__PURE__ */ jsx8("span", { className: "idk-card__title", children: service.name }),
                         /* @__PURE__ */ jsxs4("span", { className: "idk-card__aside", children: [
-                          isSelected ? /* @__PURE__ */ jsx7("span", { className: "idk-card__check", children: "\u2713" }) : null,
+                          isSelected ? /* @__PURE__ */ jsx8("span", { className: "idk-card__check", children: "\u2713" }) : null,
                           typeof service.price === "number" && service.price > 0 ? /* @__PURE__ */ jsxs4("span", { className: "idk-card__price", children: [
                             "$",
                             (service.price / 100).toFixed(2)
                           ] }) : null
                         ] })
                       ] }),
-                      service.description ? /* @__PURE__ */ jsx7("div", { className: "idk-card__description", children: service.description }) : null,
+                      service.description ? /* @__PURE__ */ jsx8("div", { className: "idk-card__description", children: service.description }) : null,
                       /* @__PURE__ */ jsxs4("div", { className: "idk-card__meta", children: [
-                        /* @__PURE__ */ jsx7("span", { children: formatDuration(service.duration) }),
-                        service.category ? /* @__PURE__ */ jsx7("span", { className: "idk-pill", children: service.category }) : null
+                        /* @__PURE__ */ jsx8("span", { children: formatDuration(service.duration) }),
+                        service.category ? /* @__PURE__ */ jsx8("span", { className: "idk-pill", children: service.category }) : null
                       ] })
                     ]
                   },
@@ -951,7 +1151,7 @@ function BookingWidget({
             }
           ),
           /* @__PURE__ */ jsxs4("div", { className: "idk-booking__actions", children: [
-            shouldPaginate ? /* @__PURE__ */ jsx7(
+            shouldPaginate ? /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -961,12 +1161,12 @@ function BookingWidget({
                 children: hasMoreServices ? "Show more services" : "All services shown"
               }
             ) : null,
-            selectedService && !autoAdvanceOnSelect ? /* @__PURE__ */ jsx7("button", { type: "button", className: "idk-button", onClick: handleServiceContinue, children: "Continue" }) : null
+            selectedService && !autoAdvanceOnSelect ? /* @__PURE__ */ jsx8("button", { type: "button", className: "idk-button", onClick: handleServiceContinue, children: "Continue" }) : null
           ] })
         ] }),
         step === "staff" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-          /* @__PURE__ */ jsx7("h4", { children: "Select a team member" }),
-          staffOptions.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx8("h4", { children: "Select a team member" }),
+          staffOptions.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No team members available." }) : /* @__PURE__ */ jsxs4(
             "div",
             {
               className: [
@@ -992,15 +1192,15 @@ function BookingWidget({
                     },
                     children: [
                       /* @__PURE__ */ jsxs4("div", { className: "idk-card__header", children: [
-                        /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: "Any Available" }),
-                        /* @__PURE__ */ jsx7("span", { className: "idk-card__badge", children: "Recommended" })
+                        /* @__PURE__ */ jsx8("span", { className: "idk-card__title", children: "Any Available" }),
+                        /* @__PURE__ */ jsx8("span", { className: "idk-card__badge", children: "Recommended" })
                       ] }),
-                      /* @__PURE__ */ jsx7("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
+                      /* @__PURE__ */ jsx8("p", { className: "idk-card__description", children: "We'll match you with the first available stylist." })
                     ]
                   },
                   "any-staff"
                 ) : null,
-                staffOptions.map((staff) => /* @__PURE__ */ jsx7(
+                pagedStaff.map((staff) => /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -1017,11 +1217,11 @@ function BookingWidget({
                       }
                     },
                     children: /* @__PURE__ */ jsxs4("div", { className: "idk-team__card", children: [
-                      /* @__PURE__ */ jsx7("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ jsx7("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ jsx7("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
+                      /* @__PURE__ */ jsx8("div", { className: "idk-team__avatar", children: staff.photo?.url ? /* @__PURE__ */ jsx8("img", { src: staff.photo.url, alt: staff.name }) : /* @__PURE__ */ jsx8("span", { children: staff.name.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase() }) }),
                       /* @__PURE__ */ jsxs4("div", { children: [
-                        /* @__PURE__ */ jsx7("span", { className: "idk-card__title", children: staff.name }),
-                        /* @__PURE__ */ jsx7("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
-                        staff.bio ? /* @__PURE__ */ jsx7("p", { className: "idk-card__description", children: staff.bio }) : null
+                        /* @__PURE__ */ jsx8("span", { className: "idk-card__title", children: staff.name }),
+                        /* @__PURE__ */ jsx8("span", { className: "idk-card__meta", children: staff.role || "Staff" }),
+                        staff.bio ? /* @__PURE__ */ jsx8("p", { className: "idk-card__description", children: renderLinkedText(staff.bio) }) : null
                       ] })
                     ] })
                   },
@@ -1031,7 +1231,17 @@ function BookingWidget({
             }
           ),
           /* @__PURE__ */ jsxs4("div", { className: "idk-booking__actions", children: [
-            canSkipStaff ? /* @__PURE__ */ jsx7(
+            shouldPaginateStaff ? /* @__PURE__ */ jsx8(
+              "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__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -1044,7 +1254,7 @@ function BookingWidget({
                 children: "Continue without selecting"
               }
             ) : null,
-            !autoAdvanceOnSelect ? /* @__PURE__ */ jsx7(
+            !autoAdvanceOnSelect ? /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -1057,36 +1267,136 @@ function BookingWidget({
           ] })
         ] }),
         step === "time" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__step", children: [
-          /* @__PURE__ */ jsx7("h4", { children: "Select a time" }),
-          availability.isLoading ? /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ jsxs4("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
-            /* @__PURE__ */ jsx7("div", { className: "idk-availability__dates", children: availability.data.dates.map((entry) => /* @__PURE__ */ jsx7(
-              "button",
+          /* @__PURE__ */ jsx8("h4", { children: "Select a time" }),
+          availability.isLoading ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Loading availability..." }) : availability.data ? /* @__PURE__ */ jsxs4("div", { className: ["idk-availability", timeLayout === "split" ? "idk-availability--split" : ""].join(" "), children: [
+            /* @__PURE__ */ jsx8("div", { className: "idk-availability__dates", children: datePickerMode === "calendar" ? /* @__PURE__ */ jsxs4(
+              "div",
               {
-                type: "button",
-                className: entry.date === selectedDate ? "is-active" : void 0,
-                onClick: () => {
-                  setSelectedDate(entry.date);
-                  setSelectedTime(null);
-                  setSelectedEndTime(null);
-                  setBookingError(null);
+                className: [
+                  "idk-calendar",
+                  calendarVariant === "compact" ? "idk-calendar--compact" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "idk-calendar__header", children: [
+                    /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        type: "button",
+                        className: "idk-button idk-button--ghost",
+                        onClick: handlePrevMonth,
+                        disabled: calendarMonth <= getMonthStart(todayDate),
+                        children: "Previous"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8("div", { className: "idk-calendar__title", children: new Intl.DateTimeFormat("en-US", {
+                      month: "long",
+                      year: "numeric"
+                    }).format(calendarMonth) }),
+                    /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        type: "button",
+                        className: "idk-button idk-button--ghost",
+                        onClick: handleNextMonth,
+                        disabled: Boolean(maxAdvanceMonthStart && calendarMonth >= maxAdvanceMonthStart),
+                        children: "Next"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx8("div", { className: "idk-calendar__weekdays", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((label) => /* @__PURE__ */ jsx8("span", { children: label }, label)) }),
+                  /* @__PURE__ */ jsx8("div", { className: "idk-calendar__grid", children: getMonthDays(calendarMonth).map((day) => {
+                    const entry = availability.data?.dates?.find(
+                      (item) => item.date === 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__ */ jsxs4(
+                      "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__ */ jsx8("span", { children: day.date.split("-")[2] }),
+                          showFullyBookedLabel && isBlocked && day.isCurrentMonth ? /* @__PURE__ */ jsx8("span", { className: "idk-calendar__label", children: calendarVariant === "compact" ? "Full" : "Fully booked" }) : null
+                        ]
+                      },
+                      day.date
+                    );
+                  }) })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+              enableDatePaging ? /* @__PURE__ */ jsxs4("div", { className: "idk-availability__nav", children: [
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    className: "idk-button idk-button--ghost",
+                    onClick: handlePrevDates,
+                    disabled: availabilityStartDate <= todayString,
+                    children: "Previous"
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    type: "button",
+                    className: "idk-button idk-button--ghost",
+                    onClick: handleNextDates,
+                    children: "Next"
+                  }
+                )
+              ] }) : null,
+              availability.data.dates.map((entry) => /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  className: entry.date === selectedDate ? "is-active" : void 0,
+                  onClick: () => {
+                    setSelectedDate(entry.date);
+                    setSelectedTime(null);
+                    setSelectedEndTime(null);
+                    setBookingError(null);
+                  },
+                  children: /* @__PURE__ */ jsx8("span", { className: "idk-date-chip__day", children: formatDateLabel(entry.date) })
                 },
-                children: /* @__PURE__ */ jsx7("span", { className: "idk-date-chip__day", children: formatDateLabel(entry.date) })
-              },
-              entry.date
-            )) }),
+                entry.date
+              ))
+            ] }) }),
             /* @__PURE__ */ jsxs4("div", { className: "idk-availability__panel", children: [
-              /* @__PURE__ */ jsx7("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ jsxs4("div", { children: [
-                /* @__PURE__ */ jsx7("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__ */ jsx7("div", { className: "idk-availability__panel-subtitle", children: timeZoneLabel })
+              /* @__PURE__ */ jsx8("div", { className: "idk-availability__panel-header", children: /* @__PURE__ */ jsxs4("div", { children: [
+                /* @__PURE__ */ jsx8("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__ */ jsx8("div", { className: "idk-availability__panel-subtitle", children: timeZoneLabel })
               ] }) }),
-              /* @__PURE__ */ jsx7("div", { className: "idk-availability__slots", children: (() => {
-                const activeEntry = availability.data.dates.find((entry) => entry.date === selectedDate) || availability.data.dates[0];
-                if (!activeEntry) return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "Select a date to see times." });
+              /* @__PURE__ */ jsx8("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__ */ jsx8("div", { className: "idk-state", children: "Select a date to see times." });
                 const slots = (activeEntry.slots || []).filter((slot) => slot.available);
                 if (slots.length === 0) {
-                  return /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No available times for this date." });
+                  return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No available times for this date." });
                 }
-                return slots.map((slot) => /* @__PURE__ */ jsx7(
+                return slots.map((slot, index) => /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -1104,12 +1414,12 @@ function BookingWidget({
                     },
                     children: formatTimeLabel(slot.time)
                   },
-                  `${slot.time}-${slot.endTime}`
+                  `${activeEntry.date}-${slot.time}-${slot.endTime}-${index}`
                 ));
               })() })
             ] })
-          ] }) : /* @__PURE__ */ jsx7("div", { className: "idk-state", children: "No availability found." }),
-          !autoAdvanceOnSelect ? /* @__PURE__ */ jsx7("div", { className: "idk-booking__actions", children: /* @__PURE__ */ jsx7(
+          ] }) : /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No availability found." }),
+          !autoAdvanceOnSelect ? /* @__PURE__ */ jsx8("div", { className: "idk-booking__actions", children: /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -1121,19 +1431,19 @@ function BookingWidget({
           ) }) : null
         ] }),
         step === "details" && /* @__PURE__ */ jsxs4("form", { className: "idk-form", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsx7("h4", { children: "Your details" }),
-          bookingError ? /* @__PURE__ */ jsx7("div", { className: "idk-booking__error", children: bookingError }) : null,
+          /* @__PURE__ */ jsx8("h4", { children: "Your details" }),
+          bookingError ? /* @__PURE__ */ jsx8("div", { className: "idk-booking__error", children: bookingError }) : null,
           selectedService && selectedTime ? /* @__PURE__ */ jsxs4("div", { className: "idk-booking__summary", children: [
             /* @__PURE__ */ jsxs4("div", { children: [
-              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "Service" }),
-              /* @__PURE__ */ jsx7("p", { children: selectedService.name })
+              /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "Service" }),
+              /* @__PURE__ */ jsx8("p", { children: selectedService.name })
             ] }),
             selectedStaff ? /* @__PURE__ */ jsxs4("div", { children: [
-              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "Staff" }),
-              /* @__PURE__ */ jsx7("p", { children: selectedStaff.name })
+              /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "Staff" }),
+              /* @__PURE__ */ jsx8("p", { children: selectedStaff.name })
             ] }) : null,
             /* @__PURE__ */ jsxs4("div", { children: [
-              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "When" }),
+              /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "When" }),
               /* @__PURE__ */ jsxs4("p", { children: [
                 formatDateHeading(selectedDate || ""),
                 " \xB7 ",
@@ -1141,7 +1451,7 @@ function BookingWidget({
               ] })
             ] }),
             selectedService.price ? /* @__PURE__ */ jsxs4("div", { children: [
-              /* @__PURE__ */ jsx7("span", { className: "idk-booking__summary-label", children: "Price" }),
+              /* @__PURE__ */ jsx8("span", { className: "idk-booking__summary-label", children: "Price" }),
               /* @__PURE__ */ jsxs4("p", { children: [
                 "$",
                 (selectedService.price / 100).toFixed(2)
@@ -1149,8 +1459,8 @@ function BookingWidget({
             ] }) : null
           ] }) : null,
           /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ jsx7("span", { children: "Name" }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { children: "Name" }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 value: details.name,
@@ -1160,8 +1470,8 @@ function BookingWidget({
             )
           ] }),
           /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ jsx7("span", { children: "Email" }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { children: "Email" }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 type: "email",
@@ -1172,8 +1482,8 @@ function BookingWidget({
             )
           ] }),
           /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ jsx7("span", { children: "Phone" }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { children: "Phone" }),
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 value: details.phone,
@@ -1182,8 +1492,8 @@ function BookingWidget({
             )
           ] }),
           /* @__PURE__ */ jsxs4("label", { className: "idk-form__field", children: [
-            /* @__PURE__ */ jsx7("span", { children: "Notes" }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { children: "Notes" }),
+            /* @__PURE__ */ jsx8(
               "textarea",
               {
                 rows: 4,
@@ -1192,12 +1502,12 @@ function BookingWidget({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx7("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
+          /* @__PURE__ */ jsx8("button", { type: "submit", className: "idk-button", disabled: createBooking.isPending, children: createBooking.isPending ? "Booking..." : "Confirm booking" })
         ] }),
         step === "done" && /* @__PURE__ */ jsxs4("div", { className: "idk-booking__done", children: [
-          /* @__PURE__ */ jsx7("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
-          /* @__PURE__ */ jsx7("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { className: "idk-booking__done-title", children: "Booking confirmed!" }),
+          /* @__PURE__ */ jsx8("p", { className: "idk-booking__done-text", children: "We'll send a confirmation email shortly with your appointment details." }),
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -1220,7 +1530,7 @@ function BookingWidget({
 
 // src/components/AvailabilityPicker.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function AvailabilityPicker({
   serviceId,
   staffId,
@@ -1238,15 +1548,15 @@ function AvailabilityPicker({
     days
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "Loading availability..." });
+    return /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "Loading availability..." });
   }
   if (!data?.dates?.length) {
-    return /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No availability found." });
+    return /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No availability found." });
   }
   const activeDate = selectedDate || data.dates[0]?.date;
   const activeSlots = data.dates.find((entry) => entry.date === activeDate)?.slots || [];
   return /* @__PURE__ */ jsxs5("div", { className: ["idk-availability", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx8("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9("div", { className: "idk-availability__dates", children: data.dates.map((entry) => /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1259,7 +1569,7 @@ function AvailabilityPicker({
       },
       entry.date
     )) }),
-    /* @__PURE__ */ jsx8("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ jsx8("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9("div", { className: "idk-availability__slots", children: activeSlots.filter((slot) => slot.available).length === 0 ? /* @__PURE__ */ jsx9("div", { className: "idk-state", children: "No slots available." }) : activeSlots.filter((slot) => slot.available).map((slot) => /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1282,21 +1592,21 @@ function AvailabilityPicker({
 }
 
 // src/components/ServicePicker.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function ServicePicker({
   services,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx9("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx10("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: services.map((service) => /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
       className: selectedId === service.id ? "is-active" : void 0,
       onClick: () => onSelect?.(service),
       children: [
-        /* @__PURE__ */ jsx9("span", { children: service.name }),
+        /* @__PURE__ */ jsx10("span", { children: service.name }),
         /* @__PURE__ */ jsxs6("small", { children: [
           service.duration,
           " min"
@@ -1308,22 +1618,22 @@ function ServicePicker({
 }
 
 // src/components/StaffPicker.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function StaffPicker({
   staff,
   selectedId,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx10("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx11("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: staff.map((member) => /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
       className: selectedId === member.id ? "is-active" : void 0,
       onClick: () => onSelect?.(member),
       children: [
-        /* @__PURE__ */ jsx10("span", { children: member.name }),
-        /* @__PURE__ */ jsx10("small", { children: member.role || "Staff" })
+        /* @__PURE__ */ jsx11("span", { children: member.name }),
+        /* @__PURE__ */ jsx11("small", { children: member.role || "Staff" })
       ]
     },
     member.id
@@ -1331,14 +1641,14 @@ function StaffPicker({
 }
 
 // src/components/DatePicker.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function DatePicker({
   dates,
   selectedDate,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: dates.map((date) => /* @__PURE__ */ jsx12(
     "button",
     {
       type: "button",
@@ -1351,14 +1661,14 @@ function DatePicker({
 }
 
 // src/components/TimePicker.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function TimePicker({
   slots,
   selectedTime,
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx12("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13("div", { className: ["idk-picker", className].filter(Boolean).join(" "), children: slots.map((slot) => /* @__PURE__ */ jsx13(
     "button",
     {
       type: "button",