medos-sdk 1.0.2 → 1.1.0

package/dist/components/AppointmentDateTimeModal.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Slot } from "../services/AppointmentService";
+export type AppointmentMode = "ONLINE" | "OFFLINE";
+export type PaymentMode = "CASH" | "CARD" | "UPI";
+type AppointmentModalProps = {
+    onlineFee?: number | null;
+    offlineFee?: number | null;
+    slots: Slot[];
+    onCancel: () => void;
+    onContinue: (mode: AppointmentMode, date: Date, slot: Slot, charge: string, paymentMode: PaymentMode) => void;
+    onDateChange?: (date: Date) => void;
+};
+export declare const AppointmentDateTimeModal: React.FC<AppointmentModalProps>;
+export {};

package/dist/components/AppointmentDateTimeModal.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { CustomCalendarWithDateSelector } from "./custom-calendar";
+import { PaymentMethodIcon } from "./Icons/PaymentMethodIcon";
+import { DateTimeIcon } from "./Icons/Date&TimeIcon";
+import { ConsultationTypeIcon } from "./Icons/ConsultationType";
+import { useTheme } from "../react/hooks/useTheme";
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const getOrdinalSuffix = (day) => {
+    if (day > 3 && day < 21)
+        return "th";
+    switch (day % 10) {
+        case 1:
+            return "st";
+        case 2:
+            return "nd";
+        case 3:
+            return "rd";
+        default:
+            return "th";
+    }
+};
+const formatDate = (date) => {
+    const day = date.getDate();
+    const month = MONTHS[date.getMonth()];
+    const year = date.getFullYear();
+    return `${day}${getOrdinalSuffix(day)} ${month} ${year}`;
+};
+export const AppointmentDateTimeModal = ({ onlineFee, offlineFee, slots, onCancel, onContinue, onDateChange, }) => {
+    const theme = useTheme();
+    const [mode, setMode] = useState("OFFLINE");
+    const [consultationCharge, setConsultationCharge] = useState("");
+    const [paymentMode, setPaymentMode] = useState("CASH");
+    const [selectedDate, setSelectedDate] = useState(new Date());
+    const [selectedSlot, setSelectedSlot] = useState(null);
+    const handleDateSelect = useCallback((date) => {
+        setSelectedDate(date);
+        setSelectedSlot(null);
+        onDateChange?.(date);
+    }, [onDateChange]);
+    useEffect(() => {
+        const charge = mode === "ONLINE" && onlineFee
+            ? String(onlineFee)
+            : mode === "OFFLINE" && offlineFee
+                ? String(offlineFee)
+                : "";
+        setConsultationCharge(charge);
+    }, [mode, onlineFee, offlineFee]);
+    const handleContinue = useCallback(() => {
+        if (!selectedSlot)
+            return;
+        onContinue(mode, selectedDate, selectedSlot, consultationCharge, paymentMode);
+    }, [
+        mode,
+        selectedDate,
+        selectedSlot,
+        consultationCharge,
+        paymentMode,
+        onContinue,
+    ]);
+    const isSlotSelected = useCallback((slot) => selectedSlot?.start === slot.start && selectedSlot?.end === slot.end, [selectedSlot]);
+    const formattedDate = useMemo(() => formatDate(selectedDate), [selectedDate]);
+    const isFormValid = selectedDate && selectedSlot && consultationCharge;
+    const STYLES = getStyles(theme);
+    return (_jsxs("div", { style: STYLES.modalWrapper, children: [_jsx(ConsultationTypeSection, { mode: mode, onlineFee: onlineFee, offlineFee: offlineFee, onModeChange: setMode, STYLES: STYLES }), _jsx(ChargesSection, { charge: consultationCharge, STYLES: STYLES }), _jsx(DateTimeSection, { selectedDate: selectedDate, formattedDate: formattedDate, slots: slots, selectedSlot: selectedSlot, onDateSelect: handleDateSelect, onSlotSelect: setSelectedSlot, isSlotSelected: isSlotSelected, STYLES: STYLES }), _jsx(FooterSection, { onCancel: onCancel, onContinue: handleContinue, isValid: !!isFormValid, STYLES: STYLES })] }));
+};
+const ConsultationTypeSection = ({ mode, onlineFee, offlineFee, onModeChange, STYLES }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(ConsultationTypeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Consultation Type" })] }), _jsxs("div", { style: STYLES.sectionBody, children: [_jsx("p", { style: STYLES.label, children: "Consultation Mode" }), _jsx("div", { style: STYLES.modeContainer, children: ["ONLINE", "OFFLINE"].map((item) => {
+                        const disabled = (item === "ONLINE" && (!onlineFee || onlineFee <= 0)) ||
+                            (item === "OFFLINE" && (!offlineFee || offlineFee <= 0));
+                        return (_jsxs("label", { style: { ...STYLES.radioLabel, opacity: disabled ? 0.5 : 1 }, children: [_jsx("input", { type: "radio", name: "mode", value: item, checked: mode === item, disabled: disabled, onChange: () => !disabled && onModeChange(item), style: STYLES.radioInput }), item === "ONLINE" ? "Online" : "Offline"] }, item));
+                    }) })] })] }));
+const ChargesSection = ({ charge, STYLES }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(PaymentMethodIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Charges & Mode of Payment" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("span", { style: STYLES.rupee, children: ["\u20B9 ", charge] }) })] }));
+const DateTimeSection = ({ selectedDate, formattedDate, slots, selectedSlot, onDateSelect, onSlotSelect, isSlotSelected, STYLES, }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(DateTimeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Date & Time" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("div", { style: STYLES.dateTimeContainer, children: [_jsx("div", { style: STYLES.calendarBox, children: _jsx(CustomCalendarWithDateSelector, { selectedDate: selectedDate, onSelect: onDateSelect, pastDisabled: true }) }), _jsxs("div", { style: STYLES.timesContainer, children: [_jsxs("p", { style: STYLES.timesLabel, children: ["Available times ", _jsx("br", {}), _jsx("span", { style: STYLES.dateLabel, children: formattedDate })] }), slots.length === 0 ? (_jsx("p", { style: STYLES.noSlots, children: "No available slots" })) : (_jsx("div", { style: STYLES.slotGrid, children: slots.map((slot) => (_jsx(SlotButton, { slot: slot, isSelected: isSlotSelected(slot), onSelect: onSlotSelect }, slot.id))) }))] })] }) })] }));
+const SlotButton = ({ slot, isSelected, onSelect }) => {
+    const startTime = useMemo(() => new Date(slot.start).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+    }), [slot.start]);
+    const theme = useTheme();
+    const STYLES = getStyles(theme);
+    return (_jsx("button", { onClick: () => onSelect(slot), style: {
+            ...STYLES.slotButton,
+            background: isSelected
+                ? theme.colors.secondary
+                : theme.colors.background,
+            color: isSelected
+                ? theme.colors.textOnSecondary
+                : theme.colors.secondary,
+            borderColor: theme.colors.secondary,
+        }, children: startTime }));
+};
+const FooterSection = ({ onCancel, onContinue, isValid, STYLES }) => (_jsxs("div", { style: STYLES.footer, children: [_jsx("button", { style: STYLES.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: { ...STYLES.continueBtn, opacity: isValid ? 1 : 0.6 }, onClick: onContinue, disabled: !isValid, children: "Continue" })] }));
+const getStyles = (theme) => ({
+    modalWrapper: {
+        backgroundColor: theme.colors.background,
+        borderRadius: theme.radii.lg,
+        padding: "20px 24px 24px 24px",
+        maxWidth: 800,
+        margin: "0 auto",
+        fontFamily: theme.typography.fontFamily,
+        color: theme.colors.text,
+        boxSizing: "border-box",
+    },
+    sectionCard: {
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii.lg,
+        marginBottom: 20,
+        position: "relative",
+    },
+    sectionHeader: {
+        background: theme.colors.primary,
+        color: theme.colors.textOnPrimary,
+        borderBottom: `1px solid ${theme.colors.border}`,
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+    },
+    sectionTitle: { fontSize: 15, fontWeight: 600 },
+    sectionBody: { padding: 16, position: "relative" },
+    label: {
+        fontSize: 14,
+        fontWeight: 500,
+        marginBottom: 4,
+        display: "block",
+    },
+    modeContainer: {
+        display: "flex",
+        gap: 24,
+        marginTop: 4,
+    },
+    radioLabel: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        cursor: "pointer",
+        fontSize: 14,
+    },
+    radioInput: {
+        width: 18,
+        height: 18,
+        accentColor: theme.colors.secondary,
+        cursor: "pointer",
+    },
+    rupee: {
+        fontWeight: 600,
+        fontSize: 16,
+        marginRight: 6,
+    },
+    dateTimeContainer: { display: "flex", gap: 24 },
+    calendarBox: {
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii.lg,
+        padding: 8,
+    },
+    timesContainer: { flexGrow: 1 },
+    timesLabel: { fontWeight: 500 },
+    dateLabel: {
+        color: theme.colors.textSecondary,
+        fontSize: 13,
+    },
+    noSlots: {
+        color: theme.colors.textSecondary,
+        fontSize: 14,
+        marginTop: 8,
+    },
+    slotGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit,minmax(100px,1fr))",
+        gap: 8,
+        marginTop: 12,
+    },
+    slotButton: {
+        borderRadius: theme.radii.md,
+        padding: "8px 10px",
+        border: `1px solid ${theme.colors.secondary}`,
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: "pointer",
+        transition: "0.2s",
+    },
+    footer: {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        marginTop: 20,
+        gap: 12,
+    },
+    backBtn: {
+        border: `1px solid ${theme.colors.primary}`,
+        background: theme.colors.background,
+        color: theme.colors.primary,
+        borderRadius: theme.radii.md,
+        fontWeight: 600,
+        padding: "8px 20px",
+        cursor: "pointer",
+    },
+    continueBtn: {
+        background: theme.colors.secondary,
+        color: theme.colors.textOnSecondary,
+        border: "none",
+        borderRadius: theme.radii.md,
+        fontWeight: 600,
+        padding: "8px 20px",
+        cursor: "pointer",
+    },
+});

package/dist/components/ConfigurableCard.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type ConfigurableCardProps = {
+    title: string;
+    subtitle?: string;
+    content?: React.ReactNode;
+    ctaLabel?: string;
+    onCta?: () => void;
+    variant?: "filled" | "outline";
+    className?: string;
+};
+export declare const ConfigurableCard: React.FC<ConfigurableCardProps>;
+export default ConfigurableCard;

package/dist/components/ConfigurableCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTemplate } from "../context/TemplateContext";
+export const ConfigurableCard = ({ title, subtitle, content, ctaLabel = "Action", onCta, variant = "outline", className, }) => {
+    useTemplate();
+    const filled = variant === "filled";
+    const containerStyle = {
+        background: filled
+            ? "var(--medos-primary-color)"
+            : "var(--medos-background-color)",
+        color: filled ? "#fff" : "var(--medos-text-color)",
+        border: filled ? "none" : "1px solid var(--medos-border-color)",
+        padding: 16,
+        borderRadius: 10,
+        boxShadow: "0 6px 18px rgba(16,24,40,0.06)",
+    };
+    const ctaStyle = {
+        padding: "8px 12px",
+        borderRadius: 8,
+        background: filled
+            ? "rgba(255,255,255,0.12)"
+            : "var(--medos-primary-color)",
+        color: "#fff",
+        border: "none",
+        cursor: "pointer",
+        fontWeight: 600,
+    };
+    return (_jsxs("div", { className: className, style: containerStyle, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 8 }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: 700 }, children: title }), subtitle && (_jsx("div", { style: { fontSize: 13, opacity: 0.95, marginTop: 4 }, children: subtitle }))] }), _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsx("button", { style: ctaStyle, onClick: onCta, "aria-label": ctaLabel, children: ctaLabel }) })] }), content && _jsx("div", { style: { marginTop: 12 }, children: content })] }));
+};
+export default ConfigurableCard;

package/dist/components/ContactInformationStep.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ContactInformationStepProps {
+    patientName: string;
+    patientEmail: string;
+    countryCode: string;
+    patientPhone: string;
+    onNameChange: (value: string) => void;
+    onEmailChange: (value: string) => void;
+    onCountryCodeChange: (value: string) => void;
+    onPhoneChange: (value: string) => void;
+    onNext: () => void;
+}
+export declare const ContactInformationStep: React.FC<ContactInformationStepProps>;

package/dist/components/ContactInformationStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../react/hooks/useTheme";
+import { getContainerStyles, getPhoneVerifyStyles, getButtonStyles, } from "./theme-styles";
+export const ContactInformationStep = ({ patientName, patientEmail, countryCode, patientPhone, onNameChange, onEmailChange, onCountryCodeChange, onPhoneChange, onNext, }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    const BUTTON_STYLES = getButtonStyles(theme);
+    const CONTAINER_STYLES = getContainerStyles(theme);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Name" }), _jsx("input", { type: "text", value: patientName, onChange: (e) => onNameChange(e.target.value), placeholder: "Enter your full name", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Email" }), _jsx("input", { type: "email", value: patientEmail, onChange: (e) => onEmailChange(e.target.value), placeholder: "Enter your email", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneInputContainer, children: [_jsx("input", { type: "text", value: countryCode, onChange: (e) => onCountryCodeChange(e.target.value), placeholder: "+91", style: {
+                                    ...PHONE_VERIFY_STYLES.phoneInput,
+                                    width: "80px",
+                                    flex: "none",
+                                } }), _jsx("input", { type: "tel", value: patientPhone, onChange: (e) => onPhoneChange(e.target.value), placeholder: "Enter phone number", style: PHONE_VERIFY_STYLES.phoneInput })] })] }), _jsx("div", { style: CONTAINER_STYLES.actions, children: _jsx("button", { onClick: onNext, style: BUTTON_STYLES.primary, children: "Next" }) })] }));
+};

package/dist/components/ContactPreferenceStep.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ContactPreferenceStepProps {
+    preferredContactMethod: "PHONE" | "EMAIL" | "BOTH";
+    onContactMethodChange: (method: "PHONE" | "EMAIL" | "BOTH") => void;
+    onBack: () => void;
+    onSubmit: () => void;
+    isLoading?: boolean;
+}
+export declare const ContactPreferenceStep: React.FC<ContactPreferenceStepProps>;

package/dist/components/ContactPreferenceStep.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../react/hooks/useTheme";
+import { getPhoneVerifyStyles, getButtonStyles, getContainerStyles, } from "./theme-styles";
+export const ContactPreferenceStep = ({ preferredContactMethod, onContactMethodChange, onBack, onSubmit, isLoading = false, }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    const BUTTON_STYLES = getButtonStyles(theme);
+    const CONTAINER_STYLES = getContainerStyles(theme);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Preferred Contact Method" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "PHONE", checked: preferredContactMethod === "PHONE", onChange: (e) => onContactMethodChange(e.target.value) }), "Phone"] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "EMAIL", checked: preferredContactMethod === "EMAIL", onChange: (e) => onContactMethodChange(e.target.value) }), "Email"] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "BOTH", checked: preferredContactMethod === "BOTH", onChange: (e) => onContactMethodChange(e.target.value) }), "Both"] })] })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onSubmit, disabled: isLoading, style: {
+                            ...BUTTON_STYLES.primary,
+                            backgroundColor: isLoading
+                                ? "#ccc"
+                                : BUTTON_STYLES.primary.backgroundColor,
+                            cursor: isLoading ? "not-allowed" : "pointer",
+                        }, children: isLoading ? "Submitting..." : "Submit" })] })] }));
+};

package/dist/components/DoctorSelectModal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type DoctorSelectModalProps = {
+    onCancel: () => void;
+    onContinue: (addressId: number, doctorId: number, notes?: string) => void;
+};
+export declare const DoctorSelectModal: React.FC<DoctorSelectModalProps>;
+export {};

package/dist/components/DoctorSelectModal.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AppointmentService, } from "../services/AppointmentService";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
+import { useTheme } from "../react/hooks/useTheme";
+export const DoctorSelectModal = ({ onCancel, onContinue, }) => {
+    const theme = useTheme();
+    const [addresses, setAddresses] = useState([]);
+    const [addressDoctorsMap, setAddressDoctorsMap] = useState({});
+    const [selectedAddressId, setSelectedAddressId] = useState("");
+    const [selectedDoctorId, setSelectedDoctorId] = useState("");
+    const [appointmentNotes, setAppointmentNotes] = useState("");
+    useEffect(() => {
+        (async () => {
+            const res = await AppointmentService.getAddresses();
+            const map = {};
+            res.addresses.forEach((addr) => {
+                map[addr.id] = addr.doctors || [];
+            });
+            setAddresses(res.addresses);
+            setAddressDoctorsMap(map);
+        })();
+    }, []);
+    const doctorsForAddress = selectedAddressId
+        ? addressDoctorsMap[Number(selectedAddressId)] || []
+        : [];
+    const canContinue = !!selectedAddressId && !!selectedDoctorId;
+    const styles = getStyles(theme);
+    return (_jsx("div", { style: {
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: "2px",
+        }, children: _jsxs("div", { style: styles.modalWrapper, children: [_jsx("div", { style: styles.headerWrapper, children: _jsx("h3", { style: styles.title, children: "Location & Doctor" }) }), _jsx("div", { style: { borderBottom: `1px solid ${theme.colors.border}` } }), _jsxs("div", { style: styles.contentWrapper, children: [_jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Location ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedAddressId, onValueChange: (value) => {
+                                        setSelectedAddressId(value);
+                                        setSelectedDoctorId("");
+                                    }, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select Address" }) }), _jsx(SelectContent, { children: addresses.map((a) => (_jsx(SelectItem, { value: String(a.id), children: a.completeAddress || a.label || `Address ${a.id}` }, a.id))) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Doctor ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedDoctorId, onValueChange: setSelectedDoctorId, disabled: !selectedAddressId, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsx("div", { style: styles.footer, children: _jsx("button", { style: {
+                                    ...styles.continueBtn,
+                                    opacity: canContinue ? 1 : 0.6,
+                                }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" }) })] })] }) }));
+};
+const getStyles = (theme) => ({
+    modalWrapper: {
+        backgroundColor: theme.colors.background,
+        borderRadius: 12,
+        maxWidth: 840,
+        margin: "0 auto",
+        fontFamily: theme.typography.fontFamily,
+        color: theme.colors.text,
+    },
+    headerWrapper: {
+        padding: "20px 24px 10px 24px",
+    },
+    contentWrapper: {
+        padding: "20px 24px 0px 24px",
+    },
+    title: { fontSize: 20, fontWeight: 600, margin: 0 },
+    fieldGroup: { marginBottom: 18 },
+    label: { fontSize: 15, fontWeight: 500, marginBottom: 6, display: "block" },
+    mandatory: { color: theme.colors.error, marginLeft: 4 },
+    optional: {
+        color: theme.colors.textSecondary,
+        fontWeight: 400,
+        marginLeft: 4,
+        fontSize: 13,
+    },
+    textarea: {
+        width: "100%",
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii.md,
+        minHeight: 80,
+        padding: "10px",
+        fontSize: 14,
+        resize: "vertical",
+        boxSizing: "border-box",
+    },
+    footer: {
+        marginTop: 24,
+        marginBottom: 10,
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        gap: 10,
+    },
+    brand: { color: theme.colors.primary, fontWeight: 600 },
+    continueBtn: {
+        background: theme.colors.secondary,
+        color: theme.colors.textOnSecondary,
+        border: "none",
+        borderRadius: theme.radii.md,
+        fontWeight: 600,
+        padding: "8px 22px",
+        cursor: "pointer",
+    },
+});

package/dist/components/EnquiryForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { EnquirySubmission } from "../enquiry-form/types";
+export interface EnquiryFormProps {
+    onSuccess?: (enquiry: EnquirySubmission) => void;
+    onError?: (error: Error) => void;
+}
+export declare const EnquiryForm: React.FC<EnquiryFormProps>;