medos-sdk 1.1.10 → 1.1.12

package/dist/components/EnquiryForm.js

@@ -7,6 +7,7 @@ import { InquiryDetailsStep } from "./InquiryDetailsStep";
 import { ContactPreferenceStep } from "./ContactPreferenceStep";
 import { SuccessStep } from "./SuccessStep";
 import { useTheme } from "../react/hooks/useTheme";
+import { useBreakpoint } from "../core/theme/responsive";
 import MedosLogo from "./Icons/MedosLogo";
 const INITIAL_STATE = {
     step: 0,
@@ -153,76 +154,87 @@ export const EnquiryForm = ({ onSuccess, onError, }) => {
         }
     }, [state, validateContactStep, validateInquiryStep]);
     const theme = useTheme();
-    const styles = React.useMemo(() => getStyles(theme), [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({
+    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) => ({
-    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,
-    },
-    branding: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 8,
-        marginTop: 24,
-        paddingTop: 16,
-        borderTop: `1px solid ${theme.colors.border}`,
-        opacity: 0.8,
-    },
-    poweredBy: {
-        fontSize: 12,
-        color: theme.colors.textSecondary,
-        fontWeight: 500,
-    },
-});
+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/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/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/InquiryDetailsStep.js

@@ -7,10 +7,14 @@ export const InquiryDetailsStep = React.memo(({ inquirySubject, inquiryMessage,
     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]);
-    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: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Message" }), _jsx("textarea", { value: inquiryMessage, onChange: (e) => onMessageChange(e.target.value), placeholder: "Enter your inquiry message", rows: 5, style: {
+    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/PatientDetailsStep.js

@@ -1,33 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, } from "./types";
 import { useTheme } from "../react/hooks/useTheme";
+import { useBreakpoint } from "../core/theme/responsive";
 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, }) => {
+export const PatientDetailsStep = ({ state, dispatch, onBack, onSubmit, isFirstStep = false, }) => {
     const theme = useTheme();
-    const CONTAINER_STYLES = getContainerStyles(theme);
-    const BUTTON_STYLES = getButtonStyles(theme);
+    const breakpoint = useBreakpoint(theme);
+    const CONTAINER_STYLES = getContainerStyles(theme, "medos", breakpoint);
+    const BUTTON_STYLES = getButtonStyles(theme, "medos", breakpoint);
     const isFormValid = state.patientName &&
         state.patientAge &&
-        state.patientEmail &&
         state.patientGender &&
-        state.bloodGroup &&
         state.patientAddress &&
         state.patientCity &&
         state.patientState &&
         state.patientCountry &&
         state.patientZipcode &&
         state.otpVerified;
-    return (_jsxs("div", { style: CONTAINER_STYLES.section, children: [_jsx(PatientInfoSection, { state: state, dispatch: dispatch }), _jsx(AddressInfoSection, { state: state, dispatch: dispatch }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+    return (_jsxs("div", { style: CONTAINER_STYLES.section, children: [_jsx(PatientInfoSection, { state: state, dispatch: dispatch }), _jsx(AddressInfoSection, { state: state, dispatch: dispatch }), _jsxs("div", { style: {
+                    ...CONTAINER_STYLES.actions,
+                    justifyContent: isFirstStep ? "flex-end" : "space-between",
+                }, children: [!isFirstStep && (_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" })), _jsx("button", { style: {
                             ...BUTTON_STYLES.primary,
                             opacity: isFormValid ? 1 : 0.6,
                         }, 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 breakpoint = useBreakpoint(theme);
+    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme, "medos", breakpoint);
     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) => {
@@ -40,7 +44,7 @@ const PatientInfoSection = ({ state, dispatch }) => {
                                                 type: "SET_PATIENT_NAME",
                                                 payload: `${firstName} ${e.target.value}`,
                                             });
-                                        } })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Age" }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "number", placeholder: "25", value: state.patientAge || "", min: "0", max: "120", onChange: (e) => {
+                                        } })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Age ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "number", placeholder: "25", value: state.patientAge || "", min: "0", max: "120", onChange: (e) => {
                                             const val = e.target.value;
                                             if (val === "") {
                                                 dispatch({
@@ -56,20 +60,21 @@ const PatientInfoSection = ({ state, dispatch }) => {
                                                     payload: val,
                                                 });
                                             }
-                                        } })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Email ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "email", placeholder: "jane@example.com", value: state.patientEmail, onChange: (e) => dispatch({
+                                        } })] }), _jsxs("div", { children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Email" }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "email", placeholder: "jane@example.com (optional)", value: state.patientEmail, onChange: (e) => dispatch({
                                             type: "SET_PATIENT_EMAIL",
                                             payload: e.target.value,
                                         }) })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Gender ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsxs(Select, { value: state.patientGender, onValueChange: (value) => dispatch({
                                             type: "SET_PATIENT_GENDER",
                                             payload: value,
-                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select gender" }) }), _jsx(SelectContent, { children: GENDER_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Blood Group ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsxs(Select, { value: state.bloodGroup, onValueChange: (value) => dispatch({
+                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select gender" }) }), _jsx(SelectContent, { children: GENDER_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsxs("div", { children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Blood Group" }), _jsxs(Select, { value: state.bloodGroup, onValueChange: (value) => dispatch({
                                             type: "SET_BLOOD_GROUP",
                                             payload: value,
-                                        }), 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))) })] })] })] })] })] }));
+                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select blood group (optional)" }) }), _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);
+    const breakpoint = useBreakpoint(theme);
+    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme, "medos", breakpoint);
     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/PatientSelectionStep.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Patient } from "./appointment-booking/types";
+interface PatientSelectionStepProps {
+    verifiedPatients: Patient[];
+    selectedPatient: Patient | null;
+    onSelectPatient: (patient: Patient) => void;
+    onProceedAsNewPatient: () => void;
+    onBack: () => void;
+    isFirstStep?: boolean;
+}
+export declare const PatientSelectionStep: React.FC<PatientSelectionStepProps>;
+export {};

package/dist/components/PatientSelectionStep.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../react/hooks/useTheme";
+import { getButtonStyles } from "./theme-styles";
+export const PatientSelectionStep = ({ verifiedPatients, selectedPatient, onSelectPatient, onProceedAsNewPatient, onBack, isFirstStep = false, }) => {
+    const theme = useTheme();
+    const BUTTON_STYLES = getButtonStyles(theme);
+    const styles = getPatientSelectionStyles(theme);
+    const [tempSelection, setTempSelection] = React.useState(null);
+    const handlePatientSelect = (patient) => {
+        setTempSelection({ type: "existing", patient });
+    };
+    const handleNewPatientSelect = () => {
+        setTempSelection({ type: "new" });
+    };
+    const handleNext = () => {
+        if (tempSelection) {
+            if (tempSelection.type === "existing" && tempSelection.patient) {
+                onSelectPatient(tempSelection.patient);
+            }
+            else if (tempSelection.type === "new") {
+                onProceedAsNewPatient();
+            }
+        }
+    };
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("h3", { style: styles.title, children: "Select Patient" }), verifiedPatients.length > 0 ? (_jsxs("p", { style: styles.subtitle, children: ["We found ", verifiedPatients.length, " registered patient", verifiedPatients.length > 1 ? "s" : "", " with this number"] })) : (_jsx("p", { style: styles.subtitle, children: "No registered patients found with this number" }))] }), _jsxs("div", { style: styles.content, children: [verifiedPatients.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: styles.patientList, children: verifiedPatients.map((patient) => (_jsx(PatientCard, { patient: patient, isSelected: tempSelection?.type === "existing" &&
+                                        tempSelection?.patient?.id === patient.id, onSelect: () => handlePatientSelect(patient), theme: theme }, patient.id))) }), _jsx("div", { style: styles.divider, children: _jsx("span", { style: styles.dividerText, children: "OR" }) })] })), _jsxs("button", { style: {
+                            ...styles.newPatientButton,
+                            ...(tempSelection?.type === "new"
+                                ? styles.newPatientButtonSelected
+                                : {}),
+                        }, onClick: handleNewPatientSelect, children: [_jsx("div", { style: styles.newPatientIcon, children: "+" }), _jsxs("div", { style: styles.newPatientContent, children: [_jsx("div", { style: styles.newPatientTitle, children: "Register as New Patient" }), _jsx("div", { style: styles.newPatientSubtitle, children: "Fill out the form to create a new patient profile" })] })] })] }), _jsxs("div", { style: {
+                    ...styles.footer,
+                    justifyContent: "flex-end",
+                }, children: [!isFirstStep && (_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" })), _jsx("button", { style: {
+                            ...BUTTON_STYLES.primary,
+                            opacity: tempSelection ? 1 : 0.6,
+                        }, onClick: handleNext, disabled: !tempSelection, children: "Next" })] })] }));
+};
+const PatientCard = ({ patient, isSelected, onSelect, theme }) => {
+    const styles = getPatientCardStyles(theme, isSelected);
+    const formatDate = (dateStr) => {
+        const date = new Date(dateStr);
+        return date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+    };
+    return (_jsxs("button", { style: styles.card, onClick: onSelect, type: "button", children: [_jsx("div", { style: styles.radioContainer, children: _jsx("div", { style: styles.radio, children: isSelected && _jsx("div", { style: styles.radioInner }) }) }), _jsxs("div", { style: styles.content, children: [_jsxs("div", { style: styles.header, children: [_jsxs("div", { style: styles.name, children: [patient.firstName, " ", patient.lastName] }), _jsxs("div", { style: styles.mrn, children: ["MRN: ", patient.mrn] })] }), _jsxs("div", { style: styles.details, children: [_jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Email:" }), _jsx("span", { style: styles.detailValue, children: patient.email })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Phone:" }), _jsxs("span", { style: styles.detailValue, children: [patient.countryCode, " ", patient.phoneNumber] })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "DOB:" }), _jsx("span", { style: styles.detailValue, children: formatDate(patient.dob) })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Gender:" }), _jsx("span", { style: styles.detailValue, children: patient.gender })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Blood Group:" }), _jsx("span", { style: styles.detailValue, children: patient.bloodGroup })] }), patient.address && (_jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Address:" }), _jsxs("span", { style: styles.detailValue, children: [patient.address.city, ", ", patient.address.state] })] }))] })] })] }));
+};
+const getPatientSelectionStyles = (theme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        gap: "20px",
+    },
+    header: {
+        textAlign: "center",
+        marginBottom: "4px",
+    },
+    title: {
+        fontSize: "24px",
+        fontWeight: "600",
+        color: theme.colors.text,
+        marginBottom: "8px",
+    },
+    subtitle: {
+        fontSize: "14px",
+        color: theme.colors.textSecondary,
+        margin: 0,
+    },
+    content: {
+        flex: 1,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+    },
+    patientList: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+    },
+    divider: {
+        display: "flex",
+        alignItems: "center",
+        textAlign: "center",
+        margin: "16px 0",
+        position: "relative",
+        "&::before": {
+            content: '""',
+            flex: 1,
+            borderBottom: `1px solid ${theme.colors.border}`,
+        },
+        "&::after": {
+            content: '""',
+            flex: 1,
+            borderBottom: `1px solid ${theme.colors.border}`,
+        },
+    },
+    dividerText: {
+        padding: "0 16px",
+        color: theme.colors.textSecondary,
+        fontSize: "14px",
+        fontWeight: "500",
+        backgroundColor: theme.colors.background,
+    },
+    newPatientButton: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "16px",
+        padding: "14px",
+        border: `2px dashed ${theme.colors.border}`,
+        borderRadius: theme.radii.md,
+        background: theme.colors.background,
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        textAlign: "center",
+        "&:hover": {
+            borderColor: theme.colors.primary,
+            background: `${theme.colors.primary}10`,
+        },
+    },
+    newPatientIcon: {
+        width: "48px",
+        height: "48px",
+        borderRadius: "50%",
+        background: theme.colors.primary,
+        color: "white",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "24px",
+        fontWeight: "400",
+        flexShrink: 0,
+        lineHeight: "1",
+    },
+    newPatientContent: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+    },
+    newPatientTitle: {
+        fontSize: "16px",
+        fontWeight: "600",
+        color: theme.colors.text,
+        marginBottom: "4px",
+        textAlign: "center",
+    },
+    newPatientSubtitle: {
+        fontSize: "14px",
+        color: theme.colors.textSecondary,
+        textAlign: "center",
+    },
+    newPatientButtonSelected: {
+        borderColor: theme.colors.primary,
+        background: `${theme.colors.primary}08`,
+    },
+    footer: {
+        display: "flex",
+        justifyContent: "space-between",
+        gap: "12px",
+        paddingTop: "16px",
+        borderTop: `1px solid ${theme.colors.border}`,
+    },
+    nextBtnDisabled: {
+        backgroundColor: theme.colors.textSecondary || "#9ca3af",
+        cursor: "not-allowed",
+        opacity: 0.6,
+        color: "white",
+    },
+});
+const getPatientCardStyles = (theme, isSelected) => ({
+    card: {
+        display: "flex",
+        gap: "16px",
+        padding: "16px",
+        border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
+        borderRadius: theme.radii.md,
+        background: isSelected
+            ? `${theme.colors.primary}08`
+            : theme.colors.background,
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        "&:hover": {
+            borderColor: theme.colors.primary,
+            background: `${theme.colors.primary}05`,
+        },
+    },
+    radioContainer: {
+        paddingTop: "2px",
+    },
+    radio: {
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s ease",
+    },
+    radioInner: {
+        width: "10px",
+        height: "10px",
+        borderRadius: "50%",
+        background: theme.colors.primary,
+    },
+    content: {
+        flex: 1,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "12px",
+    },
+    name: {
+        fontSize: "18px",
+        fontWeight: "600",
+        color: theme.colors.text,
+    },
+    mrn: {
+        fontSize: "13px",
+        color: theme.colors.textSecondary,
+        fontWeight: "500",
+        padding: "4px 8px",
+        background: theme.colors.border,
+        borderRadius: theme.radii.sm,
+    },
+    details: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+    },
+    detailRow: {
+        display: "flex",
+        fontSize: "14px",
+        gap: "8px",
+    },
+    detailLabel: {
+        color: theme.colors.textSecondary,
+        fontWeight: "500",
+        minWidth: "100px",
+    },
+    detailValue: {
+        color: theme.colors.text,
+    },
+});

package/dist/components/PhoneVerificationStep.js

@@ -21,7 +21,7 @@ export const PhoneVerificationStep = ({ state, dispatch, onSendOtp, onVerifyOtp,
                             }, children: "Change Number" }), _jsx("button", { style: {
                                 ...BUTTON_STYLES.primary,
                                 opacity: state.otpCode.length === 6 ? 1 : 0.6,
-                            }, 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" })] })) })] }));
+                            }, 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" })] })) })] }));
 };
 const PhoneInputSection = ({ countryCode, patientPhone, onCountryCodeChange, onPhoneChange }) => {
     const theme = useTheme();

package/dist/components/SuccessStep.js

@@ -5,5 +5,5 @@ 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, textAlign: "center" }, children: _jsx("button", { onClick: onReset, style: BUTTON_STYLES.primary, children: "Submit Another Inquiry" }) })] }));
+    return (_jsxs("div", { style: SUCCESS_STYLES.container, children: [_jsx("div", { style: SUCCESS_STYLES.iconContainer, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: theme.colors.success, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }), _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" }) })] }));
 };