@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/app/LightboxExperience.js

@@ -0,0 +1,769 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { compat_module_P, compat_module_z, hooks_module_y, signals_core_module_d, useComputed, hooks_module_d, jsxRuntime_module_u, signals_core_module_E, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { CrossIcon, ClockIcon, CheckCircleIcon, GlobeIcon } from "../../images/icons.js";
+import "../../styled-system/css/index.js";
+import { MeetingRepHeader } from "../meetings/MeetingRepHeader.js";
+import { formatTimeShort, formatDate } from "../meetings/utils.js";
+import { CalendarLoadingContent, loadingContentStyle } from "./CalendarLoadingContent.js";
+import "../../../utils/native_globals.js";
+import { MEETING_LOADING_ROTATING_WIDGET_KEYS } from "../../../../components/shared/meetingLoadingProgressSpec.js";
+import { cx } from "../../styled-system/css/cx.js";
+import { css as css_css } from "../../styled-system/css/css.js";
+
+/* provided dependency */ var LightboxExperience_clearTimeout = __webpack_require__(68034).Kj;
+/* provided dependency */ var LightboxExperience_setTimeout = __webpack_require__(68034).pS;
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+
+const LightboxGather = compat_module_z(()=>import("../lightbox_gather/index.js"));
+const LOCAL_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone.replace(/_/g, " ");
+function maskEmail(visitorEmail) {
+    const atIndex = visitorEmail.indexOf("@");
+    if (atIndex <= 0 || atIndex === visitorEmail.length - 1) {
+        return visitorEmail;
+    }
+    const email = visitorEmail.slice(0, atIndex);
+    const domain = visitorEmail.slice(atIndex + 1);
+    let maskedEmail = email[0] + "*".repeat(email.length - 1);
+    if (maskedEmail.length > 2) {
+        maskedEmail = maskedEmail.slice(0, email.length - 1) + email[email.length - 1];
+    }
+    return maskedEmail + "@" + domain;
+}
+const MeetingBooker = compat_module_z(()=>import("../meetings/index.js"));
+/**
+ * Drives one loading -> reveal transition: as soon as the data is ready, keeps
+ * the loading UI mounted (via `holding`) for `COMPLETION_HOLD_MS` — the fill's
+ * CSS transition plus a short dwell so the completed bar is visibly held —
+ * while `snapping` drives the CSS transition to 100%, then `holding` clears
+ * and the real content reveals. Without this, a fast response could unmount
+ * the loading UI while the bar was still mid-animation (or the instant it
+ * reached 100%) instead of ever visibly showing "done". How far the bar has
+ * visibly climbed by the time this fires is governed by the progress curve
+ * itself ({@link interpolateProgress}) — not by anything here. Mirrors
+ * StandaloneMeetingBooker's useLoadingCompletion: no artificial minimum wait
+ * before a completion signal is honored.
+ */ function useLoadingHold(isLoading, isReady) {
+    const [holding, setHolding] = hooks_module_d(false);
+    const [snapping, setSnapping] = hooks_module_d(false);
+    const wasLoadingRef = hooks_module_A(false);
+    const readyFiredRef = hooks_module_A(false);
+    const revealTimerRef = hooks_module_A(undefined);
+    /* eslint-disable react-hooks/exhaustive-deps */ // effect() from @preact/signals handles its own reactivity; empty deps array is intentional.
+    hooks_module_y(()=>{
+        const dispose = signals_core_module_E(()=>{
+            // Re-arm on each new loading phase so a later transition (e.g. a
+            // follow-up gather step) also holds.
+            if (isLoading()) {
+                wasLoadingRef.current = true;
+                readyFiredRef.current = false;
+            }
+            if (isReady() && wasLoadingRef.current && !readyFiredRef.current) {
+                readyFiredRef.current = true;
+                wasLoadingRef.current = false;
+                setHolding(true);
+                setSnapping(true);
+                // Guards against a stale pending timer from a previous hold cycle
+                // (e.g. a follow-up gather/offer transition) firing mid-way through
+                // this new cycle and cutting its hold short.
+                LightboxExperience_clearTimeout(revealTimerRef.current);
+                revealTimerRef.current = LightboxExperience_setTimeout(()=>{
+                    setSnapping(false);
+                    setHolding(false);
+                }, (/* inlined export .COMPLETION_HOLD_MS */400));
+            }
+        });
+        return ()=>{
+            dispose();
+            LightboxExperience_clearTimeout(revealTimerRef.current);
+        };
+    }, []);
+    /* eslint-enable react-hooks/exhaustive-deps */ return {
+        holding,
+        snapping
+    };
+}
+/**
+ * LightboxExperience renders a fullscreen overlay that covers the entire viewport,
+ * including the messenger. Used for two element-conversation flows:
+ *
+ * 1. Gather phase: smart button → initElementConversation → shows LightboxGather form
+ * 2. Meeting phase: smart form → initQualifiedFormElementConversation → shows MeetingBooker
+ *
+ * This is separate from the normal messenger meeting booker, which renders for
+ * calendar_event_offer messages either inline in the chat timeline or in the
+ * artifact overlay (see MeetingBookerEntry / ArtifactEntryPoint).
+ *
+ * The same component is reused inline via `variant="container"` to render a manual
+ * experience's meeting booker into a page container div instead of the overlay.
+ */ const LightboxExperience = (param)=>{
+    let { rootStore, variant = "lightbox" } = param;
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+    var _rootStore_meetingStore_value, _elementConversationOffer_value, _elementConversationTextMessage_value, _elementConversationTextMessage_value1, _elementConversationTextMessage_value2, _rootStore_meetingStore_value1, _rootStore_meetingStore_value2, _rootStore_meetingStore_value3, _elementConversationTextMessage_value3, _elementConversationTextMessage_value4;
+    const isContainer = variant === "container";
+    // When the booker is being routed into a container, the default full-screen
+    // instance (variant="lightbox", rendered in AppLayout) suppresses itself so
+    // the same element-conversation offer only surfaces inside the container.
+    const suppressedByContainer = useComputed(()=>!isContainer && rootStore.inlineMeetingBookerActive.value);
+    const elementConversation = useComputed(()=>rootStore.elementConversation.value);
+    const elementConversationOffer = useComputed(()=>rootStore.elementConversationOffer.value);
+    const elementConversationLoading = useComputed(()=>rootStore.elementConversationLoading.value);
+    const elementConversationTextMessage = useComputed(()=>rootStore.elementConversationTextMessage.value);
+    // The booker is rendered from a lazily-loaded store + code-split component
+    // chunk — two separate lazy imports. Until the store has loaded and produced
+    // an active offer, <MeetingBooker> renders nothing, so the offer arriving is
+    // not enough to actually show the calendar.
+    const meetingStoreReady = useComputed(()=>{
+        var _rootStore_meetingStore_value;
+        return ((_rootStore_meetingStore_value = rootStore.meetingStore.value) == null ? void 0 : _rootStore_meetingStore_value.activeOfferMessage.value) != null;
+    });
+    // Whether the <MeetingBooker> component chunk itself (rendered inside a
+    // Suspense boundary below) has finished loading. Without tracking this
+    // separately, the bar could snap to 100% on meetingStoreReady alone, reveal
+    // isMeetingPhase, and immediately fall into the Suspense fallback — a second,
+    // independent loading spinner — while the component chunk still loads.
+    //
+    // This is a signal, not useState: useLoadingHold's effect() is set up once
+    // (empty deps) and keeps the isReady/isLoading closures from that first call
+    // forever. A plain boolean captured by value in those closures would freeze
+    // at whatever it was on mount; reading `.value` off a stable signal instead
+    // always resolves to the current value, regardless of closure age.
+    const meetingChunkReadySignal = hooks_module_A(signals_core_module_d(false)).current;
+    const bookerReady = useComputed(()=>meetingStoreReady.value && meetingChunkReadySignal.value);
+    // Holds the loading UI visible after the offer arrives, and doesn't let the
+    // bar snap to 100% until the booker is fully ready to render — otherwise the
+    // bar would show "done" while the visitor is still staring at a spinner
+    // waiting on the code-split import.
+    const { holding: completing, snapping: snappingToOffer } = useLoadingHold(()=>elementConversationLoading.value, ()=>elementConversationOffer.value !== null && bookerReady.value);
+    // Same hold, for the earlier loading -> gather transition (initElementConversation
+    // arriving with a lightbox_gather message). Without this, a fast response snapped
+    // the spinner away mid-animation instead of letting the bar reach 100% first.
+    const { holding: gatherCompleting, snapping: snappingToGather } = useLoadingHold(()=>elementConversationLoading.value, ()=>elementConversation.value !== null);
+    // Reading t() during render subscribes to the active-locale signal so the
+    // rotating messages re-localize with the conversation/browser locale.
+    const loadingMessages = MEETING_LOADING_ROTATING_WIDGET_KEYS.map((key)=>rootStore.translationStore.t(key));
+    // Not "ready" while gatherCompleting so the progress bar can animate to 100% first.
+    const isGatherPhase = elementConversation.value !== null && !gatherCompleting;
+    const hasOffer = !isGatherPhase && elementConversationOffer.value !== null;
+    // Not "ready" while completing so the progress bar can animate to 100% first.
+    const isMeetingPhase = hasOffer && bookerReady.value && !completing;
+    // Hold the loading spinner while an offer exists but the booker store is still
+    // resolving, and during the brief completion window so the bar can fill to 100%
+    // before the booker appears. Dismissing it the instant the offer arrived left the
+    // visitor on a blank screen for the duration of the lazy load, prompting them to
+    // click away.
+    const isLoadingPhase = !isGatherPhase && !isMeetingPhase && (elementConversationLoading.value || hasOffer || completing && elementConversationOffer.value !== null || gatherCompleting && elementConversation.value !== null);
+    const isTextPhase = !isGatherPhase && !isLoadingPhase && !isMeetingPhase && elementConversationTextMessage.value !== null;
+    // Warm the booker store and code-split chunk while the spinner is up so the
+    // download overlaps the server preparing the offer instead of starting only
+    // once it arrives. Both imports are idempotent; the dynamic import resolves
+    // instantly on repeat calls once the chunk is cached.
+    hooks_module_y(()=>{
+        if (isLoadingPhase) {
+            rootStore.meetingStore.load();
+            void import("../meetings/index.js").then(()=>{
+                meetingChunkReadySignal.value = true;
+            });
+        }
+    // meetingChunkReadySignal is a stable ref (useRef), never changes identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isLoadingPhase,
+        rootStore
+    ]);
+    if (suppressedByContainer.value) return null;
+    if (!isGatherPhase && !isLoadingPhase && !isMeetingPhase && !isTextPhase) return null;
+    const handleClose = ()=>{
+        if (hasOffer) {
+            // Meeting phase: clear both the offer and the backend text confirmation
+            // message. The text message (calendar_event_confirmation) is suppressed here
+            // because we already rendered our own confirmation UI (LightboxBookingConfirmed).
+            rootStore.clearInputMessage();
+        }
+        // Reset all lightbox element-conversation state so stale gather/loading/offer
+        // signals cannot keep the overlay mounted after the user closes it.
+        rootStore.clearElementConversationState();
+        rootStore.closeLightbox();
+    };
+    const handleNotYou = ()=>{
+        rootStore.restoreGatherFromOffer();
+    };
+    // Reading .value during render subscribes this component to the signal.
+    const booked = (_ref = (_rootStore_meetingStore_value = rootStore.meetingStore.value) == null ? void 0 : _rootStore_meetingStore_value.booked.value) != null ? _ref : false;
+    // Content-card sizing: the container variant fills its host; otherwise the
+    // card is sized to the current phase.
+    const contentSizeStyle = isContainer ? containerContentStyle : phaseWidthStyle({
+        isGatherPhase,
+        isLoadingPhase,
+        isTextPhase
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        className: cx(overlayStyle, isContainer && containerOverlayStyle),
+        "data-component-name": "LightboxExperience.Overlay",
+        children: /*#__PURE__*/ jsxRuntime_module_u("div", {
+            className: cx(lightboxCardStyle, contentSizeStyle),
+            "data-component-name": "LightboxExperience.Content",
+            children: [
+                isMeetingPhase && !(isContainer && booked) && ((_elementConversationOffer_value = elementConversationOffer.value) == null ? void 0 : _elementConversationOffer_value.calendarEventInviteEmail) && /*#__PURE__*/ jsxRuntime_module_u("div", {
+                    className: inviteBannerStyle,
+                    "data-component-name": "LightboxExperience.InviteBanner",
+                    children: /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: inviteBannerTextStyle,
+                        children: [
+                            "Invite will be sent to",
+                            " ",
+                            /*#__PURE__*/ jsxRuntime_module_u("strong", {
+                                children: maskEmail(elementConversationOffer.value.calendarEventInviteEmail)
+                            }),
+                            ".",
+                            " ",
+                            /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                className: notYouButtonStyle,
+                                onClick: handleNotYou,
+                                "data-component-name": "LightboxExperience.NotYouButton",
+                                children: "Not you?"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u("div", {
+                    className: contentBodyStyle,
+                    "data-component-name": "LightboxExperience.ContentBody",
+                    children: [
+                        !isContainer && /*#__PURE__*/ jsxRuntime_module_u("button", {
+                            className: closeButtonStyle,
+                            onClick: handleClose,
+                            "aria-label": "Close",
+                            "data-component-name": "LightboxExperience.CloseButton",
+                            children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                        }),
+                        isLoadingPhase ? /*#__PURE__*/ jsxRuntime_module_u(CalendarLoadingContent, {
+                            completing: snappingToOffer || snappingToGather,
+                            messages: loadingMessages
+                        }) : isTextPhase ? /*#__PURE__*/ jsxRuntime_module_u("div", {
+                            className: loadingContentStyle,
+                            "data-component-name": "LightboxExperience.TextMessage",
+                            children: [
+                                ((_elementConversationTextMessage_value = elementConversationTextMessage.value) == null ? void 0 : _elementConversationTextMessage_value.title) && /*#__PURE__*/ jsxRuntime_module_u("h2", {
+                                    className: meetingTitleStyle,
+                                    "data-component-name": "LightboxExperience.TextTitle",
+                                    children: elementConversationTextMessage.value.title
+                                }),
+                                ((_elementConversationTextMessage_value1 = elementConversationTextMessage.value) == null ? void 0 : _elementConversationTextMessage_value1.text) && /*#__PURE__*/ jsxRuntime_module_u("p", {
+                                    "data-component-name": "LightboxExperience.TextSubtitle",
+                                    children: elementConversationTextMessage.value.text
+                                }),
+                                /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                    className: closeButtonStyle,
+                                    onClick: handleClose,
+                                    "data-component-name": "LightboxExperience.TextDoneButton",
+                                    children: (_ref1 = (_elementConversationTextMessage_value2 = elementConversationTextMessage.value) == null ? void 0 : _elementConversationTextMessage_value2.buttonText) != null ? _ref1 : "Done"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxRuntime_module_u(compat_module_P, {
+                            fallback: isGatherPhase ? null : /*#__PURE__*/ jsxRuntime_module_u(CalendarLoadingContent, {
+                                messages: loadingMessages
+                            }),
+                            children: isGatherPhase ? /*#__PURE__*/ jsxRuntime_module_u(LightboxGather, {
+                                rootStore: rootStore
+                            }) : /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                className: lightboxMeetingLayoutStyle,
+                                style: booked && !isContainer ? {
+                                    alignItems: "center"
+                                } : undefined,
+                                "data-component-name": "LightboxExperience.MeetingLayout",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime_module_u(LightboxMeetingInfo, {
+                                        offer: elementConversationOffer.value,
+                                        t: rootStore.translationStore.t,
+                                        booked: booked,
+                                        container: isContainer
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                        className: lightboxMeetingDividerStyle,
+                                        "data-component-name": "LightboxExperience.Divider",
+                                        "aria-hidden": "true"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                        className: lightboxMeetingCalendarStyle,
+                                        "data-component-name": "LightboxExperience.MeetingCalendar",
+                                        children: booked ? /*#__PURE__*/ jsxRuntime_module_u(LightboxBookingConfirmed, {
+                                            email: (_ref2 = (_rootStore_meetingStore_value1 = rootStore.meetingStore.value) == null ? void 0 : _rootStore_meetingStore_value1.bookedEmail.value) != null ? _ref2 : null,
+                                            timeSlot: (_ref3 = (_rootStore_meetingStore_value2 = rootStore.meetingStore.value) == null ? void 0 : _rootStore_meetingStore_value2.bookedTimeSlot.value) != null ? _ref3 : null,
+                                            timeZone: (_ref4 = (_rootStore_meetingStore_value3 = rootStore.meetingStore.value) == null ? void 0 : _rootStore_meetingStore_value3.timeZone.value) != null ? _ref4 : LOCAL_TIMEZONE,
+                                            locale: rootStore.translationStore.effectiveLocale.value,
+                                            title: (_ref5 = (_elementConversationTextMessage_value3 = elementConversationTextMessage.value) == null ? void 0 : _elementConversationTextMessage_value3.title) != null ? _ref5 : "Your meeting has been scheduled",
+                                            text: (_ref6 = (_elementConversationTextMessage_value4 = elementConversationTextMessage.value) == null ? void 0 : _elementConversationTextMessage_value4.text) != null ? _ref6 : null,
+                                            container: isContainer
+                                        }) : /*#__PURE__*/ jsxRuntime_module_u(MeetingBooker, {
+                                            rootStore: rootStore,
+                                            context: "lightbox",
+                                            closeOnBooked: false
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const LightboxMeetingInfo = (param)=>{
+    let { offer, t, booked = false, container = false } = param;
+    var _ref, _offer_title, _offer_subtitle;
+    // Prefer the experience-level title, fall back to the calendar event type name.
+    const title = (_ref = (_offer_title = offer.title) != null ? _offer_title : offer.calendarEventTitle) != null ? _ref : null;
+    const subtitle = (_offer_subtitle = offer.subtitle) != null ? _offer_subtitle : null;
+    const durationMinutes = offer.calendarEventTypeDuration ? Math.round(offer.calendarEventTypeDuration / 60) : null;
+    const timeZone = LOCAL_TIMEZONE;
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        className: cx(meetingInfoStyle, booked && !container && meetingInfoBookedStyle),
+        "data-component-name": "LightboxExperience.MeetingInfo",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(MeetingRepHeader, {
+                message: offer,
+                t: t,
+                variant: booked ? "confirmation" : "lightbox"
+            }),
+            !booked && title && /*#__PURE__*/ jsxRuntime_module_u("h2", {
+                className: meetingTitleStyle,
+                children: title
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("div", {
+                className: cx(meetingMetaStyle, booked && !container && meetingMetaCenteredStyle),
+                "data-component-name": "LightboxExperience.MeetingMeta",
+                children: [
+                    durationMinutes && /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: metaItemStyle,
+                        "data-component-name": "LightboxExperience.Duration",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: metaIconStyle,
+                                children: /*#__PURE__*/ jsxRuntime_module_u(ClockIcon, {})
+                            }),
+                            durationMinutes,
+                            " minutes"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: metaItemStyle,
+                        "data-component-name": "LightboxExperience.Timezone",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: metaIconStyle,
+                                children: /*#__PURE__*/ jsxRuntime_module_u(GlobeIcon, {})
+                            }),
+                            timeZone
+                        ]
+                    })
+                ]
+            }),
+            !booked && subtitle && /*#__PURE__*/ jsxRuntime_module_u("p", {
+                className: meetingSubtitleStyle,
+                children: subtitle
+            })
+        ]
+    });
+};
+const LightboxBookingConfirmed = (param)=>{
+    let { email, timeSlot, timeZone, locale, title, text, container = false } = param;
+    const timeLabel = timeSlot ? formatTimeShort(timeSlot.startsAt, timeZone, locale) : null;
+    const dateLabel = timeSlot ? formatDate(timeSlot.startsAt, timeZone, locale) : null;
+    const timeZoneLabel = timeZone.replace(/_/g, " ");
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        className: confirmedContainerStyle,
+        "data-component-name": "LightboxBookingConfirmed.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("h3", {
+                className: confirmedHeadingStyle,
+                children: "Meeting info"
+            }),
+            timeSlot && /*#__PURE__*/ jsxRuntime_module_u("div", {
+                className: confirmedTimeDateStyle,
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        className: confirmedColumnStyle,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: confirmedLabelStyle,
+                                children: "Time"
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: confirmedValueStyle,
+                                children: timeLabel
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: confirmedTimeZoneStyle,
+                                children: timeZoneLabel
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        className: confirmedColumnStyle,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: confirmedLabelStyle,
+                                children: "Date"
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: confirmedValueStyle,
+                                children: dateLabel
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("div", {
+                className: cx(confirmedCardStyle, container && confirmedCardLeftStyle),
+                "data-component-name": "LightboxBookingConfirmed.Card",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: confirmedIconStyle,
+                        children: /*#__PURE__*/ jsxRuntime_module_u(CheckCircleIcon, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("p", {
+                        className: confirmedTextStyle,
+                        children: title
+                    }),
+                    text && /*#__PURE__*/ jsxRuntime_module_u("p", {
+                        className: confirmedBodyStyle,
+                        children: text
+                    }),
+                    email && /*#__PURE__*/ jsxRuntime_module_u("p", {
+                        className: confirmedEmailStyle,
+                        children: email
+                    })
+                ]
+            })
+        ]
+    });
+};
+const overlayStyle = css_css({
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "[rgba(0, 0, 0, 0.5)]",
+    zIndex: "[9998]"
+});
+/**
+ * The lightbox content card: white rounded panel with the lightbox drop shadow.
+ * Exported so other full-viewport surfaces (e.g. the meeting booker rendered as
+ * an artifact) get the same treatment without duplicating the CSS.
+ */ const lightboxCardStyle = css_css({
+    position: "relative",
+    backgroundColor: "[white]",
+    borderRadius: "[8px]",
+    maxHeight: "[min(700px,100vh)]",
+    overflowY: "auto",
+    boxShadow: "[0 20px 60px rgba(0,0,0,0.3)]",
+    display: "flex",
+    flexDirection: "column"
+});
+const contentBodyStyle = css_css({
+    position: "relative",
+    flex: "1"
+});
+const closeButtonStyle = css_css({
+    position: "absolute",
+    top: "[8px]",
+    right: "[8px]",
+    paddingBlock: "[6px]",
+    paddingInline: "[6px]",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "$transparent",
+    border: "none",
+    cursor: "pointer",
+    color: "[rgba(0,0,0,0.35)]",
+    borderRadius: "[4px]",
+    zIndex: "[1]",
+    "& svg": {
+        width: "[16px]",
+        height: "[16px]"
+    }
+});
+const gatherWidthStyle = css_css({
+    width: "[min(947px,96vw)]"
+});
+const lightboxMeetingWidthStyle = css_css({
+    width: "[min(860px,96vw)]"
+});
+const loadingWidthStyle = css_css({
+    width: "[min(320px,96vw)]"
+});
+// Content-card width for the non-container (full-screen) variant, by phase.
+function phaseWidthStyle(phase) {
+    if (phase.isGatherPhase) return gatherWidthStyle;
+    if (phase.isLoadingPhase || phase.isTextPhase) return loadingWidthStyle;
+    return lightboxMeetingWidthStyle;
+}
+// Container variant: render inline inside a page container div instead of as a
+// full-screen overlay. Overrides the fixed backdrop and viewport-relative widths
+// so the booker fills its container. Applied via cx() after the base styles, so
+// only the properties below are overridden.
+const containerOverlayStyle = css_css({
+    position: "static",
+    inset: "[auto]",
+    backgroundColor: "[transparent]",
+    width: "[100%]",
+    // Size to content (no fixed height / stretch) so the card wraps the booker
+    // instead of filling the viewport — lets the page container's margins show.
+    height: "[auto]",
+    alignItems: "flex-start",
+    // Reset text-align: inheritable CSS crosses the shadow boundary, so a host
+    // page with `text-align: center` (e.g. a landing page) would otherwise centre
+    // every booker text that doesn't set its own alignment.
+    textAlign: "left"
+});
+const containerContentStyle = css_css({
+    width: "[100%]",
+    maxHeight: "[none]",
+    // Card chrome for container mode: a subtle border but no shadow (there's no
+    // lightbox overlay to frame it). Base lightboxCardStyle carries a strong
+    // lightbox shadow, so it's explicitly cleared here.
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "$gray",
+    boxShadow: "[none]"
+});
+// Meeting phase: two-column layout (meeting info | divider | calendar).
+// Exported alongside lightboxCardStyle so the artifact-hosted booker renders the
+// same two-column lightbox layout.
+const lightboxMeetingLayoutStyle = css_css({
+    display: "flex",
+    flexDirection: "row",
+    paddingBlock: "[40px]",
+    paddingInline: "[48px]",
+    gap: "[32px]",
+    alignItems: "flex-start",
+    minHeight: "[500px]",
+    // On narrow viewports the fixed two-column layout overflows (the calendar gets
+    // cut off). Stack the meeting info above the calendar and drop the fixed
+    // min-height so the card sizes to content — this is the mobile booker layout.
+    // alignItems must flip to stretch: the base "flex-start" is cross-axis, so in a
+    // column it would let the calendar shrink to its content width and hug the left
+    // (leaving an empty band on the right); stretch makes each section fill the card.
+    _mobile: {
+        flexDirection: "column",
+        alignItems: "stretch",
+        paddingBlock: "[24px]",
+        paddingInline: "[20px]",
+        gap: "[20px]",
+        minHeight: "[auto]"
+    }
+});
+const meetingInfoStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "$md",
+    flex: "[0 0 220px]",
+    paddingTop: "[8px]",
+    // Full width when stacked on mobile instead of a fixed 220px side column.
+    _mobile: {
+        flex: "[1 1 auto]",
+        width: "[100%]",
+        paddingTop: "$none"
+    }
+});
+const meetingInfoBookedStyle = css_css({
+    paddingTop: "$none",
+    alignItems: "center"
+});
+const meetingTitleStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "22px",
+    fontWeight: "$bold",
+    lineHeight: "28px",
+    color: "$text.dark",
+    margin: "$none"
+});
+const meetingMetaStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "$xs"
+});
+const meetingMetaCenteredStyle = css_css({
+    alignItems: "center"
+});
+const metaItemStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    gap: "$xs",
+    fontFamily: "$inter",
+    fontSize: "13px",
+    color: "$text.secondary"
+});
+const metaIconStyle = css_css({
+    display: "flex",
+    flexShrink: 0,
+    "& svg": {
+        width: "[14px]",
+        height: "[14px]"
+    }
+});
+const meetingSubtitleStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "14px",
+    lineHeight: "22px",
+    color: "$text.secondary",
+    margin: "$none"
+});
+const lightboxMeetingCalendarStyle = css_css({
+    flex: "1",
+    minWidth: "[0]"
+});
+const lightboxMeetingDividerStyle = css_css({
+    width: "[1px]",
+    backgroundColor: "$gray",
+    alignSelf: "stretch",
+    flexShrink: 0,
+    // Becomes a horizontal rule between the stacked sections on mobile.
+    _mobile: {
+        width: "[100%]",
+        height: "[1px]"
+    }
+});
+const inviteBannerStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingBlock: "[10px]",
+    paddingInline: "[24px]",
+    backgroundColor: "[rgba(0,0,0,0.04)]",
+    borderBottomWidth: "[1px]",
+    borderBottomStyle: "solid",
+    borderBottomColor: "[rgba(0,0,0,0.08)]",
+    borderTopLeftRadius: "[8px]",
+    borderTopRightRadius: "[8px]",
+    width: "[100%]"
+});
+const inviteBannerTextStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "13px",
+    color: "$text.secondary",
+    textAlign: "center"
+});
+const notYouButtonStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "13px",
+    color: "$primary",
+    background: "$transparent",
+    border: "none",
+    cursor: "pointer",
+    paddingBlock: "[0]",
+    paddingInline: "[0]",
+    flexShrink: 0,
+    "&:hover": {
+        textDecoration: "underline"
+    }
+});
+// Booking confirmed styles
+const confirmedContainerStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "$md",
+    paddingTop: "[8px]"
+});
+const confirmedHeadingStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "16px",
+    fontWeight: "$semibold",
+    lineHeight: "24px",
+    color: "$text.dark",
+    margin: "$none"
+});
+const confirmedTimeDateStyle = css_css({
+    display: "flex",
+    flexDirection: "row",
+    gap: "[32px]"
+});
+const confirmedColumnStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "[4px]"
+});
+// Matches the micro label the details card uses for the same two words before
+// booking, so TIME and DATE do not change size on the way through the flow.
+const confirmedLabelStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "10px",
+    fontWeight: "$medium",
+    lineHeight: "16px",
+    textTransform: "uppercase",
+    letterSpacing: "[0.5px]",
+    color: "$text.secondary"
+});
+const confirmedValueStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "16px",
+    fontWeight: "$semibold",
+    color: "$text.dark"
+});
+const confirmedTimeZoneStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "12px",
+    color: "$text.secondary"
+});
+const confirmedCardStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "$sm",
+    padding: "$lg",
+    borderWidth: "[1px]",
+    borderStyle: "solid",
+    borderColor: "[#22c55e]",
+    borderRadius: "[8px]",
+    backgroundColor: "[rgba(34,197,94,0.06)]",
+    textAlign: "center"
+});
+// Container mode: left-align the confirmation card content instead of centering.
+const confirmedCardLeftStyle = css_css({
+    alignItems: "flex-start",
+    textAlign: "left"
+});
+const confirmedIconStyle = css_css({
+    color: "[#22c55e]",
+    display: "flex",
+    "& svg": {
+        width: "[32px]",
+        height: "[32px]"
+    }
+});
+const confirmedTextStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "15px",
+    fontWeight: "$semibold",
+    color: "$text.dark",
+    margin: "$none"
+});
+const confirmedBodyStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "13px",
+    color: "$text.secondary",
+    margin: "$none"
+});
+const confirmedEmailStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "13px",
+    color: "$text.secondary",
+    margin: "$none"
+});
+
+var LightboxExperience_LightboxMeetingInfo = /* unused export */ undefined;
+var LightboxExperience_lightboxMeetingDividerStyle = /* unused export */ undefined;
+var LightboxExperience_lightboxMeetingWidthStyle = /* unused export */ undefined;
+export { LightboxExperience, LightboxExperience_LightboxMeetingInfo as LightboxMeetingInfo, LightboxExperience_lightboxMeetingDividerStyle as lightboxMeetingDividerStyle, LightboxExperience_lightboxMeetingWidthStyle as lightboxMeetingWidthStyle, lightboxCardStyle, lightboxMeetingCalendarStyle, lightboxMeetingLayoutStyle };