import { type StackFrame } from '../../../shared/stack-frame';
type CodeFrameProps = {
    stackFrame: StackFrame;
    codeFrame: string;
};
export declare function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps): import("react").JSX.Element;
export declare const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-20);\n    background-color: var(--color-background-200);\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-13);\n    line-height: var(--code-frame-line-height);\n    margin: 0;\n    overflow: hidden;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-pre {\n    background: var(--color-background-100) !important;\n    border: 1px solid var(--color-gray-200);\n    border-radius: var(--rounded-xl);\n    border-bottom: none;\n    margin-left: -1px !important;\n    width: calc(100% + 2px);\n    max-width: calc(100% + 2px) !important;\n  }\n\n  .code-frame-link svg {\n    display: block;\n    flex-shrink: 0;\n  }\n\n  [data-with-open-in-editor-link-source-file] svg {\n    width: var(--size-14);\n    height: var(--size-14);\n  }\n\n  .code-frame-lines {\n    min-width: max-content;\n  }\n\n  .code-frame-link [data-text] {\n    font-size: var(--size-12);\n    text-align: left;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-24);\n    height: var(--size-24);\n    padding: 4px;\n    margin-left: auto;\n    border-radius: var(--rounded-full);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"] {\n    position: relative;\n    isolation: isolate;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: \"\";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n  [data-nextjs-codeframe-line] > span:first-child {\n    color: var(--color-gray-alpha-500) !important;\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"]\n    > span:first-child {\n    color: var(--color-gray-alpha-1000) !important;\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin: 0;\n    outline: 0;\n    padding-top: 8px;\n    padding-bottom: 8px;\n    padding-right: 8px;\n  }\n  .code-frame-pre {\n    overflow-x: auto;\n    overflow-y: hidden;\n    display: block;\n    max-width: 100%;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";
export {};