chordia-ui 3.2.9 → 3.3.0

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.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("../UploadInteraction.cjs.js"),e=require("react/jsx-runtime"),y=require("react"),m=require("lucide-react"),z=require("../IntegrationCard.cjs.js"),w="var(--font-sans)",W={fontFamily:w},R={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:w,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},L={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:w,margin:"4px 0 0",lineHeight:"140%"},H={display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:16,marginTop:24},E=[{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"}],C=({integrations:n=E,onConfigure:a})=>e.jsxs("div",{style:W,children:[e.jsx("h2",{style:R,children:"Connect Data Source"}),e.jsx("p",{style:L,children:"Choose your preferred platforms to synchronise data."}),e.jsx("div",{style:H,children:n.map(o=>e.jsx(z.IntegrationCard,{providerName:o.providerName,description:o.description,status:o.status,railColor:o.railColor,logoUrl:o.logoUrl,icon:o.icon,onConfigure:()=>a==null?void 0:a(o)},o.providerName))})]}),p="var(--font-sans)",B={fontFamily:p},A={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:p,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},D={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:p,margin:"4px 0 0",lineHeight:"140%"},M={display:"flex",alignItems:"center",gap:12,marginTop:24},N={display:"flex",alignItems:"center",flex:1,height:44,padding:"0 14px",borderRadius:10,border:"1px solid var(--color-input-border)",background:"var(--grey-white)",boxSizing:"border-box",gap:8},U={flexShrink:0,color:"var(--color-text-secondary)"},$={display:"inline-flex",alignItems:"center",gap:4,padding:"4px 10px",borderRadius:6,background:"var(--hover-warm)",fontSize:14,fontWeight:500,fontFamily:p,color:"var(--grey-strong)",whiteSpace:"nowrap"},G={cursor:"pointer",fontSize:16,lineHeight:1,color:"var(--color-text-secondary)",marginLeft:2},q={flex:1,border:"none",outline:"none",fontSize:14,fontWeight:400,fontFamily:p,color:"var(--grey-strong)",background:"transparent",height:"100%"},P={display:"flex",height:44,padding:"0 24px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontWeight:600,fontFamily:p,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",flexShrink:0},O={marginTop:8,border:"1px solid var(--border)",borderRadius:10,overflow:"hidden",background:"var(--grey-white)"},_={display:"flex",alignItems:"center",gap:12,padding:"14px 16px",cursor:"pointer",transition:"var(--transition-fast)",borderBottom:"1px solid var(--border-subtle)"},K=n=>({width:40,height:40,borderRadius:9999,background:n||"var(--hover-warm)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:14,fontWeight:600,fontFamily:p,color:"var(--color-green)",flexShrink:0}),V={fontSize:14,fontWeight:600,fontFamily:p,color:"var(--grey-strong)",margin:0,lineHeight:"120%"},Z={fontSize:13,fontWeight:400,fontFamily:p,color:"var(--color-text-secondary)",margin:"2px 0 0",lineHeight:"140%"},J=[{name:"Alex Rivera",email:"alex.rivera@company.com",initials:"AR"},{name:"Alexandra Smith",email:"a.smith@design.co",initials:"AS"}],F=({suggestions:n=J,onInvite:a})=>{const[o,d]=y.useState(""),[r,c]=y.useState([]),[l,u]=y.useState(!1),g=n.filter(t=>!r.includes(t.email)&&(t.name.toLowerCase().includes(o.toLowerCase())||t.email.toLowerCase().includes(o.toLowerCase()))),h=t=>{t&&!r.includes(t)&&(c([...r,t]),d(""))},f=t=>{c(r.filter(x=>x!==t))},b=t=>{t.key==="Enter"&&o.includes("@")&&(t.preventDefault(),h(o.trim())),t.key==="Backspace"&&!o&&r.length&&f(r[r.length-1])},S=()=>{r.length&&(a==null||a(r))};return e.jsxs("div",{style:B,children:[e.jsx("h2",{style:A,children:"Add Teammates"}),e.jsx("p",{style:D,children:"Collaborate with your team to accelerate your workflow."}),e.jsxs("div",{style:M,children:[e.jsxs("div",{style:{...N,borderColor:l?"var(--color-green)":"var(--color-input-border)",boxShadow:l?"0 0 0 3px var(--color-green-ring)":"none"},children:[e.jsx(m.Search,{size:18,style:U}),r.map(t=>e.jsxs("span",{style:$,children:[t,e.jsx("span",{style:G,onClick:()=>f(t),children:"×"})]},t)),e.jsx("input",{type:"text",placeholder:r.length?"":"Search by name or email...",value:o,onChange:t=>d(t.target.value),onFocus:()=>u(!0),onBlur:()=>setTimeout(()=>u(!1),150),onKeyDown:b,style:q})]}),e.jsx("button",{style:P,onClick:S,onMouseEnter:t=>{t.currentTarget.style.opacity="0.85"},onMouseLeave:t=>{t.currentTarget.style.opacity="1"},children:"Invite"})]}),l&&g.length>0&&e.jsx("div",{style:O,children:g.map((t,x)=>e.jsxs("div",{style:{..._,...x===g.length-1?{borderBottom:"none"}:{}},onMouseDown:()=>h(t.email),onMouseEnter:v=>{v.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:v=>{v.currentTarget.style.background="var(--grey-white)"},children:[e.jsx("div",{style:K(),children:t.initials}),e.jsxs("div",{children:[e.jsx("p",{style:V,children:t.name}),e.jsx("p",{style:Z,children:t.email})]})]},t.email))})]})},s="var(--font-sans)",Q=[{id:"workspace",label:"Workspace Name",description:"Give your project a title.",icon:m.Briefcase},{id:"interaction",label:"Add Interaction",description:"Connect data to see patterns.",icon:m.MessageSquare},{id:"connect",label:"Connect Data",description:"Link your platform for auto-evaluation.",icon:m.Database},{id:"invite",label:"Invite Team",description:"Add members to collaborate.",icon:m.Users},{id:"concepts",label:"Learn Concepts",description:"Explore conditions and evidence.",icon:m.BookOpen},{id:"scope",label:"Define Scope",description:"Customize evaluation signals.",icon:m.SlidersHorizontal}],X={fontFamily:s,background:"var(--grey-white)",minHeight:"100vh",boxSizing:"border-box"},Y={padding:"24px 48px",borderBottom:"1px solid var(--border)",background:"var(--grey-white)"},ee={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},te={fontSize:24,fontWeight:600,fontStyle:"normal",fontFamily:s,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},oe={fontSize:14,fontWeight:400,lineHeight:"140%",color:"var(--text-muted)",margin:"4px 0 0",fontFamily:s},re={display:"flex",alignItems:"center",gap:12},ne={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:s,color:"var(--text-base)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none"},ie={display:"flex",height:36,padding:"0 20px",justifyContent:"center",alignItems:"center",borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontWeight:600,fontFamily:s,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none"},ae={width:"100%",height:6,borderRadius:3,background:"var(--border)",overflow:"hidden",marginTop:12},se=n=>({width:`${n}%`,height:"100%",borderRadius:3,background:"var(--color-green)",transition:"width 0.4s ease-out"}),le={display:"flex",flex:1,minHeight:"calc(100vh - 140px)"},ce={width:312,minWidth:312,borderRight:"1px solid var(--border)",padding:"24px 24px",background:"var(--grey-white)",boxSizing:"border-box"},de={fontSize:13,fontWeight:500,color:"var(--text-muted)",fontFamily:s,margin:"0 0 12px"},ge={display:"flex",width:264,flexDirection:"column",alignItems:"flex-start",gap:8,alignSelf:"stretch"},he=n=>({display:"flex",alignItems:"center",gap:4,padding:"8px 4px",cursor:"pointer",transition:"var(--transition-fast)",background:n?"var(--hover-warm)":"var(--grey-white)",borderRadius:8,alignSelf:"stretch"}),ye={width:40,height:40,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"},pe={fontSize:14,fontWeight:600,fontStyle:"normal",color:"var(--grey-strong)",fontFamily:s,margin:0,lineHeight:"120%"},ue={fontSize:12,fontWeight:400,color:"var(--text-muted)",fontFamily:s,margin:"2px 0 0",lineHeight:1.3},me={flex:1,padding:"40px 48px",background:"var(--grey-white)",boxSizing:"border-box"},xe={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:s,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},fe={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:s,margin:"4px 0 0",lineHeight:"140%"},k={fontSize:16,fontWeight:600,fontStyle:"normal",color:"var(--grey-strong)",fontFamily:s,lineHeight:"normal",margin:0,display:"block"},ve={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:s,color:"var(--color-text-secondary)",background:"var(--grey-white)",boxSizing:"border-box",outline:"none",transition:"var(--transition-fast)"},be={position:"relative",marginTop:8},Se={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:s,color:"var(--color-text-secondary)",background:"var(--grey-white)",boxSizing:"border-box",outline:"none",resize:"vertical",lineHeight:"140%",transition:"var(--transition-fast)"},je={position:"absolute",bottom:10,right:14,fontSize:12,fontWeight:400,color:"var(--text-faint)",fontFamily:s,margin:0,pointerEvents:"none"};function we(){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 ke(){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 Ce({step:n,isCompleted:a,isActive:o,onClick:d}){const[r,c]=y.useState(!1);return e.jsxs("div",{style:{...he(o),...r&&!o?{background:"var(--hover-warm-subtle)"}:{}},onClick:d,onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1),children:[e.jsx("div",{style:ye,children:a?e.jsx(we,{}):e.jsx(ke,{})}),e.jsxs("div",{children:[e.jsx("p",{style:pe,children:n.label}),e.jsx("p",{style:ue,children:n.description})]})]})}function Fe({workspaceName:n,setWorkspaceName:a,description:o,setDescription:d,maxDescLength:r}){const[c,l]=y.useState(!1),[u,g]=y.useState(!1);return e.jsxs("div",{children:[e.jsx("h2",{style:xe,children:"Name of your workspace"}),e.jsx("p",{style:fe,children:"Tell us about the project or company you're organizing here."}),e.jsxs("div",{style:{marginTop:28},children:[e.jsx("label",{style:k,children:"Workspace Name"}),e.jsx("input",{type:"text",placeholder:"e.g. Acme Marketing",value:n,onChange:h=>a(h.target.value),onFocus:()=>l(!0),onBlur:()=>l(!1),style:{...ve,marginTop:8,borderColor:c?"var(--color-green)":"var(--color-input-border)",boxShadow:c?"0 0 0 3px var(--color-green-ring)":"none"}})]}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("label",{style:k,children:"Description"}),e.jsxs("div",{style:be,children:[e.jsx("textarea",{placeholder:"what's the goal of this workspace?",value:o,onChange:h=>{h.target.value.length<=r&&d(h.target.value)},onFocus:()=>g(!0),onBlur:()=>g(!1),style:{...Se,borderColor:u?"var(--color-green)":"var(--color-input-border)",boxShadow:u?"0 0 0 3px var(--color-green-ring)":"none"}}),e.jsxs("span",{style:je,children:[o.length,"/",r]})]})]})]})}const Te=({steps:n=Q,completedSteps:a=["workspace","invite"],initialActiveStep:o="workspace",onSaveNext:d,onRemindLater:r,onStepChange:c})=>{const[l,u]=y.useState(o),[g,h]=y.useState(""),[f,b]=y.useState(""),S=1e3,t=a.length,x=n.length,v=t/x*100,T=i=>{u(i),c==null||c(i)},I=()=>{d==null||d({stepId:l,workspaceName:g,description:f})};return e.jsxs("div",{style:X,children:[e.jsxs("div",{style:Y,children:[e.jsxs("div",{style:ee,children:[e.jsxs("div",{children:[e.jsx("h1",{style:te,children:"Getting started with Chordia"}),e.jsx("p",{style:oe,children:"Complete these steps to get the most out of Chordia."})]}),e.jsxs("div",{style:re,children:[e.jsx("button",{style:ne,onClick:r,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:ie,onClick:I,onMouseEnter:i=>{i.currentTarget.style.opacity="0.85"},onMouseLeave:i=>{i.currentTarget.style.opacity="1"},children:"Save & Next"})]})]}),e.jsx("div",{style:ae,children:e.jsx("div",{style:se(v)})})]}),e.jsxs("div",{style:le,children:[e.jsxs("div",{style:ce,children:[e.jsxs("p",{style:de,children:[t," of ",x," steps completed"]}),e.jsx("div",{style:ge,children:n.map(i=>e.jsx(Ce,{step:i,isCompleted:a.includes(i.id),isActive:l===i.id,onClick:()=>T(i.id)},i.id))})]}),e.jsxs("div",{style:me,children:[l==="workspace"&&e.jsx(Fe,{workspaceName:g,setWorkspaceName:h,description:f,setDescription:b,maxDescLength:S}),l==="interaction"&&e.jsx(j.UploadInteraction,{}),l==="connect"&&e.jsx(C,{}),l==="invite"&&e.jsx(F,{})]})]})]})};exports.UploadEvaluate=j.UploadEvaluate;exports.UploadInteraction=j.UploadInteraction;exports.AddTeammates=F;exports.ConnectData=C;exports.GettingStarted=Te;
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;
2
2
  //# sourceMappingURL=onboarding.cjs.js.map
@@ -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 } from 'react';\nimport { Search } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n fontFamily: FF,\n};\n\nconst sectionTitleStyle = {\n fontSize: 20,\n fontWeight: 600,\n fontStyle: 'normal',\n fontFamily: FF,\n color: 'var(--grey-strong)',\n margin: 0,\n lineHeight: 'normal',\n};\n\nconst sectionSubtitleStyle = {\n fontSize: 13,\n fontWeight: 400,\n fontStyle: 'normal',\n color: 'var(--color-text-secondary)',\n fontFamily: FF,\n margin: '4px 0 0',\n lineHeight: '140%',\n};\n\nconst searchRowStyle = {\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n marginTop: 24,\n};\n\nconst searchInputWrapStyle = {\n display: 'flex',\n alignItems: 'center',\n flex: 1,\n height: 44,\n padding: '0 14px',\n borderRadius: 10,\n border: '1px solid var(--color-input-border)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n gap: 8,\n};\n\nconst searchIconStyle = {\n flexShrink: 0,\n color: 'var(--color-text-secondary)',\n};\n\nconst emailTagStyle = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: 4,\n padding: '4px 10px',\n borderRadius: 6,\n background: 'var(--hover-warm)',\n fontSize: 14,\n fontWeight: 500,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n whiteSpace: 'nowrap',\n};\n\nconst emailTagRemoveStyle = {\n cursor: 'pointer',\n fontSize: 16,\n lineHeight: 1,\n color: 'var(--color-text-secondary)',\n marginLeft: 2,\n};\n\nconst searchInputStyle = {\n flex: 1,\n border: 'none',\n outline: 'none',\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n background: 'transparent',\n height: '100%',\n};\n\nconst inviteBtnStyle = {\n display: 'flex',\n height: 44,\n padding: '0 24px',\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 flexShrink: 0,\n};\n\nconst suggestionsListStyle = {\n marginTop: 8,\n border: '1px solid var(--border)',\n borderRadius: 10,\n overflow: 'hidden',\n background: 'var(--grey-white)',\n};\n\nconst suggestionItemStyle = {\n display: 'flex',\n alignItems: 'center',\n gap: 12,\n padding: '14px 16px',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n borderBottom: '1px solid var(--border-subtle)',\n};\n\nconst avatarStyle = (color) => ({\n width: 40,\n height: 40,\n borderRadius: 9999,\n background: color || 'var(--hover-warm)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--color-green)',\n flexShrink: 0,\n});\n\nconst suggestionNameStyle = {\n fontSize: 14,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n margin: 0,\n lineHeight: '120%',\n};\n\nconst suggestionEmailStyle = {\n fontSize: 13,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--color-text-secondary)',\n margin: '2px 0 0',\n lineHeight: '140%',\n};\n\n// ─── Default Suggestions ───\n\nconst DEFAULT_SUGGESTIONS = [\n { name: 'Alex Rivera', email: 'alex.rivera@company.com', initials: 'AR' },\n { name: 'Alexandra Smith', email: 'a.smith@design.co', initials: 'AS' },\n];\n\n// ─── Component ───\n\nconst AddTeammates = ({ suggestions = DEFAULT_SUGGESTIONS, onInvite }) => {\n const [inputValue, setInputValue] = useState('');\n const [emails, setEmails] = useState([]);\n const [focused, setFocused] = useState(false);\n\n const filteredSuggestions = suggestions.filter(\n (s) =>\n !emails.includes(s.email) &&\n (s.name.toLowerCase().includes(inputValue.toLowerCase()) ||\n s.email.toLowerCase().includes(inputValue.toLowerCase()))\n );\n\n const addEmail = (email) => {\n if (email && !emails.includes(email)) {\n setEmails([...emails, email]);\n setInputValue('');\n }\n };\n\n const removeEmail = (email) => {\n setEmails(emails.filter((e) => e !== email));\n };\n\n const handleKeyDown = (e) => {\n if (e.key === 'Enter' && inputValue.includes('@')) {\n e.preventDefault();\n addEmail(inputValue.trim());\n }\n if (e.key === 'Backspace' && !inputValue && emails.length) {\n removeEmail(emails[emails.length - 1]);\n }\n };\n\n const handleInvite = () => {\n if (emails.length) {\n onInvite?.(emails);\n }\n };\n\n return (\n <div style={containerStyle}>\n <h2 style={sectionTitleStyle}>Add Teammates</h2>\n <p style={sectionSubtitleStyle}>Collaborate with your team to accelerate your workflow.</p>\n\n <div style={searchRowStyle}>\n <div\n style={{\n ...searchInputWrapStyle,\n borderColor: focused ? 'var(--color-green)' : 'var(--color-input-border)',\n boxShadow: focused ? '0 0 0 3px var(--color-green-ring)' : 'none',\n }}\n >\n <Search size={18} style={searchIconStyle} />\n {emails.map((email) => (\n <span key={email} style={emailTagStyle}>\n {email}\n <span style={emailTagRemoveStyle} onClick={() => removeEmail(email)}>×</span>\n </span>\n ))}\n <input\n type=\"text\"\n placeholder={emails.length ? '' : 'Search by name or email...'}\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n onFocus={() => setFocused(true)}\n onBlur={() => setTimeout(() => setFocused(false), 150)}\n onKeyDown={handleKeyDown}\n style={searchInputStyle}\n />\n </div>\n <button\n style={inviteBtnStyle}\n onClick={handleInvite}\n onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}\n onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}\n >\n Invite\n </button>\n </div>\n\n {focused && filteredSuggestions.length > 0 && (\n <div style={suggestionsListStyle}>\n {filteredSuggestions.map((suggestion, idx) => (\n <div\n key={suggestion.email}\n style={{\n ...suggestionItemStyle,\n ...(idx === filteredSuggestions.length - 1 ? { borderBottom: 'none' } : {}),\n }}\n onMouseDown={() => addEmail(suggestion.email)}\n onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}\n onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--grey-white)'; }}\n >\n <div style={avatarStyle()}>\n {suggestion.initials}\n </div>\n <div>\n <p style={suggestionNameStyle}>{suggestion.name}</p>\n <p style={suggestionEmailStyle}>{suggestion.email}</p>\n </div>\n </div>\n ))}\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","searchRowStyle","searchInputWrapStyle","searchIconStyle","emailTagStyle","emailTagRemoveStyle","searchInputStyle","inviteBtnStyle","suggestionsListStyle","suggestionItemStyle","avatarStyle","color","suggestionNameStyle","suggestionEmailStyle","DEFAULT_SUGGESTIONS","AddTeammates","suggestions","onInvite","inputValue","setInputValue","useState","emails","setEmails","focused","setFocused","filteredSuggestions","s","addEmail","email","removeEmail","e","handleKeyDown","handleInvite","Search","suggestion","idx","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 } 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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"}