@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/lightbox_gather/index.js

@@ -0,0 +1,741 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_q, signals_module_useSignal, hooks_module_y, signals_core_module_d, jsxRuntime_module_u, signals_core_module_E, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { SelectChevronIcon, RightArrowIcon, LeftArrowIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { PrivacyDisclosure } from "../app/PrivacyDisclosure.js";
+import { AVAILABLE_TIME_ZONES } from "../meetings/constants.js";
+import { DayNumber, SlotButton, WeekViewSection, SlotsSection, weekNavButtonStyle, DayStripRow, DayString, DayCard, InnerDayCard, SlotsGrid, WeekViewDays } from "../meetings/MeetingTimeSelector.js";
+import { TimeSlotHeader } from "../meetings/TimeSlotHeader.js";
+import { formatMonthTitle, getDefaultTimeZone } from "../meetings/utils.js";
+import { WeekViewHeader } from "../meetings/WeekViewHeader.js";
+import { Button } from "../shared/Button.js";
+import "../../../utils/native_globals.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var __nativeDocumentAddEventListener = __webpack_require__(68034).Qj;
+/* provided dependency */ var __nativeDocumentRemoveEventListener = __webpack_require__(68034).LA;
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+
+
+
+const LightboxGather = (param)=>{
+    let { rootStore } = param;
+    var _message_inputFields;
+    const { effectiveLocale, t } = rootStore.translationStore;
+    const fieldValues = signals_module_useSignal({});
+    const fieldErrors = signals_module_useSignal({});
+    const handleFieldChange = hooks_module_q((index, value)=>{
+        fieldValues.value = _extends({}, fieldValues.value, {
+            [index]: value
+        });
+        // Clear error for this field when user starts typing
+        if (fieldErrors.value[index]) {
+            const next = _extends({}, fieldErrors.value);
+            delete next[index];
+            fieldErrors.value = next;
+        }
+    }, [
+        fieldValues,
+        fieldErrors
+    ]);
+    const handleSubmit = hooks_module_q((e)=>{
+        var _elementConv_message_inputFields;
+        // Prevent default form submission to handle it programmatically
+        e.preventDefault();
+        const elementConv = rootStore.elementConversation.value;
+        if (!elementConv) return;
+        const allFields = (_elementConv_message_inputFields = elementConv.message.inputFields) != null ? _elementConv_message_inputFields : [];
+        const visibleFields = allFields.filter((f)=>!f.hidden);
+        const errors = {};
+        visibleFields.forEach((field, visibleIndex)=>{
+            var _fieldValues_value_visibleIndex;
+            const isOptional = field.optional === true;
+            const value = ((_fieldValues_value_visibleIndex = fieldValues.value[visibleIndex]) != null ? _fieldValues_value_visibleIndex : "").trim();
+            if (!isOptional && value === "") {
+                errors[visibleIndex] = t("fieldRequest.requiredField");
+            }
+        });
+        if (Object.keys(errors).length > 0) {
+            fieldErrors.value = errors;
+            return;
+        }
+        const entries = [];
+        let visibleIndex = 0;
+        for (const field of allFields){
+            if (field.hidden) {
+                entries.push("");
+            } else {
+                var _fieldValues_value_visibleIndex;
+                entries.push((_fieldValues_value_visibleIndex = fieldValues.value[visibleIndex]) != null ? _fieldValues_value_visibleIndex : "");
+                visibleIndex++;
+            }
+        }
+        rootStore.submitLightboxGather(entries);
+    }, [
+        rootStore,
+        fieldValues,
+        fieldErrors,
+        t
+    ]);
+    const elementConv = rootStore.elementConversation.value;
+    if (!elementConv) return null;
+    const { message } = elementConv;
+    const visibleFields = ((_message_inputFields = message.inputFields) != null ? _message_inputFields : []).filter((f)=>!f.hidden);
+    return /*#__PURE__*/ jsxRuntime_module_u(TwoColumnContainer, {
+        "data-component-name": "LightboxGather.TwoColumnContainer",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(FormColumn, {
+                "data-component-name": "LightboxGather.FormColumn",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(Title, {
+                        "data-component-name": "LightboxGather.Title",
+                        children: message.title
+                    }),
+                    message.subtitle && /*#__PURE__*/ jsxRuntime_module_u(Subtitle, {
+                        "data-component-name": "LightboxGather.Subtitle",
+                        children: message.subtitle
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(FormElement, {
+                        "data-component-name": "LightboxGather.Form",
+                        onSubmit: handleSubmit,
+                        children: [
+                            visibleFields.map((field, index)=>{
+                                var _fieldValues_value_index;
+                                return /*#__PURE__*/ jsxRuntime_module_u(FieldWrapper, {
+                                    children: [
+                                        field.label && /*#__PURE__*/ jsxRuntime_module_u(Label, {
+                                            children: [
+                                                field.label,
+                                                field.optional && /*#__PURE__*/ jsxRuntime_module_u(OptionalLabel, {
+                                                    "data-component-name": "LightboxGather.OptionalLabel",
+                                                    children: [
+                                                        " ",
+                                                        "(",
+                                                        t("shared.optional"),
+                                                        ")"
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime_module_u(GatherInput, {
+                                            field: field,
+                                            value: (_fieldValues_value_index = fieldValues.value[index]) != null ? _fieldValues_value_index : "",
+                                            onChange: (value)=>handleFieldChange(index, value)
+                                        }),
+                                        fieldErrors.value[index] && /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                            "data-component-name": "LightboxGather.FieldError",
+                                            children: fieldErrors.value[index]
+                                        })
+                                    ]
+                                }, index);
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                                variant: "primary",
+                                size: "md",
+                                fullWidth: true,
+                                type: "submit",
+                                "data-component-name": "LightboxGather.SubmitButton",
+                                children: message.buttonText
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(PrivacyDisclosure, {
+                                rootStore: rootStore
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(ColumnDivider, {
+                "data-component-name": "LightboxGather.ColumnDivider"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(CalendarColumn, {
+                "data-component-name": "LightboxGather.CalendarColumn",
+                children: /*#__PURE__*/ jsxRuntime_module_u(InertCalendarPlaceholder, {
+                    t: t,
+                    effectiveLocale: effectiveLocale.value
+                })
+            })
+        ]
+    });
+};
+const GatherInput = (param)=>{
+    let { field, value, onChange } = param;
+    var _field_placeholder;
+    if (field.type === "picklist") {
+        return /*#__PURE__*/ jsxRuntime_module_u(GatherPicklistSelect, {
+            field: field,
+            value: value,
+            onChange: onChange
+        });
+    }
+    const inputType = getInputType(field.type);
+    return /*#__PURE__*/ jsxRuntime_module_u(StyledInput, {
+        "data-component-name": "LightboxGather.Input",
+        type: inputType,
+        step: inputType === "number" ? "any" : undefined,
+        value: value,
+        placeholder: (_field_placeholder = field.placeholder) != null ? _field_placeholder : "",
+        required: field.required,
+        "aria-label": accessibleLabelFor(field),
+        onChange: (e)=>onChange(e.target.value)
+    });
+};
+// LightboxGatherInputField.label is optional in the type, so fall back to the
+// placeholder or field type to guarantee every control has an accessible name
+// for screen readers (WCAG 4.1.2).
+const accessibleLabelFor = (field)=>{
+    var _ref, _field_label;
+    return (_ref = (_field_label = field.label) != null ? _field_label : field.placeholder) != null ? _ref : field.type;
+};
+// Custom dropdown using a CSS-controlled options list rather than the OS-native
+// select popup, which cannot be styled with CSS.
+const GatherPicklistSelect = (param)=>{
+    let { field, value, onChange } = param;
+    var _field_fieldValues, _field_fieldValues1;
+    const isOpen = signals_module_useSignal(false);
+    const containerRef = hooks_module_A(null);
+    const listboxId = hooks_module_A("picklist-" + Math.random().toString(36).slice(2)).current;
+    // Close when clicking outside. isOpen is a Preact signal; the inner effect()
+    // handles reactivity, making the empty dep array intentional.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    hooks_module_y(()=>{
+        return signals_core_module_E(()=>{
+            if (!isOpen.value) return;
+            const handleOutside = (e)=>{
+                var _containerRef_current;
+                if (!((_containerRef_current = containerRef.current) == null ? void 0 : _containerRef_current.contains(e.target))) {
+                    isOpen.value = false;
+                }
+            };
+            __nativeDocumentAddEventListener("mousedown", handleOutside);
+            return ()=>__nativeDocumentRemoveEventListener("mousedown", handleOutside);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const selectedOption = (_field_fieldValues = field.fieldValues) == null ? void 0 : _field_fieldValues.find((o)=>o.value === value);
+    const handleTriggerKeyDown = (e)=>{
+        if (e.key === "Enter" || e.key === " ") {
+            // Prevent Space from scrolling the page and Enter from submitting the parent form.
+            e.preventDefault();
+            isOpen.value = !isOpen.value;
+        } else if (e.key === "Escape") {
+            isOpen.value = false;
+        }
+    };
+    const selectOption = (optionValue)=>{
+        onChange(optionValue);
+        isOpen.value = false;
+    };
+    const handleOptionMouseDown = (e, optionValue)=>{
+        // mousedown (not click) so selection fires before the trigger loses focus.
+        // preventDefault stops the browser from blurring the trigger first.
+        e.preventDefault();
+        selectOption(optionValue);
+    };
+    const handleOptionKeyDown = (e, optionValue)=>{
+        if (e.key === "Enter" || e.key === " ") {
+            // Match the trigger's Space/Enter handling: stop the browser from
+            // scrolling and prevent the parent form from submitting.
+            e.preventDefault();
+            selectOption(optionValue);
+        }
+    };
+    const accessibleLabel = accessibleLabelFor(field);
+    return /*#__PURE__*/ jsxRuntime_module_u(SelectContainer, {
+        ref: containerRef,
+        "data-component-name": "LightboxGather.SelectContainer",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(SelectTrigger, {
+                type: "button",
+                role: "combobox",
+                "aria-expanded": isOpen.value,
+                "aria-haspopup": "listbox",
+                "aria-label": accessibleLabel,
+                "aria-controls": listboxId,
+                isOpen: isOpen.value,
+                onClick: ()=>isOpen.value = !isOpen.value,
+                onKeyDown: handleTriggerKeyDown,
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(SelectTriggerText, {
+                        hasValue: !!value,
+                        children: (selectedOption == null ? void 0 : selectedOption.label) || field.placeholder || ""
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(ChevronWrapper, {
+                        isOpen: isOpen.value,
+                        children: /*#__PURE__*/ jsxRuntime_module_u(SelectChevronIcon, {})
+                    })
+                ]
+            }),
+            isOpen.value && /*#__PURE__*/ jsxRuntime_module_u(OptionsList, {
+                id: listboxId,
+                role: "listbox",
+                "aria-label": accessibleLabel,
+                "data-component-name": "LightboxGather.OptionsList",
+                children: (_field_fieldValues1 = field.fieldValues) == null ? void 0 : _field_fieldValues1.map((option)=>/*#__PURE__*/ jsxRuntime_module_u(OptionItem, {
+                        role: "option",
+                        tabIndex: 0,
+                        "aria-selected": option.value === value,
+                        isSelected: option.value === value,
+                        onMouseDown: (e)=>handleOptionMouseDown(e, option.value),
+                        onKeyDown: (e)=>handleOptionKeyDown(e, option.value),
+                        children: option.label
+                    }, option.value))
+            })
+        ]
+    });
+};
+function getInputType(fieldType) {
+    switch(fieldType){
+        case "email":
+            return "email";
+        case "phone":
+            return "tel";
+        case "decimal":
+            return "number";
+        default:
+            return "text";
+    }
+}
+// Generates 12 fake half-hour time slots starting from 8:00 AM (matches MIN_SLOTS_TO_DISPLAY)
+function generateFakeTimeSlots() {
+    const slots = [];
+    let hour = 8;
+    let half = 0;
+    for(let i = 0; i < 12; i++){
+        const suffix = hour < 12 ? "am" : "pm";
+        const displayHour = hour > 12 ? hour - 12 : hour;
+        const minutes = half === 0 ? "00" : "30";
+        slots.push(displayHour + ":" + minutes + " " + suffix);
+        half = half === 0 ? 1 : 0;
+        if (half === 0) hour++;
+    }
+    return slots;
+}
+function toDateKey(year, month, day) {
+    return year + "-" + String(month + 1).padStart(2, "0") + "-" + String(day).padStart(2, "0");
+}
+// Static signals shared across all preview renders — values never change
+const today = new Date();
+const todayKey = toDateKey(today.getFullYear(), today.getMonth(), today.getDate());
+const previewMonthTitle = signals_core_module_d(formatMonthTitle(todayKey));
+const previewMinDate = signals_core_module_d(toDateKey(today.getFullYear(), today.getMonth(), 1));
+const previewMaxDate = signals_core_module_d(toDateKey(today.getFullYear(), today.getMonth() + 1, 28));
+const previewAvailableDates = signals_core_module_d(new Set());
+const previewSelectedDate = signals_core_module_d(todayKey);
+const previewTimeZone = signals_core_module_d(getDefaultTimeZone());
+const previewHasPrev = signals_core_module_d(false);
+const previewHasNext = signals_core_module_d(false);
+const FAKE_SLOTS = generateFakeTimeSlots();
+const InertCalendarPlaceholder = (param)=>{
+    let { t, effectiveLocale } = param;
+    const dayOfWeek = today.getDay();
+    const startOfWeek = new Date(today);
+    startOfWeek.setDate(today.getDate() - dayOfWeek);
+    const days = Array.from({
+        length: 7
+    }, (_, i)=>{
+        const d = new Date(startOfWeek);
+        d.setDate(startOfWeek.getDate() + i);
+        return {
+            abbrev: d.toLocaleString("default", {
+                weekday: "short"
+            }).toUpperCase(),
+            date: d.getDate(),
+            isToday: d.toDateString() === today.toDateString()
+        };
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(DisabledCalendar, {
+        inert: true,
+        "aria-hidden": "true",
+        "data-component-name": "LightboxGather.CalendarPlaceholder",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(WeekViewSection, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(WeekViewHeader, {
+                        monthTitle: previewMonthTitle,
+                        minDate: previewMinDate,
+                        maxDate: previewMaxDate,
+                        availableDateStrings: previewAvailableDates,
+                        selectedDateString: previewSelectedDate,
+                        onSelectDate: ()=>{},
+                        locale: effectiveLocale,
+                        openDatePickerLabel: t("meetings.openDatePicker")
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(DayStripRow, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                type: "button",
+                                className: weekNavButtonStyle,
+                                disabled: true,
+                                "aria-label": t("meetings.previousWeek"),
+                                children: /*#__PURE__*/ jsxRuntime_module_u(LeftArrowIcon, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(WeekViewDays, {
+                                layout: "large",
+                                children: days.map((d)=>/*#__PURE__*/ jsxRuntime_module_u(DayCard, {
+                                        type: "button",
+                                        disabled: !d.isToday,
+                                        selected: d.isToday,
+                                        children: /*#__PURE__*/ jsxRuntime_module_u(InnerDayCard, {
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime_module_u(DayString, {
+                                                    disabled: !d.isToday,
+                                                    children: d.abbrev
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime_module_u(DayNumber, {
+                                                    disabled: !d.isToday,
+                                                    children: d.date
+                                                })
+                                            ]
+                                        })
+                                    }, d.abbrev))
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                type: "button",
+                                className: weekNavButtonStyle,
+                                disabled: true,
+                                "aria-label": t("meetings.nextWeek"),
+                                children: /*#__PURE__*/ jsxRuntime_module_u(RightArrowIcon, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(SlotsSection, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(TimeSlotHeader, {
+                        timeZones: AVAILABLE_TIME_ZONES,
+                        timeZone: previewTimeZone,
+                        onSelectTimeZone: ()=>{},
+                        hasPrev: previewHasPrev,
+                        hasNext: previewHasNext,
+                        onPrevPage: ()=>{},
+                        onNextPage: ()=>{},
+                        selectTimezoneLabel: t("meetings.selectTimezone"),
+                        filterTimezonesLabel: t("meetings.filterTimezones"),
+                        previousTimesLabel: t("meetings.previousTimes"),
+                        nextTimesLabel: t("meetings.nextTimes")
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(SlotsGrid, {
+                        layout: "large",
+                        children: FAKE_SLOTS.map((slot)=>/*#__PURE__*/ jsxRuntime_module_u(SlotButton, {
+                                type: "button",
+                                children: slot
+                            }, slot))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(FooterRow, {
+                children: /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "primary",
+                    size: "md",
+                    disabled: true,
+                    visualOnly: true,
+                    children: t("meetings.continue")
+                })
+            })
+        ]
+    });
+};
+const TwoColumnContainer = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        padding: "[56px]",
+        width: "[100%]",
+        minHeight: "[560px]",
+        boxSizing: "border-box"
+    }
+});
+TwoColumnContainer.displayName = "TwoColumnContainer";
+const FormColumn = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$md",
+        flex: "[0 0 328px]",
+        paddingRight: "[56px]",
+        boxSizing: "border-box"
+    }
+});
+FormColumn.displayName = "FormColumn";
+// Vertical divider between form and calendar columns.
+const ColumnDivider = styled("div", {
+    base: {
+        borderLeft: "[1px solid rgba(200, 206, 208, 0.8)]",
+        marginRight: "[40px]",
+        flexShrink: 0,
+        alignSelf: "stretch"
+    }
+});
+ColumnDivider.displayName = "ColumnDivider";
+const CalendarColumn = styled("div", {
+    base: {
+        flex: "1",
+        minWidth: "[0]"
+    }
+});
+CalendarColumn.displayName = "CalendarColumn";
+const Title = styled("h2", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "22px",
+        fontWeight: "$bold",
+        lineHeight: "28px",
+        color: "$text.dark",
+        margin: "$none"
+    }
+});
+Title.displayName = "Title";
+const Subtitle = styled("p", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.secondary",
+        margin: "$none"
+    }
+});
+Subtitle.displayName = "Subtitle";
+const FormElement = styled("form", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$md",
+        width: "[100%]"
+    }
+});
+FormElement.displayName = "FormElement";
+const FieldWrapper = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$xs"
+    }
+});
+FieldWrapper.displayName = "FieldWrapper";
+const Label = styled("label", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$semibold",
+        lineHeight: "18px",
+        color: "$text.dark"
+    }
+});
+Label.displayName = "Label";
+const OptionalLabel = styled("span", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$normal",
+        color: "$text.secondary",
+        fontStyle: "italic"
+    }
+});
+OptionalLabel.displayName = "OptionalLabel";
+// Shared base styles for standalone form inputs — keeps all gather fields
+// visually consistent (same height, border, and focus ring).
+const gatherFieldBase = {
+    fontFamily: "$inter",
+    fontSize: "14px",
+    lineHeight: "22px",
+    color: "$text.dark",
+    height: "[40px]",
+    paddingBlock: "$sm",
+    paddingInline: "$md",
+    borderRadius: "[4px]",
+    border: "[1px solid rgba(200, 206, 208, 0.93)]",
+    outline: "none",
+    backgroundColor: "$white.solid",
+    width: "[100%]",
+    boxSizing: "border-box",
+    "&:focus": {
+        borderColor: "$primary",
+        outline: "[2px solid token(colors.$primary)]",
+        outlineOffset: "[-2px]"
+    }
+};
+const StyledInput = styled("input", {
+    base: _extends({}, gatherFieldBase, {
+        "&::placeholder": {
+            color: "$text.secondary"
+        }
+    })
+});
+StyledInput.displayName = "StyledInput";
+// ── Custom picklist dropdown styled components ────────────────────────────────
+const SelectContainer = styled("div", {
+    base: {
+        position: "relative",
+        width: "[100%]"
+    }
+});
+SelectContainer.displayName = "SelectContainer";
+const SelectTrigger = styled("button", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark",
+        height: "[40px]",
+        paddingBlock: "$sm",
+        paddingInline: "$md",
+        borderRadius: "[4px]",
+        border: "[1px solid rgba(200, 206, 208, 0.93)]",
+        outline: "none",
+        backgroundColor: "$white.solid",
+        width: "[100%]",
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "$xs",
+        textAlign: "left",
+        cursor: "pointer",
+        "&:focus-visible": {
+            borderColor: "$primary",
+            outline: "[2px solid token(colors.$primary)]",
+            outlineOffset: "[-2px]"
+        }
+    },
+    variants: {
+        isOpen: {
+            true: {
+                borderColor: "$primary",
+                outline: "[2px solid token(colors.$primary)]",
+                outlineOffset: "[-2px]"
+            },
+            false: {}
+        }
+    }
+});
+SelectTrigger.displayName = "SelectTrigger";
+const SelectTriggerText = styled("span", {
+    base: {
+        flexGrow: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        fontSize: "14px",
+        lineHeight: "22px"
+    },
+    variants: {
+        hasValue: {
+            true: {
+                color: "$text.dark"
+            },
+            false: {
+                color: "$text.secondary"
+            }
+        }
+    }
+});
+SelectTriggerText.displayName = "SelectTriggerText";
+const ChevronWrapper = styled("span", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0,
+        transition: "[transform 0.15s ease]"
+    },
+    variants: {
+        isOpen: {
+            true: {
+                transform: "[rotate(180deg)]"
+            },
+            false: {
+                transform: "[rotate(0deg)]"
+            }
+        }
+    }
+});
+ChevronWrapper.displayName = "ChevronWrapper";
+const OptionsList = styled("div", {
+    base: {
+        position: "absolute",
+        top: "[calc(100% + 4px)]",
+        left: "[0]",
+        right: "[0]",
+        backgroundColor: "$white.solid",
+        border: "[1px solid rgba(200, 206, 208, 0.93)]",
+        borderRadius: "[4px]",
+        boxShadow: "[0 4px 12px rgba(0, 0, 0, 0.10)]",
+        zIndex: "[100]",
+        maxHeight: "[200px]",
+        overflowY: "auto"
+    }
+});
+OptionsList.displayName = "OptionsList";
+const OptionItem = styled("div", {
+    base: {
+        paddingBlock: "$sm",
+        paddingInline: "$md",
+        cursor: "pointer",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark",
+        "&:hover": {
+            backgroundColor: "[rgba(0,112,210,0.08)]"
+        }
+    },
+    variants: {
+        isSelected: {
+            true: {
+                backgroundColor: "$primary",
+                color: "$white.solid",
+                "&:hover": {
+                    backgroundColor: "$primary"
+                }
+            },
+            false: {}
+        }
+    }
+});
+OptionItem.displayName = "OptionItem";
+const FooterRow = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        alignSelf: "stretch"
+    }
+});
+FooterRow.displayName = "FooterRow";
+// Inert calendar placeholder shown beside the form. Visually faded and non-interactive
+// so visitors focus on the form fields before time selection.
+const DisabledCalendar = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$md",
+        opacity: "[0.2]",
+        pointerEvents: "none",
+        userSelect: "none"
+    }
+});
+DisabledCalendar.displayName = "DisabledCalendar";
+/* export default */ const lightbox_gather = (LightboxGather);
+
+export default lightbox_gather;