{"version":3,"file":"ApplicationSteps.CC4BKXsq.mjs","names":[],"sources":["https:/framerusercontent.com/modules/uVPFuLTbfsRtgIHtzusJ/dgamiEibi59Yr3TFMJzj/ApplicationSteps.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";// ─── Default Steps ────────────────────────────────────────────────────────────\nconst defaultSteps=[{icon:\"M10 18l-6-6 1.41-1.41L10 15.17l9.59-9.58L21 7z\",title:\"Solliciteer\",description:\"Dien je sollicitatie en CV in via ons portaal\",color:\"#1a1615\"},{icon:\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z\",title:\"Beoordeling\",description:\"Ons team beoordeelt zorgvuldig jouw profiel en ervaring\",color:\"#1a1615\"},{icon:\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z\",title:\"Eerste Gesprek\",description:\"Een gesprek met HR om je beter te leren kennen\",color:\"#1a1615\"},{icon:\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z\",title:\"Assessment\",description:\"Een praktische opdracht om je vaardigheden te tonen\",color:\"#1a1615\"},{icon:\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\",title:\"Team Gesprek\",description:\"Ontmoet je toekomstige team en leiderschap\",color:\"#1a1615\"},{icon:\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z\",title:\"Welkom!\",description:\"Ontvang je aanbod en word deel van het team\",color:\"#1a1615\"}];// ─── SVG Icon Helper ──────────────────────────────────────────────────────────\nfunction SVGIcon({path,size=22}){return /*#__PURE__*/_jsx(\"svg\",{width:size,height:size,viewBox:\"0 0 24 24\",fill:\"white\",xmlns:\"http://www.w3.org/2000/svg\",children:/*#__PURE__*/_jsx(\"path\",{d:path})});}// ─── Main Component ───────────────────────────────────────────────────────────\nexport default function ApplicationSteps({steps=defaultSteps,lineColor=\"#1a1615\",fontFamily=\"Inter, sans-serif\"}){const totalSteps=steps.length;return /*#__PURE__*/_jsxs(\"div\",{style:{fontFamily,width:\"100%\",padding:\"40px 24px 20px\",boxSizing:\"border-box\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                .asteps-wrapper {\n                    display: flex;\n                    flex-direction: row;\n                    align-items: flex-start;\n                    justify-content: center;\n                    gap: 0;\n                    position: relative;\n                    width: 100%;\n                }\n\n                /* Horizontal line through icon centers */\n                .asteps-line {\n                    position: absolute;\n                    top: 28px;\n                    left: calc(100% / ${totalSteps} / 2);\n                    right: calc(100% / ${totalSteps} / 2);\n                    height: 2px;\n                    background: ${lineColor};\n                    z-index: 0;\n                }\n\n                .astep {\n                    flex: 1;\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    position: relative;\n                    z-index: 1;\n                    padding: 0 8px;\n                    text-align: center;\n                }\n\n                .astep-icon-wrap {\n                    position: relative;\n                    width: 56px;\n                    height: 56px;\n                    margin-bottom: 16px;\n                    flex-shrink: 0;\n                }\n\n                .astep-icon-circle {\n                    width: 56px;\n                    height: 56px;\n                    border-radius: 50%;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    position: relative;\n                    z-index: 1;\n                }\n\n                .astep-number {\n                    position: absolute;\n                    bottom: -4px;\n                    right: -4px;\n                    width: 20px;\n                    height: 20px;\n                    border-radius: 50%;\n                    background: white;\n                    border: 2px solid;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    font-size: 10px;\n                    font-weight: 700;\n                    line-height: 1;\n                    z-index: 2;\n                }\n\n                .astep-title {\n                    font-size: 14px;\n                    font-weight: 700;\n                    color: #1a1615;\n                    margin: 0 0 6px;\n                    line-height: 1.3;\n                }\n\n                .astep-desc {\n                    font-size: 12px;\n                    font-weight: 400;\n                    color: #555;\n                    line-height: 1.5;\n                    margin: 0;\n                    max-width: 130px;\n                }\n\n                /* ── Responsive: mobile stacks vertically ── */\n                @media (max-width: 640px) {\n                    .asteps-wrapper {\n                        flex-direction: column;\n                        align-items: flex-start;\n                        gap: 0;\n                    }\n\n                    .asteps-line {\n                        top: calc(100% / ${totalSteps} / 2);\n                        bottom: calc(100% / ${totalSteps} / 2);\n                        left: 28px;\n                        right: auto;\n                        width: 2px;\n                        height: auto;\n                    }\n\n                    .astep {\n                        flex-direction: row;\n                        align-items: flex-start;\n                        text-align: left;\n                        padding: 0 0 28px 0;\n                        gap: 16px;\n                    }\n\n                    .astep-icon-wrap {\n                        margin-bottom: 0;\n                        flex-shrink: 0;\n                    }\n\n                    .astep-content {\n                        padding-top: 8px;\n                    }\n\n                    .astep-desc {\n                        max-width: none;\n                    }\n                }\n            `}),/*#__PURE__*/_jsxs(\"div\",{className:\"asteps-wrapper\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"asteps-line\"}),steps.map((step,i)=>/*#__PURE__*/_jsxs(\"div\",{className:\"astep\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"astep-icon-wrap\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"astep-icon-circle\",style:{background:step.color},children:/*#__PURE__*/_jsx(SVGIcon,{path:step.icon,size:22})}),/*#__PURE__*/_jsx(\"div\",{className:\"astep-number\",style:{color:step.color,borderColor:step.color},children:i+1})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"astep-content\",children:[/*#__PURE__*/_jsx(\"p\",{className:\"astep-title\",children:step.title}),/*#__PURE__*/_jsx(\"p\",{className:\"astep-desc\",children:step.description})]})]},i))]})]});}// ─── Property Controls ────────────────────────────────────────────────────────\naddPropertyControls(ApplicationSteps,{steps:{type:ControlType.Array,title:\"Stappen\",control:{type:ControlType.Object,controls:{title:{type:ControlType.String,title:\"Titel\",defaultValue:\"Stap\"},description:{type:ControlType.String,title:\"Omschrijving\",defaultValue:\"Omschrijving van deze stap\",displayTextArea:true},color:{type:ControlType.Color,title:\"Kleur\",defaultValue:\"#1a1615\"},icon:{type:ControlType.String,title:\"Icon (SVG path)\",defaultValue:\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"}}},defaultValue:defaultSteps},lineColor:{type:ControlType.Color,title:\"Lijnkleur\",defaultValue:\"#1a1615\"},fontFamily:{type:ControlType.String,title:\"Lettertype\",defaultValue:\"Inter, sans-serif\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ApplicationSteps\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ApplicationSteps.map"],"mappings":"8JAEA,SAAS,EAAQ,CAAC,OAAK,OAAK,IAAI,CAAC,OAAoB,EAAK,MAAM,CAAC,MAAM,EAAK,OAAO,EAAK,QAAQ,YAAY,KAAK,QAAQ,MAAM,6BAA6B,SAAsB,EAAK,OAAO,CAAC,EAAE,CAAI,CAAC,CAAC,CAAC,CAAE,CAC1M,SAAwB,EAAiB,CAAC,QAAM,EAAa,YAAU,UAAU,aAAW,qBAAqB,CAAC,IAAM,EAAW,EAAM,OAAO,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,aAAW,MAAM,OAAO,QAAQ,iBAAiB,UAAU,YAAY,EAAE,SAAS,CAAc,EAAK,QAAQ,CAAC,SAAS;;;;;;;;;;;;;;;wCAevQ,EAAW;yCACV,EAAW;;kCAElB,EAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8ED,EAAW;8CACR,EAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA4B5C,CAAC,EAAe,EAAM,MAAM,CAAC,UAAU,iBAAiB,SAAS,CAAc,EAAK,MAAM,CAAC,UAAU,aAAa,CAAC,EAAE,EAAM,KAAK,EAAK,IAAiB,EAAM,MAAM,CAAC,UAAU,QAAQ,SAAS,CAAc,EAAM,MAAM,CAAC,UAAU,kBAAkB,SAAS,CAAc,EAAK,MAAM,CAAC,UAAU,oBAAoB,MAAM,CAAC,WAAW,EAAK,KAAK,EAAE,SAAsB,EAAK,EAAQ,CAAC,KAAK,EAAK,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EAAe,EAAK,MAAM,CAAC,UAAU,eAAe,MAAM,CAAC,MAAM,EAAK,MAAM,YAAY,EAAK,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAe,EAAM,MAAM,CAAC,UAAU,gBAAgB,SAAS,CAAc,EAAK,IAAI,CAAC,UAAU,cAAc,SAAS,EAAK,KAAK,CAAC,EAAe,EAAK,IAAI,CAAC,UAAU,aAAa,SAAS,EAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,mBAhIxrB,IAAoD,EACtG,EAAa,CAAC,CAAC,KAAK,iDAAiD,MAAM,cAAc,YAAY,gDAAgD,MAAM,SAAS,EAAE,CAAC,KAAK,sFAAsF,MAAM,cAAc,YAAY,0DAA0D,MAAM,SAAS,EAAE,CAAC,KAAK,qEAAqE,MAAM,iBAAiB,YAAY,iDAAiD,MAAM,SAAS,EAAE,CAAC,KAAK,gQAAgQ,MAAM,aAAa,YAAY,sDAAsD,MAAM,SAAS,EAAE,CAAC,KAAK,oSAAoS,MAAM,eAAe,YAAY,6CAA6C,MAAM,SAAS,EAAE,CAAC,KAAK,wLAAwL,MAAM,UAAU,YAAY,8CAA8C,MAAM,SAAS,CAAC,EAgIhjD,EAAoB,EAAiB,CAAC,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,QAAQ,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,EAAY,OAAO,MAAM,QAAQ,aAAa,MAAM,EAAE,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,aAAa,6BAA6B,gBAAgB,EAAI,EAAE,MAAM,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,aAAa,SAAS,EAAE,KAAK,CAAC,KAAK,EAAY,OAAO,MAAM,kBAAkB,aAAa,oEAAoE,CAAC,CAAC,EAAE,aAAa,CAAY,EAAE,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,aAAa,SAAS,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,mBAAmB,CAAC,CAAC"}