builder.io 1.18.31 → 1.18.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/cli/index.cjs +14 -14
  2. package/cli/index.cjs.map +3 -3
  3. package/core/index.cjs +1 -1
  4. package/core/index.mjs +1 -1
  5. package/node/index.cjs +1 -1
  6. package/node/index.mjs +1 -1
  7. package/package.json +2 -2
  8. package/server/index.cjs +3 -3
  9. package/server/index.mjs +3 -3
  10. package/types/tsconfig.tsbuildinfo +1 -1
package/server/index.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var CP=Object.create;var as=Object.defineProperty;var bP=Object.getOwnPropertyDescriptor;var xP=Object.getOwnPropertyNames;var wP=Object.getPrototypeOf,SP=Object.prototype.hasOwnProperty;var EP=(e,t,r)=>t in e?as(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var v=(e,t)=>()=>(e&&(t=e(e=0)),t);var E=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),vg=(e,t)=>{for(var r in t)as(e,r,{get:t[r],enumerable:!0})},Cg=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of xP(t))!SP.call(e,o)&&o!==r&&as(e,o,{get:()=>t[o],enumerable:!(n=bP(t,o))||n.enumerable});return e};var G=(e,t,r)=>(r=e!=null?CP(wP(e)):{},Cg(t||!e||!e.__esModule?as(r,"default",{value:e,enumerable:!0}):r,e)),PP=e=>Cg(as({},"__esModule",{value:!0}),e);var qe=(e,t,r)=>EP(e,typeof t!="symbol"?t+"":t,r);var AP,Kt,_r=v(()=>{"use strict";AP="1.18.31",Kt=process.env.OVERRIDE_VERSION??AP});var Qc,Zo,Ma,La,bg,ro,Zc,Xc,no,xg,Xo=v(()=>{"use strict";Qc="preview-url",Zo="framework",Ma="platform",La="node",bg="/~builder-connect",ro="/~builder-connected",Zc="/~builder-dev-tools",Xc="/~builder-dev-tools.js",no="/~builder-dev-tools-close",xg="/mappings"});function le(e,t=""){return e.ts.createSourceFile("module.tsx",typeof t=="string"?t:"",e.ts.ScriptTarget.Latest,void 0)}function ja(e,t=""){let r=le(e,t?.trim());if(r.statements.length===0)throw new Error(`No statements found in code: ${t}`);return r.statements[0]}function ze(e,t,r){if(t){let n=e.ts.createPrinter({newLine:e.ts.NewLineKind.LineFeed,removeComments:r});return e.ts.isSourceFile(t)?n.printFile(t).trim()+`
1
+ "use strict";var CP=Object.create;var as=Object.defineProperty;var bP=Object.getOwnPropertyDescriptor;var xP=Object.getOwnPropertyNames;var wP=Object.getPrototypeOf,SP=Object.prototype.hasOwnProperty;var EP=(e,t,r)=>t in e?as(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var v=(e,t)=>()=>(e&&(t=e(e=0)),t);var E=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),vg=(e,t)=>{for(var r in t)as(e,r,{get:t[r],enumerable:!0})},Cg=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of xP(t))!SP.call(e,o)&&o!==r&&as(e,o,{get:()=>t[o],enumerable:!(n=bP(t,o))||n.enumerable});return e};var G=(e,t,r)=>(r=e!=null?CP(wP(e)):{},Cg(t||!e||!e.__esModule?as(r,"default",{value:e,enumerable:!0}):r,e)),PP=e=>Cg(as({},"__esModule",{value:!0}),e);var qe=(e,t,r)=>EP(e,typeof t!="symbol"?t+"":t,r);var AP,Kt,_r=v(()=>{"use strict";AP="1.18.34",Kt=process.env.OVERRIDE_VERSION??AP});var Qc,Zo,Ma,La,bg,ro,Zc,Xc,no,xg,Xo=v(()=>{"use strict";Qc="preview-url",Zo="framework",Ma="platform",La="node",bg="/~builder-connect",ro="/~builder-connected",Zc="/~builder-dev-tools",Xc="/~builder-dev-tools.js",no="/~builder-dev-tools-close",xg="/mappings"});function le(e,t=""){return e.ts.createSourceFile("module.tsx",typeof t=="string"?t:"",e.ts.ScriptTarget.Latest,void 0)}function ja(e,t=""){let r=le(e,t?.trim());if(r.statements.length===0)throw new Error(`No statements found in code: ${t}`);return r.statements[0]}function ze(e,t,r){if(t){let n=e.ts.createPrinter({newLine:e.ts.NewLineKind.LineFeed,removeComments:r});return e.ts.isSourceFile(t)?n.printFile(t).trim()+`
2
2
  `:n.printNode(e.ts.EmitHint.Unspecified,t,e.ts.createSourceFile("module.tsx","",e.ts.ScriptTarget.Latest)).trim()+`
3
3
  `}return""}var Oe=v(()=>{"use strict"});var Sg=E((o8,wg)=>{"use strict";wg.exports=function(){if(process.env.npm_config_user_agent)return TP(process.env.npm_config_user_agent)};function TP(e){let t=e.split(" ")[0],r=t.lastIndexOf("/"),n=t.substring(0,r);return{name:n==="npminstall"?"cnpm":n,version:t.substring(r+1)}}});function Wt(e){return e.endsWith(".mapper.tsx")||e.endsWith(".mapper.jsx")||e.endsWith(".mapper.ts")||e.endsWith(".mapper.js")||e.endsWith(".mapper.mjs")}function de(e,t,r){t=hr(t),r=hr(r),t=e.dirname(t);let n=e.basename(r,e.extname(r));r=e.dirname(r);let o;return n==="index"?o=e.relative(t,r):o=e.relative(t,e.join(r,n)),o=hr(e.normalize(o)),o.startsWith(".")||(o="./"+o),o}function hr(e){return e.startsWith("\\\\?\\")?e:e.replace(/\\/g,"/")}function oo(e,t){let r=e.extname(t),n=e.basename(t,r).split(/[\/\\]/),o=n[n.length-1];return Eg(o==="index"?e.basename(e.dirname(t)):o)}function Eg(e){return Ee(e).replace(/ /g,"")}function Jt(e,t){let r=e.extname(t),n=hr(e.basename(t,r)).split("/").pop();return Ee(n==="index"?e.basename(e.dirname(t)):n)}function Pe(e,t){let r=hr(e.relative(e.getAppRootDir(),t));r=r.split("/").filter(o=>o!=="."&&o!==".."&&o!=="").join("/"),r.endsWith(".tsx")||r.endsWith(".jsx")?r=r.slice(0,-4):(r.endsWith(".ts")||r.endsWith(".js"))&&(r=r.slice(0,-3));let n=e.getFrameworks();return r.startsWith("src/")&&(r=r.slice(4)),n.some(o=>o.name.includes("next"))?"@/"+r:"~/"+r}function Ce(e,t){let r=t,n=[];for(let o=0;o<2;o++){let s=e.basename(r);if(!s||s==="components")break;n.unshift(s),r=e.dirname(r)}return n.join("/")}function Ee(e){for(e=e.replace(/([A-Z])/g," $1").replace(/\./g," ").replace(/_/g," ").replace(/-/g," ").replace(/\s/g," ").trim();e.includes(" ");)e=e.replace(/ /g," ");return e.split(" ").map(t=>t.length>2?t[0].toUpperCase()+t.slice(1):t).join("").trim()}function bt(e){return e.sort((t,r)=>t.name.toLocaleLowerCase().localeCompare(r.name.toLocaleLowerCase()))}async function we(e,t,r,n){if(typeof r!="string"||r==="")throw new Error(`getComponentId(), exportName must be a non-empty string, received: ${r}, ${t}`);return n&&(t=n),t=e.normalize(t),(await e.hash(t+"#"+r)).substring(0,8)}async function Ag(e){return(await e.hash(e.getAppRootDir())).substring(0,8)}function us(e){return typeof e=="number"}function ei(e){return typeof e=="boolean"}function pt(e){return typeof e=="string"}function ti(e){return typeof e=="string"?/^[A-Z][A-Za-z0-9]*$/.test(e):!1}function Bt(e){return JSON.parse(JSON.stringify(e))}function Ua(e,t,r){for(let n of t)if(e.dirname(r).includes(n))return!0;return!1}function Tg(){try{let e=(0,Pg.default)();if(e?.name)return e.name}catch{}return"npm"}function FP(){return process.platform.startsWith("win")}function Be(){return FP()?'"@builder.io/dev-tools"':"builder.io"}var Pg,me=v(()=>{"use strict";Pg=G(Sg(),1)});function ft(e){let t=e.join(e.getAppRootDir(),"tsconfig.json");return e.exists(t)}async function xt(e,t){async function r(o,s){if(s>10)return;let i=await e.readdir(o);for(let a of i){if(_P.includes(a))continue;let u=e.join(o,a),c=await e.stat(u);if(c){if(c.isFile()&&a.startsWith("builder-registry."))return u;if(c.isDirectory()){let l=await r(u,s+1);if(l)return l}}}}let n=await r(e.getAppRootDir(),0);if(!n){let s=`builder-registry.${await ft(e)?"ts":"js"}`;return e.join(t,s)}return n}async function Tn(e,t){let r=e.resolve("/");for(let n=0;n<20;n++){let o=e.join(t,"package.json"),s=await e.readFile(o);if(s)return JSON.parse(s);if(t===r)break;t=e.dirname(t)}return null}async function Fg(e,t){for(let r=0;r<20;r++){let n=e.dirname(t),o=e.join(n,"node_modules");if(await e.exists(o))return o;if(t===e.getAppRootDir())break;t=e.dirname(t)}return e.join(e.getAppRootDir(),"node_modules")}async function cs(e,t,r){let n=await e.readdir(t);return n.includes(r)?e.join(t,r):(await Promise.all(n.map(async s=>{if(s.startsWith(".")||s==="node_modules")return;let i=e.join(t,s);if((await e.stat(i)).isDirectory()){let u=await cs(e,i,r);if(u)return u}}))).find(s=>typeof s=="string")}var _P,mt=v(()=>{"use strict";_P=["node_modules","dist","build","public"]});async function Ge(e,t,r){if(!Array.isArray(t)||t.length===0)throw new Error(`createTsProgram() Invalid filePaths: ${t}`);let n=await Fg(e,t[0]),o=e.join(n,"typescript","lib"),s=new Map,i={fileExists:a=>{if(a=e.normalize(a),a.includes("node_modules")){let u=ls.get(a);if(!u){try{e.statSync(a).isFile()?u={exists:!0,content:e.readFileSync(a)}:u={exists:!1}}catch{u={exists:!1}}ls.set(a,u)}return u.exists}if(!s.has(a))if(e.existsSync(a)){let c=e.statSync(a);s.set(a,c.isFile())}else s.set(a,!1);return s.get(a)},getCanonicalFileName:a=>e.normalize(a),getCurrentDirectory:()=>e.cwd(),getDefaultLibFileName:()=>e.join(o,"lib.d.ts"),getDefaultLibLocation:()=>o,getNewLine:()=>`
4
4
  `,getSourceFile:a=>{if(a=e.normalize(a),a.includes("node_modules")){let c=ls.get(a);if(c)return le(e,c.content)}let u;try{u=e.readFileSync(a)}catch{console.error(`Could not read: ${a}`),u==null}if(u==null){let c=e.basename(a),l=e.extname(c).toLowerCase();if(a.startsWith(o)&&l===".ts"&&(u=Rg.get(c),u==null&&typeof self<"u"&&typeof fetch=="function"))throw new Ga(c)}return a.includes("node_modules")&&(u?ls.set(a,{exists:!0,content:u}):ls.set(a,{exists:!1})),le(e,u)},readFile:a=>{let u=e.readFileSync(a);return typeof u=="string"?u:void 0},useCaseSensitiveFileNames:()=>!1,writeFile:()=>{}};for(;;)try{return RP(e,i,t,r)}catch(a){if(a instanceof Ga){await IP(e,a.libName);continue}throw e.Sentry?.captureException(a),new Error(`createTsProgram() Could not create program for: ${t[0]}`,{cause:a})}}function RP(e,t,r,n){let o={rootNames:[...r],host:t,options:{}},s=e.ts.findConfigFile(e.dirname(r[0]),i=>e.existsSync(i));if(s){let i=_g.get(s);if(!i){let a=e.ts.readConfigFile(s,u=>{let c=e.readFileSync(u);return typeof c=="string"?c:void 0});a.error?e.Sentry?.captureException(new Error("Error reading tsconfig for createTsProgram"),{extra:{error:a.error,tsConfigPath:s}}):(i=e.ts.parseJsonConfigFileContent(a.config,e.ts.sys||{useCaseSensitiveFileNames:!1,readDirectory:(c,l)=>e.readdirSync(c),fileExists:c=>e.existsSync(c),readFile:c=>e.readFileSync(c)||void 0},e.dirname(s),void 0,s).options,_g.set(s,i))}i&&(o.options=Bt(i))}return o.options.noEmit=!0,o.options.isolatedModules=!1,o.options.strict=!1,o.options.jsx=e.ts.JsxEmit.Preserve,o.options.allowJs=!0,Object.assign(o.options,n),e.ts.createProgram(o)}async function ri(e,t,r){r||(r=await Ge(e,[t]));let n=r.getSourceFile(t);if(!n)throw new Error(`getTypeChecker() Could not find source file: ${t}`);return{typeChecker:r.getTypeChecker(),sourceFile:n}}async function IP(e,t){let r=`https://cdn.jsdelivr.net/npm/typescript@${e.ts.version}/lib/${t}`;Va.has(t)||Va.set(t,fetch(r).then(n=>n.text()).then(n=>{Rg.set(t,n)})),await Va.get(t),Va.delete(t)}async function Ig(e,t){let r=await e.readFile(t.filePath);return r==null?{diagnostics:[{messageText:`Error reading: ${t.filePath}`}],code:null,output:null}:el(e,{code:r,filePath:t.filePath,compilerOptions:t.compilerOptions})}function el(e,t){let r={diagnostics:[],code:t.code,output:null};try{let n=e.ts.transpileModule(t.code,{compilerOptions:t.compilerOptions,fileName:t.filePath??"module.tsx",reportDiagnostics:!0});n.diagnostics?.forEach(o=>{r.diagnostics.push({messageText:String(o.messageText)})}),r.output=n.outputText}catch(n){console.error("transpileModule",n),r.diagnostics.push({messageText:String(n)})}return r}var Ga,Rg,Va,ls,_g,Yt=v(()=>{"use strict";Oe();me();mt();Ga=class{constructor(t){qe(this,"libName");this.libName=t}};Rg=new Map,Va=new Map,ls=new Map,_g=new Map});var tl=v(()=>{"use strict"});async function ni(e){let t=[],r=await Tn(e,e.getRepoRootDir());if(r){let n=await $g(r,e);t.push(...n)}return t}async function $g(e,t){let r=[];if(e&&typeof e=="object"){let n=new Set(Object.keys({...e.dependencies,...e.devDependencies}));for(let o of kP)if(n.has(o)&&!r.some(s=>s.name===o)){let s={name:o};kg.has(o)&&(s.version=await kg.get(o)(t)),r.push(s)}}return r}function rl(e){let t=parseInt(e);return Number.isNaN(t)?void 0:t}var kg,kP,io=v(()=>{"use strict";mt();me();kg=new Map([["next",async e=>{if(!e.spawnSync)return;let t=Tg(),r=t==="npm"?"npx":t,{stdout:n}=e.spawnSync(r,["next","-v"],{encoding:"utf8"});if(!n)return;let o=n.match(/(Next.js v)([\d.]+)/g);if(!o)return;let s=o[0].split("Next.js v")[1],[i,a,u]=s.split(".");return{major:rl(i),minor:rl(a),patch:rl(u)}}]]),kP=["@shopify/remix-oxygen","@shopify/hydrogen","@builder.io/qwik-city","@remix-run/react","@sveltejs/kit","astro","gatsby","next","nuxt","@builder.io/qwik","@angular/core","react","solid-js","svelte","vue"]});function Ng(){let e=(0,nl.homedir)();return ol.default.join(e,".config","builder","dev-tools.json")}function il(e,t){return typeof e=="object"&&e!=null&&t in e}async function oi(){let e=Ng();try{let t=await(0,Rr.readFile)(e,"utf-8");if(typeof t=="string")return JSON.parse(t)}catch(t){if(t.code==="ENOENT")return null}return null}async function sl(e){let t=Ng();e=typeof e=="object"&&e!=null?e:{},await(0,Rr.mkdir)(ol.default.dirname(t),{recursive:!0}),await(0,Rr.writeFile)(t,JSON.stringify(e??{},null,2))}var Rr,nl,ol,NP,OP,BP,MP,ds=v(()=>{"use strict";tl();Rr=require("node:fs/promises"),nl=require("node:os"),ol=G(require("node:path"),1),NP=G(require("typescript"),1),OP=G(require("launch-editor"),1);io();BP=G(require("@sentry/node"),1);_r();MP=G(require("prettier"),1)});var z,ps,Ke=v(()=>{"use strict";z={gen1:"Gen 1",gen2:"Gen 2"},ps={CMS:"cms",VCP:"vcp",HYBRID:"hybrid"}});function ii(e){let t=Date.now();return new Promise((r,n)=>{let s=LP(e.url)({protocol:e.url.protocol,host:e.url.host,port:e.url.port,path:e.url.pathname+e.url.search,method:e.method,headers:e.headers},i=>{let a="";i.on("data",u=>{a+=u}),i.on("end",()=>{if((0,Og.debug)(`${e.method} ${e.url.href}, duration: ${Date.now()-t}ms`),typeof i.statusCode=="number"&&i.statusCode>=200&&i.statusCode<300)if(typeof i.headers["content-type"]!="string"||!i.headers["content-type"].includes("application/json"))n(`Response from ${e.url.href} content-type is ${i.headers["content-type"]}`);else try{r(JSON.parse(a))}catch(u){n(`Response from ${e.url.href} is not valid JSON: ${a}
@@ -20,7 +20,7 @@ Restarting server after Builder Devtools update...
20
20
  <h3>How's Devtools working for you?</h3>
21
21
  <p>We'd love your feedback!</p>
22
22
  </div>
23
- \`,t.appendChild(e),setTimeout(()=>{e.classList.add("menu-toggle-tooltip-show"),e.addEventListener("click",()=>{e.classList.remove("menu-toggle-tooltip-show")})},1e3)};function ui(t){t.getElementById("go-to-builder").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),Ee(t,!1),window.open(Nr(),"builder")}),t.getElementById("components-link").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation();let u=t.querySelector(".nav-cmp-list .section-content");u.scrollTop=0,oe(t,"nav-cmp-list"),si(t)}),t.getElementById("settings-link").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),oe(t,"nav-settings")}),t.getElementById("add-page-link").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),Ee(t,!1),window.open(je(),"builder")}),t.getElementById("import-from-figma").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),Ee(t,!1),window.open("https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more")})}function ci(t){let e=t.getElementById("enable-edit");e.addEventListener("change",r=>{r.stopPropagation(),Ft(e.checked)}),e.checked=it(),Ft(e.checked)}var At=class extends HTMLElement{constructor(){super()}connectedCallback(){let e=this.attachShadow({mode:"open"});e.innerHTML=\`<style>*,*:before,*:after{box-sizing:border-box}:host{--background-color: rgba(40, 40, 40, 1);--primary-color: rgba(72, 161, 255, 1);--primary-color-subdued: rgb(72, 161, 255, .6);--primary-color-highlight: rgb(126, 188, 255);--primary-contrast-color: white;--edit-color: #1d74e2;--edit-color-highlight: #1c6bd1;--edit-color-alpha: rgb(72, 161, 255, .15);--error-color: #ff2b55;--text-color: white;--text-color-highlight: white;--border-color: #454545;--button-background-color-hover: rgba(255, 255, 255, .1);--menu-width: 320px;--transition-time: .15s;--font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-family:var(--font-family);line-height:1.6}button{cursor:pointer;color:var(--text-color);-webkit-tap-highlight-color:transparent}input,select,button{font-family:var(--font-family)}.menu-toggle{position:absolute;right:0;bottom:0;pointer-events:auto;padding:8px;background:transparent;border:none;appearance:none}.menu-toggle div{position:relative;width:64px;height:64px;pointer-events:none;border-radius:50%;background:#000;border:1px solid white;box-shadow:#00000054 0 0 8px}.menu-toggle:hover div{background-color:var(--background-color);border:1px solid rgb(220,220,220)}.menu-toggle svg{position:absolute;top:15px;left:15px;width:33px;height:32px}div.highlight-bg{position:absolute;top:-1px;left:-1px;background-color:#1a1a1a;pointer-events:none;transition:all .4s ease-out;opacity:0}.menu-toggle-highlight-no-transition div.highlight-bg{transition:none}.menu-toggle-highlight div.highlight-bg{opacity:1}.menu-toggle-tooltip{position:absolute;bottom:0;right:0;width:382px;height:72px;padding:0;text-align:left;appearance:none;background-color:transparent;border:none;pointer-events:none;transform:translate3d(320px,0,0);opacity:0;transition:all .15s ease-in-out;color:#fff}.menu-toggle-tooltip.menu-toggle-tooltip-show{pointer-events:auto;opacity:1;transform:translateZ(0)}.menu-toggle-tooltip-content{position:absolute;inset:0 95px 10px 0;padding:8px 12px;background-color:var(--primary-color);box-shadow:#00000054 0 0 20px;border-radius:2px}.menu-toggle-tooltip-content:before{content:"";position:absolute;bottom:15px;right:-6px;width:30px;height:30px;background-color:var(--primary-color);transform:rotate(45deg)}.menu-toggle-tooltip:hover .menu-toggle-tooltip-content,.menu-toggle-tooltip:hover .menu-toggle-tooltip-content:before{background-color:var(--primary-color-highlight)}.menu-toggle-tooltip-content h3{margin:0;font-size:16px}.menu-toggle-tooltip-content p{margin:0;font-size:12px}section{position:absolute;display:grid;grid-template-rows:64px auto 64px;top:0;left:0;width:100%;height:100%;padding:0;pointer-events:none}.section-content{margin:0;padding:0 0 10px;font-weight:300;transform:translate3d(105%,0,0);transition:transform var(--transition-time) ease-in-out;overflow-y:auto}.section-content .error{color:var(--error-color);font-weight:700}section a{text-decoration:none;color:var(--text-color)}section h3,section p{margin-left:16px;margin-right:16px}.info{font-size:12px}ul.list{list-style:none;padding:0;margin:0}ul.list li{display:block;padding:0;margin:0}ul.list a,ul.list button{display:grid;grid-template-columns:24px auto;grid-gap:16px;padding:12px;margin:8px 0;border:none;background:transparent;appearance:none;width:100%;font-weight:300;text-align:left;text-decoration:none;color:var(--text-color)}ul.list a:hover,ul.list button:hover{text-decoration:none;color:var(--text-color);background-color:var(--button-background-color-hover)}ul.list a span,ul.list button span{display:block;font-size:16px;font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}header{position:relative;display:grid;grid-template-columns:44px 1fr;gap:8px;padding-left:8px;border-bottom:1px solid var(--border-color);transition:opacity var(--transition-time) ease-in-out;opacity:0;pointer-events:none}header>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-home header>div{margin-right:56px}header h2{margin:7px 0 0;font-size:18px;font-weight:500;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header p{margin:2px 0 0;font-size:12px;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header p button{display:block;margin:0;padding:0;width:100%;font-size:12px;font-weight:300;text-decoration:none;appearance:none;text-align:left;background-color:transparent;border:none;color:var(--primary-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header p button:hover{text-decoration:underline;color:var(--primary-color)}.builder-logo{margin:12px 0 0 8px}#close{display:block;position:absolute;appearance:none;background:transparent;border:none;border-radius:50%;margin:0;padding:0;right:4px;top:8px;width:48px;height:48px;z-index:1;opacity:.7}#close:hover{opacity:1;background-color:var(--button-background-color-hover)}#close svg{position:absolute;top:12px;left:12px;width:24px;height:24px;fill:currentColor;pointer-events:none}.back-button{position:relative;display:block;margin:7px 0 0 -2px;width:48px;height:48px;background:transparent;border:none;appearance:none;border-radius:50%}.back-button:hover{background-color:var(--button-background-color-hover)}.back-button svg{position:absolute;top:12px;left:12px;width:24px;height:24px;fill:currentColor;pointer-events:none}footer{border-top:1px solid var(--border-color);transition:opacity var(--transition-time) ease-in-out;opacity:0;pointer-events:none}section.nav-cmp-list{grid-template-rows:64px auto 120px}footer a{text-decoration:underline;color:var(--primary-color)}footer a:hover{color:var(--primary-color);text-decoration:none}.nav-list{padding:2px 0}.nav-loading{pointer-events:none}.nav-loading-icon{position:absolute;display:inline-block;top:170px;left:0;width:100%;transform:translateZ(0);pointer-events:auto;opacity:0;transition:all 50ms ease-in-out;transition-delay:50ms;pointer-events:none}.nav-loading .nav-loading-icon{opacity:.5}.nav-list h4{margin:8px 8px 8px 10px;font-size:14px;font-weight:600}.nav-list .nav-list-item+h4{margin-top:30px}.nav-list-item{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;margin:2px 0;padding:8px 28px 8px 46px;width:100%;font-size:14px;font-weight:300;text-align:left;border:none;background:transparent;appearance:none}.nav-list-item:hover{background-color:var(--button-background-color-hover)}.nav-list-item-icon{position:absolute;top:4px;left:10px;width:24px;height:24px;object-fit:contain;filter:invert(100%);background-size:24px 24px;background-repeat:no-repeat;background-position:center center}.nav-list-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.nav-list-item:after{display:block;position:absolute;content:"";background-image:url('data:image/svg+xml,<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L1 13" stroke="%23F2F2F2" stroke-opacity="0.5" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:12px 9px;top:0;right:0;width:32px;height:32px;pointer-events:none}.nav-list-item-note{opacity:0;font-size:12px;padding-top:1px;text-align:right}.nav-list-item:hover .nav-list-item-note{opacity:.5}.ui-select{display:block;margin:8px 0 16px;padding:8px 16px;cursor:pointer}.ui-select h3{margin:0;font-size:14px;font-weight:500}.ui-select p{margin:8px 0;font-size:12px;font-weight:300}.ui-select .select{position:relative;margin:8px 0;border-radius:4px;padding:0;line-height:1.1;overflow:hidden;border:1px solid var(--border-color)}.ui-select select{appearance:none;background-color:transparent;border:none;outline:none;padding:8px 32px 8px 8px;margin:0;width:100%;font-size:14px;cursor:pointer;text-overflow:ellipsis;opacity:.6;color:var(--text-color)}.ui-select .select:after{content:"";top:6px;right:5px;width:24px;height:24px;position:absolute;background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23F2F2F2" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');background-repeat:no-repeat;background-position:center;pointer-events:none;opacity:.6}.ui-select .select:hover{border-color:var(--primary-color-subdued)}.ui-text-input .select:focus-within{border-color:var(--primary-color)}.ui-text-input .select:focus-within select{opacity:1}.spinner:after{content:" ";display:block;width:32px;height:32px;margin:0 auto;pointer-events:auto;border-radius:50%;border:3px solid var(--text-color);border-color:var(--text-color) transparent var(--text-color) transparent;animation:spinner .75s linear infinite}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-switch{display:grid;grid-template-columns:auto 48px;grid-gap:20px;margin:8px 0 16px;padding:8px 0 8px 16px;cursor:pointer}.ui-switch>*{pointer-events:none}.ui-switch input{display:none;visibility:hidden}.ui-switch .switcher{display:inline-block;border-radius:100px;width:35px;height:14px;background-color:#ccc;position:relative;top:6px;vertical-align:middle;cursor:pointer}.ui-switch input[type=checkbox]:checked+.switcher{background-color:var(--primary-color-subdued)}.ui-switch .switcher:before{content:"";display:block;width:20px;height:20px;background-color:var(--text-color);box-shadow:0 1px 3px #0009;border-radius:50%;position:absolute;top:-3px;left:0;margin-right:0;transition:all .15s}.ui-switch input[type=checkbox]:checked+.switcher:before{left:100%;margin-left:-20px;background-color:var(--primary-color)}.ui-switch h3{margin:0;font-size:14px;font-weight:500}.ui-switch p{margin:4px 0 0;font-size:12px;font-weight:300}.ui-text-input{display:block;margin:8px 0 16px;padding:8px 16px;cursor:pointer}.ui-text-input h3{margin:0;font-size:14px;font-weight:500}.ui-text-input p{margin:8px 0;font-size:12px;font-weight:300}.ui-text-input .input{position:relative;margin:8px 0;border:1px solid var(--border-color);border-radius:4px;background:transparent;padding:2px;overflow:hidden}.ui-text-input input{display:block;width:235px;font-size:14px;border:none;background:transparent;padding:6px;appearance:none;color:var(--text-color);opacity:.6;outline:none}.ui-text-input .input:hover{border-color:var(--primary-color-subdued)}.ui-text-input .input:focus-within{border-color:var(--primary-color)}.ui-text-input .input:focus-within input{opacity:1}.ui-text-input .input:after{content:"";position:absolute;top:5px;right:14px;width:8px;height:17px;border:2px solid rgba(51,181,51,1);border-top:none;border-left:none;transform:rotate(45deg);opacity:0;transition:opacity 80ms ease-in-out;pointer-events:none}.ui-text-input.saved .input:after{opacity:1}.ui-toast{position:fixed;bottom:8px;left:8px;right:8px;padding:6px 12px;font-size:14px;border-radius:4px;transform:translate3d(0,150%,0);opacity:0;transition:all var(--transition-time) ease-in-out;background-color:var(--primary-color-subdued);color:var(--text-color);pointer-events:none}.ui-toast.ui-toast-show{transform:translateZ(0);opacity:1;pointer-events:auto}[data-view=nav-home] .nav-home .section-content,[data-view=nav-cmp-list] .nav-cmp-list .section-content,[data-view=nav-cmp-detail] .nav-cmp-detail .section-content,[data-view=nav-cmp-input] .nav-cmp-input .section-content,[data-view=nav-settings] .nav-settings .section-content{transform:translateZ(0);pointer-events:auto}[data-view=nav-home] .nav-home header,[data-view=nav-home] .nav-home footer,[data-view=nav-cmp-list] .nav-cmp-list header,[data-view=nav-cmp-list] .nav-cmp-list footer,[data-view=nav-cmp-detail] .nav-cmp-detail header,[data-view=nav-cmp-detail] .nav-cmp-detail footer,[data-view=nav-cmp-input] .nav-cmp-input header,[data-view=nav-cmp-input] .nav-cmp-input footer,[data-view=nav-settings] .nav-settings header,[data-view=nav-settings] .nav-settings footer{opacity:1;pointer-events:auto}[data-view=nav-cmp-list] .nav-home .section-content,[data-view=nav-cmp-detail] .nav-home .section-content,[data-view=nav-cmp-detail] .nav-cmp-list .section-content,[data-view=nav-cmp-input] .nav-home .section-content,[data-view=nav-cmp-input] .nav-cmp-list .section-content,[data-view=nav-cmp-input] .nav-cmp-detail .section-content,[data-view=nav-settings] .nav-home .section-content{transform:translate3d(-105%,0,0)}.cmp-item .nav-list-item-icon{background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.83 16.809C20.94 16.561 21 16.289 21 16.008V7.99001C20.9994 7.64108 20.9066 7.29851 20.731 6.99699C20.5554 6.69547 20.3032 6.44571 20 6.27301L13 2.26501C12.6954 2.09103 12.3508 1.99951 12 1.99951C11.6492 1.99951 11.3046 2.09103 11 2.26501L7.988 3.99001M5.441 5.44801L4 6.27301C3.381 6.62801 3 7.28301 3 7.99101V16.009C3 16.718 3.381 17.372 4 17.726L11 21.734C11.3046 21.908 11.6492 21.9995 12 21.9995C12.3508 21.9995 12.6954 21.908 13 21.734L18.544 18.56" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22V12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.532 10.538L20.73 6.95996" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.27002 6.95996L12 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 3L21 21" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');opacity:.3}.cmp-item.registered .nav-list-item-icon{background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 16.008V7.99001C20.9994 7.64108 20.9066 7.29851 20.731 6.99699C20.5554 6.69547 20.3032 6.44571 20 6.27301L13 2.26501C12.6954 2.09103 12.3508 1.99951 12 1.99951C11.6492 1.99951 11.3046 2.09103 11 2.26501L4 6.27301C3.381 6.62801 3 7.28301 3 7.99101V16.009C3 16.718 3.381 17.372 4 17.726L11 21.734C11.3046 21.908 11.6492 21.9995 12 21.9995C12.3508 21.9995 12.6954 21.908 13 21.734L20 17.726C20.619 17.371 21 16.716 21 16.008Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 22V12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 12L20.73 6.95996" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3.26999 6.95996L12 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>');opacity:.8}.search-highlight{background-color:var(--primary-color-alpha);padding:0 2px;border-radius:2px;font-weight:500}.search-container{position:sticky;top:0;z-index:10;padding:12px 16px;background:var(--background-color);border-bottom:1px solid var(--border-color)}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:12px;color:var(--text-color-secondary);pointer-events:none}.component-search-input{width:100%;height:36px;padding:8px 36px;border:1px solid var(--border-color);border-radius:6px;background:var(--input-background);color:var(--text-color);font-size:14px;transition:border-color .2s,box-shadow .2s}.component-search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color-alpha)}.component-search-input::placeholder{color:var(--text-color-tertiary)}.clear-search-button{position:absolute;right:8px;padding:4px;color:var(--text-color-secondary);border:none;background:transparent;border-radius:4px;cursor:pointer;opacity:0;transition:opacity .2s,background-color .2s;display:flex;align-items:center;justify-content:center}.clear-search-button:hover{background-color:var(--hover-color)}.component-search-input:not(:placeholder-shown)+.clear-search-button{opacity:1}.no-results{padding:32px 16px;text-align:center;color:var(--text-color-secondary);font-size:14px}#cmp-detail{position:relative}.cmp-loading{pointer-events:none!important}.cmp-loading-icon{position:absolute;display:inline-block;top:170px;left:0;width:100%;transform:translateZ(0);pointer-events:auto;opacity:0;transition:all 50ms ease-in-out;transition-delay:50ms;pointer-events:none}.cmp-loading .cmp-loading-icon{opacity:.5}.cmp-cover{position:absolute;top:160px;left:0;width:100%;height:100vh;background:var(--background-color);transform:translateZ(0);pointer-events:none;display:none}[data-view=nav-cmp-detail] .cmp-cover{display:block;pointer-events:auto}.cmp-enabled .cmp-cover{transform:translate3d(0,105%,0);pointer-events:none}.section-ready .cmp-cover{transition:all var(--transition-time) ease-in-out}.cmp-detail-inputs-container{margin:8px 0 16px;padding:0}.cmp-detail-inputs-container h3{margin:0 0 6px;padding-left:16px;padding-right:8px;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center}.cmp-detail-inputs-reload{font-weight:300;font-size:.9em;text-decoration:none;appearance:none;text-align:left;background-color:transparent;border:none;color:var(--primary-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmp-detail-inputs-reload:hover{text-decoration:underline;color:var(--primary-color)}.cmp-detail-inputs-container .cmp-inputs-empty{padding:0;margin-top:12px;font-size:12px;font-weight:300;opacity:.5;font-style:italic}.cmp-detail-inputs-container .nav-list-item-icon{opacity:.8;background-size:20px 20px;background-position:4px center}.input-icon{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>')}.input-icon-array{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 16v-6a2 2 0 1 1 4 0v6"></path> <path d="M10 13h4"></path></svg>')}.input-icon-boolean{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 16h2a2 2 0 1 0 0 -4h-2h2a2 2 0 1 0 0 -4h-2v8z"></path></svg>')}.input-icon-number{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 16v-8l4 8v-8"></path></svg>')}.input-icon-object{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M12 8a2 2 0 0 1 2 2v4a2 2 0 1 1 -4 0v-4a2 2 0 0 1 2 -2z"></path></svg>')}.input-icon-string{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1"></path></svg>')}.cmp-input-item-unregistered{opacity:.4}.cmp-input-item-unregistered .input-icon:after{content:"";position:absolute;top:11px;left:4px;width:20px;height:2px;background-color:#000;transform:rotate(-45deg)}.cmp-prop-info{border-bottom:1px solid var(--border-color)}.cmp-input-readonly{margin:16px 0;padding:0 16px;display:grid;grid-template-columns:50% 50%;gap:12px}.cmp-input-readonly h3{margin:0;font-size:14px;font-weight:500}.cmp-input-readonly span{margin-top:2px;font-size:12px;font-weight:300;opacity:.8}.cmp-input-detail{margin:16px 0}.cmp-input-detail a{color:var(--primary-color);text-decoration:none}.cmp-input-detail a:hover{text-decoration:underline}.input-cover{position:absolute;top:175px;left:0;width:100%;height:100%;background:var(--background-color);transform:translateZ(0);transition:all var(--transition-time) ease-in-out;pointer-events:auto}.input-enabled .input-cover{transform:translate3d(0,105%,0);pointer-events:none}.input-loading-icon{position:absolute;display:inline-block;top:190px;left:0;width:100%;transform:translateZ(0);pointer-events:auto;opacity:0;transition:all 50ms ease-in-out;transition-delay:50ms;pointer-events:none}.input-loading .input-loading-icon{opacity:.5}:host{position:fixed;inset:0;z-index:2147483646;user-select:none;pointer-events:none;color:var(--text-color)}aside{position:absolute;top:0;right:0;width:var(--menu-width);height:100%;transform:translate3d(105%,0,0);transition:transform var(--transition-time) ease-in-out;background:var(--background-color);box-shadow:#000000c9 5px 0 20px;overflow:hidden;z-index:1}:host(.show-builder-menu) aside{pointer-events:auto;transform:translateZ(0)}#hit{position:absolute;inset:0;display:none}:host(.show-builder-menu) #hit{display:block;pointer-events:auto}#version{position:absolute;bottom:6px;right:6px;font-size:8px;color:#9b9b9b}</style><div id="hit"></div> <aside data-view="nav-home"> <section class="nav-home"> <header> <svg class="builder-logo" viewBox="0 0 31 36" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M31 9.96854C31.0016 11.4553 30.6701 12.9236 30.03 14.2654C29.3898 15.6072 28.4572 16.7884 27.3007 17.7221L0.702841 2.61812C0.601104 2.56012 0.506714 2.49008 0.421705 2.40951C0.288323 2.27871 0.182333 2.12263 0.109928 1.95039C0.0375215 1.77814 0.000151253 1.59319 0 1.40633C0 1.03335 0.148098 0.675643 0.411715 0.411905C0.675332 0.148167 1.03287 0 1.40568 0L21.036 0C23.6786 0 26.213 1.05025 28.0816 2.91972C29.9502 4.78918 31 7.32472 31 9.96854Z" fill="#18B4F4" /> <path d="M31 25.4757C31.0004 26.7849 30.7429 28.0815 30.2423 29.2912C29.7417 30.5009 29.0078 31.6001 28.0825 32.526C27.1572 33.4519 26.0587 34.1864 24.8497 34.6875C23.6406 35.1886 22.3448 35.4465 21.0361 35.4465H1.40573C1.12766 35.4436 0.856725 35.3581 0.627199 35.201C0.397672 35.044 0.219871 34.8223 0.116289 34.5641C0.0127078 34.3059 -0.011999 34.0228 0.0452946 33.7505C0.102588 33.4783 0.239308 33.2292 0.438156 33.0347C0.517415 32.9551 0.606358 32.8858 0.702893 32.8284L11.1705 26.8843L27.2984 17.7244C28.4548 18.6579 29.3874 19.8387 30.028 21.18C30.6685 22.5213 31.0007 23.9891 31 25.4757Z" fill="#FD6B3C" /> <path d="M27.3011 17.7221L11.1709 26.8843L0.703209 32.8284C0.602697 32.8843 0.509784 32.9528 0.426758 33.0323C4.41799 28.9369 6.6496 23.442 6.64456 17.7221C6.65208 12.0015 4.42111 6.50517 0.429101 2.40948C0.51411 2.49005 0.6085 2.56009 0.710237 2.61809L27.3011 17.7221Z" fill="#A97FF2" /> </svg> <div> <h2 class="builder-home-title">Builder Devtools</h2> <p><button id="go-to-builder">Go to Builder</button></p> </div> <button id="close" aria-label="Close Menu"> <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M18 6l-12 12" /> <path d="M6 6l12 12" /> </svg> </button> </header> <div class="section-content"> <ul class="list"> <li> <button id="components-link"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M21 16.008V7.99001C20.9994 7.64108 20.9066 7.29851 20.731 6.99699C20.5554 6.69547 20.3032 6.44571 20 6.27301L13 2.26501C12.6954 2.09103 12.3508 1.99951 12 1.99951C11.6492 1.99951 11.3046 2.09103 11 2.26501L4 6.27301C3.381 6.62801 3 7.28301 3 7.99101V16.009C3 16.718 3.381 17.372 4 17.726L11 21.734C11.3046 21.908 11.6492 21.9995 12 21.9995C12.3508 21.9995 12.6954 21.908 13 21.734L20 17.726C20.619 17.371 21 16.716 21 16.008Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 22V12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 12L20.73 6.95996" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3.26999 6.95996L12 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>Components</span> </button> </li> <li> <button id="settings-link"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.439 10.751 21.439 13.249 19.683 13.675C19.4192 13.7389 19.1742 13.8642 18.968 14.0407C18.7618 14.2172 18.6001 14.4399 18.4963 14.6907C18.3924 14.9414 18.3491 15.2132 18.3701 15.4838C18.3911 15.7544 18.4757 16.0162 18.617 16.248C19.557 17.791 17.791 19.558 16.247 18.618C16.0153 18.4769 15.7537 18.3924 15.4832 18.3715C15.2128 18.3506 14.9412 18.3938 14.6906 18.4975C14.44 18.6013 14.2174 18.7627 14.0409 18.9687C13.8645 19.1747 13.7391 19.4194 13.675 19.683C13.249 21.439 10.751 21.439 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>Settings</span> </button> </li> <li> <button id="add-page-link"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M14 3v4a1 1 0 0 0 1 1h4" /> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /> <path d="M12 11l0 6" /> <path d="M9 14l6 0" /> </svg> <span>Add Builder Page</span> </button> </li> <li> <button id="import-from-figma"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-figma" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M15 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M6 3m0 3a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3z" /> <path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15" /> </svg> <span>Import From Figma</span> </button> </li> </ul> </div> <footer> <ul class="list"> <li> <a href="https://docs.google.com/forms/d/e/1FAIpQLSdqZcJpRtm_Ia5DTHP6SDY9Xa6LID3KiTjRWkjMzWyJRUtSHw/viewform" target="_blank" > <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M11.013 17.0114L10.013 18.0114L2.513 10.5834C2.0183 10.102 1.62864 9.52342 1.36854 8.88404C1.10845 8.24466 0.983558 7.55836 1.00173 6.86834C1.01991 6.17832 1.18076 5.49954 1.47415 4.87474C1.76755 4.24994 2.18713 3.69266 2.70648 3.23799C3.22583 2.78331 3.8337 2.4411 4.49181 2.23289C5.14991 2.02468 5.844 1.95499 6.53036 2.02821C7.21673 2.10143 7.8805 2.31596 8.47987 2.65831C9.07925 3.00066 9.60124 3.46341 10.013 4.01741C10.8086 2.95654 11.9931 2.2552 13.3059 2.06766C14.6186 1.88012 15.9521 2.22176 17.013 3.01741C18.0739 3.81306 18.7752 4.99755 18.9627 6.3103C19.1503 7.62305 18.8086 8.95654 18.013 10.0174" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M18.2006 19.8175L16.0286 20.9555C15.9642 20.989 15.8917 21.004 15.8192 20.9987C15.7467 20.9934 15.6771 20.9681 15.6182 20.9256C15.5593 20.8831 15.5134 20.825 15.4855 20.7579C15.4577 20.6907 15.4491 20.6172 15.4606 20.5455L15.8756 18.1345L14.1186 16.4275C14.0662 16.3768 14.0291 16.3123 14.0115 16.2416C13.9939 16.1708 13.9966 16.0965 14.0192 16.0271C14.0418 15.9578 14.0835 15.8962 14.1394 15.8494C14.1954 15.8026 14.2634 15.7725 14.3356 15.7625L16.7636 15.4105L17.8496 13.2175C17.8821 13.1521 17.9322 13.0972 17.9942 13.0588C18.0562 13.0204 18.1277 13 18.2006 13C18.2736 13 18.3451 13.0204 18.4071 13.0588C18.4691 13.0972 18.5191 13.1521 18.5516 13.2175L19.6376 15.4105L22.0656 15.7625C22.1377 15.7728 22.2054 15.8031 22.2611 15.85C22.3168 15.8968 22.3583 15.9583 22.3809 16.0275C22.4034 16.0967 22.4062 16.1708 22.3888 16.2415C22.3715 16.3122 22.3347 16.3766 22.2826 16.4275L20.5256 18.1345L20.9396 20.5445C20.9521 20.6163 20.9441 20.6902 20.9166 20.7578C20.8891 20.8254 20.8433 20.8839 20.7842 20.9267C20.7252 20.9695 20.6553 20.9949 20.5825 21C20.5098 21.005 20.4371 20.9896 20.3726 20.9555L18.2006 19.8175Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>Give Feedback</span> </a> </li> </ul> <div id="version"></div> </footer> </section> <section class="nav-cmp-list"> <header> <button class="back-button"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div class="search-container"> <div class="search-input-wrapper"> <svg class="search-icon" viewBox="0 0 24 24" width="16" height="16"> <path fill="none" stroke="currentColor" stroke-width="2" d="M15.5 15.5L20 20M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z" /> </svg> <input type="text" id="component-search" class="component-search-input" placeholder="Search components..." autocomplete="off" spellcheck="false" /> <button id="clear-search" class="clear-search-button" type="button" aria-label="Clear search" > <svg viewBox="0 0 24 24" width="16" height="16"> <path fill="none" stroke="currentColor" stroke-width="2" d="M6 6l12 12M6 18L18 6" /> </svg> </button> </div> </div> <div> <h2>Custom Components</h2> <p> <button id="open-builder-registry"></button> </p> </div> </header> <div class="section-content"> <div id="cmp-list" class="cmp-list nav-list"></div> </div> <div class="nav-loading-icon spinner"></div> <footer> <p class="info"> Expand on Builder's selection of built-in blocks by <a target="_blank" href="https://www.builder.io/c/docs/custom-components-intro" >registering components</a > from your codebase. This way, teammates can drag and drop your components within Builder's Visual Editor just like any other block. </p> </footer> </section> <section class="nav-cmp-detail"> <header> <button class="back-button" data-back="nav-cmp-list"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div> <h2 id="cmp-detail-title"></h2> <p> <button id="cmp-open-source"></button> </p> </div> </header> <div class="section-content"> <div id="cmp-error"></div> <label class="ui-switch"> <div> <h3>Register Component</h3> <p> Registers this component so it can be used within Builder Visual CMS </p> </div> <input type="checkbox" role="switch" id="cmp-register" /> <span class="switcher"></span> </label> <div id="cmp-detail"> <label class="ui-text-input"> <h3>Component Name</h3> <div class="input"> <input type="text" id="cmp-name" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off" minlength="2" maxlength="30" required placeholder="e.g. My Counter" /> </div> <p> Unique name to identify this custom component within Builder. Press ESC to cancel </p> </label> <div class="cmp-detail-inputs-container"> <h3> <span>Builder Inputs (Props)</span> <button class="cmp-detail-inputs-reload" id="btn-inputs-reload"> Reload </button> </h3> <div id="cmp-detail-inputs"></div> </div> </div> </div> <div class="cmp-cover"></div> <div class="cmp-loading-icon spinner"></div> </section> <section class="nav-cmp-input"> <header> <button class="back-button" data-back="nav-cmp-detail"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div> <h2 id="cmp-input-title"></h2> <p> <button id="input-open-source"></button> </p> </div> </header> <div class="section-content"> <label class="ui-switch"> <div> <h3>Enable Input</h3> <p>Add this component prop as a Builder input</p> </div> <input type="checkbox" role="switch" id="input-register" /> <span class="switcher"></span> </label> <div class="cmp-prop-info"> <div class="cmp-input-readonly"> <h3>Prop Name</h3> <span id="cmp-prop-name"></span> </div> <div class="cmp-input-readonly"> <h3>Prop Type</h3> <span id="cmp-prop-type"></span> </div> </div> <div class="cmp-input-detail"> <label class="ui-text-input"> <h3>Builder Input Name</h3> <div class="input"> <input type="text" id="input-name" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off" minlength="1" maxlength="30" required placeholder="e.g. Text" /> </div> <p> Friendly name to identify this component prop as a Builder input. Press ESC to cancel </p> </label> <label class="ui-select"> <h3>Builder Input Type</h3> <div class="select"> <select id="input-type"></select> </div> <p> Correlate to what editing UI is appropriate for this Builder input. <a href="https://www.builder.io/c/docs/custom-components-input-types" target="_blank" >Read more about input types.</a > </p> </label> </div> <div class="input-cover"></div> <div class="input-loading-icon spinner"></div> </div> </section> <section class="nav-settings"> <header> <button class="back-button"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div> <h2>Settings</h2> <p>Configure Builder's Devtools</p> </div> </header> <div class="section-content"> <label class="ui-switch"> <div> <h3>Enable edit button in UI</h3> <p>Enables the edit button so you can edit content in Builder</p> </div> <input type="checkbox" role="switch" id="enable-edit" /> <span class="switcher"></span> </label> </div> </section> <div class="ui-toast" id="toast"></div> </aside> <button class="menu-toggle" aria-label="Toggle Builder Devtools"> <div> <div class="highlight-bg"></div> <svg viewBox="0 0 31 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M31 9.96854C31.0016 11.4553 30.6701 12.9236 30.03 14.2654C29.3898 15.6072 28.4572 16.7884 27.3007 17.7221L0.702841 2.61812C0.601104 2.56012 0.506714 2.49008 0.421705 2.40951C0.288323 2.27871 0.182333 2.12263 0.109928 1.95039C0.0375215 1.77814 0.000151253 1.59319 0 1.40633C0 1.03335 0.148098 0.675643 0.411715 0.411905C0.675332 0.148167 1.03287 0 1.40568 0L21.036 0C23.6786 0 26.213 1.05025 28.0816 2.91972C29.9502 4.78918 31 7.32472 31 9.96854Z" fill="#18B4F4" /> <path d="M31 25.4757C31.0004 26.7849 30.7429 28.0815 30.2423 29.2912C29.7417 30.5009 29.0078 31.6001 28.0825 32.526C27.1572 33.4519 26.0587 34.1864 24.8497 34.6875C23.6406 35.1886 22.3448 35.4465 21.0361 35.4465H1.40573C1.12766 35.4436 0.856725 35.3581 0.627199 35.201C0.397672 35.044 0.219871 34.8223 0.116289 34.5641C0.0127078 34.3059 -0.011999 34.0228 0.0452946 33.7505C0.102588 33.4783 0.239308 33.2292 0.438156 33.0347C0.517415 32.9551 0.606358 32.8858 0.702893 32.8284L11.1705 26.8843L27.2984 17.7244C28.4548 18.6579 29.3874 19.8387 30.028 21.18C30.6685 22.5213 31.0007 23.9891 31 25.4757Z" fill="#FD6B3C" /> <path d="M27.3011 17.7221L11.1709 26.8843L0.703209 32.8284C0.602697 32.8843 0.509784 32.9528 0.426758 33.0323C4.41799 28.9369 6.6496 23.442 6.64456 17.7221C6.65208 12.0015 4.42111 6.50517 0.429101 2.40948C0.51411 2.49005 0.6085 2.56009 0.710237 2.61809L27.3011 17.7221Z" fill="#A97FF2" /> </svg> </div> </button>\`,ai(e),ui(e),oi(e),ri(e),ti(e),ci(e),this.setAttribute("aria-hidden","true"),e.getElementById("version").textContent="v1.18.31"}highlightOpener(){let e=this.shadowRoot.querySelector(".menu-toggle");e.classList.add("menu-toggle-highlight"),e.classList.add("menu-toggle-highlight-no-transition"),setTimeout(()=>{e.classList.remove("menu-toggle-highlight-no-transition"),setTimeout(()=>{e.classList.remove("menu-toggle-highlight")},20)},20)}};var lo=\`<style>*,*:before,*:after{box-sizing:border-box}html,body,:host{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:2147483646;margin:0;padding:0;line-height:1.8;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";background-color:#252525;color:#fff;transition:opacity .25s ease-in-out}:host([aria-hidden="true"]){opacity:0;pointer-events:none}main{position:absolute;top:0;left:0;width:100%;height:100vh}h1{margin-top:0;font-size:24px;font-weight:300;line-height:1.4}p{margin:20px 0;font-weight:300}button{cursor:pointer}aside{position:absolute;top:0;left:0;width:350px;height:100vh;padding:60px 0 0 50px;background-color:#121212}aside ul{margin:30px 0 0;padding:0;list-style:none}aside li{position:relative;margin:0;padding:20px 10px;font-weight:300}aside li.highlight{color:#48a1ff}aside li.active{font-weight:700}aside li .circle{position:absolute;top:20px;left:10px;width:24px;height:24px;border:3px solid white;border-radius:50%;font-size:14px}aside li.highlight .circle{border-color:#48a1ff}aside li.active .circle:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background-color:#48a1ff}aside li.completed .circle{background-color:#48a1ff}aside li.completed .circle:after{content:"";position:absolute;top:2px;left:6px;width:6px;height:13px;border:3px solid black;border-top:none;border-left:none;transform:rotate(45deg)}aside li .line{position:absolute;top:44px;left:21px;width:3px;height:45px;background-color:#fff}aside li.completed .line{background-color:#48a1ff}aside li span{display:block;margin-left:44px}nav{margin-top:30px}section{position:absolute;top:135px;left:350px;padding:0 80px 0 140px;transition:opacity .15s ease-in-out}section[aria-hidden=true]{pointer-events:none;opacity:0}section h1,section p{min-width:300px;max-width:600px}.button{position:relative;display:inline-block;color:#fff;background-color:#48a1ff;border-radius:4px;text-decoration:none;padding:10px 40px 10px 20px;white-space:nowrap}.button:hover{background-color:#48a1ffd9}#button-icon{position:absolute;top:1px;right:5px;bottom:0;width:30px;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="square" stroke-miterlimit="10" stroke-width="48" d="M184 112l144 144-144 144"/></svg>');background-repeat:no-repeat;background-position:center;background-size:24px 24px}.button[aria-disabled=true]{opacity:.9;background-color:#ffffff4d;pointer-events:none;padding-right:60px}.button[aria-disabled=true] #button-icon{top:21px;right:29px;width:8px;height:8px;border-radius:4px;background:#fff;color:#fff;animation:dot-flashing .5s infinite linear alternate;animation-delay:.25s}.button[aria-disabled=true] #button-icon:before,.button[aria-disabled=true] #button-icon:after{content:"";display:inline-block;position:absolute;top:0}.button[aria-disabled=true] #button-icon:before{left:-12px;width:8px;height:8px;border-radius:4px;background-color:#fff;color:#fff;animation:dot-flashing .5s infinite alternate;animation-delay:0s}.button[aria-disabled=true] #button-icon:after{left:12px;width:8px;height:8px;border-radius:4px;background-color:#fff;color:#fff;animation:dot-flashing .5s infinite alternate;animation-delay:.5s}@keyframes dot-flashing{0%{background-color:#fff}50%,to{background-color:#ffffff4d}}.logo{margin-left:9px;background:url('data:image/svg+xml,<svg viewBox="0 0 150 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(%23clip0_4_304)"> <path d="M27.9858 8.99927C27.9872 10.3415 27.688 11.667 27.1101 12.8783C26.5321 14.0896 25.6902 15.156 24.6462 15.9989V15.9989L0.634502 2.36355C0.542657 2.31119 0.457444 2.24796 0.380701 2.17523C0.260289 2.05715 0.164605 1.91624 0.0992389 1.76075C0.0338732 1.60525 0.000136546 1.43828 0 1.26959C0 0.932873 0.133698 0.609948 0.371683 0.371854C0.609667 0.13376 0.932443 0 1.269 0L18.9906 0C21.3763 0 23.6642 0.948135 25.3512 2.63583C27.0381 4.32352 27.9858 6.61252 27.9858 8.99927V8.99927Z" fill="%2318B4F4" /> <path d="M27.9858 22.9986C27.9861 24.1806 27.7536 25.351 27.3017 26.4431C26.8498 27.5352 26.1873 28.5275 25.352 29.3634C24.5167 30.1993 23.5249 30.8624 22.4335 31.3147C21.342 31.7671 20.1721 32 18.9907 32H1.26906C1.01802 31.9973 0.77343 31.9202 0.566221 31.7784C0.359012 31.6366 0.198499 31.4364 0.104989 31.2034C0.0114791 30.9703 -0.0108254 30.7147 0.0408974 30.4689C0.0926201 30.2231 0.216046 29.9982 0.395559 29.8226V29.8226C0.467112 29.7508 0.547407 29.6882 0.634555 29.6364L10.0844 24.2703L24.6441 16.001C25.688 16.8438 26.53 17.9097 27.1083 19.1206C27.6866 20.3315 27.9864 21.6566 27.9858 22.9986V22.9986Z" fill="%23FD6B3C" /> <path d="M24.6461 15.9989L10.0843 24.2703L0.634458 29.6365C0.54372 29.6868 0.459841 29.7487 0.384888 29.8205C3.98804 26.1233 6.00266 21.1627 5.99812 15.9989C6.0049 10.8346 3.99085 5.87268 0.387003 2.17523C0.463746 2.24796 0.548959 2.31119 0.640803 2.36355L24.6461 15.9989Z" fill="%23A97FF2" /> <path d="M47.6659 11.7352C51.8177 11.7352 54.1632 15.0531 54.1632 19.0714C54.1632 23.0896 51.8177 26.3821 47.6659 26.3821C45.5086 26.3821 43.8589 25.5188 42.9473 24.0545L42.5709 26.052H39.9736V6.77115H43.1884V13.8914C43.971 12.6959 45.5086 11.7352 47.6659 11.7352ZM47.0187 23.5488C49.4446 23.5488 50.9547 21.5809 50.9547 19.0714C50.9547 16.5089 49.4446 14.5664 47.0187 14.5664C44.5928 14.5664 43.0806 16.5047 43.0806 19.0714C43.0806 21.583 44.5653 23.5488 47.0187 23.5488V23.5488Z" fill="white" /> <path d="M65.4595 20.2859V12.0611H68.668V20.123C68.668 23.7202 67.0246 26.3821 62.4943 26.3821C57.9639 26.3821 56.3206 23.7117 56.3206 20.123V12.0611H59.529V20.2859C59.529 22.4696 60.5527 23.5488 62.49 23.5488C64.4274 23.5488 65.4595 22.4696 65.4595 20.2859Z" fill="white" /> <path d="M71.2355 7.74451C71.2247 7.46284 71.2724 7.18199 71.3755 6.91968C71.4787 6.65737 71.6351 6.41929 71.8348 6.22047C72.0345 6.02165 72.2732 5.8664 72.5359 5.76452C72.7986 5.66264 73.0796 5.61633 73.3611 5.62853C74.5793 5.62853 75.4571 6.50666 75.4571 7.75509C75.4571 9.00352 74.5793 9.8224 73.3611 9.8224C72.1428 9.8224 71.2355 8.9612 71.2355 7.74451Z" fill="white" /> <path d="M128.476 7.74451C128.465 7.46376 128.513 7.18383 128.615 6.92227C128.718 6.66071 128.873 6.42315 129.072 6.22449C129.27 6.02583 129.508 5.87035 129.769 5.7678C130.031 5.66524 130.31 5.61783 130.591 5.62852C131.809 5.62852 132.687 6.50666 132.687 7.75509C132.687 9.00352 131.809 9.8224 130.591 9.8224C129.373 9.8224 128.476 8.9612 128.476 7.74451Z" fill="white" /> <path d="M122.302 24.1031C122.291 23.8223 122.339 23.5422 122.441 23.2805C122.543 23.0188 122.699 22.7811 122.897 22.5824C123.096 22.3837 123.334 22.2282 123.595 22.1258C123.857 22.0233 124.137 21.9761 124.417 21.9872C125.636 21.9872 126.513 22.8653 126.513 24.1031C126.513 25.341 125.636 26.1726 124.417 26.1726C123.199 26.1726 122.302 25.3219 122.302 24.1031Z" fill="white" /> <path d="M74.9516 12.059H71.7432V26.0583H74.9516V12.059Z" fill="white" /> <path d="M78.16 26.0583V6.77115H81.3685V26.0626L78.16 26.0583Z" fill="white" /> <path d="M94.6063 6.77115H97.8148V26.0626H95.2239L94.8474 24.0651C93.9591 25.523 92.3094 26.3927 90.131 26.3927C86.0046 26.3927 83.6591 23.0748 83.6591 19.0819C83.6591 15.0891 86.0046 11.7458 90.131 11.7458C92.3137 11.7458 93.8238 12.7149 94.6063 13.902V6.77115ZM90.7993 14.5707C88.3734 14.5707 86.8633 16.5131 86.8633 19.0756C86.8633 21.5851 88.3734 23.553 90.7993 23.553C93.2252 23.553 94.7354 21.5851 94.7354 19.0756C94.7396 16.5047 93.257 14.5664 90.8036 14.5664L90.7993 14.5707Z" fill="white" /> <path d="M113.479 22.2284C112.482 24.7359 110.162 26.3821 107.117 26.3821C102.887 26.3821 100.137 23.225 100.137 19.0439C100.137 14.9706 102.942 11.7353 107.093 11.7353C111.245 11.7353 113.969 14.8902 113.969 18.991C113.982 19.3255 113.953 19.6604 113.883 19.9876H103.288C103.53 22.2009 104.959 23.6292 107.197 23.6292C108.735 23.6292 110.001 22.8738 110.594 21.473L113.479 22.2284ZM103.341 17.6156H110.784C110.513 15.6731 109.166 14.3506 107.089 14.3506C105.012 14.3506 103.665 15.7006 103.341 17.6156V17.6156Z" fill="white" /> <path d="M123.779 14.9452C123.538 14.9117 123.295 14.8933 123.051 14.8902C120.786 14.8902 119.439 16.0772 119.439 18.7751V26.0583H116.23V12.0611H118.821L119.195 14.0014C119.707 13.1127 120.887 11.9257 123.322 11.9257C123.455 11.9257 123.779 11.9532 123.779 11.9532V14.9452Z" fill="white" /> <path d="M132.192 12.059H128.984V26.0583H132.192V12.059Z" fill="white" /> <path d="M134.483 19.0714C134.483 15.1335 137.287 11.7353 141.735 11.7353C146.183 11.7353 149.015 15.1335 149.015 19.0714C149.015 23.0092 146.213 26.3821 141.735 26.3821C137.258 26.3821 134.483 23.0092 134.483 19.0714ZM141.735 23.5488C144.083 23.5488 145.806 21.7692 145.806 19.0714C145.806 16.3735 144.083 14.5664 141.735 14.5664C139.387 14.5664 137.687 16.346 137.687 19.0714C137.687 21.7968 139.417 23.5488 141.735 23.5488V23.5488Z" fill="white" /> </g> <defs> <clipPath id="clip0_4_304"> <rect width="149.015" height="32" fill="white" /> </clipPath> </defs> </svg>');background-repeat:no-repeat;width:150px;height:32px}@media (max-width: 840px){aside{width:250px;padding:60px 0 0 20px}section{left:250px;padding:0 80px}}@media (max-width: 590px){aside{width:230px;padding:60px 0 0 10px}section{left:230px;padding:0 40px}}#modified-files-message a{color:#cbcbcb;font-weight:300;text-decoration:underline}#modified-files-message a:hover{color:#fff;text-decoration:none}#restart-warning{border-radius:4px;padding:8px 16px;border:1px solid #fd6b3c;background:#fd6b3c1a}#react-router-steps{margin:0 0 5px;padding:0 20px}#need-help{color:#48a1ff;text-decoration:none}#router-message{border-radius:4px;padding:16px;border:1px solid #48a1ff}#router-finish-button{margin-top:12px}#router-checkbox-div{display:flex;align-items:center}#router-checkbox{margin-right:10px;width:15px;height:15px}#success-title{display:flex;align-items:center;gap:10px}#success-title .check-icon{display:inline-block;width:24px;height:24px;border:2px solid #28a745;border-radius:50%;position:relative}#success-title .check-icon:before{content:"";position:absolute;top:50%;left:50%;width:6px;height:12px;border:solid #28a745;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}
23
+ \`,t.appendChild(e),setTimeout(()=>{e.classList.add("menu-toggle-tooltip-show"),e.addEventListener("click",()=>{e.classList.remove("menu-toggle-tooltip-show")})},1e3)};function ui(t){t.getElementById("go-to-builder").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),Ee(t,!1),window.open(Nr(),"builder")}),t.getElementById("components-link").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation();let u=t.querySelector(".nav-cmp-list .section-content");u.scrollTop=0,oe(t,"nav-cmp-list"),si(t)}),t.getElementById("settings-link").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),oe(t,"nav-settings")}),t.getElementById("add-page-link").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),Ee(t,!1),window.open(je(),"builder")}),t.getElementById("import-from-figma").addEventListener("click",s=>{s.preventDefault(),s.stopPropagation(),Ee(t,!1),window.open("https://www.figma.com/community/plugin/747985167520967365/builder-io-ai-powered-figma-to-code-react-vue-tailwind-more")})}function ci(t){let e=t.getElementById("enable-edit");e.addEventListener("change",r=>{r.stopPropagation(),Ft(e.checked)}),e.checked=it(),Ft(e.checked)}var At=class extends HTMLElement{constructor(){super()}connectedCallback(){let e=this.attachShadow({mode:"open"});e.innerHTML=\`<style>*,*:before,*:after{box-sizing:border-box}:host{--background-color: rgba(40, 40, 40, 1);--primary-color: rgba(72, 161, 255, 1);--primary-color-subdued: rgb(72, 161, 255, .6);--primary-color-highlight: rgb(126, 188, 255);--primary-contrast-color: white;--edit-color: #1d74e2;--edit-color-highlight: #1c6bd1;--edit-color-alpha: rgb(72, 161, 255, .15);--error-color: #ff2b55;--text-color: white;--text-color-highlight: white;--border-color: #454545;--button-background-color-hover: rgba(255, 255, 255, .1);--menu-width: 320px;--transition-time: .15s;--font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-family:var(--font-family);line-height:1.6}button{cursor:pointer;color:var(--text-color);-webkit-tap-highlight-color:transparent}input,select,button{font-family:var(--font-family)}.menu-toggle{position:absolute;right:0;bottom:0;pointer-events:auto;padding:8px;background:transparent;border:none;appearance:none}.menu-toggle div{position:relative;width:64px;height:64px;pointer-events:none;border-radius:50%;background:#000;border:1px solid white;box-shadow:#00000054 0 0 8px}.menu-toggle:hover div{background-color:var(--background-color);border:1px solid rgb(220,220,220)}.menu-toggle svg{position:absolute;top:15px;left:15px;width:33px;height:32px}div.highlight-bg{position:absolute;top:-1px;left:-1px;background-color:#1a1a1a;pointer-events:none;transition:all .4s ease-out;opacity:0}.menu-toggle-highlight-no-transition div.highlight-bg{transition:none}.menu-toggle-highlight div.highlight-bg{opacity:1}.menu-toggle-tooltip{position:absolute;bottom:0;right:0;width:382px;height:72px;padding:0;text-align:left;appearance:none;background-color:transparent;border:none;pointer-events:none;transform:translate3d(320px,0,0);opacity:0;transition:all .15s ease-in-out;color:#fff}.menu-toggle-tooltip.menu-toggle-tooltip-show{pointer-events:auto;opacity:1;transform:translateZ(0)}.menu-toggle-tooltip-content{position:absolute;inset:0 95px 10px 0;padding:8px 12px;background-color:var(--primary-color);box-shadow:#00000054 0 0 20px;border-radius:2px}.menu-toggle-tooltip-content:before{content:"";position:absolute;bottom:15px;right:-6px;width:30px;height:30px;background-color:var(--primary-color);transform:rotate(45deg)}.menu-toggle-tooltip:hover .menu-toggle-tooltip-content,.menu-toggle-tooltip:hover .menu-toggle-tooltip-content:before{background-color:var(--primary-color-highlight)}.menu-toggle-tooltip-content h3{margin:0;font-size:16px}.menu-toggle-tooltip-content p{margin:0;font-size:12px}section{position:absolute;display:grid;grid-template-rows:64px auto 64px;top:0;left:0;width:100%;height:100%;padding:0;pointer-events:none}.section-content{margin:0;padding:0 0 10px;font-weight:300;transform:translate3d(105%,0,0);transition:transform var(--transition-time) ease-in-out;overflow-y:auto}.section-content .error{color:var(--error-color);font-weight:700}section a{text-decoration:none;color:var(--text-color)}section h3,section p{margin-left:16px;margin-right:16px}.info{font-size:12px}ul.list{list-style:none;padding:0;margin:0}ul.list li{display:block;padding:0;margin:0}ul.list a,ul.list button{display:grid;grid-template-columns:24px auto;grid-gap:16px;padding:12px;margin:8px 0;border:none;background:transparent;appearance:none;width:100%;font-weight:300;text-align:left;text-decoration:none;color:var(--text-color)}ul.list a:hover,ul.list button:hover{text-decoration:none;color:var(--text-color);background-color:var(--button-background-color-hover)}ul.list a span,ul.list button span{display:block;font-size:16px;font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}header{position:relative;display:grid;grid-template-columns:44px 1fr;gap:8px;padding-left:8px;border-bottom:1px solid var(--border-color);transition:opacity var(--transition-time) ease-in-out;opacity:0;pointer-events:none}header>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-home header>div{margin-right:56px}header h2{margin:7px 0 0;font-size:18px;font-weight:500;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header p{margin:2px 0 0;font-size:12px;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header p button{display:block;margin:0;padding:0;width:100%;font-size:12px;font-weight:300;text-decoration:none;appearance:none;text-align:left;background-color:transparent;border:none;color:var(--primary-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header p button:hover{text-decoration:underline;color:var(--primary-color)}.builder-logo{margin:12px 0 0 8px}#close{display:block;position:absolute;appearance:none;background:transparent;border:none;border-radius:50%;margin:0;padding:0;right:4px;top:8px;width:48px;height:48px;z-index:1;opacity:.7}#close:hover{opacity:1;background-color:var(--button-background-color-hover)}#close svg{position:absolute;top:12px;left:12px;width:24px;height:24px;fill:currentColor;pointer-events:none}.back-button{position:relative;display:block;margin:7px 0 0 -2px;width:48px;height:48px;background:transparent;border:none;appearance:none;border-radius:50%}.back-button:hover{background-color:var(--button-background-color-hover)}.back-button svg{position:absolute;top:12px;left:12px;width:24px;height:24px;fill:currentColor;pointer-events:none}footer{border-top:1px solid var(--border-color);transition:opacity var(--transition-time) ease-in-out;opacity:0;pointer-events:none}section.nav-cmp-list{grid-template-rows:64px auto 120px}footer a{text-decoration:underline;color:var(--primary-color)}footer a:hover{color:var(--primary-color);text-decoration:none}.nav-list{padding:2px 0}.nav-loading{pointer-events:none}.nav-loading-icon{position:absolute;display:inline-block;top:170px;left:0;width:100%;transform:translateZ(0);pointer-events:auto;opacity:0;transition:all 50ms ease-in-out;transition-delay:50ms;pointer-events:none}.nav-loading .nav-loading-icon{opacity:.5}.nav-list h4{margin:8px 8px 8px 10px;font-size:14px;font-weight:600}.nav-list .nav-list-item+h4{margin-top:30px}.nav-list-item{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;margin:2px 0;padding:8px 28px 8px 46px;width:100%;font-size:14px;font-weight:300;text-align:left;border:none;background:transparent;appearance:none}.nav-list-item:hover{background-color:var(--button-background-color-hover)}.nav-list-item-icon{position:absolute;top:4px;left:10px;width:24px;height:24px;object-fit:contain;filter:invert(100%);background-size:24px 24px;background-repeat:no-repeat;background-position:center center}.nav-list-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.nav-list-item:after{display:block;position:absolute;content:"";background-image:url('data:image/svg+xml,<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L1 13" stroke="%23F2F2F2" stroke-opacity="0.5" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:12px 9px;top:0;right:0;width:32px;height:32px;pointer-events:none}.nav-list-item-note{opacity:0;font-size:12px;padding-top:1px;text-align:right}.nav-list-item:hover .nav-list-item-note{opacity:.5}.ui-select{display:block;margin:8px 0 16px;padding:8px 16px;cursor:pointer}.ui-select h3{margin:0;font-size:14px;font-weight:500}.ui-select p{margin:8px 0;font-size:12px;font-weight:300}.ui-select .select{position:relative;margin:8px 0;border-radius:4px;padding:0;line-height:1.1;overflow:hidden;border:1px solid var(--border-color)}.ui-select select{appearance:none;background-color:transparent;border:none;outline:none;padding:8px 32px 8px 8px;margin:0;width:100%;font-size:14px;cursor:pointer;text-overflow:ellipsis;opacity:.6;color:var(--text-color)}.ui-select .select:after{content:"";top:6px;right:5px;width:24px;height:24px;position:absolute;background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23F2F2F2" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');background-repeat:no-repeat;background-position:center;pointer-events:none;opacity:.6}.ui-select .select:hover{border-color:var(--primary-color-subdued)}.ui-text-input .select:focus-within{border-color:var(--primary-color)}.ui-text-input .select:focus-within select{opacity:1}.spinner:after{content:" ";display:block;width:32px;height:32px;margin:0 auto;pointer-events:auto;border-radius:50%;border:3px solid var(--text-color);border-color:var(--text-color) transparent var(--text-color) transparent;animation:spinner .75s linear infinite}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-switch{display:grid;grid-template-columns:auto 48px;grid-gap:20px;margin:8px 0 16px;padding:8px 0 8px 16px;cursor:pointer}.ui-switch>*{pointer-events:none}.ui-switch input{display:none;visibility:hidden}.ui-switch .switcher{display:inline-block;border-radius:100px;width:35px;height:14px;background-color:#ccc;position:relative;top:6px;vertical-align:middle;cursor:pointer}.ui-switch input[type=checkbox]:checked+.switcher{background-color:var(--primary-color-subdued)}.ui-switch .switcher:before{content:"";display:block;width:20px;height:20px;background-color:var(--text-color);box-shadow:0 1px 3px #0009;border-radius:50%;position:absolute;top:-3px;left:0;margin-right:0;transition:all .15s}.ui-switch input[type=checkbox]:checked+.switcher:before{left:100%;margin-left:-20px;background-color:var(--primary-color)}.ui-switch h3{margin:0;font-size:14px;font-weight:500}.ui-switch p{margin:4px 0 0;font-size:12px;font-weight:300}.ui-text-input{display:block;margin:8px 0 16px;padding:8px 16px;cursor:pointer}.ui-text-input h3{margin:0;font-size:14px;font-weight:500}.ui-text-input p{margin:8px 0;font-size:12px;font-weight:300}.ui-text-input .input{position:relative;margin:8px 0;border:1px solid var(--border-color);border-radius:4px;background:transparent;padding:2px;overflow:hidden}.ui-text-input input{display:block;width:235px;font-size:14px;border:none;background:transparent;padding:6px;appearance:none;color:var(--text-color);opacity:.6;outline:none}.ui-text-input .input:hover{border-color:var(--primary-color-subdued)}.ui-text-input .input:focus-within{border-color:var(--primary-color)}.ui-text-input .input:focus-within input{opacity:1}.ui-text-input .input:after{content:"";position:absolute;top:5px;right:14px;width:8px;height:17px;border:2px solid rgba(51,181,51,1);border-top:none;border-left:none;transform:rotate(45deg);opacity:0;transition:opacity 80ms ease-in-out;pointer-events:none}.ui-text-input.saved .input:after{opacity:1}.ui-toast{position:fixed;bottom:8px;left:8px;right:8px;padding:6px 12px;font-size:14px;border-radius:4px;transform:translate3d(0,150%,0);opacity:0;transition:all var(--transition-time) ease-in-out;background-color:var(--primary-color-subdued);color:var(--text-color);pointer-events:none}.ui-toast.ui-toast-show{transform:translateZ(0);opacity:1;pointer-events:auto}[data-view=nav-home] .nav-home .section-content,[data-view=nav-cmp-list] .nav-cmp-list .section-content,[data-view=nav-cmp-detail] .nav-cmp-detail .section-content,[data-view=nav-cmp-input] .nav-cmp-input .section-content,[data-view=nav-settings] .nav-settings .section-content{transform:translateZ(0);pointer-events:auto}[data-view=nav-home] .nav-home header,[data-view=nav-home] .nav-home footer,[data-view=nav-cmp-list] .nav-cmp-list header,[data-view=nav-cmp-list] .nav-cmp-list footer,[data-view=nav-cmp-detail] .nav-cmp-detail header,[data-view=nav-cmp-detail] .nav-cmp-detail footer,[data-view=nav-cmp-input] .nav-cmp-input header,[data-view=nav-cmp-input] .nav-cmp-input footer,[data-view=nav-settings] .nav-settings header,[data-view=nav-settings] .nav-settings footer{opacity:1;pointer-events:auto}[data-view=nav-cmp-list] .nav-home .section-content,[data-view=nav-cmp-detail] .nav-home .section-content,[data-view=nav-cmp-detail] .nav-cmp-list .section-content,[data-view=nav-cmp-input] .nav-home .section-content,[data-view=nav-cmp-input] .nav-cmp-list .section-content,[data-view=nav-cmp-input] .nav-cmp-detail .section-content,[data-view=nav-settings] .nav-home .section-content{transform:translate3d(-105%,0,0)}.cmp-item .nav-list-item-icon{background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.83 16.809C20.94 16.561 21 16.289 21 16.008V7.99001C20.9994 7.64108 20.9066 7.29851 20.731 6.99699C20.5554 6.69547 20.3032 6.44571 20 6.27301L13 2.26501C12.6954 2.09103 12.3508 1.99951 12 1.99951C11.6492 1.99951 11.3046 2.09103 11 2.26501L7.988 3.99001M5.441 5.44801L4 6.27301C3.381 6.62801 3 7.28301 3 7.99101V16.009C3 16.718 3.381 17.372 4 17.726L11 21.734C11.3046 21.908 11.6492 21.9995 12 21.9995C12.3508 21.9995 12.6954 21.908 13 21.734L18.544 18.56" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22V12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.532 10.538L20.73 6.95996" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.27002 6.95996L12 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 3L21 21" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');opacity:.3}.cmp-item.registered .nav-list-item-icon{background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 16.008V7.99001C20.9994 7.64108 20.9066 7.29851 20.731 6.99699C20.5554 6.69547 20.3032 6.44571 20 6.27301L13 2.26501C12.6954 2.09103 12.3508 1.99951 12 1.99951C11.6492 1.99951 11.3046 2.09103 11 2.26501L4 6.27301C3.381 6.62801 3 7.28301 3 7.99101V16.009C3 16.718 3.381 17.372 4 17.726L11 21.734C11.3046 21.908 11.6492 21.9995 12 21.9995C12.3508 21.9995 12.6954 21.908 13 21.734L20 17.726C20.619 17.371 21 16.716 21 16.008Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 22V12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 12L20.73 6.95996" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3.26999 6.95996L12 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>');opacity:.8}.search-highlight{background-color:var(--primary-color-alpha);padding:0 2px;border-radius:2px;font-weight:500}.search-container{position:sticky;top:0;z-index:10;padding:12px 16px;background:var(--background-color);border-bottom:1px solid var(--border-color)}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:12px;color:var(--text-color-secondary);pointer-events:none}.component-search-input{width:100%;height:36px;padding:8px 36px;border:1px solid var(--border-color);border-radius:6px;background:var(--input-background);color:var(--text-color);font-size:14px;transition:border-color .2s,box-shadow .2s}.component-search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color-alpha)}.component-search-input::placeholder{color:var(--text-color-tertiary)}.clear-search-button{position:absolute;right:8px;padding:4px;color:var(--text-color-secondary);border:none;background:transparent;border-radius:4px;cursor:pointer;opacity:0;transition:opacity .2s,background-color .2s;display:flex;align-items:center;justify-content:center}.clear-search-button:hover{background-color:var(--hover-color)}.component-search-input:not(:placeholder-shown)+.clear-search-button{opacity:1}.no-results{padding:32px 16px;text-align:center;color:var(--text-color-secondary);font-size:14px}#cmp-detail{position:relative}.cmp-loading{pointer-events:none!important}.cmp-loading-icon{position:absolute;display:inline-block;top:170px;left:0;width:100%;transform:translateZ(0);pointer-events:auto;opacity:0;transition:all 50ms ease-in-out;transition-delay:50ms;pointer-events:none}.cmp-loading .cmp-loading-icon{opacity:.5}.cmp-cover{position:absolute;top:160px;left:0;width:100%;height:100vh;background:var(--background-color);transform:translateZ(0);pointer-events:none;display:none}[data-view=nav-cmp-detail] .cmp-cover{display:block;pointer-events:auto}.cmp-enabled .cmp-cover{transform:translate3d(0,105%,0);pointer-events:none}.section-ready .cmp-cover{transition:all var(--transition-time) ease-in-out}.cmp-detail-inputs-container{margin:8px 0 16px;padding:0}.cmp-detail-inputs-container h3{margin:0 0 6px;padding-left:16px;padding-right:8px;font-size:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center}.cmp-detail-inputs-reload{font-weight:300;font-size:.9em;text-decoration:none;appearance:none;text-align:left;background-color:transparent;border:none;color:var(--primary-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmp-detail-inputs-reload:hover{text-decoration:underline;color:var(--primary-color)}.cmp-detail-inputs-container .cmp-inputs-empty{padding:0;margin-top:12px;font-size:12px;font-weight:300;opacity:.5;font-style:italic}.cmp-detail-inputs-container .nav-list-item-icon{opacity:.8;background-size:20px 20px;background-position:4px center}.input-icon{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>')}.input-icon-array{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 16v-6a2 2 0 1 1 4 0v6"></path> <path d="M10 13h4"></path></svg>')}.input-icon-boolean{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 16h2a2 2 0 1 0 0 -4h-2h2a2 2 0 1 0 0 -4h-2v8z"></path></svg>')}.input-icon-number{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 16v-8l4 8v-8"></path></svg>')}.input-icon-object{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M12 8a2 2 0 0 1 2 2v4a2 2 0 1 1 -4 0v-4a2 2 0 0 1 2 -2z"></path></svg>')}.input-icon-string{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path> <path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1"></path></svg>')}.cmp-input-item-unregistered{opacity:.4}.cmp-input-item-unregistered .input-icon:after{content:"";position:absolute;top:11px;left:4px;width:20px;height:2px;background-color:#000;transform:rotate(-45deg)}.cmp-prop-info{border-bottom:1px solid var(--border-color)}.cmp-input-readonly{margin:16px 0;padding:0 16px;display:grid;grid-template-columns:50% 50%;gap:12px}.cmp-input-readonly h3{margin:0;font-size:14px;font-weight:500}.cmp-input-readonly span{margin-top:2px;font-size:12px;font-weight:300;opacity:.8}.cmp-input-detail{margin:16px 0}.cmp-input-detail a{color:var(--primary-color);text-decoration:none}.cmp-input-detail a:hover{text-decoration:underline}.input-cover{position:absolute;top:175px;left:0;width:100%;height:100%;background:var(--background-color);transform:translateZ(0);transition:all var(--transition-time) ease-in-out;pointer-events:auto}.input-enabled .input-cover{transform:translate3d(0,105%,0);pointer-events:none}.input-loading-icon{position:absolute;display:inline-block;top:190px;left:0;width:100%;transform:translateZ(0);pointer-events:auto;opacity:0;transition:all 50ms ease-in-out;transition-delay:50ms;pointer-events:none}.input-loading .input-loading-icon{opacity:.5}:host{position:fixed;inset:0;z-index:2147483646;user-select:none;pointer-events:none;color:var(--text-color)}aside{position:absolute;top:0;right:0;width:var(--menu-width);height:100%;transform:translate3d(105%,0,0);transition:transform var(--transition-time) ease-in-out;background:var(--background-color);box-shadow:#000000c9 5px 0 20px;overflow:hidden;z-index:1}:host(.show-builder-menu) aside{pointer-events:auto;transform:translateZ(0)}#hit{position:absolute;inset:0;display:none}:host(.show-builder-menu) #hit{display:block;pointer-events:auto}#version{position:absolute;bottom:6px;right:6px;font-size:8px;color:#9b9b9b}</style><div id="hit"></div> <aside data-view="nav-home"> <section class="nav-home"> <header> <svg class="builder-logo" viewBox="0 0 31 36" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M31 9.96854C31.0016 11.4553 30.6701 12.9236 30.03 14.2654C29.3898 15.6072 28.4572 16.7884 27.3007 17.7221L0.702841 2.61812C0.601104 2.56012 0.506714 2.49008 0.421705 2.40951C0.288323 2.27871 0.182333 2.12263 0.109928 1.95039C0.0375215 1.77814 0.000151253 1.59319 0 1.40633C0 1.03335 0.148098 0.675643 0.411715 0.411905C0.675332 0.148167 1.03287 0 1.40568 0L21.036 0C23.6786 0 26.213 1.05025 28.0816 2.91972C29.9502 4.78918 31 7.32472 31 9.96854Z" fill="#18B4F4" /> <path d="M31 25.4757C31.0004 26.7849 30.7429 28.0815 30.2423 29.2912C29.7417 30.5009 29.0078 31.6001 28.0825 32.526C27.1572 33.4519 26.0587 34.1864 24.8497 34.6875C23.6406 35.1886 22.3448 35.4465 21.0361 35.4465H1.40573C1.12766 35.4436 0.856725 35.3581 0.627199 35.201C0.397672 35.044 0.219871 34.8223 0.116289 34.5641C0.0127078 34.3059 -0.011999 34.0228 0.0452946 33.7505C0.102588 33.4783 0.239308 33.2292 0.438156 33.0347C0.517415 32.9551 0.606358 32.8858 0.702893 32.8284L11.1705 26.8843L27.2984 17.7244C28.4548 18.6579 29.3874 19.8387 30.028 21.18C30.6685 22.5213 31.0007 23.9891 31 25.4757Z" fill="#FD6B3C" /> <path d="M27.3011 17.7221L11.1709 26.8843L0.703209 32.8284C0.602697 32.8843 0.509784 32.9528 0.426758 33.0323C4.41799 28.9369 6.6496 23.442 6.64456 17.7221C6.65208 12.0015 4.42111 6.50517 0.429101 2.40948C0.51411 2.49005 0.6085 2.56009 0.710237 2.61809L27.3011 17.7221Z" fill="#A97FF2" /> </svg> <div> <h2 class="builder-home-title">Builder Devtools</h2> <p><button id="go-to-builder">Go to Builder</button></p> </div> <button id="close" aria-label="Close Menu"> <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M18 6l-12 12" /> <path d="M6 6l12 12" /> </svg> </button> </header> <div class="section-content"> <ul class="list"> <li> <button id="components-link"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M21 16.008V7.99001C20.9994 7.64108 20.9066 7.29851 20.731 6.99699C20.5554 6.69547 20.3032 6.44571 20 6.27301L13 2.26501C12.6954 2.09103 12.3508 1.99951 12 1.99951C11.6492 1.99951 11.3046 2.09103 11 2.26501L4 6.27301C3.381 6.62801 3 7.28301 3 7.99101V16.009C3 16.718 3.381 17.372 4 17.726L11 21.734C11.3046 21.908 11.6492 21.9995 12 21.9995C12.3508 21.9995 12.6954 21.908 13 21.734L20 17.726C20.619 17.371 21 16.716 21 16.008Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 22V12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 12L20.73 6.95996" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3.26999 6.95996L12 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>Components</span> </button> </li> <li> <button id="settings-link"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.439 10.751 21.439 13.249 19.683 13.675C19.4192 13.7389 19.1742 13.8642 18.968 14.0407C18.7618 14.2172 18.6001 14.4399 18.4963 14.6907C18.3924 14.9414 18.3491 15.2132 18.3701 15.4838C18.3911 15.7544 18.4757 16.0162 18.617 16.248C19.557 17.791 17.791 19.558 16.247 18.618C16.0153 18.4769 15.7537 18.3924 15.4832 18.3715C15.2128 18.3506 14.9412 18.3938 14.6906 18.4975C14.44 18.6013 14.2174 18.7627 14.0409 18.9687C13.8645 19.1747 13.7391 19.4194 13.675 19.683C13.249 21.439 10.751 21.439 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>Settings</span> </button> </li> <li> <button id="add-page-link"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M14 3v4a1 1 0 0 0 1 1h4" /> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /> <path d="M12 11l0 6" /> <path d="M9 14l6 0" /> </svg> <span>Add Builder Page</span> </button> </li> <li> <button id="import-from-figma"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-figma" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M15 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M6 3m0 3a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3v0a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3z" /> <path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15" /> </svg> <span>Import From Figma</span> </button> </li> </ul> </div> <footer> <ul class="list"> <li> <a href="https://docs.google.com/forms/d/e/1FAIpQLSdqZcJpRtm_Ia5DTHP6SDY9Xa6LID3KiTjRWkjMzWyJRUtSHw/viewform" target="_blank" > <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M11.013 17.0114L10.013 18.0114L2.513 10.5834C2.0183 10.102 1.62864 9.52342 1.36854 8.88404C1.10845 8.24466 0.983558 7.55836 1.00173 6.86834C1.01991 6.17832 1.18076 5.49954 1.47415 4.87474C1.76755 4.24994 2.18713 3.69266 2.70648 3.23799C3.22583 2.78331 3.8337 2.4411 4.49181 2.23289C5.14991 2.02468 5.844 1.95499 6.53036 2.02821C7.21673 2.10143 7.8805 2.31596 8.47987 2.65831C9.07925 3.00066 9.60124 3.46341 10.013 4.01741C10.8086 2.95654 11.9931 2.2552 13.3059 2.06766C14.6186 1.88012 15.9521 2.22176 17.013 3.01741C18.0739 3.81306 18.7752 4.99755 18.9627 6.3103C19.1503 7.62305 18.8086 8.95654 18.013 10.0174" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M18.2006 19.8175L16.0286 20.9555C15.9642 20.989 15.8917 21.004 15.8192 20.9987C15.7467 20.9934 15.6771 20.9681 15.6182 20.9256C15.5593 20.8831 15.5134 20.825 15.4855 20.7579C15.4577 20.6907 15.4491 20.6172 15.4606 20.5455L15.8756 18.1345L14.1186 16.4275C14.0662 16.3768 14.0291 16.3123 14.0115 16.2416C13.9939 16.1708 13.9966 16.0965 14.0192 16.0271C14.0418 15.9578 14.0835 15.8962 14.1394 15.8494C14.1954 15.8026 14.2634 15.7725 14.3356 15.7625L16.7636 15.4105L17.8496 13.2175C17.8821 13.1521 17.9322 13.0972 17.9942 13.0588C18.0562 13.0204 18.1277 13 18.2006 13C18.2736 13 18.3451 13.0204 18.4071 13.0588C18.4691 13.0972 18.5191 13.1521 18.5516 13.2175L19.6376 15.4105L22.0656 15.7625C22.1377 15.7728 22.2054 15.8031 22.2611 15.85C22.3168 15.8968 22.3583 15.9583 22.3809 16.0275C22.4034 16.0967 22.4062 16.1708 22.3888 16.2415C22.3715 16.3122 22.3347 16.3766 22.2826 16.4275L20.5256 18.1345L20.9396 20.5445C20.9521 20.6163 20.9441 20.6902 20.9166 20.7578C20.8891 20.8254 20.8433 20.8839 20.7842 20.9267C20.7252 20.9695 20.6553 20.9949 20.5825 21C20.5098 21.005 20.4371 20.9896 20.3726 20.9555L18.2006 19.8175Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> <span>Give Feedback</span> </a> </li> </ul> <div id="version"></div> </footer> </section> <section class="nav-cmp-list"> <header> <button class="back-button"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div class="search-container"> <div class="search-input-wrapper"> <svg class="search-icon" viewBox="0 0 24 24" width="16" height="16"> <path fill="none" stroke="currentColor" stroke-width="2" d="M15.5 15.5L20 20M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z" /> </svg> <input type="text" id="component-search" class="component-search-input" placeholder="Search components..." autocomplete="off" spellcheck="false" /> <button id="clear-search" class="clear-search-button" type="button" aria-label="Clear search" > <svg viewBox="0 0 24 24" width="16" height="16"> <path fill="none" stroke="currentColor" stroke-width="2" d="M6 6l12 12M6 18L18 6" /> </svg> </button> </div> </div> <div> <h2>Custom Components</h2> <p> <button id="open-builder-registry"></button> </p> </div> </header> <div class="section-content"> <div id="cmp-list" class="cmp-list nav-list"></div> </div> <div class="nav-loading-icon spinner"></div> <footer> <p class="info"> Expand on Builder's selection of built-in blocks by <a target="_blank" href="https://www.builder.io/c/docs/custom-components-intro" >registering components</a > from your codebase. This way, teammates can drag and drop your components within Builder's Visual Editor just like any other block. </p> </footer> </section> <section class="nav-cmp-detail"> <header> <button class="back-button" data-back="nav-cmp-list"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div> <h2 id="cmp-detail-title"></h2> <p> <button id="cmp-open-source"></button> </p> </div> </header> <div class="section-content"> <div id="cmp-error"></div> <label class="ui-switch"> <div> <h3>Register Component</h3> <p> Registers this component so it can be used within Builder Visual CMS </p> </div> <input type="checkbox" role="switch" id="cmp-register" /> <span class="switcher"></span> </label> <div id="cmp-detail"> <label class="ui-text-input"> <h3>Component Name</h3> <div class="input"> <input type="text" id="cmp-name" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off" minlength="2" maxlength="30" required placeholder="e.g. My Counter" /> </div> <p> Unique name to identify this custom component within Builder. Press ESC to cancel </p> </label> <div class="cmp-detail-inputs-container"> <h3> <span>Builder Inputs (Props)</span> <button class="cmp-detail-inputs-reload" id="btn-inputs-reload"> Reload </button> </h3> <div id="cmp-detail-inputs"></div> </div> </div> </div> <div class="cmp-cover"></div> <div class="cmp-loading-icon spinner"></div> </section> <section class="nav-cmp-input"> <header> <button class="back-button" data-back="nav-cmp-detail"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div> <h2 id="cmp-input-title"></h2> <p> <button id="input-open-source"></button> </p> </div> </header> <div class="section-content"> <label class="ui-switch"> <div> <h3>Enable Input</h3> <p>Add this component prop as a Builder input</p> </div> <input type="checkbox" role="switch" id="input-register" /> <span class="switcher"></span> </label> <div class="cmp-prop-info"> <div class="cmp-input-readonly"> <h3>Prop Name</h3> <span id="cmp-prop-name"></span> </div> <div class="cmp-input-readonly"> <h3>Prop Type</h3> <span id="cmp-prop-type"></span> </div> </div> <div class="cmp-input-detail"> <label class="ui-text-input"> <h3>Builder Input Name</h3> <div class="input"> <input type="text" id="input-name" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off" minlength="1" maxlength="30" required placeholder="e.g. Text" /> </div> <p> Friendly name to identify this component prop as a Builder input. Press ESC to cancel </p> </label> <label class="ui-select"> <h3>Builder Input Type</h3> <div class="select"> <select id="input-type"></select> </div> <p> Correlate to what editing UI is appropriate for this Builder input. <a href="https://www.builder.io/c/docs/custom-components-input-types" target="_blank" >Read more about input types.</a > </p> </label> </div> <div class="input-cover"></div> <div class="input-loading-icon spinner"></div> </div> </section> <section class="nav-settings"> <header> <button class="back-button"> <svg viewBox="0 0 24 24"> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> </svg> </button> <div> <h2>Settings</h2> <p>Configure Builder's Devtools</p> </div> </header> <div class="section-content"> <label class="ui-switch"> <div> <h3>Enable edit button in UI</h3> <p>Enables the edit button so you can edit content in Builder</p> </div> <input type="checkbox" role="switch" id="enable-edit" /> <span class="switcher"></span> </label> </div> </section> <div class="ui-toast" id="toast"></div> </aside> <button class="menu-toggle" aria-label="Toggle Builder Devtools"> <div> <div class="highlight-bg"></div> <svg viewBox="0 0 31 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M31 9.96854C31.0016 11.4553 30.6701 12.9236 30.03 14.2654C29.3898 15.6072 28.4572 16.7884 27.3007 17.7221L0.702841 2.61812C0.601104 2.56012 0.506714 2.49008 0.421705 2.40951C0.288323 2.27871 0.182333 2.12263 0.109928 1.95039C0.0375215 1.77814 0.000151253 1.59319 0 1.40633C0 1.03335 0.148098 0.675643 0.411715 0.411905C0.675332 0.148167 1.03287 0 1.40568 0L21.036 0C23.6786 0 26.213 1.05025 28.0816 2.91972C29.9502 4.78918 31 7.32472 31 9.96854Z" fill="#18B4F4" /> <path d="M31 25.4757C31.0004 26.7849 30.7429 28.0815 30.2423 29.2912C29.7417 30.5009 29.0078 31.6001 28.0825 32.526C27.1572 33.4519 26.0587 34.1864 24.8497 34.6875C23.6406 35.1886 22.3448 35.4465 21.0361 35.4465H1.40573C1.12766 35.4436 0.856725 35.3581 0.627199 35.201C0.397672 35.044 0.219871 34.8223 0.116289 34.5641C0.0127078 34.3059 -0.011999 34.0228 0.0452946 33.7505C0.102588 33.4783 0.239308 33.2292 0.438156 33.0347C0.517415 32.9551 0.606358 32.8858 0.702893 32.8284L11.1705 26.8843L27.2984 17.7244C28.4548 18.6579 29.3874 19.8387 30.028 21.18C30.6685 22.5213 31.0007 23.9891 31 25.4757Z" fill="#FD6B3C" /> <path d="M27.3011 17.7221L11.1709 26.8843L0.703209 32.8284C0.602697 32.8843 0.509784 32.9528 0.426758 33.0323C4.41799 28.9369 6.6496 23.442 6.64456 17.7221C6.65208 12.0015 4.42111 6.50517 0.429101 2.40948C0.51411 2.49005 0.6085 2.56009 0.710237 2.61809L27.3011 17.7221Z" fill="#A97FF2" /> </svg> </div> </button>\`,ai(e),ui(e),oi(e),ri(e),ti(e),ci(e),this.setAttribute("aria-hidden","true"),e.getElementById("version").textContent="v1.18.34"}highlightOpener(){let e=this.shadowRoot.querySelector(".menu-toggle");e.classList.add("menu-toggle-highlight"),e.classList.add("menu-toggle-highlight-no-transition"),setTimeout(()=>{e.classList.remove("menu-toggle-highlight-no-transition"),setTimeout(()=>{e.classList.remove("menu-toggle-highlight")},20)},20)}};var lo=\`<style>*,*:before,*:after{box-sizing:border-box}html,body,:host{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:2147483646;margin:0;padding:0;line-height:1.8;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";background-color:#252525;color:#fff;transition:opacity .25s ease-in-out}:host([aria-hidden="true"]){opacity:0;pointer-events:none}main{position:absolute;top:0;left:0;width:100%;height:100vh}h1{margin-top:0;font-size:24px;font-weight:300;line-height:1.4}p{margin:20px 0;font-weight:300}button{cursor:pointer}aside{position:absolute;top:0;left:0;width:350px;height:100vh;padding:60px 0 0 50px;background-color:#121212}aside ul{margin:30px 0 0;padding:0;list-style:none}aside li{position:relative;margin:0;padding:20px 10px;font-weight:300}aside li.highlight{color:#48a1ff}aside li.active{font-weight:700}aside li .circle{position:absolute;top:20px;left:10px;width:24px;height:24px;border:3px solid white;border-radius:50%;font-size:14px}aside li.highlight .circle{border-color:#48a1ff}aside li.active .circle:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background-color:#48a1ff}aside li.completed .circle{background-color:#48a1ff}aside li.completed .circle:after{content:"";position:absolute;top:2px;left:6px;width:6px;height:13px;border:3px solid black;border-top:none;border-left:none;transform:rotate(45deg)}aside li .line{position:absolute;top:44px;left:21px;width:3px;height:45px;background-color:#fff}aside li.completed .line{background-color:#48a1ff}aside li span{display:block;margin-left:44px}nav{margin-top:30px}section{position:absolute;top:135px;left:350px;padding:0 80px 0 140px;transition:opacity .15s ease-in-out}section[aria-hidden=true]{pointer-events:none;opacity:0}section h1,section p{min-width:300px;max-width:600px}.button{position:relative;display:inline-block;color:#fff;background-color:#48a1ff;border-radius:4px;text-decoration:none;padding:10px 40px 10px 20px;white-space:nowrap}.button:hover{background-color:#48a1ffd9}#button-icon{position:absolute;top:1px;right:5px;bottom:0;width:30px;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="square" stroke-miterlimit="10" stroke-width="48" d="M184 112l144 144-144 144"/></svg>');background-repeat:no-repeat;background-position:center;background-size:24px 24px}.button[aria-disabled=true]{opacity:.9;background-color:#ffffff4d;pointer-events:none;padding-right:60px}.button[aria-disabled=true] #button-icon{top:21px;right:29px;width:8px;height:8px;border-radius:4px;background:#fff;color:#fff;animation:dot-flashing .5s infinite linear alternate;animation-delay:.25s}.button[aria-disabled=true] #button-icon:before,.button[aria-disabled=true] #button-icon:after{content:"";display:inline-block;position:absolute;top:0}.button[aria-disabled=true] #button-icon:before{left:-12px;width:8px;height:8px;border-radius:4px;background-color:#fff;color:#fff;animation:dot-flashing .5s infinite alternate;animation-delay:0s}.button[aria-disabled=true] #button-icon:after{left:12px;width:8px;height:8px;border-radius:4px;background-color:#fff;color:#fff;animation:dot-flashing .5s infinite alternate;animation-delay:.5s}@keyframes dot-flashing{0%{background-color:#fff}50%,to{background-color:#ffffff4d}}.logo{margin-left:9px;background:url('data:image/svg+xml,<svg viewBox="0 0 150 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(%23clip0_4_304)"> <path d="M27.9858 8.99927C27.9872 10.3415 27.688 11.667 27.1101 12.8783C26.5321 14.0896 25.6902 15.156 24.6462 15.9989V15.9989L0.634502 2.36355C0.542657 2.31119 0.457444 2.24796 0.380701 2.17523C0.260289 2.05715 0.164605 1.91624 0.0992389 1.76075C0.0338732 1.60525 0.000136546 1.43828 0 1.26959C0 0.932873 0.133698 0.609948 0.371683 0.371854C0.609667 0.13376 0.932443 0 1.269 0L18.9906 0C21.3763 0 23.6642 0.948135 25.3512 2.63583C27.0381 4.32352 27.9858 6.61252 27.9858 8.99927V8.99927Z" fill="%2318B4F4" /> <path d="M27.9858 22.9986C27.9861 24.1806 27.7536 25.351 27.3017 26.4431C26.8498 27.5352 26.1873 28.5275 25.352 29.3634C24.5167 30.1993 23.5249 30.8624 22.4335 31.3147C21.342 31.7671 20.1721 32 18.9907 32H1.26906C1.01802 31.9973 0.77343 31.9202 0.566221 31.7784C0.359012 31.6366 0.198499 31.4364 0.104989 31.2034C0.0114791 30.9703 -0.0108254 30.7147 0.0408974 30.4689C0.0926201 30.2231 0.216046 29.9982 0.395559 29.8226V29.8226C0.467112 29.7508 0.547407 29.6882 0.634555 29.6364L10.0844 24.2703L24.6441 16.001C25.688 16.8438 26.53 17.9097 27.1083 19.1206C27.6866 20.3315 27.9864 21.6566 27.9858 22.9986V22.9986Z" fill="%23FD6B3C" /> <path d="M24.6461 15.9989L10.0843 24.2703L0.634458 29.6365C0.54372 29.6868 0.459841 29.7487 0.384888 29.8205C3.98804 26.1233 6.00266 21.1627 5.99812 15.9989C6.0049 10.8346 3.99085 5.87268 0.387003 2.17523C0.463746 2.24796 0.548959 2.31119 0.640803 2.36355L24.6461 15.9989Z" fill="%23A97FF2" /> <path d="M47.6659 11.7352C51.8177 11.7352 54.1632 15.0531 54.1632 19.0714C54.1632 23.0896 51.8177 26.3821 47.6659 26.3821C45.5086 26.3821 43.8589 25.5188 42.9473 24.0545L42.5709 26.052H39.9736V6.77115H43.1884V13.8914C43.971 12.6959 45.5086 11.7352 47.6659 11.7352ZM47.0187 23.5488C49.4446 23.5488 50.9547 21.5809 50.9547 19.0714C50.9547 16.5089 49.4446 14.5664 47.0187 14.5664C44.5928 14.5664 43.0806 16.5047 43.0806 19.0714C43.0806 21.583 44.5653 23.5488 47.0187 23.5488V23.5488Z" fill="white" /> <path d="M65.4595 20.2859V12.0611H68.668V20.123C68.668 23.7202 67.0246 26.3821 62.4943 26.3821C57.9639 26.3821 56.3206 23.7117 56.3206 20.123V12.0611H59.529V20.2859C59.529 22.4696 60.5527 23.5488 62.49 23.5488C64.4274 23.5488 65.4595 22.4696 65.4595 20.2859Z" fill="white" /> <path d="M71.2355 7.74451C71.2247 7.46284 71.2724 7.18199 71.3755 6.91968C71.4787 6.65737 71.6351 6.41929 71.8348 6.22047C72.0345 6.02165 72.2732 5.8664 72.5359 5.76452C72.7986 5.66264 73.0796 5.61633 73.3611 5.62853C74.5793 5.62853 75.4571 6.50666 75.4571 7.75509C75.4571 9.00352 74.5793 9.8224 73.3611 9.8224C72.1428 9.8224 71.2355 8.9612 71.2355 7.74451Z" fill="white" /> <path d="M128.476 7.74451C128.465 7.46376 128.513 7.18383 128.615 6.92227C128.718 6.66071 128.873 6.42315 129.072 6.22449C129.27 6.02583 129.508 5.87035 129.769 5.7678C130.031 5.66524 130.31 5.61783 130.591 5.62852C131.809 5.62852 132.687 6.50666 132.687 7.75509C132.687 9.00352 131.809 9.8224 130.591 9.8224C129.373 9.8224 128.476 8.9612 128.476 7.74451Z" fill="white" /> <path d="M122.302 24.1031C122.291 23.8223 122.339 23.5422 122.441 23.2805C122.543 23.0188 122.699 22.7811 122.897 22.5824C123.096 22.3837 123.334 22.2282 123.595 22.1258C123.857 22.0233 124.137 21.9761 124.417 21.9872C125.636 21.9872 126.513 22.8653 126.513 24.1031C126.513 25.341 125.636 26.1726 124.417 26.1726C123.199 26.1726 122.302 25.3219 122.302 24.1031Z" fill="white" /> <path d="M74.9516 12.059H71.7432V26.0583H74.9516V12.059Z" fill="white" /> <path d="M78.16 26.0583V6.77115H81.3685V26.0626L78.16 26.0583Z" fill="white" /> <path d="M94.6063 6.77115H97.8148V26.0626H95.2239L94.8474 24.0651C93.9591 25.523 92.3094 26.3927 90.131 26.3927C86.0046 26.3927 83.6591 23.0748 83.6591 19.0819C83.6591 15.0891 86.0046 11.7458 90.131 11.7458C92.3137 11.7458 93.8238 12.7149 94.6063 13.902V6.77115ZM90.7993 14.5707C88.3734 14.5707 86.8633 16.5131 86.8633 19.0756C86.8633 21.5851 88.3734 23.553 90.7993 23.553C93.2252 23.553 94.7354 21.5851 94.7354 19.0756C94.7396 16.5047 93.257 14.5664 90.8036 14.5664L90.7993 14.5707Z" fill="white" /> <path d="M113.479 22.2284C112.482 24.7359 110.162 26.3821 107.117 26.3821C102.887 26.3821 100.137 23.225 100.137 19.0439C100.137 14.9706 102.942 11.7353 107.093 11.7353C111.245 11.7353 113.969 14.8902 113.969 18.991C113.982 19.3255 113.953 19.6604 113.883 19.9876H103.288C103.53 22.2009 104.959 23.6292 107.197 23.6292C108.735 23.6292 110.001 22.8738 110.594 21.473L113.479 22.2284ZM103.341 17.6156H110.784C110.513 15.6731 109.166 14.3506 107.089 14.3506C105.012 14.3506 103.665 15.7006 103.341 17.6156V17.6156Z" fill="white" /> <path d="M123.779 14.9452C123.538 14.9117 123.295 14.8933 123.051 14.8902C120.786 14.8902 119.439 16.0772 119.439 18.7751V26.0583H116.23V12.0611H118.821L119.195 14.0014C119.707 13.1127 120.887 11.9257 123.322 11.9257C123.455 11.9257 123.779 11.9532 123.779 11.9532V14.9452Z" fill="white" /> <path d="M132.192 12.059H128.984V26.0583H132.192V12.059Z" fill="white" /> <path d="M134.483 19.0714C134.483 15.1335 137.287 11.7353 141.735 11.7353C146.183 11.7353 149.015 15.1335 149.015 19.0714C149.015 23.0092 146.213 26.3821 141.735 26.3821C137.258 26.3821 134.483 23.0092 134.483 19.0714ZM141.735 23.5488C144.083 23.5488 145.806 21.7692 145.806 19.0714C145.806 16.3735 144.083 14.5664 141.735 14.5664C139.387 14.5664 137.687 16.346 137.687 19.0714C137.687 21.7968 139.417 23.5488 141.735 23.5488V23.5488Z" fill="white" /> </g> <defs> <clipPath id="clip0_4_304"> <rect width="149.015" height="32" fill="white" /> </clipPath> </defs> </svg>');background-repeat:no-repeat;width:150px;height:32px}@media (max-width: 840px){aside{width:250px;padding:60px 0 0 20px}section{left:250px;padding:0 80px}}@media (max-width: 590px){aside{width:230px;padding:60px 0 0 10px}section{left:230px;padding:0 40px}}#modified-files-message a{color:#cbcbcb;font-weight:300;text-decoration:underline}#modified-files-message a:hover{color:#fff;text-decoration:none}#restart-warning{border-radius:4px;padding:8px 16px;border:1px solid #fd6b3c;background:#fd6b3c1a}#react-router-steps{margin:0 0 5px;padding:0 20px}#need-help{color:#48a1ff;text-decoration:none}#router-message{border-radius:4px;padding:16px;border:1px solid #48a1ff}#router-finish-button{margin-top:12px}#router-checkbox-div{display:flex;align-items:center}#router-checkbox{margin-right:10px;width:15px;height:15px}#success-title{display:flex;align-items:center;gap:10px}#success-title .check-icon{display:inline-block;width:24px;height:24px;border:2px solid #28a745;border-radius:50%;position:relative}#success-title .check-icon:before{content:"";position:absolute;top:50%;left:50%;width:6px;height:12px;border:solid #28a745;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}
24
24
  </style>\`,Dt=class extends HTMLElement{constructor(){super()}connectedCallback(){let e=this.attachShadow({mode:"open"});e.innerHTML=lo+\`<main>
25
25
  <aside>
26
26
  <div class="logo"></div>
@@ -59,7 +59,7 @@ Restarting server after Builder Devtools update...
59
59
  </nav>
60
60
  </section>
61
61
  </main>
62
- \`,po();let r=new URL(Vr,ot);r.searchParams.set(Mr,location.href);let n=e.querySelectorAll(".next-step");for(let i of n)i.setAttribute("href",r.href);ye("overview step viewed")}},po=()=>{let t=document.head.querySelector("link[rel='icon'], link[rel='icon shortcut']");t?(t.href="https://cdn.builder.io/favicon.ico",t.removeAttribute("type")):(t=document.createElement("link"),t.rel="icon",t.href="https://cdn.builder.io/favicon.ico",document.head.appendChild(t))};var li=async()=>{(await qr()).isValid||fo()},fo=()=>{customElements.get("builder-dev-tools-overview")||customElements.define("builder-dev-tools-overview",Dt);let t=document.querySelector("builder-dev-tools-overview");t||(t=document.createElement("builder-dev-tools-overview"),t.setAttribute("aria-hidden","true"),document.body.appendChild(t)),setTimeout(()=>{t.removeAttribute("aria-hidden")},32)};var mo=()=>{try{customElements.get("builder-dev-tools-edit")||customElements.define("builder-dev-tools-edit",st),customElements.get("builder-dev-tools-menu")||customElements.define("builder-dev-tools-menu",At);let t=document.querySelector("builder-dev-tools-menu");t||(t=document.createElement("builder-dev-tools-menu"),t.setAttribute("data-version","1.18.31"),document.body.appendChild(t));let e=document.querySelector("builder-dev-tools-edit");e||(e=document.createElement("builder-dev-tools-edit"),document.body.appendChild(e));let r=document.getElementById("builder-dev-tools-style");r||(r=document.createElement("style"),r.id="builder-dev-tools-style",r.innerHTML=".builder-no-scroll{overflow:hidden !important}",document.head.appendChild(r)),li(),Jn()}catch(t){console.error("Builder Devtools:",t)}};window.location===window.parent.location&&(console.debug("Builder.io Devtools v1.18.31"),mo());})();`)}async function eh(e){return th(e,`<!doctype html>
62
+ \`,po();let r=new URL(Vr,ot);r.searchParams.set(Mr,location.href);let n=e.querySelectorAll(".next-step");for(let i of n)i.setAttribute("href",r.href);ye("overview step viewed")}},po=()=>{let t=document.head.querySelector("link[rel='icon'], link[rel='icon shortcut']");t?(t.href="https://cdn.builder.io/favicon.ico",t.removeAttribute("type")):(t=document.createElement("link"),t.rel="icon",t.href="https://cdn.builder.io/favicon.ico",document.head.appendChild(t))};var li=async()=>{(await qr()).isValid||fo()},fo=()=>{customElements.get("builder-dev-tools-overview")||customElements.define("builder-dev-tools-overview",Dt);let t=document.querySelector("builder-dev-tools-overview");t||(t=document.createElement("builder-dev-tools-overview"),t.setAttribute("aria-hidden","true"),document.body.appendChild(t)),setTimeout(()=>{t.removeAttribute("aria-hidden")},32)};var mo=()=>{try{customElements.get("builder-dev-tools-edit")||customElements.define("builder-dev-tools-edit",st),customElements.get("builder-dev-tools-menu")||customElements.define("builder-dev-tools-menu",At);let t=document.querySelector("builder-dev-tools-menu");t||(t=document.createElement("builder-dev-tools-menu"),t.setAttribute("data-version","1.18.34"),document.body.appendChild(t));let e=document.querySelector("builder-dev-tools-edit");e||(e=document.createElement("builder-dev-tools-edit"),document.body.appendChild(e));let r=document.getElementById("builder-dev-tools-style");r||(r=document.createElement("style"),r.id="builder-dev-tools-style",r.innerHTML=".builder-no-scroll{overflow:hidden !important}",document.head.appendChild(r)),li(),Jn()}catch(t){console.error("Builder Devtools:",t)}};window.location===window.parent.location&&(console.debug("Builder.io Devtools v1.18.34"),mo());})();`)}async function eh(e){return th(e,`<!doctype html>
63
63
  <html lang="en" dir="ltr">
64
64
  <head>
65
65
  <meta charset="utf-8" />