@flamingo-stack/openframe-frontend-core 0.0.742 → 0.0.744

package/dist/components/meeting-scheduler/index.d.ts

@@ -77,7 +77,22 @@ export interface HubSpotMeetingSchedulerProps {
     /** Form rescue for the details form (`RESCUE_FORMS.meetingBooking`). OPT-IN:
      *  omitted or `null` saves nothing. */
     rescue?: FormRescueDefinition | null;
+    /**
+     * How the card is drawn.
+     *
+     * `'card'` (default, unchanged): the scheduler card - context panel beside
+     * (or over) the calendar, as every page embed has it.
+     * `'modal'`: the onboarding "Book an Onboarding Call" window: the host strip
+     * with the length on its right, the timezone row, then the calendar beside
+     * a single column of times, and Continue in a footer under the card (with
+     * Cancel beside it on a phone, where the window has no X). A time is
+     * CHOSEN, not submitted: Continue moves to the details form. Opt-in, so
+     * every existing embed keeps the card byte for byte; `details-first` has
+     * no modal arrangement and ignores it.
+     */
+    layout?: SchedulerLayout;
 }
+export type SchedulerLayout = 'card' | 'modal';
 type Step = 'slot' | 'details' | 'confirmed';
 /** `onStageChange`'s value: a step, or the degraded box that replaces the flow. */
 export type SchedulerStage = Step | 'unavailable';
@@ -174,7 +189,7 @@ export declare function SchedulerDegradedCard({ flow, className, message, action
     action?: ReactNode;
     children?: ReactNode;
 }): import("react").JSX.Element;
-export declare function HubSpotMeetingScheduler({ meetingId, apiBaseUrl, initialAvailability, title, description, hosts, displayTimezone, fallbackUrl, onBack, onBooked, onStageChange, className, flow, detailsForm: DetailsForm, detailsFormProps, rescue, }: HubSpotMeetingSchedulerProps): import("react").JSX.Element;
+export declare function HubSpotMeetingScheduler({ meetingId, apiBaseUrl, initialAvailability, title, description, hosts, displayTimezone, fallbackUrl, onBack, onBooked, onStageChange, className, flow, detailsForm: DetailsForm, detailsFormProps, rescue, layout, }: HubSpotMeetingSchedulerProps): import("react").JSX.Element;
 export { BookingForm, BookingFormSkeleton, type BookingFormProps, type BookingFieldRow, type BookingFieldSlot, type BookingFieldCopy, type BookingFormConsent, } from './booking-form';
 export { MeetingSchedulerDirectory, MeetingSchedulerDirectoryRowSkeleton, type MeetingSchedulerDirectoryProps, } from './directory';
 export type { MeetingAvailability, BookingConfirmation, MeetingBookingErrorCode, MeetingHost };

package/dist/components/meeting-scheduler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/meeting-scheduler/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useIsHydrated } from "../../hooks/ui/use-is-hydrated.js";
 import { completeFormRescue } from "../../hooks/use-form-rescue.js";
 import { useHumanitySignals } from "../../hooks/use-humanity-signals.js";
@@ -12,10 +12,16 @@ import {
 import { cn } from "../../utils/cn.js";
 import { FORM_RESCUE_ATTEMPT_FIELD } from "../../utils/form-rescue.js";
 import { formatDurationCompact, formatDateWithTimezone } from "../../utils/format.js";
+import { BackButton } from "../layout/back-button.js";
 import { Alert, AlertDescription, Button } from "../ui/index.js";
-import { BookingForm, BookingFormSkeleton, DEFAULT_SUBMIT_LABEL } from "./booking-form.js";
+import {
+  BookingForm,
+  BookingFormSkeleton,
+  DEFAULT_SUBMIT_LABEL
+} from "./booking-form.js";
 import { Confirmation } from "./confirmation.js";
 import { SchedulerContextPanel, ContextPanelSkeleton } from "./context-panel.js";
+import { SchedulerModalHeader, SchedulerModalHeaderSkeleton } from "./modal-header.js";
 import { SlotPicker, SlotPickerSkeleton, dayKeyInZone } from "./slot-picker.js";
 const BOOKING_ERROR_COPY = {
   INVALID_EMAIL: "That email address was rejected by our scheduling system \u2014 please use a real, reachable address (work email works best).",
@@ -74,6 +80,18 @@ function isNativelyBookable(availability) {
   }
   return true;
 }
+const MODAL_STACK_CLASS = "flex flex-col gap-[var(--spacing-system-l)]";
+const MODAL_CARD_CLASS = "flex flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card";
+const MODAL_STEP_CLASS = "flex flex-col p-[var(--spacing-system-m)]";
+const NOOP = () => void 0;
+const MODAL_FIELD_ROWS = [[{ name: "firstName" }, { name: "lastName" }], [{ name: "email" }]];
+const MODAL_PRIMARY_CLASS = "flex-1 content-md:min-w-[15.5rem] content-md:flex-none";
+function ModalFooter({ onCancel, primary }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--spacing-system-l)] content-md:justify-end", children: [
+    onCancel && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onCancel, className: "flex-1 content-md:hidden", children: "Cancel" }),
+    primary
+  ] });
+}
 function HubSpotMeetingScheduler({
   meetingId,
   apiBaseUrl = "",
@@ -90,7 +108,8 @@ function HubSpotMeetingScheduler({
   flow = DEFAULT_SCHEDULER_FLOW,
   detailsForm: DetailsForm = BookingForm,
   detailsFormProps,
-  rescue = null
+  rescue = null,
+  layout = "card"
 }) {
   const {
     availability,
@@ -104,6 +123,9 @@ function HubSpotMeetingScheduler({
     isSubmitting
   } = useMeetingBooking({ meetingId, apiBaseUrl, initialAvailability });
   const detailsFirst = flow === "details-first";
+  const modal = layout === "modal" && !detailsFirst;
+  const modalFormId = useId();
+  const [modalFormValid, setModalFormValid] = useState(false);
   const hydrated = useIsHydrated();
   const [pickedTimezone, setTimezone] = useState(null);
   const resolvedLocalTimezone = useMemo(() => {
@@ -254,6 +276,21 @@ function HubSpotMeetingScheduler({
   const stepPanelClass = cn(STEP_PANEL_CLASS, detailsFirst && boxed && "min-h-0 overflow-y-auto");
   const degraded = (message) => /* @__PURE__ */ jsx(SchedulerDegradedCard, { flow, className, message, action: escapeHatch });
   const degradedCard = degraded("We couldn't load available call times. Please try again shortly.");
+  if (modal && isLoadingAvailability && !availability) {
+    return /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STACK_CLASS, className), children: [
+      /* @__PURE__ */ jsxs("div", { className: MODAL_CARD_CLASS, children: [
+        /* @__PURE__ */ jsx(SchedulerModalHeaderSkeleton, {}),
+        /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset, layout: "modal" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ModalFooter,
+        {
+          onCancel: onBack,
+          primary: /* @__PURE__ */ jsx(Button, { disabled: true, onClick: NOOP, className: MODAL_PRIMARY_CLASS, children: "Continue" })
+        }
+      )
+    ] });
+  }
   if (isLoadingAvailability && !availability) {
     return /* @__PURE__ */ jsx("div", { className: cardClass, children: /* @__PURE__ */ jsxs("div", { className: innerClass, children: [
       !formOnly && /* @__PURE__ */ jsx(ContextPanelSkeleton, { onBack: backEdge, className: CONTEXT_PANEL_CLASS }),
@@ -275,6 +312,121 @@ function HubSpotMeetingScheduler({
   if (!isNativelyBookable(availability)) {
     return degraded("This meeting type is booked directly on HubSpot.");
   }
+  if (modal) {
+    const modalBack = step === "details" ? backToSlot : onBack;
+    const onSelectDuration = (ms) => {
+      setDurationMs(ms);
+      setSelectedDay(null);
+      setSelectedSlot(null);
+    };
+    const summary = selectedSlot != null && durationMs != null && timezone != null ? `${formatDateWithTimezone(selectedSlot, timezone, "weekdayDateTimeZoned", { viewerLocale: true })} \xB7 ${formatDurationCompact(durationMs / 1e3)}` : null;
+    return /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STACK_CLASS, className), children: [
+      /* @__PURE__ */ jsxs("div", { className: MODAL_CARD_CLASS, children: [
+        modalBack && /* @__PURE__ */ jsx(
+          BackButton,
+          {
+            onClick: modalBack,
+            className: cn(
+              "px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]",
+              step === "slot" && "content-md:hidden"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SchedulerModalHeader,
+          {
+            hosts: shownHosts,
+            durationsMs: durations,
+            selectedDurationMs: durationMs,
+            onSelectDuration,
+            timezone,
+            onTimezoneChange: setTimezone,
+            locked: step !== "slot",
+            showTimezone: step === "slot"
+          }
+        ),
+        step === "confirmed" && confirmation && timezone ? /* @__PURE__ */ jsx("div", { className: MODAL_STEP_CLASS, children: /* @__PURE__ */ jsx(Confirmation, { confirmation, timezone }) }) : step === "details" && durationMs != null && selectedSlot != null && timezone ? /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STEP_CLASS, "gap-[var(--spacing-system-m)]"), children: [
+          summary && /* @__PURE__ */ jsx("p", { className: "text-ods-text-primary text-h4", children: summary }),
+          /* @__PURE__ */ jsx(
+            DetailsForm,
+            {
+              fieldRows: MODAL_FIELD_ROWS,
+              ...detailsFormProps,
+              availability,
+              meetingId,
+              startTimeMs: selectedSlot,
+              durationMs,
+              timezone,
+              formId: modalFormId,
+              hideSubmit: true,
+              onValidityChange: setModalFormValid,
+              isSubmitting,
+              onSubmit: handleSubmit,
+              honeypotInputProps,
+              getSignals,
+              rescue
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          bookingError === "SLOT_TAKEN" && /* @__PURE__ */ jsx(Alert, { variant: "warning", className: "mx-[var(--spacing-system-m)] mt-[var(--spacing-system-m)] w-auto", children: /* @__PURE__ */ jsx(AlertDescription, { children: "That time was just taken \u2014 pick another slot below. (If you already submitted, check your email for a confirmation before rebooking.)" }) }),
+          timezone && durationMs != null ? /* @__PURE__ */ jsx(
+            SlotPicker,
+            {
+              layout: "modal",
+              slots,
+              timezone,
+              monthOffset,
+              onMonthOffsetChange: (o) => {
+                setSelectedDay(null);
+                setSelectedSlot(null);
+                setMonthOffset(o);
+              },
+              selectedSlot,
+              onSelectSlot: setSelectedSlot,
+              selectedDay,
+              onSelectDay: setSelectedDay,
+              isLoading: isLoadingAvailability
+            }
+          ) : durations.length === 0 && !isFetchingAvailability ? /* @__PURE__ */ jsxs("div", { className: cn(MODAL_STEP_CLASS, "items-start gap-[var(--spacing-system-m)]"), children: [
+            /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h6", children: "No call times are published right now." }),
+            escapeHatch
+          ] }) : /* @__PURE__ */ jsx(SlotPickerSkeleton, { monthOffset, layout: "modal" })
+        ] })
+      ] }),
+      step === "slot" && /* @__PURE__ */ jsx(
+        ModalFooter,
+        {
+          onCancel: onBack,
+          primary: /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: selectedSlot == null || durationMs == null,
+              onClick: () => setStep("details"),
+              className: MODAL_PRIMARY_CLASS,
+              children: "Continue"
+            }
+          )
+        }
+      ),
+      step === "details" && /* @__PURE__ */ jsx(
+        ModalFooter,
+        {
+          onCancel: onBack,
+          primary: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              form: modalFormId,
+              loading: isSubmitting,
+              disabled: isSubmitting || !modalFormValid,
+              className: MODAL_PRIMARY_CLASS,
+              children: preset.submitLabel
+            }
+          )
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx("div", { className: cardClass, children: /* @__PURE__ */ jsxs("div", { className: innerClass, children: [
     !formOnly && /* @__PURE__ */ jsx(
       SchedulerContextPanel,
@@ -362,7 +514,7 @@ function HubSpotMeetingScheduler({
             onSelectSlot: (ms) => {
               if (!detailsFirst) {
                 setSelectedSlot(ms);
-                setStep("details");
+                if (!modal) setStep("details");
                 return;
               }
               if (postInFlight() || !stash) return;

package/dist/components/meeting-scheduler/modal-header.d.ts

@@ -0,0 +1,27 @@
+import type { MeetingHost } from '../../schemas/meeting-booking-schema';
+/**
+ * The head of the scheduler's MODAL layout: the host strip (who, and how long
+ * on its right - chips when the link offers several lengths, the length alone
+ * otherwise) and the timezone row under it, each cut off by a rule. The
+ * context panel's facts in the window's own arrangement: there is no side
+ * column in a 600px box, so the strip sits over the calendar and the zone
+ * picker spans the width above it, at every size.
+ */
+export interface SchedulerModalHeaderProps {
+    hosts: MeetingHost[];
+    durationsMs: number[];
+    selectedDurationMs: number | null;
+    onSelectDuration: (ms: number) => void;
+    /** Resolved IANA zone (null until the client resolves it). */
+    timezone: string | null;
+    onTimezoneChange?: (tz: string) => void;
+    /** A slot is chosen: the length is settled, the chips give way to the line. */
+    locked?: boolean;
+    disabled?: boolean;
+    /** Whether the timezone row renders (not on the confirmation). */
+    showTimezone?: boolean;
+}
+export declare function SchedulerModalHeader({ hosts, durationsMs, selectedDurationMs, onSelectDuration, timezone, onTimezoneChange, locked, disabled, showTimezone, }: SchedulerModalHeaderProps): import("react").JSX.Element;
+/** Same footprint as the loaded header, for the cold load. */
+export declare function SchedulerModalHeaderSkeleton(): import("react").JSX.Element;
+//# sourceMappingURL=modal-header.d.ts.map

package/dist/components/meeting-scheduler/modal-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-header.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/modal-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAMxE;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAqCD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,MAAc,EACd,QAAgB,EAChB,YAAmB,GACpB,EAAE,yBAAyB,+BA8C3B;AAED,8DAA8D;AAC9D,wBAAgB,4BAA4B,gCAmB3C"}

package/dist/components/meeting-scheduler/modal-header.js

@@ -0,0 +1,104 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { formatDurationCompact } from "../../utils/format.js";
+import { SquareAvatar, AvatarStack, Button, Skeleton } from "../ui/index.js";
+import { TimezoneSelect } from "../ui/timezone-select.js";
+const ROW_CLASS = "border-b border-ods-border p-[var(--spacing-system-m)]";
+const STRIP_CLASS = cn(ROW_CLASS, "flex items-center justify-between gap-[var(--spacing-system-m)]");
+const FIELD_LABEL_CLASS = "text-h4 text-ods-text-primary";
+function HostIdentity({ hosts }) {
+  if (hosts.length === 0) return null;
+  if (hosts.length > 3) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+      /* @__PURE__ */ jsx(AvatarStack, { people: hosts, max: 4, size: "lg", label: "Hosts" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-ods-text-secondary text-h6", children: [
+        hosts.length,
+        " hosts on this calendar"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-s)]", children: hosts.map((host) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+    /* @__PURE__ */ jsx(
+      SquareAvatar,
+      {
+        variant: "round",
+        size: "sm",
+        src: host.avatarUrl ?? void 0,
+        alt: host.name,
+        fallback: host.name
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", children: host.name }),
+      host.title && /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h6", children: host.title })
+    ] })
+  ] }, host.name)) });
+}
+function SchedulerModalHeader({
+  hosts,
+  durationsMs,
+  selectedDurationMs,
+  onSelectDuration,
+  timezone,
+  onTimezoneChange,
+  locked = false,
+  disabled = false,
+  showTimezone = true
+}) {
+  const chips = !locked && durationsMs.length > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: STRIP_CLASS, children: [
+      /* @__PURE__ */ jsx(HostIdentity, { hosts }),
+      chips ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap justify-end gap-[var(--spacing-system-xs)]", children: durationsMs.map((ms) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: selectedDurationMs === ms ? void 0 : "outline",
+          size: "small-legacy",
+          disabled,
+          onClick: () => onSelectDuration(ms),
+          children: formatDurationCompact(ms / 1e3)
+        },
+        ms
+      )) }) : selectedDurationMs != null && /* @__PURE__ */ jsxs("p", { className: "shrink-0 text-ods-text-secondary text-h6", children: [
+        formatDurationCompact(selectedDurationMs / 1e3),
+        " call"
+      ] })
+    ] }),
+    showTimezone && /* @__PURE__ */ jsxs("div", { className: cn(ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+      /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
+      timezone ? /* @__PURE__ */ jsx(
+        TimezoneSelect,
+        {
+          value: timezone,
+          disabled,
+          onChange: (tz) => {
+            if (tz) onTimezoneChange?.(tz);
+          }
+        }
+      ) : /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
+    ] })
+  ] });
+}
+function SchedulerModalHeaderSkeleton() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: STRIP_CLASS, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 shrink-0" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn(ROW_CLASS, "flex flex-col gap-[var(--spacing-system-xxs)]"), children: [
+      /* @__PURE__ */ jsx("p", { className: FIELD_LABEL_CLASS, children: "Timezone" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" })
+    ] })
+  ] });
+}
+export {
+  SchedulerModalHeader,
+  SchedulerModalHeaderSkeleton
+};

package/dist/components/meeting-scheduler/slot-picker.d.ts

@@ -34,9 +34,19 @@
  * (resolved by the parent AFTER mount — this component never reads Intl
  * itself, keeping SSR output deterministic).
  */
+/**
+ * How the two columns sit. `card` is the scheduler card's own (the module
+ * docblock). `modal` is the onboarding "Book an Onboarding Call" window: a
+ * 600px box where the calendar keeps its width and the times run down ONE
+ * column beside it, scrolling inside the calendar's height - on a phone the
+ * times are four across, as that design draws them.
+ */
+export type SlotPickerLayout = 'card' | 'modal';
 export interface SlotPickerProps {
     /** Bookable slot start times (epoch ms) for the selected duration. */
     slots: number[];
+    /** Column layout; `card` unless the host says otherwise. */
+    layout?: SlotPickerLayout;
     /** IANA zone every label renders in (parent resolves post-mount). */
     timezone: string;
     monthOffset: number;
@@ -72,10 +82,11 @@ export declare function monthLabelFor(offset: number): string;
  * the times column is a skeleton, and it is the same one the loaded picker
  * shows while a month loads, so there is no swap between the two.
  */
-export declare function SlotPickerSkeleton({ monthOffset }: {
+export declare function SlotPickerSkeleton({ monthOffset, layout, }: {
     monthOffset?: number;
+    layout?: SlotPickerLayout;
 }): import("react").JSX.Element;
 /** Same-footprint skeleton for the time-chip column. */
 export declare function TimeChipsSkeleton(): import("react").JSX.Element;
-export declare function SlotPicker({ slots, timezone, monthOffset, onMonthOffsetChange, selectedSlot, onSelectSlot, selectedDay, onSelectDay, isLoading, isSubmitting, }: SlotPickerProps): import("react").JSX.Element;
+export declare function SlotPicker({ slots, layout, timezone, monthOffset, onMonthOffsetChange, selectedSlot, onSelectSlot, selectedDay, onSelectDay, isLoading, isSubmitting, }: SlotPickerProps): import("react").JSX.Element;
 //# sourceMappingURL=slot-picker.d.ts.map

package/dist/components/meeting-scheduler/slot-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-picker.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/slot-picker.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;8DAC8D;AAC9D,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIjE;AA6CD;yDACyD;AACzD,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AAwFxD;kEACkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAIpD;AAgED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,WAAe,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,+BAmB/E;AAED,wDAAwD;AACxD,wBAAgB,iBAAiB,gCAmBhC;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAiB,EACjB,YAAoB,GACrB,EAAE,eAAe,+BAgGjB"}
+{"version":3,"file":"slot-picker.d.ts","sourceRoot":"","sources":["../../../src/components/meeting-scheduler/slot-picker.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;8DAC8D;AAC9D,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAIjE;AA6CD;yDACyD;AACzD,eAAO,MAAM,mBAAmB,uBAAuB,CAAC;AA4GxD;kEACkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAIpD;AAgED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAe,EACf,MAAe,GAChB,EAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,+BAgCA;AAED,wDAAwD;AACxD,wBAAgB,iBAAiB,gCAmBhC;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAe,EACf,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,SAAiB,EACjB,YAAoB,GACrB,EAAE,eAAe,+BA6GjB"}