chordia-ui 3.3.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/onboarding.cjs.js +1 -1
  2. package/dist/components/onboarding.cjs.js.map +1 -1
  3. package/dist/components/onboarding.es.js +540 -417
  4. package/dist/components/onboarding.es.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/onboarding/AddTeammates.jsx +246 -66
package/dist/components/onboarding.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("../UploadInteraction.cjs.js"),e=require("react/jsx-runtime"),p=require("react"),y=require("lucide-react"),M=require("../IntegrationCard.cjs.js"),W="var(--font-sans)",N={fontFamily:W},U={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:W,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},q={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:W,margin:"4px 0 0",lineHeight:"140%"},G={display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:16,marginTop:24},$=[{providerName:"Five9",description:"Cloud contact center platform for voice and digital channels",status:"connected",railColor:"#5E88B0"},{providerName:"Twilio Flex",description:"Programmable contact center with custom workflows",status:"available",railColor:"#9B7AA8"},{providerName:"Zoom Phone",description:"Cloud phone system with recording capabilities",status:"coming-soon",railColor:"#6B7C93"}],T=({integrations:a=$,onConfigure:g})=>e.jsxs("div",{style:N,children:[e.jsx("h2",{style:U,children:"Connect Data Source"}),e.jsx("p",{style:q,children:"Choose your preferred platforms to synchronise data."}),e.jsx("div",{style:G,children:a.map(o=>e.jsx(M.IntegrationCard,{providerName:o.providerName,description:o.description,status:o.status,railColor:o.railColor,logoUrl:o.logoUrl,icon:o.icon,onConfigure:()=>g==null?void 0:g(o)},o.providerName))})]}),j="var(--font-sans)",O=["Super Admin","Admin","Analyst","Supervisor","Agent"],B=({title:a="Create User",subtitle:g="Create users and send invites to add them to the platform.",projects:o=["Andromeda Project"],defaultRole:x="Admin",defaultProject:v,roles:h=O,onSendInvite:d,onInvite:m})=>{const[u,f]=p.useState(""),[c,F]=p.useState([]),[b,w]=p.useState(null),[S,k]=p.useState(null),E=p.useRef(null),C=p.useRef(null),i=v||o[0]||"";p.useEffect(()=>{if(b===null&&S===null)return;const t=r=>{C.current&&!C.current.contains(r.target)&&(w(null),k(null))};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[b,S]);const I=()=>{const t=u.split(",").map(s=>s.trim()).filter(s=>s.includes("@")),r=new Set(c.map(s=>s.email)),n=t.filter(s=>!r.has(s)).map(s=>({email:s,role:x,project:i}));n.length&&(F([...c,...n]),f(""))},A=t=>{t.key==="Enter"&&(t.preventDefault(),I())},H=t=>{F(c.filter((r,n)=>n!==t)),w(null)},R=(t,r,n)=>{F(c.map((s,L)=>L===t?{...s,[r]:n}:s))},P=()=>{c.length&&(d==null||d(c),m==null||m(c.map(t=>t.email)))};return e.jsxs("div",{style:{fontFamily:j},children:[e.jsx("h2",{style:{fontSize:20,fontWeight:600,color:"var(--grey-strong, #2E3236)",margin:0,lineHeight:"normal"},children:a}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--color-text-secondary, #808183)",margin:"4px 0 0",lineHeight:"140%"},children:g}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginTop:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",flex:1,minHeight:44,padding:"6px 14px",borderRadius:10,border:"1px solid var(--color-input-border, #D9D9D9)",background:"var(--grey-white, #FFF)",boxSizing:"border-box",gap:4,flexWrap:"wrap"},children:[u.split(",").filter(t=>t.trim()).length>1&&u.split(",").map(t=>t.trim()).filter(t=>t.includes("@")).map((t,r)=>e.jsx("span",{style:{display:"inline-flex",alignItems:"center",padding:"4px 10px",borderRadius:6,background:"var(--hover-warm, #F5F0E8)",fontSize:14,fontWeight:500,color:"var(--grey-strong, #2E3236)",whiteSpace:"nowrap"},children:t},r)),e.jsx("input",{ref:E,type:"text",placeholder:"Enter email addresses separated by commas",value:u,onChange:t=>f(t.target.value),onKeyDown:A,style:{flex:1,minWidth:200,border:"none",outline:"none",fontSize:14,fontWeight:400,fontFamily:j,color:"var(--grey-strong, #2E3236)",background:"transparent",height:32}})]}),e.jsx("button",{onClick:I,style:{display:"flex",height:44,padding:"0 24px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"var(--grey-strong, #2E3236)",fontSize:14,fontWeight:600,fontFamily:j,color:"var(--grey-white, #FFF)",border:"none",cursor:"pointer",flexShrink:0},children:"Add"})]}),c.length>0&&e.jsxs("div",{style:{marginTop:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,fontFamily:"Varta, var(--font-sans)",fontStyle:"normal",lineHeight:"normal",color:"var(--Content-Tertiary, #676767)"},children:"Invited Members"}),e.jsx("button",{onClick:P,style:{display:"flex",height:28,padding:10,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--Base-absent, #D9D9D9)",background:"var(--Base-White, #FFF)",fontSize:14,fontWeight:600,fontFamily:j,color:"var(--Content-Primary, #2E3236)",cursor:"pointer"},children:"Send Invite"})]}),e.jsx("div",{style:{border:"1px solid var(--border, #ECEEF2)",borderRadius:10,overflow:"visible"},children:c.map((t,r)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:r<c.length-1?"1px solid var(--border, #ECEEF2)":"none",position:"relative"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:{width:36,height:36,borderRadius:9999,background:"var(--hover-warm, #F5F0E8)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx(y.SquareUser,{size:24,color:"var(--color-text-secondary, #808183)"})}),e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:14,fontWeight:500,color:"var(--grey-strong, #2E3236)",margin:0,lineHeight:"120%"},children:t.email}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--color-text-secondary, #808183)",margin:"2px 0 0",lineHeight:"140%"},children:t.role&&t.project?`${t.role} · ${t.project}`:"Role & Project is not defined"})]})]}),e.jsxs("div",{style:{position:"relative"},ref:b===r?C:null,children:[e.jsxs("button",{onClick:()=>w(b===r?null:r),style:{display:"flex",alignItems:"center",gap:8,padding:"8px 12px",borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Base-White, #FFF)",fontSize:14,fontWeight:500,fontFamily:j,color:"var(--Content-Primary, #2E3236)",cursor:"pointer",whiteSpace:"nowrap"},children:["Set Permissions",e.jsx(y.ChevronDown,{size:16,color:"var(--Grey-Strong, #808183)"})]}),b===r&&e.jsxs("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,display:"flex",width:217,padding:"4px 12px",flexDirection:"column",alignItems:"flex-start",gap:4,borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Dropdown-Dropdown-Area-Fill, #FFF)",boxShadow:"0 8px 24px rgba(0,0,0,0.10)",zIndex:100,boxSizing:"border-box"},children:[e.jsx("div",{style:{padding:"8px 0 4px",fontSize:14,fontWeight:600,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:"Set User Role"}),h.map(n=>e.jsxs("div",{onClick:()=>R(r,"role",n),style:{display:"flex",alignItems:"center",gap:8,padding:"6px 0",cursor:"pointer",fontSize:14,fontWeight:400,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:[e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{flexShrink:0},children:[e.jsx("circle",{cx:"10",cy:"10",r:"7.33",stroke:t.role===n?"#00A66E":"#D9D9D9",strokeWidth:"2"}),t.role===n&&e.jsx("ellipse",{cx:"10",cy:"10",rx:"4.17",ry:"4.17",fill:"#00A66E"})]}),n]},n)),e.jsx("div",{style:{height:1,background:"var(--Border-Subtle, #E6E6E6)",width:"100%"}}),e.jsx("div",{style:{padding:"4px 0",fontSize:14,fontWeight:600,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:"Project Assignment"}),e.jsxs("div",{style:{width:"100%",position:"relative"},children:[e.jsxs("div",{onClick:()=>k(S===r?null:r),style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",padding:"8px 10px",borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Base-White, #FFF)",fontSize:14,fontWeight:400,fontFamily:j,color:"var(--Content-Primary, #2E3236)",cursor:"pointer",boxSizing:"border-box"},children:[t.project,e.jsx(y.ChevronDown,{size:16,color:"var(--Grey-Strong, #808183)"})]}),S===r&&e.jsx("div",{style:{position:"absolute",top:"100%",left:0,right:0,marginTop:4,borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Dropdown-Dropdown-Area-Fill, #FFF)",boxShadow:"0 4px 12px rgba(0,0,0,0.08)",zIndex:101,padding:4},children:o.map(n=>e.jsx("div",{onClick:()=>{R(r,"project",n),k(null)},style:{display:"flex",height:26,padding:"12px 16px 12px 8px",alignItems:"center",gap:6,alignSelf:"stretch",borderRadius:8,background:t.project===n?"var(--Neutral-50, #F2F2F0)":"transparent",fontSize:14,fontWeight:400,fontFamily:j,color:"var(--Content-Primary, #2E3236)",cursor:"pointer"},onMouseEnter:s=>{t.project!==n&&(s.currentTarget.style.background="var(--Neutral-50, #F2F2F0)")},onMouseLeave:s=>{t.project!==n&&(s.currentTarget.style.background="transparent")},children:n},n))})]}),e.jsx("div",{style:{height:1,background:"var(--Border-Subtle, #E6E6E6)",width:"100%"}}),e.jsxs("div",{onClick:()=>H(r),style:{display:"flex",alignItems:"center",gap:8,padding:"6px 0",cursor:"pointer",fontSize:14,fontWeight:500,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:[e.jsx(y.Trash,{size:16}),"Remove"]})]})]})]},t.email))})]})]})},l="var(--font-sans)",V=[{id:"workspace",label:"Workspace Name",description:"Give your project a title.",icon:y.Briefcase},{id:"interaction",label:"Add Interaction",description:"Connect data to see patterns.",icon:y.MessageSquare},{id:"connect",label:"Connect Data",description:"Link your platform for auto-evaluation.",icon:y.Database},{id:"invite",label:"Invite Team",description:"Add members to collaborate.",icon:y.Users},{id:"concepts",label:"Learn Concepts",description:"Explore conditions and evidence.",icon:y.BookOpen},{id:"scope",label:"Define Scope",description:"Customize evaluation signals.",icon:y.SlidersHorizontal}],_={fontFamily:l,background:"var(--grey-white)",minHeight:"100vh",boxSizing:"border-box"},K={padding:"24px 48px",borderBottom:"1px solid var(--border)",background:"var(--grey-white)"},Z={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},J={fontSize:24,fontWeight:600,fontStyle:"normal",fontFamily:l,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},Q={fontSize:14,fontWeight:400,lineHeight:"140%",color:"var(--text-muted)",margin:"4px 0 0",fontFamily:l},X={display:"flex",alignItems:"center",gap:12},Y={display:"flex",height:36,padding:"0 16px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"transparent",border:"1px solid var(--border-strong)",fontSize:14,fontWeight:500,fontFamily:l,color:"var(--text-base)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none"},ee={display:"flex",height:36,padding:"0 20px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontWeight:600,fontFamily:l,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none"},te={width:"100%",height:6,borderRadius:3,background:"var(--border)",overflow:"hidden",marginTop:12},re=a=>({width:`${a}%`,height:"100%",borderRadius:3,background:"var(--color-green)",transition:"width 0.4s ease-out"}),oe={display:"flex",flex:1,minHeight:"calc(100vh - 140px)"},ne={width:312,minWidth:312,borderRight:"1px solid var(--border)",padding:"24px 24px",background:"var(--grey-white)",boxSizing:"border-box"},ie={fontSize:13,fontWeight:500,color:"var(--text-muted)",fontFamily:l,margin:"0 0 12px"},se={display:"flex",width:264,flexDirection:"column",alignItems:"flex-start",gap:8,alignSelf:"stretch"},ae=a=>({display:"flex",alignItems:"center",gap:4,padding:"8px 4px",cursor:"pointer",transition:"var(--transition-fast)",background:a?"var(--hover-warm)":"var(--grey-white)",borderRadius:8,alignSelf:"stretch"}),le={width:40,height:40,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"},de={fontSize:14,fontWeight:600,fontStyle:"normal",color:"var(--grey-strong)",fontFamily:l,margin:0,lineHeight:"120%"},ce={fontSize:12,fontWeight:400,color:"var(--text-muted)",fontFamily:l,margin:"2px 0 0",lineHeight:1.3},pe={flex:1,padding:"40px 48px",background:"var(--grey-white)",boxSizing:"border-box"},ge={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:l,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},he={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:l,margin:"4px 0 0",lineHeight:"140%"},D={fontSize:16,fontWeight:600,fontStyle:"normal",color:"var(--grey-strong)",fontFamily:l,lineHeight:"normal",margin:0,display:"block"},ue={width:"100%",height:44,padding:"0 14px",borderRadius:6,border:"1px solid var(--color-input-border)",fontSize:16,fontWeight:400,fontStyle:"normal",lineHeight:"normal",fontFamily:l,color:"var(--color-text-secondary)",background:"var(--grey-white)",boxSizing:"border-box",outline:"none",transition:"var(--transition-fast)"},ye={position:"relative",marginTop:8},xe={width:"100%",minHeight:160,padding:"12px 14px 28px 14px",borderRadius:6,border:"1px solid var(--color-input-border)",fontSize:16,fontWeight:400,fontStyle:"normal",lineHeight:"normal",fontFamily:l,color:"var(--color-text-secondary)",background:"var(--grey-white)",boxSizing:"border-box",outline:"none",resize:"vertical",lineHeight:"140%",transition:"var(--transition-fast)"},fe={position:"absolute",bottom:10,right:14,fontSize:12,fontWeight:400,color:"var(--text-faint)",fontFamily:l,margin:0,pointerEvents:"none"};function ve(){return e.jsx("div",{style:{width:24,height:24,borderRadius:6,background:"var(--grey-strong)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M2.5 7.5L5.5 10.5L11.5 4",stroke:"var(--grey-white)",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}function me(){return e.jsxs("div",{style:{width:24,height:24,borderRadius:"50%",border:"2px solid var(--grey-muted)",background:"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,gap:2,boxSizing:"border-box"},children:[e.jsx("span",{style:{width:3,height:3,borderRadius:"50%",background:"var(--grey-muted)"}}),e.jsx("span",{style:{width:3,height:3,borderRadius:"50%",background:"var(--grey-muted)"}}),e.jsx("span",{style:{width:3,height:3,borderRadius:"50%",background:"var(--grey-muted)"}})]})}function be({step:a,isCompleted:g,isActive:o,onClick:x}){const[v,h]=p.useState(!1);return e.jsxs("div",{style:{...ae(o),...v&&!o?{background:"var(--hover-warm-subtle)"}:{}},onClick:x,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:[e.jsx("div",{style:le,children:g?e.jsx(ve,{}):e.jsx(me,{})}),e.jsxs("div",{children:[e.jsx("p",{style:de,children:a.label}),e.jsx("p",{style:ce,children:a.description})]})]})}function Se({workspaceName:a,setWorkspaceName:g,description:o,setDescription:x,maxDescLength:v}){const[h,d]=p.useState(!1),[m,u]=p.useState(!1);return e.jsxs("div",{children:[e.jsx("h2",{style:ge,children:"Name of your workspace"}),e.jsx("p",{style:he,children:"Tell us about the project or company you're organizing here."}),e.jsxs("div",{style:{marginTop:28},children:[e.jsx("label",{style:D,children:"Workspace Name"}),e.jsx("input",{type:"text",placeholder:"e.g. Acme Marketing",value:a,onChange:f=>g(f.target.value),onFocus:()=>d(!0),onBlur:()=>d(!1),style:{...ue,marginTop:8,borderColor:h?"var(--color-green)":"var(--color-input-border)",boxShadow:h?"0 0 0 3px var(--color-green-ring)":"none"}})]}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("label",{style:D,children:"Description"}),e.jsxs("div",{style:ye,children:[e.jsx("textarea",{placeholder:"what's the goal of this workspace?",value:o,onChange:f=>{f.target.value.length<=v&&x(f.target.value)},onFocus:()=>u(!0),onBlur:()=>u(!1),style:{...xe,borderColor:m?"var(--color-green)":"var(--color-input-border)",boxShadow:m?"0 0 0 3px var(--color-green-ring)":"none"}}),e.jsxs("span",{style:fe,children:[o.length,"/",v]})]})]})]})}const je=({steps:a=V,completedSteps:g=["workspace","invite"],initialActiveStep:o="workspace",onSaveNext:x,onRemindLater:v,onStepChange:h})=>{const[d,m]=p.useState(o),[u,f]=p.useState(""),[c,F]=p.useState(""),b=1e3,w=g.length,S=a.length,k=w/S*100,E=i=>{m(i),h==null||h(i)},C=()=>{x==null||x({stepId:d,workspaceName:u,description:c})};return e.jsxs("div",{style:_,children:[e.jsxs("div",{style:K,children:[e.jsxs("div",{style:Z,children:[e.jsxs("div",{children:[e.jsx("h1",{style:J,children:"Getting started with Chordia"}),e.jsx("p",{style:Q,children:"Complete these steps to get the most out of Chordia."})]}),e.jsxs("div",{style:X,children:[e.jsx("button",{style:Y,onClick:v,onMouseEnter:i=>{i.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:i=>{i.currentTarget.style.background="transparent"},children:"Remind me Later"}),e.jsx("button",{style:ee,onClick:C,onMouseEnter:i=>{i.currentTarget.style.opacity="0.85"},onMouseLeave:i=>{i.currentTarget.style.opacity="1"},children:"Save & Next"})]})]}),e.jsx("div",{style:te,children:e.jsx("div",{style:re(k)})})]}),e.jsxs("div",{style:oe,children:[e.jsxs("div",{style:ne,children:[e.jsxs("p",{style:ie,children:[w," of ",S," steps completed"]}),e.jsx("div",{style:se,children:a.map(i=>e.jsx(be,{step:i,isCompleted:g.includes(i.id),isActive:d===i.id,onClick:()=>E(i.id)},i.id))})]}),e.jsxs("div",{style:pe,children:[d==="workspace"&&e.jsx(Se,{workspaceName:u,setWorkspaceName:f,description:c,setDescription:F,maxDescLength:b}),d==="interaction"&&e.jsx(z.UploadInteraction,{}),d==="connect"&&e.jsx(T,{}),d==="invite"&&e.jsx(B,{})]})]})]})};exports.UploadEvaluate=z.UploadEvaluate;exports.UploadInteraction=z.UploadInteraction;exports.AddTeammates=B;exports.ConnectData=T;exports.GettingStarted=je;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("../UploadInteraction.cjs.js"),e=require("react/jsx-runtime"),s=require("react"),x=require("lucide-react"),te=require("../IntegrationCard.cjs.js"),M="var(--font-sans)",ne={fontFamily:M},re={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:M,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},oe={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:M,margin:"4px 0 0",lineHeight:"140%"},ie={display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:16,marginTop:24},se=[{providerName:"Five9",description:"Cloud contact center platform for voice and digital channels",status:"connected",railColor:"#5E88B0"},{providerName:"Twilio Flex",description:"Programmable contact center with custom workflows",status:"available",railColor:"#9B7AA8"},{providerName:"Zoom Phone",description:"Cloud phone system with recording capabilities",status:"coming-soon",railColor:"#6B7C93"}],q=({integrations:a=se,onConfigure:g})=>e.jsxs("div",{style:ne,children:[e.jsx("h2",{style:re,children:"Connect Data Source"}),e.jsx("p",{style:oe,children:"Choose your preferred platforms to synchronise data."}),e.jsx("div",{style:ie,children:a.map(i=>e.jsx(te.IntegrationCard,{providerName:i.providerName,description:i.description,status:i.status,railColor:i.railColor,logoUrl:i.logoUrl,icon:i.icon,onConfigure:()=>g==null?void 0:g(i)},i.providerName))})]}),y="var(--font-sans)",ae=["Super Admin","Admin","Analyst","Supervisor","Agent"],G=({title:a="Create User",subtitle:g="Create users and send invites to add them to the platform.",projects:i=["Andromeda Project"],defaultRole:f="Admin",defaultProject:m,roles:h=ae,onSendInvite:p,onInvite:b})=>{const[v,u]=s.useState(""),[l,w]=s.useState([]),[E,F]=s.useState(null),[k,S]=s.useState(""),[W,j]=s.useState(""),[o,I]=s.useState([]),[z,T]=s.useState(null),[D,B]=s.useState(null),_=s.useRef(null),A=s.useRef(null),H=s.useRef(null),K=m||i[0]||"",R=t=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t);s.useEffect(()=>{if(z===null&&D===null)return;const t=n=>{H.current&&!H.current.contains(n.target)&&(T(null),B(null))};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[z,D]),s.useEffect(()=>{E!==null&&A.current&&A.current.focus()},[E]);const Z=t=>{const n=t.target.value;if(j(""),n.endsWith(",")){const r=n.slice(0,-1).trim();if(!r){u("");return}if(!R(r)){j(`"${r}" is not a valid email address.`);return}l.includes(r)||w([...l,r]),u("")}else u(n)},N=t=>{F(t),S(l[t])},P=t=>{const n=k.trim();if(j(""),!n)w(l.filter((r,d)=>d!==t));else if(R(n))n!==l[t]&&w(l.map((r,d)=>d===t?n:r));else{j(`"${n}" is not a valid email address.`);return}F(null),S("")},J=t=>{const n=t.target.value;n.endsWith(",")?(S(n.slice(0,-1)),P(E)):S(n)},Q=(t,n)=>{t.key==="Enter"&&(t.preventDefault(),P(n)),t.key==="Escape"&&(F(null),S("")),t.key==="Backspace"&&!k&&(w(l.filter((r,d)=>d!==n)),F(null),S(""))},U=()=>{j("");const t=v.trim();if(t&&!R(t)){j(`"${t}" is not a valid email address.`);return}const n=[...l];if(t&&R(t)&&n.push(t),!n.length)return;const r=new Set(o.map(C=>C.email)),d=[...new Set(n)].filter(C=>!r.has(C)).map(C=>({email:C,role:f,project:K,invited:!1}));d.length&&I([...o,...d]),w([]),u("")},X=t=>{t.key==="Enter"&&(t.preventDefault(),U()),t.key==="Backspace"&&!v&&l.length&&N(l.length-1)},Y=t=>{I(o.filter((n,r)=>r!==t)),T(null)},$=(t,n,r)=>{I(o.map((d,C)=>C===t?{...d,[n]:r}:d))},ee=()=>{o.length&&(I(o.map(t=>({...t,invited:!0}))),p==null||p(o),b==null||b(o.map(t=>t.email)))},O=t=>t.role&&t.project;return e.jsxs("div",{style:{fontFamily:y},children:[e.jsx("h2",{style:{fontSize:20,fontWeight:600,color:"var(--grey-strong, #2E3236)",margin:0,lineHeight:"normal"},children:a}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--color-text-secondary, #808183)",margin:"4px 0 0",lineHeight:"140%"},children:g}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginTop:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",flex:1,minHeight:44,padding:"6px 14px",borderRadius:10,border:"1px solid var(--color-input-border, #D9D9D9)",background:"var(--grey-white, #FFF)",boxSizing:"border-box",gap:4,flexWrap:"wrap"},children:[l.map((t,n)=>e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:2},children:[E===n?e.jsx("input",{ref:A,type:"text",autoComplete:"off",value:k,onChange:J,onKeyDown:r=>Q(r,n),onBlur:()=>P(n),style:{border:"none",outline:"none",fontSize:14,fontWeight:500,fontFamily:y,color:"var(--grey-strong, #2E3236)",background:"#F3F7F7",borderRadius:6,padding:"4px 8px",width:`${Math.max(k.length,1)*8.5+16}px`}}):e.jsx("span",{onClick:r=>{r.stopPropagation(),N(n)},style:{display:"flex",padding:"4px 8px",justifyContent:"center",alignItems:"center",gap:10,borderRadius:6,background:"#F3F7F7",fontSize:14,fontWeight:500,color:"var(--grey-strong, #2E3236)",whiteSpace:"nowrap",cursor:"text"},children:t}),e.jsx("span",{style:{fontSize:14,color:"var(--grey-strong, #2E3236)"},children:","})]},n)),e.jsx("input",{ref:_,type:"text",autoComplete:"off",placeholder:l.length?"":"Enter email addresses separated by commas",value:v,onChange:Z,onKeyDown:X,style:{flex:1,minWidth:80,border:"none",outline:"none",fontSize:14,fontWeight:400,fontFamily:y,color:"var(--grey-strong, #2E3236)",background:"transparent",height:32}})]}),e.jsx("button",{onClick:U,style:{display:"flex",height:44,padding:"0 24px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"var(--grey-strong, #2E3236)",fontSize:14,fontWeight:600,fontFamily:y,color:"var(--grey-white, #FFF)",border:"none",cursor:"pointer",flexShrink:0},children:"Add"})]}),W&&e.jsxs("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",padding:8,gap:6,width:"100%",boxSizing:"border-box",background:"var(--color-error-bg, #F5F0E8)",borderRadius:5,fontSize:15,fontWeight:400,lineHeight:"22px",color:"var(--color-text, #2E3236)",fontFamily:y,marginTop:8},children:[e.jsx("svg",{width:"17",height:"17",viewBox:"0 0 24 24",fill:"var(--color-text, #2E3236)",style:{flexShrink:0},children:e.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"})}),W]}),o.length>0&&e.jsxs("div",{style:{marginTop:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,fontFamily:"Varta, var(--font-sans)",fontStyle:"normal",lineHeight:"normal",color:"var(--Content-Tertiary, #676767)"},children:"Invited Members"}),o.every(t=>t.invited)?e.jsxs("button",{style:{display:"flex",height:28,minWidth:80,padding:"16px 12px",justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--Base-absent, #D9D9D9)",background:"var(--Base-White, #FFF)",fontSize:14,fontWeight:500,fontFamily:y,color:"var(--Content-Primary, #2E3236)",cursor:"default"},children:[e.jsx(x.Check,{size:16}),"Sent"]}):e.jsx("button",{onClick:ee,style:{display:"flex",height:28,minWidth:80,padding:"16px 12px",justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--Base-absent, #D9D9D9)",background:"var(--Base-White, #FFF)",fontSize:14,fontWeight:500,fontFamily:y,color:"var(--Content-Primary, #2E3236)",cursor:"pointer"},children:"Send Invite"})]}),e.jsx("div",{style:{border:"1px solid var(--border, #ECEEF2)",borderRadius:10,overflow:"visible"},children:o.map((t,n)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:n<o.length-1?"1px solid var(--border, #ECEEF2)":"none",position:"relative"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:{width:36,height:36,borderRadius:9999,background:"var(--hover-warm, #F5F0E8)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx(x.SquareUser,{size:24,color:"var(--color-text-secondary, #808183)"})}),e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:14,fontWeight:500,color:"var(--grey-strong, #2E3236)",margin:0,lineHeight:"120%"},children:t.email}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--color-text-secondary, #808183)",margin:"2px 0 0",lineHeight:"140%"},children:t.role&&t.project?`${t.role} · ${t.project}`:"Role & Project is not defined"})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[t.invited&&O(t)&&e.jsx("span",{style:{fontFamily:"Varta, var(--font-sans)",fontSize:14,fontStyle:"normal",fontWeight:400,lineHeight:"normal",color:"var(--Content-Tertiary, #676767)",whiteSpace:"nowrap"},children:"Invite sent"}),e.jsxs("div",{style:{position:"relative"},ref:z===n?H:null,children:[e.jsxs("button",{onClick:()=>T(z===n?null:n),style:{display:"flex",width:160,height:32,minWidth:96,padding:"16px 12px 16px 16px",justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--Base-absent, #D9D9D9)",background:"var(--Base-White, #FFF)",fontSize:13,fontWeight:500,fontFamily:y,color:"var(--Content-Primary, #2E3236)",cursor:"pointer",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",boxSizing:"border-box"},children:[e.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,textAlign:"left"},children:O(t)?`${t.role}, ${t.project}`:"Set Permissions"}),e.jsx(x.ChevronDown,{size:16,color:"var(--Grey-Strong, #808183)",style:{flexShrink:0}})]}),z===n&&e.jsxs("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,display:"flex",width:217,padding:"4px 12px",flexDirection:"column",alignItems:"flex-start",gap:4,borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Dropdown-Dropdown-Area-Fill, #FFF)",boxShadow:"0 8px 24px rgba(0,0,0,0.10)",zIndex:100,boxSizing:"border-box"},children:[e.jsx("div",{style:{padding:"8px 0 4px",fontSize:14,fontWeight:600,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:"Set User Role"}),h.map(r=>e.jsxs("div",{onClick:()=>$(n,"role",r),style:{display:"flex",alignItems:"center",gap:8,padding:"6px 0",cursor:"pointer",fontSize:14,fontWeight:400,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:[e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{flexShrink:0},children:[e.jsx("circle",{cx:"10",cy:"10",r:"7.33",stroke:t.role===r?"#00A66E":"#D9D9D9",strokeWidth:"2"}),t.role===r&&e.jsx("ellipse",{cx:"10",cy:"10",rx:"4.17",ry:"4.17",fill:"#00A66E"})]}),r]},r)),e.jsx("div",{style:{height:1,background:"var(--Border-Subtle, #E6E6E6)",width:"100%"}}),e.jsx("div",{style:{padding:"4px 0",fontSize:14,fontWeight:600,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:"Project Assignment"}),e.jsxs("div",{style:{width:"100%",position:"relative"},children:[e.jsxs("div",{onClick:()=>B(D===n?null:n),style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",padding:"8px 10px",borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Base-White, #FFF)",fontSize:14,fontWeight:400,fontFamily:y,color:"var(--Content-Primary, #2E3236)",cursor:"pointer",boxSizing:"border-box"},children:[t.project,e.jsx(x.ChevronDown,{size:16,color:"var(--Grey-Strong, #808183)"})]}),D===n&&e.jsx("div",{style:{position:"absolute",top:"100%",left:0,right:0,marginTop:4,borderRadius:10,border:"1px solid var(--Border-Subtle, #E6E6E6)",background:"var(--Dropdown-Dropdown-Area-Fill, #FFF)",boxShadow:"0 4px 12px rgba(0,0,0,0.08)",zIndex:101,padding:4},children:i.map(r=>e.jsx("div",{onClick:()=>{$(n,"project",r),B(null)},style:{display:"flex",height:26,padding:"12px 16px 12px 8px",alignItems:"center",gap:6,alignSelf:"stretch",borderRadius:8,background:t.project===r?"var(--Neutral-50, #F2F2F0)":"transparent",fontSize:14,fontWeight:400,fontFamily:y,color:"var(--Content-Primary, #2E3236)",cursor:"pointer"},onMouseEnter:d=>{t.project!==r&&(d.currentTarget.style.background="var(--Neutral-50, #F2F2F0)")},onMouseLeave:d=>{t.project!==r&&(d.currentTarget.style.background="transparent")},children:r},r))})]}),e.jsx("div",{style:{height:1,background:"var(--Border-Subtle, #E6E6E6)",width:"100%"}}),e.jsxs("div",{onClick:()=>Y(n),style:{display:"flex",alignItems:"center",gap:8,padding:"6px 0",cursor:"pointer",fontSize:14,fontWeight:500,color:"var(--Content-Primary, #2E3236)",width:"100%"},children:[e.jsx(x.Trash,{size:16}),"Remove"]})]})]})]})]},t.email))})]})]})},c="var(--font-sans)",le=[{id:"workspace",label:"Workspace Name",description:"Give your project a title.",icon:x.Briefcase},{id:"interaction",label:"Add Interaction",description:"Connect data to see patterns.",icon:x.MessageSquare},{id:"connect",label:"Connect Data",description:"Link your platform for auto-evaluation.",icon:x.Database},{id:"invite",label:"Invite Team",description:"Add members to collaborate.",icon:x.Users},{id:"concepts",label:"Learn Concepts",description:"Explore conditions and evidence.",icon:x.BookOpen},{id:"scope",label:"Define Scope",description:"Customize evaluation signals.",icon:x.SlidersHorizontal}],de={fontFamily:c,background:"var(--grey-white)",minHeight:"100vh",boxSizing:"border-box"},ce={padding:"24px 48px",borderBottom:"1px solid var(--border)",background:"var(--grey-white)"},pe={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},ge={fontSize:24,fontWeight:600,fontStyle:"normal",fontFamily:c,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},he={fontSize:14,fontWeight:400,lineHeight:"140%",color:"var(--text-muted)",margin:"4px 0 0",fontFamily:c},ue={display:"flex",alignItems:"center",gap:12},xe={display:"flex",height:36,padding:"0 16px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"transparent",border:"1px solid var(--border-strong)",fontSize:14,fontWeight:500,fontFamily:c,color:"var(--text-base)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none"},ye={display:"flex",height:36,padding:"0 20px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontWeight:600,fontFamily:c,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none"},fe={width:"100%",height:6,borderRadius:3,background:"var(--border)",overflow:"hidden",marginTop:12},ve=a=>({width:`${a}%`,height:"100%",borderRadius:3,background:"var(--color-green)",transition:"width 0.4s ease-out"}),me={display:"flex",flex:1,minHeight:"calc(100vh - 140px)"},be={width:312,minWidth:312,borderRight:"1px solid var(--border)",padding:"24px 24px",background:"var(--grey-white)",boxSizing:"border-box"},Se={fontSize:13,fontWeight:500,color:"var(--text-muted)",fontFamily:c,margin:"0 0 12px"},je={display:"flex",width:264,flexDirection:"column",alignItems:"flex-start",gap:8,alignSelf:"stretch"},we=a=>({display:"flex",alignItems:"center",gap:4,padding:"8px 4px",cursor:"pointer",transition:"var(--transition-fast)",background:a?"var(--hover-warm)":"var(--grey-white)",borderRadius:8,alignSelf:"stretch"}),Fe={width:40,height:40,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"},ke={fontSize:14,fontWeight:600,fontStyle:"normal",color:"var(--grey-strong)",fontFamily:c,margin:0,lineHeight:"120%"},Ce={fontSize:12,fontWeight:400,color:"var(--text-muted)",fontFamily:c,margin:"2px 0 0",lineHeight:1.3},Ee={flex:1,padding:"40px 48px",background:"var(--grey-white)",boxSizing:"border-box"},ze={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:c,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},We={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:c,margin:"4px 0 0",lineHeight:"140%"},V={fontSize:16,fontWeight:600,fontStyle:"normal",color:"var(--grey-strong)",fontFamily:c,lineHeight:"normal",margin:0,display:"block"},Ie={width:"100%",height:44,padding:"0 14px",borderRadius:6,border:"1px solid var(--color-input-border)",fontSize:16,fontWeight:400,fontStyle:"normal",lineHeight:"normal",fontFamily:c,color:"var(--color-text-secondary)",background:"var(--grey-white)",boxSizing:"border-box",outline:"none",transition:"var(--transition-fast)"},De={position:"relative",marginTop:8},Re={width:"100%",minHeight:160,padding:"12px 14px 28px 14px",borderRadius:6,border:"1px solid var(--color-input-border)",fontSize:16,fontWeight:400,fontStyle:"normal",lineHeight:"normal",fontFamily:c,color:"var(--color-text-secondary)",background:"var(--grey-white)",boxSizing:"border-box",outline:"none",resize:"vertical",lineHeight:"140%",transition:"var(--transition-fast)"},Te={position:"absolute",bottom:10,right:14,fontSize:12,fontWeight:400,color:"var(--text-faint)",fontFamily:c,margin:0,pointerEvents:"none"};function Be(){return e.jsx("div",{style:{width:24,height:24,borderRadius:6,background:"var(--grey-strong)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M2.5 7.5L5.5 10.5L11.5 4",stroke:"var(--grey-white)",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}function Ae(){return e.jsxs("div",{style:{width:24,height:24,borderRadius:"50%",border:"2px solid var(--grey-muted)",background:"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,gap:2,boxSizing:"border-box"},children:[e.jsx("span",{style:{width:3,height:3,borderRadius:"50%",background:"var(--grey-muted)"}}),e.jsx("span",{style:{width:3,height:3,borderRadius:"50%",background:"var(--grey-muted)"}}),e.jsx("span",{style:{width:3,height:3,borderRadius:"50%",background:"var(--grey-muted)"}})]})}function He({step:a,isCompleted:g,isActive:i,onClick:f}){const[m,h]=s.useState(!1);return e.jsxs("div",{style:{...we(i),...m&&!i?{background:"var(--hover-warm-subtle)"}:{}},onClick:f,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:[e.jsx("div",{style:Fe,children:g?e.jsx(Be,{}):e.jsx(Ae,{})}),e.jsxs("div",{children:[e.jsx("p",{style:ke,children:a.label}),e.jsx("p",{style:Ce,children:a.description})]})]})}function Pe({workspaceName:a,setWorkspaceName:g,description:i,setDescription:f,maxDescLength:m}){const[h,p]=s.useState(!1),[b,v]=s.useState(!1);return e.jsxs("div",{children:[e.jsx("h2",{style:ze,children:"Name of your workspace"}),e.jsx("p",{style:We,children:"Tell us about the project or company you're organizing here."}),e.jsxs("div",{style:{marginTop:28},children:[e.jsx("label",{style:V,children:"Workspace Name"}),e.jsx("input",{type:"text",placeholder:"e.g. Acme Marketing",value:a,onChange:u=>g(u.target.value),onFocus:()=>p(!0),onBlur:()=>p(!1),style:{...Ie,marginTop:8,borderColor:h?"var(--color-green)":"var(--color-input-border)",boxShadow:h?"0 0 0 3px var(--color-green-ring)":"none"}})]}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("label",{style:V,children:"Description"}),e.jsxs("div",{style:De,children:[e.jsx("textarea",{placeholder:"what's the goal of this workspace?",value:i,onChange:u=>{u.target.value.length<=m&&f(u.target.value)},onFocus:()=>v(!0),onBlur:()=>v(!1),style:{...Re,borderColor:b?"var(--color-green)":"var(--color-input-border)",boxShadow:b?"0 0 0 3px var(--color-green-ring)":"none"}}),e.jsxs("span",{style:Te,children:[i.length,"/",m]})]})]})]})}const Le=({steps:a=le,completedSteps:g=["workspace","invite"],initialActiveStep:i="workspace",onSaveNext:f,onRemindLater:m,onStepChange:h})=>{const[p,b]=s.useState(i),[v,u]=s.useState(""),[l,w]=s.useState(""),E=1e3,F=g.length,k=a.length,S=F/k*100,W=o=>{b(o),h==null||h(o)},j=()=>{f==null||f({stepId:p,workspaceName:v,description:l})};return e.jsxs("div",{style:de,children:[e.jsxs("div",{style:ce,children:[e.jsxs("div",{style:pe,children:[e.jsxs("div",{children:[e.jsx("h1",{style:ge,children:"Getting started with Chordia"}),e.jsx("p",{style:he,children:"Complete these steps to get the most out of Chordia."})]}),e.jsxs("div",{style:ue,children:[e.jsx("button",{style:xe,onClick:m,onMouseEnter:o=>{o.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:o=>{o.currentTarget.style.background="transparent"},children:"Remind me Later"}),e.jsx("button",{style:ye,onClick:j,onMouseEnter:o=>{o.currentTarget.style.opacity="0.85"},onMouseLeave:o=>{o.currentTarget.style.opacity="1"},children:"Save & Next"})]})]}),e.jsx("div",{style:fe,children:e.jsx("div",{style:ve(S)})})]}),e.jsxs("div",{style:me,children:[e.jsxs("div",{style:be,children:[e.jsxs("p",{style:Se,children:[F," of ",k," steps completed"]}),e.jsx("div",{style:je,children:a.map(o=>e.jsx(He,{step:o,isCompleted:g.includes(o.id),isActive:p===o.id,onClick:()=>W(o.id)},o.id))})]}),e.jsxs("div",{style:Ee,children:[p==="workspace"&&e.jsx(Pe,{workspaceName:v,setWorkspaceName:u,description:l,setDescription:w,maxDescLength:E}),p==="interaction"&&e.jsx(L.UploadInteraction,{}),p==="connect"&&e.jsx(q,{}),p==="invite"&&e.jsx(G,{})]})]})]})};exports.UploadEvaluate=L.UploadEvaluate;exports.UploadInteraction=L.UploadInteraction;exports.AddTeammates=G;exports.ConnectData=q;exports.GettingStarted=Le;
2
2
  //# sourceMappingURL=onboarding.cjs.js.map
package/dist/components/onboarding.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"onboarding.cjs.js","sources":["../../src/components/onboarding/ConnectData.jsx","../../src/components/onboarding/AddTeammates.jsx","../../src/components/onboarding/GettingStarted.jsx"],"sourcesContent":["import IntegrationCard from '../layout/IntegrationCard';\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 gridStyle = {\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: 16,\n marginTop: 24,\n};\n\n// ─── Default Integrations ───\n\nconst DEFAULT_INTEGRATIONS = [\n {\n providerName: 'Five9',\n description: 'Cloud contact center platform for voice and digital channels',\n status: 'connected',\n railColor: '#5E88B0',\n },\n {\n providerName: 'Twilio Flex',\n description: 'Programmable contact center with custom workflows',\n status: 'available',\n railColor: '#9B7AA8',\n },\n {\n providerName: 'Zoom Phone',\n description: 'Cloud phone system with recording capabilities',\n status: 'coming-soon',\n railColor: '#6B7C93',\n },\n];\n\n// ─── Component ───\n\nconst ConnectData = ({ integrations = DEFAULT_INTEGRATIONS, onConfigure }) => {\n return (\n <div style={containerStyle}>\n <h2 style={sectionTitleStyle}>Connect Data Source</h2>\n <p style={sectionSubtitleStyle}>\n Choose your preferred platforms to synchronise data.\n </p>\n\n <div style={gridStyle}>\n {integrations.map((integration) => (\n <IntegrationCard\n key={integration.providerName}\n providerName={integration.providerName}\n description={integration.description}\n status={integration.status}\n railColor={integration.railColor}\n logoUrl={integration.logoUrl}\n icon={integration.icon}\n onConfigure={() => onConfigure?.(integration)}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport default ConnectData;\n","import { useState, useRef, useEffect } from 'react';\nimport { ChevronDown, Trash, SquareUser } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\nconst ROLES = ['Super Admin', 'Admin', 'Analyst', 'Supervisor', 'Agent'];\n\n/**\n * AddTeammates — Create users, set roles/projects, and send invites.\n *\n * Props:\n * - title string Heading (default \"Create User\")\n * - subtitle string Description text\n * - projects string[] List of project names for assignment dropdown\n * - defaultRole string Default role for new members (default \"Admin\")\n * - defaultProject string Default project for new members\n * - roles string[] Available roles (default ROLES)\n * - onSendInvite function(members[]) Called with array of { email, role, project }\n * - onInvite function(emails[]) Legacy callback\n */\nconst AddTeammates = ({\n title = 'Create User',\n subtitle = 'Create users and send invites to add them to the platform.',\n projects = ['Andromeda Project'],\n defaultRole = 'Admin',\n defaultProject,\n roles = ROLES,\n onSendInvite,\n onInvite,\n}) => {\n const [inputValue, setInputValue] = useState('');\n const [members, setMembers] = useState([]);\n const [openDropdownIdx, setOpenDropdownIdx] = useState(null);\n const [openProjectIdx, setOpenProjectIdx] = useState(null);\n const inputRef = useRef(null);\n const dropdownRef = useRef(null);\n\n const resolvedDefaultProject = defaultProject || projects[0] || '';\n\n // Close dropdowns on outside click\n useEffect(() => {\n if (openDropdownIdx === null && openProjectIdx === null) return;\n const handleClick = (e) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {\n setOpenDropdownIdx(null);\n setOpenProjectIdx(null);\n }\n };\n document.addEventListener('mousedown', handleClick);\n return () => document.removeEventListener('mousedown', handleClick);\n }, [openDropdownIdx, openProjectIdx]);\n\n const addEmails = () => {\n const raw = inputValue\n .split(',')\n .map((e) => e.trim())\n .filter((e) => e.includes('@'));\n const existing = new Set(members.map((m) => m.email));\n const newMembers = raw\n .filter((e) => !existing.has(e))\n .map((email) => ({ email, role: defaultRole, project: resolvedDefaultProject }));\n if (newMembers.length) {\n setMembers([...members, ...newMembers]);\n setInputValue('');\n }\n };\n\n const handleKeyDown = (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n addEmails();\n }\n };\n\n const removeMember = (idx) => {\n setMembers(members.filter((_, i) => i !== idx));\n setOpenDropdownIdx(null);\n };\n\n const updateMember = (idx, field, value) => {\n setMembers(members.map((m, i) => (i === idx ? { ...m, [field]: value } : m)));\n };\n\n const handleSendInvite = () => {\n if (members.length) {\n onSendInvite?.(members);\n onInvite?.(members.map((m) => m.email));\n }\n };\n\n return (\n <div style={{ fontFamily: FF }}>\n {/* Header */}\n <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--grey-strong, #2E3236)', margin: 0, lineHeight: 'normal' }}>\n {title}\n </h2>\n <p style={{ fontSize: 13, fontWeight: 400, color: 'var(--color-text-secondary, #808183)', margin: '4px 0 0', lineHeight: '140%' }}>\n {subtitle}\n </p>\n\n {/* Email input row */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n flex: 1,\n minHeight: 44,\n padding: '6px 14px',\n borderRadius: 10,\n border: '1px solid var(--color-input-border, #D9D9D9)',\n background: 'var(--grey-white, #FFF)',\n boxSizing: 'border-box',\n gap: 4,\n flexWrap: 'wrap',\n }}\n >\n {/* Email tags from input */}\n {inputValue.split(',').filter((s) => s.trim()).length > 1 &&\n inputValue\n .split(',')\n .map((s) => s.trim())\n .filter((s) => s.includes('@'))\n .map((email, i) => (\n <span\n key={i}\n style={{\n display: 'inline-flex',\n alignItems: 'center',\n padding: '4px 10px',\n borderRadius: 6,\n background: 'var(--hover-warm, #F5F0E8)',\n fontSize: 14,\n fontWeight: 500,\n color: 'var(--grey-strong, #2E3236)',\n whiteSpace: 'nowrap',\n }}\n >\n {email}\n </span>\n ))}\n <input\n ref={inputRef}\n type=\"text\"\n placeholder=\"Enter email addresses separated by commas\"\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n style={{\n flex: 1,\n minWidth: 200,\n border: 'none',\n outline: 'none',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-strong, #2E3236)',\n background: 'transparent',\n height: 32,\n }}\n />\n </div>\n <button\n onClick={addEmails}\n style={{\n display: 'flex',\n height: 44,\n padding: '0 24px',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 10,\n background: 'var(--grey-strong, #2E3236)',\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-white, #FFF)',\n border: 'none',\n cursor: 'pointer',\n flexShrink: 0,\n }}\n >\n Add\n </button>\n </div>\n\n {/* Invited Members section */}\n {members.length > 0 && (\n <div style={{ marginTop: 24 }}>\n {/* Section header */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>\n <span style={{ fontSize: 14, fontWeight: 400, fontFamily: 'Varta, var(--font-sans)', fontStyle: 'normal', lineHeight: 'normal', color: 'var(--Content-Tertiary, #676767)' }}>\n Invited Members\n </span>\n <button\n onClick={handleSendInvite}\n style={{\n display: 'flex',\n height: 28,\n padding: 10,\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n border: '1px solid var(--Base-absent, #D9D9D9)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n }}\n >\n Send Invite\n </button>\n </div>\n\n {/* Members list */}\n <div style={{ border: '1px solid var(--border, #ECEEF2)', borderRadius: 10, overflow: 'visible' }}>\n {members.map((member, idx) => (\n <div\n key={member.email}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '12px 16px',\n borderBottom: idx < members.length - 1 ? '1px solid var(--border, #ECEEF2)' : 'none',\n position: 'relative',\n }}\n >\n {/* Left: avatar + info */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n <div\n style={{\n width: 36,\n height: 36,\n borderRadius: 9999,\n background: 'var(--hover-warm, #F5F0E8)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n }}\n >\n <SquareUser size={24} color=\"var(--color-text-secondary, #808183)\" />\n </div>\n <div>\n <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--grey-strong, #2E3236)', margin: 0, lineHeight: '120%' }}>\n {member.email}\n </p>\n <p style={{ fontSize: 13, fontWeight: 400, color: 'var(--color-text-secondary, #808183)', margin: '2px 0 0', lineHeight: '140%' }}>\n {member.role && member.project\n ? `${member.role} · ${member.project}`\n : 'Role & Project is not defined'}\n </p>\n </div>\n </div>\n\n {/* Right: Set Permissions dropdown */}\n <div style={{ position: 'relative' }} ref={openDropdownIdx === idx ? dropdownRef : null}>\n <button\n onClick={() => setOpenDropdownIdx(openDropdownIdx === idx ? null : idx)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n padding: '8px 12px',\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n whiteSpace: 'nowrap',\n }}\n >\n Set Permissions\n <ChevronDown size={16} color=\"var(--Grey-Strong, #808183)\" />\n </button>\n\n {/* Dropdown */}\n {openDropdownIdx === idx && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n right: 0,\n marginTop: 4,\n display: 'flex',\n width: 217,\n padding: '4px 12px',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 4,\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Dropdown-Dropdown-Area-Fill, #FFF)',\n boxShadow: '0 8px 24px rgba(0,0,0,0.10)',\n zIndex: 100,\n boxSizing: 'border-box',\n }}\n >\n {/* User Role */}\n <div style={{ padding: '8px 0 4px', fontSize: 14, fontWeight: 600, color: 'var(--Content-Primary, #2E3236)', width: '100%' }}>\n Set User Role\n </div>\n {roles.map((role) => (\n <div\n key={role}\n onClick={() => updateMember(idx, 'role', role)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n padding: '6px 0',\n cursor: 'pointer',\n fontSize: 14,\n fontWeight: 400,\n color: 'var(--Content-Primary, #2E3236)',\n width: '100%',\n }}\n >\n {/* Radio */}\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style={{ flexShrink: 0 }}>\n <circle cx=\"10\" cy=\"10\" r=\"7.33\" stroke={member.role === role ? '#00A66E' : '#D9D9D9'} strokeWidth=\"2\" />\n {member.role === role && <ellipse cx=\"10\" cy=\"10\" rx=\"4.17\" ry=\"4.17\" fill=\"#00A66E\" />}\n </svg>\n {role}\n </div>\n ))}\n\n {/* Divider */}\n <div style={{ height: 1, background: 'var(--Border-Subtle, #E6E6E6)', width: '100%' }} />\n\n {/* Project Assignment */}\n <div style={{ padding: '4px 0', fontSize: 14, fontWeight: 600, color: 'var(--Content-Primary, #2E3236)', width: '100%' }}>\n Project Assignment\n </div>\n <div style={{ width: '100%', position: 'relative' }}>\n {/* Project trigger */}\n <div\n onClick={() => setOpenProjectIdx(openProjectIdx === idx ? null : idx)}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '100%',\n padding: '8px 10px',\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n boxSizing: 'border-box',\n }}\n >\n {member.project}\n <ChevronDown size={16} color=\"var(--Grey-Strong, #808183)\" />\n </div>\n {/* Project options */}\n {openProjectIdx === idx && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n right: 0,\n marginTop: 4,\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Dropdown-Dropdown-Area-Fill, #FFF)',\n boxShadow: '0 4px 12px rgba(0,0,0,0.08)',\n zIndex: 101,\n padding: 4,\n }}\n >\n {projects.map((p) => (\n <div\n key={p}\n onClick={() => {\n updateMember(idx, 'project', p);\n setOpenProjectIdx(null);\n }}\n style={{\n display: 'flex',\n height: 26,\n padding: '12px 16px 12px 8px',\n alignItems: 'center',\n gap: 6,\n alignSelf: 'stretch',\n borderRadius: 8,\n background: member.project === p ? 'var(--Neutral-50, #F2F2F0)' : 'transparent',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n }}\n onMouseEnter={(e) => {\n if (member.project !== p) e.currentTarget.style.background = 'var(--Neutral-50, #F2F2F0)';\n }}\n onMouseLeave={(e) => {\n if (member.project !== p) e.currentTarget.style.background = 'transparent';\n }}\n >\n {p}\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* Divider */}\n <div style={{ height: 1, background: 'var(--Border-Subtle, #E6E6E6)', width: '100%' }} />\n\n {/* Remove */}\n <div\n onClick={() => removeMember(idx)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n padding: '6px 0',\n cursor: 'pointer',\n fontSize: 14,\n fontWeight: 500,\n color: 'var(--Content-Primary, #2E3236)',\n width: '100%',\n }}\n >\n <Trash size={16} />\n Remove\n </div>\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default AddTeammates;\n","import { useState } from 'react';\nimport { MessageSquare, Database, Users, BookOpen, SlidersHorizontal, Briefcase } from 'lucide-react';\nimport UploadInteraction from './UploadInteraction';\nimport ConnectData from './ConnectData';\nimport AddTeammates from './AddTeammates';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Steps Configuration ───\n\nconst DEFAULT_STEPS = [\n { id: 'workspace', label: 'Workspace Name', description: 'Give your project a title.', icon: Briefcase },\n { id: 'interaction', label: 'Add Interaction', description: 'Connect data to see patterns.', icon: MessageSquare },\n { id: 'connect', label: 'Connect Data', description: 'Link your platform for auto-evaluation.', icon: Database },\n { id: 'invite', label: 'Invite Team', description: 'Add members to collaborate.', icon: Users },\n { id: 'concepts', label: 'Learn Concepts', description: 'Explore conditions and evidence.', icon: BookOpen },\n { id: 'scope', label: 'Define Scope', description: 'Customize evaluation signals.', icon: SlidersHorizontal },\n];\n\n// ─── Styles ───\n\nconst pageStyle = {\n fontFamily: FF,\n background: 'var(--grey-white)',\n minHeight: '100vh',\n boxSizing: 'border-box',\n};\n\nconst headerStyle = {\n padding: '24px 48px',\n borderBottom: '1px solid var(--border)',\n background: 'var(--grey-white)',\n};\n\nconst headerTopRow = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: 8,\n};\n\nconst titleStyle = {\n fontSize: 24,\n fontWeight: 600,\n fontStyle: 'normal',\n fontFamily: FF,\n color: 'var(--grey-strong)',\n margin: 0,\n lineHeight: 'normal',\n};\n\nconst subtitleStyle = {\n fontSize: 14,\n fontWeight: 400,\n lineHeight: '140%',\n color: 'var(--text-muted)',\n margin: '4px 0 0',\n fontFamily: FF,\n};\n\nconst headerActions = {\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n};\n\nconst remindBtnStyle = {\n display: 'flex',\n height: 36,\n padding: '0 16px',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 10,\n background: 'transparent',\n border: '1px solid var(--border-strong)',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--text-base)',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n};\n\nconst saveBtnStyle = {\n display: 'flex',\n height: 36,\n padding: '0 20px',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 10,\n background: 'var(--grey-strong)',\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-white)',\n border: 'none',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n};\n\nconst progressBarBg = {\n width: '100%',\n height: 6,\n borderRadius: 3,\n background: 'var(--border)',\n overflow: 'hidden',\n marginTop: 12,\n};\n\nconst progressBarFill = (pct) => ({\n width: `${pct}%`,\n height: '100%',\n borderRadius: 3,\n background: 'var(--color-green)',\n transition: 'width 0.4s ease-out',\n});\n\nconst bodyStyle = {\n display: 'flex',\n flex: 1,\n minHeight: 'calc(100vh - 140px)',\n};\n\n// ─── Sidebar Styles ───\n\nconst sidebarStyle = {\n width: 312,\n minWidth: 312,\n borderRight: '1px solid var(--border)',\n padding: '24px 24px',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n};\n\nconst stepsCountStyle = {\n fontSize: 13,\n fontWeight: 500,\n color: 'var(--text-muted)',\n fontFamily: FF,\n margin: '0 0 12px',\n};\n\nconst stepsListStyle = {\n display: 'flex',\n width: 264,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 8,\n alignSelf: 'stretch',\n};\n\nconst stepItemStyle = (isActive) => ({\n display: 'flex',\n alignItems: 'center',\n gap: 4,\n padding: '8px 4px',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n background: isActive ? 'var(--hover-warm)' : 'var(--grey-white)',\n borderRadius: 8,\n alignSelf: 'stretch',\n});\n\nconst stepIconWrap = {\n width: 40,\n height: 40,\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst stepLabelStyle = {\n fontSize: 14,\n fontWeight: 600,\n fontStyle: 'normal',\n color: 'var(--grey-strong)',\n fontFamily: FF,\n margin: 0,\n lineHeight: '120%',\n};\n\nconst stepDescStyle = {\n fontSize: 12,\n fontWeight: 400,\n color: 'var(--text-muted)',\n fontFamily: FF,\n margin: '2px 0 0',\n lineHeight: 1.3,\n};\n\n// ─── Content Styles ───\n\nconst contentStyle = {\n flex: 1,\n padding: '40px 48px',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\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 fieldLabelStyle = {\n fontSize: 16,\n fontWeight: 600,\n fontStyle: 'normal',\n color: 'var(--grey-strong)',\n fontFamily: FF,\n lineHeight: 'normal',\n margin: 0,\n display: 'block',\n};\n\nconst inputStyle = {\n width: '100%',\n height: 44,\n padding: '0 14px',\n borderRadius: 6,\n border: '1px solid var(--color-input-border)',\n fontSize: 16,\n fontWeight: 400,\n fontStyle: 'normal',\n lineHeight: 'normal',\n fontFamily: FF,\n color: 'var(--color-text-secondary)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n outline: 'none',\n transition: 'var(--transition-fast)',\n};\n\nconst textareaWrapStyle = {\n position: 'relative',\n marginTop: 8,\n};\n\nconst textareaStyle = {\n width: '100%',\n minHeight: 160,\n padding: '12px 14px 28px 14px',\n borderRadius: 6,\n border: '1px solid var(--color-input-border)',\n fontSize: 16,\n fontWeight: 400,\n fontStyle: 'normal',\n lineHeight: 'normal',\n fontFamily: FF,\n color: 'var(--color-text-secondary)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n outline: 'none',\n resize: 'vertical',\n lineHeight: '140%',\n transition: 'var(--transition-fast)',\n};\n\nconst charCountStyle = {\n position: 'absolute',\n bottom: 10,\n right: 14,\n fontSize: 12,\n fontWeight: 400,\n color: 'var(--text-faint)',\n fontFamily: FF,\n margin: 0,\n pointerEvents: 'none',\n};\n\n// ─── Step Indicator Icons ───\n\nfunction CompletedIcon() {\n return (\n <div\n style={{\n width: 24,\n height: 24,\n borderRadius: 6,\n background: 'var(--grey-strong)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n }}\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.5 7.5L5.5 10.5L11.5 4\" stroke=\"var(--grey-white)\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </div>\n );\n}\n\nfunction IncompleteIcon() {\n return (\n <div\n style={{\n width: 24,\n height: 24,\n borderRadius: '50%',\n border: '2px solid var(--grey-muted)',\n background: 'transparent',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n gap: 2,\n boxSizing: 'border-box',\n }}\n >\n <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />\n <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />\n <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />\n </div>\n );\n}\n\n// ─── Step Item Component ───\n\nfunction StepItem({ step, isCompleted, isActive, onClick }) {\n const [hovered, setHovered] = useState(false);\n\n return (\n <div\n style={{\n ...stepItemStyle(isActive),\n ...(hovered && !isActive ? { background: 'var(--hover-warm-subtle)' } : {}),\n }}\n onClick={onClick}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n >\n <div style={stepIconWrap}>\n {isCompleted ? <CompletedIcon /> : <IncompleteIcon />}\n </div>\n <div>\n <p style={stepLabelStyle}>{step.label}</p>\n <p style={stepDescStyle}>{step.description}</p>\n </div>\n </div>\n );\n}\n\n// ─── Workspace Name Step Content ───\n\nfunction WorkspaceNameContent({ workspaceName, setWorkspaceName, description, setDescription, maxDescLength }) {\n const [nameFocused, setNameFocused] = useState(false);\n const [descFocused, setDescFocused] = useState(false);\n\n return (\n <div>\n <h2 style={sectionTitleStyle}>Name of your workspace</h2>\n <p style={sectionSubtitleStyle}>Tell us about the project or company you're organizing here.</p>\n\n <div style={{ marginTop: 28 }}>\n <label style={fieldLabelStyle}>Workspace Name</label>\n <input\n type=\"text\"\n placeholder=\"e.g. Acme Marketing\"\n value={workspaceName}\n onChange={(e) => setWorkspaceName(e.target.value)}\n onFocus={() => setNameFocused(true)}\n onBlur={() => setNameFocused(false)}\n style={{\n ...inputStyle,\n marginTop: 8,\n borderColor: nameFocused ? 'var(--color-green)' : 'var(--color-input-border)',\n boxShadow: nameFocused ? '0 0 0 3px var(--color-green-ring)' : 'none',\n }}\n />\n </div>\n\n <div style={{ marginTop: 24 }}>\n <label style={fieldLabelStyle}>Description</label>\n <div style={textareaWrapStyle}>\n <textarea\n placeholder=\"what's the goal of this workspace?\"\n value={description}\n onChange={(e) => {\n if (e.target.value.length <= maxDescLength) {\n setDescription(e.target.value);\n }\n }}\n onFocus={() => setDescFocused(true)}\n onBlur={() => setDescFocused(false)}\n style={{\n ...textareaStyle,\n borderColor: descFocused ? 'var(--color-green)' : 'var(--color-input-border)',\n boxShadow: descFocused ? '0 0 0 3px var(--color-green-ring)' : 'none',\n }}\n />\n <span style={charCountStyle}>{description.length}/{maxDescLength}</span>\n </div>\n </div>\n </div>\n );\n}\n\n// ─── Main Component ───\n\nconst GettingStarted = ({\n steps = DEFAULT_STEPS,\n completedSteps = ['workspace', 'invite'],\n initialActiveStep = 'workspace',\n onSaveNext,\n onRemindLater,\n onStepChange,\n}) => {\n const [activeStepId, setActiveStepId] = useState(initialActiveStep);\n const [workspaceName, setWorkspaceName] = useState('');\n const [description, setDescription] = useState('');\n const maxDescLength = 1000;\n\n const completedCount = completedSteps.length;\n const totalCount = steps.length;\n const progressPct = (completedCount / totalCount) * 100;\n\n const handleStepClick = (stepId) => {\n setActiveStepId(stepId);\n onStepChange?.(stepId);\n };\n\n const handleSaveNext = () => {\n onSaveNext?.({ stepId: activeStepId, workspaceName, description });\n };\n\n return (\n <div style={pageStyle}>\n {/* Header */}\n <div style={headerStyle}>\n <div style={headerTopRow}>\n <div>\n <h1 style={titleStyle}>Getting started with Chordia</h1>\n <p style={subtitleStyle}>Complete these steps to get the most out of Chordia.</p>\n </div>\n <div style={headerActions}>\n <button\n style={remindBtnStyle}\n onClick={onRemindLater}\n onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}\n onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}\n >\n Remind me Later\n </button>\n <button\n style={saveBtnStyle}\n onClick={handleSaveNext}\n onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}\n onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}\n >\n Save &amp; Next\n </button>\n </div>\n </div>\n <div style={progressBarBg}>\n <div style={progressBarFill(progressPct)} />\n </div>\n </div>\n\n {/* Body */}\n <div style={bodyStyle}>\n {/* Sidebar */}\n <div style={sidebarStyle}>\n <p style={stepsCountStyle}>\n {completedCount} of {totalCount} steps completed\n </p>\n <div style={stepsListStyle}>\n {steps.map((step) => (\n <StepItem\n key={step.id}\n step={step}\n isCompleted={completedSteps.includes(step.id)}\n isActive={activeStepId === step.id}\n onClick={() => handleStepClick(step.id)}\n />\n ))}\n </div>\n </div>\n\n {/* Content */}\n <div style={contentStyle}>\n {activeStepId === 'workspace' && (\n <WorkspaceNameContent\n workspaceName={workspaceName}\n setWorkspaceName={setWorkspaceName}\n description={description}\n setDescription={setDescription}\n maxDescLength={maxDescLength}\n />\n )}\n {activeStepId === 'interaction' && (\n <UploadInteraction />\n )}\n {activeStepId === 'connect' && (\n <ConnectData />\n )}\n {activeStepId === 'invite' && (\n <AddTeammates />\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default GettingStarted;\n"],"names":["FF","containerStyle","sectionTitleStyle","sectionSubtitleStyle","gridStyle","DEFAULT_INTEGRATIONS","ConnectData","integrations","onConfigure","jsxs","jsx","integration","IntegrationCard","ROLES","AddTeammates","title","subtitle","projects","defaultRole","defaultProject","roles","onSendInvite","onInvite","inputValue","setInputValue","useState","members","setMembers","openDropdownIdx","setOpenDropdownIdx","openProjectIdx","setOpenProjectIdx","inputRef","useRef","dropdownRef","resolvedDefaultProject","useEffect","handleClick","e","addEmails","raw","existing","m","newMembers","email","handleKeyDown","removeMember","idx","_","i","updateMember","field","value","handleSendInvite","s","member","SquareUser","ChevronDown","role","p","Trash","DEFAULT_STEPS","Briefcase","MessageSquare","Database","Users","BookOpen","SlidersHorizontal","pageStyle","headerStyle","headerTopRow","titleStyle","subtitleStyle","headerActions","remindBtnStyle","saveBtnStyle","progressBarBg","progressBarFill","pct","bodyStyle","sidebarStyle","stepsCountStyle","stepsListStyle","stepItemStyle","isActive","stepIconWrap","stepLabelStyle","stepDescStyle","contentStyle","fieldLabelStyle","inputStyle","textareaWrapStyle","textareaStyle","charCountStyle","CompletedIcon","IncompleteIcon","StepItem","step","isCompleted","onClick","hovered","setHovered","WorkspaceNameContent","workspaceName","setWorkspaceName","description","setDescription","maxDescLength","nameFocused","setNameFocused","descFocused","setDescFocused","GettingStarted","steps","completedSteps","initialActiveStep","onSaveNext","onRemindLater","onStepChange","activeStepId","setActiveStepId","completedCount","totalCount","progressPct","handleStepClick","stepId","handleSaveNext","UploadInteraction"],"mappings":"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"}
1
+ {"version":3,"file":"onboarding.cjs.js","sources":["../../src/components/onboarding/ConnectData.jsx","../../src/components/onboarding/AddTeammates.jsx","../../src/components/onboarding/GettingStarted.jsx"],"sourcesContent":["import IntegrationCard from '../layout/IntegrationCard';\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 gridStyle = {\n display: 'grid',\n gridTemplateColumns: 'repeat(3, 1fr)',\n gap: 16,\n marginTop: 24,\n};\n\n// ─── Default Integrations ───\n\nconst DEFAULT_INTEGRATIONS = [\n {\n providerName: 'Five9',\n description: 'Cloud contact center platform for voice and digital channels',\n status: 'connected',\n railColor: '#5E88B0',\n },\n {\n providerName: 'Twilio Flex',\n description: 'Programmable contact center with custom workflows',\n status: 'available',\n railColor: '#9B7AA8',\n },\n {\n providerName: 'Zoom Phone',\n description: 'Cloud phone system with recording capabilities',\n status: 'coming-soon',\n railColor: '#6B7C93',\n },\n];\n\n// ─── Component ───\n\nconst ConnectData = ({ integrations = DEFAULT_INTEGRATIONS, onConfigure }) => {\n return (\n <div style={containerStyle}>\n <h2 style={sectionTitleStyle}>Connect Data Source</h2>\n <p style={sectionSubtitleStyle}>\n Choose your preferred platforms to synchronise data.\n </p>\n\n <div style={gridStyle}>\n {integrations.map((integration) => (\n <IntegrationCard\n key={integration.providerName}\n providerName={integration.providerName}\n description={integration.description}\n status={integration.status}\n railColor={integration.railColor}\n logoUrl={integration.logoUrl}\n icon={integration.icon}\n onConfigure={() => onConfigure?.(integration)}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport default ConnectData;\n","import { useState, useRef, useEffect } from 'react';\nimport { ChevronDown, Trash, SquareUser, Check } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\nconst ROLES = ['Super Admin', 'Admin', 'Analyst', 'Supervisor', 'Agent'];\n\n/**\n * AddTeammates — Create users, set roles/projects, and send invites.\n *\n * Props:\n * - title string Heading (default \"Create User\")\n * - subtitle string Description text\n * - projects string[] List of project names for assignment dropdown\n * - defaultRole string Default role for new members (default \"Admin\")\n * - defaultProject string Default project for new members\n * - roles string[] Available roles (default ROLES)\n * - onSendInvite function(members[]) Called with array of { email, role, project }\n * - onInvite function(emails[]) Legacy callback\n */\nconst AddTeammates = ({\n title = 'Create User',\n subtitle = 'Create users and send invites to add them to the platform.',\n projects = ['Andromeda Project'],\n defaultRole = 'Admin',\n defaultProject,\n roles = ROLES,\n onSendInvite,\n onInvite,\n}) => {\n const [inputValue, setInputValue] = useState('');\n const [emailTags, setEmailTags] = useState([]);\n const [editingIndex, setEditingIndex] = useState(null);\n const [editingValue, setEditingValue] = useState('');\n const [emailError, setEmailError] = useState('');\n const [members, setMembers] = useState([]);\n const [openDropdownIdx, setOpenDropdownIdx] = useState(null);\n const [openProjectIdx, setOpenProjectIdx] = useState(null);\n const inputRef = useRef(null);\n const editInputRef = useRef(null);\n const dropdownRef = useRef(null);\n\n const resolvedDefaultProject = defaultProject || projects[0] || '';\n\n const isValidEmail = (email) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n\n // Close dropdowns on outside click\n useEffect(() => {\n if (openDropdownIdx === null && openProjectIdx === null) return;\n const handleClick = (e) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {\n setOpenDropdownIdx(null);\n setOpenProjectIdx(null);\n }\n };\n document.addEventListener('mousedown', handleClick);\n return () => document.removeEventListener('mousedown', handleClick);\n }, [openDropdownIdx, openProjectIdx]);\n\n // Focus the inline edit input when editingIndex changes\n useEffect(() => {\n if (editingIndex !== null && editInputRef.current) {\n editInputRef.current.focus();\n }\n }, [editingIndex]);\n\n const handleInputChange = (e) => {\n const val = e.target.value;\n setEmailError('');\n if (val.endsWith(',')) {\n const email = val.slice(0, -1).trim();\n if (!email) { setInputValue(''); return; }\n if (!isValidEmail(email)) {\n setEmailError(`\"${email}\" is not a valid email address.`);\n return;\n }\n if (!emailTags.includes(email)) {\n setEmailTags([...emailTags, email]);\n }\n setInputValue('');\n } else {\n setInputValue(val);\n }\n };\n\n const handleTagClick = (idx) => {\n setEditingIndex(idx);\n setEditingValue(emailTags[idx]);\n };\n\n const commitEdit = (idx) => {\n const trimmed = editingValue.trim();\n setEmailError('');\n if (!trimmed) {\n setEmailTags(emailTags.filter((_, i) => i !== idx));\n } else if (!isValidEmail(trimmed)) {\n setEmailError(`\"${trimmed}\" is not a valid email address.`);\n return;\n } else if (trimmed !== emailTags[idx]) {\n setEmailTags(emailTags.map((t, i) => (i === idx ? trimmed : t)));\n }\n setEditingIndex(null);\n setEditingValue('');\n };\n\n const handleEditChange = (e) => {\n const val = e.target.value;\n if (val.endsWith(',')) {\n // Commit the edit (strip comma)\n setEditingValue(val.slice(0, -1));\n commitEdit(editingIndex);\n } else {\n setEditingValue(val);\n }\n };\n\n const handleEditKeyDown = (e, idx) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n commitEdit(idx);\n }\n if (e.key === 'Escape') {\n // Cancel editing, revert\n setEditingIndex(null);\n setEditingValue('');\n }\n if (e.key === 'Backspace' && !editingValue) {\n // Empty and backspace — remove the tag\n setEmailTags(emailTags.filter((_, i) => i !== idx));\n setEditingIndex(null);\n setEditingValue('');\n }\n };\n\n const addEmails = () => {\n setEmailError('');\n const trimmed = inputValue.trim();\n if (trimmed && !isValidEmail(trimmed)) {\n setEmailError(`\"${trimmed}\" is not a valid email address.`);\n return;\n }\n const allEmails = [...emailTags];\n if (trimmed && isValidEmail(trimmed)) {\n allEmails.push(trimmed);\n }\n if (!allEmails.length) return;\n const existing = new Set(members.map((m) => m.email));\n const newMembers = [...new Set(allEmails)]\n .filter((e) => !existing.has(e))\n .map((email) => ({ email, role: defaultRole, project: resolvedDefaultProject, invited: false }));\n if (newMembers.length) {\n setMembers([...members, ...newMembers]);\n }\n setEmailTags([]);\n setInputValue('');\n };\n\n const handleKeyDown = (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n addEmails();\n }\n if (e.key === 'Backspace' && !inputValue && emailTags.length) {\n // Start editing the last tag\n handleTagClick(emailTags.length - 1);\n }\n };\n\n const removeMember = (idx) => {\n setMembers(members.filter((_, i) => i !== idx));\n setOpenDropdownIdx(null);\n };\n\n const updateMember = (idx, field, value) => {\n setMembers(members.map((m, i) => (i === idx ? { ...m, [field]: value } : m)));\n };\n\n const handleSendInvite = () => {\n if (members.length) {\n setMembers(members.map((m) => ({ ...m, invited: true })));\n onSendInvite?.(members);\n onInvite?.(members.map((m) => m.email));\n }\n };\n\n const hasPermissions = (m) => m.role && m.project;\n\n return (\n <div style={{ fontFamily: FF }}>\n {/* Header */}\n <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--grey-strong, #2E3236)', margin: 0, lineHeight: 'normal' }}>\n {title}\n </h2>\n <p style={{ fontSize: 13, fontWeight: 400, color: 'var(--color-text-secondary, #808183)', margin: '4px 0 0', lineHeight: '140%' }}>\n {subtitle}\n </p>\n\n {/* Email input row */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n flex: 1,\n minHeight: 44,\n padding: '6px 14px',\n borderRadius: 10,\n border: '1px solid var(--color-input-border, #D9D9D9)',\n background: 'var(--grey-white, #FFF)',\n boxSizing: 'border-box',\n gap: 4,\n flexWrap: 'wrap',\n }}\n >\n {emailTags.map((email, i) => (\n <span\n key={i}\n style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}\n >\n {editingIndex === i ? (\n <input\n ref={editInputRef}\n type=\"text\"\n autoComplete=\"off\"\n value={editingValue}\n onChange={handleEditChange}\n onKeyDown={(e) => handleEditKeyDown(e, i)}\n onBlur={() => commitEdit(i)}\n style={{\n border: 'none',\n outline: 'none',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--grey-strong, #2E3236)',\n background: '#F3F7F7',\n borderRadius: 6,\n padding: '4px 8px',\n width: `${Math.max(editingValue.length, 1) * 8.5 + 16}px`,\n }}\n />\n ) : (\n <span\n onClick={(e) => { e.stopPropagation(); handleTagClick(i); }}\n style={{\n display: 'flex',\n padding: '4px 8px',\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 6,\n background: '#F3F7F7',\n fontSize: 14,\n fontWeight: 500,\n color: 'var(--grey-strong, #2E3236)',\n whiteSpace: 'nowrap',\n cursor: 'text',\n }}\n >\n {email}\n </span>\n )}\n <span style={{ fontSize: 14, color: 'var(--grey-strong, #2E3236)' }}>,</span>\n </span>\n ))}\n <input\n ref={inputRef}\n type=\"text\"\n autoComplete=\"off\"\n placeholder={emailTags.length ? '' : 'Enter email addresses separated by commas'}\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n style={{\n flex: 1,\n minWidth: 80,\n border: 'none',\n outline: 'none',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-strong, #2E3236)',\n background: 'transparent',\n height: 32,\n }}\n />\n </div>\n <button\n onClick={addEmails}\n style={{\n display: 'flex',\n height: 44,\n padding: '0 24px',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 10,\n background: 'var(--grey-strong, #2E3236)',\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-white, #FFF)',\n border: 'none',\n cursor: 'pointer',\n flexShrink: 0,\n }}\n >\n Add\n </button>\n </div>\n\n {/* Validation error */}\n {emailError && (\n <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', padding: 8, gap: 6, width: '100%', boxSizing: 'border-box', background: 'var(--color-error-bg, #F5F0E8)', borderRadius: 5, fontSize: 15, fontWeight: 400, lineHeight: '22px', color: 'var(--color-text, #2E3236)', fontFamily: FF, marginTop: 8 }}>\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"var(--color-text, #2E3236)\" style={{ flexShrink: 0 }}>\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/>\n </svg>\n {emailError}\n </div>\n )}\n\n {/* Invited Members section */}\n {members.length > 0 && (\n <div style={{ marginTop: 24 }}>\n {/* Section header */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>\n <span style={{ fontSize: 14, fontWeight: 400, fontFamily: 'Varta, var(--font-sans)', fontStyle: 'normal', lineHeight: 'normal', color: 'var(--Content-Tertiary, #676767)' }}>\n Invited Members\n </span>\n {members.every((m) => m.invited) ? (\n <button\n style={{\n display: 'flex',\n height: 28,\n minWidth: 80,\n padding: '16px 12px',\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n border: '1px solid var(--Base-absent, #D9D9D9)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'default',\n }}\n >\n <Check size={16} />\n Sent\n </button>\n ) : (\n <button\n onClick={handleSendInvite}\n style={{\n display: 'flex',\n height: 28,\n minWidth: 80,\n padding: '16px 12px',\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n border: '1px solid var(--Base-absent, #D9D9D9)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n }}\n >\n Send Invite\n </button>\n )}\n </div>\n\n {/* Members list */}\n <div style={{ border: '1px solid var(--border, #ECEEF2)', borderRadius: 10, overflow: 'visible' }}>\n {members.map((member, idx) => (\n <div\n key={member.email}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '12px 16px',\n borderBottom: idx < members.length - 1 ? '1px solid var(--border, #ECEEF2)' : 'none',\n position: 'relative',\n }}\n >\n {/* Left: avatar + info */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n <div\n style={{\n width: 36,\n height: 36,\n borderRadius: 9999,\n background: 'var(--hover-warm, #F5F0E8)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n }}\n >\n <SquareUser size={24} color=\"var(--color-text-secondary, #808183)\" />\n </div>\n <div>\n <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--grey-strong, #2E3236)', margin: 0, lineHeight: '120%' }}>\n {member.email}\n </p>\n <p style={{ fontSize: 13, fontWeight: 400, color: 'var(--color-text-secondary, #808183)', margin: '2px 0 0', lineHeight: '140%' }}>\n {member.role && member.project\n ? `${member.role} · ${member.project}`\n : 'Role & Project is not defined'}\n </p>\n </div>\n </div>\n\n {/* Right: Invite sent + dropdown */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n {/* Invite sent label */}\n {member.invited && hasPermissions(member) && (\n <span style={{ fontFamily: 'Varta, var(--font-sans)', fontSize: 14, fontStyle: 'normal', fontWeight: 400, lineHeight: 'normal', color: 'var(--Content-Tertiary, #676767)', whiteSpace: 'nowrap' }}>\n Invite sent\n </span>\n )}\n\n {/* Dropdown trigger */}\n <div style={{ position: 'relative' }} ref={openDropdownIdx === idx ? dropdownRef : null}>\n <button\n onClick={() => setOpenDropdownIdx(openDropdownIdx === idx ? null : idx)}\n style={{\n display: 'flex',\n width: 160,\n height: 32,\n minWidth: 96,\n padding: '16px 12px 16px 16px',\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n border: '1px solid var(--Base-absent, #D9D9D9)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 13,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n boxSizing: 'border-box',\n }}\n >\n <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', flex: 1, textAlign: 'left' }}>\n {hasPermissions(member) ? `${member.role}, ${member.project}` : 'Set Permissions'}\n </span>\n <ChevronDown size={16} color=\"var(--Grey-Strong, #808183)\" style={{ flexShrink: 0 }} />\n </button>\n\n {/* Dropdown */}\n {openDropdownIdx === idx && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n right: 0,\n marginTop: 4,\n display: 'flex',\n width: 217,\n padding: '4px 12px',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 4,\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Dropdown-Dropdown-Area-Fill, #FFF)',\n boxShadow: '0 8px 24px rgba(0,0,0,0.10)',\n zIndex: 100,\n boxSizing: 'border-box',\n }}\n >\n {/* User Role */}\n <div style={{ padding: '8px 0 4px', fontSize: 14, fontWeight: 600, color: 'var(--Content-Primary, #2E3236)', width: '100%' }}>\n Set User Role\n </div>\n {roles.map((role) => (\n <div\n key={role}\n onClick={() => updateMember(idx, 'role', role)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n padding: '6px 0',\n cursor: 'pointer',\n fontSize: 14,\n fontWeight: 400,\n color: 'var(--Content-Primary, #2E3236)',\n width: '100%',\n }}\n >\n {/* Radio */}\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style={{ flexShrink: 0 }}>\n <circle cx=\"10\" cy=\"10\" r=\"7.33\" stroke={member.role === role ? '#00A66E' : '#D9D9D9'} strokeWidth=\"2\" />\n {member.role === role && <ellipse cx=\"10\" cy=\"10\" rx=\"4.17\" ry=\"4.17\" fill=\"#00A66E\" />}\n </svg>\n {role}\n </div>\n ))}\n\n {/* Divider */}\n <div style={{ height: 1, background: 'var(--Border-Subtle, #E6E6E6)', width: '100%' }} />\n\n {/* Project Assignment */}\n <div style={{ padding: '4px 0', fontSize: 14, fontWeight: 600, color: 'var(--Content-Primary, #2E3236)', width: '100%' }}>\n Project Assignment\n </div>\n <div style={{ width: '100%', position: 'relative' }}>\n {/* Project trigger */}\n <div\n onClick={() => setOpenProjectIdx(openProjectIdx === idx ? null : idx)}\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: '100%',\n padding: '8px 10px',\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Base-White, #FFF)',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n boxSizing: 'border-box',\n }}\n >\n {member.project}\n <ChevronDown size={16} color=\"var(--Grey-Strong, #808183)\" />\n </div>\n {/* Project options */}\n {openProjectIdx === idx && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n right: 0,\n marginTop: 4,\n borderRadius: 10,\n border: '1px solid var(--Border-Subtle, #E6E6E6)',\n background: 'var(--Dropdown-Dropdown-Area-Fill, #FFF)',\n boxShadow: '0 4px 12px rgba(0,0,0,0.08)',\n zIndex: 101,\n padding: 4,\n }}\n >\n {projects.map((p) => (\n <div\n key={p}\n onClick={() => {\n updateMember(idx, 'project', p);\n setOpenProjectIdx(null);\n }}\n style={{\n display: 'flex',\n height: 26,\n padding: '12px 16px 12px 8px',\n alignItems: 'center',\n gap: 6,\n alignSelf: 'stretch',\n borderRadius: 8,\n background: member.project === p ? 'var(--Neutral-50, #F2F2F0)' : 'transparent',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--Content-Primary, #2E3236)',\n cursor: 'pointer',\n }}\n onMouseEnter={(e) => {\n if (member.project !== p) e.currentTarget.style.background = 'var(--Neutral-50, #F2F2F0)';\n }}\n onMouseLeave={(e) => {\n if (member.project !== p) e.currentTarget.style.background = 'transparent';\n }}\n >\n {p}\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/* Divider */}\n <div style={{ height: 1, background: 'var(--Border-Subtle, #E6E6E6)', width: '100%' }} />\n\n {/* Remove */}\n <div\n onClick={() => removeMember(idx)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: 8,\n padding: '6px 0',\n cursor: 'pointer',\n fontSize: 14,\n fontWeight: 500,\n color: 'var(--Content-Primary, #2E3236)',\n width: '100%',\n }}\n >\n <Trash size={16} />\n Remove\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport default AddTeammates;\n","import { useState } from 'react';\nimport { MessageSquare, Database, Users, BookOpen, SlidersHorizontal, Briefcase } from 'lucide-react';\nimport UploadInteraction from './UploadInteraction';\nimport ConnectData from './ConnectData';\nimport AddTeammates from './AddTeammates';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Steps Configuration ───\n\nconst DEFAULT_STEPS = [\n { id: 'workspace', label: 'Workspace Name', description: 'Give your project a title.', icon: Briefcase },\n { id: 'interaction', label: 'Add Interaction', description: 'Connect data to see patterns.', icon: MessageSquare },\n { id: 'connect', label: 'Connect Data', description: 'Link your platform for auto-evaluation.', icon: Database },\n { id: 'invite', label: 'Invite Team', description: 'Add members to collaborate.', icon: Users },\n { id: 'concepts', label: 'Learn Concepts', description: 'Explore conditions and evidence.', icon: BookOpen },\n { id: 'scope', label: 'Define Scope', description: 'Customize evaluation signals.', icon: SlidersHorizontal },\n];\n\n// ─── Styles ───\n\nconst pageStyle = {\n fontFamily: FF,\n background: 'var(--grey-white)',\n minHeight: '100vh',\n boxSizing: 'border-box',\n};\n\nconst headerStyle = {\n padding: '24px 48px',\n borderBottom: '1px solid var(--border)',\n background: 'var(--grey-white)',\n};\n\nconst headerTopRow = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: 8,\n};\n\nconst titleStyle = {\n fontSize: 24,\n fontWeight: 600,\n fontStyle: 'normal',\n fontFamily: FF,\n color: 'var(--grey-strong)',\n margin: 0,\n lineHeight: 'normal',\n};\n\nconst subtitleStyle = {\n fontSize: 14,\n fontWeight: 400,\n lineHeight: '140%',\n color: 'var(--text-muted)',\n margin: '4px 0 0',\n fontFamily: FF,\n};\n\nconst headerActions = {\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n};\n\nconst remindBtnStyle = {\n display: 'flex',\n height: 36,\n padding: '0 16px',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 10,\n background: 'transparent',\n border: '1px solid var(--border-strong)',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--text-base)',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n};\n\nconst saveBtnStyle = {\n display: 'flex',\n height: 36,\n padding: '0 20px',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 10,\n background: 'var(--grey-strong)',\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-white)',\n border: 'none',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n};\n\nconst progressBarBg = {\n width: '100%',\n height: 6,\n borderRadius: 3,\n background: 'var(--border)',\n overflow: 'hidden',\n marginTop: 12,\n};\n\nconst progressBarFill = (pct) => ({\n width: `${pct}%`,\n height: '100%',\n borderRadius: 3,\n background: 'var(--color-green)',\n transition: 'width 0.4s ease-out',\n});\n\nconst bodyStyle = {\n display: 'flex',\n flex: 1,\n minHeight: 'calc(100vh - 140px)',\n};\n\n// ─── Sidebar Styles ───\n\nconst sidebarStyle = {\n width: 312,\n minWidth: 312,\n borderRight: '1px solid var(--border)',\n padding: '24px 24px',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n};\n\nconst stepsCountStyle = {\n fontSize: 13,\n fontWeight: 500,\n color: 'var(--text-muted)',\n fontFamily: FF,\n margin: '0 0 12px',\n};\n\nconst stepsListStyle = {\n display: 'flex',\n width: 264,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 8,\n alignSelf: 'stretch',\n};\n\nconst stepItemStyle = (isActive) => ({\n display: 'flex',\n alignItems: 'center',\n gap: 4,\n padding: '8px 4px',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n background: isActive ? 'var(--hover-warm)' : 'var(--grey-white)',\n borderRadius: 8,\n alignSelf: 'stretch',\n});\n\nconst stepIconWrap = {\n width: 40,\n height: 40,\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst stepLabelStyle = {\n fontSize: 14,\n fontWeight: 600,\n fontStyle: 'normal',\n color: 'var(--grey-strong)',\n fontFamily: FF,\n margin: 0,\n lineHeight: '120%',\n};\n\nconst stepDescStyle = {\n fontSize: 12,\n fontWeight: 400,\n color: 'var(--text-muted)',\n fontFamily: FF,\n margin: '2px 0 0',\n lineHeight: 1.3,\n};\n\n// ─── Content Styles ───\n\nconst contentStyle = {\n flex: 1,\n padding: '40px 48px',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\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 fieldLabelStyle = {\n fontSize: 16,\n fontWeight: 600,\n fontStyle: 'normal',\n color: 'var(--grey-strong)',\n fontFamily: FF,\n lineHeight: 'normal',\n margin: 0,\n display: 'block',\n};\n\nconst inputStyle = {\n width: '100%',\n height: 44,\n padding: '0 14px',\n borderRadius: 6,\n border: '1px solid var(--color-input-border)',\n fontSize: 16,\n fontWeight: 400,\n fontStyle: 'normal',\n lineHeight: 'normal',\n fontFamily: FF,\n color: 'var(--color-text-secondary)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n outline: 'none',\n transition: 'var(--transition-fast)',\n};\n\nconst textareaWrapStyle = {\n position: 'relative',\n marginTop: 8,\n};\n\nconst textareaStyle = {\n width: '100%',\n minHeight: 160,\n padding: '12px 14px 28px 14px',\n borderRadius: 6,\n border: '1px solid var(--color-input-border)',\n fontSize: 16,\n fontWeight: 400,\n fontStyle: 'normal',\n lineHeight: 'normal',\n fontFamily: FF,\n color: 'var(--color-text-secondary)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n outline: 'none',\n resize: 'vertical',\n lineHeight: '140%',\n transition: 'var(--transition-fast)',\n};\n\nconst charCountStyle = {\n position: 'absolute',\n bottom: 10,\n right: 14,\n fontSize: 12,\n fontWeight: 400,\n color: 'var(--text-faint)',\n fontFamily: FF,\n margin: 0,\n pointerEvents: 'none',\n};\n\n// ─── Step Indicator Icons ───\n\nfunction CompletedIcon() {\n return (\n <div\n style={{\n width: 24,\n height: 24,\n borderRadius: 6,\n background: 'var(--grey-strong)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n }}\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path d=\"M2.5 7.5L5.5 10.5L11.5 4\" stroke=\"var(--grey-white)\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </div>\n );\n}\n\nfunction IncompleteIcon() {\n return (\n <div\n style={{\n width: 24,\n height: 24,\n borderRadius: '50%',\n border: '2px solid var(--grey-muted)',\n background: 'transparent',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n gap: 2,\n boxSizing: 'border-box',\n }}\n >\n <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />\n <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />\n <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />\n </div>\n );\n}\n\n// ─── Step Item Component ───\n\nfunction StepItem({ step, isCompleted, isActive, onClick }) {\n const [hovered, setHovered] = useState(false);\n\n return (\n <div\n style={{\n ...stepItemStyle(isActive),\n ...(hovered && !isActive ? { background: 'var(--hover-warm-subtle)' } : {}),\n }}\n onClick={onClick}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n >\n <div style={stepIconWrap}>\n {isCompleted ? <CompletedIcon /> : <IncompleteIcon />}\n </div>\n <div>\n <p style={stepLabelStyle}>{step.label}</p>\n <p style={stepDescStyle}>{step.description}</p>\n </div>\n </div>\n );\n}\n\n// ─── Workspace Name Step Content ───\n\nfunction WorkspaceNameContent({ workspaceName, setWorkspaceName, description, setDescription, maxDescLength }) {\n const [nameFocused, setNameFocused] = useState(false);\n const [descFocused, setDescFocused] = useState(false);\n\n return (\n <div>\n <h2 style={sectionTitleStyle}>Name of your workspace</h2>\n <p style={sectionSubtitleStyle}>Tell us about the project or company you're organizing here.</p>\n\n <div style={{ marginTop: 28 }}>\n <label style={fieldLabelStyle}>Workspace Name</label>\n <input\n type=\"text\"\n placeholder=\"e.g. Acme Marketing\"\n value={workspaceName}\n onChange={(e) => setWorkspaceName(e.target.value)}\n onFocus={() => setNameFocused(true)}\n onBlur={() => setNameFocused(false)}\n style={{\n ...inputStyle,\n marginTop: 8,\n borderColor: nameFocused ? 'var(--color-green)' : 'var(--color-input-border)',\n boxShadow: nameFocused ? '0 0 0 3px var(--color-green-ring)' : 'none',\n }}\n />\n </div>\n\n <div style={{ marginTop: 24 }}>\n <label style={fieldLabelStyle}>Description</label>\n <div style={textareaWrapStyle}>\n <textarea\n placeholder=\"what's the goal of this workspace?\"\n value={description}\n onChange={(e) => {\n if (e.target.value.length <= maxDescLength) {\n setDescription(e.target.value);\n }\n }}\n onFocus={() => setDescFocused(true)}\n onBlur={() => setDescFocused(false)}\n style={{\n ...textareaStyle,\n borderColor: descFocused ? 'var(--color-green)' : 'var(--color-input-border)',\n boxShadow: descFocused ? '0 0 0 3px var(--color-green-ring)' : 'none',\n }}\n />\n <span style={charCountStyle}>{description.length}/{maxDescLength}</span>\n </div>\n </div>\n </div>\n );\n}\n\n// ─── Main Component ───\n\nconst GettingStarted = ({\n steps = DEFAULT_STEPS,\n completedSteps = ['workspace', 'invite'],\n initialActiveStep = 'workspace',\n onSaveNext,\n onRemindLater,\n onStepChange,\n}) => {\n const [activeStepId, setActiveStepId] = useState(initialActiveStep);\n const [workspaceName, setWorkspaceName] = useState('');\n const [description, setDescription] = useState('');\n const maxDescLength = 1000;\n\n const completedCount = completedSteps.length;\n const totalCount = steps.length;\n const progressPct = (completedCount / totalCount) * 100;\n\n const handleStepClick = (stepId) => {\n setActiveStepId(stepId);\n onStepChange?.(stepId);\n };\n\n const handleSaveNext = () => {\n onSaveNext?.({ stepId: activeStepId, workspaceName, description });\n };\n\n return (\n <div style={pageStyle}>\n {/* Header */}\n <div style={headerStyle}>\n <div style={headerTopRow}>\n <div>\n <h1 style={titleStyle}>Getting started with Chordia</h1>\n <p style={subtitleStyle}>Complete these steps to get the most out of Chordia.</p>\n </div>\n <div style={headerActions}>\n <button\n style={remindBtnStyle}\n onClick={onRemindLater}\n onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}\n onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}\n >\n Remind me Later\n </button>\n <button\n style={saveBtnStyle}\n onClick={handleSaveNext}\n onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}\n onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}\n >\n Save &amp; Next\n </button>\n </div>\n </div>\n <div style={progressBarBg}>\n <div style={progressBarFill(progressPct)} />\n </div>\n </div>\n\n {/* Body */}\n <div style={bodyStyle}>\n {/* Sidebar */}\n <div style={sidebarStyle}>\n <p style={stepsCountStyle}>\n {completedCount} of {totalCount} steps completed\n </p>\n <div style={stepsListStyle}>\n {steps.map((step) => (\n <StepItem\n key={step.id}\n step={step}\n isCompleted={completedSteps.includes(step.id)}\n isActive={activeStepId === step.id}\n onClick={() => handleStepClick(step.id)}\n />\n ))}\n </div>\n </div>\n\n {/* Content */}\n <div style={contentStyle}>\n {activeStepId === 'workspace' && (\n <WorkspaceNameContent\n workspaceName={workspaceName}\n setWorkspaceName={setWorkspaceName}\n description={description}\n setDescription={setDescription}\n maxDescLength={maxDescLength}\n />\n )}\n {activeStepId === 'interaction' && (\n <UploadInteraction />\n )}\n {activeStepId === 'connect' && (\n <ConnectData />\n )}\n {activeStepId === 'invite' && (\n <AddTeammates />\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default GettingStarted;\n"],"names":["FF","containerStyle","sectionTitleStyle","sectionSubtitleStyle","gridStyle","DEFAULT_INTEGRATIONS","ConnectData","integrations","onConfigure","jsxs","jsx","integration","IntegrationCard","ROLES","AddTeammates","title","subtitle","projects","defaultRole","defaultProject","roles","onSendInvite","onInvite","inputValue","setInputValue","useState","emailTags","setEmailTags","editingIndex","setEditingIndex","editingValue","setEditingValue","emailError","setEmailError","members","setMembers","openDropdownIdx","setOpenDropdownIdx","openProjectIdx","setOpenProjectIdx","inputRef","useRef","editInputRef","dropdownRef","resolvedDefaultProject","isValidEmail","email","useEffect","handleClick","e","handleInputChange","val","handleTagClick","idx","commitEdit","trimmed","_","i","t","handleEditChange","handleEditKeyDown","addEmails","allEmails","existing","m","newMembers","handleKeyDown","removeMember","updateMember","field","value","handleSendInvite","hasPermissions","Check","member","SquareUser","ChevronDown","role","p","Trash","DEFAULT_STEPS","Briefcase","MessageSquare","Database","Users","BookOpen","SlidersHorizontal","pageStyle","headerStyle","headerTopRow","titleStyle","subtitleStyle","headerActions","remindBtnStyle","saveBtnStyle","progressBarBg","progressBarFill","pct","bodyStyle","sidebarStyle","stepsCountStyle","stepsListStyle","stepItemStyle","isActive","stepIconWrap","stepLabelStyle","stepDescStyle","contentStyle","fieldLabelStyle","inputStyle","textareaWrapStyle","textareaStyle","charCountStyle","CompletedIcon","IncompleteIcon","StepItem","step","isCompleted","onClick","hovered","setHovered","WorkspaceNameContent","workspaceName","setWorkspaceName","description","setDescription","maxDescLength","nameFocused","setNameFocused","descFocused","setDescFocused","GettingStarted","steps","completedSteps","initialActiveStep","onSaveNext","onRemindLater","onStepChange","activeStepId","setActiveStepId","completedCount","totalCount","progressPct","handleStepClick","stepId","handleSaveNext","UploadInteraction"],"mappings":"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"}