medos-sdk 1.1.10 → 1.1.12

package/dist/components/constants/index.js

@@ -0,0 +1,24 @@
+export const API_BASE_URL = "https://api.medos.one/v1";
+export const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+export const WEEKDAYS = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+];

package/dist/components/constants/options.d.ts

@@ -0,0 +1,13 @@
+export declare const COUNTRY_CODES: {
+    code: string;
+    label: string;
+}[];
+export declare const GENDER_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const BLOOD_GROUP_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const mapBloodGroupToApi: (uiBloodGroup: string) => string;

package/dist/components/constants/options.js

@@ -0,0 +1,35 @@
+export const COUNTRY_CODES = [
+    { code: "+91", label: "🇮🇳 +91" },
+    { code: "+1", label: "🇺🇸 +1" },
+    { code: "+44", label: "🇬🇧 +44" },
+    { code: "+86", label: "🇨🇳 +86" },
+    { code: "+81", label: "🇯🇵 +81" },
+];
+export const GENDER_OPTIONS = [
+    { value: "MALE", label: "Male" },
+    { value: "FEMALE", label: "Female" },
+    { value: "OTHER", label: "Other" },
+];
+export const BLOOD_GROUP_OPTIONS = [
+    { value: "A+", label: "A+" },
+    { value: "A-", label: "A-" },
+    { value: "B+", label: "B+" },
+    { value: "B-", label: "B-" },
+    { value: "AB+", label: "AB+" },
+    { value: "AB-", label: "AB-" },
+    { value: "O+", label: "O+" },
+    { value: "O-", label: "O-" },
+];
+export const mapBloodGroupToApi = (uiBloodGroup) => {
+    const bloodGroupMap = {
+        "A+": "A_POSITIVE",
+        "A-": "A_NEGATIVE",
+        "B+": "B_POSITIVE",
+        "B-": "B_NEGATIVE",
+        "AB+": "AB_POSITIVE",
+        "AB-": "AB_NEGATIVE",
+        "O+": "O_POSITIVE",
+        "O-": "O_NEGATIVE",
+    };
+    return bloodGroupMap[uiBloodGroup];
+};

package/dist/components/constants/validation.d.ts

@@ -0,0 +1,6 @@
+export declare const PHONE_MIN_LENGTH = 7;
+export declare const PHONE_MAX_LENGTH = 15;
+export declare const COUNTRY_CODE_REGEX: RegExp;
+export declare const DATE_FORMAT_REGEX: RegExp;
+export declare const MIN_BIRTH_YEAR = 1900;
+export declare const VALID_BLOOD_GROUPS: string[];

package/dist/components/constants/validation.js

@@ -0,0 +1,16 @@
+export const PHONE_MIN_LENGTH = 7;
+export const PHONE_MAX_LENGTH = 15;
+export const COUNTRY_CODE_REGEX = /^\+[1-9]\d{0,3}$/;
+export const DATE_FORMAT_REGEX = /^\d{4}-\d{2}-\d{2}$/;
+export const MIN_BIRTH_YEAR = 1900;
+export const VALID_BLOOD_GROUPS = [
+    "A+",
+    "A-",
+    "B+",
+    "B-",
+    "AB+",
+    "AB-",
+    "O+",
+    "O-",
+    "UNKNOWN",
+];

package/dist/components/custom-calendar.js

@@ -3,14 +3,21 @@ import { useState, useEffect } from "react";
 import ChevronLeft from "./Icons/ChevronLeft";
 import ChevronRight from "./Icons/ChevronRight";
 import { useTheme } from "../react/hooks/useTheme";
-const getStyle = (theme) => `
+import { useBreakpoint } from "../core/theme/responsive";
+const getStyle = (theme, isMobile) => `
+.custom-calendar-wrapper {
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+}
 .custom-calendar {
-  width: 340px;
+  width: ${isMobile ? "320px" : "100%"};
+  min-width: ${isMobile ? "320px" : "auto"};
   background-color: ${theme.colors.background};
   border-radius: ${theme.radii.md};
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
-  padding: 16px;
+  padding: ${isMobile ? "12px" : "16px"};
   font-family: ${theme.typography.fontFamily};
+  box-sizing: border-box;
 }
 .calendar-header {
   display: flex;
@@ -92,10 +99,12 @@ const getStyle = (theme) => `
 `;
 export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDisabled = false, }) => {
     const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const isMobile = breakpoint === "mobile";
     useEffect(() => {
         const styleId = "custom-calendar-style";
         const existingStyle = document.getElementById(styleId);
-        const themeStyle = getStyle(theme);
+        const themeStyle = getStyle(theme, isMobile);
         if (existingStyle) {
             existingStyle.innerHTML = themeStyle;
         }
@@ -105,7 +114,7 @@ export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDis
             s.innerHTML = themeStyle;
             document.head.appendChild(s);
         }
-    }, [theme]);
+    }, [theme, isMobile]);
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     const [currentMonth, setCurrentMonth] = useState(today.getMonth());
@@ -162,10 +171,10 @@ export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDis
         todayStart.setHours(0, 0, 0, 0);
         return date < todayStart;
     };
-    return (_jsxs("div", { className: "custom-calendar", children: [_jsxs("div", { className: "calendar-header", children: [_jsx(ChevronLeft, { onClick: prevMonth, className: "calendar-nav" }), _jsxs("p", { className: "calendar-month", children: [months[currentMonth], " ", currentYear] }), _jsx(ChevronRight, { onClick: nextMonth, className: "calendar-nav" })] }), _jsx("div", { className: "calendar-days-header", children: daysOfWeek.map((d) => (_jsx("div", { className: "calendar-day-name", children: d }, d))) }), _jsxs("div", { className: "calendar-grid", children: [Array.from({ length: startOffset }).map((_, idx) => (_jsx("div", { className: "calendar-empty" }, `empty-${idx}`))), Array.from({ length: daysInMonth }).map((_, i) => {
-                        const date = new Date(currentYear, currentMonth, i + 1);
-                        const disabled = pastDisabled && isBeforeToday(date);
-                        const isSelected = selectedDate && isSameDate(selectedDate, date);
-                        return (_jsxs("button", { disabled: disabled, onClick: () => onSelect(date), className: `calendar-day ${isSelected ? "selected" : ""} ${disabled ? "disabled" : ""}`, children: [_jsx("span", { children: i + 1 }), isSelected && _jsx("span", { className: "calendar-dot", children: "\u2022" })] }, i + 1));
-                    })] })] }));
+    return (_jsx("div", { className: "custom-calendar-wrapper", children: _jsxs("div", { className: "custom-calendar", children: [_jsxs("div", { className: "calendar-header", children: [_jsx(ChevronLeft, { onClick: prevMonth, className: "calendar-nav" }), _jsxs("p", { className: "calendar-month", children: [months[currentMonth], " ", currentYear] }), _jsx(ChevronRight, { onClick: nextMonth, className: "calendar-nav" })] }), _jsx("div", { className: "calendar-days-header", children: daysOfWeek.map((d) => (_jsx("div", { className: "calendar-day-name", children: d }, d))) }), _jsxs("div", { className: "calendar-grid", children: [Array.from({ length: startOffset }).map((_, idx) => (_jsx("div", { className: "calendar-empty" }, `empty-start-${currentMonth}-${idx}`))), Array.from({ length: daysInMonth }).map((_, i) => {
+                            const date = new Date(currentYear, currentMonth, i + 1);
+                            const disabled = pastDisabled && isBeforeToday(date);
+                            const isSelected = selectedDate && isSameDate(selectedDate, date);
+                            return (_jsxs("button", { disabled: disabled, onClick: () => onSelect(date), className: `calendar-day ${isSelected ? "selected" : ""} ${disabled ? "disabled" : ""}`, children: [_jsx("span", { children: i + 1 }), isSelected && _jsx("span", { className: "calendar-dot", children: "\u2022" })] }, i + 1));
+                        })] })] }) }));
 };

package/dist/components/enquiry-form/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>;

package/dist/components/enquiry-form/EnquiryForm.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useReducer, useCallback } from "react";
+import { EnquiryService } from "../../services/EnquiryService";
+import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../../enquiry-form/validation";
+import { ContactInformationStep, InquiryDetailsStep, ContactPreferenceStep, } from "./components";
+import { SuccessStep } from "../appointment-booking/components";
+import { useTheme } from "../../react/hooks/useTheme";
+import { useBreakpoint } from "../../core/theme/responsive";
+import { MedosLogo } from "../shared/icons";
+const INITIAL_STATE = {
+    step: 0,
+    loading: false,
+    error: null,
+    patientName: "",
+    patientEmail: "",
+    countryCode: "+91",
+    patientPhone: "",
+    inquirySubject: "",
+    inquiryMessage: "",
+    preferredContactMethod: "EMAIL",
+    submitted: false,
+};
+const enquiryFormReducer = (state, action) => {
+    switch (action.type) {
+        case "SET_STEP":
+            return { ...state, step: action.payload };
+        case "SET_LOADING":
+            return { ...state, loading: action.payload };
+        case "SET_ERROR":
+            return { ...state, error: action.payload };
+        case "SET_PATIENT_NAME":
+            return { ...state, patientName: action.payload };
+        case "SET_PATIENT_EMAIL":
+            return { ...state, patientEmail: action.payload };
+        case "SET_COUNTRY_CODE":
+            return { ...state, countryCode: action.payload };
+        case "SET_PATIENT_PHONE":
+            return { ...state, patientPhone: action.payload };
+        case "SET_INQUIRY_SUBJECT":
+            return { ...state, inquirySubject: action.payload };
+        case "SET_INQUIRY_MESSAGE":
+            return { ...state, inquiryMessage: action.payload };
+        case "SET_PREFERRED_CONTACT_METHOD":
+            return { ...state, preferredContactMethod: action.payload };
+        case "RESET_FORM":
+            return INITIAL_STATE;
+        default:
+            return state;
+    }
+};
+export const EnquiryForm = ({ onSuccess, onError, }) => {
+    const [state, dispatch] = useReducer(enquiryFormReducer, INITIAL_STATE);
+    const validateContactStep = useCallback(() => {
+        dispatch({ type: "SET_ERROR", payload: null });
+        if (!validateName(state.patientName)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid name.",
+            });
+            return false;
+        }
+        if (!validateEmail(state.patientEmail)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid email address.",
+            });
+            return false;
+        }
+        if (!validateCountryCode(state.countryCode)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid country code (e.g., +91, +1).",
+            });
+            return false;
+        }
+        if (!validatePhoneNumber(state.patientPhone)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid phone number (7-15 digits).",
+            });
+            return false;
+        }
+        return true;
+    }, [
+        state.patientName,
+        state.patientEmail,
+        state.countryCode,
+        state.patientPhone,
+    ]);
+    const validateInquiryStep = useCallback(() => {
+        dispatch({ type: "SET_ERROR", payload: null });
+        if (!validateSubject(state.inquirySubject)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid subject.",
+            });
+            return false;
+        }
+        if (!validateMessage(state.inquiryMessage)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid message.",
+            });
+            return false;
+        }
+        return true;
+    }, [state.inquirySubject, state.inquiryMessage]);
+    const goToNext = useCallback(() => {
+        if (state.step === 0) {
+            if (!validateContactStep())
+                return;
+        }
+        else if (state.step === 1) {
+            if (!validateInquiryStep())
+                return;
+        }
+        dispatch({ type: "SET_STEP", payload: Math.min(3, state.step + 1) });
+    }, [state.step, validateContactStep, validateInquiryStep]);
+    const goBack = useCallback(() => {
+        dispatch({ type: "SET_STEP", payload: Math.max(0, state.step - 1) });
+    }, [state.step]);
+    const resetForm = useCallback(() => {
+        dispatch({ type: "RESET_FORM" });
+    }, []);
+    const submitEnquiry = useCallback(async () => {
+        dispatch({ type: "SET_ERROR", payload: null });
+        if (!validateContactStep() || !validateInquiryStep()) {
+            return;
+        }
+        dispatch({ type: "SET_LOADING", payload: true });
+        try {
+            const payload = {
+                patientName: state.patientName,
+                patientEmail: state.patientEmail,
+                countryCode: state.countryCode,
+                patientPhone: state.patientPhone,
+                inquirySubject: state.inquirySubject,
+                inquiryMessage: state.inquiryMessage,
+                preferredContactMethod: state.preferredContactMethod,
+            };
+            await EnquiryService.submitEnquiry(payload);
+            dispatch({ type: "SET_STEP", payload: 3 });
+            onSuccess?.(payload);
+        }
+        catch (e) {
+            const msg = e.message || "Failed to submit enquiry";
+            dispatch({ type: "SET_ERROR", payload: msg });
+            onError?.(e);
+        }
+        finally {
+            dispatch({ type: "SET_LOADING", payload: false });
+        }
+    }, [state, validateContactStep, validateInquiryStep]);
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const styles = React.useMemo(() => getStyles(theme, breakpoint), [theme, breakpoint]);
+    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsx("div", { style: styles.header, children: _jsx("h2", { style: styles.title, children: "Submit Inquiry" }) }), _jsxs("div", { style: styles.content, children: [state.loading && _jsx("div", { style: { marginBottom: 12 }, children: "Loading..." }), state.error && _jsx("div", { style: styles.errorMessage, children: state.error }), state.step === 0 && (_jsx(ContactInformationStep, { patientName: state.patientName, patientEmail: state.patientEmail, countryCode: state.countryCode, patientPhone: state.patientPhone, onNameChange: (value) => dispatch({ type: "SET_PATIENT_NAME", payload: value }), onEmailChange: (value) => dispatch({ type: "SET_PATIENT_EMAIL", payload: value }), onCountryCodeChange: (value) => dispatch({ type: "SET_COUNTRY_CODE", payload: value }), onPhoneChange: (value) => dispatch({ type: "SET_PATIENT_PHONE", payload: value }), onNext: goToNext })), state.step === 1 && (_jsx(InquiryDetailsStep, { inquirySubject: state.inquirySubject, inquiryMessage: state.inquiryMessage, onSubjectChange: (value) => dispatch({ type: "SET_INQUIRY_SUBJECT", payload: value }), onMessageChange: (value) => dispatch({ type: "SET_INQUIRY_MESSAGE", payload: value }), onBack: goBack, onNext: goToNext })), state.step === 2 && (_jsx(ContactPreferenceStep, { preferredContactMethod: state.preferredContactMethod, onContactMethodChange: (method) => dispatch({
+                                type: "SET_PREFERRED_CONTACT_METHOD",
+                                payload: method,
+                            }), onBack: goBack, onSubmit: submitEnquiry, isLoading: state.loading })), state.step === 3 && _jsx(SuccessStep, { onReset: resetForm }), _jsxs("div", { style: styles.branding, children: [_jsx("span", { style: styles.poweredBy, children: "Powered by" }), _jsx("a", { href: "https://medos.one", target: "_blank", rel: "noopener noreferrer", children: _jsx(MedosLogo, { style: { height: 50, width: "auto" } }) })] })] })] }) }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
+    return {
+        container: {
+            display: "flex",
+            justifyContent: "center",
+            padding: isMobile ? 12 : 20,
+            fontFamily: theme.typography.fontFamily,
+            background: theme.colors.background,
+        },
+        card: {
+            width: "100%",
+            maxWidth: isMobile || isTablet ? "100%" : 600,
+            background: theme.colors.surface,
+            borderRadius: isMobile ? theme.radii.md : theme.radii.lg,
+            boxShadow: isMobile ? theme.shadows.md : theme.shadows.lg,
+            overflow: "hidden",
+            boxSizing: "border-box",
+        },
+        header: {
+            background: theme.colors.primary,
+            padding: isMobile ? "16px 16px" : "20px 24px",
+            borderBottom: `1px solid ${theme.colors.border}`,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            flexWrap: (isMobile ? "wrap" : "nowrap"),
+            gap: isMobile ? 8 : 0,
+        },
+        title: {
+            margin: 0,
+            fontSize: isMobile
+                ? theme.typography.fontSizeLg
+                : theme.typography.fontSizeXl,
+            fontWeight: theme.typography.fontWeightSemibold,
+            color: theme.colors.textOnPrimary,
+        },
+        stepIndicator: {
+            fontSize: isMobile
+                ? theme.typography.fontSizeXs
+                : theme.typography.fontSizeSm,
+            color: theme.colors.textOnPrimary,
+            opacity: 0.9,
+            margin: 0,
+            fontWeight: 500,
+        },
+        content: {
+            padding: isMobile ? 16 : 24,
+        },
+        errorMessage: {
+            marginBottom: 12,
+            color: theme.colors.error,
+            fontWeight: 600,
+            padding: isMobile ? "10px" : "12px",
+            background: theme.colors.errorBackground,
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.errorBorder}`,
+            fontSize: theme.typography.fontSizeSm,
+        },
+        branding: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            marginTop: isMobile ? 16 : 24,
+            paddingTop: isMobile ? 12 : 16,
+            borderTop: `1px solid ${theme.colors.border}`,
+            opacity: 0.8,
+        },
+        poweredBy: {
+            fontSize: 12,
+            color: theme.colors.textSecondary,
+            fontWeight: 500,
+        },
+    };
+};

package/dist/components/enquiry-form/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/enquiry-form/components/ContactInformationStep.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { useBreakpoint } from "../../../core/theme/responsive";
+import { getContainerStyles, getPhoneVerifyStyles, getButtonStyles, } from "../../theme-styles";
+export const ContactInformationStep = React.memo(({ patientName, patientEmail, countryCode, patientPhone, onNameChange, onEmailChange, onCountryCodeChange, onPhoneChange, onNext, }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme, "medos", breakpoint), [theme, breakpoint]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme, "medos", breakpoint), [theme, breakpoint]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme, "medos", breakpoint), [theme, breakpoint]);
+    const styles = getStyles(theme);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Name", _jsx("span", { style: styles.mandatory, children: "*" })] }), _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: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Phone Number", _jsx("span", { style: styles.mandatory, children: "*" })] }), _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" }) })] }));
+});
+const getStyles = (theme) => ({
+    mandatory: { color: theme.colors.error, marginLeft: 4 },
+});

package/dist/components/enquiry-form/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/enquiry-form/components/ContactPreferenceStep.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { getPhoneVerifyStyles, getButtonStyles, getContainerStyles, } from "../../theme-styles";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "../../shared/ui/SelectDropdown";
+export const ContactPreferenceStep = React.memo(({ preferredContactMethod, onContactMethodChange, onBack, onSubmit, isLoading = false, }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme), [theme]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme), [theme]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme), [theme]);
+    const contactOptions = [
+        { value: "PHONE", label: "Phone" },
+        { value: "EMAIL", label: "Email" },
+        { value: "BOTH", label: "Both" },
+    ];
+    const handleContactMethodSelect = (value) => {
+        onContactMethodChange(value);
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Preferred Contact Method" }), _jsx("div", { style: { marginTop: "8px" }, children: _jsxs(Select, { value: preferredContactMethod, onValueChange: handleContactMethodSelect, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select contact method" }) }), _jsx(SelectContent, { children: contactOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }) })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onSubmit, style: BUTTON_STYLES.primary, children: isLoading ? "Submitting..." : "Submit" })] })] }));
+});

package/dist/components/enquiry-form/components/InquiryDetailsStep.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface InquiryDetailsStepProps {
+    inquirySubject: string;
+    inquiryMessage: string;
+    onSubjectChange: (value: string) => void;
+    onMessageChange: (value: string) => void;
+    onBack: () => void;
+    onNext: () => void;
+}
+export declare const InquiryDetailsStep: React.FC<InquiryDetailsStepProps>;

package/dist/components/enquiry-form/components/InquiryDetailsStep.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { getContainerStyles, getPhoneVerifyStyles, getButtonStyles, } from "../../theme-styles";
+export const InquiryDetailsStep = React.memo(({ inquirySubject, inquiryMessage, onSubjectChange, onMessageChange, onBack, onNext, }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme), [theme]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme), [theme]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme), [theme]);
+    const styles = getStyles(theme);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Subject", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsx("input", { type: "text", value: inquirySubject, onChange: (e) => onSubjectChange(e.target.value), placeholder: "Enter inquiry subject", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Message", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsx("textarea", { value: inquiryMessage, onChange: (e) => onMessageChange(e.target.value), placeholder: "Enter your inquiry message", rows: 5, style: {
+                            ...PHONE_VERIFY_STYLES.otpInput,
+                            minHeight: "120px",
+                            resize: "vertical",
+                            fontFamily: "inherit",
+                        } })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onNext, style: BUTTON_STYLES.primary, children: "Next" })] })] }));
+});
+const getStyles = (theme) => ({
+    mandatory: { color: theme.colors.error, marginLeft: 4 },
+});

package/dist/components/enquiry-form/components/index.d.ts

@@ -0,0 +1,3 @@
+export { ContactInformationStep } from "./ContactInformationStep";
+export { InquiryDetailsStep } from "./InquiryDetailsStep";
+export { ContactPreferenceStep } from "./ContactPreferenceStep";

package/dist/components/enquiry-form/components/index.js

@@ -0,0 +1,3 @@
+export { ContactInformationStep } from "./ContactInformationStep";
+export { InquiryDetailsStep } from "./InquiryDetailsStep";
+export { ContactPreferenceStep } from "./ContactPreferenceStep";

package/dist/components/enquiry-form/index.d.ts

@@ -0,0 +1,2 @@
+export { EnquiryForm } from "./EnquiryForm";
+export * from "./components";

package/dist/components/enquiry-form/index.js

@@ -0,0 +1,2 @@
+export { EnquiryForm } from "./EnquiryForm";
+export * from "./components";

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./appointment-booking";
+export * from "./enquiry-form";
+export * from "./shared";
+export * from "./types";
+export * from "./constants";
+export * from "./utils";
+export * from "./styles";

package/dist/components/index.js

@@ -0,0 +1,7 @@
+export * from "./appointment-booking";
+export * from "./enquiry-form";
+export * from "./shared";
+export * from "./types";
+export * from "./constants";
+export * from "./utils";
+export * from "./styles";

package/dist/components/shared/icons/Check.d.ts

@@ -0,0 +1,6 @@
+interface IconProps {
+    className?: string;
+    size?: number;
+}
+export declare const Check: React.FC<IconProps>;
+export {};

package/dist/components/shared/icons/Check.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Check = ({ className, size = 16 }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));

package/dist/components/shared/icons/ChevronDownIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ChevronDownIcon: React.FC<{
+    className?: string;
+}>;

package/dist/components/shared/icons/ChevronDownIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChevronDownIcon = ({ className }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }));

package/dist/components/shared/icons/ChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ChevronLeft: React.FC<React.SVGProps<SVGSVGElement>>;
+export default ChevronLeft;

package/dist/components/shared/icons/ChevronLeft.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChevronLeft = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-chevron-left ${props.className ?? ""}`, ...props, children: _jsx("path", { d: "m15 18-6-6 6-6" }) }));
+export default ChevronLeft;

package/dist/components/shared/icons/ChevronRight.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ChevronRight: React.FC<React.SVGProps<SVGSVGElement>>;
+export default ChevronRight;

package/dist/components/shared/icons/ChevronRight.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChevronRight = ({ ...props }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-chevron-right-icon lucide-chevron-right`, ...props, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
+export default ChevronRight;

package/dist/components/shared/icons/CloseIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CloseIconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const CloseIcon: React.FC<CloseIconProps>;
+export default CloseIcon;

package/dist/components/shared/icons/CloseIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloseIcon = ({ size = 12, color = "black", className, style, }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 12 12", fill: "none", className: className, style: style, children: _jsx("path", { d: "M0.878125 11.0896L0 10.2115L4.66667 5.54479L0 0.878126L0.878125 0L5.54479 4.66667L10.2115 0L11.0896 0.878126L6.42292 5.54479L11.0896 10.2115L10.2115 11.0896L5.54479 6.42292L0.878125 11.0896Z", fill: color }) }));
+};
+export default CloseIcon;

package/dist/components/shared/icons/ConfirmationCheck.d.ts

@@ -0,0 +1 @@
+export declare const ConfirmationCheck: React.FC;