chordia-ui 3.2.2 → 3.2.4

package/dist/components/layout.es.js

@@ -1,18 +1,19 @@
 import { jsxs as t, jsx as e, Fragment as D } from "react/jsx-runtime";
-import { useState as m, useRef as j, useCallback as H, useLayoutEffect as re, useEffect as N } from "react";
-import { CheckCircle2 as I, X as E, Upload as ne, Sparkles as Q, Link as V, FolderOpen as oe, Users as ie, BookOpen as ae, Settings as Z, ChevronRight as P, Circle as $, Mail as le, Lock as se, EyeOff as de, Eye as ce, ArrowRight as pe } from "lucide-react";
+import { useState as x, useRef as F, useCallback as H, useLayoutEffect as ee, useEffect as X } from "react";
+import { CheckCircle2 as E, X as j, Upload as te, Sparkles as N, Link as Q, FolderOpen as re, Users as ne, BookOpen as oe, Settings as ie, ChevronRight as P, Circle as ae, Mail as le, Lock as se, EyeOff as de, Eye as ce, ArrowRight as pe } from "lucide-react";
+import { I as Ce } from "../IntegrationCard.es.js";
 function fe({
-  onUploadCall: x,
-  onConnectSource: u,
-  onUseSample: s,
+  onUploadCall: v,
+  onConnectSource: h,
+  onUseSample: p,
   showExamples: l = !1
 }) {
-  const [b, k] = m(null), [a, f] = m(null), [d, v] = m(null), [p, r] = m(null), y = j(null), z = [
+  const [f, C] = x(null), [a, m] = x(null), [u, k] = x(null), [d, r] = x(null), b = F(null), z = [
     { id: "five9", name: "Five9", status: "available", description: "Cloud contact center platform" },
     { id: "twilio", name: "Twilio Flex", status: "available", description: "Programmable contact center" },
     { id: "genesys", name: "Genesys Cloud", status: "available", description: "All-in-one cloud contact center" },
     { id: "zoom", name: "Zoom Phone", status: "coming-soon", description: "Cloud phone system" }
-  ], S = [
+  ], y = [
     {
       id: "retail-support",
       name: "Retail Customer Support",
@@ -34,25 +35,25 @@ function fe({
       interactions: 32,
       dateRange: "Last 45 days"
     }
-  ], W = (o) => {
-    var h;
-    const n = (h = o.target.files) == null ? void 0 : h[0];
+  ], B = (o) => {
+    var g;
+    const n = (g = o.target.files) == null ? void 0 : g[0];
     if (n) {
-      const i = n.type.startsWith("audio/"), F = n.type.startsWith("video/");
-      i || F ? (f({
+      const i = n.type.startsWith("audio/"), I = n.type.startsWith("video/");
+      i || I ? (m({
         name: n.name,
         type: n.type,
         size: n.size,
         lastModified: new Date(n.lastModified)
-      }), x ? x(n) : console.log("File uploaded:", n.name, n.type, `(${(n.size / 1024 / 1024).toFixed(2)} MB)`)) : alert("Please select an audio or video file.");
+      }), v ? v(n) : console.log("File uploaded:", n.name, n.type, `(${(n.size / 1024 / 1024).toFixed(2)} MB)`)) : alert("Please select an audio or video file.");
     }
-    y.current && (y.current.value = "");
-  }, R = (o) => {
-    const n = z.find((h) => h.id === o);
-    n && n.status === "available" && (v(n), u ? u(n) : console.log("Connected to:", n.name));
+    b.current && (b.current.value = "");
   }, M = (o) => {
-    const n = S.find((h) => h.id === o);
-    n && (r(n), s ? s(n) : console.log("Selected project:", n.name));
+    const n = z.find((g) => g.id === o);
+    n && n.status === "available" && (k(n), h ? h(n) : console.log("Connected to:", n.name));
+  }, W = (o) => {
+    const n = y.find((g) => g.id === o);
+    n && (r(n), p ? p(n) : console.log("Selected project:", n.name));
   };
   return /* @__PURE__ */ t(
     "div",
@@ -69,10 +70,10 @@ function fe({
         /* @__PURE__ */ e(
           "input",
           {
-            ref: y,
+            ref: b,
             type: "file",
             accept: "audio/*,video/*",
-            onChange: W,
+            onChange: B,
             style: { display: "none" }
           }
         ),
@@ -117,55 +118,55 @@ function fe({
               children: [
                 {
                   id: "upload",
-                  icon: ne,
+                  icon: te,
                   title: "Upload an interaction",
                   description: "Drop an audio or video recording to see what Compass surfaces",
                   recommended: !1,
                   onClick: () => {
-                    y.current && y.current.click();
+                    b.current && b.current.click();
                   }
                 },
                 {
                   id: "sample",
-                  icon: Q,
+                  icon: N,
                   title: "Explore a demonstration project",
                   description: "See how Chordia Compass surfaces insights from real interaction data",
                   recommended: !0,
                   onClick: () => {
-                    l && !p || s && s(p || { id: "default", name: "Demo Project" });
+                    l && !d || p && p(d || { id: "default", name: "Demo Project" });
                   }
                 },
                 {
                   id: "connect",
-                  icon: V,
+                  icon: Q,
                   title: "Connect a data source",
                   description: "Link your existing system to automatically analyze interactions",
                   recommended: !1,
                   onClick: () => {
-                    l && !d || u && u(d || { id: "default", name: "Data Source" });
+                    l && !u || h && h(u || { id: "default", name: "Data Source" });
                   }
                 }
               ].map((o) => {
-                const n = o.icon, h = b === o.id;
+                const n = o.icon, g = f === o.id;
                 return /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
                     onClick: o.onClick,
-                    onMouseEnter: () => k(o.id),
-                    onMouseLeave: () => k(null),
+                    onMouseEnter: () => C(o.id),
+                    onMouseLeave: () => C(null),
                     style: {
                       position: "relative",
                       width: "100%",
                       padding: "24px 28px",
-                      background: h ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.85)",
-                      border: o.recommended ? "2px solid rgba(184, 156, 106, 0.35)" : h ? "1px solid rgba(52, 58, 64, 0.20)" : "1px solid rgba(52, 58, 64, 0.12)",
+                      background: g ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.85)",
+                      border: o.recommended ? "2px solid rgba(184, 156, 106, 0.35)" : g ? "1px solid rgba(52, 58, 64, 0.20)" : "1px solid rgba(52, 58, 64, 0.12)",
                       borderRadius: "16px",
                       cursor: "pointer",
                       textAlign: "left",
                       transition: "all 0.2s ease",
-                      transform: h ? "translateY(-2px)" : "translateY(0)",
-                      boxShadow: h ? "0 12px 28px rgba(30, 33, 37, 0.12)" : "0 4px 12px rgba(30, 33, 37, 0.06)"
+                      transform: g ? "translateY(-2px)" : "translateY(0)",
+                      boxShadow: g ? "0 12px 28px rgba(30, 33, 37, 0.12)" : "0 4px 12px rgba(30, 33, 37, 0.06)"
                     },
                     children: [
                       o.recommended && /* @__PURE__ */ e(
@@ -299,13 +300,13 @@ function fe({
                 children: [
                   /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
                     /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                      /* @__PURE__ */ e(I, { size: 18, style: { color: "#1F8F5A" } }),
+                      /* @__PURE__ */ e(E, { size: 18, style: { color: "#1F8F5A" } }),
                       /* @__PURE__ */ e("span", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)" }, children: "File Uploaded" })
                     ] }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: () => f(null),
+                        onClick: () => m(null),
                         style: {
                           background: "none",
                           border: "none",
@@ -314,7 +315,7 @@ function fe({
                           display: "flex",
                           alignItems: "center"
                         },
-                        children: /* @__PURE__ */ e(E, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+                        children: /* @__PURE__ */ e(j, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
                       }
                     )
                   ] }),
@@ -344,7 +345,7 @@ function fe({
                 ]
               }
             ),
-            !p && /* @__PURE__ */ t("div", { style: { marginBottom: "24px" }, children: [
+            !d && /* @__PURE__ */ t("div", { style: { marginBottom: "24px" }, children: [
               /* @__PURE__ */ e(
                 "h3",
                 {
@@ -357,10 +358,10 @@ function fe({
                   children: "Select a Demonstration Project:"
                 }
               ),
-              /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: S.map((o) => /* @__PURE__ */ t(
+              /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: y.map((o) => /* @__PURE__ */ t(
                 "button",
                 {
-                  onClick: () => M(o.id),
+                  onClick: () => W(o.id),
                   style: {
                     padding: "12px 16px",
                     background: "rgba(255, 255, 255, 0.85)",
@@ -389,7 +390,7 @@ function fe({
                 o.id
               )) })
             ] }),
-            p && /* @__PURE__ */ t(
+            d && /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -402,10 +403,10 @@ function fe({
                 children: [
                   /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
                     /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                      /* @__PURE__ */ e(I, { size: 18, style: { color: "#1F8F5A" } }),
+                      /* @__PURE__ */ e(E, { size: 18, style: { color: "#1F8F5A" } }),
                       /* @__PURE__ */ t("span", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)" }, children: [
                         "Project Selected: ",
-                        p.name
+                        d.name
                       ] })
                     ] }),
                     /* @__PURE__ */ e(
@@ -420,22 +421,22 @@ function fe({
                           display: "flex",
                           alignItems: "center"
                         },
-                        children: /* @__PURE__ */ e(E, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+                        children: /* @__PURE__ */ e(j, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("div", { style: { fontSize: "13px", color: "rgba(30, 33, 37, 0.65)", lineHeight: 1.5 }, children: [
-                    /* @__PURE__ */ e("div", { children: p.description }),
+                    /* @__PURE__ */ e("div", { children: d.description }),
                     /* @__PURE__ */ t("div", { style: { marginTop: "4px" }, children: [
-                      /* @__PURE__ */ e("strong", { children: p.interactions }),
+                      /* @__PURE__ */ e("strong", { children: d.interactions }),
                       " interactions · ",
-                      /* @__PURE__ */ e("strong", { children: p.dateRange })
+                      /* @__PURE__ */ e("strong", { children: d.dateRange })
                     ] })
                   ] })
                 ]
               }
             ),
-            !d && /* @__PURE__ */ t("div", { style: { marginBottom: "24px" }, children: [
+            !u && /* @__PURE__ */ t("div", { style: { marginBottom: "24px" }, children: [
               /* @__PURE__ */ e(
                 "h3",
                 {
@@ -451,7 +452,7 @@ function fe({
               /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: z.map((o) => /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => R(o.id),
+                  onClick: () => M(o.id),
                   disabled: o.status === "coming-soon",
                   style: {
                     padding: "12px 16px",
@@ -493,7 +494,7 @@ function fe({
                 o.id
               )) })
             ] }),
-            d && /* @__PURE__ */ t(
+            u && /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -506,16 +507,16 @@ function fe({
                 children: [
                   /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }, children: [
                     /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                      /* @__PURE__ */ e(I, { size: 18, style: { color: "#1F8F5A" } }),
+                      /* @__PURE__ */ e(E, { size: 18, style: { color: "#1F8F5A" } }),
                       /* @__PURE__ */ t("span", { style: { fontSize: "14px", fontWeight: 650, color: "rgba(30, 33, 37, 0.92)" }, children: [
                         "Connected: ",
-                        d.name
+                        u.name
                       ] })
                     ] }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: () => v(null),
+                        onClick: () => k(null),
                         style: {
                           background: "none",
                           border: "none",
@@ -524,11 +525,11 @@ function fe({
                           display: "flex",
                           alignItems: "center"
                         },
-                        children: /* @__PURE__ */ e(E, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
+                        children: /* @__PURE__ */ e(j, { size: 16, style: { color: "rgba(30, 33, 37, 0.42)" } })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ e("div", { style: { fontSize: "13px", color: "rgba(30, 33, 37, 0.65)", lineHeight: 1.5 }, children: d.description })
+                  /* @__PURE__ */ e("div", { style: { fontSize: "13px", color: "rgba(30, 33, 37, 0.65)", lineHeight: 1.5 }, children: u.description })
                 ]
               }
             )
@@ -539,63 +540,63 @@ function fe({
   );
 }
 function me({
-  onDismiss: x,
-  onItemClick: u,
-  completedItems: s = []
+  onDismiss: v,
+  onItemClick: h,
+  completedItems: p = []
 }) {
-  const [l, b] = m(!1), [k, a] = m(null), f = [
+  const [l, f] = x(!1), [C, a] = x(null), m = [
     {
       id: "name-project",
       title: "Name your workspace",
       description: "Give your default project a meaningful name",
-      icon: oe,
-      completed: s.includes("name-project"),
+      icon: re,
+      completed: p.includes("name-project"),
       optional: !0
     },
     {
       id: "evaluate-second-interaction",
       title: "Evaluate another interaction",
       description: "Upload or connect a second interaction to see patterns",
-      icon: Q,
-      completed: s.includes("evaluate-second-interaction")
+      icon: N,
+      completed: p.includes("evaluate-second-interaction")
     },
     {
       id: "connect-source",
       title: "Connect a data source",
       description: "Link your system or platform for automatic evaluation",
-      icon: V,
-      completed: s.includes("connect-source")
+      icon: Q,
+      completed: p.includes("connect-source")
     },
     {
       id: "invite-team",
       title: "Add teammates",
       description: "Invite managers or QA team members to collaborate",
-      icon: ie,
-      completed: s.includes("invite-team"),
+      icon: ne,
+      completed: p.includes("invite-team"),
       optional: !0
     },
     {
       id: "learn-concepts",
       title: "Understand Chordia concepts",
       description: "Learn how conditions, evidence, and confidence work",
-      icon: ae,
-      completed: s.includes("learn-concepts"),
+      icon: oe,
+      completed: p.includes("learn-concepts"),
       optional: !0
     },
     {
       id: "configure-scope",
       title: "Clarify evaluation scope",
       description: "Customize which signals and conditions matter for your team",
-      icon: Z,
-      completed: s.includes("configure-scope"),
+      icon: ie,
+      completed: p.includes("configure-scope"),
       optional: !0
     }
-  ], d = f.filter((r) => r.completed).length, v = f.length, p = d / v * 100;
+  ], u = m.filter((r) => r.completed).length, k = m.length, d = u / k * 100;
   return l ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: () => b(!1),
+      onClick: () => f(!1),
       style: {
         width: "100%",
         padding: "14px 16px",
@@ -633,9 +634,9 @@ function me({
                 },
                 children: [
                   "Getting started (",
-                  d,
+                  u,
                   "/",
-                  v,
+                  k,
                   ")"
                 ]
               }
@@ -698,9 +699,9 @@ function me({
                             lineHeight: 1.4
                           },
                           children: [
-                            d,
+                            u,
                             " of ",
-                            v,
+                            k,
                             " completed"
                           ]
                         }
@@ -711,7 +712,7 @@ function me({
                         "button",
                         {
                           type: "button",
-                          onClick: () => b(!0),
+                          onClick: () => f(!0),
                           style: {
                             width: "28px",
                             height: "28px",
@@ -735,11 +736,11 @@ function me({
                           children: /* @__PURE__ */ e(P, { size: 14 })
                         }
                       ),
-                      x && /* @__PURE__ */ e(
+                      v && /* @__PURE__ */ e(
                         "button",
                         {
                           type: "button",
-                          onClick: x,
+                          onClick: v,
                           style: {
                             width: "28px",
                             height: "28px",
@@ -760,7 +761,7 @@ function me({
                             r.currentTarget.style.background = "transparent", r.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.12)";
                           },
                           title: "Dismiss checklist",
-                          children: /* @__PURE__ */ e(E, { size: 14 })
+                          children: /* @__PURE__ */ e(j, { size: 14 })
                         }
                       )
                     ] })
@@ -782,7 +783,7 @@ function me({
                     {
                       style: {
                         height: "100%",
-                        width: `${p}%`,
+                        width: `${d}%`,
                         background: "linear-gradient(90deg, rgba(184, 156, 106, 0.75) 0%, rgba(139, 157, 127, 0.75) 100%)",
                         borderRadius: "999px",
                         transition: "width 0.4s ease"
@@ -794,26 +795,26 @@ function me({
             ]
           }
         ),
-        /* @__PURE__ */ e("div", { style: { padding: "8px" }, children: f.map((r, y) => {
-          const z = r.icon, S = k === r.id;
+        /* @__PURE__ */ e("div", { style: { padding: "8px" }, children: m.map((r, b) => {
+          const z = r.icon, y = C === r.id;
           return /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: () => u == null ? void 0 : u(r.id),
+              onClick: () => h == null ? void 0 : h(r.id),
               onMouseEnter: () => a(r.id),
               onMouseLeave: () => a(null),
               disabled: r.completed,
               style: {
                 width: "100%",
                 padding: "12px 14px",
-                background: r.completed ? "rgba(139, 157, 127, 0.06)" : S ? "rgba(231, 212, 162, 0.12)" : "transparent",
+                background: r.completed ? "rgba(139, 157, 127, 0.06)" : y ? "rgba(231, 212, 162, 0.12)" : "transparent",
                 border: "none",
                 borderRadius: "10px",
                 cursor: r.completed ? "default" : "pointer",
                 textAlign: "left",
                 transition: "all 0.15s ease",
-                marginBottom: y < f.length - 1 ? "4px" : "0",
+                marginBottom: b < m.length - 1 ? "4px" : "0",
                 opacity: r.completed ? 0.7 : 1
               },
               children: /* @__PURE__ */ t(
@@ -835,13 +836,13 @@ function me({
                           flexShrink: 0
                         },
                         children: r.completed ? /* @__PURE__ */ e(
-                          I,
+                          E,
                           {
                             size: 20,
                             style: { color: "rgba(139, 157, 127, 0.75)" }
                           }
                         ) : /* @__PURE__ */ e(
-                          $,
+                          ae,
                           {
                             size: 20,
                             style: { color: "rgba(30, 33, 37, 0.24)" }
@@ -912,7 +913,7 @@ function me({
                         }
                       )
                     ] }),
-                    !r.completed && S && /* @__PURE__ */ e(
+                    !r.completed && y && /* @__PURE__ */ e(
                       P,
                       {
                         size: 16,
@@ -960,11 +961,11 @@ function me({
   );
 }
 function ye({
-  text: x = "Demo Project",
-  accentColor: u = "#B89C6A",
-  textColor: s = "rgba(255, 255, 255, 0.95)",
+  text: v = "Demo Project",
+  accentColor: h = "#B89C6A",
+  textColor: p = "rgba(255, 255, 255, 0.95)",
   size: l = "medium",
-  position: b = "fixed"
+  position: f = "fixed"
 }) {
   const a = {
     small: {
@@ -993,13 +994,13 @@ function ye({
     "div",
     {
       style: {
-        position: b,
+        position: f,
         top: 0,
         right: 0,
         width: a.width,
         height: a.height,
         overflow: "hidden",
-        zIndex: b === "fixed" ? 9999 : 1,
+        zIndex: f === "fixed" ? 9999 : 1,
         pointerEvents: "none"
       },
       children: [
@@ -1014,7 +1015,7 @@ function ye({
               height: 0,
               borderStyle: "solid",
               borderWidth: `0 ${a.width}px ${a.height}px 0`,
-              borderColor: `transparent ${u} transparent transparent`,
+              borderColor: `transparent ${h} transparent transparent`,
               opacity: 0.92
             }
           }
@@ -1054,12 +1055,12 @@ function ye({
                   fontWeight: a.fontWeight,
                   letterSpacing: a.letterSpacing,
                   textTransform: "uppercase",
-                  color: s,
+                  color: p,
                   textShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
                   whiteSpace: "nowrap",
                   userSelect: "none"
                 },
-                children: x
+                children: v
               }
             )
           }
@@ -1082,234 +1083,24 @@ function ye({
     }
   );
 }
-function ve({
-  providerName: x,
-  description: u,
-  status: s = "available",
-  railColor: l,
-  logoUrl: b,
-  icon: k,
-  onConfigure: a
-}) {
-  const f = {
-    connected: {
-      label: "Connected",
-      color: "#6B7C93",
-      bgColor: "rgba(107, 124, 147, 0.08)",
-      borderColor: "rgba(107, 124, 147, 0.20)",
-      icon: /* @__PURE__ */ e(I, { size: 14, strokeWidth: 2.5 })
-    },
-    available: {
-      label: "Available",
-      color: "#1E2125",
-      bgColor: "rgba(30, 33, 37, 0.04)",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: /* @__PURE__ */ e($, { size: 14, strokeWidth: 2 })
-    },
-    "coming-soon": {
-      label: "Coming Soon",
-      color: "rgba(30, 33, 37, 0.42)",
-      bgColor: "transparent",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: /* @__PURE__ */ e($, { size: 14, strokeWidth: 2, style: { opacity: 0.4 } })
-    }
-  }, d = f[s] || f.available;
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      style: {
-        background: "#FFFFFF",
-        border: `1px solid ${l}20`,
-        borderRadius: "8px",
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        transition: "all 0.15s ease",
-        cursor: s === "coming-soon" ? "default" : "pointer",
-        opacity: s === "coming-soon" ? 0.6 : 1,
-        overflow: "hidden",
-        height: "100%"
-      },
-      className: "hover:shadow-sm",
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: "4px",
-              background: l,
-              opacity: s === "coming-soon" ? 0.4 : 1
-            }
-          }
-        ),
-        /* @__PURE__ */ t(
-          "div",
-          {
-            style: {
-              padding: "20px",
-              paddingLeft: "24px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "16px",
-              height: "100%"
-            },
-            children: [
-              /* @__PURE__ */ t(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "flex-start",
-                    justifyContent: "space-between",
-                    gap: "12px"
-                  },
-                  children: [
-                    /* @__PURE__ */ e(
-                      "div",
-                      {
-                        style: {
-                          width: "48px",
-                          height: "48px",
-                          borderRadius: "6px",
-                          background: `${l}08`,
-                          border: `1px solid ${l}18`,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexShrink: 0
-                        },
-                        children: b ? /* @__PURE__ */ e(
-                          "img",
-                          {
-                            src: b,
-                            alt: x,
-                            style: { width: "32px", height: "32px", objectFit: "contain" }
-                          }
-                        ) : /* @__PURE__ */ e(
-                          "div",
-                          {
-                            style: {
-                              color: l,
-                              fontSize: "20px",
-                              fontWeight: 650,
-                              opacity: 0.8
-                            },
-                            children: k || (x ? x.charAt(0) : "")
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ t(
-                      "div",
-                      {
-                        style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          padding: "4px 10px",
-                          borderRadius: "4px",
-                          background: d.bgColor,
-                          border: `1px solid ${d.borderColor}`,
-                          fontSize: "11px",
-                          fontWeight: 600,
-                          letterSpacing: "0.01em",
-                          color: d.color,
-                          flexShrink: 0
-                        },
-                        children: [
-                          d.icon,
-                          d.label
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ t("div", { style: { flex: 1, minHeight: 0 }, children: [
-                /* @__PURE__ */ e(
-                  "h3",
-                  {
-                    style: {
-                      fontSize: "15px",
-                      fontWeight: 650,
-                      color: "rgba(30, 33, 37, 0.92)",
-                      marginBottom: "6px",
-                      letterSpacing: "-0.01em"
-                    },
-                    children: x
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      lineHeight: 1.5,
-                      color: "rgba(30, 33, 37, 0.65)"
-                    },
-                    children: u
-                  }
-                )
-              ] }),
-              s !== "coming-soon" && /* @__PURE__ */ t(
-                "button",
-                {
-                  onClick: (v) => {
-                    v.stopPropagation(), a == null || a();
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: "8px",
-                    padding: "8px 14px",
-                    border: "1px solid rgba(30, 33, 37, 0.15)",
-                    borderRadius: "5px",
-                    background: s === "connected" ? "transparent" : "rgba(30, 33, 37, 0.03)",
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    color: "rgba(30, 33, 37, 0.92)",
-                    cursor: "pointer",
-                    transition: "all 0.15s ease",
-                    width: "100%",
-                    marginTop: "auto"
-                  },
-                  className: "hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]",
-                  children: [
-                    /* @__PURE__ */ e(Z, { size: 14, strokeWidth: 2.5 }),
-                    s === "connected" ? "Configure" : "Connect"
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
 const ge = "../../assets/chordia-logo.png";
-function ke({
-  title: x = "Chordia",
-  subtitle: u = "Sign in to continue",
-  logo: s,
+function ve({
+  title: v = "Chordia",
+  subtitle: h = "Sign in to continue",
+  logo: p,
   onLogin: l,
-  loading: b = !1,
-  error: k = null,
+  loading: f = !1,
+  error: C = null,
   footer: a,
-  showLabels: f = !0,
-  emailPlaceholder: d = "you@company.com",
-  passwordPlaceholder: v = "Password",
-  onForgotPassword: p,
+  showLabels: m = !0,
+  emailPlaceholder: u = "you@company.com",
+  passwordPlaceholder: k = "Password",
+  onForgotPassword: d,
   compact: r = !1
 }) {
-  const [y, z] = m(""), [S, W] = m(""), [R, M] = m(!1), [c, w] = m(null), T = (i) => {
-    i.preventDefault(), !(!y || !S || b) && (l == null || l(y, S));
-  }, C = y && S && !b, o = "var(--rail-compliance)", n = "201, 138, 90", h = /* @__PURE__ */ t("div", { style: {
+  const [b, z] = x(""), [y, B] = x(""), [M, W] = x(!1), [s, w] = x(null), T = (i) => {
+    i.preventDefault(), !(!b || !y || f) && (l == null || l(b, y));
+  }, S = b && y && !f, o = "var(--rail-compliance)", n = "201, 138, 90", g = /* @__PURE__ */ t("div", { style: {
     width: "100%",
     maxWidth: 400,
     background: "var(--paper-elevated)",
@@ -1329,7 +1120,7 @@ function ke({
       background: `linear-gradient(90deg, var(--state-unknown), ${o})`,
       opacity: 0.6
     } }),
-    /* @__PURE__ */ e("div", { style: { textAlign: "center", marginBottom: 32 }, children: s || /* @__PURE__ */ t(D, { children: [
+    /* @__PURE__ */ e("div", { style: { textAlign: "center", marginBottom: 32 }, children: p || /* @__PURE__ */ t(D, { children: [
       /* @__PURE__ */ e("div", { style: {
         display: "inline-flex",
         alignItems: "center",
@@ -1342,20 +1133,20 @@ function ke({
         "img",
         {
           src: ge,
-          alt: x,
+          alt: v,
           style: { height: 28, display: "block" }
         }
       ) }),
-      u && /* @__PURE__ */ e("p", { style: {
+      h && /* @__PURE__ */ e("p", { style: {
         fontSize: "var(--text-sm)",
         color: "var(--text-muted)",
         marginTop: 4,
         marginBottom: 0
-      }, children: u })
+      }, children: h })
     ] }) }),
     /* @__PURE__ */ t("form", { onSubmit: T, children: [
       /* @__PURE__ */ t("div", { style: { marginBottom: 18 }, children: [
-        f && /* @__PURE__ */ e("label", { style: {
+        m && /* @__PURE__ */ e("label", { style: {
           display: "block",
           fontSize: "var(--text-sm)",
           fontWeight: 550,
@@ -1367,7 +1158,7 @@ function ke({
           /* @__PURE__ */ e(le, { size: 15, style: {
             position: "absolute",
             left: 12,
-            color: c === "email" ? `rgba(${n}, 0.7)` : "var(--text-faint)",
+            color: s === "email" ? `rgba(${n}, 0.7)` : "var(--text-faint)",
             pointerEvents: "none",
             transition: "color 0.2s ease"
           } }),
@@ -1375,9 +1166,9 @@ function ke({
             "input",
             {
               type: "email",
-              value: y,
+              value: b,
               onChange: (i) => z(i.target.value),
-              placeholder: d,
+              placeholder: u,
               required: !0,
               autoFocus: !0,
               autoComplete: "email",
@@ -1386,14 +1177,14 @@ function ke({
                 padding: "11px 12px 11px 38px",
                 fontSize: "var(--text-md)",
                 border: "1px solid",
-                borderColor: c === "email" ? o : "var(--border)",
+                borderColor: s === "email" ? o : "var(--border)",
                 borderRadius: "var(--radius)",
-                backgroundColor: c === "email" ? "rgba(255,255,255,0.95)" : "var(--paper)",
+                backgroundColor: s === "email" ? "rgba(255,255,255,0.95)" : "var(--paper)",
                 color: "var(--text-ink)",
                 fontFamily: "var(--font-sans)",
                 outline: "none",
                 transition: "border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease",
-                boxShadow: c === "email" ? `0 0 0 3px rgba(${n}, 0.1)` : "none"
+                boxShadow: s === "email" ? `0 0 0 3px rgba(${n}, 0.1)` : "none"
               },
               onFocus: () => w("email"),
               onBlur: () => w(null)
@@ -1402,7 +1193,7 @@ function ke({
         ] })
       ] }),
       /* @__PURE__ */ t("div", { style: { marginBottom: 6 }, children: [
-        f && /* @__PURE__ */ e("label", { style: {
+        m && /* @__PURE__ */ e("label", { style: {
           display: "block",
           fontSize: "var(--text-sm)",
           fontWeight: 550,
@@ -1414,17 +1205,17 @@ function ke({
           /* @__PURE__ */ e(se, { size: 15, style: {
             position: "absolute",
             left: 12,
-            color: c === "password" ? `rgba(${n}, 0.7)` : "var(--text-faint)",
+            color: s === "password" ? `rgba(${n}, 0.7)` : "var(--text-faint)",
             pointerEvents: "none",
             transition: "color 0.2s ease"
           } }),
           /* @__PURE__ */ e(
             "input",
             {
-              type: R ? "text" : "password",
-              value: S,
-              onChange: (i) => W(i.target.value),
-              placeholder: v,
+              type: M ? "text" : "password",
+              value: y,
+              onChange: (i) => B(i.target.value),
+              placeholder: k,
               required: !0,
               autoComplete: "current-password",
               style: {
@@ -1432,14 +1223,14 @@ function ke({
                 padding: "11px 42px 11px 38px",
                 fontSize: "var(--text-md)",
                 border: "1px solid",
-                borderColor: c === "password" ? o : "var(--border)",
+                borderColor: s === "password" ? o : "var(--border)",
                 borderRadius: "var(--radius)",
-                backgroundColor: c === "password" ? "rgba(255,255,255,0.95)" : "var(--paper)",
+                backgroundColor: s === "password" ? "rgba(255,255,255,0.95)" : "var(--paper)",
                 color: "var(--text-ink)",
                 fontFamily: "var(--font-sans)",
                 outline: "none",
                 transition: "border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease",
-                boxShadow: c === "password" ? `0 0 0 3px rgba(${n}, 0.1)` : "none"
+                boxShadow: s === "password" ? `0 0 0 3px rgba(${n}, 0.1)` : "none"
               },
               onFocus: () => w("password"),
               onBlur: () => w(null)
@@ -1449,7 +1240,7 @@ function ke({
             "button",
             {
               type: "button",
-              onClick: () => M(!R),
+              onClick: () => W(!M),
               style: {
                 position: "absolute",
                 right: 8,
@@ -1470,16 +1261,16 @@ function ke({
               onMouseLeave: (i) => {
                 i.currentTarget.style.color = "var(--text-faint)";
               },
-              children: R ? /* @__PURE__ */ e(de, { size: 16 }) : /* @__PURE__ */ e(ce, { size: 16 })
+              children: M ? /* @__PURE__ */ e(de, { size: 16 }) : /* @__PURE__ */ e(ce, { size: 16 })
             }
           )
         ] })
       ] }),
-      p && /* @__PURE__ */ e("div", { style: { textAlign: "right", marginBottom: 4 }, children: /* @__PURE__ */ e(
+      d && /* @__PURE__ */ e("div", { style: { textAlign: "right", marginBottom: 4 }, children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: p,
+          onClick: d,
           style: {
             background: "none",
             border: "none",
@@ -1499,7 +1290,7 @@ function ke({
           children: "Forgot password?"
         }
       ) }),
-      k && /* @__PURE__ */ e("div", { style: {
+      C && /* @__PURE__ */ e("div", { style: {
         fontSize: "var(--text-sm)",
         color: "var(--text-strong)",
         marginTop: 12,
@@ -1509,24 +1300,24 @@ function ke({
         borderRadius: "var(--radius-sm)",
         textAlign: "center",
         fontWeight: 500
-      }, children: k }),
+      }, children: C }),
       /* @__PURE__ */ e(
         "button",
         {
           type: "submit",
-          disabled: !C,
+          disabled: !S,
           style: {
             width: "100%",
             padding: "11px 0",
             marginTop: 20,
-            background: C ? "var(--text-ink)" : "var(--text-xfaint)",
+            background: S ? "var(--text-ink)" : "var(--text-xfaint)",
             color: "#ffffff",
             border: "none",
             borderRadius: "var(--radius)",
             fontSize: "var(--text-md)",
             fontWeight: 600,
             fontFamily: "var(--font-sans)",
-            cursor: C ? "pointer" : "not-allowed",
+            cursor: S ? "pointer" : "not-allowed",
             transition: "opacity 0.15s ease, transform 0.1s ease",
             display: "flex",
             alignItems: "center",
@@ -1534,18 +1325,18 @@ function ke({
             gap: 8
           },
           onMouseEnter: (i) => {
-            C && (i.currentTarget.style.opacity = "0.85", i.currentTarget.style.transform = "translateY(-1px)");
+            S && (i.currentTarget.style.opacity = "0.85", i.currentTarget.style.transform = "translateY(-1px)");
           },
           onMouseLeave: (i) => {
             i.currentTarget.style.opacity = "1", i.currentTarget.style.transform = "translateY(0)";
           },
           onMouseDown: (i) => {
-            C && (i.currentTarget.style.transform = "translateY(0)");
+            S && (i.currentTarget.style.transform = "translateY(0)");
           },
           onMouseUp: (i) => {
-            C && (i.currentTarget.style.transform = "translateY(-1px)");
+            S && (i.currentTarget.style.transform = "translateY(-1px)");
           },
-          children: b ? "Signing in…" : /* @__PURE__ */ t(D, { children: [
+          children: f ? "Signing in…" : /* @__PURE__ */ t(D, { children: [
             "Sign In",
             /* @__PURE__ */ e(pe, { size: 16 })
           ] })
@@ -1570,87 +1361,87 @@ function ke({
       }, children: a })
     ] })
   ] });
-  return r ? h : /* @__PURE__ */ e("div", { style: {
+  return r ? g : /* @__PURE__ */ e("div", { style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     minHeight: "100vh",
     background: "var(--bg-chordia)",
     padding: "var(--spacing-6)"
-  }, children: h });
+  }, children: g });
 }
-function Se({
-  left: x,
-  right: u,
-  defaultWidth: s = 260,
+function ke({
+  left: v,
+  right: h,
+  defaultWidth: p = 260,
   defaultRatio: l,
-  minWidth: b = 180,
-  maxWidth: k = 450,
+  minWidth: f = 180,
+  maxWidth: C = 450,
   minRatio: a,
-  maxRatio: f,
-  collapsedWidth: d = 0,
-  collapsed: v,
-  onCollapsedChange: p,
+  maxRatio: m,
+  collapsedWidth: u = 0,
+  collapsed: k,
+  onCollapsedChange: d,
   collapseSide: r = "left",
-  collapseThreshold: y,
+  collapseThreshold: b,
   dividerWidth: z = 7,
-  style: S
+  style: y
 }) {
-  const W = v !== void 0, [R, M] = m(!1), c = W ? v : R, w = H(
-    (g) => {
-      const B = typeof g == "function" ? g(c) : g;
-      W || M(B), p == null || p(B);
+  const B = k !== void 0, [M, W] = x(!1), s = B ? k : M, w = H(
+    (c) => {
+      const R = typeof c == "function" ? c(s) : c;
+      B || W(R), d == null || d(R);
     },
-    [W, c, p]
-  ), T = j(null), [C, o] = m(0), [n, h] = m(s), [i, F] = m(!1), [_, J] = m(!1), O = j(0), U = j(0);
-  re(() => {
+    [B, s, d]
+  ), T = F(null), [S, o] = x(0), [n, g] = x(p), [i, I] = x(!1), [V, Z] = x(!1), $ = F(0), U = F(0);
+  ee(() => {
     if (!T.current)
       return;
-    const g = T.current.offsetWidth;
-    o(g), !_ && g > 0 && (l != null && h(Math.round(g * l)), J(!0));
-  }, []), N(() => {
+    const c = T.current.offsetWidth;
+    o(c), !V && c > 0 && (l != null && g(Math.round(c * l)), Z(!0));
+  }, []), X(() => {
     if (!T.current)
       return;
-    const g = new ResizeObserver((B) => {
-      for (const A of B)
+    const c = new ResizeObserver((R) => {
+      for (const A of R)
         o(A.contentRect.width);
     });
-    return g.observe(T.current), () => g.disconnect();
+    return c.observe(T.current), () => c.disconnect();
   }, []);
-  const L = a != null ? Math.round(C * a) : b, Y = f != null ? Math.round(C * f) : k, G = y ?? (r === "none" ? 0 : L - 40), K = H(
-    (g) => {
-      g.preventDefault(), O.current = g.clientX, U.current = c ? d : n, F(!0);
+  const L = a != null ? Math.round(S * a) : f, O = m != null ? Math.round(S * m) : C, Y = b ?? (r === "none" ? 0 : L - 40), _ = H(
+    (c) => {
+      c.preventDefault(), $.current = c.clientX, U.current = s ? u : n, I(!0);
     },
-    [n, c, d]
+    [n, s, u]
   );
-  N(() => {
+  X(() => {
     if (!i)
       return;
-    const g = (A) => {
-      const te = A.clientX - O.current, X = U.current + te;
-      if ((r === "left" || r === "both") && X < G) {
-        c || w(!0);
+    const c = (A) => {
+      const K = A.clientX - $.current, q = U.current + K;
+      if ((r === "left" || r === "both") && q < Y) {
+        s || w(!0);
         return;
       }
-      c && w(!1), h(Math.min(Math.max(X, L), Y));
-    }, B = () => F(!1);
-    return document.addEventListener("mousemove", g), document.addEventListener("mouseup", B), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", () => {
-      document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", B), document.body.style.userSelect = "", document.body.style.cursor = "";
+      s && w(!1), g(Math.min(Math.max(q, L), O));
+    }, R = () => I(!1);
+    return document.addEventListener("mousemove", c), document.addEventListener("mouseup", R), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", () => {
+      document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", R), document.body.style.userSelect = "", document.body.style.cursor = "";
     };
   }, [
     i,
-    c,
+    s,
     L,
+    O,
     Y,
-    G,
-    C,
+    S,
     z,
     r,
     w
   ]);
-  const ee = H(() => {
-    r !== "none" && w((g) => !g);
-  }, [w, r]), q = c ? d : n;
+  const J = H(() => {
+    r !== "none" && w((c) => !c);
+  }, [w, r]), G = s ? u : n;
   return /* @__PURE__ */ t(
     "div",
     {
@@ -1660,27 +1451,27 @@ function Se({
         height: "100%",
         overflow: "hidden",
         position: "relative",
-        ...S
+        ...y
       },
       children: [
-        (q > 0 || !c) && /* @__PURE__ */ e(
+        (G > 0 || !s) && /* @__PURE__ */ e(
           "div",
           {
             style: {
-              width: q,
+              width: G,
               flexShrink: 0,
               overflow: "hidden",
               transition: i ? "none" : "width 0.2s ease",
               height: "100%"
             },
-            children: !c && x
+            children: !s && v
           }
         ),
         /* @__PURE__ */ t(
           "div",
           {
-            onMouseDown: K,
-            onDoubleClick: ee,
+            onMouseDown: _,
+            onDoubleClick: J,
             style: {
               width: `${z}px`,
               flexShrink: 0,
@@ -1736,7 +1527,7 @@ function Se({
               overflow: "hidden",
               height: "100%"
             },
-            children: u
+            children: h
           }
         )
       ]
@@ -1746,9 +1537,9 @@ function Se({
 export {
   ye as DemoProjectBanner,
   fe as FirstCallScreen,
-  ve as IntegrationCard,
-  ke as LoginForm,
+  Ce as IntegrationCard,
+  ve as LoginForm,
   me as OnboardingChecklist,
-  Se as SplitPane
+  ke as SplitPane
 };
 //# sourceMappingURL=layout.es.js.map