medos-sdk 1.1.10 → 1.1.12

package/dist/components/BookingOptionStep.js

@@ -0,0 +1,346 @@
+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 { useBreakpoint } from "../core/theme/responsive";
+export const BookingOptionStep = ({ userSessionPacks, availablePackages, showPackageExplorer, selectedNewPackage, onSelectOption, onSelectPackage, onBack, }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const styles = getStyles(theme, breakpoint);
+    const [tempSelectedOption, setTempSelectedOption] = React.useState(null);
+    const [tempSelectedPackage, setTempSelectedPackage] = React.useState(null);
+    const activePack = userSessionPacks.find((pack) => pack.remainingSessions > 0);
+    const hasAvailablePackages = availablePackages.length > 0;
+    const handleOptionClick = (optionType, sessionPack) => {
+        setTempSelectedOption({ type: optionType, sessionPack });
+    };
+    const handlePackageSelect = (pkg) => {
+        setTempSelectedPackage(pkg);
+    };
+    const handlePackageNext = () => {
+        if (tempSelectedPackage) {
+            onSelectPackage(tempSelectedPackage);
+        }
+    };
+    const handleNext = () => {
+        if (tempSelectedOption) {
+            onSelectOption(tempSelectedOption.type, tempSelectedOption.sessionPack, undefined);
+        }
+    };
+    if (showPackageExplorer) {
+        return (_jsxs("div", { style: styles.container, children: [_jsx("div", { style: styles.header, children: _jsx("h3", { style: styles.title, children: "Explore Packages" }) }), _jsx("p", { style: styles.subtitle, children: "Choose a package that suits your needs" }), hasAvailablePackages ? (_jsx("div", { style: styles.packagesGrid, children: availablePackages.map((pkg) => (_jsxs("div", { style: {
+                            ...styles.packageCard,
+                            ...(tempSelectedPackage?.id === pkg.id
+                                ? styles.packageCardSelected
+                                : {}),
+                        }, onClick: () => handlePackageSelect(pkg), children: [_jsx("h4", { style: styles.packageName, children: pkg.name }), _jsx("p", { style: styles.packageDescription, children: pkg.description }), pkg.allowedDoctors && pkg.allowedDoctors.length > 0 && (_jsx("div", { style: styles.packageDoctors, children: pkg.allowedDoctors.map((doc) => (_jsx("span", { style: styles.doctorBadge, children: doc.fullName }, doc.id))) })), pkg.allowedConsultationModes &&
+                                pkg.allowedConsultationModes.length > 0 && (_jsx("div", { style: styles.consultationModes, children: pkg.allowedConsultationModes.map((mode) => (_jsx("span", { style: styles.modeBadge, children: mode === "ONLINE" ? "🌐 Online" : "🏥 In-Person" }, mode))) })), _jsxs("div", { style: styles.packageDetails, children: [_jsxs("span", { style: styles.packageSessions, children: [pkg.totalSessions || pkg.sessions, " session", (pkg.totalSessions || pkg.sessions || 1) > 1 ? "s" : ""] }), _jsx("div", { style: styles.priceContainer, children: pkg.discountedPrice && pkg.discountedPrice < pkg.price ? (_jsxs(_Fragment, { children: [_jsxs("span", { style: styles.originalPrice, children: ["\u20B9", pkg.price.toLocaleString()] }), _jsxs("span", { style: styles.packagePrice, children: ["\u20B9", pkg.discountedPrice.toLocaleString()] }), pkg.discount && (_jsx("span", { style: styles.discountBadge, children: pkg.discountType === "PERCENTAGE"
+                                                        ? `${pkg.discount}% OFF`
+                                                        : `₹${pkg.discount} OFF` }))] })) : (_jsxs("span", { style: styles.packagePrice, children: ["\u20B9", pkg.price.toLocaleString()] })) })] }), _jsxs("div", { style: styles.packageValidity, children: ["Valid for ", pkg.validityDays, " days"] })] }, pkg.id))) })) : (_jsx("div", { style: styles.emptyState, children: _jsx("p", { children: "No packages available at the moment." }) })), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.backBtn, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+                                ...styles.nextBtn,
+                                ...(tempSelectedPackage ? {} : styles.nextBtnDisabled),
+                            }, onClick: handlePackageNext, disabled: !tempSelectedPackage, children: "Next" })] })] }));
+    }
+    return (_jsxs("div", { style: styles.container, children: [_jsx("h3", { style: styles.title, children: "Choose Booking Option" }), _jsx("p", { style: styles.subtitle, children: "How would you like to book your appointment?" }), userSessionPacks.filter((p) => p.remainingSessions > 0).length > 1 && (_jsxs("div", { style: styles.sessionPacksSection, children: [_jsx("h4", { style: styles.sectionTitle, children: "Your Active Session Packs" }), _jsx("div", { style: styles.sessionPacksList, children: userSessionPacks
+                            .filter((pack) => pack.remainingSessions > 0)
+                            .map((pack) => (_jsxs("div", { style: {
+                                ...styles.sessionPackCard,
+                                ...(tempSelectedOption?.type === "session-pack" &&
+                                    tempSelectedOption?.sessionPack?.id === pack.id
+                                    ? styles.sessionPackCardSelected
+                                    : {}),
+                            }, onClick: () => handleOptionClick("session-pack", pack), children: [_jsxs("div", { style: styles.sessionPackInfo, children: [_jsx("span", { style: styles.sessionPackName, children: pack.name }), _jsxs("span", { style: styles.sessionPackRemaining, children: [pack.remainingSessions, "/", pack.totalSessions, " sessions"] }), pack.doctorName && (_jsx("span", { style: styles.sessionPackDoctor, children: pack.doctorName }))] }), _jsxs("div", { style: styles.sessionPackExpiry, children: ["Expires: ", new Date(pack.expiryDate).toLocaleDateString()] })] }, pack.id))) })] })), userSessionPacks.length > 0 && _jsx("hr", { style: { margin: "6px 0 6px 0" } }), _jsxs("div", { style: styles.optionsGrid, children: [activePack && (_jsxs("div", { style: {
+                            ...styles.optionCard,
+                            ...(tempSelectedOption?.type === "session-pack" &&
+                                tempSelectedOption?.sessionPack?.id === activePack.id
+                                ? styles.optionCardSelected
+                                : {}),
+                        }, onClick: () => handleOptionClick("session-pack", activePack), children: [_jsx("div", { style: styles.optionIcon, children: "\uD83D\uDCCB" }), _jsx("h4", { style: styles.optionTitle, children: "Use Session Pack" }), _jsxs("p", { style: styles.optionDescription, children: ["You have ", activePack.remainingSessions, " session", activePack.remainingSessions > 1 ? "s" : "", " remaining"] }), _jsx("div", { style: styles.sessionPackBadge, children: activePack.name })] })), _jsxs("div", { style: {
+                            ...styles.optionCard,
+                            ...(tempSelectedOption?.type === "new-appointment"
+                                ? styles.optionCardSelected
+                                : {}),
+                        }, onClick: () => handleOptionClick("new-appointment"), children: [_jsx("div", { style: styles.optionIcon, children: "\uD83D\uDCC5" }), _jsx("h4", { style: styles.optionTitle, children: "Book New Appointment" }), _jsx("p", { style: styles.optionDescription, children: "Schedule a single consultation visit" })] }), hasAvailablePackages && (_jsxs("div", { style: {
+                            ...styles.optionCard,
+                            ...(tempSelectedOption?.type === "explore-packages"
+                                ? styles.optionCardSelected
+                                : {}),
+                        }, onClick: () => handleOptionClick("explore-packages"), children: [_jsx("div", { style: styles.optionIcon, children: "\uD83C\uDF81" }), _jsx("h4", { style: styles.optionTitle, children: "Explore Packages" }), _jsx("p", { style: styles.optionDescription, children: "View and purchase consultation packages" })] }))] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.backBtn, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+                            ...styles.nextBtn,
+                            ...(tempSelectedOption ? {} : styles.nextBtnDisabled),
+                        }, onClick: handleNext, disabled: !tempSelectedOption, children: "Next" })] })] }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        container: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+        },
+        header: {
+            marginBottom: 4,
+        },
+        title: {
+            margin: 0,
+            fontSize: isMobile ? 18 : 20,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        subtitle: {
+            margin: 0,
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            lineHeight: 1.5,
+        },
+        optionsGrid: {
+            display: "grid",
+            gridTemplateColumns: isMobile
+                ? "1fr"
+                : "repeat(auto-fit, minmax(200px, 1fr))",
+            gap: 16,
+        },
+        optionCard: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            padding: 24,
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            textAlign: "center",
+            backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+        },
+        optionCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: `${theme.colors.primary}08`,
+            boxShadow: `0 0 0 1px ${theme.colors.primary}`,
+        },
+        optionIcon: {
+            fontSize: 32,
+            marginBottom: 12,
+        },
+        optionTitle: {
+            margin: "0 0 8px 0",
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        optionDescription: {
+            margin: 0,
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            lineHeight: 1.5,
+        },
+        sessionPackBadge: {
+            marginTop: 12,
+            padding: "6px 14px",
+            backgroundColor: theme.colors.successBackground || "#dcfce7",
+            color: theme.colors.success || "#166534",
+            borderRadius: 999,
+            fontSize: 12,
+            fontWeight: 500,
+        },
+        sessionPacksSection: {
+            marginBottom: 8,
+        },
+        sectionTitle: {
+            margin: "0 0 16px 0",
+            fontSize: 15,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        sessionPacksList: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+        },
+        sessionPackCard: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 16,
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+        },
+        sessionPackCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: `${theme.colors.primary}08`,
+        },
+        sessionPackInfo: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+        },
+        sessionPackName: {
+            fontSize: 14,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        sessionPackRemaining: {
+            fontSize: 13,
+            color: theme.colors.textSecondary,
+        },
+        sessionPackDoctor: {
+            fontSize: 13,
+            color: theme.colors.textSecondary,
+        },
+        sessionPackExpiry: {
+            fontSize: 12,
+            color: theme.colors.error || "#dc2626",
+            fontWeight: 500,
+        },
+        packagesGrid: {
+            display: "grid",
+            gridTemplateColumns: isMobile
+                ? "1fr"
+                : "repeat(auto-fit, minmax(250px, 1fr))",
+            gap: 16,
+        },
+        packageCard: {
+            display: "flex",
+            flexDirection: "column",
+            padding: 20,
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+        },
+        packageCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: `${theme.colors.primary}08`,
+            boxShadow: `0 0 0 1px ${theme.colors.primary}`,
+        },
+        packageName: {
+            margin: "0 0 8px 0",
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        packageDescription: {
+            margin: "0 0 16px 0",
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            lineHeight: 1.5,
+            flex: 1,
+        },
+        packageDetails: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingTop: 16,
+            borderTop: cardBorder,
+        },
+        packageSessions: {
+            fontSize: 13,
+            color: theme.colors.textSecondary,
+        },
+        priceContainer: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            gap: 4,
+        },
+        originalPrice: {
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            textDecoration: "line-through",
+        },
+        packagePrice: {
+            fontSize: 18,
+            fontWeight: 600,
+            color: theme.colors.primary,
+        },
+        discountBadge: {
+            fontSize: 11,
+            fontWeight: 600,
+            color: "#fff",
+            backgroundColor: theme.colors.success || "#16a34a",
+            padding: "2px 8px",
+            borderRadius: 999,
+        },
+        packageValidity: {
+            marginTop: 8,
+            fontSize: 12,
+            color: theme.colors.textSecondary,
+        },
+        packageDoctors: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 6,
+            marginBottom: 12,
+        },
+        doctorBadge: {
+            fontSize: 12,
+            color: theme.colors.text,
+            backgroundColor: theme.colors.backgroundSecondary || "#f1f5f9",
+            padding: "4px 10px",
+            borderRadius: 999,
+        },
+        consultationModes: {
+            display: "flex",
+            gap: 8,
+            marginBottom: 12,
+        },
+        modeBadge: {
+            fontSize: 11,
+            color: theme.colors.textSecondary,
+            backgroundColor: theme.colors.backgroundSecondary || "#f1f5f9",
+            padding: "4px 8px",
+            borderRadius: 6,
+        },
+        emptyState: {
+            textAlign: "center",
+            padding: "40px 20px",
+            color: theme.colors.textSecondary,
+            fontSize: 14,
+        },
+        actions: {
+            display: "flex",
+            gap: 12,
+            marginTop: 24,
+            paddingTop: 20,
+            borderTop: cardBorder,
+            justifyContent: "flex-end",
+        },
+        backBtn: {
+            padding: "10px 20px",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 600,
+            transition: "all 0.2s ease",
+            minHeight: 40,
+        },
+        nextBtn: {
+            padding: "10px 24px",
+            border: "none",
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.primary,
+            color: "#fff",
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 600,
+            transition: "all 0.2s ease",
+            minHeight: 40,
+        },
+        nextBtnDisabled: {
+            backgroundColor: theme.colors.textSecondary || "#9ca3af",
+            cursor: "not-allowed",
+            opacity: 0.6,
+        },
+    };
+};
+export default BookingOptionStep;

package/dist/components/ContactInformationStep.js

@@ -1,15 +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 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: "Name" }), _jsx("input", { type: "text", value: patientName, onChange: (e) => onNameChange(e.target.value), placeholder: "Enter your full name", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Email" }), _jsx("input", { type: "email", value: patientEmail, onChange: (e) => onEmailChange(e.target.value), placeholder: "Enter your email", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneInputContainer, children: [_jsx("input", { type: "text", value: countryCode, onChange: (e) => onCountryCodeChange(e.target.value), placeholder: "+91", style: {
+    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/ContactPreferenceStep.js

@@ -2,10 +2,19 @@ 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 "./uiComponents/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]);
-    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Preferred Contact Method" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "PHONE", checked: preferredContactMethod === "PHONE", onChange: (e) => onContactMethodChange(e.target.value) }), "Phone"] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "EMAIL", checked: preferredContactMethod === "EMAIL", onChange: (e) => onContactMethodChange(e.target.value) }), "Email"] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "BOTH", checked: preferredContactMethod === "BOTH", onChange: (e) => onContactMethodChange(e.target.value) }), "Both"] })] })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onSubmit, style: BUTTON_STYLES.primary, children: isLoading ? "Submitting..." : "Submit" })] })] }));
+    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/DoctorSelectModal.js

@@ -3,8 +3,10 @@ import { useState, useEffect } from "react";
 import { AppointmentService, } from "../services/AppointmentService";
 import { Select, SelectTrigger, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
 import { useTheme } from "../react/hooks/useTheme";
+import { useBreakpoint } from "../core/theme/responsive";
 export const DoctorSelectModal = ({ addresses: initialAddresses, addressDoctorsMap: initialAddressDoctorsMap, selectedAddressId: initialSelectedAddressId, selectedDoctorId: initialSelectedDoctorId, onCancel, onContinue, }) => {
     const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
     const [addresses, setAddresses] = useState(initialAddresses || []);
     const [addressDoctorsMap, setAddressDoctorsMap] = useState(initialAddressDoctorsMap || {});
     const [selectedAddressId, setSelectedAddressId] = useState(initialSelectedAddressId ? String(initialSelectedAddressId) : "");
@@ -62,7 +64,7 @@ export const DoctorSelectModal = ({ addresses: initialAddresses, addressDoctorsM
     const selectedDoctorLabel = doctorsForAddress.find((d) => String(d.id) === selectedDoctorId)?.name ||
         "";
     const canContinue = !!selectedAddressId && !!selectedDoctorId;
-    const styles = getStyles(theme);
+    const styles = getStyles(theme, breakpoint);
     return (_jsx("div", { style: {
             border: `1px solid ${theme.colors.border}`,
             borderRadius: "2px",
@@ -81,62 +83,106 @@ export const DoctorSelectModal = ({ addresses: initialAddresses, addressDoctorsM
                                                     textOverflow: "ellipsis",
                                                     whiteSpace: "nowrap",
                                                     flex: 1,
-                                                }, children: selectedDoctorLabel || "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsx("div", { style: styles.footer, children: _jsx("button", { style: {
-                                    ...styles.continueBtn,
-                                    opacity: canContinue ? 1 : 0.6,
-                                }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" }) })] })] }) }));
+                                                }, children: selectedDoctorLabel || "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { style: styles.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: {
+                                        ...styles.continueBtn,
+                                        opacity: canContinue ? 1 : 0.6,
+                                    }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" })] })] })] }) }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        modalWrapper: {
+            backgroundColor: theme.colors.background,
+            borderRadius,
+            maxWidth: isMobile || isTablet ? "100%" : 840,
+            margin: "0 auto",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+        },
+        headerWrapper: {
+            padding: isMobile ? "16px 20px" : "18px 24px",
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        contentWrapper: {
+            padding: isMobile ? "20px" : "24px",
+        },
+        title: {
+            fontSize: isMobile ? 16 : 18,
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.textOnPrimary,
+        },
+        fieldGroup: { marginBottom: isMobile ? 18 : 20 },
+        label: {
+            fontSize: 14,
+            fontWeight: 500,
+            marginBottom: 8,
+            display: "block",
+            color: theme.colors.text,
+        },
+        mandatory: { color: theme.colors.error, marginLeft: 4 },
+        optional: {
+            color: theme.colors.textSecondary,
+            fontWeight: 400,
+            marginLeft: 4,
+            fontSize: 13,
+        },
+        textarea: {
+            width: "100%",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            minHeight: 100,
+            padding: "12px 14px",
+            fontSize: 14,
+            resize: "vertical",
+            boxSizing: "border-box",
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            outline: "none",
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+        },
+        footer: {
+            marginTop: isMobile ? 20 : 24,
+            paddingTop: 20,
+            borderTop: cardBorder,
+            display: "flex",
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            alignItems: "center",
+            gap: 12,
+            flexDirection: isMobile ? "column" : "row",
+        },
+        brand: { color: theme.colors.primary, fontWeight: 600 },
+        backBtn: {
+            background: theme.colors.surface,
+            color: theme.colors.text,
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: isMobile ? "12px 20px" : "10px 20px",
+            cursor: "pointer",
+            width: isMobile ? "100%" : "auto",
+            minHeight: isMobile ? "44px" : "40px",
+            fontSize: 14,
+            transition: "all 0.2s ease",
+        },
+        continueBtn: {
+            background: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            border: "none",
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: isMobile ? "12px 20px" : "10px 20px",
+            cursor: "pointer",
+            width: isMobile ? "100%" : "auto",
+            minHeight: isMobile ? "44px" : "40px",
+            fontSize: 14,
+            transition: "all 0.2s ease",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
 };
-const getStyles = (theme) => ({
-    modalWrapper: {
-        backgroundColor: theme.colors.background,
-        borderRadius: 12,
-        maxWidth: 840,
-        margin: "0 auto",
-        fontFamily: theme.typography.fontFamily,
-        color: theme.colors.text,
-    },
-    headerWrapper: {
-        padding: "20px 24px 10px 24px",
-    },
-    contentWrapper: {
-        padding: "20px 24px 10px 24px",
-    },
-    title: { fontSize: 20, fontWeight: 600, margin: 0 },
-    fieldGroup: { marginBottom: 18 },
-    label: { fontSize: 15, fontWeight: 500, marginBottom: 6, display: "block" },
-    mandatory: { color: theme.colors.error, marginLeft: 4 },
-    optional: {
-        color: theme.colors.textSecondary,
-        fontWeight: 400,
-        marginLeft: 4,
-        fontSize: 13,
-    },
-    textarea: {
-        width: "100%",
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.radii.md,
-        minHeight: 80,
-        padding: "10px",
-        fontSize: 14,
-        resize: "vertical",
-        boxSizing: "border-box",
-    },
-    footer: {
-        marginTop: 24,
-        marginBottom: 10,
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        gap: 10,
-    },
-    brand: { color: theme.colors.primary, fontWeight: 600 },
-    continueBtn: {
-        background: theme.colors.secondary,
-        color: theme.colors.textOnSecondary,
-        border: "none",
-        borderRadius: theme.radii.md,
-        fontWeight: 600,
-        padding: "8px 22px",
-        cursor: "pointer",
-    },
-});