medos-sdk 1.0.3 → 1.1.0

package/dist/components/EnquiryForm.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducer, useCallback } from "react";
+import { EnquiryService } from "../services/EnquiryService";
+import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../enquiry-form/validation";
+import { ContactInformationStep } from "./ContactInformationStep";
+import { InquiryDetailsStep } from "./InquiryDetailsStep";
+import { ContactPreferenceStep } from "./ContactPreferenceStep";
+import { SuccessStep } from "./SuccessStep";
+import { useTheme } from "../react/hooks/useTheme";
+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 (max 1000 characters).",
+            });
+            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 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, onSuccess, onError]);
+    const resetForm = useCallback(() => {
+        dispatch({ type: "RESET_FORM" });
+    }, []);
+    const theme = useTheme();
+    const styles = getStyles(theme);
+    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("h2", { style: styles.title, children: "Submit Inquiry" }), _jsxs("p", { style: styles.stepIndicator, children: ["Step ", state.step + 1, " of 4"] })] }), _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 })] })] }) }));
+};
+const getStyles = (theme) => ({
+    container: {
+        display: "flex",
+        justifyContent: "center",
+        padding: 20,
+        fontFamily: theme.typography.fontFamily,
+        background: theme.colors.background,
+    },
+    card: {
+        width: "100%",
+        maxWidth: 600,
+        background: theme.colors.surface,
+        borderRadius: theme.radii.lg,
+        boxShadow: theme.shadows.lg,
+        overflow: "hidden",
+        boxSizing: "border-box",
+    },
+    header: {
+        background: theme.colors.primary,
+        padding: "20px 24px",
+        borderBottom: `1px solid ${theme.colors.border}`,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    title: {
+        margin: 0,
+        fontSize: theme.typography.fontSizeXl,
+        fontWeight: theme.typography.fontWeightSemibold,
+        color: theme.colors.textOnPrimary,
+    },
+    stepIndicator: {
+        fontSize: theme.typography.fontSizeSm,
+        color: theme.colors.textOnPrimary,
+        opacity: 0.9,
+        margin: 0,
+        fontWeight: 500,
+    },
+    content: {
+        padding: 24,
+    },
+    errorMessage: {
+        marginBottom: 12,
+        color: theme.colors.error,
+        fontWeight: 600,
+        padding: "12px",
+        background: theme.colors.errorBackground,
+        borderRadius: theme.radii.md,
+        border: `1px solid ${theme.colors.errorBorder}`,
+        fontSize: theme.typography.fontSizeSm,
+    },
+});

package/dist/components/Icons/ConsultationType.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ConsultationTypeIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", children: _jsx("path", { d: "M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z", fill: "#1E3A8A" }) }));
+export const ConsultationTypeIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", children: _jsx("path", { d: "M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z", fill: "currentColor" }) }));

package/dist/components/Icons/Date&TimeIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DateTimeIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", children: _jsx("path", { d: "M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z", fill: "#C94300" }) }));
+export const DateTimeIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", children: _jsx("path", { d: "M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z", fill: "currentColor" }) }));

package/dist/components/Icons/MapIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MapPinIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", children: _jsx("path", { d: "M7 20C5.23333 20 3.79167 19.7208 2.675 19.1625C1.55833 18.6042 1 17.8833 1 17C1 16.6 1.12083 16.2292 1.3625 15.8875C1.60417 15.5458 1.94167 15.25 2.375 15L3.95 16.475C3.8 16.5417 3.6375 16.6167 3.4625 16.7C3.2875 16.7833 3.15 16.8833 3.05 17C3.26667 17.2667 3.76667 17.5 4.55 17.7C5.33333 17.9 6.15 18 7 18C7.85 18 8.67083 17.9 9.4625 17.7C10.2542 17.5 10.7583 17.2667 10.975 17C10.8583 16.8667 10.7083 16.7583 10.525 16.675C10.3417 16.5917 10.1667 16.5167 10 16.45L11.55 14.95C12.0167 15.2167 12.375 15.5208 12.625 15.8625C12.875 16.2042 13 16.5833 13 17C13 17.8833 12.4417 18.6042 11.325 19.1625C10.2083 19.7208 8.76667 20 7 20ZM7.025 14.5C8.675 13.2833 9.91667 12.0625 10.75 10.8375C11.5833 9.6125 12 8.38333 12 7.15C12 5.45 11.4583 4.16667 10.375 3.3C9.29167 2.43333 8.16667 2 7 2C5.83333 2 4.70833 2.43333 3.625 3.3C2.54167 4.16667 2 5.45 2 7.15C2 8.26667 2.40833 9.42917 3.225 10.6375C4.04167 11.8458 5.30833 13.1333 7.025 14.5ZM7 17C4.65 15.2667 2.89583 13.5833 1.7375 11.95C0.579167 10.3167 0 8.71667 0 7.15C0 5.96667 0.2125 4.92917 0.6375 4.0375C1.0625 3.14583 1.60833 2.4 2.275 1.8C2.94167 1.2 3.69167 0.75 4.525 0.45C5.35833 0.15 6.18333 0 7 0C7.81667 0 8.64167 0.15 9.475 0.45C10.3083 0.75 11.0583 1.2 11.725 1.8C12.3917 2.4 12.9375 3.14583 13.3625 4.0375C13.7875 4.92917 14 5.96667 14 7.15C14 8.71667 13.4208 10.3167 12.2625 11.95C11.1042 13.5833 9.35 15.2667 7 17ZM7 9C7.55 9 8.02083 8.80417 8.4125 8.4125C8.80417 8.02083 9 7.55 9 7C9 6.45 8.80417 5.97917 8.4125 5.5875C8.02083 5.19583 7.55 5 7 5C6.45 5 5.97917 5.19583 5.5875 5.5875C5.19583 5.97917 5 6.45 5 7C5 7.55 5.19583 8.02083 5.5875 8.4125C5.97917 8.80417 6.45 9 7 9Z", fill: "#087E8B" }) }));
+export const MapPinIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", children: _jsx("path", { d: "M7 20C5.23333 20 3.79167 19.7208 2.675 19.1625C1.55833 18.6042 1 17.8833 1 17C1 16.6 1.12083 16.2292 1.3625 15.8875C1.60417 15.5458 1.94167 15.25 2.375 15L3.95 16.475C3.8 16.5417 3.6375 16.6167 3.4625 16.7C3.2875 16.7833 3.15 16.8833 3.05 17C3.26667 17.2667 3.76667 17.5 4.55 17.7C5.33333 17.9 6.15 18 7 18C7.85 18 8.67083 17.9 9.4625 17.7C10.2542 17.5 10.7583 17.2667 10.975 17C10.8583 16.8667 10.7083 16.7583 10.525 16.675C10.3417 16.5917 10.1667 16.5167 10 16.45L11.55 14.95C12.0167 15.2167 12.375 15.5208 12.625 15.8625C12.875 16.2042 13 16.5833 13 17C13 17.8833 12.4417 18.6042 11.325 19.1625C10.2083 19.7208 8.76667 20 7 20ZM7.025 14.5C8.675 13.2833 9.91667 12.0625 10.75 10.8375C11.5833 9.6125 12 8.38333 12 7.15C12 5.45 11.4583 4.16667 10.375 3.3C9.29167 2.43333 8.16667 2 7 2C5.83333 2 4.70833 2.43333 3.625 3.3C2.54167 4.16667 2 5.45 2 7.15C2 8.26667 2.40833 9.42917 3.225 10.6375C4.04167 11.8458 5.30833 13.1333 7.025 14.5ZM7 17C4.65 15.2667 2.89583 13.5833 1.7375 11.95C0.579167 10.3167 0 8.71667 0 7.15C0 5.96667 0.2125 4.92917 0.6375 4.0375C1.0625 3.14583 1.60833 2.4 2.275 1.8C2.94167 1.2 3.69167 0.75 4.525 0.45C5.35833 0.15 6.18333 0 7 0C7.81667 0 8.64167 0.15 9.475 0.45C10.3083 0.75 11.0583 1.2 11.725 1.8C12.3917 2.4 12.9375 3.14583 13.3625 4.0375C13.7875 4.92917 14 5.96667 14 7.15C14 8.71667 13.4208 10.3167 12.2625 11.95C11.1042 13.5833 9.35 15.2667 7 17ZM7 9C7.55 9 8.02083 8.80417 8.4125 8.4125C8.80417 8.02083 9 7.55 9 7C9 6.45 8.80417 5.97917 8.4125 5.5875C8.02083 5.19583 7.55 5 7 5C6.45 5 5.97917 5.19583 5.5875 5.5875C5.19583 5.97917 5 6.45 5 7C5 7.55 5.19583 8.02083 5.5875 8.4125C5.97917 8.80417 6.45 9 7 9Z", fill: "currentColor" }) }));

package/dist/components/Icons/PaymentMethodIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const PaymentMethodIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "15", viewBox: "0 0 21 15", fill: "none", children: _jsx("path", { d: "M11.9038 8.096C11.2051 8.096 10.6138 7.854 10.1298 7.37C9.64575 6.886 9.40375 6.29467 9.40375 5.596C9.40375 4.89733 9.64575 4.306 10.1298 3.822C10.6138 3.338 11.2051 3.096 11.9038 3.096C12.6024 3.096 13.1938 3.338 13.6778 3.822C14.1618 4.306 14.4038 4.89733 14.4038 5.596C14.4038 6.29467 14.1618 6.886 13.6778 7.37C13.1938 7.854 12.6024 8.096 11.9038 8.096ZM5.3075 11.1923C4.8105 11.1923 4.385 11.0153 4.031 10.6613C3.677 10.3073 3.5 9.88167 3.5 9.3845V1.8075C3.5 1.3105 3.677 0.885 4.031 0.531C4.385 0.177 4.8105 0 5.3075 0H18.4998C18.9969 0 19.4225 0.177 19.7765 0.531C20.1305 0.885 20.3075 1.3105 20.3075 1.8075V9.3845C20.3075 9.88167 20.1305 10.3073 19.7765 10.6613C19.4225 11.0153 18.9969 11.1923 18.4998 11.1923H5.3075ZM6.8075 9.69225H17C17 9.19358 17.177 8.76758 17.531 8.41425C17.885 8.06108 18.3105 7.8845 18.8075 7.8845V3.3075C18.3088 3.3075 17.8829 3.1305 17.5298 2.7765C17.1766 2.4225 17 1.997 17 1.5H6.8075C6.8075 1.99867 6.6305 2.42458 6.2765 2.77775C5.9225 3.13092 5.497 3.3075 5 3.3075V7.8845C5.49867 7.8845 5.92458 8.0615 6.27775 8.4155C6.63092 8.7695 6.8075 9.19508 6.8075 9.69225ZM17.3267 14.6923H1.80775C1.31058 14.6923 0.885 14.5153 0.531 14.1613C0.177 13.8073 0 13.3817 0 12.8845V2.98075H1.5V12.8845C1.5 12.9613 1.532 13.0318 1.596 13.096C1.66017 13.1602 1.73075 13.1923 1.80775 13.1923H17.3267V14.6923ZM5.3075 9.69225H5V1.5H5.3075C5.22417 1.5 5.15208 1.53042 5.09125 1.59125C5.03042 1.65208 5 1.72417 5 1.8075V9.3845C5 9.46783 5.03042 9.53992 5.09125 9.60075C5.15208 9.66175 5.22417 9.69225 5.3075 9.69225Z", fill: "#27903F" }) }));
+export const PaymentMethodIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "15", viewBox: "0 0 21 15", fill: "none", children: _jsx("path", { d: "M11.9038 8.096C11.2051 8.096 10.6138 7.854 10.1298 7.37C9.64575 6.886 9.40375 6.29467 9.40375 5.596C9.40375 4.89733 9.64575 4.306 10.1298 3.822C10.6138 3.338 11.2051 3.096 11.9038 3.096C12.6024 3.096 13.1938 3.338 13.6778 3.822C14.1618 4.306 14.4038 4.89733 14.4038 5.596C14.4038 6.29467 14.1618 6.886 13.6778 7.37C13.1938 7.854 12.6024 8.096 11.9038 8.096ZM5.3075 11.1923C4.8105 11.1923 4.385 11.0153 4.031 10.6613C3.677 10.3073 3.5 9.88167 3.5 9.3845V1.8075C3.5 1.3105 3.677 0.885 4.031 0.531C4.385 0.177 4.8105 0 5.3075 0H18.4998C18.9969 0 19.4225 0.177 19.7765 0.531C20.1305 0.885 20.3075 1.3105 20.3075 1.8075V9.3845C20.3075 9.88167 20.1305 10.3073 19.7765 10.6613C19.4225 11.0153 18.9969 11.1923 18.4998 11.1923H5.3075ZM6.8075 9.69225H17C17 9.19358 17.177 8.76758 17.531 8.41425C17.885 8.06108 18.3105 7.8845 18.8075 7.8845V3.3075C18.3088 3.3075 17.8829 3.1305 17.5298 2.7765C17.1766 2.4225 17 1.997 17 1.5H6.8075C6.8075 1.99867 6.6305 2.42458 6.2765 2.77775C5.9225 3.13092 5.497 3.3075 5 3.3075V7.8845C5.49867 7.8845 5.92458 8.0615 6.27775 8.4155C6.63092 8.7695 6.8075 9.19508 6.8075 9.69225ZM17.3267 14.6923H1.80775C1.31058 14.6923 0.885 14.5153 0.531 14.1613C0.177 13.8073 0 13.3817 0 12.8845V2.98075H1.5V12.8845C1.5 12.9613 1.532 13.0318 1.596 13.096C1.66017 13.1602 1.73075 13.1923 1.80775 13.1923H17.3267V14.6923ZM5.3075 9.69225H5V1.5H5.3075C5.22417 1.5 5.15208 1.53042 5.09125 1.59125C5.03042 1.65208 5 1.72417 5 1.8075V9.3845C5 9.46783 5.03042 9.53992 5.09125 9.60075C5.15208 9.66175 5.22417 9.69225 5.3075 9.69225Z", fill: "currentColor" }) }));

package/dist/components/Icons/UserIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const UserIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M14 13C13.1667 13 12.4583 12.7083 11.875 12.125C11.2917 11.5417 11 10.8333 11 10C11 9.16667 11.2917 8.45833 11.875 7.875C12.4583 7.29167 13.1667 7 14 7C14.8333 7 15.5417 7.29167 16.125 7.875C16.7083 8.45833 17 9.16667 17 10C17 10.8333 16.7083 11.5417 16.125 12.125C15.5417 12.7083 14.8333 13 14 13ZM14 11C14.2833 11 14.5208 10.9042 14.7125 10.7125C14.9042 10.5208 15 10.2833 15 10C15 9.71667 14.9042 9.47917 14.7125 9.2875C14.5208 9.09583 14.2833 9 14 9C13.7167 9 13.4792 9.09583 13.2875 9.2875C13.0958 9.47917 13 9.71667 13 10C13 10.2833 13.0958 10.5208 13.2875 10.7125C13.4792 10.9042 13.7167 11 14 11ZM8 20V17.1C8 16.75 8.08333 16.4208 8.25 16.1125C8.41667 15.8042 8.65 15.5583 8.95 15.375C9.48333 15.0583 10.0458 14.7958 10.6375 14.5875C11.2292 14.3792 11.8333 14.225 12.45 14.125L14 16L15.55 14.125C16.1667 14.225 16.7667 14.3792 17.35 14.5875C17.9333 14.7958 18.4917 15.0583 19.025 15.375C19.325 15.5583 19.5625 15.8042 19.7375 16.1125C19.9125 16.4208 20 16.75 20 17.1V20H8ZM9.975 18H13.05L11.7 16.35C11.4 16.4333 11.1083 16.5417 10.825 16.675C10.5417 16.8083 10.2583 16.95 9.975 17.1V18ZM14.95 18H18V17.1C17.7333 16.9333 17.4583 16.7875 17.175 16.6625C16.8917 16.5375 16.6 16.4333 16.3 16.35L14.95 18ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V7C17.7333 6.66667 17.4417 6.35 17.125 6.05C16.8083 5.75 16.4333 5.55 16 5.45V2H2V16H6.15C6.1 16.1833 6.0625 16.3667 6.0375 16.55C6.0125 16.7333 6 16.9167 6 17.1V18H2ZM4 6H11C11.4333 5.66667 11.9083 5.41667 12.425 5.25C12.9417 5.08333 13.4667 5 14 5V4H4V6ZM4 10H9C9 9.65 9.0375 9.30833 9.1125 8.975C9.1875 8.64167 9.29167 8.31667 9.425 8H4V10ZM4 14H7.45C7.63333 13.85 7.82917 13.7167 8.0375 13.6C8.24583 13.4833 8.45833 13.375 8.675 13.275V12H4V14ZM2 16V2V5.425V5V16Z", fill: "#06348D" }) }));
+export const UserIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M14 13C13.1667 13 12.4583 12.7083 11.875 12.125C11.2917 11.5417 11 10.8333 11 10C11 9.16667 11.2917 8.45833 11.875 7.875C12.4583 7.29167 13.1667 7 14 7C14.8333 7 15.5417 7.29167 16.125 7.875C16.7083 8.45833 17 9.16667 17 10C17 10.8333 16.7083 11.5417 16.125 12.125C15.5417 12.7083 14.8333 13 14 13ZM14 11C14.2833 11 14.5208 10.9042 14.7125 10.7125C14.9042 10.5208 15 10.2833 15 10C15 9.71667 14.9042 9.47917 14.7125 9.2875C14.5208 9.09583 14.2833 9 14 9C13.7167 9 13.4792 9.09583 13.2875 9.2875C13.0958 9.47917 13 9.71667 13 10C13 10.2833 13.0958 10.5208 13.2875 10.7125C13.4792 10.9042 13.7167 11 14 11ZM8 20V17.1C8 16.75 8.08333 16.4208 8.25 16.1125C8.41667 15.8042 8.65 15.5583 8.95 15.375C9.48333 15.0583 10.0458 14.7958 10.6375 14.5875C11.2292 14.3792 11.8333 14.225 12.45 14.125L14 16L15.55 14.125C16.1667 14.225 16.7667 14.3792 17.35 14.5875C17.9333 14.7958 18.4917 15.0583 19.025 15.375C19.325 15.5583 19.5625 15.8042 19.7375 16.1125C19.9125 16.4208 20 16.75 20 17.1V20H8ZM9.975 18H13.05L11.7 16.35C11.4 16.4333 11.1083 16.5417 10.825 16.675C10.5417 16.8083 10.2583 16.95 9.975 17.1V18ZM14.95 18H18V17.1C17.7333 16.9333 17.4583 16.7875 17.175 16.6625C16.8917 16.5375 16.6 16.4333 16.3 16.35L14.95 18ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V7C17.7333 6.66667 17.4417 6.35 17.125 6.05C16.8083 5.75 16.4333 5.55 16 5.45V2H2V16H6.15C6.1 16.1833 6.0625 16.3667 6.0375 16.55C6.0125 16.7333 6 16.9167 6 17.1V18H2ZM4 6H11C11.4333 5.66667 11.9083 5.41667 12.425 5.25C12.9417 5.08333 13.4667 5 14 5V4H4V6ZM4 10H9C9 9.65 9.0375 9.30833 9.1125 8.975C9.1875 8.64167 9.29167 8.31667 9.425 8H4V10ZM4 14H7.45C7.63333 13.85 7.82917 13.7167 8.0375 13.6C8.24583 13.4833 8.45833 13.375 8.675 13.275V12H4V14ZM2 16V2V5.425V5V16Z", fill: "currentColor" }) }));

package/dist/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/InquiryDetailsStep.js

@@ -0,0 +1,15 @@
+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 InquiryDetailsStep = ({ inquirySubject, inquiryMessage, onSubjectChange, onMessageChange, onBack, 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: "Subject" }), _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 (", inquiryMessage.length, "/1000)"] }), _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" })] })] }));
+};

package/dist/components/PatientDetailsStep.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, } from "./types";
-import { BUTTON_STYLES, PATIENT_DETAILS_STYLES, CONTAINER_STYLES, } from "./styles";
+import { useTheme } from "../react/hooks/useTheme";
+import { getButtonStyles, getPatientDetailsStyles, getContainerStyles, } from "./theme-styles";
 import { UserIcon } from "./Icons/UserIcon";
 import { MapPinIcon } from "./Icons/MapIcon";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
 export const PatientDetailsStep = ({ state, dispatch, onBack, onSubmit, }) => {
+    const theme = useTheme();
+    const CONTAINER_STYLES = getContainerStyles(theme);
+    const BUTTON_STYLES = getButtonStyles(theme);
     const isFormValid = state.patientName &&
         state.patientAge &&
         state.patientEmail &&
@@ -22,6 +26,8 @@ export const PatientDetailsStep = ({ state, dispatch, onBack, onSubmit, }) => {
                         }, disabled: !isFormValid || state.loading, onClick: onSubmit, children: state.loading ? "Booking..." : "Continue" })] })] }));
 };
 const PatientInfoSection = ({ state, dispatch }) => {
+    const theme = useTheme();
+    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme);
     const firstName = state.patientName.split(" ")[0] || "";
     const lastName = state.patientName.split(" ").slice(1).join(" ") || "";
     return (_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionCard, children: [_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionHeader, children: [_jsx(UserIcon, {}), _jsx("h3", { style: PATIENT_DETAILS_STYLES.sectionTitle, children: "Patient Information" })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionBody, children: [_jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["First Name ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "Jane", value: firstName, onChange: (e) => {
@@ -54,6 +60,8 @@ const PatientInfoSection = ({ state, dispatch }) => {
                                         }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select blood group" }) }), _jsx(SelectContent, { children: BLOOD_GROUP_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })] })] })] }));
 };
 const AddressInfoSection = ({ state, dispatch }) => {
+    const theme = useTheme();
+    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme);
     return (_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionCard, children: [_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionHeader, children: [_jsx(MapPinIcon, {}), _jsx("h3", { style: PATIENT_DETAILS_STYLES.sectionTitle, children: "Address Information" })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionBody, children: [_jsxs("div", { style: { marginBottom: 20 }, children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Address ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "123 Main Street", value: state.patientAddress, onChange: (e) => dispatch({
                                     type: "SET_PATIENT_ADDRESS",
                                     payload: e.target.value,

package/dist/components/PhoneVerificationStep.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { COUNTRY_CODES, } from "./types";
-import { BUTTON_STYLES, PHONE_VERIFY_STYLES } from "./styles";
+import { COUNTRY_CODES } from "./types";
+import { useTheme } from "../react/hooks/useTheme";
+import { getButtonStyles, getPhoneVerifyStyles } from "./theme-styles";
 import { validatePhoneNumber, validateCountryCode } from "./validation";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
 export const PhoneVerificationStep = ({ state, dispatch, onSendOtp, onVerifyOtp, onBack, onContinue, }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    const BUTTON_STYLES = getButtonStyles(theme);
     const isPhoneValid = validatePhoneNumber(state.patientPhone) &&
         validateCountryCode(state.countryCode);
     return (_jsxs("div", { style: PHONE_VERIFY_STYLES.container, children: [_jsx("div", { style: PHONE_VERIFY_STYLES.header, children: _jsx("h3", { style: PHONE_VERIFY_STYLES.title, children: "Verify Details" }) }), _jsx("div", { style: PHONE_VERIFY_STYLES.content, children: !state.otpSent ? (_jsx(PhoneInputSection, { countryCode: state.countryCode, patientPhone: state.patientPhone, onCountryCodeChange: (code) => {
@@ -20,20 +24,26 @@ export const PhoneVerificationStep = ({ state, dispatch, onSendOtp, onVerifyOtp,
                             }, disabled: state.otpCode.length !== 6 || state.otpVerifying, onClick: onVerifyOtp, children: state.otpVerifying ? "Verifying..." : "Verify OTP" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" }), _jsx("button", { style: BUTTON_STYLES.primary, onClick: onContinue, children: "Continue to Details" })] })) })] }));
 };
 const PhoneInputSection = ({ countryCode, patientPhone, onCountryCodeChange, onPhoneChange }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
     const selectedCountry = COUNTRY_CODES.find((c) => c.code === countryCode);
     return (_jsx(_Fragment, { children: _jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Enter Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneInputContainer, children: [_jsx("div", { style: { width: 120 }, children: _jsxs(Select, { value: countryCode, onValueChange: onCountryCodeChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: selectedCountry?.label || "Code" }) }), _jsx(SelectContent, { children: COUNTRY_CODES.map((item) => (_jsx(SelectItem, { value: item.code, children: item.label }, item.code))) })] }) }), _jsx("input", { type: "tel", style: PHONE_VERIFY_STYLES.phoneInput, placeholder: "0000 000 000", value: patientPhone, onChange: (e) => {
                                 const value = e.target.value.replace(/\D/g, "");
                                 onPhoneChange(value);
                             }, maxLength: 15 })] })] }) }));
 };
-const OtpInputSection = ({ countryCode, patientPhone, otpCode, otpVerified, onOtpChange }) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneDisplay, children: [countryCode, " ", patientPhone] })] }), _jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Enter OTP" }), _jsx("input", { style: {
-                        ...PHONE_VERIFY_STYLES.otpInput,
-                        ...(otpVerified ? { opacity: 0.6, pointerEvents: "none" } : {}),
-                    }, type: "text", placeholder: "Enter 6-digit OTP", value: otpCode, onChange: (e) => {
-                        if (!otpVerified) {
-                            const value = e.target.value.replace(/\D/g, "");
-                            if (value.length <= 6) {
-                                onOtpChange(value);
+const OtpInputSection = ({ countryCode, patientPhone, otpCode, otpVerified, onOtpChange }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneDisplay, children: [countryCode, " ", patientPhone] })] }), _jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Enter OTP" }), _jsx("input", { style: {
+                            ...PHONE_VERIFY_STYLES.otpInput,
+                            ...(otpVerified ? { opacity: 0.6, pointerEvents: "none" } : {}),
+                        }, type: "text", placeholder: "Enter 6-digit OTP", value: otpCode, onChange: (e) => {
+                            if (!otpVerified) {
+                                const value = e.target.value.replace(/\D/g, "");
+                                if (value.length <= 6) {
+                                    onOtpChange(value);
+                                }
                             }
-                        }
-                    }, maxLength: 6, disabled: otpVerified }), _jsx("div", { style: PHONE_VERIFY_STYLES.otpHint, children: "We've sent a 6-digit code to your phone number" })] }), otpVerified && (_jsxs("div", { style: PHONE_VERIFY_STYLES.successMessage, children: [_jsx("div", { style: PHONE_VERIFY_STYLES.successIcon, children: "\u2713" }), _jsxs("div", { children: [_jsx("div", { style: PHONE_VERIFY_STYLES.successTitle, children: "Phone verified successfully" }), _jsx("div", { style: PHONE_VERIFY_STYLES.successSubtitle, children: "Your phone number has been verified" })] })] }))] }));
+                        }, maxLength: 6, disabled: otpVerified }), _jsx("div", { style: PHONE_VERIFY_STYLES.otpHint, children: "We've sent a 6-digit code to your phone number" })] }), otpVerified && (_jsxs("div", { style: PHONE_VERIFY_STYLES.successMessage, children: [_jsx("div", { style: PHONE_VERIFY_STYLES.successIcon, children: "\u2713" }), _jsxs("div", { children: [_jsx("div", { style: PHONE_VERIFY_STYLES.successTitle, children: "Phone verified successfully" }), _jsx("div", { style: PHONE_VERIFY_STYLES.successSubtitle, children: "Your phone number has been verified" })] })] }))] }));
+};

package/dist/components/SuccessStep.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-import { SuccessStepProps } from "./types";
+export interface SuccessStepProps {
+    onReset: () => void;
+}
 export declare const SuccessStep: React.FC<SuccessStepProps>;

package/dist/components/SuccessStep.js

@@ -1,17 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BUTTON_STYLES, SUCCESS_STYLES, CONTAINER_STYLES } from "./styles";
-import { ConfirmationCheck } from "./Icons/ConfirmationCheck";
-export const SuccessStep = ({ state, onReset }) => {
-    const formattedDate = state.selectedDate
-        ? new Date(state.selectedDate).toLocaleDateString("en-US", {
-            weekday: "long",
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-        })
-        : "";
-    const formattedTime = state.selectedSlot
-        ? state.selectedSlot.startTime
-        : "TBD";
-    return (_jsx("div", { style: CONTAINER_STYLES.section, children: _jsxs("div", { style: SUCCESS_STYLES.container, children: [_jsxs("div", { style: SUCCESS_STYLES.header, children: [_jsx("div", { style: SUCCESS_STYLES.iconContainer, children: _jsx(ConfirmationCheck, {}) }), _jsx("div", { children: "Appointment Confirmed!" })] }), _jsxs("div", { style: SUCCESS_STYLES.detailsContainer, children: [_jsx("div", { style: SUCCESS_STYLES.detailsTitle, children: "Your appointment has been successfully booked" }), _jsxs("div", { style: SUCCESS_STYLES.detailsList, children: [_jsxs("div", { children: [_jsx("strong", { children: "Patient Name:" }), " ", state.patientName] }), _jsxs("div", { children: [_jsx("strong", { children: "Consultation Mode:" }), " ", state.consultationMode] }), _jsxs("div", { children: [_jsx("strong", { children: "Date:" }), " ", formattedDate] }), _jsxs("div", { children: [_jsx("strong", { children: "Time:" }), " ", formattedTime] }), state.selectedSlot && (_jsxs("div", { children: [_jsx("strong", { children: "Duration:" }), " ", state.selectedSlot.duration, " minutes"] })), _jsxs("div", { children: [_jsx("strong", { children: "Charge:" }), " ", state.consultationCharge] })] }), _jsxs("div", { style: SUCCESS_STYLES.confirmationNote, children: ["A confirmation email has been sent to ", state.patientEmail] })] }), _jsx("div", { style: SUCCESS_STYLES.actionContainer, children: _jsx("button", { style: BUTTON_STYLES.primary, onClick: onReset, children: "Book Another Appointment" }) })] }) }));
+import { useTheme } from "../react/hooks/useTheme";
+import { getSuccessStyles, getButtonStyles } from "./theme-styles";
+export const SuccessStep = ({ onReset }) => {
+    const theme = useTheme();
+    const SUCCESS_STYLES = getSuccessStyles(theme);
+    const BUTTON_STYLES = getButtonStyles(theme);
+    return (_jsxs("div", { style: SUCCESS_STYLES.container, children: [_jsx("div", { style: SUCCESS_STYLES.iconContainer, children: _jsx("div", { style: { fontSize: "48px", color: theme.colors.success }, children: "\u2713" }) }), _jsxs("div", { style: SUCCESS_STYLES.detailsContainer, children: [_jsx("h3", { style: SUCCESS_STYLES.detailsTitle, children: "Inquiry Submitted Successfully" }), _jsx("p", { style: SUCCESS_STYLES.confirmationNote, children: "Thank you for your inquiry. We will get back to you soon." })] }), _jsx("div", { style: SUCCESS_STYLES.actionContainer, children: _jsx("button", { onClick: onReset, style: BUTTON_STYLES.primary, children: "Submit Another Inquiry" }) })] }));
 };

package/dist/components/custom-calendar.js

@@ -2,14 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import ChevronLeft from "./Icons/ChevronLeft";
 import ChevronRight from "./Icons/ChevronRight";
-const style = `
+import { useTheme } from "../react/hooks/useTheme";
+const getStyle = (theme) => `
 .custom-calendar {
   width: 340px;
-  background-color: #ffffff;
-  border-radius: 8px;
+  background-color: ${theme.colors.background};
+  border-radius: ${theme.radii.md};
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
   padding: 16px;
-  font-family: Inter, sans-serif;
+  font-family: ${theme.typography.fontFamily};
 }
 .calendar-header {
   display: flex;
@@ -20,18 +21,18 @@ const style = `
 .calendar-month {
   font-size: 14px;
   font-weight: 600;
-  color: #1e1e1e;
+  color: ${theme.colors.text};
 }
 .calendar-nav {
   width: 20px;
   height: 20px;
-  color: #218838; 
+  color: ${theme.colors.secondary}; 
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: ${theme.radii.sm};
   transition: background-color 0.2s;
 }
 .calendar-nav:hover {
-  background-color: #eaf8f0;
+  background-color: ${theme.colors.backgroundSecondary};
 }
 .calendar-days-header {
   display: grid;
@@ -40,7 +41,7 @@ const style = `
   margin-bottom: 6px;
   font-size: 13px;
   font-weight: 500;
-  color: #222;
+  color: ${theme.colors.text};
 }
 .calendar-grid {
   display: grid;
@@ -52,8 +53,8 @@ const style = `
   width: 38px;
   height: 38px;
   border: 1px solid transparent;
-  border-radius: 6px;
-  color: #218838;
+  border-radius: ${theme.radii.md};
+  color: ${theme.colors.secondary};
   background-color: transparent;
   font-size: 14px;
   transition: all 0.2s;
@@ -66,17 +67,17 @@ const style = `
   line-height: 1;
 }
 .calendar-day:hover:not(.disabled):not(.selected) {
-  background-color: #218838;
-  color: #ffffff;
+  background-color: ${theme.colors.secondary};
+  color: ${theme.colors.textOnSecondary};
 }
 .calendar-day.selected {
-  border: 1px solid #218838;
-  color: #218838;
+  border: 1px solid ${theme.colors.secondary};
+  color: ${theme.colors.secondary};
   background-color: transparent;
   font-weight: 600;
 }
 .calendar-day.disabled {
-  color: #b3b3b3;
+  color: ${theme.colors.textSecondary};
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -90,22 +91,39 @@ const style = `
 }
 `;
 export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDisabled = false, }) => {
+    const theme = useTheme();
     useEffect(() => {
-        if (!document.getElementById("custom-calendar-style")) {
+        const styleId = "custom-calendar-style";
+        const existingStyle = document.getElementById(styleId);
+        const themeStyle = getStyle(theme);
+        if (existingStyle) {
+            existingStyle.innerHTML = themeStyle;
+        }
+        else {
             const s = document.createElement("style");
-            s.id = "custom-calendar-style";
-            s.innerHTML = style;
+            s.id = styleId;
+            s.innerHTML = themeStyle;
             document.head.appendChild(s);
         }
-    }, []);
+    }, [theme]);
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     const [currentMonth, setCurrentMonth] = useState(today.getMonth());
     const [currentYear, setCurrentYear] = useState(today.getFullYear());
     const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
     const months = [
-        "January", "February", "March", "April", "May", "June",
-        "July", "August", "September", "October", "November", "December"
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
     ];
     const getDaysInMonth = (year, month) => {
         return new Date(year, month + 1, 0).getDate();
@@ -135,9 +153,9 @@ export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDis
         }
     };
     const isSameDate = (d1, d2) => {
-        return d1.getFullYear() === d2.getFullYear() &&
+        return (d1.getFullYear() === d2.getFullYear() &&
             d1.getMonth() === d2.getMonth() &&
-            d1.getDate() === d2.getDate();
+            d1.getDate() === d2.getDate());
     };
     const isBeforeToday = (date) => {
         const todayStart = new Date(today);

package/dist/components/theme-styles.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { MedosTheme } from "../core/theme/types";
+export declare function getContainerStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getButtonStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getPhoneVerifyStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getPatientDetailsStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getSuccessStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare const CONTAINER_STYLES: Record<string, React.CSSProperties>;
+export declare const BUTTON_STYLES: Record<string, React.CSSProperties>;
+export declare const PHONE_VERIFY_STYLES: Record<string, React.CSSProperties>;
+export declare const PATIENT_DETAILS_STYLES: Record<string, React.CSSProperties>;
+export declare const SUCCESS_STYLES: Record<string, React.CSSProperties>;