chordia-ui 3.2.2 → 3.2.4

package/README.md

@@ -104,6 +104,67 @@ import { DataTable } from 'chordia-ui/components/data';
 
 If you omit `onMaxColumnsError`, the table still works; users just won’t see a toast for the max‑columns case.
 
+## LoginPage Integration
+
+`LoginPage` delegates all auth behavior to host callbacks.
+
+### Expected props
+
+```jsx
+<LoginPage
+  descopeProjectId={process.env.NEXT_PUBLIC_DESCOPE_PROJECT_ID}
+  loading={loading}
+  error={error}
+  codeError={codeError}
+  onLogin={handleLogin}
+  onOneTimeCode={handleOneTimeCode}
+  onVerifyCode={handleVerifyCode}
+  onResendCode={handleResendCode}
+  onSignUp={handleSignUp}
+  onGoToLogin={() => { setError(null); setCodeError(false); }}
+  onDescopeSuccess={() => router.push('/')}
+  onDescopeError={() => setError('Could not log in via SSO. Please try again.')}
+/>
+```
+
+### Button -> callback mapping
+
+- `Sign In` -> `onLogin(email, password)`
+- `Send One-time Code` -> `onOneTimeCode(email)`
+- `Verify Code` -> `onVerifyCode(email, otp)`
+- `Verify & Sign In` -> `onOneTimeCode(email, fullName, otp)`
+- `Resend` -> `onResendCode(email)`
+
+### Important: `onOneTimeCode` has 2 signatures
+
+Handle both host-side:
+
+- `handleOneTimeCode(email)` for send OTP
+- `handleOneTimeCode(email, fullName, otp)` for verify + sign in flow
+
+Example:
+
+```js
+async function handleOneTimeCode(email, fullName, otp) {
+  if (!email) return;
+  if (fullName && otp) {
+    return handleVerifyCode(email, otp, fullName);
+  }
+  // otherwise: send OTP API call
+}
+```
+
+### OTP error display
+
+`LoginPage` renders the external `error` prop on OTP verification screens.  
+If your verify API returns:
+
+```json
+{ "detail": "Invalid or expired OTP" }
+```
+
+set `error` to that message in host state to show it in the UI.
+
 ## Component Categories
 
 | Category | Components |

package/dist/IntegrationCard.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime");require("react");const r=require("lucide-react");function p({providerName:n,description:c,status:o="available",railColor:i,logoUrl:s,icon:d,onConfigure:l}){const a={connected:{label:"Connected",color:"#6B7C93",bgColor:"rgba(107, 124, 147, 0.08)",borderColor:"rgba(107, 124, 147, 0.20)",icon:e.jsx(r.CheckCircle2,{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:e.jsx(r.Circle,{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:e.jsx(r.Circle,{size:14,strokeWidth:2,style:{opacity:.4}})}},t=a[o]||a.available;return e.jsxs("div",{style:{background:"#FFFFFF",border:`1px solid ${i}20`,borderRadius:"8px",position:"relative",display:"flex",flexDirection:"column",transition:"all 0.15s ease",cursor:o==="coming-soon"?"default":"pointer",opacity:o==="coming-soon"?.6:1,overflow:"hidden",height:"100%"},className:"hover:shadow-sm",children:[e.jsx("div",{style:{position:"absolute",left:0,top:0,bottom:0,width:"4px",background:i,opacity:o==="coming-soon"?.4:1}}),e.jsxs("div",{style:{padding:"20px",paddingLeft:"24px",display:"flex",flexDirection:"column",gap:"16px",height:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"12px"},children:[e.jsx("div",{style:{width:"48px",height:"48px",borderRadius:"6px",background:`${i}08`,border:`1px solid ${i}18`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:s?e.jsx("img",{src:s,alt:n,style:{width:"32px",height:"32px",objectFit:"contain"}}):e.jsx("div",{style:{color:i,fontSize:"20px",fontWeight:650,opacity:.8},children:d||(n?n.charAt(0):"")})}),e.jsxs("div",{style:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 10px",borderRadius:"4px",background:t.bgColor,border:`1px solid ${t.borderColor}`,fontSize:"11px",fontWeight:600,letterSpacing:"0.01em",color:t.color,flexShrink:0},children:[t.icon,t.label]})]}),e.jsxs("div",{style:{flex:1,minHeight:0},children:[e.jsx("h3",{style:{fontSize:"15px",fontWeight:650,color:"rgba(30, 33, 37, 0.92)",marginBottom:"6px",letterSpacing:"-0.01em"},children:n}),e.jsx("p",{style:{fontSize:"13px",lineHeight:1.5,color:"rgba(30, 33, 37, 0.65)"},children:c})]}),o!=="coming-soon"&&e.jsxs("button",{onClick:g=>{g.stopPropagation(),l==null||l()},style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"8px 14px",border:"1px solid rgba(30, 33, 37, 0.15)",borderRadius:"5px",background:o==="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:[e.jsx(r.Settings,{size:14,strokeWidth:2.5}),o==="connected"?"Configure":"Connect"]})]})]})}exports.IntegrationCard=p;
+//# sourceMappingURL=IntegrationCard.cjs.js.map

package/dist/IntegrationCard.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Circle, Settings } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  railColor,\n  logoUrl,\n  icon,\n  onConfigure,\n}) {\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"#6B7C93\",\n      bgColor: \"rgba(107, 124, 147, 0.08)\",\n      borderColor: \"rgba(107, 124, 147, 0.20)\",\n      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,\n    },\n    available: {\n      label: \"Available\",\n      color: \"#1E2125\",\n      bgColor: \"rgba(30, 33, 37, 0.04)\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} />,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"rgba(30, 33, 37, 0.42)\",\n      bgColor: \"transparent\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        background: \"#FFFFFF\",\n        border: `1px solid ${railColor}20`,\n        borderRadius: \"8px\",\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        transition: \"all 0.15s ease\",\n        cursor: status === \"coming-soon\" ? \"default\" : \"pointer\",\n        opacity: status === \"coming-soon\" ? 0.6 : 1,\n        overflow: \"hidden\",\n        height: \"100%\",\n      }}\n      className=\"hover:shadow-sm\"\n    >\n      {/* Rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"4px\",\n          background: railColor,\n          opacity: status === \"coming-soon\" ? 0.4 : 1,\n        }}\n      />\n\n      {/* Content wrapper with padding */}\n      <div\n        style={{\n          padding: \"20px\",\n          paddingLeft: \"24px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"16px\",\n          height: \"100%\",\n        }}\n      >\n        {/* Header: Logo + Status */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            justifyContent: \"space-between\",\n            gap: \"12px\",\n          }}\n        >\n          {/* Logo/Icon */}\n          <div\n            style={{\n              width: \"48px\",\n              height: \"48px\",\n              borderRadius: \"6px\",\n              background: `${railColor}08`,\n              border: `1px solid ${railColor}18`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {logoUrl ? (\n              <img\n                src={logoUrl}\n                alt={providerName}\n                style={{ width: \"32px\", height: \"32px\", objectFit: \"contain\" }}\n              />\n            ) : (\n              <div\n                style={{\n                  color: railColor,\n                  fontSize: \"20px\",\n                  fontWeight: 650,\n                  opacity: 0.8,\n                }}\n              >\n                {icon || (providerName ? providerName.charAt(0) : \"\")}\n              </div>\n            )}\n          </div>\n\n          {/* Status Badge */}\n          <div\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: \"6px\",\n              padding: \"4px 10px\",\n              borderRadius: \"4px\",\n              background: config.bgColor,\n              border: `1px solid ${config.borderColor}`,\n              fontSize: \"11px\",\n              fontWeight: 600,\n              letterSpacing: \"0.01em\",\n              color: config.color,\n              flexShrink: 0,\n            }}\n          >\n            {config.icon}\n            {config.label}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={{ flex: 1, minHeight: 0 }}>\n          <h3\n            style={{\n              fontSize: \"15px\",\n              fontWeight: 650,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              marginBottom: \"6px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {providerName}\n          </h3>\n          <p\n            style={{\n              fontSize: \"13px\",\n              lineHeight: 1.5,\n              color: \"rgba(30, 33, 37, 0.65)\",\n            }}\n          >\n            {description}\n          </p>\n        </div>\n\n        {/* Action Button - aligned to bottom */}\n        {status !== \"coming-soon\" && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConfigure?.();\n            }}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"8px\",\n              padding: \"8px 14px\",\n              border: \"1px solid rgba(30, 33, 37, 0.15)\",\n              borderRadius: \"5px\",\n              background: status === \"connected\" ? \"transparent\" : \"rgba(30, 33, 37, 0.03)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              width: \"100%\",\n              marginTop: \"auto\",\n            }}\n            className=\"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]\"\n          >\n            <Settings size={14} strokeWidth={2.5} />\n            {status === \"connected\" ? \"Configure\" : \"Connect\"}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["IntegrationCard","providerName","description","status","railColor","logoUrl","icon","onConfigure","statusConfig","jsx","CheckCircle2","Circle","config","jsxs","e","Settings"],"mappings":"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"}

package/dist/IntegrationCard.es.js

@@ -0,0 +1,217 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import "react";
+import { Settings as b, CheckCircle2 as x, Circle as d } from "lucide-react";
+function m({
+  providerName: r,
+  description: s,
+  status: o = "available",
+  railColor: t,
+  logoUrl: a,
+  icon: p,
+  onConfigure: l
+}) {
+  const c = {
+    connected: {
+      label: "Connected",
+      color: "#6B7C93",
+      bgColor: "rgba(107, 124, 147, 0.08)",
+      borderColor: "rgba(107, 124, 147, 0.20)",
+      icon: /* @__PURE__ */ e(x, { 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(d, { 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(d, { size: 14, strokeWidth: 2, style: { opacity: 0.4 } })
+    }
+  }, n = c[o] || c.available;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        background: "#FFFFFF",
+        border: `1px solid ${t}20`,
+        borderRadius: "8px",
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        transition: "all 0.15s ease",
+        cursor: o === "coming-soon" ? "default" : "pointer",
+        opacity: o === "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: t,
+              opacity: o === "coming-soon" ? 0.4 : 1
+            }
+          }
+        ),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            style: {
+              padding: "20px",
+              paddingLeft: "24px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px",
+              height: "100%"
+            },
+            children: [
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between",
+                    gap: "12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "48px",
+                          height: "48px",
+                          borderRadius: "6px",
+                          background: `${t}08`,
+                          border: `1px solid ${t}18`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        },
+                        children: a ? /* @__PURE__ */ e(
+                          "img",
+                          {
+                            src: a,
+                            alt: r,
+                            style: { width: "32px", height: "32px", objectFit: "contain" }
+                          }
+                        ) : /* @__PURE__ */ e(
+                          "div",
+                          {
+                            style: {
+                              color: t,
+                              fontSize: "20px",
+                              fontWeight: 650,
+                              opacity: 0.8
+                            },
+                            children: p || (r ? r.charAt(0) : "")
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ i(
+                      "div",
+                      {
+                        style: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          padding: "4px 10px",
+                          borderRadius: "4px",
+                          background: n.bgColor,
+                          border: `1px solid ${n.borderColor}`,
+                          fontSize: "11px",
+                          fontWeight: 600,
+                          letterSpacing: "0.01em",
+                          color: n.color,
+                          flexShrink: 0
+                        },
+                        children: [
+                          n.icon,
+                          n.label
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i("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: r
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      lineHeight: 1.5,
+                      color: "rgba(30, 33, 37, 0.65)"
+                    },
+                    children: s
+                  }
+                )
+              ] }),
+              o !== "coming-soon" && /* @__PURE__ */ i(
+                "button",
+                {
+                  onClick: (g) => {
+                    g.stopPropagation(), l == null || l();
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px",
+                    padding: "8px 14px",
+                    border: "1px solid rgba(30, 33, 37, 0.15)",
+                    borderRadius: "5px",
+                    background: o === "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(b, { size: 14, strokeWidth: 2.5 }),
+                    o === "connected" ? "Configure" : "Connect"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  m as I
+};
+//# sourceMappingURL=IntegrationCard.es.js.map

package/dist/IntegrationCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Circle, Settings } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  railColor,\n  logoUrl,\n  icon,\n  onConfigure,\n}) {\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"#6B7C93\",\n      bgColor: \"rgba(107, 124, 147, 0.08)\",\n      borderColor: \"rgba(107, 124, 147, 0.20)\",\n      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,\n    },\n    available: {\n      label: \"Available\",\n      color: \"#1E2125\",\n      bgColor: \"rgba(30, 33, 37, 0.04)\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} />,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"rgba(30, 33, 37, 0.42)\",\n      bgColor: \"transparent\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        background: \"#FFFFFF\",\n        border: `1px solid ${railColor}20`,\n        borderRadius: \"8px\",\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        transition: \"all 0.15s ease\",\n        cursor: status === \"coming-soon\" ? \"default\" : \"pointer\",\n        opacity: status === \"coming-soon\" ? 0.6 : 1,\n        overflow: \"hidden\",\n        height: \"100%\",\n      }}\n      className=\"hover:shadow-sm\"\n    >\n      {/* Rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"4px\",\n          background: railColor,\n          opacity: status === \"coming-soon\" ? 0.4 : 1,\n        }}\n      />\n\n      {/* Content wrapper with padding */}\n      <div\n        style={{\n          padding: \"20px\",\n          paddingLeft: \"24px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"16px\",\n          height: \"100%\",\n        }}\n      >\n        {/* Header: Logo + Status */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            justifyContent: \"space-between\",\n            gap: \"12px\",\n          }}\n        >\n          {/* Logo/Icon */}\n          <div\n            style={{\n              width: \"48px\",\n              height: \"48px\",\n              borderRadius: \"6px\",\n              background: `${railColor}08`,\n              border: `1px solid ${railColor}18`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {logoUrl ? (\n              <img\n                src={logoUrl}\n                alt={providerName}\n                style={{ width: \"32px\", height: \"32px\", objectFit: \"contain\" }}\n              />\n            ) : (\n              <div\n                style={{\n                  color: railColor,\n                  fontSize: \"20px\",\n                  fontWeight: 650,\n                  opacity: 0.8,\n                }}\n              >\n                {icon || (providerName ? providerName.charAt(0) : \"\")}\n              </div>\n            )}\n          </div>\n\n          {/* Status Badge */}\n          <div\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: \"6px\",\n              padding: \"4px 10px\",\n              borderRadius: \"4px\",\n              background: config.bgColor,\n              border: `1px solid ${config.borderColor}`,\n              fontSize: \"11px\",\n              fontWeight: 600,\n              letterSpacing: \"0.01em\",\n              color: config.color,\n              flexShrink: 0,\n            }}\n          >\n            {config.icon}\n            {config.label}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={{ flex: 1, minHeight: 0 }}>\n          <h3\n            style={{\n              fontSize: \"15px\",\n              fontWeight: 650,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              marginBottom: \"6px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {providerName}\n          </h3>\n          <p\n            style={{\n              fontSize: \"13px\",\n              lineHeight: 1.5,\n              color: \"rgba(30, 33, 37, 0.65)\",\n            }}\n          >\n            {description}\n          </p>\n        </div>\n\n        {/* Action Button - aligned to bottom */}\n        {status !== \"coming-soon\" && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConfigure?.();\n            }}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"8px\",\n              padding: \"8px 14px\",\n              border: \"1px solid rgba(30, 33, 37, 0.15)\",\n              borderRadius: \"5px\",\n              background: status === \"connected\" ? \"transparent\" : \"rgba(30, 33, 37, 0.03)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              width: \"100%\",\n              marginTop: \"auto\",\n            }}\n            className=\"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]\"\n          >\n            <Settings size={14} strokeWidth={2.5} />\n            {status === \"connected\" ? \"Configure\" : \"Connect\"}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["IntegrationCard","providerName","description","status","railColor","logoUrl","icon","onConfigure","statusConfig","jsx","CheckCircle2","Circle","config","jsxs","e","Settings"],"mappings":";;;AASA,SAAwBA,EAAgB;AAAA,EACtC,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AACF,GAAG;AACD,QAAMC,IAAe;AAAA,IACnB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAO,gBAAAC,EAAAC,GAAA,EAAa,MAAM,IAAI,aAAa,KAAK;AAAA,IAClD;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAO,gBAAAD,EAAAE,GAAA,EAAO,MAAM,IAAI,aAAa,GAAG;AAAA,IAC1C;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAO,gBAAAF,EAAAE,GAAA,EAAO,MAAM,IAAI,aAAa,GAAG,OAAO,EAAE,SAAS,IAAO,EAAA,CAAA;AAAA,IACnE;AAAA,EAAA,GAGIC,IAASJ,EAAaL,CAAM,KAAKK,EAAa;AAGlD,SAAA,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ,aAAaT,CAAS;AAAA,QAC9B,cAAc;AAAA,QACd,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQD,MAAW,gBAAgB,YAAY;AAAA,QAC/C,SAASA,MAAW,gBAAgB,MAAM;AAAA,QAC1C,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,YAAYL;AAAA,cACZ,SAASD,MAAW,gBAAgB,MAAM;AAAA,YAC5C;AAAA,UAAA;AAAA,QACF;AAAA,QAGA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,aAAa;AAAA,cACb,SAAS;AAAA,cACT,eAAe;AAAA,cACf,KAAK;AAAA,cACL,QAAQ;AAAA,YACV;AAAA,YAGA,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,KAAK;AAAA,kBACP;AAAA,kBAGA,UAAA;AAAA,oBAAA,gBAAAJ;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,OAAO;AAAA,0BACL,OAAO;AAAA,0BACP,QAAQ;AAAA,0BACR,cAAc;AAAA,0BACd,YAAY,GAAGL,CAAS;AAAA,0BACxB,QAAQ,aAAaA,CAAS;AAAA,0BAC9B,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,gBAAgB;AAAA,0BAChB,YAAY;AAAA,wBACd;AAAA,wBAEC,UACCC,IAAA,gBAAAI;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,KAAKJ;AAAA,4BACL,KAAKJ;AAAA,4BACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,UAAU;AAAA,0BAAA;AAAA,wBAAA,IAG/D,gBAAAQ;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,OAAO;AAAA,8BACL,OAAOL;AAAA,8BACP,UAAU;AAAA,8BACV,YAAY;AAAA,8BACZ,SAAS;AAAA,4BACX;AAAA,4BAEC,UAASE,MAAAL,IAAeA,EAAa,OAAO,CAAC,IAAI;AAAA,0BAAA;AAAA,wBACpD;AAAA,sBAAA;AAAA,oBAEJ;AAAA,oBAGA,gBAAAY;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,OAAO;AAAA,0BACL,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,KAAK;AAAA,0BACL,SAAS;AAAA,0BACT,cAAc;AAAA,0BACd,YAAYD,EAAO;AAAA,0BACnB,QAAQ,aAAaA,EAAO,WAAW;AAAA,0BACvC,UAAU;AAAA,0BACV,YAAY;AAAA,0BACZ,eAAe;AAAA,0BACf,OAAOA,EAAO;AAAA,0BACd,YAAY;AAAA,wBACd;AAAA,wBAEC,UAAA;AAAA,0BAAOA,EAAA;AAAA,0BACPA,EAAO;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACV;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,cAGA,gBAAAC,EAAC,SAAI,OAAO,EAAE,MAAM,GAAG,WAAW,EAChC,GAAA,UAAA;AAAA,gBAAA,gBAAAJ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,cAAc;AAAA,sBACd,eAAe;AAAA,oBACjB;AAAA,oBAEC,UAAAR;AAAA,kBAAA;AAAA,gBACH;AAAA,gBACA,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,OAAO;AAAA,oBACT;AAAA,oBAEC,UAAAP;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA,GACF;AAAA,cAGCC,MAAW,iBACV,gBAAAU;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,CAACC,MAAM;AACd,oBAAAA,EAAE,gBAAgB,GACJP,KAAA,QAAAA;AAAA,kBAChB;AAAA,kBACA,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,KAAK;AAAA,oBACL,SAAS;AAAA,oBACT,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,YAAYJ,MAAW,cAAc,gBAAgB;AAAA,oBACrD,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,WAAW;AAAA,kBACb;AAAA,kBACA,WAAU;AAAA,kBAEV,UAAA;AAAA,oBAAA,gBAAAM,EAACM,GAAS,EAAA,MAAM,IAAI,aAAa,KAAK;AAAA,oBACrCZ,MAAW,cAAc,cAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC1C;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/UploadInteraction.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),f=require("react"),p=require("lucide-react"),i="var(--font-sans)",b={padding:"40px 48px",fontFamily:i,minHeight:"100vh",background:"var(--grey-white)",boxSizing:"border-box"},j={fontSize:"var(--text-4xl)",fontWeight:"var(--font-bold)",fontFamily:i,color:"var(--text-ink)",margin:0,letterSpacing:"var(--tracking-tight)",lineHeight:"var(--leading-tight)"},S={fontSize:14,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--color-text-secondary)",margin:"8px 0 0",fontFamily:i},w={display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginTop:"36px"},v={display:"flex",height:160,padding:24,flexDirection:"column",justifyContent:"space-between",alignItems:"flex-start",borderRadius:12,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",boxSizing:"border-box",transition:"var(--transition)",cursor:"default",gap:8},z={...v,boxShadow:"var(--shadow-sm)"},C={width:40,height:40,borderRadius:"var(--radius)",background:"var(--paper-secondary)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-base)"},k={color:"var(--grey-strong)",fontSize:20,fontStyle:"normal",fontWeight:600,lineHeight:"normal",fontFamily:i,margin:0},W={fontSize:13,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--text-base)",margin:0,fontFamily:i,flex:"1 0 0"},D={display:"flex",height:28,padding:10,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontStyle:"normal",fontWeight:600,lineHeight:1,fontFamily:i,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",boxSizing:"border-box"},H={flex:1,height:8,borderRadius:4,background:"var(--border)",overflow:"hidden"},I=n=>({width:`${n}%`,height:"100%",borderRadius:4,background:"var(--color-green)",transition:"width 0.4s ease-out"}),R={display:"inline-flex",alignItems:"center",gap:4,fontSize:"var(--text-xs)",fontWeight:"var(--font-semibold)",color:"var(--rail-compliance)",fontFamily:i,marginLeft:12};function u({icon:n,title:a,description:r,buttonLabel:s,onAction:c,recommended:g,children:h}){const[l,y]=f.useState(!1);return e.jsxs("div",{style:l?z:v,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),children:[e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:C,children:n}),e.jsx("h3",{style:k,children:a})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,marginLeft:52,marginTop:4},children:[r&&e.jsx("p",{style:W,children:r}),h]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",marginLeft:52},children:[e.jsx("button",{style:D,onClick:c,onMouseEnter:t=>{t.currentTarget.style.opacity="0.85"},onMouseLeave:t=>{t.currentTarget.style.opacity="1"},children:s}),g&&e.jsxs("span",{style:R,children:[e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})}),"Recommended"]})]})]})}const T=({userName:n="Will",stepsCompleted:a=4,totalSteps:r=6,onUpload:s,onContinue:c,onExplore:g,onConnect:h})=>{const l=a/r*100;return e.jsxs("div",{style:b,children:[e.jsxs("h1",{style:j,children:["Welcome ",n]}),e.jsx("p",{style:S,children:"Get started with your project or explore new features"}),e.jsxs("div",{style:w,children:[e.jsx(u,{icon:e.jsx(p.Upload,{size:24}),title:"Upload and Evaluate Audio",description:"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)",buttonLabel:"Upload",onAction:s}),e.jsx(u,{icon:e.jsx(p.CircleUser,{size:24}),title:"Getting started with Chordia",description:"Complete these steps to get the most out of Chordia.",buttonLabel:"Continue",onAction:c,children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[e.jsx("div",{style:H,children:e.jsx("div",{style:I(l)})}),e.jsxs("span",{style:{fontSize:12,color:"var(--text-muted)",fontFamily:i,whiteSpace:"nowrap"},children:[e.jsx("strong",{style:{color:"var(--text-base)",fontWeight:600},children:a})," of ",r," steps completed"]})]})}),e.jsx(u,{icon:e.jsx(p.Compass,{size:24}),title:"Explore Demo Projects",description:"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.",buttonLabel:"Explore",onAction:g,recommended:!0}),e.jsx(u,{icon:e.jsx(p.Link2,{size:24}),title:"Connect Data Source",description:"Connect and integrate third-party tools with your external data sources.",buttonLabel:"Connect",onAction:h})]})]})},d="var(--font-sans)",L={fontFamily:d},A={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:d,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},F={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:d,margin:"4px 0 0",lineHeight:"140%"},m={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",minHeight:320,borderRadius:16,border:"2px dashed var(--color-input-border)",background:"var(--grey-white)",boxSizing:"border-box",cursor:"pointer",transition:"var(--transition-fast)",marginTop:24,padding:"48px 24px"},M={...m,borderColor:"var(--color-green)",background:"var(--color-green-ring)"},E={width:80,height:80,borderRadius:9999,background:"var(--focus-2)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginBottom:20},U={fontSize:18,fontWeight:600,fontFamily:d,color:"var(--grey-strong)",textAlign:"center",lineHeight:"28px",margin:0},B={display:"flex",height:32,padding:16,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",fontSize:15,fontWeight:400,fontFamily:d,color:"var(--grey-strong)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",marginTop:16,boxSizing:"border-box"},O={fontSize:14,fontWeight:400,fontFamily:d,color:"var(--grey-muted)",textAlign:"center",marginTop:16,lineHeight:"140%"},P=({onFileSelect:n})=>{const[a,r]=f.useState(!1),s=f.useRef(null),c=t=>{t.preventDefault(),r(!0)},g=()=>{r(!1)},h=t=>{var x;t.preventDefault(),r(!1);const o=(x=t.dataTransfer)==null?void 0:x.files;o!=null&&o.length&&(n==null||n(o))},l=()=>{var t;(t=s.current)==null||t.click()},y=t=>{const o=t.target.files;o!=null&&o.length&&(n==null||n(o)),t.target.value=""};return e.jsxs("div",{style:L,children:[e.jsx("h2",{style:A,children:"Evaluate Interaction"}),e.jsx("p",{style:F,children:"Upload another interaction to compare results and identify patterns across multiple evaluations."}),e.jsx("input",{ref:s,type:"file",accept:".mp3,.wma,.wav",multiple:!0,style:{display:"none"},onChange:y}),e.jsxs("div",{style:a?M:m,onDragOver:c,onDragLeave:g,onDrop:h,onClick:l,children:[e.jsx("div",{style:E,children:e.jsx(p.CloudUpload,{size:32,color:"var(--grey-strong)"})}),e.jsx("p",{style:U,children:"Drop your file here, or"}),e.jsx("button",{type:"button",style:B,onClick:t=>{t.stopPropagation(),l()},onMouseEnter:t=>{t.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:t=>{t.currentTarget.style.background="var(--grey-white)"},children:"Browse files"}),e.jsx("p",{style:O,children:"Supports: MP3, WMA or WAV"})]})]})};exports.UploadEvaluate=T;exports.UploadInteraction=P;
+//# sourceMappingURL=UploadInteraction.cjs.js.map

package/dist/UploadInteraction.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadInteraction.cjs.js","sources":["../src/components/onboarding/UploadEvaluate.jsx","../src/components/onboarding/UploadInteraction.jsx"],"sourcesContent":["import { useState } from 'react';\nimport { Upload, CircleUser, Compass, Link2 } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n  padding: '40px 48px',\n  fontFamily: FF,\n  minHeight: '100vh',\n  background: 'var(--grey-white)',\n  boxSizing: 'border-box',\n};\n\nconst headingStyle = {\n  fontSize: 'var(--text-4xl)',\n  fontWeight: 'var(--font-bold)',\n  fontFamily: FF,\n  color: 'var(--text-ink)',\n  margin: 0,\n  letterSpacing: 'var(--tracking-tight)',\n  lineHeight: 'var(--leading-tight)',\n};\n\nconst subtitleStyle = {\n  fontSize: 14,\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '140%',\n  color: 'var(--color-text-secondary)',\n  margin: '8px 0 0',\n  fontFamily: FF,\n};\n\nconst gridStyle = {\n  display: 'grid',\n  gridTemplateColumns: '1fr 1fr',\n  gap: 12,\n  marginTop: '36px',\n};\n\nconst cardStyle = {\n  display: 'flex',\n  height: 160,\n  padding: 24,\n  flexDirection: 'column',\n  justifyContent: 'space-between',\n  alignItems: 'flex-start',\n  borderRadius: 12,\n  border: '1px solid var(--grey-absent)',\n  background: 'var(--grey-white)',\n  boxSizing: 'border-box',\n  transition: 'var(--transition)',\n  cursor: 'default',\n  gap: 8\n};\n\nconst cardHoverStyle = {\n  ...cardStyle,\n  boxShadow: 'var(--shadow-sm)',\n};\n\nconst iconWrapperStyle = {\n  width: 40,\n  height: 40,\n  borderRadius: 'var(--radius)',\n  background: 'var(--paper-secondary)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: 'var(--text-base)',\n};\n\nconst cardTitleStyle = {\n  color: 'var(--grey-strong)',\n  fontSize: 20,\n  fontStyle: 'normal',\n  fontWeight: 600,\n  lineHeight: 'normal',\n  fontFamily: FF,\n  margin: 0,\n};\n\nconst cardDescStyle = {\n  fontSize: 13,\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '140%',\n  color: 'var(--text-base)',\n  margin: 0,\n  fontFamily: FF,\n  flex: '1 0 0',\n};\n\nconst btnStyle = {\n  display: 'flex',\n  height: 28,\n  padding: 10,\n  justifyContent: 'center',\n  alignItems: 'center',\n  gap: 10,\n  borderRadius: 10,\n  background: 'var(--grey-strong)',\n  fontSize: 14,\n  fontStyle: 'normal',\n  fontWeight: 600,\n  lineHeight: 1,\n  fontFamily: FF,\n  color: 'var(--grey-white)',\n  border: 'none',\n  cursor: 'pointer',\n  transition: 'var(--transition-fast)',\n  outline: 'none',\n  boxSizing: 'border-box',\n};\n\nconst progressBarBg = {\n  flex: 1,\n  height: 8,\n  borderRadius: 4,\n  background: 'var(--border)',\n  overflow: 'hidden',\n};\n\nconst progressBarFill = (pct) => ({\n  width: `${pct}%`,\n  height: '100%',\n  borderRadius: 4,\n  background: 'var(--color-green)',\n  transition: 'width 0.4s ease-out',\n});\n\nconst recommendedBadge = {\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 4,\n  fontSize: 'var(--text-xs)',\n  fontWeight: 'var(--font-semibold)',\n  color: 'var(--rail-compliance)',\n  fontFamily: FF,\n  marginLeft: 12,\n};\n\n// ─── Card Component ───\n\nfunction OnboardingCard({ icon, title, description, buttonLabel, onAction, recommended, children }) {\n  const [hovered, setHovered] = useState(false);\n\n  return (\n    <div\n      style={hovered ? cardHoverStyle : cardStyle}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n    >\n      <div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n          <div style={iconWrapperStyle}>{icon}</div>\n          <h3 style={cardTitleStyle}>{title}</h3>\n        </div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginLeft: 52, marginTop: 4 }}>\n          {description && <p style={cardDescStyle}>{description}</p>}\n          {children}\n        </div>\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center', marginLeft: 52 }}>\n        <button\n          style={btnStyle}\n          onClick={onAction}\n          onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}\n          onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}\n        >\n          {buttonLabel}\n        </button>\n        {recommended && (\n          <span style={recommendedBadge}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" /></svg>\n            Recommended\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ─── Main Component ───\n\nconst UploadEvaluate = ({\n  userName = 'Will',\n  stepsCompleted = 4,\n  totalSteps = 6,\n  onUpload,\n  onContinue,\n  onExplore,\n  onConnect,\n}) => {\n  const progressPct = (stepsCompleted / totalSteps) * 100;\n\n  return (\n    <div style={containerStyle}>\n      <h1 style={headingStyle}>Welcome {userName}</h1>\n      <p style={subtitleStyle}>Get started with your project or explore new features</p>\n\n      <div style={gridStyle}>\n        {/* Upload and Evaluate Audio */}\n        <OnboardingCard\n          icon={<Upload size={24} />}\n          title=\"Upload and Evaluate Audio\"\n          description=\"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)\"\n          buttonLabel=\"Upload\"\n          onAction={onUpload}\n        />\n\n        {/* Getting started with Chordia */}\n        <OnboardingCard\n          icon={<CircleUser size={24} />}\n          title=\"Getting started with Chordia\"\n          description=\"Complete these steps to get the most out of Chordia.\"\n          buttonLabel=\"Continue\"\n          onAction={onContinue}\n        >\n          <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>\n            <div style={progressBarBg}>\n              <div style={progressBarFill(progressPct)} />\n            </div>\n            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FF, whiteSpace: 'nowrap' }}>\n              <strong style={{ color: 'var(--text-base)', fontWeight: 600 }}>{stepsCompleted}</strong> of {totalSteps} steps completed\n            </span>\n          </div>\n        </OnboardingCard>\n\n        {/* Explore Demo Projects */}\n        <OnboardingCard\n          icon={<Compass size={24} />}\n          title=\"Explore Demo Projects\"\n          description=\"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.\"\n          buttonLabel=\"Explore\"\n          onAction={onExplore}\n          recommended\n        />\n\n        {/* Connect Data Source */}\n        <OnboardingCard\n          icon={<Link2 size={24} />}\n          title=\"Connect Data Source\"\n          description=\"Connect and integrate third-party tools with your external data sources.\"\n          buttonLabel=\"Connect\"\n          onAction={onConnect}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default UploadEvaluate;\n","import { useState, useRef } from 'react';\nimport { CloudUpload } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n  fontFamily: FF,\n};\n\nconst sectionTitleStyle = {\n  fontSize: 20,\n  fontWeight: 600,\n  fontStyle: 'normal',\n  fontFamily: FF,\n  color: 'var(--grey-strong)',\n  margin: 0,\n  lineHeight: 'normal',\n};\n\nconst sectionSubtitleStyle = {\n  fontSize: 13,\n  fontWeight: 400,\n  fontStyle: 'normal',\n  color: 'var(--color-text-secondary)',\n  fontFamily: FF,\n  margin: '4px 0 0',\n  lineHeight: '140%',\n};\n\nconst dropzoneStyle = {\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  minHeight: 320,\n  borderRadius: 16,\n  border: '2px dashed var(--color-input-border)',\n  background: 'var(--grey-white)',\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  transition: 'var(--transition-fast)',\n  marginTop: 24,\n  padding: '48px 24px',\n};\n\nconst dropzoneHoverStyle = {\n  ...dropzoneStyle,\n  borderColor: 'var(--color-green)',\n  background: 'var(--color-green-ring)',\n};\n\nconst dropzoneIconWrap = {\n  width: 80,\n  height: 80,\n  borderRadius: 9999,\n  background: 'var(--focus-2)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n  marginBottom: 20,\n};\n\nconst dropzoneTextStyle = {\n  fontSize: 18,\n  fontWeight: 600,\n  fontFamily: FF,\n  color: 'var(--grey-strong)',\n  textAlign: 'center',\n  lineHeight: '28px',\n  margin: 0,\n};\n\nconst browseButtonStyle = {\n  display: 'flex',\n  height: 32,\n  padding: 16,\n  justifyContent: 'center',\n  alignItems: 'center',\n  gap: 10,\n  borderRadius: 10,\n  border: '1px solid var(--grey-absent)',\n  background: 'var(--grey-white)',\n  fontSize: 15,\n  fontWeight: 400,\n  fontFamily: FF,\n  color: 'var(--grey-strong)',\n  cursor: 'pointer',\n  transition: 'var(--transition-fast)',\n  outline: 'none',\n  marginTop: 16,\n  boxSizing: 'border-box',\n};\n\nconst dropzoneHintStyle = {\n  fontSize: 14,\n  fontWeight: 400,\n  fontFamily: FF,\n  color: 'var(--grey-muted)',\n  textAlign: 'center',\n  marginTop: 16,\n  lineHeight: '140%',\n};\n\n// ─── Component ───\n\nconst UploadInteraction = ({ onFileSelect }) => {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef(null);\n\n  const handleDragOver = (e) => {\n    e.preventDefault();\n    setDragOver(true);\n  };\n\n  const handleDragLeave = () => {\n    setDragOver(false);\n  };\n\n  const handleDrop = (e) => {\n    e.preventDefault();\n    setDragOver(false);\n    const files = e.dataTransfer?.files;\n    if (files?.length) {\n      onFileSelect?.(files);\n    }\n  };\n\n  const handleBrowseClick = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = (e) => {\n    const files = e.target.files;\n    if (files?.length) {\n      onFileSelect?.(files);\n    }\n    e.target.value = '';\n  };\n\n  return (\n    <div style={containerStyle}>\n      <h2 style={sectionTitleStyle}>Evaluate Interaction</h2>\n      <p style={sectionSubtitleStyle}>\n        Upload another interaction to compare results and identify patterns across multiple evaluations.\n      </p>\n\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept=\".mp3,.wma,.wav\"\n        multiple\n        style={{ display: 'none' }}\n        onChange={handleFileChange}\n      />\n\n      <div\n        style={dragOver ? dropzoneHoverStyle : dropzoneStyle}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      >\n        <div style={dropzoneIconWrap}>\n          <CloudUpload size={32} color=\"var(--grey-strong)\" />\n        </div>\n        <p style={dropzoneTextStyle}>Drop your file here, or</p>\n        <button\n          type=\"button\"\n          style={browseButtonStyle}\n          onClick={(e) => { e.stopPropagation(); handleBrowseClick(); }}\n          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}\n          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--grey-white)'; }}\n        >\n          Browse files\n        </button>\n        <p style={dropzoneHintStyle}>Supports: MP3, WMA or WAV</p>\n      </div>\n    </div>\n  );\n};\n\nexport default UploadInteraction;\n"],"names":["FF","containerStyle","headingStyle","subtitleStyle","gridStyle","cardStyle","cardHoverStyle","iconWrapperStyle","cardTitleStyle","cardDescStyle","btnStyle","progressBarBg","progressBarFill","pct","recommendedBadge","OnboardingCard","icon","title","description","buttonLabel","onAction","recommended","children","hovered","setHovered","useState","jsxs","jsx","e","UploadEvaluate","userName","stepsCompleted","totalSteps","onUpload","onContinue","onExplore","onConnect","progressPct","Upload","CircleUser","Compass","Link2","sectionTitleStyle","sectionSubtitleStyle","dropzoneStyle","dropzoneHoverStyle","dropzoneIconWrap","dropzoneTextStyle","browseButtonStyle","dropzoneHintStyle","UploadInteraction","onFileSelect","dragOver","setDragOver","fileInputRef","useRef","handleDragOver","handleDragLeave","handleDrop","files","_a","handleBrowseClick","handleFileChange","CloudUpload"],"mappings":"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"}