medos-sdk 1.1.9 → 1.1.11

package/dist/components/types.d.ts

@@ -1,20 +1,19 @@
-import { Doctor, Slot, AddressItem } from "../services/AppointmentService";
-export type AppointmentCalenderProps = {
-    onError?: (err: Error) => void;
-};
+export type { AppointmentState, AppointmentAction, Patient, SessionPack, AvailablePackage, BookingOptionType, } from "./appointment-booking/types";
+export { INITIAL_STATE } from "./appointment-booking/types";
 export type PhoneVerificationStepProps = {
-    state: AppointmentState;
-    dispatch: React.Dispatch<AppointmentAction>;
+    state: any;
+    dispatch: React.Dispatch<any>;
     onSendOtp: () => Promise<void>;
     onVerifyOtp: () => Promise<void>;
     onBack: () => void;
     onContinue: () => void;
 };
 export type PatientDetailsStepProps = {
-    state: AppointmentState;
-    dispatch: React.Dispatch<AppointmentAction>;
+    state: any;
+    dispatch: React.Dispatch<any>;
     onBack: () => void;
     onSubmit: () => Promise<void>;
+    isFirstStep?: boolean;
 };
 export type SuccessStepProps = {
     onReset: () => void;
@@ -33,138 +32,12 @@ export type OtpInputSectionProps = {
     onOtpChange: (code: string) => void;
 };
 export type PatientInfoSectionProps = {
-    state: AppointmentState;
-    dispatch: React.Dispatch<AppointmentAction>;
+    state: any;
+    dispatch: React.Dispatch<any>;
 };
 export type AddressInfoSectionProps = {
-    state: AppointmentState;
-    dispatch: React.Dispatch<AppointmentAction>;
-};
-export interface AppointmentState {
-    step: number;
-    loading: boolean;
-    error: string | null;
-    workspaceId: number | null;
-    addresses: AddressItem[];
-    addressDoctorsMap: Record<number, Doctor[]>;
-    selectedAddress: number | null;
-    selectedDoctor: number | null;
-    selectedDate: Date;
-    slots: Slot[];
-    selectedSlot: Slot | null;
-    consultationMode: "ONLINE" | "OFFLINE";
-    consultationCharge: string;
-    patientName: string;
-    patientAge: string;
-    patientEmail: string;
-    patientGender: string;
-    bloodGroup: string;
-    patientAddress: string;
-    patientCity: string;
-    patientState: string;
-    patientCountry: string;
-    patientZipcode: string;
-    patientLandmark: string;
-    countryCode: string;
-    patientPhone: string;
-    otpCode: string;
-    otpSent: boolean;
-    otpVerified: boolean;
-    otpSending: boolean;
-    otpVerifying: boolean;
-}
-export type AppointmentAction = {
-    type: "SET_STEP";
-    payload: number;
-} | {
-    type: "SET_LOADING";
-    payload: boolean;
-} | {
-    type: "SET_ERROR";
-    payload: string | null;
-} | {
-    type: "SET_WORKSPACE";
-    payload: {
-        id: number;
-        addresses: AddressItem[];
-    };
-} | {
-    type: "SET_SELECTED_ADDRESS";
-    payload: number | null;
-} | {
-    type: "SET_SELECTED_DOCTOR";
-    payload: number | null;
-} | {
-    type: "SET_SELECTED_DATE";
-    payload: Date;
-} | {
-    type: "SET_SLOTS";
-    payload: Slot[];
-} | {
-    type: "SET_SELECTED_SLOT";
-    payload: Slot | null;
-} | {
-    type: "SET_CONSULTATION_MODE";
-    payload: "ONLINE" | "OFFLINE";
-} | {
-    type: "SET_CONSULTATION_CHARGE";
-    payload: string;
-} | {
-    type: "SET_PATIENT_NAME";
-    payload: string;
-} | {
-    type: "SET_PATIENT_AGE";
-    payload: string;
-} | {
-    type: "SET_PATIENT_EMAIL";
-    payload: string;
-} | {
-    type: "SET_PATIENT_GENDER";
-    payload: string;
-} | {
-    type: "SET_BLOOD_GROUP";
-    payload: string;
-} | {
-    type: "SET_PATIENT_ADDRESS";
-    payload: string;
-} | {
-    type: "SET_PATIENT_CITY";
-    payload: string;
-} | {
-    type: "SET_PATIENT_STATE";
-    payload: string;
-} | {
-    type: "SET_PATIENT_COUNTRY";
-    payload: string;
-} | {
-    type: "SET_PATIENT_ZIPCODE";
-    payload: string;
-} | {
-    type: "SET_PATIENT_LANDMARK";
-    payload: string;
-} | {
-    type: "SET_COUNTRY_CODE";
-    payload: string;
-} | {
-    type: "SET_PATIENT_PHONE";
-    payload: string;
-} | {
-    type: "SET_OTP_CODE";
-    payload: string;
-} | {
-    type: "SET_OTP_SENT";
-    payload: boolean;
-} | {
-    type: "SET_OTP_VERIFIED";
-    payload: boolean;
-} | {
-    type: "SET_OTP_SENDING";
-    payload: boolean;
-} | {
-    type: "SET_OTP_VERIFYING";
-    payload: boolean;
-} | {
-    type: "RESET_FORM";
+    state: any;
+    dispatch: React.Dispatch<any>;
 };
 export declare const COUNTRY_CODES: {
     code: string;
@@ -178,4 +51,4 @@ export declare const BLOOD_GROUP_OPTIONS: {
     value: string;
     label: string;
 }[];
-export declare const INITIAL_STATE: AppointmentState;
+export declare const mapBloodGroupToApi: (uiBloodGroup: string) => string;

package/dist/components/types.js

@@ -1,3 +1,4 @@
+export { INITIAL_STATE } from "./appointment-booking/types";
 export const COUNTRY_CODES = [
     { code: "+91", label: "🇮🇳 +91" },
     { code: "+1", label: "🇺🇸 +1" },
@@ -19,37 +20,19 @@ export const BLOOD_GROUP_OPTIONS = [
     { value: "AB-", label: "AB-" },
     { value: "O+", label: "O+" },
     { value: "O-", label: "O-" },
+    { value: "UNKNOWN", label: "Unknown" },
 ];
-export const INITIAL_STATE = {
-    step: 0,
-    loading: false,
-    error: null,
-    workspaceId: null,
-    addresses: [],
-    addressDoctorsMap: {},
-    selectedAddress: null,
-    selectedDoctor: null,
-    selectedDate: new Date(),
-    slots: [],
-    selectedSlot: null,
-    consultationMode: "OFFLINE",
-    consultationCharge: "",
-    patientName: "",
-    patientAge: "",
-    patientEmail: "",
-    patientGender: "",
-    bloodGroup: "",
-    patientAddress: "",
-    patientCity: "",
-    patientState: "",
-    patientCountry: "",
-    patientZipcode: "",
-    patientLandmark: "",
-    countryCode: "+91",
-    patientPhone: "",
-    otpCode: "",
-    otpSent: false,
-    otpVerified: false,
-    otpSending: false,
-    otpVerifying: false,
+export const mapBloodGroupToApi = (uiBloodGroup) => {
+    const bloodGroupMap = {
+        "A+": "A_POSITIVE",
+        "A-": "A_NEGATIVE",
+        "B+": "B_POSITIVE",
+        "B-": "B_NEGATIVE",
+        "AB+": "AB_POSITIVE",
+        "AB-": "AB_NEGATIVE",
+        "O+": "O_POSITIVE",
+        "O-": "O_NEGATIVE",
+        UNKNOWN: "UNKNOWN",
+    };
+    return bloodGroupMap[uiBloodGroup] || "UNKNOWN";
 };

package/dist/components/uiComponents/SelectDropdown.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 interface SelectProps {
     children: React.ReactNode;
     value?: string;

package/dist/components/uiComponents/SelectDropdown.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { ChevronDownIcon } from '../Icons/ChevronDownIcon';
-import { Check } from '../Icons/Check';
+import * as React from "react";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon";
+import { Check } from "../Icons/Check";
 const cn = (...classes) => {
-    return classes.filter(Boolean).join(' ');
+    return classes.filter(Boolean).join(" ");
 };
-if (typeof document !== 'undefined') {
-    const styleId = 'custom-select-styles';
+if (typeof document !== "undefined") {
+    const styleId = "custom-select-styles";
     if (!document.getElementById(styleId)) {
-        const styleElement = document.createElement('style');
+        const styleElement = document.createElement("style");
         styleElement.id = styleId;
         styleElement.innerHTML = `
     /* Container */
@@ -226,14 +226,14 @@ const SelectContext = React.createContext(undefined);
 const useSelectContext = () => {
     const context = React.useContext(SelectContext);
     if (!context) {
-        throw new Error('Select components must be used within a Select');
+        throw new Error("Select components must be used within a Select");
     }
     return context;
 };
-const Select = ({ children, value, onValueChange, defaultValue, disabled = false }) => {
+const Select = ({ children, value, onValueChange, defaultValue, disabled = false, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedValue, setSelectedValue] = React.useState(value || defaultValue || '');
-    const [selectedLabel, setSelectedLabel] = React.useState('');
+    const [selectedValue, setSelectedValue] = React.useState(value || defaultValue || "");
+    const [selectedLabel, setSelectedLabel] = React.useState("");
     const triggerRef = React.useRef(null);
     const contentRef = React.useRef(null);
     React.useEffect(() => {
@@ -251,8 +251,8 @@ const Select = ({ children, value, onValueChange, defaultValue, disabled = false
             }
         };
         if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
         }
     }, [isOpen]);
     const handleSelect = (value, label) => {
@@ -276,27 +276,27 @@ const Select = ({ children, value, onValueChange, defaultValue, disabled = false
 };
 const SelectTrigger = React.forwardRef(({ children, className, error = false, ...props }, ref) => {
     const { isOpen, setIsOpen, triggerRef, disabled } = useSelectContext();
-    return (_jsxs("button", { ref: triggerRef, type: "button", className: cn('select-trigger', error && 'select-trigger-error', className), onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", ...props, children: [children, _jsx(ChevronDownIcon, { className: cn('select-icon', error && 'select-icon-error') })] }));
+    return (_jsxs("button", { ref: triggerRef, type: "button", className: cn("select-trigger", error && "select-trigger-error", className), onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", ...props, children: [children, _jsx(ChevronDownIcon, { className: cn("select-icon", error && "select-icon-error") })] }));
 });
-SelectTrigger.displayName = 'SelectTrigger';
-const SelectValue = ({ placeholder = 'Select...' }) => {
+SelectTrigger.displayName = "SelectTrigger";
+const SelectValue = ({ placeholder = "Select...", }) => {
     const { selectedLabel, selectedValue } = useSelectContext();
-    return (_jsx("span", { className: cn('select-value', !selectedValue && 'select-placeholder'), children: selectedLabel || placeholder }));
+    return (_jsx("span", { className: cn("select-value", !selectedValue && "select-placeholder"), children: selectedLabel || placeholder }));
 };
 const SelectContent = React.forwardRef(({ children, className, ...props }, ref) => {
     const { isOpen, contentRef } = useSelectContext();
     if (!isOpen)
         return null;
-    return (_jsx("div", { ref: contentRef, className: cn('select-content', className), role: "listbox", ...props, children: _jsx("div", { className: "select-viewport", children: children }) }));
+    return (_jsx("div", { ref: contentRef, className: cn("select-content", className), role: "listbox", ...props, children: _jsx("div", { className: "select-viewport", children: children }) }));
 });
-SelectContent.displayName = 'SelectContent';
+SelectContent.displayName = "SelectContent";
 const SelectItem = React.forwardRef(({ children, value, className, disabled = false, ...props }, ref) => {
     const { selectedValue, handleSelect } = useSelectContext();
     const isSelected = selectedValue === value;
-    return (_jsxs("div", { ref: ref, className: cn('select-item', isSelected && 'select-item-selected', disabled && 'select-item-disabled', className), onClick: () => !disabled && handleSelect(value, children), role: "option", "aria-selected": isSelected, "data-disabled": disabled, ...props, children: [isSelected && (_jsx("span", { className: "select-item-indicator", children: _jsx(Check, {}) })), _jsx("span", { className: "select-item-text", children: children })] }));
+    return (_jsxs("div", { ref: ref, className: cn("select-item", isSelected && "select-item-selected", disabled && "select-item-disabled", className), onClick: () => !disabled && handleSelect(value, children), role: "option", "aria-selected": isSelected, "data-disabled": disabled, ...props, children: [isSelected && (_jsx("span", { className: "select-item-indicator", children: _jsx(Check, {}) })), _jsx("span", { className: "select-item-text", children: children })] }));
 });
-SelectItem.displayName = 'SelectItem';
-const SelectGroup = ({ children, className }) => (_jsx("div", { className: cn('select-group', className), children: children }));
-const SelectLabel = ({ children, className }) => (_jsx("div", { className: cn('select-label', className), children: children }));
-const SelectSeparator = ({ className }) => (_jsx("div", { className: cn('select-separator', className) }));
+SelectItem.displayName = "SelectItem";
+const SelectGroup = ({ children, className }) => (_jsx("div", { className: cn("select-group", className), children: children }));
+const SelectLabel = ({ children, className }) => (_jsx("div", { className: cn("select-label", className), children: children }));
+const SelectSeparator = ({ className }) => (_jsx("div", { className: cn("select-separator", className) }));
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };

package/dist/components/utils.d.ts

@@ -1,4 +1,7 @@
 export declare const formatDateToISO: (date: Date) => string;
+export declare const formatDate: (date: Date | string | null) => string;
+export declare const formatTime: (timeStr: string | number) => string;
+export declare const calculateDuration: (startTime?: string | number, endTime?: string | number, defaultDuration?: number) => number;
 export declare const parsePatientName: (fullName: string) => {
     firstName: string;
     lastName: string;

package/dist/components/utils.js

@@ -4,6 +4,65 @@ export const formatDateToISO = (date) => {
     const day = String(date.getDate()).padStart(2, "0");
     return `${year}-${month}-${day}`;
 };
+export const formatDate = (date) => {
+    if (!date)
+        return "Not selected";
+    try {
+        const dateObj = typeof date === "string" ? new Date(date) : date;
+        return dateObj.toLocaleDateString("en-US", {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        });
+    }
+    catch {
+        return String(date);
+    }
+};
+export const formatTime = (timeStr) => {
+    try {
+        if (typeof timeStr === "number" || !Number.isNaN(Number(timeStr))) {
+            const time = new Date(Number(timeStr));
+            return time.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
+            });
+        }
+        if (timeStr.includes(":") && timeStr.length <= 5) {
+            const time = new Date(`2000-01-01T${timeStr}`);
+            return time.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
+            });
+        }
+        const time = new Date(timeStr);
+        return time.toLocaleTimeString("en-US", {
+            hour: "numeric",
+            minute: "2-digit",
+            hour12: true,
+        });
+    }
+    catch {
+        return String(timeStr);
+    }
+};
+export const calculateDuration = (startTime, endTime, defaultDuration = 60) => {
+    if (!startTime || !endTime)
+        return defaultDuration;
+    try {
+        const start = new Date(startTime);
+        const end = new Date(endTime);
+        const diffMs = end.getTime() - start.getTime();
+        const diffMinutes = Math.round(diffMs / (1000 * 60));
+        return diffMinutes > 0 ? diffMinutes : defaultDuration;
+    }
+    catch {
+        return defaultDuration;
+    }
+};
 export const parsePatientName = (fullName) => {
     const nameParts = fullName.trim().split(/\s+/);
     const firstName = nameParts[0] || "Patient";

package/dist/components/validation.d.ts

@@ -1,2 +1,4 @@
 export declare const validatePhoneNumber: (phone: string) => boolean;
 export declare const validateCountryCode: (code: string) => boolean;
+export declare const validateBloodGroup: (bloodGroup: string) => boolean;
+export declare const validateDateOfBirth: (dob: string) => boolean;

package/dist/components/validation.js

@@ -5,3 +5,44 @@ export const validatePhoneNumber = (phone) => {
 export const validateCountryCode = (code) => {
     return /^\+[1-9]\d{0,3}$/.test(code);
 };
+export const validateBloodGroup = (bloodGroup) => {
+    const validBloodGroups = [
+        "A+",
+        "A-",
+        "B+",
+        "B-",
+        "AB+",
+        "AB-",
+        "O+",
+        "O-",
+        "UNKNOWN",
+    ];
+    return validBloodGroups.includes(bloodGroup);
+};
+export const validateDateOfBirth = (dob) => {
+    if (!dob)
+        return false;
+    const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+    if (!dateRegex.test(dob))
+        return false;
+    const [yearStr, monthStr, dayStr] = dob.split("-");
+    const year = parseInt(yearStr, 10);
+    const month = parseInt(monthStr, 10);
+    const day = parseInt(dayStr, 10);
+    if (month < 1 || month > 12 || day < 1 || day > 31)
+        return false;
+    const date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year ||
+        date.getMonth() !== month - 1 ||
+        date.getDate() !== day) {
+        return false;
+    }
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    date.setHours(0, 0, 0, 0);
+    if (date > today)
+        return false;
+    if (year < 1900)
+        return false;
+    return true;
+};

package/dist/core/theme/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./themes";
 export * from "./utils";
+export * from "./responsive";

package/dist/core/theme/index.js

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./themes";
 export * from "./utils";
+export * from "./responsive";

package/dist/core/theme/responsive.d.ts

@@ -0,0 +1,15 @@
+import { MedosTheme } from "./types";
+export type Breakpoint = "mobile" | "tablet" | "desktop" | "wide";
+export declare function useMediaQuery(query: string): boolean;
+export declare function useBreakpoint(theme: MedosTheme): Breakpoint;
+export declare function useIsMobile(theme: MedosTheme): boolean;
+export declare function useIsTablet(theme: MedosTheme): boolean;
+export declare function useIsDesktop(theme: MedosTheme): boolean;
+export declare function useResponsiveValue<T>(theme: MedosTheme, values: Partial<Record<Breakpoint, T>>): T | undefined;
+export declare function responsiveStyles(styles: Partial<Record<Breakpoint | "base", React.CSSProperties>>, currentBreakpoint: Breakpoint): React.CSSProperties;
+export declare function getResponsiveMaxWidth(theme: MedosTheme, breakpoint: Breakpoint, customMaxWidths?: Partial<Record<Breakpoint, string>>): string;
+export declare function getResponsivePadding(theme: MedosTheme, breakpoint: Breakpoint): string;
+export declare function getResponsiveFontSize(theme: MedosTheme, breakpoint: Breakpoint, size?: keyof MedosTheme["typography"]): string;
+export declare function isTouchDevice(): boolean;
+export declare const MIN_TOUCH_TARGET_SIZE = "44px";
+export declare function getResponsiveInputHeight(breakpoint: Breakpoint): string;

package/dist/core/theme/responsive.js

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+export function useMediaQuery(query) {
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(query);
+        setMatches(mediaQuery.matches);
+        const handler = (event) => {
+            setMatches(event.matches);
+        };
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener("change", handler);
+            return () => mediaQuery.removeEventListener("change", handler);
+        }
+        else {
+            mediaQuery.addListener(handler);
+            return () => mediaQuery.removeListener(handler);
+        }
+    }, [query]);
+    return matches;
+}
+export function useBreakpoint(theme) {
+    const isWide = useMediaQuery(`(min-width: ${theme.breakpoints.wide})`);
+    const isDesktop = useMediaQuery(`(min-width: ${theme.breakpoints.desktop})`);
+    const isTablet = useMediaQuery(`(min-width: ${theme.breakpoints.tablet})`);
+    if (isWide)
+        return "wide";
+    if (isDesktop)
+        return "desktop";
+    if (isTablet)
+        return "tablet";
+    return "mobile";
+}
+export function useIsMobile(theme) {
+    return useMediaQuery(`(max-width: ${parseInt(theme.breakpoints.tablet) - 1}px)`);
+}
+export function useIsTablet(theme) {
+    const minWidth = theme.breakpoints.tablet;
+    const maxWidth = `${parseInt(theme.breakpoints.desktop) - 1}px`;
+    return useMediaQuery(`(min-width: ${minWidth}) and (max-width: ${maxWidth})`);
+}
+export function useIsDesktop(theme) {
+    return useMediaQuery(`(min-width: ${theme.breakpoints.desktop})`);
+}
+export function useResponsiveValue(theme, values) {
+    const breakpoint = useBreakpoint(theme);
+    if (values[breakpoint] !== undefined) {
+        return values[breakpoint];
+    }
+    if (breakpoint === "wide" && values.desktop !== undefined) {
+        return values.desktop;
+    }
+    if ((breakpoint === "desktop" || breakpoint === "wide") &&
+        values.tablet !== undefined) {
+        return values.tablet;
+    }
+    if (values.mobile !== undefined) {
+        return values.mobile;
+    }
+    return undefined;
+}
+export function responsiveStyles(styles, currentBreakpoint) {
+    const baseStyles = styles.base || {};
+    const breakpointStyles = styles[currentBreakpoint] || {};
+    return {
+        ...baseStyles,
+        ...breakpointStyles,
+    };
+}
+export function getResponsiveMaxWidth(theme, breakpoint, customMaxWidths) {
+    if (customMaxWidths?.[breakpoint]) {
+        return customMaxWidths[breakpoint];
+    }
+    const defaults = {
+        mobile: "100%",
+        tablet: "100%",
+        desktop: "840px",
+        wide: "1200px",
+    };
+    return defaults[breakpoint];
+}
+export function getResponsivePadding(theme, breakpoint) {
+    const paddingMap = {
+        mobile: "md",
+        tablet: "lg",
+        desktop: "xl",
+        wide: "2xl",
+    };
+    return theme.spacing[paddingMap[breakpoint]];
+}
+export function getResponsiveFontSize(theme, breakpoint, size = "fontSizeMd") {
+    if (breakpoint === "mobile" && size.startsWith("fontSize")) {
+        const sizeMap = {
+            fontSize3xl: "fontSize2xl",
+            fontSize2xl: "fontSizeXl",
+            fontSizeXl: "fontSizeLg",
+            fontSizeLg: "fontSizeMd",
+        };
+        const adjustedSize = sizeMap[size] || size;
+        return theme.typography[adjustedSize];
+    }
+    return theme.typography[size];
+}
+export function isTouchDevice() {
+    return ("ontouchstart" in window ||
+        navigator.maxTouchPoints > 0 ||
+        navigator.msMaxTouchPoints > 0);
+}
+export const MIN_TOUCH_TARGET_SIZE = "44px";
+export function getResponsiveInputHeight(breakpoint) {
+    return breakpoint === "mobile" && isTouchDevice()
+        ? MIN_TOUCH_TARGET_SIZE
+        : "40px";
+}

package/dist/core/theme/themes.js

@@ -18,11 +18,11 @@ export const defaultTheme = {
         borderFocus: "#27903F",
         text: "#111827",
         textSecondary: "#374151",
-        textTertiary: "#6b7280",
+        textTertiary: "#4E8F50",
         textDisabled: "#9ca3af",
         textOnPrimary: "#fff",
         textOnSecondary: "#fff",
-        success: "#10b981",
+        success: "#4E8F50",
         successBackground: "#ecfdf5",
         successBorder: "#6ee7b7",
         error: "#ef4444",
@@ -84,6 +84,12 @@ export const defaultTheme = {
         normal: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
         slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
     },
+    breakpoints: {
+        mobile: "320px",
+        tablet: "768px",
+        desktop: "1024px",
+        wide: "1280px",
+    },
 };
 export const modernTheme = {
     name: "modern",
@@ -95,7 +101,7 @@ export const modernTheme = {
         secondaryHover: "#ff5722",
         accent: "#3b82f6",
         accentHover: "#2563eb",
-        background: "#ffffff",
+        background: "#fff",
         backgroundSecondary: "#f8fafc",
         backgroundTertiary: "#f1f5f9",
         surface: "#ffffff",
@@ -109,7 +115,7 @@ export const modernTheme = {
         textDisabled: "#cbd5e1",
         textOnPrimary: "#ffffff",
         textOnSecondary: "#ffffff",
-        success: "#10b981",
+        success: "#4E8F50",
         successBackground: "#ecfdf5",
         successBorder: "#6ee7b7",
         error: "#ef4444",
@@ -171,6 +177,12 @@ export const modernTheme = {
         normal: "200ms cubic-bezier(0.4, 0, 0.2, 1)",
         slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
     },
+    breakpoints: {
+        mobile: "320px",
+        tablet: "768px",
+        desktop: "1024px",
+        wide: "1280px",
+    },
 };
 export const themes = {
     default: defaultTheme,