@cas-parser/connect 1.1.0

package/dist/portfolio-connect.umd.js

@@ -0,0 +1,1769 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom/client')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom/client'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PortfolioConnect = {}, global.React, global.ReactDOM));
+})(this, (function (exports, React, ReactDOM) { 'use strict';
+
+    const Modal = ({ isOpen, onClose, onBack, showBackButton = false, children, width = 400, isSandbox = false, }) => {
+        const overlayRef = React.useRef(null);
+        React.useEffect(() => {
+            if (isOpen) {
+                document.body.style.overflow = 'hidden';
+            }
+            else {
+                document.body.style.overflow = '';
+            }
+            return () => {
+                document.body.style.overflow = '';
+            };
+        }, [isOpen]);
+        if (!isOpen)
+            return null;
+        const handleOverlayClick = (e) => {
+            if (e.target === overlayRef.current) {
+                onClose();
+            }
+        };
+        const handleHeaderButtonClick = () => {
+            if (showBackButton && onBack) {
+                onBack();
+            }
+            else {
+                onClose();
+            }
+        };
+        return (React.createElement("div", { ref: overlayRef, onClick: handleOverlayClick, style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 10000,
+                padding: 16,
+            } },
+            React.createElement("div", { style: {
+                    backgroundColor: '#fff',
+                    borderRadius: 16,
+                    width: '100%',
+                    maxWidth: width,
+                    maxHeight: '90vh',
+                    overflow: 'auto',
+                    position: 'relative',
+                    boxShadow: '0 25px 80px rgba(0, 0, 0, 0.25)',
+                } },
+                isSandbox && (React.createElement("div", { style: {
+                        backgroundColor: '#fef3c7',
+                        borderBottom: '1px solid #fcd34d',
+                        padding: '6px 16px',
+                        fontSize: 12,
+                        fontWeight: 600,
+                        color: '#92400e',
+                        textAlign: 'center',
+                        borderTopLeftRadius: 16,
+                        borderTopRightRadius: 16,
+                    } }, "\uD83E\uDDEA Sandbox Mode \u2014 Test data only")),
+                React.createElement("button", { onClick: handleHeaderButtonClick, style: {
+                        position: 'absolute',
+                        top: isSandbox ? 40 : 12,
+                        left: showBackButton ? 12 : 'auto',
+                        right: showBackButton ? 'auto' : 12,
+                        background: 'none',
+                        border: 'none',
+                        fontSize: showBackButton ? 20 : 28,
+                        cursor: 'pointer',
+                        color: '#6b7280',
+                        lineHeight: 1,
+                        padding: 8,
+                        zIndex: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: 8,
+                        transition: 'background-color 0.15s',
+                    }, onMouseOver: (e) => e.currentTarget.style.backgroundColor = '#f3f4f6', onMouseOut: (e) => e.currentTarget.style.backgroundColor = 'transparent', "aria-label": showBackButton ? 'Back' : 'Close' }, showBackButton ? '←' : '×'),
+                children)));
+    };
+
+    // Search by sender emails - official CAS statement sources
+    const CAS_SENDERS = {
+        'CAMS_KFINTECH': ['donotreply@camsonline.com', 'samfs@kfintech.com'],
+        'CDSL': ['ecas@cdslstatement.com'],
+        'NSDL': ['nsdl-cas@nsdl.co.in'],
+    };
+    // Build search query for sender emails
+    const buildSearchQuery = (type) => {
+        const senders = type ? CAS_SENDERS[type] : Object.values(CAS_SENDERS).flat();
+        const fromQuery = senders.map(s => `from:${s}`).join(' OR ');
+        return `(${fromQuery}) has:attachment`;
+    };
+    // Official brand logos as inline SVG
+    const GmailLogo = () => (React.createElement("svg", { width: "20", height: "16", viewBox: "0 0 24 18", fill: "none" },
+        React.createElement("path", { d: "M1.636 18H5.455V8.682L0 4.91V16.364C0 17.267.733 18 1.636 18z", fill: "#4285F4" }),
+        React.createElement("path", { d: "M18.545 18h3.819c.904 0 1.636-.732 1.636-1.636V4.91l-5.455 3.772V18z", fill: "#34A853" }),
+        React.createElement("path", { d: "M18.545 1.636V8.682L24 4.91v-1.91c0-2.022-2.309-3.175-3.927-1.963l-1.528 1.109z", fill: "#FBBC04" }),
+        React.createElement("path", { d: "M5.455 8.682V1.636l6.545 4.91 6.545-4.91v7.046L12 13.592 5.455 8.682z", fill: "#EA4335" }),
+        React.createElement("path", { d: "M0 2.999v1.91l5.455 3.773V1.636L3.927.527C2.31-.685 0 .468 0 2.999z", fill: "#C5221F" })));
+    const OutlookLogo = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 32 32", fill: "none" },
+        React.createElement("path", { d: "M19.484 7.937v5.477l1.916 1.205a.489.489 0 00.21.063.489.489 0 00.229-.063l8.088-5.234a1.455 1.455 0 00-.741-1.448H19.484z", fill: "#0072C6" }),
+        React.createElement("path", { d: "M19.484 15.457l1.747 1.2a.522.522 0 00.543 0c-.3.181 8.073-5.378 8.073-5.378v10.795a1.474 1.474 0 01-1.474 1.474h-8.889V15.457z", fill: "#0072C6" }),
+        React.createElement("path", { d: "M10.44 12.932a1.927 1.927 0 00-1.384-.543 1.9 1.9 0 00-1.387.543 1.927 1.927 0 00-.543 1.384v3.086a1.927 1.927 0 00.543 1.384 1.864 1.864 0 001.384.543 1.927 1.927 0 001.387-.543 1.9 1.9 0 00.543-1.384v-3.086a1.927 1.927 0 00-.543-1.384z", fill: "#0072C6" }),
+        React.createElement("path", { d: "M18.044 5.116H8.044a1.474 1.474 0 00-1.474 1.474v1.209l6.3 4.5 5.174-3.15V6.59a1.474 1.474 0 00-1.474-1.474H8.044z", fill: "#0072C6" }),
+        React.createElement("path", { d: "M1.474 9.789h16.842v14.737H1.474A1.474 1.474 0 010 23.053V11.263a1.474 1.474 0 011.474-1.474z", fill: "#0072C6" }),
+        React.createElement("ellipse", { cx: "9.263", cy: "16.842", rx: "3.789", ry: "4.421", stroke: "#fff", strokeWidth: "1.5", fill: "none" })));
+    const YahooLogo = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 32 32", fill: "none" },
+        React.createElement("path", { d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2z", fill: "#5C0DAC" }),
+        React.createElement("path", { d: "M22.287 10.5h-2.844l-3.118 6.066L13.178 10.5h-2.89l4.622 8.37v4.63h2.666v-4.63l4.711-8.37z", fill: "#fff" })));
+    // Generate provider URLs based on selected CAS type
+    const getProviders = (selectedType) => {
+        const query = buildSearchQuery(selectedType);
+        const encodedQuery = encodeURIComponent(query);
+        return [
+            {
+                name: 'Gmail',
+                Logo: GmailLogo,
+                url: `https://mail.google.com/mail/u/0/#search/${encodedQuery}`
+            },
+            {
+                name: 'Outlook',
+                Logo: OutlookLogo,
+                url: `https://outlook.live.com/mail/0/deeplink?version=20200615005&search=${encodedQuery}`
+            },
+            {
+                name: 'Yahoo',
+                Logo: YahooLogo,
+                url: `https://mail.yahoo.com/d/search/keyword=${encodedQuery}`
+            }
+        ];
+    };
+    const ShortcutLinks = ({ selectedType, onSearchClick }) => {
+        const providers = getProviders(selectedType);
+        return (React.createElement("div", { style: { marginBottom: 16 } },
+            React.createElement("div", { style: {
+                    fontSize: 12,
+                    color: '#6b7280',
+                    marginBottom: 10,
+                    fontWeight: 500
+                } }, "Find statement in your inbox"),
+            React.createElement("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(3, 1fr)',
+                    gap: 10
+                } }, providers.map((provider) => (React.createElement("a", { key: provider.name, href: provider.url, target: "_blank", rel: "noopener noreferrer", onClick: () => onSearchClick?.(provider.name), style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 10,
+                    backgroundColor: '#f9fafb',
+                    borderRadius: 8,
+                    textDecoration: 'none',
+                    border: '1px solid #e5e7eb',
+                    transition: 'all 0.15s',
+                    cursor: 'pointer',
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = '#eff6ff';
+                    e.currentTarget.style.borderColor = '#2563eb';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = '#f9fafb';
+                    e.currentTarget.style.borderColor = '#e5e7eb';
+                } },
+                React.createElement(provider.Logo, null),
+                React.createElement("span", { style: { fontSize: 11, color: '#374151', fontWeight: 500, marginTop: 4 } }, provider.name)))))));
+    };
+
+    const UploadZone = ({ onFileSelect, isProcessing, progress }) => {
+        const [file, setFile] = React.useState(null);
+        const [password, setPassword] = React.useState('');
+        const [isDragOver, setIsDragOver] = React.useState(false);
+        const inputRef = React.useRef(null);
+        const handleDrop = React.useCallback((e) => {
+            e.preventDefault();
+            setIsDragOver(false);
+            const droppedFile = e.dataTransfer.files[0];
+            if (droppedFile?.type === 'application/pdf') {
+                setFile(droppedFile);
+            }
+        }, []);
+        const handleFileChange = (e) => {
+            const selectedFile = e.target.files?.[0];
+            if (selectedFile) {
+                setFile(selectedFile);
+            }
+        };
+        const handleSubmit = () => {
+            if (file) {
+                onFileSelect(file, password);
+            }
+        };
+        if (isProcessing) {
+            return (React.createElement("div", { style: { textAlign: 'center', padding: '50px 20px' } },
+                React.createElement("div", { style: {
+                        width: 56,
+                        height: 56,
+                        backgroundColor: '#eff6ff',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        margin: '0 auto 20px',
+                    } },
+                    React.createElement("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#2563eb", strokeWidth: "2" },
+                        React.createElement("path", { d: "M21 12V7H5a2 2 0 0 1 0-4h14v4" }),
+                        React.createElement("path", { d: "M3 5v14a2 2 0 0 0 2 2h16v-5" }),
+                        React.createElement("path", { d: "M18 12a2 2 0 0 0 0 4h4v-4Z" }))),
+                React.createElement("h3", { style: { margin: '0 0 8px', fontSize: 18, fontWeight: 600, color: '#1f2937' } }, "Reading Your Investments"),
+                React.createElement("p", { style: { color: '#6b7280', marginBottom: 24, fontSize: 14 } }, "Extracting holdings, transactions & values..."),
+                React.createElement("div", { style: {
+                        height: 6,
+                        backgroundColor: '#e5e7eb',
+                        borderRadius: 3,
+                        overflow: 'hidden',
+                        maxWidth: 240,
+                        margin: '0 auto',
+                    } },
+                    React.createElement("div", { style: {
+                            height: '100%',
+                            width: `${progress}%`,
+                            backgroundColor: '#2563eb',
+                            transition: 'width 0.3s ease',
+                        } })),
+                React.createElement("div", { style: { fontSize: 12, color: '#9ca3af', marginTop: 10 } }, progress < 50 ? 'Uploading...' : progress < 90 ? 'Processing...' : 'Almost done!')));
+        }
+        if (!file) {
+            return (React.createElement("div", null,
+                React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, margin: '0 0 16px', color: '#1f2937' } }, "Upload Your Statement"),
+                React.createElement("div", { onDragOver: (e) => { e.preventDefault(); setIsDragOver(true); }, onDragLeave: () => setIsDragOver(false), onDrop: handleDrop, onClick: () => inputRef.current?.click(), style: {
+                        border: `2px dashed ${isDragOver ? '#2563eb' : '#d1d5db'}`,
+                        borderRadius: 12,
+                        padding: '36px 20px',
+                        textAlign: 'center',
+                        cursor: 'pointer',
+                        backgroundColor: isDragOver ? '#eff6ff' : '#f9fafb',
+                        transition: 'all 0.2s',
+                    } },
+                    React.createElement("input", { ref: inputRef, type: "file", accept: ".pdf", onChange: handleFileChange, style: { display: 'none' } }),
+                    React.createElement("div", { style: { marginBottom: 12 } },
+                        React.createElement("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "1.5" },
+                            React.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                            React.createElement("polyline", { points: "14 2 14 8 20 8" }),
+                            React.createElement("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                            React.createElement("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                            React.createElement("polyline", { points: "10 9 9 9 8 9" }))),
+                    React.createElement("p", { style: { margin: 0, fontSize: 15, color: '#374151', fontWeight: 500 } }, "Drop your CAS PDF here"),
+                    React.createElement("p", { style: { margin: '6px 0 0', fontSize: 13, color: '#9ca3af' } }, "or click to browse")),
+                React.createElement("div", { style: {
+                        marginTop: 12,
+                        fontSize: 11,
+                        color: '#9ca3af',
+                        textAlign: 'center'
+                    } }, "Supported: CAMS, KFintech, CDSL, NSDL statements")));
+        }
+        return (React.createElement("div", null,
+            React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, margin: '0 0 16px', color: '#1f2937' } }, "Enter Password"),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: 14,
+                    border: '1px solid #e5e7eb',
+                    borderRadius: 10,
+                    backgroundColor: '#f9fafb',
+                    marginBottom: 20,
+                } },
+                React.createElement("div", { style: {
+                        width: 40,
+                        height: 40,
+                        backgroundColor: '#dbeafe',
+                        borderRadius: 8,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: 12,
+                    } },
+                    React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#2563eb", strokeWidth: "2" },
+                        React.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                        React.createElement("polyline", { points: "14 2 14 8 20 8" }))),
+                React.createElement("div", { style: { flex: 1, overflow: 'hidden' } },
+                    React.createElement("div", { style: {
+                            fontWeight: 500,
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            fontSize: 14,
+                            color: '#1f2937',
+                        } }, file.name),
+                    React.createElement("div", { style: { fontSize: 12, color: '#9ca3af' } },
+                        (file.size / 1024 / 1024).toFixed(2),
+                        " MB")),
+                React.createElement("button", { onClick: () => setFile(null), style: {
+                        background: 'none',
+                        border: 'none',
+                        color: '#6b7280',
+                        cursor: 'pointer',
+                        fontSize: 13,
+                        textDecoration: 'underline',
+                    } }, "Change")),
+            React.createElement("div", { style: { marginBottom: 20 } },
+                React.createElement("label", { style: {
+                        display: 'block',
+                        marginBottom: 6,
+                        fontWeight: 500,
+                        fontSize: 13,
+                        color: '#374151',
+                    } }, "PDF Password"),
+                React.createElement("input", { type: "password", placeholder: "Usually your PAN (e.g. ABCDE1234F)", value: password, onChange: (e) => setPassword(e.target.value), style: {
+                        width: '100%',
+                        padding: '12px 14px',
+                        fontSize: 16,
+                        border: '1px solid #d1d5db',
+                        borderRadius: 8,
+                        boxSizing: 'border-box',
+                    } }),
+                React.createElement("div", { style: {
+                        fontSize: 11,
+                        color: '#9ca3af',
+                        marginTop: 6,
+                        display: 'flex',
+                        gap: 16,
+                    } },
+                    React.createElement("span", null, "Common passwords:"),
+                    React.createElement("span", null, "PAN in CAPS"),
+                    React.createElement("span", null, "DOB (DDMMYYYY)"))),
+            React.createElement("button", { onClick: handleSubmit, style: {
+                    width: '100%',
+                    padding: '16px 24px',
+                    fontSize: 16,
+                    fontWeight: 600,
+                    backgroundColor: '#2563eb',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: 8,
+                    cursor: 'pointer',
+                    transition: 'background-color 0.2s',
+                } }, "Import Investments")));
+    };
+
+    const FetchMode = ({ prefill, onSubmit, onBack, isLoading }) => {
+        const [pan, setPan] = React.useState(prefill?.pan || '');
+        const [email, setEmail] = React.useState(prefill?.email || '');
+        const [error, setError] = React.useState('');
+        React.useEffect(() => {
+            if (prefill) {
+                if (prefill.pan)
+                    setPan(prefill.pan);
+                if (prefill.email)
+                    setEmail(prefill.email);
+            }
+        }, [prefill]);
+        const validatePan = (value) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(value);
+        const validateEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+        const handleSubmit = async (e) => {
+            e.preventDefault();
+            setError('');
+            const upperPan = pan.toUpperCase();
+            if (!validatePan(upperPan)) {
+                setError('Invalid PAN format (e.g. ABCDE1234F)');
+                return;
+            }
+            if (!validateEmail(email)) {
+                setError('Invalid email format');
+                return;
+            }
+            try {
+                await onSubmit(upperPan, email);
+            }
+            catch (err) {
+                setError(err.message || 'Failed to submit request');
+            }
+        };
+        if (isLoading) {
+            return (React.createElement("div", { style: {
+                    textAlign: 'center',
+                    padding: '60px 20px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                } },
+                React.createElement("div", { style: {
+                        width: 48,
+                        height: 48,
+                        border: '3px solid #e5e7eb',
+                        borderTopColor: '#2563eb',
+                        borderRadius: '50%',
+                        animation: 'spin 1s linear infinite',
+                        marginBottom: 24,
+                    } }),
+                React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`),
+                React.createElement("h3", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: '#1f2937' } }, "Sending Request..."),
+                React.createElement("p", { style: { color: '#6b7280', marginTop: 8, fontSize: 14 } }, "You'll receive your statement via email shortly")));
+        }
+        return (React.createElement("div", null,
+            React.createElement("h2", { style: { fontSize: 20, fontWeight: 700, margin: '0 0 6px', color: '#1f2937' } }, "Request CAS via Email"),
+            React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: '0 0 20px', lineHeight: 1.5 } }, "KFintech will send your statement in 2-5 minutes"),
+            React.createElement("div", { style: {
+                    backgroundColor: '#f9fafb',
+                    border: '1px solid #e5e7eb',
+                    borderRadius: 8,
+                    padding: 12,
+                    marginBottom: 20,
+                    fontSize: 12,
+                    color: '#6b7280',
+                } },
+                React.createElement("strong", { style: { color: '#374151' } }, "Note:"),
+                " Use the email registered with your mutual fund investments"),
+            React.createElement("form", { onSubmit: handleSubmit },
+                React.createElement("div", { style: { marginBottom: 16 } },
+                    React.createElement("label", { style: {
+                            display: 'block',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: '#374151',
+                            marginBottom: 6,
+                        } }, "PAN Number"),
+                    React.createElement("input", { type: "text", value: pan, onChange: (e) => setPan(e.target.value.toUpperCase()), placeholder: "ABCDE1234F", maxLength: 10, style: {
+                            width: '100%',
+                            height: 46,
+                            padding: '0 14px',
+                            fontSize: 16,
+                            border: '1px solid #d1d5db',
+                            borderRadius: 8,
+                            boxSizing: 'border-box',
+                            textTransform: 'uppercase',
+                        } })),
+                React.createElement("div", { style: { marginBottom: 20 } },
+                    React.createElement("label", { style: {
+                            display: 'block',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: '#374151',
+                            marginBottom: 6,
+                        } }, "Email Address"),
+                    React.createElement("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", style: {
+                            width: '100%',
+                            height: 46,
+                            padding: '0 14px',
+                            fontSize: 16,
+                            border: '1px solid #d1d5db',
+                            borderRadius: 8,
+                            boxSizing: 'border-box',
+                        } }),
+                    React.createElement("div", { style: { fontSize: 11, color: '#9ca3af', marginTop: 4 } }, "Statement will be sent to this email")),
+                error && (React.createElement("div", { style: {
+                        color: '#dc2626',
+                        fontSize: 13,
+                        marginBottom: 16,
+                        padding: '10px 12px',
+                        backgroundColor: '#fef2f2',
+                        border: '1px solid #fecaca',
+                        borderRadius: 8,
+                    } }, error)),
+                React.createElement("button", { type: "submit", style: {
+                        width: '100%',
+                        height: 50,
+                        fontSize: 16,
+                        fontWeight: 600,
+                        backgroundColor: '#2563eb',
+                        color: '#fff',
+                        border: 'none',
+                        borderRadius: 8,
+                        cursor: 'pointer',
+                        transition: 'background-color 0.2s',
+                    } }, "Request Statement"),
+                React.createElement("div", { style: { textAlign: 'center', marginTop: 16 } },
+                    React.createElement("button", { type: "button", onClick: onBack, style: {
+                            background: 'none',
+                            border: 'none',
+                            color: '#6b7280',
+                            fontSize: 13,
+                            cursor: 'pointer',
+                            textDecoration: 'underline',
+                        } }, "\u2190 I already have my file")))));
+    };
+
+    const CDSLFetchMode = ({ prefill, onRequestOtp, onVerifyOtp, onBack, }) => {
+        const [step, setStep] = React.useState('INPUT');
+        const [pan, setPan] = React.useState(prefill?.pan || '');
+        const [boId, setBoId] = React.useState(prefill?.boId || '');
+        const [dob, setDob] = React.useState(prefill?.dob || '');
+        const [otp, setOtp] = React.useState('');
+        const [sessionId, setSessionId] = React.useState('');
+        const [error, setError] = React.useState('');
+        const [isLoading, setIsLoading] = React.useState(false);
+        React.useEffect(() => {
+            if (prefill) {
+                if (prefill.pan)
+                    setPan(prefill.pan);
+                if (prefill.boId)
+                    setBoId(prefill.boId);
+                if (prefill.dob)
+                    setDob(prefill.dob);
+            }
+        }, [prefill]);
+        const validatePan = (value) => /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(value);
+        const validateBoId = (value) => /^\d{16}$/.test(value);
+        const validateDob = (value) => /^\d{4}-\d{2}-\d{2}$/.test(value);
+        const handleRequestOtp = async (e) => {
+            e.preventDefault();
+            setError('');
+            const upperPan = pan.toUpperCase();
+            if (!validatePan(upperPan)) {
+                setError('Invalid PAN format (e.g. ABCDE1234F)');
+                return;
+            }
+            if (!validateBoId(boId)) {
+                setError('BO ID must be 16 digits');
+                return;
+            }
+            if (!validateDob(dob)) {
+                setError('Date of birth must be YYYY-MM-DD');
+                return;
+            }
+            setIsLoading(true);
+            try {
+                const sid = await onRequestOtp(upperPan, boId, dob);
+                setSessionId(sid);
+                setStep('OTP');
+            }
+            catch (err) {
+                setError(err.message || 'Failed to request OTP');
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        const handleVerifyOtp = async (e) => {
+            e.preventDefault();
+            setError('');
+            if (otp.length !== 4) {
+                setError('Please enter the 4-digit OTP');
+                return;
+            }
+            setIsLoading(true);
+            setStep('LOADING');
+            try {
+                await onVerifyOtp(sessionId, otp, pan.toUpperCase()); // Pass PAN as password for parsing
+                setStep('SUCCESS');
+            }
+            catch (err) {
+                setError(err.message || 'Something went wrong. Please try again.');
+                setStep('ERROR');
+                setIsLoading(false);
+            }
+        };
+        // Error state with retry
+        if (step === 'ERROR') {
+            return (React.createElement("div", { style: {
+                    textAlign: 'center',
+                    padding: '40px 20px',
+                } },
+                React.createElement("div", { style: {
+                        width: 56,
+                        height: 56,
+                        backgroundColor: '#fef2f2',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        margin: '0 auto 20px',
+                    } },
+                    React.createElement("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#dc2626", strokeWidth: "2" },
+                        React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                        React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                        React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))),
+                React.createElement("h3", { style: { margin: '0 0 8px', fontSize: 18, fontWeight: 600, color: '#1f2937' } }, "Import Failed"),
+                React.createElement("p", { style: { color: '#6b7280', fontSize: 14, margin: '0 0 24px', lineHeight: 1.5 } }, error || 'Something went wrong while fetching your portfolio.'),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+                    React.createElement("button", { onClick: () => { setStep('OTP'); setError(''); setOtp(''); }, style: {
+                            width: '100%',
+                            height: 46,
+                            fontSize: 15,
+                            fontWeight: 600,
+                            backgroundColor: '#2563eb',
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: 8,
+                            cursor: 'pointer',
+                        } }, "Try Again"),
+                    React.createElement("button", { onClick: () => { setStep('INPUT'); setError(''); setOtp(''); }, style: {
+                            width: '100%',
+                            height: 46,
+                            fontSize: 15,
+                            fontWeight: 500,
+                            backgroundColor: '#fff',
+                            color: '#6b7280',
+                            border: '1px solid #e5e7eb',
+                            borderRadius: 8,
+                            cursor: 'pointer',
+                        } }, "Start Over"))));
+        }
+        // Loading state
+        if (step === 'LOADING') {
+            return (React.createElement("div", { style: {
+                    textAlign: 'center',
+                    padding: '60px 20px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                } },
+                React.createElement("div", { style: {
+                        width: 48,
+                        height: 48,
+                        border: '3px solid #e5e7eb',
+                        borderTopColor: '#2563eb',
+                        borderRadius: '50%',
+                        animation: 'spin 1s linear infinite',
+                        marginBottom: 24,
+                    } }),
+                React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`),
+                React.createElement("h3", { style: { margin: 0, fontSize: 18, fontWeight: 600, color: '#1f2937' } }, "Importing Your Portfolio"),
+                React.createElement("p", { style: { color: '#6b7280', marginTop: 8, fontSize: 14 } }, "Securely fetching your holdings...")));
+        }
+        // Success state
+        if (step === 'SUCCESS') {
+            return (React.createElement("div", { style: {
+                    textAlign: 'center',
+                    padding: '40px 20px',
+                } },
+                React.createElement("div", { style: {
+                        width: 56,
+                        height: 56,
+                        backgroundColor: '#dcfce7',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        margin: '0 auto 20px',
+                    } },
+                    React.createElement("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#16a34a", strokeWidth: "2.5" },
+                        React.createElement("polyline", { points: "20 6 9 17 4 12" }))),
+                React.createElement("h3", { style: { margin: '0 0 8px', fontSize: 20, fontWeight: 600, color: '#1f2937' } }, "Portfolio Imported!"),
+                React.createElement("p", { style: { color: '#6b7280', fontSize: 14, margin: 0 } }, "Your demat holdings are now available")));
+        }
+        // OTP input step
+        if (step === 'OTP') {
+            return (React.createElement("div", null,
+                React.createElement("h2", { style: { fontSize: 20, fontWeight: 700, margin: '0 0 6px', color: '#1f2937' } }, "Verify OTP"),
+                React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: '0 0 20px', lineHeight: 1.5 } }, "CDSL has sent an OTP to your registered mobile"),
+                React.createElement("form", { onSubmit: handleVerifyOtp },
+                    React.createElement("div", { style: { marginBottom: 20 } },
+                        React.createElement("label", { style: {
+                                display: 'block',
+                                fontSize: 13,
+                                fontWeight: 500,
+                                color: '#374151',
+                                marginBottom: 6,
+                            } }, "OTP Code"),
+                        React.createElement("input", { type: "text", value: otp, onChange: (e) => setOtp(e.target.value.replace(/\D/g, '').slice(0, 4)), placeholder: "\u2022\u2022\u2022\u2022", maxLength: 4, autoFocus: true, style: {
+                                width: '100%',
+                                height: 50,
+                                padding: '0 14px',
+                                fontSize: 20,
+                                fontWeight: 600,
+                                letterSpacing: 8,
+                                textAlign: 'center',
+                                border: '1px solid #d1d5db',
+                                borderRadius: 8,
+                                boxSizing: 'border-box',
+                            } })),
+                    error && (React.createElement("div", { style: {
+                            color: '#dc2626',
+                            fontSize: 13,
+                            marginBottom: 16,
+                            padding: '10px 12px',
+                            backgroundColor: '#fef2f2',
+                            border: '1px solid #fecaca',
+                            borderRadius: 8,
+                        } }, error)),
+                    React.createElement("button", { type: "submit", disabled: isLoading, style: {
+                            width: '100%',
+                            height: 50,
+                            fontSize: 16,
+                            fontWeight: 600,
+                            backgroundColor: isLoading ? '#93c5fd' : '#2563eb',
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: 8,
+                            cursor: isLoading ? 'not-allowed' : 'pointer',
+                        } }, isLoading ? 'Verifying...' : 'Import Portfolio'),
+                    React.createElement("div", { style: { textAlign: 'center', marginTop: 16 } },
+                        React.createElement("button", { type: "button", onClick: () => { setStep('INPUT'); setError(''); }, style: {
+                                background: 'none',
+                                border: 'none',
+                                color: '#6b7280',
+                                fontSize: 13,
+                                cursor: 'pointer',
+                                textDecoration: 'underline',
+                            } }, "\u2190 Go back")))));
+        }
+        // Input step (default)
+        return (React.createElement("div", null,
+            React.createElement("h2", { style: { fontSize: 20, fontWeight: 700, margin: '0 0 6px', color: '#1f2937' } }, "Import from CDSL"),
+            React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: '0 0 20px', lineHeight: 1.5 } }, "Securely fetch your demat holdings"),
+            React.createElement("div", { style: {
+                    backgroundColor: '#f9fafb',
+                    border: '1px solid #e5e7eb',
+                    borderRadius: 8,
+                    padding: 12,
+                    marginBottom: 20,
+                    fontSize: 12,
+                    color: '#6b7280',
+                } },
+                React.createElement("strong", { style: { color: '#374151' } }, "Where to find BO ID:"),
+                " Check your broker app under Demat Details, or any CDSL statement"),
+            React.createElement("form", { onSubmit: handleRequestOtp },
+                React.createElement("div", { style: { marginBottom: 16 } },
+                    React.createElement("label", { style: {
+                            display: 'block',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: '#374151',
+                            marginBottom: 6,
+                        } }, "PAN Number"),
+                    React.createElement("input", { type: "text", value: pan, onChange: (e) => setPan(e.target.value.toUpperCase()), placeholder: "ABCDE1234F", maxLength: 10, style: {
+                            width: '100%',
+                            height: 46,
+                            padding: '0 14px',
+                            fontSize: 16,
+                            border: '1px solid #d1d5db',
+                            borderRadius: 8,
+                            boxSizing: 'border-box',
+                            textTransform: 'uppercase',
+                        } })),
+                React.createElement("div", { style: { marginBottom: 16 } },
+                    React.createElement("label", { style: {
+                            display: 'block',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: '#374151',
+                            marginBottom: 6,
+                        } }, "BO ID (16 digits)"),
+                    React.createElement("input", { type: "text", value: boId, onChange: (e) => setBoId(e.target.value.replace(/\D/g, '').slice(0, 16)), placeholder: "1234567890123456", maxLength: 16, style: {
+                            width: '100%',
+                            height: 46,
+                            padding: '0 14px',
+                            fontSize: 16,
+                            border: '1px solid #d1d5db',
+                            borderRadius: 8,
+                            boxSizing: 'border-box',
+                        } })),
+                React.createElement("div", { style: { marginBottom: 20 } },
+                    React.createElement("label", { style: {
+                            display: 'block',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: '#374151',
+                            marginBottom: 6,
+                        } }, "Date of Birth"),
+                    React.createElement("input", { type: "date", value: dob, onChange: (e) => setDob(e.target.value), style: {
+                            width: '100%',
+                            height: 46,
+                            padding: '0 14px',
+                            fontSize: 16,
+                            border: '1px solid #d1d5db',
+                            borderRadius: 8,
+                            boxSizing: 'border-box',
+                        } })),
+                error && (React.createElement("div", { style: {
+                        color: '#dc2626',
+                        fontSize: 13,
+                        marginBottom: 16,
+                        padding: '10px 12px',
+                        backgroundColor: '#fef2f2',
+                        border: '1px solid #fecaca',
+                        borderRadius: 8,
+                    } }, error)),
+                React.createElement("button", { type: "submit", disabled: isLoading, style: {
+                        width: '100%',
+                        height: 50,
+                        fontSize: 16,
+                        fontWeight: 600,
+                        backgroundColor: isLoading ? '#93c5fd' : '#2563eb',
+                        color: '#fff',
+                        border: 'none',
+                        borderRadius: 8,
+                        cursor: isLoading ? 'not-allowed' : 'pointer',
+                    } }, isLoading ? 'Requesting OTP...' : 'Request OTP'),
+                React.createElement("div", { style: { textAlign: 'center', marginTop: 16 } },
+                    React.createElement("button", { type: "button", onClick: onBack, style: {
+                            background: 'none',
+                            border: 'none',
+                            color: '#6b7280',
+                            fontSize: 13,
+                            cursor: 'pointer',
+                            textDecoration: 'underline',
+                        } }, "\u2190 I already have my file")))));
+    };
+
+    const DEFAULT_API_URL = 'https://portfolio-parser.api.casparser.in';
+    const DEFAULT_AUTH_URL = 'https://client-apis.casparser.in';
+    /**
+     * Creates an API client for making requests to CASParser API.
+     *
+     * @param accessToken - Your access token (get one at docs.casparser.in)
+     * @param baseUrl - Optional custom API base URL
+     * @returns API client instance
+     */
+    function createApiClient(accessToken, baseUrl) {
+        return {
+            baseUrl: baseUrl || DEFAULT_API_URL,
+            apiKey: accessToken,
+        };
+    }
+    /**
+     * Request a short-lived access token from the API key.
+     * Use this on your backend to generate tokens for frontend use.
+     *
+     * @param apiKey - Your API key (do NOT expose this on frontend)
+     * @param expiryMinutes - Token validity in minutes (max 60, default 60)
+     * @param authUrl - Optional custom auth URL
+     * @returns Access token response with SK_ prefixed token
+     */
+    async function requestAccessToken(apiKey, expiryMinutes = 60, authUrl) {
+        const url = authUrl || DEFAULT_AUTH_URL;
+        const response = await fetch(`${url}/v1/access-token`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': apiKey,
+            },
+            body: JSON.stringify({
+                expiry_minutes: Math.min(expiryMinutes, 60),
+            }),
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.detail || errorData.message || 'Failed to get access token');
+        }
+        return response.json();
+    }
+    /**
+     * Check if a token is an access token (SK_ prefix)
+     */
+    function isAccessToken(token) {
+        return token?.startsWith('SK_') || false;
+    }
+    async function parseStatement(client, file, password, onProgress) {
+        const formData = new FormData();
+        formData.append('pdf_file', file);
+        if (password) {
+            formData.append('password', password);
+        }
+        // Simulate progress since fetch doesn't support upload progress natively
+        if (onProgress) {
+            onProgress(30);
+        }
+        const response = await fetch(`${client.baseUrl}/v4/smart/parse`, {
+            method: 'POST',
+            headers: {
+                'x-api-key': client.apiKey,
+                'Authorization': `Token ${client.apiKey}`,
+            },
+            body: formData,
+        });
+        if (onProgress) {
+            onProgress(80);
+        }
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw { response: { data: errorData }, message: errorData.msg || 'Request failed' };
+        }
+        return response.json();
+    }
+    /**
+     * Parse a statement from a URL (used for CDSL fetch results)
+     */
+    async function parseStatementFromUrl(client, pdfUrl, password, onProgress) {
+        if (onProgress) {
+            onProgress(30);
+        }
+        const body = { pdf_url: pdfUrl };
+        if (password) {
+            body.password = password;
+        }
+        const response = await fetch(`${client.baseUrl}/v4/smart/parse`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': client.apiKey,
+                'Authorization': `Token ${client.apiKey}`,
+            },
+            body: JSON.stringify(body),
+        });
+        if (onProgress) {
+            onProgress(80);
+        }
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw { response: { data: errorData }, message: errorData.msg || 'Request failed' };
+        }
+        return response.json();
+    }
+    async function generateCAS(client, email, pan, options) {
+        // Format dates as YYYY-MM-DD per API spec
+        const today = new Date();
+        const toDate = options?.toDate || today.toISOString().split('T')[0];
+        const fromDate = options?.fromDate || '2000-01-01';
+        const password = options?.password || 'Abcdefghi12$';
+        // Using the /v4/generate endpoint from portfolio-tracking
+        const response = await fetch(`${client.baseUrl}/v4/generate`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': client.apiKey,
+                'Authorization': `Token ${client.apiKey}`,
+            },
+            body: JSON.stringify({
+                email,
+                pan_no: pan,
+                from_date: fromDate,
+                to_date: toDate,
+                password,
+                cas_authority: 'kfintech',
+            }),
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw { response: { data: errorData }, message: errorData.msg || errorData.message || 'Request failed' };
+        }
+        return response.json();
+    }
+    async function cdslFetchRequestOtp(client, pan, boId, dob) {
+        const response = await fetch(`${client.baseUrl}/v4/cdsl/fetch`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': client.apiKey,
+                'Authorization': `Token ${client.apiKey}`,
+            },
+            body: JSON.stringify({
+                pan: pan.toUpperCase(),
+                bo_id: boId,
+                dob,
+            }),
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw { response: { data: errorData }, message: errorData.msg || 'Failed to request OTP' };
+        }
+        return response.json();
+    }
+    async function cdslFetchVerifyOtp(client, sessionId, otp, numPeriods = 6) {
+        const response = await fetch(`${client.baseUrl}/v4/cdsl/fetch/${sessionId}/verify`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': client.apiKey,
+                'Authorization': `Token ${client.apiKey}`,
+            },
+            body: JSON.stringify({
+                otp,
+                num_periods: numPeriods,
+            }),
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw { response: { data: errorData }, message: errorData.msg || 'Failed to verify OTP' };
+        }
+        return response.json();
+    }
+
+    const DEFAULT_LOGO_URL = 'https://casparser.in/assets/images/section-navigation01-image01.png';
+    const BROKER_LOGO_BASE = 'https://assets.smallcase.com/smallcase/assets/brokerLogo/small';
+    const CAS_PORTALS = {
+        'CAMS_KFINTECH': { name: 'KFintech', url: 'https://mfs.kfintech.com/investor/General/ConsolidatedAccountStatement' },
+        'CDSL': { name: 'CDSL', url: 'https://www.cdslindia.com/cas/logincas.aspx' },
+        'NSDL': { name: 'NSDL', url: 'https://nsdlcas.nsdl.com/' },
+    };
+    // Default broker list with logos (can be overridden via config.brokers)
+    const DEFAULT_BROKERS = ([
+        { name: 'Zerodha', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/kite.svg` },
+        { name: 'Groww', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/groww.svg` },
+        { name: 'Angel One', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/angelbroking.svg` },
+        { name: 'Upstox', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/upstox.svg` },
+        { name: '5paisa', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/fivepaisa.svg` },
+        { name: 'Dhan', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/dhan.svg` },
+        { name: 'Alice Blue', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/aliceblue.svg` },
+        { name: 'Fisdom', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/fisdom.svg` },
+        { name: 'FundzBazar', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/fundzbazar.svg` },
+        { name: 'HDFC SKY', depository: 'CDSL', logo: `${BROKER_LOGO_BASE}/hdfcsky.svg` },
+        { name: 'ICICI Direct', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/icici.svg` },
+        { name: 'HDFC Securities', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/hdfc.svg` },
+        { name: 'Kotak Securities', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/kotak.svg` },
+        { name: 'SBI Securities', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/sbi.svg` },
+        { name: 'Motilal Oswal', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/motilal.svg` },
+        { name: 'IIFL Capital', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/iifl.svg` },
+        { name: 'Nuvama Wealth', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/edelweiss.svg` },
+        { name: 'Trustline', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/trustline.svg` },
+        { name: 'AxisDirect', depository: 'NSDL', logo: `${BROKER_LOGO_BASE}/axis.svg` },
+    ]).sort((a, b) => a.name.localeCompare(b.name));
+    const PortfolioConnectWidget = ({ isOpen, onClose, apiKey, apiBaseUrl, config = {}, onSuccess, onError, onEvent, }) => {
+        const [mode, setMode] = React.useState('LOCATE');
+        const [selectedType, setSelectedType] = React.useState('CAMS_KFINTECH');
+        const [isProcessing, setIsProcessing] = React.useState(false);
+        const [progress, setProgress] = React.useState(0);
+        const [fetchLoading, setFetchLoading] = React.useState(false);
+        const [lastError, setLastError] = React.useState(null);
+        const [selectedBroker, setSelectedBroker] = React.useState(null);
+        // Use ref to avoid stale closure issues and prevent infinite loops
+        const onEventRef = React.useRef(onEvent);
+        onEventRef.current = onEvent;
+        // Track progress interval for cleanup on unmount
+        const progressIntervalRef = React.useRef(null);
+        // Cleanup interval on unmount to prevent memory leaks
+        React.useEffect(() => {
+            return () => {
+                if (progressIntervalRef.current) {
+                    clearInterval(progressIntervalRef.current);
+                    progressIntervalRef.current = null;
+                }
+            };
+        }, []);
+        const apiClient = createApiClient(apiKey, apiBaseUrl);
+        const emitEvent = (event, metadata = {}) => {
+            onEventRef.current?.(event, { timestamp: Date.now(), ...metadata });
+        };
+        // Determine allowed types from config, default to all
+        const allowedTypes = config.allowedTypes || ['CAMS_KFINTECH', 'CDSL', 'NSDL'];
+        config.enableGenerator && selectedType === 'CAMS_KFINTECH';
+        config.enableCdslFetch && selectedType === 'CDSL';
+        const showShortcuts = config.showShortcuts !== false; // Default true
+        const showPortalLinks = config.showPortalLinks !== false; // Default true
+        React.useEffect(() => {
+            if (isOpen) {
+                // Always start at home (LOCATE) screen
+                const firstType = allowedTypes[0] || 'CAMS_KFINTECH';
+                setSelectedType(firstType);
+                setMode('LOCATE');
+                setIsProcessing(false);
+                setProgress(0);
+                setLastError(null); // Clear any previous errors
+                emitEvent('WIDGET_OPENED');
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [isOpen]);
+        const handleClose = () => {
+            emitEvent('WIDGET_CLOSED');
+            onClose();
+        };
+        const handleModeSwitch = (newMode) => {
+            setMode(newMode);
+            emitEvent('MODE_SWITCHED', { from: mode, to: newMode });
+        };
+        const handleBrokerSelect = (broker) => {
+            if (broker) {
+                setSelectedBroker(broker.name);
+                setSelectedType(broker.depository);
+                emitEvent('BROKER_SELECTED', { broker: broker.name, depository: broker.depository });
+                // If CDSL and CDSL fetch is enabled, show options
+                if (broker.depository === 'CDSL' && config.enableCdslFetch) {
+                    setMode('DEMAT_OPTIONS');
+                }
+                else {
+                    setMode('UPLOAD');
+                }
+            }
+            else {
+                // "Other" selected - let user choose depository manually
+                setSelectedBroker('Other');
+            }
+        };
+        const handleManualDepositorySelect = (depository) => {
+            setSelectedType(depository);
+            emitEvent('BROKER_SELECTED', { broker: 'Other', depository });
+            // If CDSL and CDSL fetch is enabled, show options
+            if (depository === 'CDSL' && config.enableCdslFetch) {
+                setMode('DEMAT_OPTIONS');
+            }
+            else {
+                setMode('UPLOAD');
+            }
+        };
+        const handleFileProcess = async (file, password) => {
+            setIsProcessing(true);
+            setProgress(10);
+            emitEvent('UPLOAD_STARTED', { filename: file.name, size: file.size });
+            progressIntervalRef.current = setInterval(() => {
+                setProgress(prev => Math.min(prev + Math.random() * 10, 90));
+            }, 500);
+            try {
+                const startTime = Date.now();
+                const response = await parseStatement(apiClient, file, password, (percent) => setProgress(percent));
+                if (progressIntervalRef.current) {
+                    clearInterval(progressIntervalRef.current);
+                    progressIntervalRef.current = null;
+                }
+                setProgress(100);
+                const metadata = {
+                    filename: file.name,
+                    parser_type: response.cas_author || 'AUTO',
+                    parse_duration_ms: Date.now() - startTime,
+                };
+                emitEvent('PARSE_SUCCESS', metadata);
+                setTimeout(() => {
+                    onSuccess(response, metadata);
+                    handleClose();
+                }, 500);
+            }
+            catch (error) {
+                if (progressIntervalRef.current) {
+                    clearInterval(progressIntervalRef.current);
+                    progressIntervalRef.current = null;
+                }
+                setIsProcessing(false);
+                setProgress(0);
+                const casError = {
+                    code: 'PARSE_ERROR',
+                    message: error.response?.data?.msg || error.message || 'Failed to parse statement',
+                    details: error.response?.data,
+                };
+                emitEvent('PARSE_ERROR', { error: casError });
+                setLastError(casError); // Show error in widget, let user retry
+                onError?.(casError);
+            }
+        };
+        const handleRetry = () => {
+            setLastError(null);
+            setMode('UPLOAD');
+        };
+        const handleFetchSubmit = async (pan, email) => {
+            setFetchLoading(true);
+            emitEvent('GENERATOR_STARTED', { pan: pan.slice(0, 4) + '***' });
+            try {
+                // Pass generator config options (dateRange, password) if provided
+                await generateCAS(apiClient, email, pan, config.generator);
+                emitEvent('GENERATOR_SUCCESS');
+                setFetchLoading(false);
+                handleModeSwitch('LOCATE');
+            }
+            catch (error) {
+                setFetchLoading(false);
+                const casError = {
+                    code: 'GENERATOR_ERROR',
+                    message: error.response?.data?.message || error.message || 'Failed to request statement',
+                    details: error.response?.data,
+                };
+                emitEvent('GENERATOR_ERROR', { error: casError });
+                throw new Error(casError.message);
+            }
+        };
+        // CDSL Fetch handlers
+        const handleCdslRequestOtp = async (pan, boId, dob) => {
+            emitEvent('CDSL_FETCH_STARTED', { pan: pan.slice(0, 4) + '***' });
+            try {
+                const response = await cdslFetchRequestOtp(apiClient, pan, boId, dob);
+                emitEvent('CDSL_OTP_SENT', { session_id: response.session_id });
+                return response.session_id;
+            }
+            catch (error) {
+                const casError = {
+                    code: 'CDSL_FETCH_ERROR',
+                    message: error.message || 'Failed to request OTP',
+                    details: error.response?.data,
+                };
+                emitEvent('CDSL_FETCH_ERROR', { error: casError });
+                throw new Error(casError.message);
+            }
+        };
+        const handleCdslVerifyOtp = async (sessionId, otp, pan) => {
+            try {
+                const response = await cdslFetchVerifyOtp(apiClient, sessionId, otp);
+                emitEvent('CDSL_OTP_VERIFIED');
+                // Files are ready - emit event with all file URLs for developer interception
+                emitEvent('CDSL_FETCH_SUCCESS', {
+                    files: response.files,
+                    count: response.files.length,
+                });
+                // Auto-parse the most recent file (first in list) - PAN is the password
+                await handleCdslAutoParse(response.files, pan);
+            }
+            catch (error) {
+                const casError = {
+                    code: 'CDSL_FETCH_ERROR',
+                    message: error.message || 'Failed to verify OTP',
+                    details: error.response?.data,
+                };
+                emitEvent('CDSL_FETCH_ERROR', { error: casError });
+                throw new Error(casError.message);
+            }
+        };
+        const handleCdslAutoParse = async (files, pan) => {
+            if (!files || files.length === 0) {
+                const casError = {
+                    code: 'CDSL_FETCH_ERROR',
+                    message: 'No files returned from CDSL',
+                };
+                emitEvent('CDSL_FETCH_ERROR', { error: casError });
+                onError?.(casError);
+                return;
+            }
+            // Use the first (most recent) file
+            const targetFile = files[0];
+            setIsProcessing(true);
+            setProgress(10);
+            emitEvent('PARSE_STARTED', { filename: targetFile.filename, source: 'CDSL_FETCH' });
+            try {
+                const startTime = Date.now();
+                // Parse via URL - smart parse API accepts pdf_url, PAN is the password
+                const response = await parseStatementFromUrl(apiClient, targetFile.url, pan, // CDSL files are password protected with PAN
+                (percent) => setProgress(percent));
+                setProgress(100);
+                const metadata = {
+                    filename: targetFile.filename,
+                    parser_type: response.cas_author || 'CDSL',
+                    parse_duration_ms: Date.now() - startTime,
+                    source: 'CDSL_FETCH',
+                    all_files: files, // Include all file URLs for developer reference
+                };
+                emitEvent('PARSE_SUCCESS', metadata);
+                setTimeout(() => {
+                    onSuccess(response, metadata);
+                    handleClose();
+                }, 500);
+            }
+            catch (error) {
+                setIsProcessing(false);
+                setProgress(0);
+                const casError = {
+                    code: 'PARSE_ERROR',
+                    message: error.response?.data?.msg || error.message || 'Failed to parse CDSL statement',
+                    details: { ...error.response?.data, files },
+                };
+                emitEvent('PARSE_ERROR', { error: casError });
+                onError?.(casError);
+            }
+        };
+        const renderContent = () => {
+            // Show error with retry option - don't crash the widget
+            if (lastError) {
+                return (React.createElement("div", { style: { textAlign: 'center', padding: '20px 0' } },
+                    React.createElement("div", { style: {
+                            width: 56,
+                            height: 56,
+                            backgroundColor: '#fef2f2',
+                            borderRadius: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            margin: '0 auto 16px',
+                        } },
+                        React.createElement("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#dc2626", strokeWidth: "2" },
+                            React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                            React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                            React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))),
+                    React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, color: '#111827', margin: '0 0 8px' } }, "Something went wrong"),
+                    React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: '0 0 20px', lineHeight: 1.5 } }, lastError.message),
+                    React.createElement("div", { style: { display: 'flex', gap: 12, justifyContent: 'center' } },
+                        React.createElement("button", { onClick: handleRetry, style: {
+                                padding: '12px 24px',
+                                fontSize: 14,
+                                fontWeight: 600,
+                                backgroundColor: '#2563eb',
+                                color: '#fff',
+                                border: 'none',
+                                borderRadius: 8,
+                                cursor: 'pointer',
+                            } }, "Try Again"),
+                        React.createElement("button", { onClick: handleClose, style: {
+                                padding: '12px 24px',
+                                fontSize: 14,
+                                fontWeight: 500,
+                                backgroundColor: '#f3f4f6',
+                                color: '#374151',
+                                border: 'none',
+                                borderRadius: 8,
+                                cursor: 'pointer',
+                            } }, "Close"))));
+            }
+            if (mode === 'FETCH' && config.enableGenerator) {
+                return (React.createElement(FetchMode, { prefill: config.prefill, onSubmit: handleFetchSubmit, onBack: () => handleModeSwitch('LOCATE'), isLoading: fetchLoading }));
+            }
+            if (mode === 'CDSL_FETCH' && config.enableCdslFetch) {
+                return (React.createElement(CDSLFetchMode, { prefill: config.prefill, onRequestOtp: handleCdslRequestOtp, onVerifyOtp: handleCdslVerifyOtp, onBack: () => handleModeSwitch('LOCATE') }));
+            }
+            if (mode === 'UPLOAD') {
+                const currentPortal = CAS_PORTALS[selectedType];
+                return (React.createElement("div", null,
+                    React.createElement(UploadZone, { onFileSelect: handleFileProcess, isProcessing: isProcessing, progress: progress }),
+                    showShortcuts && (React.createElement("div", { style: { marginTop: 16 } },
+                        React.createElement(ShortcutLinks, { selectedType: selectedType, onSearchClick: (provider) => emitEvent('SEARCH_CLICKED', { provider }) }))),
+                    showPortalLinks && (React.createElement("div", { style: { marginTop: 16, textAlign: 'center' } },
+                        React.createElement("a", { href: currentPortal.url, target: "_blank", rel: "noopener noreferrer", onClick: () => emitEvent('PORTAL_CLICKED', { portal: selectedType }), style: { textDecoration: 'none', color: '#6b7280', fontSize: 13 } },
+                            "Don't have your statement? ",
+                            React.createElement("span", { style: { color: '#2563eb' } },
+                                "Download from ",
+                                currentPortal.name))))));
+            }
+            // MF_OPTIONS mode - show upload or KFintech eCAS options
+            if (mode === 'MF_OPTIONS') {
+                return (React.createElement("div", null,
+                    React.createElement("div", { style: { textAlign: 'center', marginBottom: 20 } },
+                        React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, color: '#111827', margin: '0 0 8px' } }, "Mutual Funds"),
+                        React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: 0 } }, "CAMS & KFintech consolidated statement")),
+                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+                        React.createElement("button", { onClick: () => handleModeSwitch('UPLOAD'), style: {
+                                width: '100%',
+                                padding: '16px 20px',
+                                fontSize: 15,
+                                fontWeight: 600,
+                                backgroundColor: '#2563eb',
+                                color: '#fff',
+                                border: 'none',
+                                borderRadius: 12,
+                                cursor: 'pointer',
+                                textAlign: 'left',
+                            } },
+                            React.createElement("span", { style: { display: 'block' } }, "Upload Statement"),
+                            React.createElement("span", { style: { fontSize: 12, fontWeight: 400, opacity: 0.85 } }, "I have my CAS PDF file")),
+                        config.enableGenerator && (React.createElement("button", { onClick: () => handleModeSwitch('FETCH'), style: {
+                                width: '100%',
+                                padding: '16px 20px',
+                                fontSize: 15,
+                                fontWeight: 600,
+                                backgroundColor: '#fff',
+                                color: '#166534',
+                                border: '2px solid #bbf7d0',
+                                borderRadius: 12,
+                                cursor: 'pointer',
+                                textAlign: 'left',
+                            } },
+                            React.createElement("span", { style: { display: 'block' } }, "Request via Email"),
+                            React.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: '#6b7280' } }, "Get CAS from KFintech"))))));
+            }
+            // DEMAT_OPTIONS mode - show upload or CDSL fetch options (for CDSL only)
+            if (mode === 'DEMAT_OPTIONS') {
+                return (React.createElement("div", null,
+                    React.createElement("div", { style: { textAlign: 'center', marginBottom: 20 } },
+                        React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, color: '#111827', margin: '0 0 8px' } }, selectedBroker ? `${selectedBroker} (CDSL)` : 'CDSL Demat'),
+                        React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: 0 } }, "How would you like to import?")),
+                    React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+                        React.createElement("button", { onClick: () => handleModeSwitch('UPLOAD'), style: {
+                                width: '100%',
+                                padding: '16px 20px',
+                                fontSize: 15,
+                                fontWeight: 600,
+                                backgroundColor: '#2563eb',
+                                color: '#fff',
+                                border: 'none',
+                                borderRadius: 12,
+                                cursor: 'pointer',
+                                textAlign: 'left',
+                            } },
+                            React.createElement("span", { style: { display: 'block' } }, "Upload Statement"),
+                            React.createElement("span", { style: { fontSize: 12, fontWeight: 400, opacity: 0.85 } }, "I have my CDSL CAS PDF file")),
+                        React.createElement("button", { onClick: () => handleModeSwitch('CDSL_FETCH'), style: {
+                                width: '100%',
+                                padding: '16px 20px',
+                                fontSize: 15,
+                                fontWeight: 600,
+                                backgroundColor: '#fff',
+                                color: '#1e40af',
+                                border: '2px solid #bfdbfe',
+                                borderRadius: 12,
+                                cursor: 'pointer',
+                                textAlign: 'left',
+                            } },
+                            React.createElement("span", { style: { display: 'block' } }, "Fetch from CDSL"),
+                            React.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: '#6b7280' } }, "OTP verification required")))));
+            }
+            // SELECT_BROKER mode - for Stocks/Bonds/ETFs
+            if (mode === 'SELECT_BROKER') {
+                const showManualSelection = selectedBroker === 'Other';
+                if (showManualSelection) {
+                    // Show CDSL/NSDL manual selection
+                    return (React.createElement("div", null,
+                        React.createElement("div", { style: { textAlign: 'center', marginBottom: 20 } },
+                            React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, color: '#111827', margin: '0 0 8px' } }, "Select Your Depository"),
+                            React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: 0 } }, "Check your demat account statement to find your depository")),
+                        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+                            React.createElement("button", { onClick: () => handleManualDepositorySelect('CDSL'), style: {
+                                    padding: '16px 20px',
+                                    fontSize: 15,
+                                    fontWeight: 600,
+                                    backgroundColor: '#fff',
+                                    color: '#111827',
+                                    border: '2px solid #e5e7eb',
+                                    borderRadius: 12,
+                                    cursor: 'pointer',
+                                    textAlign: 'left',
+                                } },
+                                React.createElement("span", { style: { display: 'block' } }, "CDSL"),
+                                React.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: '#6b7280' } }, "Central Depository Services Limited")),
+                            React.createElement("button", { onClick: () => handleManualDepositorySelect('NSDL'), style: {
+                                    padding: '16px 20px',
+                                    fontSize: 15,
+                                    fontWeight: 600,
+                                    backgroundColor: '#fff',
+                                    color: '#111827',
+                                    border: '2px solid #e5e7eb',
+                                    borderRadius: 12,
+                                    cursor: 'pointer',
+                                    textAlign: 'left',
+                                } },
+                                React.createElement("span", { style: { display: 'block' } }, "NSDL"),
+                                React.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: '#6b7280' } }, "National Securities Depository Limited")))));
+                }
+                // Show broker list - use config.brokers if provided, otherwise default
+                const brokerList = config.brokers || DEFAULT_BROKERS;
+                return (React.createElement("div", null,
+                    React.createElement("div", { style: { textAlign: 'center', marginBottom: 20 } },
+                        React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, color: '#111827', margin: '0 0 8px' } }, "Select Your Broker"),
+                        React.createElement("p", { style: { fontSize: 14, color: '#6b7280', margin: 0 } }, "We'll automatically detect your depository")),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(2, 1fr)',
+                            gap: 10,
+                            maxHeight: 320,
+                            overflowY: 'auto',
+                            paddingRight: 4,
+                        } }, brokerList.map((broker) => (React.createElement("button", { key: broker.name, onClick: () => handleBrokerSelect(broker), style: {
+                            padding: '10px 12px',
+                            fontSize: 13,
+                            fontWeight: 500,
+                            backgroundColor: '#fff',
+                            color: '#111827',
+                            border: '1.5px solid #e5e7eb',
+                            borderRadius: 10,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            transition: 'all 0.15s',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 10,
+                        }, onMouseOver: (e) => {
+                            e.currentTarget.style.borderColor = '#2563eb';
+                            e.currentTarget.style.backgroundColor = '#f0f7ff';
+                        }, onMouseOut: (e) => {
+                            e.currentTarget.style.borderColor = '#e5e7eb';
+                            e.currentTarget.style.backgroundColor = '#fff';
+                        } },
+                        broker.logo && (React.createElement("img", { src: broker.logo, alt: broker.name, style: { width: 24, height: 24, objectFit: 'contain', flexShrink: 0 } })),
+                        React.createElement("div", { style: { minWidth: 0 } },
+                            React.createElement("span", { style: { display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, broker.name),
+                            React.createElement("span", { style: { fontSize: 10, color: '#9ca3af' } }, broker.depository)))))),
+                    React.createElement("button", { onClick: () => {
+                            setSelectedBroker('Other');
+                        }, style: {
+                            width: '100%',
+                            marginTop: 12,
+                            padding: '12px',
+                            fontSize: 14,
+                            fontWeight: 500,
+                            backgroundColor: '#f9fafb',
+                            color: '#6b7280',
+                            border: '1.5px dashed #d1d5db',
+                            borderRadius: 10,
+                            cursor: 'pointer',
+                        } }, "Other broker / I don't know")));
+            }
+            // LOCATE mode (default)
+            const logoUrl = config.logoUrl || DEFAULT_LOGO_URL;
+            const title = config.title || 'Import Your Investments';
+            const subtitle = config.subtitle || 'Mutual Funds, Stocks, Bonds — all in one place';
+            // Check if MF and/or Demat are allowed
+            const allowMutualFunds = allowedTypes.includes('CAMS_KFINTECH');
+            const allowDemat = allowedTypes.includes('CDSL') || allowedTypes.includes('NSDL');
+            return (React.createElement("div", null,
+                React.createElement("div", { style: { textAlign: 'center', marginBottom: 24 } },
+                    React.createElement("img", { src: logoUrl, alt: "Logo", style: { width: 56, height: 56, marginBottom: 16, objectFit: 'contain' } }),
+                    React.createElement("h2", { style: { fontSize: 22, fontWeight: 700, margin: 0, color: '#111827', letterSpacing: '-0.02em' } }, title),
+                    React.createElement("p", { style: { color: '#6b7280', marginTop: 8, fontSize: 14, lineHeight: 1.5 } }, subtitle)),
+                React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
+                    allowMutualFunds && (React.createElement("button", { onClick: () => {
+                            setSelectedType('CAMS_KFINTECH');
+                            setSelectedBroker(null);
+                            // If generator is enabled, show options; otherwise go directly to upload
+                            if (config.enableGenerator) {
+                                handleModeSwitch('MF_OPTIONS');
+                            }
+                            else {
+                                handleModeSwitch('UPLOAD');
+                            }
+                        }, style: {
+                            width: '100%',
+                            padding: '18px 20px',
+                            fontSize: 16,
+                            fontWeight: 600,
+                            backgroundColor: '#2563eb',
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: 12,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            transition: 'all 0.2s',
+                            boxShadow: '0 4px 14px rgba(37, 99, 235, 0.25)',
+                        }, onMouseOver: (e) => {
+                            e.currentTarget.style.backgroundColor = '#1d4ed8';
+                            e.currentTarget.style.transform = 'translateY(-1px)';
+                        }, onMouseOut: (e) => {
+                            e.currentTarget.style.backgroundColor = '#2563eb';
+                            e.currentTarget.style.transform = 'translateY(0)';
+                        } },
+                        React.createElement("span", { style: { display: 'block' } }, "Mutual Funds"),
+                        React.createElement("span", { style: { fontSize: 12, fontWeight: 400, opacity: 0.85 } }, "CAMS & KFintech CAS"))),
+                    allowDemat && (React.createElement("button", { onClick: () => {
+                            setSelectedBroker(null);
+                            handleModeSwitch('SELECT_BROKER');
+                        }, style: {
+                            width: '100%',
+                            padding: '18px 20px',
+                            fontSize: 16,
+                            fontWeight: 600,
+                            backgroundColor: '#fff',
+                            color: '#111827',
+                            border: '2px solid #e5e7eb',
+                            borderRadius: 12,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            transition: 'all 0.2s',
+                        }, onMouseOver: (e) => {
+                            e.currentTarget.style.borderColor = '#2563eb';
+                            e.currentTarget.style.backgroundColor = '#f0f7ff';
+                        }, onMouseOut: (e) => {
+                            e.currentTarget.style.borderColor = '#e5e7eb';
+                            e.currentTarget.style.backgroundColor = '#fff';
+                        } },
+                        React.createElement("span", { style: { display: 'block' } }, "Stocks, Bonds, ETFs"),
+                        React.createElement("span", { style: { fontSize: 12, fontWeight: 400, color: '#6b7280' } }, "Demat \u2014 CDSL & NSDL"))))));
+        };
+        // Determine if we're in a sub-screen that should show back button
+        const isSubScreen = mode !== 'LOCATE';
+        const isSandbox = apiKey === 'sandbox-with-json-responses';
+        const handleBack = () => {
+            // Smart back navigation
+            if (mode === 'UPLOAD') {
+                if (selectedType === 'CAMS_KFINTECH' && config.enableGenerator) {
+                    setMode('MF_OPTIONS');
+                }
+                else if (selectedType === 'CDSL' && config.enableCdslFetch) {
+                    setMode('DEMAT_OPTIONS');
+                }
+                else if (selectedType === 'CDSL' || selectedType === 'NSDL') {
+                    setMode('SELECT_BROKER');
+                }
+                else {
+                    setMode('LOCATE');
+                }
+            }
+            else if (mode === 'FETCH') {
+                setMode('MF_OPTIONS');
+            }
+            else if (mode === 'CDSL_FETCH') {
+                setMode('DEMAT_OPTIONS');
+            }
+            else if (mode === 'MF_OPTIONS' || mode === 'DEMAT_OPTIONS') {
+                if (selectedType === 'CDSL' || selectedType === 'NSDL') {
+                    setMode('SELECT_BROKER');
+                }
+                else {
+                    setMode('LOCATE');
+                }
+            }
+            else if (mode === 'SELECT_BROKER') {
+                setMode('LOCATE');
+            }
+            else {
+                setMode('LOCATE');
+            }
+            emitEvent('MODE_SWITCHED', { from: mode, to: 'LOCATE' });
+        };
+        return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, onBack: handleBack, showBackButton: isSubScreen, isSandbox: isSandbox, width: 420 },
+            React.createElement("div", { style: { padding: '28px 24px 20px' } },
+                renderContent(),
+                React.createElement("div", { style: {
+                        marginTop: 24,
+                        paddingTop: 16,
+                        borderTop: '1px solid #f3f4f6',
+                        textAlign: 'center',
+                    } },
+                    React.createElement("div", { style: { fontSize: 11, color: '#9ca3af' } }, "Encrypted \u2022 India-hosted")))));
+    };
+
+    const PortfolioConnect = ({ accessToken, apiKey, // deprecated, use accessToken
+    apiBaseUrl, config, onSuccess, onError, onExit, onEvent, children, }) => {
+        const [isOpen, setIsOpen] = React.useState(false);
+        // Support both accessToken (new) and apiKey (deprecated) - both work with x-api-key header
+        const token = accessToken || apiKey;
+        const open = React.useCallback(() => {
+            setIsOpen(true);
+        }, []);
+        const handleClose = React.useCallback(() => {
+            setIsOpen(false);
+            onExit?.();
+        }, [onExit]);
+        const renderProps = {
+            open,
+            isReady: !!token,
+            isOpen,
+        };
+        return (React.createElement(React.Fragment, null,
+            children(renderProps),
+            React.createElement(PortfolioConnectWidget, { isOpen: isOpen, onClose: handleClose, apiKey: token || '', apiBaseUrl: apiBaseUrl, config: config, onSuccess: onSuccess, onError: onError, onEvent: onEvent })));
+    };
+    // Backward compatibility alias
+    const CASConnect = PortfolioConnect;
+
+    // Track active widget instance for cleanup
+    let activeContainer = null;
+    let activeRoot = null;
+    /**
+     * Cleanup any existing widget instance
+     */
+    function cleanup() {
+        if (activeRoot) {
+            activeRoot.unmount();
+            activeRoot = null;
+        }
+        if (activeContainer && activeContainer.parentNode) {
+            activeContainer.parentNode.removeChild(activeContainer);
+            activeContainer = null;
+        }
+    }
+    /**
+     * Opens the Portfolio Connect widget and returns a promise that resolves with parsed data.
+     *
+     * This is the recommended API for non-React applications (Vanilla JS, Angular, Vue, etc.)
+     *
+     * @example
+     * ```javascript
+     * // Vanilla JS
+     * document.getElementById('btn').onclick = async () => {
+     *   try {
+     *     const { data, metadata } = await PortfolioConnect.open({
+     *       apiKey: 'your_api_key',
+     *       config: { enableCdslFetch: true }
+     *     });
+     *     console.log('Portfolio data:', data);
+     *   } catch (error) {
+     *     if (error.message === 'Widget closed by user') {
+     *       console.log('User cancelled');
+     *     } else {
+     *       console.error('Error:', error);
+     *     }
+     *   }
+     * };
+     * ```
+     *
+     * @param config - Configuration options
+     * @returns Promise that resolves with { data, metadata } on success, rejects on error/close
+     */
+    function open(config) {
+        return new Promise((resolve, reject) => {
+            // Cleanup any existing instance
+            cleanup();
+            // Create container
+            activeContainer = document.createElement('div');
+            activeContainer.id = 'portfolio-connect-root';
+            activeContainer.setAttribute('data-portfolio-connect', 'true');
+            document.body.appendChild(activeContainer);
+            // Create React root
+            activeRoot = ReactDOM.createRoot(activeContainer);
+            // Notify open
+            config.onOpen?.();
+            // Render widget
+            activeRoot.render(React.createElement(PortfolioConnectWidget, {
+                isOpen: true,
+                apiKey: config.accessToken || config.apiKey || '',
+                config: config.config,
+                onSuccess: (data, metadata) => {
+                    cleanup();
+                    resolve({ data, metadata });
+                },
+                onClose: () => {
+                    cleanup();
+                    reject(new Error('Widget closed by user'));
+                },
+                onError: (error) => {
+                    cleanup();
+                    reject(error);
+                },
+                onEvent: config.onEvent,
+            }));
+        });
+    }
+    /**
+     * Creates a widget handle for manual control.
+     * Useful when you need to open/close the widget multiple times.
+     *
+     * @example
+     * ```javascript
+     * const widget = PortfolioConnect.create({
+     *   apiKey: 'your_api_key',
+     *   onSuccess: (data) => console.log(data),
+     * });
+     *
+     * document.getElementById('open-btn').onclick = () => widget.open();
+     * document.getElementById('close-btn').onclick = () => widget.destroy();
+     * ```
+     *
+     * @param config - Configuration options including callbacks
+     * @returns Handle with open() and destroy() methods
+     */
+    function create(config) {
+        let container = null;
+        let root = null;
+        function render(open) {
+            if (!container) {
+                container = document.createElement('div');
+                container.id = 'portfolio-connect-root';
+                container.setAttribute('data-portfolio-connect', 'true');
+                document.body.appendChild(container);
+                root = ReactDOM.createRoot(container);
+            }
+            root.render(React.createElement(PortfolioConnectWidget, {
+                isOpen: open,
+                apiKey: config.accessToken || config.apiKey || '',
+                config: config.config,
+                onSuccess: (data, metadata) => {
+                    render(false);
+                    config.onSuccess(data, metadata);
+                },
+                onClose: () => {
+                    render(false);
+                    config.onClose?.();
+                },
+                onError: (error) => {
+                    render(false);
+                    config.onError?.(error);
+                },
+                onEvent: config.onEvent,
+            }));
+        }
+        return {
+            open: () => {
+                config.onOpen?.();
+                render(true);
+            },
+            destroy: () => {
+                if (root) {
+                    root.unmount();
+                    root = null;
+                }
+                if (container && container.parentNode) {
+                    container.parentNode.removeChild(container);
+                    container = null;
+                }
+            },
+        };
+    }
+
+    // Main exports - React components
+    // SDK Version
+    const VERSION = '1.1.0';
+    const SDK_NAME = 'Portfolio Connect';
+
+    exports.CASConnect = CASConnect;
+    exports.CASConnectWidget = PortfolioConnectWidget;
+    exports.PortfolioConnect = PortfolioConnect;
+    exports.PortfolioConnectWidget = PortfolioConnectWidget;
+    exports.SDK_NAME = SDK_NAME;
+    exports.VERSION = VERSION;
+    exports.create = create;
+    exports.isAccessToken = isAccessToken;
+    exports.open = open;
+    exports.requestAccessToken = requestAccessToken;
+
+}));
+//# sourceMappingURL=portfolio-connect.umd.js.map