next 15.2.0-canary.69 → 15.2.0-canary.70

package/dist/client/components/react-dev-overlay/ui/components/terminal/terminal.js

@@ -22,26 +22,15 @@ _export(exports, {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _anser = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/anser"));
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _hotlinkedtext = require("../hot-linked-text");
 const _editorlink = require("./editor-link");
 const _external = require("../../icons/external");
-const _nooptemplate = require("../../../utils/noop-template");
 const _stackframe = require("../../../utils/stack-frame");
 const _useopenineditor = require("../../utils/use-open-in-editor");
 const _file = require("../../icons/file");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-terminal]::selection,\n  [data-nextjs-terminal] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-terminal] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-terminal] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-terminal] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-terminal] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function getFile(lines) {
     const contentFileName = lines.shift();
     if (!contentFileName) return null;
@@ -170,7 +159,7 @@ const Terminal = function Terminal(param) {
         ]
     });
 };
-const TERMINAL_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const TERMINAL_STYLES = "\n  [data-nextjs-terminal]::selection,\n  [data-nextjs-terminal] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-terminal] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-terminal] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-terminal] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-terminal] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/terminal/terminal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/terminal/terminal.tsx"],"sourcesContent":["import Anser from 'next/dist/compiled/anser'\nimport * as React from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { EditorLink } from './editor-link'\nimport { ExternalIcon } from '../../icons/external'\nimport { noop as css } from '../../../utils/noop-template'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { FileIcon } from '../../icons/file'\n\nexport type TerminalProps = { content: string }\n\nfunction getFile(lines: string[]) {\n  const contentFileName = lines.shift()\n  if (!contentFileName) return null\n  const [fileName, line, column] = contentFileName.split(':', 3)\n\n  const parsedLine = Number(line)\n  const parsedColumn = Number(column)\n  const hasLocation = !Number.isNaN(parsedLine) && !Number.isNaN(parsedColumn)\n\n  return {\n    fileName: hasLocation ? fileName : contentFileName,\n    location: hasLocation\n      ? {\n          line: parsedLine,\n          column: parsedColumn,\n        }\n      : undefined,\n  }\n}\n\nfunction getImportTraceFiles(lines: string[]) {\n  if (\n    lines.some((line) => /ReactServerComponentsError:/.test(line)) ||\n    lines.some((line) => /Import trace for requested module:/.test(line))\n  ) {\n    // Grab the lines at the end containing the files\n    const files = []\n    while (\n      /.+\\..+/.test(lines[lines.length - 1]) &&\n      !lines[lines.length - 1].includes(':')\n    ) {\n      const file = lines.pop()!.trim()\n      files.unshift(file)\n    }\n\n    return files\n  }\n\n  return []\n}\n\nfunction getEditorLinks(content: string) {\n  const lines = content.split('\\n')\n  const file = getFile(lines)\n  const importTraceFiles = getImportTraceFiles(lines)\n\n  return { file, source: lines.join('\\n'), importTraceFiles }\n}\n\nexport const Terminal: React.FC<TerminalProps> = function Terminal({\n  content,\n}) {\n  const { file, source, importTraceFiles } = React.useMemo(\n    () => getEditorLinks(content),\n    [content]\n  )\n\n  const decoded = React.useMemo(() => {\n    return Anser.ansiToJson(source, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [source])\n\n  const open = useOpenInEditor({\n    file: file?.fileName,\n    lineNumber: file?.location?.line ?? 1,\n    column: file?.location?.column ?? 0,\n  })\n\n  const stackFrame = {\n    file: file?.fileName ?? null,\n    methodName: '',\n    arguments: [],\n    lineNumber: file?.location?.line ?? null,\n    column: file?.location?.column ?? null,\n  }\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        <div className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {/* TODO: Unlike the CodeFrame component, the `methodName` is unavailable. */}\n            {getFrameSource(stackFrame)}\n          </span>\n          <button\n            aria-label=\"Open in editor\"\n            data-with-open-in-editor-link-source-file\n            onClick={open}\n          >\n            <span className=\"code-frame-icon\" data-icon=\"right\">\n              <ExternalIcon width={16} height={16} />\n            </span>\n          </button>\n        </div>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decoded.map((entry, index) => (\n          <span\n            key={`terminal-entry-${index}`}\n            style={{\n              color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n              ...(entry.decoration === 'bold'\n                ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n                  // having longer width than expected on Geist Mono font-weight\n                  // above 600, hence a temporary fix is to use 500 for bold.\n                  { fontWeight: 500 }\n                : entry.decoration === 'italic'\n                  ? { fontStyle: 'italic' }\n                  : undefined),\n            }}\n          >\n            <HotlinkedText text={entry.content} />\n          </span>\n        ))}\n        {importTraceFiles.map((importTraceFile) => (\n          <EditorLink\n            isSourceFile={false}\n            key={importTraceFile}\n            file={importTraceFile}\n          />\n        ))}\n      </pre>\n    </div>\n  )\n}\n\nexport const TERMINAL_STYLES = css`\n  [data-nextjs-terminal]::selection,\n  [data-nextjs-terminal] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-terminal] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-terminal] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-terminal] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-terminal] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n`\n"],"names":["TERMINAL_STYLES","Terminal","getFile","lines","contentFileName","shift","fileName","line","column","split","parsedLine","Number","parsedColumn","hasLocation","isNaN","location","undefined","getImportTraceFiles","some","test","files","length","includes","file","pop","trim","unshift","getEditorLinks","content","importTraceFiles","source","join","stackFrame","React","useMemo","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","lineNumber","methodName","arguments","fileExtension","div","data-nextjs-codeframe","className","span","FileIcon","lang","data-text","getFrameSource","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","map","entry","index","style","color","fg","decoration","fontWeight","fontStyle","HotlinkedText","text","importTraceFile","EditorLink","isSourceFile","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/terminal/terminal.tsx"],"sourcesContent":["import Anser from 'next/dist/compiled/anser'\nimport * as React from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { EditorLink } from './editor-link'\nimport { ExternalIcon } from '../../icons/external'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { FileIcon } from '../../icons/file'\n\nexport type TerminalProps = { content: string }\n\nfunction getFile(lines: string[]) {\n  const contentFileName = lines.shift()\n  if (!contentFileName) return null\n  const [fileName, line, column] = contentFileName.split(':', 3)\n\n  const parsedLine = Number(line)\n  const parsedColumn = Number(column)\n  const hasLocation = !Number.isNaN(parsedLine) && !Number.isNaN(parsedColumn)\n\n  return {\n    fileName: hasLocation ? fileName : contentFileName,\n    location: hasLocation\n      ? {\n          line: parsedLine,\n          column: parsedColumn,\n        }\n      : undefined,\n  }\n}\n\nfunction getImportTraceFiles(lines: string[]) {\n  if (\n    lines.some((line) => /ReactServerComponentsError:/.test(line)) ||\n    lines.some((line) => /Import trace for requested module:/.test(line))\n  ) {\n    // Grab the lines at the end containing the files\n    const files = []\n    while (\n      /.+\\..+/.test(lines[lines.length - 1]) &&\n      !lines[lines.length - 1].includes(':')\n    ) {\n      const file = lines.pop()!.trim()\n      files.unshift(file)\n    }\n\n    return files\n  }\n\n  return []\n}\n\nfunction getEditorLinks(content: string) {\n  const lines = content.split('\\n')\n  const file = getFile(lines)\n  const importTraceFiles = getImportTraceFiles(lines)\n\n  return { file, source: lines.join('\\n'), importTraceFiles }\n}\n\nexport const Terminal: React.FC<TerminalProps> = function Terminal({\n  content,\n}) {\n  const { file, source, importTraceFiles } = React.useMemo(\n    () => getEditorLinks(content),\n    [content]\n  )\n\n  const decoded = React.useMemo(() => {\n    return Anser.ansiToJson(source, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [source])\n\n  const open = useOpenInEditor({\n    file: file?.fileName,\n    lineNumber: file?.location?.line ?? 1,\n    column: file?.location?.column ?? 0,\n  })\n\n  const stackFrame = {\n    file: file?.fileName ?? null,\n    methodName: '',\n    arguments: [],\n    lineNumber: file?.location?.line ?? null,\n    column: file?.location?.column ?? null,\n  }\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        <div className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {/* TODO: Unlike the CodeFrame component, the `methodName` is unavailable. */}\n            {getFrameSource(stackFrame)}\n          </span>\n          <button\n            aria-label=\"Open in editor\"\n            data-with-open-in-editor-link-source-file\n            onClick={open}\n          >\n            <span className=\"code-frame-icon\" data-icon=\"right\">\n              <ExternalIcon width={16} height={16} />\n            </span>\n          </button>\n        </div>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decoded.map((entry, index) => (\n          <span\n            key={`terminal-entry-${index}`}\n            style={{\n              color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n              ...(entry.decoration === 'bold'\n                ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n                  // having longer width than expected on Geist Mono font-weight\n                  // above 600, hence a temporary fix is to use 500 for bold.\n                  { fontWeight: 500 }\n                : entry.decoration === 'italic'\n                  ? { fontStyle: 'italic' }\n                  : undefined),\n            }}\n          >\n            <HotlinkedText text={entry.content} />\n          </span>\n        ))}\n        {importTraceFiles.map((importTraceFile) => (\n          <EditorLink\n            isSourceFile={false}\n            key={importTraceFile}\n            file={importTraceFile}\n          />\n        ))}\n      </pre>\n    </div>\n  )\n}\n\nexport const TERMINAL_STYLES = `\n  [data-nextjs-terminal]::selection,\n  [data-nextjs-terminal] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-terminal] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-terminal] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-terminal] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-terminal] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n`\n"],"names":["TERMINAL_STYLES","Terminal","getFile","lines","contentFileName","shift","fileName","line","column","split","parsedLine","Number","parsedColumn","hasLocation","isNaN","location","undefined","getImportTraceFiles","some","test","files","length","includes","file","pop","trim","unshift","getEditorLinks","content","importTraceFiles","source","join","stackFrame","React","useMemo","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","lineNumber","methodName","arguments","fileExtension","div","data-nextjs-codeframe","className","span","FileIcon","lang","data-text","getFrameSource","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","map","entry","index","style","color","fg","decoration","fontWeight","fontStyle","HotlinkedText","text","importTraceFile","EditorLink","isSourceFile"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/ui/components/toast/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: string;
+declare const styles = "\n  .nextjs-toast {\n    position: fixed;\n    bottom: var(--size-gap-double);\n    left: var(--size-gap-double);\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px var(--size-gap-double) var(--size-gap-quad)\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--size-gap-quad);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n\n  .nextjs-static-indicator-toast-wrapper {\n    width: 30px;\n    height: 30px;\n    overflow: hidden;\n    border: 0;\n    border-radius: var(--size-gap-triple);\n    background: var(--color-background);\n    color: var(--color-font);\n    transition: all 0.3s ease-in-out;\n    box-shadow:\n      inset 0 0 0 1px var(--color-border-shadow),\n      0 11px 40px 0 rgba(0, 0, 0, 0.25),\n      0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover {\n    width: 140px;\n  }\n\n  .nextjs-static-indicator-toast-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n  }\n\n  .nextjs-static-indicator-toast-text {\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    white-space: nowrap;\n    transition: opacity 0.3s ease-in-out;\n    line-height: 30px;\n    position: absolute;\n    left: 30px;\n    top: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover\n    .nextjs-static-indicator-toast-text {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button {\n    color: var(--color-font);\n    opacity: 0.8;\n    background: none;\n    border: none;\n    margin-left: 6px;\n    margin-top: -2px;\n    outline: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button:focus {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button > svg {\n    width: 16px;\n    height: 16px;\n  }\n";
 export { styles };

package/dist/client/components/react-dev-overlay/ui/components/toast/styles.js

@@ -8,18 +8,7 @@ Object.defineProperty(exports, "styles", {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
-const _nooptemplate = require("../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs-toast {\n    position: fixed;\n    bottom: var(--size-gap-double);\n    left: var(--size-gap-double);\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px var(--size-gap-double) var(--size-gap-quad)\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--size-gap-quad);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n\n  .nextjs-static-indicator-toast-wrapper {\n    width: 30px;\n    height: 30px;\n    overflow: hidden;\n    border: 0;\n    border-radius: var(--size-gap-triple);\n    background: var(--color-background);\n    color: var(--color-font);\n    transition: all 0.3s ease-in-out;\n    box-shadow:\n      inset 0 0 0 1px var(--color-border-shadow),\n      0 11px 40px 0 rgba(0, 0, 0, 0.25),\n      0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover {\n    width: 140px;\n  }\n\n  .nextjs-static-indicator-toast-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n  }\n\n  .nextjs-static-indicator-toast-text {\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    white-space: nowrap;\n    transition: opacity 0.3s ease-in-out;\n    line-height: 30px;\n    position: absolute;\n    left: 30px;\n    top: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover\n    .nextjs-static-indicator-toast-text {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button {\n    color: var(--color-font);\n    opacity: 0.8;\n    background: none;\n    border: none;\n    margin-left: 6px;\n    margin-top: -2px;\n    outline: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button:focus {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button > svg {\n    width: 16px;\n    height: 16px;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .nextjs-toast {\n    position: fixed;\n    bottom: var(--size-gap-double);\n    left: var(--size-gap-double);\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px var(--size-gap-double) var(--size-gap-quad)\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--size-gap-quad);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n\n  .nextjs-static-indicator-toast-wrapper {\n    width: 30px;\n    height: 30px;\n    overflow: hidden;\n    border: 0;\n    border-radius: var(--size-gap-triple);\n    background: var(--color-background);\n    color: var(--color-font);\n    transition: all 0.3s ease-in-out;\n    box-shadow:\n      inset 0 0 0 1px var(--color-border-shadow),\n      0 11px 40px 0 rgba(0, 0, 0, 0.25),\n      0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover {\n    width: 140px;\n  }\n\n  .nextjs-static-indicator-toast-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n  }\n\n  .nextjs-static-indicator-toast-text {\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    white-space: nowrap;\n    transition: opacity 0.3s ease-in-out;\n    line-height: 30px;\n    position: absolute;\n    left: 30px;\n    top: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover\n    .nextjs-static-indicator-toast-text {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button {\n    color: var(--color-font);\n    opacity: 0.8;\n    background: none;\n    border: none;\n    margin-left: 6px;\n    margin-top: -2px;\n    outline: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button:focus {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button > svg {\n    width: 16px;\n    height: 16px;\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/toast/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/toast/styles.ts"],"sourcesContent":["import { noop as css } from '../../../utils/noop-template'\n\nconst styles = css`\n  .nextjs-toast {\n    position: fixed;\n    bottom: var(--size-gap-double);\n    left: var(--size-gap-double);\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px var(--size-gap-double) var(--size-gap-quad)\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--size-gap-quad);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n\n  .nextjs-static-indicator-toast-wrapper {\n    width: 30px;\n    height: 30px;\n    overflow: hidden;\n    border: 0;\n    border-radius: var(--size-gap-triple);\n    background: var(--color-background);\n    color: var(--color-font);\n    transition: all 0.3s ease-in-out;\n    box-shadow:\n      inset 0 0 0 1px var(--color-border-shadow),\n      0 11px 40px 0 rgba(0, 0, 0, 0.25),\n      0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover {\n    width: 140px;\n  }\n\n  .nextjs-static-indicator-toast-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n  }\n\n  .nextjs-static-indicator-toast-text {\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    white-space: nowrap;\n    transition: opacity 0.3s ease-in-out;\n    line-height: 30px;\n    position: absolute;\n    left: 30px;\n    top: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover\n    .nextjs-static-indicator-toast-text {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button {\n    color: var(--color-font);\n    opacity: 0.8;\n    background: none;\n    border: none;\n    margin-left: 6px;\n    margin-top: -2px;\n    outline: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button:focus {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button > svg {\n    width: 16px;\n    height: 16px;\n  }\n`\n\nexport { styles }\n"],"names":["styles","css"],"mappings":";;;;+BA8FSA;;;eAAAA;;;;8BA9FmB;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/toast/styles.ts"],"sourcesContent":["const styles = `\n  .nextjs-toast {\n    position: fixed;\n    bottom: var(--size-gap-double);\n    left: var(--size-gap-double);\n    max-width: 420px;\n    z-index: 9000;\n    box-shadow: 0px var(--size-gap-double) var(--size-gap-quad)\n      rgba(0, 0, 0, 0.25);\n  }\n\n  @media (max-width: 440px) {\n    .nextjs-toast {\n      max-width: 90vw;\n      left: 5vw;\n    }\n  }\n\n  .nextjs-toast-errors-parent {\n    padding: 16px;\n    border-radius: var(--size-gap-quad);\n    font-weight: 500;\n    color: var(--color-ansi-bright-white);\n    background-color: var(--color-ansi-red);\n  }\n\n  .nextjs-static-indicator-toast-wrapper {\n    width: 30px;\n    height: 30px;\n    overflow: hidden;\n    border: 0;\n    border-radius: var(--size-gap-triple);\n    background: var(--color-background);\n    color: var(--color-font);\n    transition: all 0.3s ease-in-out;\n    box-shadow:\n      inset 0 0 0 1px var(--color-border-shadow),\n      0 11px 40px 0 rgba(0, 0, 0, 0.25),\n      0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover {\n    width: 140px;\n  }\n\n  .nextjs-static-indicator-toast-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n  }\n\n  .nextjs-static-indicator-toast-text {\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    white-space: nowrap;\n    transition: opacity 0.3s ease-in-out;\n    line-height: 30px;\n    position: absolute;\n    left: 30px;\n    top: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper:hover\n    .nextjs-static-indicator-toast-text {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button {\n    color: var(--color-font);\n    opacity: 0.8;\n    background: none;\n    border: none;\n    margin-left: 6px;\n    margin-top: -2px;\n    outline: 0;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button:focus {\n    opacity: 1;\n  }\n\n  .nextjs-static-indicator-toast-wrapper button > svg {\n    width: 16px;\n    height: 16px;\n  }\n`\n\nexport { styles }\n"],"names":["styles"],"mappings":";;;;+BA4FSA;;;eAAAA;;;AA5FT,MAAMA,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.d.ts

@@ -8,4 +8,4 @@ export declare function getStaleness({ installed, staleness, expected }: Version
     indicatorClass: string;
     title: string;
 };
-export declare const styles: string;
+export declare const styles = "\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 26px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  a.nextjs-container-build-error-version-status {\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n  .version-staleness-indicator.unknown {\n    fill: var(--color-gray-800);\n    stroke: var(--color-gray-300);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.js

@@ -24,19 +24,8 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _cx = require("../../utils/cx");
-const _nooptemplate = require("../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 26px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  a.nextjs-container-build-error-version-status {\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n  .version-staleness-indicator.unknown {\n    fill: var(--color-gray-800);\n    stroke: var(--color-gray-300);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function VersionStalenessInfo(param) {
     let { versionInfo, isTurbopack } = param;
     const { staleness } = versionInfo;
@@ -129,7 +118,7 @@ function getStaleness(param) {
         title
     };
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 26px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  a.nextjs-container-build-error-version-status {\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n  .version-staleness-indicator.unknown {\n    fill: var(--color-gray-800);\n    stroke: var(--color-gray-300);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n";
 function Eclipse(param) {
     let { className } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {

package/dist/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../server/dev/parse-version-info'\nimport { cx } from '../../utils/cx'\nimport { noop as css } from '../../../utils/noop-template'\n\nexport function VersionStalenessInfo({\n  versionInfo,\n  isTurbopack,\n}: {\n  versionInfo: VersionInfo\n  isTurbopack?: boolean\n}) {\n  const { staleness } = versionInfo\n  let { text, indicatorClass, title } = getStaleness(versionInfo)\n\n  const shouldBeLink = staleness.startsWith('stale')\n  if (shouldBeLink) {\n    return (\n      <a\n        className={cx(\n          'nextjs-container-build-error-version-status',\n          'dialog-exclude-closing-from-outside-click',\n          isTurbopack && 'turbopack-border'\n        )}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        href=\"https://nextjs.org/docs/messages/version-staleness\"\n      >\n        <Eclipse\n          className={cx('version-staleness-indicator', indicatorClass)}\n        />\n        <span data-nextjs-version-checker title={title}>\n          {text}\n        </span>\n        {isTurbopack && <span className=\"turbopack-text\">Turbopack</span>}\n      </a>\n    )\n  }\n\n  return (\n    <span className=\"nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click\">\n      <Eclipse className={cx('version-staleness-indicator', indicatorClass)} />\n      <span data-nextjs-version-checker title={title}>\n        {text}\n      </span>\n      {isTurbopack && <span className=\"turbopack-text\">Turbopack</span>}\n    </span>\n  )\n}\n\nexport function getStaleness({ installed, staleness, expected }: VersionInfo) {\n  let text = ''\n  let title = ''\n  let indicatorClass = ''\n  const versionLabel = `Next.js ${installed}`\n  switch (staleness) {\n    case 'newer-than-npm':\n    case 'fresh':\n      text = versionLabel\n      title = `Latest available version is detected (${installed}).`\n      indicatorClass = 'fresh'\n      break\n    case 'stale-patch':\n    case 'stale-minor':\n      text = `${versionLabel} (stale)`\n      title = `There is a newer version (${expected}) available, upgrade recommended! `\n      indicatorClass = 'stale'\n      break\n    case 'stale-major': {\n      text = `${versionLabel} (outdated)`\n      title = `An outdated version detected (latest is ${expected}), upgrade is highly recommended!`\n      indicatorClass = 'outdated'\n      break\n    }\n    case 'stale-prerelease': {\n      text = `${versionLabel} (stale)`\n      title = `There is a newer canary version (${expected}) available, please upgrade! `\n      indicatorClass = 'stale'\n      break\n    }\n    case 'unknown':\n      text = `${versionLabel} (unknown)`\n      title = 'No Next.js version data was found.'\n      indicatorClass = 'unknown'\n      break\n    default:\n      break\n  }\n  return { text, indicatorClass, title }\n}\n\nexport const styles = css`\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 26px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  a.nextjs-container-build-error-version-status {\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n  .version-staleness-indicator.unknown {\n    fill: var(--color-gray-800);\n    stroke: var(--color-gray-300);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n`\n\nfunction Eclipse({ className }: { className: string }) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle className={className} cx=\"7\" cy=\"7\" r=\"5.5\" strokeWidth=\"3\" />\n    </svg>\n  )\n}\n"],"names":["VersionStalenessInfo","getStaleness","styles","versionInfo","isTurbopack","staleness","text","indicatorClass","title","shouldBeLink","startsWith","a","className","cx","target","rel","href","Eclipse","span","data-nextjs-version-checker","installed","expected","versionLabel","css","svg","width","height","viewBox","fill","xmlns","circle","cy","r","strokeWidth"],"mappings":";;;;;;;;;;;;;;;;IAIgBA,oBAAoB;eAApBA;;IA6CAC,YAAY;eAAZA;;IAyCHC,MAAM;eAANA;;;;;oBAzFM;8BACS;;;;;;;;;;AAErB,SAASF,qBAAqB,KAMpC;IANoC,IAAA,EACnCG,WAAW,EACXC,WAAW,EAIZ,GANoC;IAOnC,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,IAAI,EAAEG,IAAI,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGP,aAAaE;IAEnD,MAAMM,eAAeJ,UAAUK,UAAU,CAAC;IAC1C,IAAID,cAAc;QAChB,qBACE,sBAACE;YACCC,WAAWC,IAAAA,MAAE,EACX,+CACA,6CACAT,eAAe;YAEjBU,QAAO;YACPC,KAAI;YACJC,MAAK;;8BAEL,qBAACC;oBACCL,WAAWC,IAAAA,MAAE,EAAC,+BAA+BN;;8BAE/C,qBAACW;oBAAKC,6BAA2B;oBAACX,OAAOA;8BACtCF;;gBAEFF,6BAAe,qBAACc;oBAAKN,WAAU;8BAAiB;;;;IAGvD;IAEA,qBACE,sBAACM;QAAKN,WAAU;;0BACd,qBAACK;gBAAQL,WAAWC,IAAAA,MAAE,EAAC,+BAA+BN;;0BACtD,qBAACW;gBAAKC,6BAA2B;gBAACX,OAAOA;0BACtCF;;YAEFF,6BAAe,qBAACc;gBAAKN,WAAU;0BAAiB;;;;AAGvD;AAEO,SAASX,aAAa,KAA+C;IAA/C,IAAA,EAAEmB,SAAS,EAAEf,SAAS,EAAEgB,QAAQ,EAAe,GAA/C;IAC3B,IAAIf,OAAO;IACX,IAAIE,QAAQ;IACZ,IAAID,iBAAiB;IACrB,MAAMe,eAAe,AAAC,aAAUF;IAChC,OAAQf;QACN,KAAK;QACL,KAAK;YACHC,OAAOgB;YACPd,QAAQ,AAAC,2CAAwCY,YAAU;YAC3Db,iBAAiB;YACjB;QACF,KAAK;QACL,KAAK;YACHD,OAAO,AAAC,KAAEgB,eAAa;YACvBd,QAAQ,AAAC,+BAA4Ba,WAAS;YAC9Cd,iBAAiB;YACjB;QACF,KAAK;YAAe;gBAClBD,OAAO,AAAC,KAAEgB,eAAa;gBACvBd,QAAQ,AAAC,6CAA0Ca,WAAS;gBAC5Dd,iBAAiB;gBACjB;YACF;QACA,KAAK;YAAoB;gBACvBD,OAAO,AAAC,KAAEgB,eAAa;gBACvBd,QAAQ,AAAC,sCAAmCa,WAAS;gBACrDd,iBAAiB;gBACjB;YACF;QACA,KAAK;YACHD,OAAO,AAAC,KAAEgB,eAAa;YACvBd,QAAQ;YACRD,iBAAiB;YACjB;QACF;YACE;IACJ;IACA,OAAO;QAAED;QAAMC;QAAgBC;IAAM;AACvC;AAEO,MAAMN,aAASqB,kBAAG;AAgEzB,SAASN,QAAQ,KAAoC;IAApC,IAAA,EAAEL,SAAS,EAAyB,GAApC;IACf,qBACE,qBAACY;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,qBAACC;YAAOlB,WAAWA;YAAWC,IAAG;YAAIkB,IAAG;YAAIC,GAAE;YAAMC,aAAY;;;AAGtE"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../server/dev/parse-version-info'\nimport { cx } from '../../utils/cx'\n\nexport function VersionStalenessInfo({\n  versionInfo,\n  isTurbopack,\n}: {\n  versionInfo: VersionInfo\n  isTurbopack?: boolean\n}) {\n  const { staleness } = versionInfo\n  let { text, indicatorClass, title } = getStaleness(versionInfo)\n\n  const shouldBeLink = staleness.startsWith('stale')\n  if (shouldBeLink) {\n    return (\n      <a\n        className={cx(\n          'nextjs-container-build-error-version-status',\n          'dialog-exclude-closing-from-outside-click',\n          isTurbopack && 'turbopack-border'\n        )}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        href=\"https://nextjs.org/docs/messages/version-staleness\"\n      >\n        <Eclipse\n          className={cx('version-staleness-indicator', indicatorClass)}\n        />\n        <span data-nextjs-version-checker title={title}>\n          {text}\n        </span>\n        {isTurbopack && <span className=\"turbopack-text\">Turbopack</span>}\n      </a>\n    )\n  }\n\n  return (\n    <span className=\"nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click\">\n      <Eclipse className={cx('version-staleness-indicator', indicatorClass)} />\n      <span data-nextjs-version-checker title={title}>\n        {text}\n      </span>\n      {isTurbopack && <span className=\"turbopack-text\">Turbopack</span>}\n    </span>\n  )\n}\n\nexport function getStaleness({ installed, staleness, expected }: VersionInfo) {\n  let text = ''\n  let title = ''\n  let indicatorClass = ''\n  const versionLabel = `Next.js ${installed}`\n  switch (staleness) {\n    case 'newer-than-npm':\n    case 'fresh':\n      text = versionLabel\n      title = `Latest available version is detected (${installed}).`\n      indicatorClass = 'fresh'\n      break\n    case 'stale-patch':\n    case 'stale-minor':\n      text = `${versionLabel} (stale)`\n      title = `There is a newer version (${expected}) available, upgrade recommended! `\n      indicatorClass = 'stale'\n      break\n    case 'stale-major': {\n      text = `${versionLabel} (outdated)`\n      title = `An outdated version detected (latest is ${expected}), upgrade is highly recommended!`\n      indicatorClass = 'outdated'\n      break\n    }\n    case 'stale-prerelease': {\n      text = `${versionLabel} (stale)`\n      title = `There is a newer canary version (${expected}) available, please upgrade! `\n      indicatorClass = 'stale'\n      break\n    }\n    case 'unknown':\n      text = `${versionLabel} (unknown)`\n      title = 'No Next.js version data was found.'\n      indicatorClass = 'unknown'\n      break\n    default:\n      break\n  }\n  return { text, indicatorClass, title }\n}\n\nexport const styles = `\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 26px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  a.nextjs-container-build-error-version-status {\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n  .version-staleness-indicator.unknown {\n    fill: var(--color-gray-800);\n    stroke: var(--color-gray-300);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n`\n\nfunction Eclipse({ className }: { className: string }) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle className={className} cx=\"7\" cy=\"7\" r=\"5.5\" strokeWidth=\"3\" />\n    </svg>\n  )\n}\n"],"names":["VersionStalenessInfo","getStaleness","styles","versionInfo","isTurbopack","staleness","text","indicatorClass","title","shouldBeLink","startsWith","a","className","cx","target","rel","href","Eclipse","span","data-nextjs-version-checker","installed","expected","versionLabel","svg","width","height","viewBox","fill","xmlns","circle","cy","r","strokeWidth"],"mappings":";;;;;;;;;;;;;;;;IAGgBA,oBAAoB;eAApBA;;IA6CAC,YAAY;eAAZA;;IAyCHC,MAAM;eAANA;;;;oBAxFM;AAEZ,SAASF,qBAAqB,KAMpC;IANoC,IAAA,EACnCG,WAAW,EACXC,WAAW,EAIZ,GANoC;IAOnC,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,IAAI,EAAEG,IAAI,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGP,aAAaE;IAEnD,MAAMM,eAAeJ,UAAUK,UAAU,CAAC;IAC1C,IAAID,cAAc;QAChB,qBACE,sBAACE;YACCC,WAAWC,IAAAA,MAAE,EACX,+CACA,6CACAT,eAAe;YAEjBU,QAAO;YACPC,KAAI;YACJC,MAAK;;8BAEL,qBAACC;oBACCL,WAAWC,IAAAA,MAAE,EAAC,+BAA+BN;;8BAE/C,qBAACW;oBAAKC,6BAA2B;oBAACX,OAAOA;8BACtCF;;gBAEFF,6BAAe,qBAACc;oBAAKN,WAAU;8BAAiB;;;;IAGvD;IAEA,qBACE,sBAACM;QAAKN,WAAU;;0BACd,qBAACK;gBAAQL,WAAWC,IAAAA,MAAE,EAAC,+BAA+BN;;0BACtD,qBAACW;gBAAKC,6BAA2B;gBAACX,OAAOA;0BACtCF;;YAEFF,6BAAe,qBAACc;gBAAKN,WAAU;0BAAiB;;;;AAGvD;AAEO,SAASX,aAAa,KAA+C;IAA/C,IAAA,EAAEmB,SAAS,EAAEf,SAAS,EAAEgB,QAAQ,EAAe,GAA/C;IAC3B,IAAIf,OAAO;IACX,IAAIE,QAAQ;IACZ,IAAID,iBAAiB;IACrB,MAAMe,eAAe,AAAC,aAAUF;IAChC,OAAQf;QACN,KAAK;QACL,KAAK;YACHC,OAAOgB;YACPd,QAAQ,AAAC,2CAAwCY,YAAU;YAC3Db,iBAAiB;YACjB;QACF,KAAK;QACL,KAAK;YACHD,OAAO,AAAC,KAAEgB,eAAa;YACvBd,QAAQ,AAAC,+BAA4Ba,WAAS;YAC9Cd,iBAAiB;YACjB;QACF,KAAK;YAAe;gBAClBD,OAAO,AAAC,KAAEgB,eAAa;gBACvBd,QAAQ,AAAC,6CAA0Ca,WAAS;gBAC5Dd,iBAAiB;gBACjB;YACF;QACA,KAAK;YAAoB;gBACvBD,OAAO,AAAC,KAAEgB,eAAa;gBACvBd,QAAQ,AAAC,sCAAmCa,WAAS;gBACrDd,iBAAiB;gBACjB;YACF;QACA,KAAK;YACHD,OAAO,AAAC,KAAEgB,eAAa;YACvBd,QAAQ;YACRD,iBAAiB;YACjB;QACF;YACE;IACJ;IACA,OAAO;QAAED;QAAMC;QAAgBC;IAAM;AACvC;AAEO,MAAMN,SAAU;AAgEvB,SAASe,QAAQ,KAAoC;IAApC,IAAA,EAAEL,SAAS,EAAyB,GAApC;IACf,qBACE,qBAACW;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,qBAACC;YAAOjB,WAAWA;YAAWC,IAAG;YAAIiB,IAAG;YAAIC,GAAE;YAAMC,aAAY;;;AAGtE"}

package/dist/client/components/react-dev-overlay/ui/container/build-error.d.ts

@@ -4,4 +4,4 @@ export interface BuildErrorProps extends ErrorBaseProps {
     message: string;
 }
 export declare const BuildError: React.FC<BuildErrorProps>;
-export declare const styles: string;
+export declare const styles = "";

package/dist/client/components/react-dev-overlay/ui/container/build-error.js

@@ -22,22 +22,11 @@ _export(exports, {
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
 const _terminal = require("../components/terminal");
-const _nooptemplate = require("../../utils/noop-template");
 const _erroroverlaylayout = require("../components/errors/error-overlay-layout/error-overlay-layout");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        ""
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 const getErrorTextFromBuildErrorMessage = (multiLineMessage)=>{
     const lines = multiLineMessage.split('\n');
     // The multi-line build error message looks like:
@@ -74,7 +63,7 @@ const BuildError = function BuildError(param) {
         })
     });
 };
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/container/build-error.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/build-error.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\nimport { Terminal } from '../components/terminal'\nimport { noop as css } from '../../utils/noop-template'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'\n\nexport interface BuildErrorProps extends ErrorBaseProps {\n  message: string\n}\n\nconst getErrorTextFromBuildErrorMessage = (multiLineMessage: string) => {\n  const lines = multiLineMessage.split('\\n')\n  // The multi-line build error message looks like:\n  // <file path>:<line number>:<column number>\n  // <error message>\n  // <error code frame of compiler or bundler>\n  // e.g.\n  // ./path/to/file.js:1:1\n  // SyntaxError: ...\n  // > 1 | con st foo =\n  // ...\n  return stripAnsi(lines[1] || '')\n}\n\nexport const BuildError: React.FC<BuildErrorProps> = function BuildError({\n  message,\n  ...props\n}) {\n  const noop = useCallback(() => {}, [])\n  const error = new Error(message)\n  const formattedMessage = useMemo(\n    () => getErrorTextFromBuildErrorMessage(message) || 'Failed to compile',\n    [message]\n  )\n\n  return (\n    <ErrorOverlayLayout\n      errorType=\"Build Error\"\n      errorMessage={formattedMessage}\n      onClose={noop}\n      error={error}\n      footerMessage=\"This error occurred during the build process and can only be dismissed by fixing the error.\"\n      {...props}\n    >\n      <Terminal content={message} />\n    </ErrorOverlayLayout>\n  )\n}\n\nexport const styles = css``\n"],"names":["BuildError","styles","getErrorTextFromBuildErrorMessage","multiLineMessage","lines","split","stripAnsi","message","props","noop","useCallback","error","Error","formattedMessage","useMemo","ErrorOverlayLayout","errorType","errorMessage","onClose","footerMessage","Terminal","content","css"],"mappings":";;;;;;;;;;;;;;;IAyBaA,UAAU;eAAVA;;IAyBAC,MAAM;eAANA;;;;;;;iEAlD+B;oEACtB;0BACG;8BACG;oCACO;;;;;;;;;;AAOnC,MAAMC,oCAAoC,CAACC;IACzC,MAAMC,QAAQD,iBAAiBE,KAAK,CAAC;IACrC,iDAAiD;IACjD,4CAA4C;IAC5C,kBAAkB;IAClB,4CAA4C;IAC5C,OAAO;IACP,wBAAwB;IACxB,mBAAmB;IACnB,qBAAqB;IACrB,MAAM;IACN,OAAOC,IAAAA,kBAAS,EAACF,KAAK,CAAC,EAAE,IAAI;AAC/B;AAEO,MAAMJ,aAAwC,SAASA,WAAW,KAGxE;IAHwE,IAAA,EACvEO,OAAO,EACP,GAAGC,OACJ,GAHwE;IAIvE,MAAMC,OAAOC,IAAAA,kBAAW,EAAC,KAAO,GAAG,EAAE;IACrC,MAAMC,QAAQ,qBAAkB,CAAlB,IAAIC,MAAML,UAAV,qBAAA;eAAA;oBAAA;sBAAA;IAAiB;IAC/B,MAAMM,mBAAmBC,IAAAA,cAAO,EAC9B,IAAMZ,kCAAkCK,YAAY,qBACpD;QAACA;KAAQ;IAGX,qBACE,qBAACQ,sCAAkB;QACjBC,WAAU;QACVC,cAAcJ;QACdK,SAAST;QACTE,OAAOA;QACPQ,eAAc;QACb,GAAGX,KAAK;kBAET,cAAA,qBAACY,kBAAQ;YAACC,SAASd;;;AAGzB;AAEO,MAAMN,aAASqB,kBAAG"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/build-error.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\nimport { Terminal } from '../components/terminal'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'\n\nexport interface BuildErrorProps extends ErrorBaseProps {\n  message: string\n}\n\nconst getErrorTextFromBuildErrorMessage = (multiLineMessage: string) => {\n  const lines = multiLineMessage.split('\\n')\n  // The multi-line build error message looks like:\n  // <file path>:<line number>:<column number>\n  // <error message>\n  // <error code frame of compiler or bundler>\n  // e.g.\n  // ./path/to/file.js:1:1\n  // SyntaxError: ...\n  // > 1 | con st foo =\n  // ...\n  return stripAnsi(lines[1] || '')\n}\n\nexport const BuildError: React.FC<BuildErrorProps> = function BuildError({\n  message,\n  ...props\n}) {\n  const noop = useCallback(() => {}, [])\n  const error = new Error(message)\n  const formattedMessage = useMemo(\n    () => getErrorTextFromBuildErrorMessage(message) || 'Failed to compile',\n    [message]\n  )\n\n  return (\n    <ErrorOverlayLayout\n      errorType=\"Build Error\"\n      errorMessage={formattedMessage}\n      onClose={noop}\n      error={error}\n      footerMessage=\"This error occurred during the build process and can only be dismissed by fixing the error.\"\n      {...props}\n    >\n      <Terminal content={message} />\n    </ErrorOverlayLayout>\n  )\n}\n\nexport const styles = ``\n"],"names":["BuildError","styles","getErrorTextFromBuildErrorMessage","multiLineMessage","lines","split","stripAnsi","message","props","noop","useCallback","error","Error","formattedMessage","useMemo","ErrorOverlayLayout","errorType","errorMessage","onClose","footerMessage","Terminal","content"],"mappings":";;;;;;;;;;;;;;;IAwBaA,UAAU;eAAVA;;IAyBAC,MAAM;eAANA;;;;;;iEAjD+B;oEACtB;0BACG;oCACU;AAOnC,MAAMC,oCAAoC,CAACC;IACzC,MAAMC,QAAQD,iBAAiBE,KAAK,CAAC;IACrC,iDAAiD;IACjD,4CAA4C;IAC5C,kBAAkB;IAClB,4CAA4C;IAC5C,OAAO;IACP,wBAAwB;IACxB,mBAAmB;IACnB,qBAAqB;IACrB,MAAM;IACN,OAAOC,IAAAA,kBAAS,EAACF,KAAK,CAAC,EAAE,IAAI;AAC/B;AAEO,MAAMJ,aAAwC,SAASA,WAAW,KAGxE;IAHwE,IAAA,EACvEO,OAAO,EACP,GAAGC,OACJ,GAHwE;IAIvE,MAAMC,OAAOC,IAAAA,kBAAW,EAAC,KAAO,GAAG,EAAE;IACrC,MAAMC,QAAQ,qBAAkB,CAAlB,IAAIC,MAAML,UAAV,qBAAA;eAAA;oBAAA;sBAAA;IAAiB;IAC/B,MAAMM,mBAAmBC,IAAAA,cAAO,EAC9B,IAAMZ,kCAAkCK,YAAY,qBACpD;QAACA;KAAQ;IAGX,qBACE,qBAACQ,sCAAkB;QACjBC,WAAU;QACVC,cAAcJ;QACdK,SAAST;QACTE,OAAOA;QACPQ,eAAc;QACb,GAAGX,KAAK;kBAET,cAAA,qBAACY,kBAAQ;YAACC,SAASd;;;AAGzB;AAEO,MAAMN,SAAU"}

package/dist/client/components/react-dev-overlay/ui/container/build-error.stories.js

@@ -38,7 +38,7 @@ const meta = {
 const _default = meta;
 const Default = {
     args: {
-        message: './src/app/page.tsx:3:3\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  1 | export default function Home() {\n  2 |   const\n> 3 |   return <div>Hello World</div>\n    |   ^^^^^^\n  4 | }\n  5 |\n\nExpected identError: Failed to resolve import "./missing-module"',
+        message: './src/app/page.tsx:3:3\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  1 | export default function Home() {\n  2 |   const\n> 3 |   return <div>Hello World</div>\n    |   ^^^^^^\n  4 | }\n  5 |\n\nExpected identError: Failed to resolve import "./missing-module"\n\nhttps://nextjs.org/docs/messages/module-not-found',
         versionInfo: {
             installed: '15.0.0',
             staleness: 'fresh'

package/dist/client/components/react-dev-overlay/ui/container/build-error.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/build-error.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { BuildError } from './build-error'\nimport { withShadowPortal } from '../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof BuildError> = {\n  component: BuildError,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof BuildError>\n\nexport const Default: Story = {\n  args: {\n    message: `./src/app/page.tsx:3:3\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  1 | export default function Home() {\n  2 |   const\n> 3 |   return <div>Hello World</div>\n    |   ^^^^^^\n  4 | }\n  5 |\n\nExpected identError: Failed to resolve import \"./missing-module\"`,\n    versionInfo: {\n      installed: '15.0.0',\n      staleness: 'fresh',\n    },\n  },\n}\n\nexport const Turbopack: Story = {\n  args: {\n    ...Default.args,\n    isTurbopack: true,\n  },\n}\n"],"names":["Default","Turbopack","meta","component","BuildError","parameters","layout","decorators","withShadowPortal","args","message","versionInfo","installed","staleness","isTurbopack"],"mappings":";;;;;;;;;;;;;;;;IAeaA,OAAO;eAAPA;;IAmBAC,SAAS;eAATA;;IAtBb,OAAmB;eAAnB;;;4BAX2B;kCACM;AAEjC,MAAMC,OAAgC;IACpCC,WAAWC,sBAAU;IACrBC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACC,kCAAgB;KAAC;AAChC;MAEA,WAAeN;AAGR,MAAMF,UAAiB;IAC5BS,MAAM;QACJC,SAAU;QAUVC,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;IACF;AACF;AAEO,MAAMZ,YAAmB;IAC9BQ,MAAM;QACJ,GAAGT,QAAQS,IAAI;QACfK,aAAa;IACf;AACF"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/build-error.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { BuildError } from './build-error'\nimport { withShadowPortal } from '../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof BuildError> = {\n  component: BuildError,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof BuildError>\n\nexport const Default: Story = {\n  args: {\n    message: `./src/app/page.tsx:3:3\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n  1 | export default function Home() {\n  2 |   const\n> 3 |   return <div>Hello World</div>\n    |   ^^^^^^\n  4 | }\n  5 |\n\nExpected identError: Failed to resolve import \"./missing-module\"\n\nhttps://nextjs.org/docs/messages/module-not-found`,\n    versionInfo: {\n      installed: '15.0.0',\n      staleness: 'fresh',\n    },\n  },\n}\n\nexport const Turbopack: Story = {\n  args: {\n    ...Default.args,\n    isTurbopack: true,\n  },\n}\n"],"names":["Default","Turbopack","meta","component","BuildError","parameters","layout","decorators","withShadowPortal","args","message","versionInfo","installed","staleness","isTurbopack"],"mappings":";;;;;;;;;;;;;;;;IAeaA,OAAO;eAAPA;;IAqBAC,SAAS;eAATA;;IAxBb,OAAmB;eAAnB;;;4BAX2B;kCACM;AAEjC,MAAMC,OAAgC;IACpCC,WAAWC,sBAAU;IACrBC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACC,kCAAgB;KAAC;AAChC;MAEA,WAAeN;AAGR,MAAMF,UAAiB;IAC5BS,MAAM;QACJC,SAAU;QAYVC,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;IACF;AACF;AAEO,MAAMZ,YAAmB;IAC9BQ,MAAM;QACJ,GAAGT,QAAQS,IAAI;QACfK,aAAa;IACf;AACF"}

package/dist/client/components/react-dev-overlay/ui/container/errors.d.ts

@@ -7,4 +7,4 @@ export interface ErrorsProps extends ErrorBaseProps {
     onClose: () => void;
 }
 export declare function Errors({ runtimeErrors, debugInfo, onClose, ...props }: ErrorsProps): import("react/jsx-runtime").JSX.Element | null;
-export declare const styles: string;
+export declare const styles = "\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    font-size: 14px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3_5);\n  }\n  .error-overlay-notes-container {\n    margin: var(--size-2) var(--size-0_5);\n  }\n  .error-overlay-notes-container p {\n    white-space: pre-wrap;\n  }\n";

package/dist/client/components/react-dev-overlay/ui/container/errors.js

@@ -20,11 +20,9 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _overlay = require("../components/overlay");
-const _nooptemplate = require("../../utils/noop-template");
 const _runtimeerror = require("./runtime-error");
 const _errorsource = require("../../../../../shared/lib/error-source");
 const _hotlinkedtext = require("../components/hot-linked-text");
@@ -33,15 +31,6 @@ const _hydrationerrorinfo = require("../../../errors/hydration-error-info");
 const _consoleerror = require("../../../errors/console-error");
 const _errortelemetryutils = require("../../../../../lib/error-telemetry-utils");
 const _erroroverlaylayout = require("../components/errors/error-overlay-layout/error-overlay-layout");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    font-size: 14px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3_5);\n  }\n  .error-overlay-notes-container {\n    margin: var(--size-2) var(--size-0_5);\n  }\n  .error-overlay-notes-container p {\n    white-space: pre-wrap;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function isNextjsLink(text) {
     return text.startsWith('https://nextjs.org');
 }
@@ -183,7 +172,7 @@ function Errors(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    font-size: 14px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3_5);\n  }\n  .error-overlay-notes-container {\n    margin: var(--size-2) var(--size-0_5);\n  }\n  .error-overlay-notes-container p {\n    white-space: pre-wrap;\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/container/errors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/errors.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useRef, Suspense } from 'react'\nimport type { DebugInfo } from '../../types'\nimport { Overlay } from '../components/overlay'\nimport { noop as css } from '../../utils/noop-template'\nimport { RuntimeError } from './runtime-error'\nimport { getErrorSource } from '../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './runtime-error/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../errors/hydration-error-info'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { ReadyRuntimeError } from '../../utils/get-error-by-type'\nimport type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'\n\nexport interface ErrorsProps extends ErrorBaseProps {\n  runtimeErrors: ReadyRuntimeError[]\n  debugInfo: DebugInfo\n  onClose: () => void\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  const environmentName =\n    'environmentName' in error ? error.environmentName : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n\n  // The environment name will be displayed as a label, so remove it\n  // from the message (e.g. \"[ Server ] hello world\" -> \"hello world\").\n  let message = error.message\n  if (message.startsWith(envPrefix)) {\n    message = message.slice(envPrefix.length)\n  }\n\n  return (\n    <>\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nexport function Errors({\n  runtimeErrors,\n  debugInfo,\n  onClose,\n  ...props\n}: ErrorsProps) {\n  const dialogResizerRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    // Close the error overlay when pressing escape\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [onClose])\n\n  const isLoading = useMemo<boolean>(() => {\n    return runtimeErrors.length < 1\n  }, [runtimeErrors.length])\n\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => runtimeErrors[activeIdx] ?? null,\n    [activeIdx, runtimeErrors]\n  )\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (!activeError) {\n    return null\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  const errorCode = extractNextErrorCode(error)\n\n  const footerMessage = isServerError\n    ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.'\n    : undefined\n\n  return (\n    <ErrorOverlayLayout\n      errorCode={errorCode}\n      errorType={\n        isServerError\n          ? 'Runtime Error'\n          : isUnhandledError\n            ? 'Console Error'\n            : 'Unhandled Runtime Error'\n      }\n      errorMessage={\n        <ErrorDescription error={error} hydrationWarning={hydrationWarning} />\n      }\n      onClose={isServerError ? undefined : onClose}\n      debugInfo={debugInfo}\n      error={error}\n      runtimeErrors={runtimeErrors}\n      activeIdx={activeIdx}\n      setActiveIndex={setActiveIndex}\n      footerMessage={footerMessage}\n      dialogResizerRef={dialogResizerRef}\n      {...props}\n    >\n      <div className=\"error-overlay-notes-container\">\n        {notes ? (\n          <>\n            <p\n              id=\"nextjs__container_errors__notes\"\n              className=\"nextjs__container_errors__notes\"\n            >\n              {notes}\n            </p>\n          </>\n        ) : null}\n        {hydrationWarning ? (\n          <p\n            id=\"nextjs__container_errors__link\"\n            className=\"nextjs__container_errors__link\"\n          >\n            <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n          </p>\n        ) : null}\n      </div>\n\n      {hydrationWarning &&\n      (activeError.componentStackFrames?.length ||\n        !!errorDetails.reactOutputComponentDiff) ? (\n        <PseudoHtmlDiff\n          className=\"nextjs__container_errors__component-stack\"\n          hydrationMismatchType={hydrationErrorType}\n          firstContent={serverContent}\n          secondContent={clientContent}\n          reactOutputComponentDiff={errorDetails.reactOutputComponentDiff || ''}\n        />\n      ) : null}\n      <Suspense fallback={<div data-nextjs-error-suspended />}>\n        <RuntimeError\n          key={activeError.id.toString()}\n          error={activeError}\n          dialogResizerRef={dialogResizerRef}\n        />\n      </Suspense>\n    </ErrorOverlayLayout>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    font-size: 14px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3_5);\n  }\n  .error-overlay-notes-container {\n    margin: var(--size-2) var(--size-0_5);\n  }\n  .error-overlay-notes-container p {\n    white-space: pre-wrap;\n  }\n`\n"],"names":["Errors","styles","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","isUnhandledConsoleOrRejection","unhandledErrorType","getUnhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","slice","length","HotlinkedText","matcher","runtimeErrors","debugInfo","onClose","props","activeError","dialogResizerRef","useRef","useEffect","handleKeyDown","event","key","document","addEventListener","removeEventListener","isLoading","useMemo","activeIdx","setActiveIndex","useState","Overlay","isServerError","includes","getErrorSource","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","getHydrationWarningType","replace","errorCode","extractNextErrorCode","footerMessage","undefined","ErrorOverlayLayout","errorType","errorMessage","div","className","p","id","componentStackFrames","reactOutputComponentDiff","PseudoHtmlDiff","hydrationMismatchType","firstContent","secondContent","Suspense","fallback","data-nextjs-error-suspended","RuntimeError","toString","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/errors.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useRef, Suspense } from 'react'\nimport type { DebugInfo } from '../../types'\nimport { Overlay } from '../components/overlay'\nimport { RuntimeError } from './runtime-error'\nimport { getErrorSource } from '../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './runtime-error/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../errors/hydration-error-info'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { ReadyRuntimeError } from '../../utils/get-error-by-type'\nimport type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'\n\nexport interface ErrorsProps extends ErrorBaseProps {\n  runtimeErrors: ReadyRuntimeError[]\n  debugInfo: DebugInfo\n  onClose: () => void\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  const environmentName =\n    'environmentName' in error ? error.environmentName : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n\n  // The environment name will be displayed as a label, so remove it\n  // from the message (e.g. \"[ Server ] hello world\" -> \"hello world\").\n  let message = error.message\n  if (message.startsWith(envPrefix)) {\n    message = message.slice(envPrefix.length)\n  }\n\n  return (\n    <>\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nexport function Errors({\n  runtimeErrors,\n  debugInfo,\n  onClose,\n  ...props\n}: ErrorsProps) {\n  const dialogResizerRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    // Close the error overlay when pressing escape\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [onClose])\n\n  const isLoading = useMemo<boolean>(() => {\n    return runtimeErrors.length < 1\n  }, [runtimeErrors.length])\n\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => runtimeErrors[activeIdx] ?? null,\n    [activeIdx, runtimeErrors]\n  )\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (!activeError) {\n    return null\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  const errorCode = extractNextErrorCode(error)\n\n  const footerMessage = isServerError\n    ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.'\n    : undefined\n\n  return (\n    <ErrorOverlayLayout\n      errorCode={errorCode}\n      errorType={\n        isServerError\n          ? 'Runtime Error'\n          : isUnhandledError\n            ? 'Console Error'\n            : 'Unhandled Runtime Error'\n      }\n      errorMessage={\n        <ErrorDescription error={error} hydrationWarning={hydrationWarning} />\n      }\n      onClose={isServerError ? undefined : onClose}\n      debugInfo={debugInfo}\n      error={error}\n      runtimeErrors={runtimeErrors}\n      activeIdx={activeIdx}\n      setActiveIndex={setActiveIndex}\n      footerMessage={footerMessage}\n      dialogResizerRef={dialogResizerRef}\n      {...props}\n    >\n      <div className=\"error-overlay-notes-container\">\n        {notes ? (\n          <>\n            <p\n              id=\"nextjs__container_errors__notes\"\n              className=\"nextjs__container_errors__notes\"\n            >\n              {notes}\n            </p>\n          </>\n        ) : null}\n        {hydrationWarning ? (\n          <p\n            id=\"nextjs__container_errors__link\"\n            className=\"nextjs__container_errors__link\"\n          >\n            <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n          </p>\n        ) : null}\n      </div>\n\n      {hydrationWarning &&\n      (activeError.componentStackFrames?.length ||\n        !!errorDetails.reactOutputComponentDiff) ? (\n        <PseudoHtmlDiff\n          className=\"nextjs__container_errors__component-stack\"\n          hydrationMismatchType={hydrationErrorType}\n          firstContent={serverContent}\n          secondContent={clientContent}\n          reactOutputComponentDiff={errorDetails.reactOutputComponentDiff || ''}\n        />\n      ) : null}\n      <Suspense fallback={<div data-nextjs-error-suspended />}>\n        <RuntimeError\n          key={activeError.id.toString()}\n          error={activeError}\n          dialogResizerRef={dialogResizerRef}\n        />\n      </Suspense>\n    </ErrorOverlayLayout>\n  )\n}\n\nexport const styles = `\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    font-size: 14px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3_5);\n  }\n  .error-overlay-notes-container {\n    margin: var(--size-2) var(--size-0_5);\n  }\n  .error-overlay-notes-container p {\n    white-space: pre-wrap;\n  }\n`\n"],"names":["Errors","styles","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","isUnhandledConsoleOrRejection","unhandledErrorType","getUnhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","slice","length","HotlinkedText","matcher","runtimeErrors","debugInfo","onClose","props","activeError","dialogResizerRef","useRef","useEffect","handleKeyDown","event","key","document","addEventListener","removeEventListener","isLoading","useMemo","activeIdx","setActiveIndex","useState","Overlay","isServerError","includes","getErrorSource","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","getHydrationWarningType","replace","errorCode","extractNextErrorCode","footerMessage","undefined","ErrorOverlayLayout","errorType","errorMessage","div","className","p","id","componentStackFrames","reactOutputComponentDiff","PseudoHtmlDiff","hydrationMismatchType","firstContent","secondContent","Suspense","fallback","data-nextjs-error-suspended","RuntimeError","toString"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.d.ts

@@ -1,2 +1,2 @@
 export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view';
-export declare const PSEUDO_HTML_DIFF_STYLES: string;
+export declare const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-2) 0;\n    margin: var(--size-2) 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-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-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  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\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-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\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";

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.js

@@ -20,20 +20,8 @@ _export(exports, {
         return _diffview.PseudoHtmlDiff;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
-const _nooptemplate = require("../../../utils/noop-template");
 const _diffview = require("../../components/hydration-diff/diff-view");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-2) 0;\n    margin: var(--size-2) 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-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-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  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\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-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\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"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
-const PSEUDO_HTML_DIFF_STYLES = (0, _nooptemplate.noop)(_templateObject(), '');
+const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-2) 0;\n    margin: var(--size-2) 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-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-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  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\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-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\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";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["import { noop as css } from '../../../utils/noop-template'\n\nexport { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view'\n\nexport const PSEUDO_HTML_DIFF_STYLES = css`\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-2) 0;\n    margin: var(--size-2) 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-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\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  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\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-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\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`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff","css"],"mappings":";;;;;;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAFJC,cAAc;eAAdA,wBAAc;;;;8BAFK;0BAEG;;;;;;;;;;;AAExB,MAAMD,8BAA0BE,kBAAG,qBAqDU"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view'\n\nexport const PSEUDO_HTML_DIFF_STYLES = `\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-2) 0;\n    margin: var(--size-2) 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-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\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  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\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-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\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`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff"],"mappings":";;;;;;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAFJC,cAAc;eAAdA,wBAAc;;;0BAAQ;AAExB,MAAMD,0BAA2B"}

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/index.d.ts

@@ -4,4 +4,4 @@ export type RuntimeErrorProps = {
     dialogResizerRef: React.RefObject<HTMLDivElement | null>;
 };
 export declare function RuntimeError({ error, dialogResizerRef }: RuntimeErrorProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  \n  [data-nextjs-container-errors-pseudo-html] {\n    padding: var(--size-2) 0;\n    margin: var(--size-2) 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-font-smaller);\n    line-height: var(--size-4);\n    border-radius: var(--size-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: var(--size-3);\n    &:focus {\n      outline: none;\n    }\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\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(var(--size-6) * -1);\n    margin-right: var(--size-6);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-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  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\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-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\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\n";

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/index.js

@@ -20,24 +20,12 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _codeframe = require("../../components/code-frame/code-frame");
 const _callstack = require("../../components/errors/call-stack/call-stack");
-const _nooptemplate = require("../../../utils/noop-template");
 const _componentstackpseudohtml = require("./component-stack-pseudo-html");
 const _geterrorbytype = require("../../../utils/get-error-by-type");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  ",
-        "\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function RuntimeError(param) {
     let { error, dialogResizerRef } = param;
     const frames = (0, _geterrorbytype.useFrames)(error);
@@ -61,7 +49,7 @@ function RuntimeError(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject(), _componentstackpseudohtml.PSEUDO_HTML_DIFF_STYLES);
+const styles = "\n  " + _componentstackpseudohtml.PSEUDO_HTML_DIFF_STYLES + "\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/index.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { CodeFrame } from '../../components/code-frame/code-frame'\nimport { CallStack } from '../../components/errors/call-stack/call-stack'\nimport { noop as css } from '../../../utils/noop-template'\nimport { PSEUDO_HTML_DIFF_STYLES } from './component-stack-pseudo-html'\nimport {\n  useFrames,\n  type ReadyRuntimeError,\n} from '../../../utils/get-error-by-type'\n\nexport type RuntimeErrorProps = {\n  error: ReadyRuntimeError\n  dialogResizerRef: React.RefObject<HTMLDivElement | null>\n}\n\nexport function RuntimeError({ error, dialogResizerRef }: RuntimeErrorProps) {\n  const frames = useFrames(error)\n\n  const firstFrame = useMemo(() => {\n    const firstFirstPartyFrameIndex = frames.findIndex(\n      (entry) =>\n        !entry.ignored &&\n        Boolean(entry.originalCodeFrame) &&\n        Boolean(entry.originalStackFrame)\n    )\n\n    return frames[firstFirstPartyFrameIndex] ?? null\n  }, [frames])\n\n  return (\n    <>\n      {firstFrame && (\n        <CodeFrame\n          stackFrame={firstFrame.originalStackFrame!}\n          codeFrame={firstFrame.originalCodeFrame!}\n        />\n      )}\n\n      {frames.length > 0 && (\n        <CallStack dialogResizerRef={dialogResizerRef} frames={frames} />\n      )}\n    </>\n  )\n}\n\nexport const styles = css`\n  ${PSEUDO_HTML_DIFF_STYLES}\n`\n"],"names":["RuntimeError","styles","error","dialogResizerRef","frames","useFrames","firstFrame","useMemo","firstFirstPartyFrameIndex","findIndex","entry","ignored","Boolean","originalCodeFrame","originalStackFrame","CodeFrame","stackFrame","codeFrame","length","CallStack","css","PSEUDO_HTML_DIFF_STYLES"],"mappings":";;;;;;;;;;;;;;;IAegBA,YAAY;eAAZA;;IA8BHC,MAAM;eAANA;;;;;uBA7CW;2BACE;2BACA;8BACE;0CACY;gCAIjC;;;;;;;;;;;AAOA,SAASD,aAAa,KAA8C;IAA9C,IAAA,EAAEE,KAAK,EAAEC,gBAAgB,EAAqB,GAA9C;IAC3B,MAAMC,SAASC,IAAAA,yBAAS,EAACH;IAEzB,MAAMI,aAAaC,IAAAA,cAAO,EAAC;QACzB,MAAMC,4BAA4BJ,OAAOK,SAAS,CAChD,CAACC,QACC,CAACA,MAAMC,OAAO,IACdC,QAAQF,MAAMG,iBAAiB,KAC/BD,QAAQF,MAAMI,kBAAkB;YAG7BV;QAAP,OAAOA,CAAAA,oCAAAA,MAAM,CAACI,0BAA0B,YAAjCJ,oCAAqC;IAC9C,GAAG;QAACA;KAAO;IAEX,qBACE;;YACGE,4BACC,qBAACS,oBAAS;gBACRC,YAAYV,WAAWQ,kBAAkB;gBACzCG,WAAWX,WAAWO,iBAAiB;;YAI1CT,OAAOc,MAAM,GAAG,mBACf,qBAACC,oBAAS;gBAAChB,kBAAkBA;gBAAkBC,QAAQA;;;;AAI/D;AAEO,MAAMH,aAASmB,kBAAG,qBACrBC,iDAAuB"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/index.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { CodeFrame } from '../../components/code-frame/code-frame'\nimport { CallStack } from '../../components/errors/call-stack/call-stack'\nimport { PSEUDO_HTML_DIFF_STYLES } from './component-stack-pseudo-html'\nimport {\n  useFrames,\n  type ReadyRuntimeError,\n} from '../../../utils/get-error-by-type'\n\nexport type RuntimeErrorProps = {\n  error: ReadyRuntimeError\n  dialogResizerRef: React.RefObject<HTMLDivElement | null>\n}\n\nexport function RuntimeError({ error, dialogResizerRef }: RuntimeErrorProps) {\n  const frames = useFrames(error)\n\n  const firstFrame = useMemo(() => {\n    const firstFirstPartyFrameIndex = frames.findIndex(\n      (entry) =>\n        !entry.ignored &&\n        Boolean(entry.originalCodeFrame) &&\n        Boolean(entry.originalStackFrame)\n    )\n\n    return frames[firstFirstPartyFrameIndex] ?? null\n  }, [frames])\n\n  return (\n    <>\n      {firstFrame && (\n        <CodeFrame\n          stackFrame={firstFrame.originalStackFrame!}\n          codeFrame={firstFrame.originalCodeFrame!}\n        />\n      )}\n\n      {frames.length > 0 && (\n        <CallStack dialogResizerRef={dialogResizerRef} frames={frames} />\n      )}\n    </>\n  )\n}\n\nexport const styles = `\n  ${PSEUDO_HTML_DIFF_STYLES}\n`\n"],"names":["RuntimeError","styles","error","dialogResizerRef","frames","useFrames","firstFrame","useMemo","firstFirstPartyFrameIndex","findIndex","entry","ignored","Boolean","originalCodeFrame","originalStackFrame","CodeFrame","stackFrame","codeFrame","length","CallStack","PSEUDO_HTML_DIFF_STYLES"],"mappings":";;;;;;;;;;;;;;;IAcgBA,YAAY;eAAZA;;IA8BHC,MAAM;eAANA;;;;uBA5CW;2BACE;2BACA;0CACc;gCAIjC;AAOA,SAASD,aAAa,KAA8C;IAA9C,IAAA,EAAEE,KAAK,EAAEC,gBAAgB,EAAqB,GAA9C;IAC3B,MAAMC,SAASC,IAAAA,yBAAS,EAACH;IAEzB,MAAMI,aAAaC,IAAAA,cAAO,EAAC;QACzB,MAAMC,4BAA4BJ,OAAOK,SAAS,CAChD,CAACC,QACC,CAACA,MAAMC,OAAO,IACdC,QAAQF,MAAMG,iBAAiB,KAC/BD,QAAQF,MAAMI,kBAAkB;YAG7BV;QAAP,OAAOA,CAAAA,oCAAAA,MAAM,CAACI,0BAA0B,YAAjCJ,oCAAqC;IAC9C,GAAG;QAACA;KAAO;IAEX,qBACE;;YACGE,4BACC,qBAACS,oBAAS;gBACRC,YAAYV,WAAWQ,kBAAkB;gBACzCG,WAAWX,WAAWO,iBAAiB;;YAI1CT,OAAOc,MAAM,GAAG,mBACf,qBAACC,oBAAS;gBAAChB,kBAAkBA;gBAAkBC,QAAQA;;;;AAI/D;AAEO,MAAMH,SAAS,AAAC,SACnBmB,iDAAuB,GAAC"}