next/dist/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.d.ts

The React Framework

export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view';
export declare const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-xl);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-red-200);\n    box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-hydration-diff-type] {\n    color: var(--color-gray-1000);\n    font-size: var(--size-13);\n    overflow: hidden;\n    padding: 0;\n  }\n  [data-nextjs-hydration-diff-type]\n    [data-nextjs-container-errors-pseudo-html-line] {\n    box-sizing: border-box;\n    font-weight: normal;\n    line-height: var(--size-20);\n  }\n  [data-nextjs-hydration-diff-type='invalid-html']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-gray-alpha-1000);\n  }\n  [data-nextjs-hydration-diff-type]\n    .nextjs__container_errors__component-stack,\n  [data-nextjs-hydration-diff-type]\n    .nextjs__container_errors__component-stack code {\n    overflow-x: hidden;\n    overflow-wrap: anywhere;\n  }\n  [data-nextjs-hydration-diff-type]\n    .nextjs__container_errors__component-stack {\n    background: var(--color-background-100);\n    padding: 8px 0 10px;\n  }\n  [data-nextjs-hydration-diff-title] {\n    color: var(--color-gray-900);\n    font-family: var(--font-stack-sans);\n    font-size: var(--size-12);\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button]:focus-visible {\n    outline: 2px solid var(--color-blue-600);\n    outline-offset: 2px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n  [data-nextjs-hydration-diff-header] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--color-gray-200);\n    min-height: 36px;\n    padding: 0 12px;\n  }\n  [data-nextjs-hydration-diff-badge] {\n    display: flex;\n    gap: 8px;\n    font-size: var(--size-12);\n  }\n  [data-nextjs-hydration-diff-badge-item] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--color-gray-900);\n  }\n  [data-nextjs-hydration-diff-badge-item='client'] span:first-child {\n    color: var(--color-green-900);\n    font-weight: bold;\n  }\n  [data-nextjs-hydration-diff-badge-item='server'] span:first-child {\n    color: var(--color-red-900);\n    font-weight: bold;\n  }\n";