medos-sdk 1.1.10 → 1.1.11

package/dist/components/styles.js

@@ -11,7 +11,7 @@ export const CONTAINER_STYLES = {
         maxWidth: 720,
         background: "#fff",
         borderRadius: 12,
-        boxShadow: "0 8px 24px rgba(16,24,40,0.08)",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
         padding: 24,
         boxSizing: "border-box",
     },
@@ -19,43 +19,61 @@ export const CONTAINER_STYLES = {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        marginBottom: 16,
+        marginBottom: 20,
     },
     title: {
         marginLeft: 10,
         fontSize: 20,
         fontWeight: 600,
+        margin: 0,
     },
-    section: { marginTop: 12 },
+    section: { marginTop: 16 },
     errorMessage: {
-        marginBottom: 12,
+        marginBottom: 16,
+        padding: "12px 16px",
+        borderRadius: 8,
+        backgroundColor: "#fee2e2",
         color: "#ef4444",
-        fontWeight: 600,
+        fontWeight: 500,
+        fontSize: 14,
+        border: "1px solid rgba(239, 68, 68, 0.2)",
     },
     actions: {
         display: "flex",
-        gap: 8,
-        marginTop: 16,
+        gap: 12,
+        marginTop: 24,
+        paddingTop: 20,
+        borderTop: "1px solid #e5e7eb",
         justifyContent: "flex-end",
     },
 };
 export const BUTTON_STYLES = {
     primary: {
-        background: "#218838",
+        background: "#009b4d",
         color: "#fff",
         border: "none",
-        padding: "10px 14px",
+        padding: "10px 20px",
         borderRadius: 8,
         cursor: "pointer",
         fontWeight: 600,
+        fontSize: 14,
+        transition: "all 0.2s ease",
+        minHeight: 40,
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        lineHeight: "1.5",
     },
     secondary: {
         background: "#fff",
-        color: "#218838",
-        border: "1px solid #218838",
-        padding: "10px 14px",
+        color: "#111827",
+        border: "1px solid #e5e7eb",
+        padding: "10px 20px",
         borderRadius: 8,
         cursor: "pointer",
+        fontWeight: 600,
+        fontSize: 14,
+        transition: "all 0.2s ease",
+        minHeight: 40,
+        lineHeight: "1.5",
     },
 };
 export const PHONE_VERIFY_STYLES = {
@@ -64,17 +82,19 @@ export const PHONE_VERIFY_STYLES = {
         borderRadius: 12,
         overflow: "hidden",
         backgroundColor: "#fff",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
     },
     header: {
-        padding: "16px 24px",
+        padding: "18px 24px",
         borderBottom: "1px solid #e5e7eb",
-        backgroundColor: "#f9fafb",
+        backgroundColor: "#27903F",
+        color: "#fff",
     },
     title: {
         margin: 0,
         fontSize: 18,
         fontWeight: 600,
-        color: "#111827",
+        color: "#fff",
     },
     content: { padding: "24px" },
     label: {
@@ -84,34 +104,38 @@ export const PHONE_VERIFY_STYLES = {
         color: "#111827",
         marginBottom: 8,
     },
-    phoneInputContainer: { display: "flex", gap: 8 },
+    phoneInputContainer: { display: "flex", gap: 10 },
     phoneInput: {
         flex: 1,
-        padding: "10px 12px",
+        padding: "10px 14px",
         borderRadius: 8,
-        border: "1px solid #e6e9ef",
+        border: "1px solid #e5e7eb",
         fontSize: 14,
         outline: "none",
         color: "#111827",
         boxSizing: "border-box",
+        transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+        minHeight: 40,
     },
     phoneDisplay: {
-        padding: "10px 12px",
+        padding: "10px 14px",
         background: "#f9fafb",
         borderRadius: 8,
         fontSize: 14,
-        color: "#374151",
+        color: "#111827",
         fontWeight: 500,
+        border: "1px solid #e5e7eb",
     },
     otpInput: {
         width: "100%",
-        padding: "10px 12px",
-        border: "1px solid #d1d5db",
+        padding: "10px 14px",
+        border: "1px solid #e5e7eb",
         borderRadius: 8,
         fontSize: 14,
         outline: "none",
         color: "#111827",
         boxSizing: "border-box",
+        transition: "border-color 0.2s ease, box-shadow 0.2s ease",
     },
     otpHint: {
         marginTop: 8,
@@ -123,16 +147,16 @@ export const PHONE_VERIFY_STYLES = {
         padding: 16,
         borderRadius: 8,
         backgroundColor: "#F6FBF6",
-        border: "1px solid #218838",
+        border: "1px solid #4E8F50",
         display: "flex",
         alignItems: "center",
         gap: 12,
     },
-    successIcon: { fontSize: 24, color: "#218838" },
+    successIcon: { fontSize: 24, color: "#4E8F50" },
     successTitle: {
         fontSize: 14,
         fontWeight: 600,
-        color: "#218838",
+        color: "#4E8F50",
     },
     successSubtitle: {
         fontSize: 12,
@@ -153,19 +177,23 @@ export const PATIENT_DETAILS_STYLES = {
         border: "1px solid #E5E7EB",
         borderRadius: "12px",
         marginBottom: "24px",
+        overflow: "hidden",
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
     },
     sectionHeader: {
-        backgroundColor: "#F9FAFB",
-        padding: "16px 20px",
+        backgroundColor: "#27903F",
+        padding: "18px 24px",
         display: "flex",
         alignItems: "center",
         gap: "12px",
         borderBottom: "1px solid #E5E7EB",
+        color: "#fff",
     },
     sectionTitle: {
         fontSize: "18px",
         fontWeight: 600,
         margin: 0,
+        color: "#fff",
     },
     sectionBody: { padding: "24px" },
     gridRow: {
@@ -176,34 +204,37 @@ export const PATIENT_DETAILS_STYLES = {
     },
     label: {
         display: "block",
-        fontSize: 13,
-        marginBottom: 6,
-        color: "#374151",
+        fontSize: 14,
+        marginBottom: 8,
+        color: "#111827",
+        fontWeight: 500,
     },
     input: {
         width: "100%",
-        padding: "10px 12px",
+        padding: "10px 14px",
         borderRadius: 8,
-        border: "1px solid #e6e9ef",
+        border: "1px solid #e5e7eb",
         outline: "none",
         fontSize: 14,
         boxSizing: "border-box",
+        transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+        minHeight: 40,
     },
-    phoneDisplay: { display: "flex", gap: "8px" },
+    phoneDisplay: { display: "flex", gap: "10px" },
     phoneCode: {
         width: "100px",
-        padding: "10px 12px",
+        padding: "10px 14px",
         borderRadius: 8,
-        border: "1px solid #e6e9ef",
+        border: "1px solid #e5e7eb",
         backgroundColor: "#F9FAFB",
         fontSize: 14,
         boxSizing: "border-box",
     },
     phoneNumber: {
         flex: 1,
-        padding: "10px 12px",
+        padding: "10px 14px",
         borderRadius: 8,
-        border: "1px solid #e6e9ef",
+        border: "1px solid #e5e7eb",
         backgroundColor: "#F9FAFB",
         fontSize: 14,
         boxSizing: "border-box",
@@ -213,22 +244,22 @@ export const SUCCESS_STYLES = {
     container: {
         display: "flex",
         flexDirection: "column",
-        height: "100%",
-    },
-    header: {
-        marginTop: "-16px",
         alignItems: "center",
+        padding: "32px 24px",
         textAlign: "center",
-        color: "#27903F",
-        fontWeight: 800,
-        fontSize: "18px",
-        marginBottom: "20px",
+    },
+    header: {
+        marginBottom: "24px",
     },
     iconContainer: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "12px 0",
+        width: "72px",
+        height: "72px",
+        borderRadius: "50%",
+        backgroundColor: "#ecfdf5",
+        marginBottom: "20px",
     },
     detailsContainer: {
         display: "flex",
@@ -236,22 +267,32 @@ export const SUCCESS_STYLES = {
         alignItems: "center",
         gap: "12px",
         textAlign: "center",
-        color: "#27903F",
     },
-    detailsTitle: { fontWeight: 600, fontSize: "16px" },
+    detailsTitle: {
+        fontWeight: 600,
+        fontSize: "18px",
+        color: "#4E8F50",
+        margin: 0,
+    },
     detailsList: {
         display: "flex",
         flexDirection: "column",
         gap: "4px",
         fontSize: "14px",
         width: "100%",
-        maxWidth: "28rem",
+        maxWidth: "400px",
         textAlign: "center",
+        color: "#374151",
     },
     confirmationNote: {
-        marginTop: "8px",
-        fontSize: "12px",
+        marginTop: "12px",
+        fontSize: "14px",
         color: "#6B7280",
+        lineHeight: "1.5",
+    },
+    actionContainer: {
+        marginTop: "32px",
+        display: "flex",
+        justifyContent: "center",
     },
-    actionContainer: { marginTop: "24px" },
 };

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

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