chordia-ui 3.2.2 → 3.2.3

package/dist/style.css

@@ -1 +1 @@
-:root{--font-sans: "Averta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-display: "Tomato Grotesk", "Averta", ui-sans-serif, system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--bg-chordia: #F4F1E6;--paper: rgba(255, 255, 255, .78);--paper-secondary: rgba(255, 255, 255, .55);--paper-elevated: rgba(255, 255, 255, .82);--paper-high: rgba(255, 255, 255, .85);--text-ink: #1E2125;--text-base: rgba(30, 33, 37, .78);--text-strong: rgba(30, 33, 37, .92);--text-muted: rgba(30, 33, 37, .56);--text-faint: rgba(30, 33, 37, .36);--text-subtle: rgba(30, 33, 37, .52);--text-xfaint: rgba(30, 33, 37, .28);--border: rgba(52, 58, 64, .12);--border-hover: rgba(52, 58, 64, .18);--border-strong: rgba(52, 58, 64, .22);--border-subtle: rgba(52, 58, 64, .08);--hover-warm: rgba(231, 212, 162, .12);--hover-warm-strong: rgba(231, 212, 162, .18);--hover-warm-subtle: rgba(231, 212, 162, .08);--hover-cool: rgba(210, 220, 235, .18);--focus: rgba(231, 212, 162, .55);--state-present: #25A372;--state-absent: rgba(30, 33, 37, .28);--state-unknown: #E7BF33;--rail-compliance: #C98A5A;--rail-orange: #C98A5A;--rail-tone: #9B7AA8;--rail-purple: #9B7AA8;--rail-discovery: #5E88B0;--rail-blue: #5E88B0;--rail-outcome: #6B7C93;--rail-slate: #6B7C93;--rail-signal-churn: #D17B6B;--rail-coral: #D17B6B;--rail-signal-upsell: #7BA89D;--rail-teal: #B8976A;--rail-signal-satisfaction: #9B8E6F;--rail-olive: #9B8E6F;--rail-quality: #8A9BAF;--card-customer: rgba(94, 136, 176, .06);--card-agent: var(--paper-elevated);--card-assistant: rgba(155, 122, 168, .05);--rail-width-thin: 4px;--rail-width: 5px;--rail-width-thick: 6px;--deviation-dot-size: 6px;--deviation-gap: 3px;--timestamp-bg: rgba(255, 255, 255, .7);--timestamp-border: rgba(52, 58, 64, .16);--bar-h: 3px;--bar-w: 45px;--bar-bg: rgba(30, 33, 37, .12);--bar-fill: rgba(30, 33, 37, .45);--tooltip-bg: rgba(30, 33, 37, .95);--tooltip-text: rgba(255, 255, 255, .95);--background: var(--bg-chordia);--foreground: var(--text-ink);--card: var(--paper-elevated);--card-foreground: var(--text-ink);--popover: var(--paper-high);--popover-foreground: var(--text-ink);--primary: #030213;--primary-foreground: #ffffff;--secondary: rgba(249, 250, 251, 1);--secondary-foreground: #030213;--accent: rgba(233, 235, 239, 1);--accent-foreground: #030213;--destructive: #C98A5A;--destructive-foreground: #ffffff;--input: transparent;--input-background: rgba(243, 243, 245, 1);--switch-background: rgba(203, 206, 212, 1);--ring: rgba(113, 113, 122, .5);--chart-1: #25A372;--chart-2: #44C090;--chart-3: #B7D89E;--chart-4: #E7BF33;--chart-5: #C98A5A;--sidebar: var(--paper-high);--sidebar-foreground: var(--text-ink);--sidebar-primary: #030213;--sidebar-primary-foreground: #ffffff;--sidebar-accent: var(--hover-warm-subtle);--sidebar-accent-foreground: var(--text-ink);--sidebar-border: var(--border);--sidebar-ring: var(--ring);--bg: var(--bg-chordia);--paper2: var(--paper-secondary);--ink: var(--text-ink);--text: var(--text-base);--muted: var(--text-muted);--faint: var(--text-faint);--b1: var(--border);--b2: var(--border-hover);--warm: var(--hover-warm);--cool: var(--hover-cool);--present: var(--state-present);--absent: var(--state-absent);--unknown: var(--state-unknown);--s1: var(--shadow-lg);--s2: var(--shadow-md);--r1: var(--radius-lg);--r2: var(--radius-md);--font-size: .875rem;--color-green: #00A66E;--color-green-hover: #009160;--color-green-disabled: #80d3b7;--color-green-ring: rgba(0, 166, 110, .12);--surface-dark: #1D1E20;--surface-card-dark: linear-gradient(180deg, #48473B 0%, #26261F 100%);--surface-card-dark-border: #333A42;--color-card-icon: #000000;--color-card-text: #ffffff;--color-text: #2E3236;--color-text-secondary: #808183;--color-text-inverse: #E8E6E1;--color-text-overlay: rgba(255, 255, 255, .5);--color-input-border: #ACADAD;--color-divider: #E5E7EB;--color-error: #E15448;--color-error-border: #ED8077;--color-error-ring: rgba(237, 128, 119, .12);--color-error-bg: #F3F7F7;--gradient-card-active: linear-gradient(160deg, #4A5330 0%, #252C14 100%);--gradient-card-inactive: linear-gradient(160deg, rgba(74, 83, 48, .25) 0%, rgba(37, 44, 20, .35) 100%)}.custom-thin-scrollbar-library::-webkit-scrollbar{width:4px;background:transparent;border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb{background:rgb(180,178,178);border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar{width:0px;background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-thumb{background:transparent}.custom-thin-scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}.custom-thin-scrollbar-ultra::-webkit-scrollbar{width:2px;background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-ultra{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
+:root{--font-sans: "Averta", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-display: "Tomato Grotesk", "Averta", ui-sans-serif, system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--bg-chordia: #F4F1E6;--paper: rgba(255, 255, 255, .78);--paper-secondary: rgba(255, 255, 255, .55);--paper-elevated: rgba(255, 255, 255, .82);--paper-high: rgba(255, 255, 255, .85);--text-ink: #1E2125;--text-base: rgba(30, 33, 37, .78);--text-strong: rgba(30, 33, 37, .92);--text-muted: rgba(30, 33, 37, .56);--text-faint: rgba(30, 33, 37, .36);--text-subtle: rgba(30, 33, 37, .52);--text-xfaint: rgba(30, 33, 37, .28);--border: rgba(52, 58, 64, .12);--border-hover: rgba(52, 58, 64, .18);--border-strong: rgba(52, 58, 64, .22);--border-subtle: rgba(52, 58, 64, .08);--hover-warm: rgba(231, 212, 162, .12);--hover-warm-strong: rgba(231, 212, 162, .18);--hover-warm-subtle: rgba(231, 212, 162, .08);--hover-cool: rgba(210, 220, 235, .18);--focus: rgba(231, 212, 162, .55);--state-present: #25A372;--state-absent: rgba(30, 33, 37, .28);--state-unknown: #E7BF33;--rail-compliance: #C98A5A;--rail-orange: #C98A5A;--rail-tone: #9B7AA8;--rail-purple: #9B7AA8;--rail-discovery: #5E88B0;--rail-blue: #5E88B0;--rail-outcome: #6B7C93;--rail-slate: #6B7C93;--rail-signal-churn: #D17B6B;--rail-coral: #D17B6B;--rail-signal-upsell: #7BA89D;--rail-teal: #B8976A;--rail-signal-satisfaction: #9B8E6F;--rail-olive: #9B8E6F;--rail-quality: #8A9BAF;--card-customer: rgba(94, 136, 176, .06);--card-agent: var(--paper-elevated);--card-assistant: rgba(155, 122, 168, .05);--rail-width-thin: 4px;--rail-width: 5px;--rail-width-thick: 6px;--deviation-dot-size: 6px;--deviation-gap: 3px;--timestamp-bg: rgba(255, 255, 255, .7);--timestamp-border: rgba(52, 58, 64, .16);--bar-h: 3px;--bar-w: 45px;--bar-bg: rgba(30, 33, 37, .12);--bar-fill: rgba(30, 33, 37, .45);--tooltip-bg: rgba(30, 33, 37, .95);--tooltip-text: rgba(255, 255, 255, .95);--background: var(--bg-chordia);--foreground: var(--text-ink);--card: var(--paper-elevated);--card-foreground: var(--text-ink);--popover: var(--paper-high);--popover-foreground: var(--text-ink);--primary: #030213;--primary-foreground: #ffffff;--secondary: rgba(249, 250, 251, 1);--secondary-foreground: #030213;--accent: rgba(233, 235, 239, 1);--accent-foreground: #030213;--destructive: #C98A5A;--destructive-foreground: #ffffff;--input: transparent;--input-background: rgba(243, 243, 245, 1);--switch-background: rgba(203, 206, 212, 1);--ring: rgba(113, 113, 122, .5);--chart-1: #25A372;--chart-2: #44C090;--chart-3: #B7D89E;--chart-4: #E7BF33;--chart-5: #C98A5A;--sidebar: var(--paper-high);--sidebar-foreground: var(--text-ink);--sidebar-primary: #030213;--sidebar-primary-foreground: #ffffff;--sidebar-accent: var(--hover-warm-subtle);--sidebar-accent-foreground: var(--text-ink);--sidebar-border: var(--border);--sidebar-ring: var(--ring);--bg: var(--bg-chordia);--paper2: var(--paper-secondary);--ink: var(--text-ink);--text: var(--text-base);--muted: var(--text-muted);--faint: var(--text-faint);--b1: var(--border);--b2: var(--border-hover);--warm: var(--hover-warm);--cool: var(--hover-cool);--present: var(--state-present);--absent: var(--state-absent);--unknown: var(--state-unknown);--s1: var(--shadow-lg);--s2: var(--shadow-md);--r1: var(--radius-lg);--r2: var(--radius-md);--font-size: .875rem;--color-green: #00A66E;--color-green-hover: #009160;--color-green-disabled: #80d3b7;--color-green-ring: rgba(0, 166, 110, .12);--surface-dark: #1D1E20;--surface-card-dark: linear-gradient(180deg, #48473B 0%, #26261F 100%);--surface-card-dark-border: #333A42;--color-card-icon: #000000;--color-card-text: #ffffff;--color-text: #2E3236;--color-text-secondary: #808183;--color-text-inverse: #E8E6E1;--color-text-overlay: rgba(255, 255, 255, .5);--color-input-border: #ACADAD;--color-divider: #E5E7EB;--color-error: #E15448;--color-error-border: #ED8077;--color-error-ring: rgba(237, 128, 119, .12);--color-error-bg: #F3F7F7;--grey-white: #FFFFFF;--grey-absent: #D9D9D9;--grey-muted: #BDBDBD;--grey-strong: var(--color-text);--focus-2: #FAF5E9;--gradient-card-active: linear-gradient(160deg, #4A5330 0%, #252C14 100%);--gradient-card-inactive: linear-gradient(160deg, rgba(74, 83, 48, .25) 0%, rgba(37, 44, 20, .35) 100%)}.custom-thin-scrollbar-library::-webkit-scrollbar{width:4px;background:transparent;border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb{background:rgb(180,178,178);border-radius:2px}.custom-thin-scrollbar-library::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar{width:0px;background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-library-hidden::-webkit-scrollbar-thumb{background:transparent}.custom-thin-scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none}.custom-thin-scrollbar-ultra::-webkit-scrollbar{width:2px;background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-track{background:transparent}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}.custom-thin-scrollbar-ultra::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}.custom-thin-scrollbar-ultra{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/login/LoginPage.jsx

@@ -162,6 +162,8 @@ export default function LoginPage({
 }) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [emailAutofilled, setEmailAutofilled] = useState(false);
+  const [passwordAutofilled, setPasswordAutofilled] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [internalLoading, setInternalLoading] = useState(false);
   const [internalError, setInternalError] = useState(null);
@@ -190,13 +192,24 @@ export default function LoginPage({
   // Sync React state with browser autofill (autofill doesn't fire onChange)
   const emailRef = useRef(null);
   const passwordRef = useRef(null);
-  const [autofilled, setAutofilled] = useState(false);
   useEffect(() => {
+    const isAutofilled = (el) => {
+      if (!el) return false;
+      try {
+        return el.matches(':-webkit-autofill, :autofill');
+      } catch {
+        // Some browsers may throw for unsupported pseudo-class selectors.
+        return false;
+      }
+    };
+
     const sync = () => {
       const e = emailRef.current;
       const p = passwordRef.current;
       if (e && e.value) setEmail(e.value);
       if (p && p.value) setPassword(p.value);
+      setEmailAutofilled(isAutofilled(e));
+      setPasswordAutofilled(isAutofilled(p));
     };
     // Poll for autofill values at multiple intervals
     const timers = [100, 300, 600, 1000, 2000].map(ms => setTimeout(sync, ms));
@@ -204,7 +217,6 @@ export default function LoginPage({
     // Detect Chrome/Safari autofill via the :-webkit-autofill animation
     const handleAnimationStart = (e) => {
       if (e.animationName === 'onAutoFillStart' || e.target.matches(':-webkit-autofill')) {
-        setAutofilled(true);
         setTimeout(sync, 50);
       }
     };
@@ -212,10 +224,13 @@ export default function LoginPage({
     const pEl = passwordRef.current;
     eEl?.addEventListener('animationstart', handleAnimationStart);
     pEl?.addEventListener('animationstart', handleAnimationStart);
-    // Also listen for input/change events that some password managers fire
+    // Listen for events commonly used by password managers/autofill
     const onInput = () => setTimeout(sync, 0);
+    const onChange = () => setTimeout(sync, 0);
     eEl?.addEventListener('input', onInput);
     pEl?.addEventListener('input', onInput);
+    eEl?.addEventListener('change', onChange);
+    pEl?.addEventListener('change', onChange);
 
     return () => {
       timers.forEach(clearTimeout);
@@ -223,9 +238,43 @@ export default function LoginPage({
       pEl?.removeEventListener('animationstart', handleAnimationStart);
       eEl?.removeEventListener('input', onInput);
       pEl?.removeEventListener('input', onInput);
+      eEl?.removeEventListener('change', onChange);
+      pEl?.removeEventListener('change', onChange);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    const isAutofilled = (el) => {
+      if (!el) return false;
+      try {
+        return el.matches(':-webkit-autofill, :autofill');
+      } catch {
+        return false;
+      }
+    };
+
+    const syncIfNeeded = () => {
+      const nextEmail = emailRef.current?.value || '';
+      const nextPassword = passwordRef.current?.value || '';
+
+      if (nextEmail && nextEmail !== email) setEmail(nextEmail);
+      if (nextPassword && nextPassword !== password) setPassword(nextPassword);
+      setEmailAutofilled(isAutofilled(emailRef.current));
+      setPasswordAutofilled(isAutofilled(passwordRef.current));
+    };
+
+    // Some browsers/password managers update input values without firing events.
+    const intervalId = setInterval(syncIfNeeded, 250);
+    window.addEventListener('focus', syncIfNeeded);
+    document.addEventListener('visibilitychange', syncIfNeeded);
+
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener('focus', syncIfNeeded);
+      document.removeEventListener('visibilitychange', syncIfNeeded);
+    };
+  }, [email, password]);
+
   // Switch to full-name screen when host app signals unregistered email
   useEffect(() => {
     if (codeError && view === 'verifycode') {
@@ -236,7 +285,12 @@ export default function LoginPage({
 
   const loading = externalLoading ?? internalLoading;
   const error = externalError ?? internalError;
-  const canSubmit = (email && password && !loading) || (autofilled && !loading);
+  const currentEmail = (email || emailRef.current?.value || '').trim();
+  const currentPassword = password || passwordRef.current?.value || '';
+  const hasEmail = Boolean(currentEmail || emailAutofilled);
+  const hasPassword = Boolean(currentPassword || passwordAutofilled);
+  const canSubmit = Boolean(hasEmail && hasPassword && !loading);
+  const otpError = (view === 'verifycode' || view === 'getcodewithname') ? error : null;
 
   // Error-aware focus handlers for sign-in fields
   const focusErr = (e) => {
@@ -248,8 +302,32 @@ export default function LoginPage({
     e.target.style.boxShadow = 'none';
   };
 
+  const applyOtpFromString = (startIndex, rawValue) => {
+    const clean = (rawValue || '').replace(/\D/g, '');
+    if (!clean) return;
+
+    const next = [...otpDigits];
+    let lastFilledIndex = startIndex;
+
+    for (let i = 0; i < clean.length && startIndex + i < next.length; i += 1) {
+      next[startIndex + i] = clean[i];
+      lastFilledIndex = startIndex + i;
+    }
+
+    setOtpDigits(next);
+
+    const nextIndex = Math.min(lastFilledIndex + 1, next.length - 1);
+    otpRefs.current[nextIndex]?.focus();
+  };
+
   const handleOtpChange = (index, value) => {
-    const digit = value.replace(/\D/g, '').slice(-1);
+    const clean = value.replace(/\D/g, '');
+    if (clean.length > 1) {
+      applyOtpFromString(index, clean);
+      return;
+    }
+
+    const digit = clean.slice(-1);
     const next = [...otpDigits];
     next[index] = digit;
     setOtpDigits(next);
@@ -262,6 +340,12 @@ export default function LoginPage({
     }
   };
 
+  const handleOtpPaste = (index, e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData?.getData('text') || '';
+    applyOtpFromString(index, pasted);
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!canSubmit) return;
@@ -521,6 +605,7 @@ export default function LoginPage({
                         type="text" inputMode="numeric" maxLength={1} value={digit}
                         onChange={(e) => handleOtpChange(i, e.target.value)}
                         onKeyDown={(e) => handleOtpKeyDown(i, e)}
+                        onPaste={(e) => handleOtpPaste(i, e)}
                         autoFocus={i === 0}
                         style={{
                           flex: 1, minWidth: 0, height: 40, textAlign: 'center', fontSize: 16, fontWeight: 600,
@@ -537,6 +622,14 @@ export default function LoginPage({
                 <GreenButton onClick={() => onVerifyCode?.(verifyEmail, otpDigits.join(''))} disabled={otpDigits.some(d => !d)}>
                   Verify Code
                 </GreenButton>
+                {otpError && (
+                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg)', borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF }}>
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="var(--color-text)" style={{ flexShrink: 0 }}>
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                    </svg>
+                    {otpError}
+                  </div>
+                )}
                 <Divider />
                 <NavRow text="Not received yet?" linkText="Resend" onClick={() => onResendCode?.(verifyEmail)} />
                 <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={40} />
@@ -588,6 +681,7 @@ export default function LoginPage({
                         type="text" inputMode="numeric" maxLength={1} value={digit}
                         onChange={(e) => handleOtpChange(i, e.target.value)}
                         onKeyDown={(e) => handleOtpKeyDown(i, e)}
+                        onPaste={(e) => handleOtpPaste(i, e)}
                         autoFocus={i === 0}
                         style={{
                           flex: 1, minWidth: 0, height: 40, textAlign: 'center', fontSize: 16, fontWeight: 600,
@@ -604,6 +698,14 @@ export default function LoginPage({
                 <GreenButton onClick={() => { setVerifyEmail(codeEmail); onOneTimeCode?.(codeEmail, codeFullName, otpDigits.join('')); }} disabled={!codeEmail || !codeFullName || otpDigits.some(d => !d)}>
                   Verify & Sign In
                 </GreenButton>
+                {otpError && (
+                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg)', borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text)', fontFamily: FF }}>
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="var(--color-text)" style={{ flexShrink: 0 }}>
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+                    </svg>
+                    {otpError}
+                  </div>
+                )}
                 <Divider />
                 <NavRow text="I have my password" linkText="Back to Sign in" onClick={() => { setView('signin'); onGoToLogin?.(); }} />
                 <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={40} />

package/src/components/onboarding/ConnectData.jsx

@@ -0,0 +1,89 @@
+import IntegrationCard from '../layout/IntegrationCard';
+
+const FF = 'var(--font-sans)';
+
+// ─── Styles ───
+
+const containerStyle = {
+  fontFamily: FF,
+};
+
+const sectionTitleStyle = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  margin: 0,
+  lineHeight: 'normal',
+};
+
+const sectionSubtitleStyle = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  color: 'var(--color-text-secondary)',
+  fontFamily: FF,
+  margin: '4px 0 0',
+  lineHeight: '140%',
+};
+
+const gridStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: 16,
+  marginTop: 24,
+};
+
+// ─── Default Integrations ───
+
+const DEFAULT_INTEGRATIONS = [
+  {
+    providerName: 'Five9',
+    description: 'Cloud contact center platform for voice and digital channels',
+    status: 'connected',
+    railColor: '#5E88B0',
+  },
+  {
+    providerName: 'Twilio Flex',
+    description: 'Programmable contact center with custom workflows',
+    status: 'available',
+    railColor: '#9B7AA8',
+  },
+  {
+    providerName: 'Zoom Phone',
+    description: 'Cloud phone system with recording capabilities',
+    status: 'coming-soon',
+    railColor: '#6B7C93',
+  },
+];
+
+// ─── Component ───
+
+const ConnectData = ({ integrations = DEFAULT_INTEGRATIONS, onConfigure }) => {
+  return (
+    <div style={containerStyle}>
+      <h2 style={sectionTitleStyle}>Connect Data Source</h2>
+      <p style={sectionSubtitleStyle}>
+        Choose your preferred platforms to synchronise data.
+      </p>
+
+      <div style={gridStyle}>
+        {integrations.map((integration) => (
+          <IntegrationCard
+            key={integration.providerName}
+            providerName={integration.providerName}
+            description={integration.description}
+            status={integration.status}
+            railColor={integration.railColor}
+            logoUrl={integration.logoUrl}
+            icon={integration.icon}
+            onConfigure={() => onConfigure?.(integration)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ConnectData;