import*as r from"react";import o from"styled-components";import{H2 as u}from"@redocly/theme/components/Typography/H2";import{usePageProps as v}from"../../../providers/page-data/hooks";function N(){const d=v(),{compilationErrors:a}=d,s=e=>e.replace(/\x1B\[[0-?]*[ -/]*[@-~]/g,""),m=e=>{const t=e.indexOf("|");if(t!==-1){const l=e.slice(0,t+1),n=e.slice(t+1);return r.createElement(r.Fragment,null,l,r.createElement(P,null,n))}return e},p=(e,t)=>{const n=s(e).split(`
`),g=n.findIndex(i=>i.trimStart().startsWith(`${t.line} |`));return n.map((i,c)=>{const b=c+1===g+1;return r.createElement(y,{key:c},b?m(i):i)})};return r.createElement(f,{"data-cy":"CompilationError/Container"},r.createElement(E,null,"Build Error"),r.createElement(h,null,"Failed to compile"),r.createElement(x,null,a?.map((e,t)=>r.createElement(r.Fragment,{key:t},r.createElement(z,{"data-cy":"CompilationError/Error"},r.createElement(F,null,"Error in file: ",e.sourceFileRelativePath),r.createElement(w,null,e.message),r.createElement(k,null,r.createElement(C,null,p(e.codeframe,e.sourceFileLocation)))),t<a?.length-1&&r.createElement(H,null))),r.createElement(L,null,a?.length===1?"This error occurred during the build process and can only be dismissed by fixing the error.":"These errors occurred during the build process and can only be dismissed by fixing the errors.")))}const f=o.div`
  margin: var(--compilation-error-container-margin);
  padding: var(--compilation-error-container-padding);
  border-radius: var(--border-radius-md);
  background: var(--detailed-error-message-bg-color);
  max-width: var(--compilation-error-page-max-width);
  font-family: var(--compilation-error-font-family);
`,h=o.div`
  background-color: var(--error-bubble-content-color);
  color: white;
  padding: var(--compilation-error-header-padding);
  font-size: var(--compilation-error-title-font-size);
`,E=o(u)`
  color: var(--error-bubble-content-color);
`,x=o.div`
  margin-top: var(--compilation-error-block-padding);
`,k=o.pre`
  border-radius: 4px;
  font-size: var(--compilation-error-text-font-size);
  overflow: auto;
`,y=o.span`
  display: block;
  font-weight: bold;
`,w=o.span`
  display: block;
  padding: var(--compilation-error-description-padding);
  border-bottom: 1px solid var(--detailed-error-message-color);
  color: var(--error-bubble-content-color);
`,C=o.pre`
  margin: var(--compilation-error-codeframe-margin);
  background-color: var(--code-block-bg-color);
  color: var(--detailed-error-message-color);
  padding: var(--compilation-error-codeframe-padding);
  border-radius: 4px;
  overflow: auto;
`,z=o.div`
  margin: var(--compilation-error-block-margin);
  padding: var(--compilation-error-block-padding);
  border: 1px solid var(--error-bubble-content-color);
  border-radius: 8px;
  background-color: var(--detailed-error-message-bg-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`,F=o.div`
  font-size: var(--compilation-error-header-font-size);
  font-weight: bold;
  color: var(--error-bubble-content-color);
  margin: var(--compilation-error-file-header-margin);
`,H=o.hr`
  border: none;
  border-bottom: 1px solid var(--detailed-error-message-color);
  margin: var(--compilation-error-divider-margin);
`,P=o.span`
  color: var(--error-bubble-content-color);
  font-weight: bold;
  background-color: rgba(255, 85, 85, 0.2);
  padding: var(--compilation-error-highlighted-text-padding);
  border-radius: 4px;
`,L=o.div`
  margin: var(--compilation-error-fix-instruction-margin);
  font-size: var(--compilation-error-text-font-size);
  color: var(--detailed-error-message-color);
  font-style: italic;
`;export{N as default};
