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

package/dist/bin/next

@@ -79,7 +79,7 @@ const program = new NextRootCommand();
 program.name('next').description('The Next.js CLI allows you to develop, build, start your application, and more.').configureHelp({
     formatHelp: (cmd, helper)=>(0, _formatclihelpoutput.formatCliHelpOutput)(cmd, helper),
     subcommandTerm: (cmd)=>`${cmd.name()} ${cmd.usage()}`
-}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.2.0-canary.69"}`, '-v, --version', 'Outputs the Next.js version.');
+}).helpCommand(false).helpOption('-h, --help', 'Displays this message.').version(`Next.js v${"15.2.0-canary.70"}`, '-v, --version', 'Outputs the Next.js version.');
 program.command('build').description('Creates an optimized production build of your application. The output displays information about each route.').argument('[directory]', `A directory on which to build the application. ${(0, _picocolors.italic)('If no directory is provided, the current directory will be used.')}`).option('-d, --debug', 'Enables a more verbose build output.').option('--no-lint', 'Disables linting.').option('--no-mangling', 'Disables mangling.').option('--profile', 'Enables production profiling for React.').option('--experimental-app-only', 'Builds only App Router routes.').addOption(new _commander.Option('--experimental-turbo').hideHelp()).addOption(new _commander.Option('--experimental-build-mode [mode]', 'Uses an experimental build mode.').choices([
     'compile',
     'generate'

package/dist/build/index.js

@@ -364,7 +364,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
         const nextBuildSpan = (0, _trace.trace)('next-build', undefined, {
             buildMode: experimentalBuildMode,
             isTurboBuild: String(turboNextBuild),
-            version: "15.2.0-canary.69"
+            version: "15.2.0-canary.70"
         });
         _buildcontext.NextBuildContext.nextBuildSpan = nextBuildSpan;
         _buildcontext.NextBuildContext.dir = dir;
@@ -723,7 +723,7 @@ async function build(dir, reactProductionProfiling = false, debugOutput = false,
             // Files outside of the distDir can be "type": "module"
             await writeFileUtf8(_path.default.join(distDir, 'package.json'), '{"type": "commonjs"}');
             // These are written to distDir, so they need to come after creating and cleaning distDr.
-            await (0, _builddiagnostics.recordFrameworkVersion)("15.2.0-canary.69");
+            await (0, _builddiagnostics.recordFrameworkVersion)("15.2.0-canary.70");
             await (0, _builddiagnostics.updateBuildDiagnostics)({
                 buildStage: 'start'
             });

package/dist/build/swc/index.js

@@ -119,7 +119,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const nextVersion = "15.2.0-canary.69";
+const nextVersion = "15.2.0-canary.70";
 const ArchName = (0, _os.arch)();
 const PlatformName = (0, _os.platform)();
 function infoLog(...args) {

package/dist/build/webpack-config.js

@@ -1568,7 +1568,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
             isClient && new _copyfileplugin.CopyFilePlugin({
                 // file path to build output of `@next/polyfill-nomodule`
                 filePath: require.resolve('./polyfills/polyfill-nomodule'),
-                cacheKey: "15.2.0-canary.69",
+                cacheKey: "15.2.0-canary.70",
                 name: `static/chunks/polyfills${dev ? '' : '-[hash]'}.js`,
                 minimize: false,
                 info: {
@@ -1800,7 +1800,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
         //  - Next.js location on disk (some loaders use absolute paths and some resolve options depend on absolute paths)
         //  - Next.js version
         //  - next.config.js keys that affect compilation
-        version: `${__dirname}|${"15.2.0-canary.69"}|${configVars}`,
+        version: `${__dirname}|${"15.2.0-canary.70"}|${configVars}`,
         cacheDirectory: _path.default.join(distDir, 'cache', 'webpack'),
         // For production builds, it's more efficient to compress all cache files together instead of compression each one individually.
         // So we disable compression here and allow the build runner to take care of compressing the cache as a whole.

package/dist/client/app-bootstrap.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "appBootstrap", {
         return appBootstrap;
     }
 });
-const version = "15.2.0-canary.69";
+const version = "15.2.0-canary.70";
 window.next = {
     version,
     appDir: true

package/dist/client/components/errors/attach-hydration-error-state.js

@@ -11,10 +11,14 @@ Object.defineProperty(exports, "attachHydrationErrorState", {
 const _ishydrationerror = require("../is-hydration-error");
 const _hydrationerrorinfo = require("./hydration-error-info");
 function attachHydrationErrorState(error) {
-    const reactHydrationDiffSegments = (0, _hydrationerrorinfo.getReactHydrationDiffSegments)(error.message);
     let parsedHydrationErrorState = {};
     const isHydrationWarning = (0, _ishydrationerror.testReactHydrationWarning)(error.message);
     const isHydrationRuntimeError = (0, _ishydrationerror.isHydrationError)(error);
+    // If it's not hydration warnings or errors, skip
+    if (!(isHydrationRuntimeError || isHydrationWarning)) {
+        return;
+    }
+    const reactHydrationDiffSegments = (0, _hydrationerrorinfo.getReactHydrationDiffSegments)(error.message);
     // If the reactHydrationDiffSegments exists
     // and the diff (reactHydrationDiffSegments[1]) exists
     // e.g. the hydration diff log error.
@@ -64,6 +68,7 @@ function attachHydrationErrorState(error) {
             parsedHydrationErrorState.reactOutputComponentDiff = _hydrationerrorinfo.hydrationErrorState.reactOutputComponentDiff;
         }
     }
+    // If it's a hydration error, store the hydration error state into the error object
     ;
     error.details = parsedHydrationErrorState;
 }

package/dist/client/components/errors/attach-hydration-error-state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/components/errors/attach-hydration-error-state.ts"],"sourcesContent":["import {\n  getDefaultHydrationErrorMessage,\n  isHydrationError,\n  testReactHydrationWarning,\n} from '../is-hydration-error'\nimport {\n  hydrationErrorState,\n  getReactHydrationDiffSegments,\n} from './hydration-error-info'\n\nexport function attachHydrationErrorState(error: Error) {\n  const reactHydrationDiffSegments = getReactHydrationDiffSegments(\n    error.message\n  )\n  let parsedHydrationErrorState: typeof hydrationErrorState = {}\n  const isHydrationWarning = testReactHydrationWarning(error.message)\n  const isHydrationRuntimeError = isHydrationError(error)\n  // If the reactHydrationDiffSegments exists\n  // and the diff (reactHydrationDiffSegments[1]) exists\n  // e.g. the hydration diff log error.\n  if (reactHydrationDiffSegments) {\n    const diff = reactHydrationDiffSegments[1]\n    parsedHydrationErrorState = {\n      ...(error as any).details,\n      ...hydrationErrorState,\n      // If diff is present in error, we don't need to pick up the console logged warning.\n      // - if hydration error has diff, and is not hydration diff log, then it's a normal hydration error.\n      // - if hydration error no diff, then leverage the one from the hydration diff log.\n\n      warning: (diff && !isHydrationWarning\n        ? null\n        : hydrationErrorState.warning) || [getDefaultHydrationErrorMessage()],\n      // When it's hydration diff log, do not show notes section.\n      // This condition is only for the 1st squashed error.\n      notes: isHydrationWarning ? '' : reactHydrationDiffSegments[0],\n      reactOutputComponentDiff: diff,\n    }\n    // Cache the `reactOutputComponentDiff` into hydrationErrorState.\n    // This is only required for now when we still squashed the hydration diff log into hydration error.\n    // Once the all error is logged to dev overlay in order, this will go away.\n    if (!hydrationErrorState.reactOutputComponentDiff && diff) {\n      hydrationErrorState.reactOutputComponentDiff = diff\n    }\n    // If it's hydration runtime error that doesn't contain the diff, combine the diff from the cached hydration diff.\n    if (\n      !diff &&\n      isHydrationRuntimeError &&\n      hydrationErrorState.reactOutputComponentDiff\n    ) {\n      parsedHydrationErrorState.reactOutputComponentDiff =\n        hydrationErrorState.reactOutputComponentDiff\n    }\n  } else {\n    // Normal runtime error, where it doesn't contain the hydration diff.\n\n    // If there's any extra information in the error message to display,\n    // append it to the error message details property\n    if (hydrationErrorState.warning) {\n      // The patched console.error found hydration errors logged by React\n      // Append the logged warning to the error message\n      parsedHydrationErrorState = {\n        ...(error as any).details,\n        // It contains the warning, component stack, server and client tag names\n        ...hydrationErrorState,\n      }\n    }\n    // Consume the cached hydration diff.\n    // This is only required for now when we still squashed the hydration diff log into hydration error.\n    // Once the all error is logged to dev overlay in order, this will go away.\n    if (hydrationErrorState.reactOutputComponentDiff) {\n      parsedHydrationErrorState.reactOutputComponentDiff =\n        hydrationErrorState.reactOutputComponentDiff\n    }\n  }\n  ;(error as any).details = parsedHydrationErrorState\n}\n"],"names":["attachHydrationErrorState","error","reactHydrationDiffSegments","getReactHydrationDiffSegments","message","parsedHydrationErrorState","isHydrationWarning","testReactHydrationWarning","isHydrationRuntimeError","isHydrationError","diff","details","hydrationErrorState","warning","getDefaultHydrationErrorMessage","notes","reactOutputComponentDiff"],"mappings":";;;;+BAUgBA;;;eAAAA;;;kCANT;oCAIA;AAEA,SAASA,0BAA0BC,KAAY;IACpD,MAAMC,6BAA6BC,IAAAA,iDAA6B,EAC9DF,MAAMG,OAAO;IAEf,IAAIC,4BAAwD,CAAC;IAC7D,MAAMC,qBAAqBC,IAAAA,2CAAyB,EAACN,MAAMG,OAAO;IAClE,MAAMI,0BAA0BC,IAAAA,kCAAgB,EAACR;IACjD,2CAA2C;IAC3C,sDAAsD;IACtD,qCAAqC;IACrC,IAAIC,4BAA4B;QAC9B,MAAMQ,OAAOR,0BAA0B,CAAC,EAAE;QAC1CG,4BAA4B;YAC1B,GAAG,AAACJ,MAAcU,OAAO;YACzB,GAAGC,uCAAmB;YACtB,oFAAoF;YACpF,oGAAoG;YACpG,mFAAmF;YAEnFC,SAAS,AAACH,CAAAA,QAAQ,CAACJ,qBACf,OACAM,uCAAmB,CAACC,OAAO,AAAD,KAAM;gBAACC,IAAAA,iDAA+B;aAAG;YACvE,2DAA2D;YAC3D,qDAAqD;YACrDC,OAAOT,qBAAqB,KAAKJ,0BAA0B,CAAC,EAAE;YAC9Dc,0BAA0BN;QAC5B;QACA,iEAAiE;QACjE,oGAAoG;QACpG,2EAA2E;QAC3E,IAAI,CAACE,uCAAmB,CAACI,wBAAwB,IAAIN,MAAM;YACzDE,uCAAmB,CAACI,wBAAwB,GAAGN;QACjD;QACA,kHAAkH;QAClH,IACE,CAACA,QACDF,2BACAI,uCAAmB,CAACI,wBAAwB,EAC5C;YACAX,0BAA0BW,wBAAwB,GAChDJ,uCAAmB,CAACI,wBAAwB;QAChD;IACF,OAAO;QACL,qEAAqE;QAErE,oEAAoE;QACpE,kDAAkD;QAClD,IAAIJ,uCAAmB,CAACC,OAAO,EAAE;YAC/B,mEAAmE;YACnE,iDAAiD;YACjDR,4BAA4B;gBAC1B,GAAG,AAACJ,MAAcU,OAAO;gBACzB,wEAAwE;gBACxE,GAAGC,uCAAmB;YACxB;QACF;QACA,qCAAqC;QACrC,oGAAoG;QACpG,2EAA2E;QAC3E,IAAIA,uCAAmB,CAACI,wBAAwB,EAAE;YAChDX,0BAA0BW,wBAAwB,GAChDJ,uCAAmB,CAACI,wBAAwB;QAChD;IACF;;IACEf,MAAcU,OAAO,GAAGN;AAC5B"}
+{"version":3,"sources":["../../../../src/client/components/errors/attach-hydration-error-state.ts"],"sourcesContent":["import {\n  getDefaultHydrationErrorMessage,\n  isHydrationError,\n  testReactHydrationWarning,\n} from '../is-hydration-error'\nimport {\n  hydrationErrorState,\n  getReactHydrationDiffSegments,\n} from './hydration-error-info'\n\nexport function attachHydrationErrorState(error: Error) {\n  let parsedHydrationErrorState: typeof hydrationErrorState = {}\n  const isHydrationWarning = testReactHydrationWarning(error.message)\n  const isHydrationRuntimeError = isHydrationError(error)\n\n  // If it's not hydration warnings or errors, skip\n  if (!(isHydrationRuntimeError || isHydrationWarning)) {\n    return\n  }\n\n  const reactHydrationDiffSegments = getReactHydrationDiffSegments(\n    error.message\n  )\n  // If the reactHydrationDiffSegments exists\n  // and the diff (reactHydrationDiffSegments[1]) exists\n  // e.g. the hydration diff log error.\n  if (reactHydrationDiffSegments) {\n    const diff = reactHydrationDiffSegments[1]\n    parsedHydrationErrorState = {\n      ...(error as any).details,\n      ...hydrationErrorState,\n      // If diff is present in error, we don't need to pick up the console logged warning.\n      // - if hydration error has diff, and is not hydration diff log, then it's a normal hydration error.\n      // - if hydration error no diff, then leverage the one from the hydration diff log.\n\n      warning: (diff && !isHydrationWarning\n        ? null\n        : hydrationErrorState.warning) || [getDefaultHydrationErrorMessage()],\n      // When it's hydration diff log, do not show notes section.\n      // This condition is only for the 1st squashed error.\n      notes: isHydrationWarning ? '' : reactHydrationDiffSegments[0],\n      reactOutputComponentDiff: diff,\n    }\n    // Cache the `reactOutputComponentDiff` into hydrationErrorState.\n    // This is only required for now when we still squashed the hydration diff log into hydration error.\n    // Once the all error is logged to dev overlay in order, this will go away.\n    if (!hydrationErrorState.reactOutputComponentDiff && diff) {\n      hydrationErrorState.reactOutputComponentDiff = diff\n    }\n    // If it's hydration runtime error that doesn't contain the diff, combine the diff from the cached hydration diff.\n    if (\n      !diff &&\n      isHydrationRuntimeError &&\n      hydrationErrorState.reactOutputComponentDiff\n    ) {\n      parsedHydrationErrorState.reactOutputComponentDiff =\n        hydrationErrorState.reactOutputComponentDiff\n    }\n  } else {\n    // Normal runtime error, where it doesn't contain the hydration diff.\n\n    // If there's any extra information in the error message to display,\n    // append it to the error message details property\n    if (hydrationErrorState.warning) {\n      // The patched console.error found hydration errors logged by React\n      // Append the logged warning to the error message\n      parsedHydrationErrorState = {\n        ...(error as any).details,\n        // It contains the warning, component stack, server and client tag names\n        ...hydrationErrorState,\n      }\n    }\n    // Consume the cached hydration diff.\n    // This is only required for now when we still squashed the hydration diff log into hydration error.\n    // Once the all error is logged to dev overlay in order, this will go away.\n    if (hydrationErrorState.reactOutputComponentDiff) {\n      parsedHydrationErrorState.reactOutputComponentDiff =\n        hydrationErrorState.reactOutputComponentDiff\n    }\n  }\n  // If it's a hydration error, store the hydration error state into the error object\n  ;(error as any).details = parsedHydrationErrorState\n}\n"],"names":["attachHydrationErrorState","error","parsedHydrationErrorState","isHydrationWarning","testReactHydrationWarning","message","isHydrationRuntimeError","isHydrationError","reactHydrationDiffSegments","getReactHydrationDiffSegments","diff","details","hydrationErrorState","warning","getDefaultHydrationErrorMessage","notes","reactOutputComponentDiff"],"mappings":";;;;+BAUgBA;;;eAAAA;;;kCANT;oCAIA;AAEA,SAASA,0BAA0BC,KAAY;IACpD,IAAIC,4BAAwD,CAAC;IAC7D,MAAMC,qBAAqBC,IAAAA,2CAAyB,EAACH,MAAMI,OAAO;IAClE,MAAMC,0BAA0BC,IAAAA,kCAAgB,EAACN;IAEjD,iDAAiD;IACjD,IAAI,CAAEK,CAAAA,2BAA2BH,kBAAiB,GAAI;QACpD;IACF;IAEA,MAAMK,6BAA6BC,IAAAA,iDAA6B,EAC9DR,MAAMI,OAAO;IAEf,2CAA2C;IAC3C,sDAAsD;IACtD,qCAAqC;IACrC,IAAIG,4BAA4B;QAC9B,MAAME,OAAOF,0BAA0B,CAAC,EAAE;QAC1CN,4BAA4B;YAC1B,GAAG,AAACD,MAAcU,OAAO;YACzB,GAAGC,uCAAmB;YACtB,oFAAoF;YACpF,oGAAoG;YACpG,mFAAmF;YAEnFC,SAAS,AAACH,CAAAA,QAAQ,CAACP,qBACf,OACAS,uCAAmB,CAACC,OAAO,AAAD,KAAM;gBAACC,IAAAA,iDAA+B;aAAG;YACvE,2DAA2D;YAC3D,qDAAqD;YACrDC,OAAOZ,qBAAqB,KAAKK,0BAA0B,CAAC,EAAE;YAC9DQ,0BAA0BN;QAC5B;QACA,iEAAiE;QACjE,oGAAoG;QACpG,2EAA2E;QAC3E,IAAI,CAACE,uCAAmB,CAACI,wBAAwB,IAAIN,MAAM;YACzDE,uCAAmB,CAACI,wBAAwB,GAAGN;QACjD;QACA,kHAAkH;QAClH,IACE,CAACA,QACDJ,2BACAM,uCAAmB,CAACI,wBAAwB,EAC5C;YACAd,0BAA0Bc,wBAAwB,GAChDJ,uCAAmB,CAACI,wBAAwB;QAChD;IACF,OAAO;QACL,qEAAqE;QAErE,oEAAoE;QACpE,kDAAkD;QAClD,IAAIJ,uCAAmB,CAACC,OAAO,EAAE;YAC/B,mEAAmE;YACnE,iDAAiD;YACjDX,4BAA4B;gBAC1B,GAAG,AAACD,MAAcU,OAAO;gBACzB,wEAAwE;gBACxE,GAAGC,uCAAmB;YACxB;QACF;QACA,qCAAqC;QACrC,oGAAoG;QACpG,2EAA2E;QAC3E,IAAIA,uCAAmB,CAACI,wBAAwB,EAAE;YAChDd,0BAA0Bc,wBAAwB,GAChDJ,uCAAmB,CAACI,wBAAwB;QAChD;IACF;IACA,mFAAmF;;IACjFf,MAAcU,OAAO,GAAGT;AAC5B"}

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "FontStyles", {
     }
 });
 const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
-const _nooptemplate = require("../utils/noop-template");
+const _css = require("../utils/css");
 const _react = require("react");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
@@ -23,7 +23,7 @@ function _templateObject() {
 const FontStyles = ()=>{
     (0, _react.useInsertionEffect)(()=>{
         const style = document.createElement('style');
-        style.textContent = (0, _nooptemplate.noop)(_templateObject());
+        style.textContent = (0, _css.css)(_templateObject());
         document.head.appendChild(style);
         return ()=>{
             document.head.removeChild(style);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/font/font-styles.tsx"],"sourcesContent":["import { noop as css } from '../utils/noop-template'\nimport { useInsertionEffect } from 'react'\n\nexport const FontStyles = () => {\n  useInsertionEffect(() => {\n    const style = document.createElement('style')\n    style.textContent = css`\n      /* latin-ext */\n      @font-face {\n        font-family: '__nextjs-Geist';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-latin-ext.woff2) format('woff2');\n        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,\n          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,\n          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,\n          U+A720-A7FF;\n      }\n      /* latin-ext */\n      @font-face {\n        font-family: '__nextjs-Geist Mono';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-mono-latin-ext.woff2) format('woff2');\n        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,\n          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,\n          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,\n          U+A720-A7FF;\n      }\n      /* latin */\n      @font-face {\n        font-family: '__nextjs-Geist';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-latin.woff2) format('woff2');\n        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,\n          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,\n          U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n      }\n      /* latin */\n      @font-face {\n        font-family: '__nextjs-Geist Mono';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-mono-latin.woff2) format('woff2');\n        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,\n          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,\n          U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n      }\n    `\n    document.head.appendChild(style)\n\n    return () => {\n      document.head.removeChild(style)\n    }\n  }, [])\n\n  return null\n}\n"],"names":["FontStyles","useInsertionEffect","style","document","createElement","textContent","css","head","appendChild","removeChild"],"mappings":";;;;+BAGaA;;;eAAAA;;;;8BAHe;uBACO;;;;;;;;;;AAE5B,MAAMA,aAAa;IACxBC,IAAAA,yBAAkB,EAAC;QACjB,MAAMC,QAAQC,SAASC,aAAa,CAAC;QACrCF,MAAMG,WAAW,OAAGC,kBAAG;QAgDvBH,SAASI,IAAI,CAACC,WAAW,CAACN;QAE1B,OAAO;YACLC,SAASI,IAAI,CAACE,WAAW,CAACP;QAC5B;IACF,GAAG,EAAE;IAEL,OAAO;AACT"}
+{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/font/font-styles.tsx"],"sourcesContent":["import { css } from '../utils/css'\nimport { useInsertionEffect } from 'react'\n\nexport const FontStyles = () => {\n  useInsertionEffect(() => {\n    const style = document.createElement('style')\n    style.textContent = css`\n      /* latin-ext */\n      @font-face {\n        font-family: '__nextjs-Geist';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-latin-ext.woff2) format('woff2');\n        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,\n          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,\n          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,\n          U+A720-A7FF;\n      }\n      /* latin-ext */\n      @font-face {\n        font-family: '__nextjs-Geist Mono';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-mono-latin-ext.woff2) format('woff2');\n        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,\n          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,\n          U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,\n          U+A720-A7FF;\n      }\n      /* latin */\n      @font-face {\n        font-family: '__nextjs-Geist';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-latin.woff2) format('woff2');\n        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,\n          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,\n          U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n      }\n      /* latin */\n      @font-face {\n        font-family: '__nextjs-Geist Mono';\n        font-style: normal;\n        font-weight: 400 600;\n        font-display: swap;\n        src: url(/__nextjs_font/geist-mono-latin.woff2) format('woff2');\n        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,\n          U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,\n          U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n      }\n    `\n    document.head.appendChild(style)\n\n    return () => {\n      document.head.removeChild(style)\n    }\n  }, [])\n\n  return null\n}\n"],"names":["FontStyles","useInsertionEffect","style","document","createElement","textContent","css","head","appendChild","removeChild"],"mappings":";;;;+BAGaA;;;eAAAA;;;;qBAHO;uBACe;;;;;;;;;;AAE5B,MAAMA,aAAa;IACxBC,IAAAA,yBAAkB,EAAC;QACjB,MAAMC,QAAQC,SAASC,aAAa,CAAC;QACrCF,MAAMG,WAAW,OAAGC,QAAG;QAgDvBH,SAASI,IAAI,CAACC,WAAW,CAACN;QAE1B,OAAO;YACLC,SAASI,IAAI,CAACE,WAAW,CAACP;QAC5B;IACF,GAAG,EAAE;IAEL,OAAO;AACT"}

package/dist/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.d.ts

@@ -3,4 +3,4 @@ export declare const CallStackFrame: React.FC<{
     frame: OriginalStackFrame;
     index: number;
 }>;
-export declare const CALL_STACK_FRAME_STYLES: string;
+export declare const CALL_STACK_FRAME_STYLES = "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: var(--size-1_5) var(--size-2);\n    margin-bottom: var(--size-1);\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: var(--size-1);\n\n    margin-bottom: var(--size-1);\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.js

@@ -20,22 +20,11 @@ _export(exports, {
         return CallStackFrame;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _hotlinkedtext = require("../hot-linked-text");
 const _external = require("../../icons/external");
 const _stackframe = require("../../../utils/stack-frame");
 const _useopenineditor = require("../../utils/use-open-in-editor");
-const _nooptemplate = require("../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: var(--size-1_5) var(--size-2);\n    margin-bottom: var(--size-1);\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: var(--size-1);\n\n    margin-bottom: var(--size-1);\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 const CallStackFrame = function CallStackFrame(param) {
     let { frame, index } = param;
     var _frame_originalStackFrame;
@@ -89,7 +78,7 @@ const CallStackFrame = function CallStackFrame(param) {
         ]
     });
 };
-const CALL_STACK_FRAME_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const CALL_STACK_FRAME_STYLES = "\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: var(--size-1_5) var(--size-2);\n    margin-bottom: var(--size-1);\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: var(--size-1);\n\n    margin-bottom: var(--size-1);\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\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/call-stack-frame/call-stack-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type { OriginalStackFrame } from '../../../utils/stack-frame'\n\nimport { HotlinkedText } from '../hot-linked-text'\nimport { ExternalIcon } from '../../icons/external'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { noop as css } from '../../../utils/noop-template'\n\nexport const CallStackFrame: React.FC<{\n  frame: OriginalStackFrame\n  index: number\n}> = function CallStackFrame({ frame, index }) {\n  // TODO: ability to expand resolved frames\n  // TODO: render error or external indicator\n\n  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame\n  const hasSource = Boolean(frame.originalCodeFrame)\n  const open = useOpenInEditor(\n    hasSource\n      ? {\n          file: f.file,\n          lineNumber: f.lineNumber,\n          column: f.column,\n        }\n      : undefined\n  )\n\n  // Format method to strip out the webpack layer prefix.\n  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx\n  const formattedMethod = f.methodName.replace(/^\\([\\w-]+\\)\\//, '')\n\n  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,\n  // we'll skip rendering the frame in this case.\n  const fileSource = getFrameSource(f)\n\n  if (!fileSource) {\n    return null\n  }\n\n  return (\n    <div\n      data-nextjs-call-stack-frame\n      data-nextjs-call-stack-frame-ignored={!hasSource}\n      style={\n        {\n          '--index': index,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        data-nextjs-frame-expanded={!frame.ignored}\n        className=\"call-stack-frame-method-name\"\n      >\n        <HotlinkedText text={formattedMethod} />\n        {hasSource && (\n          <button onClick={open} className=\"open-in-editor-button\">\n            <ExternalIcon width={16} height={16} />\n          </button>\n        )}\n      </div>\n      <span\n        className=\"call-stack-frame-file-source\"\n        data-has-source={hasSource}\n      >\n        {fileSource}\n      </span>\n    </div>\n  )\n}\n\nexport const CALL_STACK_FRAME_STYLES = css`\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: var(--size-1_5) var(--size-2);\n    margin-bottom: var(--size-1);\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: var(--size-1);\n\n    margin-bottom: var(--size-1);\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n  }\n`\n"],"names":["CALL_STACK_FRAME_STYLES","CallStackFrame","frame","index","f","originalStackFrame","sourceStackFrame","hasSource","Boolean","originalCodeFrame","open","useOpenInEditor","file","lineNumber","column","undefined","formattedMethod","methodName","replace","fileSource","getFrameSource","div","data-nextjs-call-stack-frame","data-nextjs-call-stack-frame-ignored","style","data-nextjs-frame-expanded","ignored","className","HotlinkedText","text","button","onClick","ExternalIcon","width","height","span","data-has-source","css"],"mappings":";;;;;;;;;;;;;;;IAuEaA,uBAAuB;eAAvBA;;IA9DAC,cAAc;eAAdA;;;;;+BANiB;0BACD;4BACE;iCACC;8BACJ;;;;;;;;;;AAErB,MAAMA,iBAGR,SAASA,eAAe,KAAgB;IAAhB,IAAA,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAhB;QAILD;IAHtB,0CAA0C;IAC1C,2CAA2C;IAE3C,MAAME,IAAgBF,CAAAA,4BAAAA,MAAMG,kBAAkB,YAAxBH,4BAA4BA,MAAMI,gBAAgB;IACxE,MAAMC,YAAYC,QAAQN,MAAMO,iBAAiB;IACjD,MAAMC,OAAOC,IAAAA,gCAAe,EAC1BJ,YACI;QACEK,MAAMR,EAAEQ,IAAI;QACZC,YAAYT,EAAES,UAAU;QACxBC,QAAQV,EAAEU,MAAM;IAClB,IACAC;IAGN,uDAAuD;IACvD,4DAA4D;IAC5D,MAAMC,kBAAkBZ,EAAEa,UAAU,CAACC,OAAO,CAAC,iBAAiB;IAE9D,4FAA4F;IAC5F,+CAA+C;IAC/C,MAAMC,aAAaC,IAAAA,0BAAc,EAAChB;IAElC,IAAI,CAACe,YAAY;QACf,OAAO;IACT;IAEA,qBACE,sBAACE;QACCC,8BAA4B;QAC5BC,wCAAsC,CAAChB;QACvCiB,OACE;YACE,WAAWrB;QACb;;0BAGF,sBAACkB;gBACCI,8BAA4B,CAACvB,MAAMwB,OAAO;gBAC1CC,WAAU;;kCAEV,qBAACC,4BAAa;wBAACC,MAAMb;;oBACpBT,2BACC,qBAACuB;wBAAOC,SAASrB;wBAAMiB,WAAU;kCAC/B,cAAA,qBAACK,sBAAY;4BAACC,OAAO;4BAAIC,QAAQ;;;;;0BAIvC,qBAACC;gBACCR,WAAU;gBACVS,mBAAiB7B;0BAEhBY;;;;AAIT;AAEO,MAAMnB,8BAA0BqC,kBAAG"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type { OriginalStackFrame } from '../../../utils/stack-frame'\n\nimport { HotlinkedText } from '../hot-linked-text'\nimport { ExternalIcon } from '../../icons/external'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\n\nexport const CallStackFrame: React.FC<{\n  frame: OriginalStackFrame\n  index: number\n}> = function CallStackFrame({ frame, index }) {\n  // TODO: ability to expand resolved frames\n  // TODO: render error or external indicator\n\n  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame\n  const hasSource = Boolean(frame.originalCodeFrame)\n  const open = useOpenInEditor(\n    hasSource\n      ? {\n          file: f.file,\n          lineNumber: f.lineNumber,\n          column: f.column,\n        }\n      : undefined\n  )\n\n  // Format method to strip out the webpack layer prefix.\n  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx\n  const formattedMethod = f.methodName.replace(/^\\([\\w-]+\\)\\//, '')\n\n  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,\n  // we'll skip rendering the frame in this case.\n  const fileSource = getFrameSource(f)\n\n  if (!fileSource) {\n    return null\n  }\n\n  return (\n    <div\n      data-nextjs-call-stack-frame\n      data-nextjs-call-stack-frame-ignored={!hasSource}\n      style={\n        {\n          '--index': index,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        data-nextjs-frame-expanded={!frame.ignored}\n        className=\"call-stack-frame-method-name\"\n      >\n        <HotlinkedText text={formattedMethod} />\n        {hasSource && (\n          <button onClick={open} className=\"open-in-editor-button\">\n            <ExternalIcon width={16} height={16} />\n          </button>\n        )}\n      </div>\n      <span\n        className=\"call-stack-frame-file-source\"\n        data-has-source={hasSource}\n      >\n        {fileSource}\n      </span>\n    </div>\n  )\n}\n\nexport const CALL_STACK_FRAME_STYLES = `\n  [data-nextjs-call-stack-frame-ignored] {\n    padding: var(--size-1_5) var(--size-2);\n    margin-bottom: var(--size-1);\n\n    border-radius: var(--rounded-lg);\n  }\n\n  [data-nextjs-call-stack-frame-ignored]:last-child {\n    margin-bottom: 0;\n  }\n\n  [data-nextjs-call-stack-frame] {\n    user-select: text;\n    display: block;\n    box-sizing: border-box;\n\n    user-select: text;\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n\n    padding: 6px 8px;\n\n    border-radius: var(--rounded-lg);\n  }\n\n  .call-stack-frame-method-name {\n    display: flex;\n    align-items: center;\n    gap: var(--size-1);\n\n    margin-bottom: var(--size-1);\n    font-family: var(--font-stack-monospace);\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .open-in-editor-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--rounded-full);\n    padding: 4px;\n    color: var(--color-font);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .call-stack-frame-file-source {\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n  }\n`\n"],"names":["CALL_STACK_FRAME_STYLES","CallStackFrame","frame","index","f","originalStackFrame","sourceStackFrame","hasSource","Boolean","originalCodeFrame","open","useOpenInEditor","file","lineNumber","column","undefined","formattedMethod","methodName","replace","fileSource","getFrameSource","div","data-nextjs-call-stack-frame","data-nextjs-call-stack-frame-ignored","style","data-nextjs-frame-expanded","ignored","className","HotlinkedText","text","button","onClick","ExternalIcon","width","height","span","data-has-source"],"mappings":";;;;;;;;;;;;;;;IAsEaA,uBAAuB;eAAvBA;;IA9DAC,cAAc;eAAdA;;;;+BALiB;0BACD;4BACE;iCACC;AAEzB,MAAMA,iBAGR,SAASA,eAAe,KAAgB;IAAhB,IAAA,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAhB;QAILD;IAHtB,0CAA0C;IAC1C,2CAA2C;IAE3C,MAAME,IAAgBF,CAAAA,4BAAAA,MAAMG,kBAAkB,YAAxBH,4BAA4BA,MAAMI,gBAAgB;IACxE,MAAMC,YAAYC,QAAQN,MAAMO,iBAAiB;IACjD,MAAMC,OAAOC,IAAAA,gCAAe,EAC1BJ,YACI;QACEK,MAAMR,EAAEQ,IAAI;QACZC,YAAYT,EAAES,UAAU;QACxBC,QAAQV,EAAEU,MAAM;IAClB,IACAC;IAGN,uDAAuD;IACvD,4DAA4D;IAC5D,MAAMC,kBAAkBZ,EAAEa,UAAU,CAACC,OAAO,CAAC,iBAAiB;IAE9D,4FAA4F;IAC5F,+CAA+C;IAC/C,MAAMC,aAAaC,IAAAA,0BAAc,EAAChB;IAElC,IAAI,CAACe,YAAY;QACf,OAAO;IACT;IAEA,qBACE,sBAACE;QACCC,8BAA4B;QAC5BC,wCAAsC,CAAChB;QACvCiB,OACE;YACE,WAAWrB;QACb;;0BAGF,sBAACkB;gBACCI,8BAA4B,CAACvB,MAAMwB,OAAO;gBAC1CC,WAAU;;kCAEV,qBAACC,4BAAa;wBAACC,MAAMb;;oBACpBT,2BACC,qBAACuB;wBAAOC,SAASrB;wBAAMiB,WAAU;kCAC/B,cAAA,qBAACK,sBAAY;4BAACC,OAAO;4BAAIC,QAAQ;;;;;0BAIvC,qBAACC;gBACCR,WAAU;gBACVS,mBAAiB7B;0BAEhBY;;;;AAIT;AAEO,MAAMnB,0BAA2B"}

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.d.ts

@@ -4,4 +4,4 @@ export type CodeFrameProps = {
     codeFrame: string;
 };
 export declare function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps): import("react/jsx-runtime").JSX.Element;
-export declare const CODE_FRAME_STYLES: string;
+export declare const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: 12px;\n    line-height: 16px;\n    margin: var(--size-2) 0;\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";

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

@@ -21,7 +21,6 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-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 _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
@@ -29,18 +28,8 @@ const _react = require("react");
 const _hotlinkedtext = require("../hot-linked-text");
 const _stackframe = require("../../../utils/stack-frame");
 const _useopenineditor = require("../../utils/use-open-in-editor");
-const _nooptemplate = require("../../../utils/noop-template");
 const _external = require("../../icons/external");
 const _file = require("../../icons/file");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: 12px;\n    line-height: 16px;\n    margin: var(--size-2) 0;\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function CodeFrame(param) {
     let { stackFrame, codeFrame } = param;
     var _stackFrame_file;
@@ -134,7 +123,7 @@ function CodeFrame(param) {
         ]
     });
 }
-const CODE_FRAME_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: 12px;\n    line-height: 16px;\n    margin: var(--size-2) 0;\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-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/components/code-frame/code-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\n\nimport Anser from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { noop as css } from '../../../utils/noop-template'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n  // Strip leading spaces out of the code frame:\n  const formattedFrame = useMemo<string>(() => {\n    const lines = codeFrame.split(/\\r?\\n/g)\n\n    // Find the minimum length of leading spaces after `|` in the code frame\n    const miniLeadingSpacesLength = lines\n      .map((line) =>\n        /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n          ? null\n          : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n      )\n      .filter(Boolean)\n      .map((v) => v!.pop()!)\n      .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n    // When the minimum length of leading spaces is greater than 1, remove them\n    // from the code frame to help the indentation looks better when there's a lot leading spaces.\n    if (miniLeadingSpacesLength > 1) {\n      return lines\n        .map((line, a) =>\n          ~(a = line.indexOf('|'))\n            ? line.substring(0, a) +\n              line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n            : line\n        )\n        .join('\\n')\n    }\n    return lines.join('\\n')\n  }, [codeFrame])\n\n  const decoded = useMemo(() => {\n    return Anser.ansiToJson(formattedFrame, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [formattedFrame])\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        {/* TODO: This is <div> in `Terminal` component.\n        Changing now will require multiple test snapshots updates.\n        Leaving as <div> as is trivial and does not affect the UI.\n        Change when the new redbox matcher `toDisplayRedbox` is used.\n        */}\n        <p className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\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        </p>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decoded.map((entry, index) => (\n          <span\n            key={`frame-${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            {entry.content}\n          </span>\n        ))}\n      </pre>\n    </div>\n  )\n}\n\nexport const CODE_FRAME_STYLES = css`\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: 12px;\n    line-height: 16px;\n    margin: var(--size-2) 0;\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","css"],"mappings":";;;;;;;;;;;;;;;IAkHaA,iBAAiB;eAAjBA;;IAnGGC,SAAS;eAATA;;;;;;gEAbE;oEACI;uBAEE;+BACM;4BACC;iCACC;8BACJ;0BACC;sBACJ;;;;;;;;;;AAIlB,SAASA,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QA6CFD;IA5CtB,8CAA8C;IAC9C,MAAME,iBAAiBC,IAAAA,cAAO,EAAS;QACrC,MAAMC,QAAQH,UAAUI,KAAK,CAAC;QAE9B,wEAAwE;QACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,QAExCG,MAAM,CAACC,SACPL,GAAG,CAAC,CAACM,IAAMA,EAAGC,GAAG,IACjBC,MAAM,CAAC,CAACC,GAAGC,IAAOC,MAAMF,KAAKC,EAAEE,MAAM,GAAGC,KAAKC,GAAG,CAACL,GAAGC,EAAEE,MAAM,GAAIG;QAEnE,2EAA2E;QAC3E,8FAA8F;QAC9F,IAAIhB,0BAA0B,GAAG;YAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMe,IACV,CAAEA,CAAAA,IAAIf,KAAKgB,OAAO,CAAC,IAAG,IAClBhB,KAAKiB,SAAS,CAAC,GAAGF,KAClBf,KAAKiB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOpB,0BAAwB,KAAI,MAC9DE,MAELmB,IAAI,CAAC;QACV;QACA,OAAOvB,MAAMuB,IAAI,CAAC;IACpB,GAAG;QAAC1B;KAAU;IAEd,MAAM2B,UAAUzB,IAAAA,cAAO,EAAC;QACtB,OAAO0B,cAAK,CAACC,UAAU,CAAC5B,gBAAgB;YACtC6B,MAAM;YACNC,aAAa;YACbC,cAAc;QAChB;IACF,GAAG;QAAC/B;KAAe;IAEnB,MAAMgC,OAAOC,IAAAA,gCAAe,EAAC;QAC3BC,MAAMpC,WAAWoC,IAAI;QACrBC,YAAYrC,WAAWqC,UAAU;QACjCC,QAAQtC,WAAWsC,MAAM;IAC3B;IAEA,MAAMC,gBAAgBvC,+BAAAA,mBAAAA,WAAYoC,IAAI,qBAAhBpC,iBAAkBK,KAAK,CAAC,KAAKS,GAAG;IAEtD,gCAAgC;IAChC,qBACE,sBAAC0B;QAAIC,uBAAqB;;0BACxB,qBAACD;gBAAIE,WAAU;0BAMb,cAAA,sBAACC;oBAAED,WAAU;;sCACX,qBAACE;4BAAKF,WAAU;sCACd,cAAA,qBAACG,cAAQ;gCAACC,MAAMP;;;sCAElB,sBAACK;4BAAKG,WAAS;;gCACZC,IAAAA,0BAAc,EAAChD;gCAAY;gCAAG;8CAC/B,qBAACiD,4BAAa;oCAACC,MAAMlD,WAAWmD,UAAU;;;;sCAE5C,qBAACC;4BACCC,cAAW;4BACXC,2CAAyC;4BACzCC,SAASrB;sCAET,cAAA,qBAACU;gCAAKF,WAAU;gCAAkBc,aAAU;0CAC1C,cAAA,qBAACC,sBAAY;oCAACC,OAAO;oCAAIC,QAAQ;;;;;;;0BAKzC,qBAACC;gBAAIlB,WAAU;0BACZd,QAAQrB,GAAG,CAAC,CAACsD,OAAOC,sBACnB,qBAAClB;wBAECmB,OAAO;4BACLC,OAAOH,MAAMI,EAAE,GAAG,AAAC,iBAAcJ,MAAMI,EAAE,GAAC,MAAKC;4BAC/C,GAAIL,MAAMM,UAAU,KAAK,SAErB,8DAA8D;4BAC9D,2DAA2D;4BAC3D;gCAAEC,YAAY;4BAAI,IAClBP,MAAMM,UAAU,KAAK,WACnB;gCAAEE,WAAW;4BAAS,IACtBH,SAAS;wBACjB;kCAECL,MAAMS,OAAO;uBAbT,AAAC,WAAQR;;;;AAmB1B;AAEO,MAAMhE,wBAAoByE,kBAAG"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\n\nimport Anser from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n  // Strip leading spaces out of the code frame:\n  const formattedFrame = useMemo<string>(() => {\n    const lines = codeFrame.split(/\\r?\\n/g)\n\n    // Find the minimum length of leading spaces after `|` in the code frame\n    const miniLeadingSpacesLength = lines\n      .map((line) =>\n        /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n          ? null\n          : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n      )\n      .filter(Boolean)\n      .map((v) => v!.pop()!)\n      .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n    // When the minimum length of leading spaces is greater than 1, remove them\n    // from the code frame to help the indentation looks better when there's a lot leading spaces.\n    if (miniLeadingSpacesLength > 1) {\n      return lines\n        .map((line, a) =>\n          ~(a = line.indexOf('|'))\n            ? line.substring(0, a) +\n              line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n            : line\n        )\n        .join('\\n')\n    }\n    return lines.join('\\n')\n  }, [codeFrame])\n\n  const decoded = useMemo(() => {\n    return Anser.ansiToJson(formattedFrame, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [formattedFrame])\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        {/* TODO: This is <div> in `Terminal` component.\n        Changing now will require multiple test snapshots updates.\n        Leaving as <div> as is trivial and does not affect the UI.\n        Change when the new redbox matcher `toDisplayRedbox` is used.\n        */}\n        <p className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\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        </p>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decoded.map((entry, index) => (\n          <span\n            key={`frame-${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            {entry.content}\n          </span>\n        ))}\n      </pre>\n    </div>\n  )\n}\n\nexport const CODE_FRAME_STYLES = `\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: 12px;\n    line-height: 16px;\n    margin: var(--size-2) 0;\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/ui/components/copy-button/index.d.ts

@@ -5,4 +5,4 @@ export declare function CopyButton({ actionLabel, successLabel, content, icon, d
     content: string;
     icon?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const COPY_BUTTON_STYLES: string;
+export declare const COPY_BUTTON_STYLES = "\n  .nextjs-data-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-copy-button--error,\n  .nextjs-data-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/copy-button/index.js

@@ -21,20 +21,9 @@ _export(exports, {
     }
 });
 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 _nooptemplate = require("../../../utils/noop-template");
 const _cx = require("../../utils/cx");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs-data-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-copy-button--error,\n  .nextjs-data-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function useCopyLegacy(content) {
     // This would be simpler with useActionState but we need to support React 18 here.
     // React 18 also doesn't have async transitions.
@@ -241,7 +230,7 @@ function CopySuccessIcon() {
         })
     });
 }
-const COPY_BUTTON_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const COPY_BUTTON_STYLES = "\n  .nextjs-data-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-copy-button--error,\n  .nextjs-data-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-copy-button--success {\n    color: var(--color-ansi-green);\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/copy-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/copy-button/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../../../utils/noop-template'\nimport { cx } from '../../utils/cx'\n\nfunction useCopyLegacy(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n    | { state: 'pending' }\n\n  // This would be simpler with useActionState but we need to support React 18 here.\n  // React 18 also doesn't have async transitions.\n  const [copyState, dispatch] = React.useReducer(\n    (\n      state: CopyState,\n      action:\n        | { type: 'reset' | 'copied' | 'copying' }\n        | { type: 'error'; error: unknown }\n    ): CopyState => {\n      if (action.type === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action.type === 'copied') {\n        return { state: 'success' }\n      }\n      if (action.type === 'copying') {\n        return { state: 'pending' }\n      }\n      if (action.type === 'error') {\n        return { state: 'error', error: action.error }\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n  function copy() {\n    if (isPending) {\n      return\n    }\n\n    if (!navigator.clipboard) {\n      dispatch({\n        type: 'error',\n        error: new Error('Copy to clipboard is not supported in this browser'),\n      })\n    } else {\n      dispatch({ type: 'copying' })\n      navigator.clipboard.writeText(content).then(\n        () => {\n          dispatch({ type: 'copied' })\n        },\n        (error) => {\n          dispatch({ type: 'error', error })\n        }\n      )\n    }\n  }\n  const reset = React.useCallback(() => {\n    dispatch({ type: 'reset' })\n  }, [])\n\n  const isPending = copyState.state === 'pending'\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nfunction useCopyModern(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n\n  const [copyState, dispatch, isPending] = React.useActionState(\n    (\n      state: CopyState,\n      action: 'reset' | 'copy'\n    ): CopyState | Promise<CopyState> => {\n      if (action === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action === 'copy') {\n        if (!navigator.clipboard) {\n          return {\n            state: 'error',\n            error: new Error(\n              'Copy to clipboard is not supported in this browser'\n            ),\n          }\n        }\n        return navigator.clipboard.writeText(content).then(\n          () => {\n            return { state: 'success' }\n          },\n          (error) => {\n            return { state: 'error', error }\n          }\n        )\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n\n  function copy() {\n    React.startTransition(() => {\n      dispatch('copy')\n    })\n  }\n\n  const reset = React.useCallback(() => {\n    dispatch('reset')\n  }, [\n    // TODO: `dispatch` from `useActionState` is not reactive.\n    // Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.\n    dispatch,\n  ])\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nconst useCopy =\n  typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy\n\nexport function CopyButton({\n  actionLabel,\n  successLabel,\n  content,\n  icon,\n  disabled,\n  ...props\n}: React.HTMLProps<HTMLButtonElement> & {\n  actionLabel: string\n  successLabel: string\n  content: string\n  icon?: React.ReactNode\n}) {\n  const [copyState, copy, reset, isPending] = useCopy(content)\n\n  const error = copyState.state === 'error' ? copyState.error : null\n  React.useEffect(() => {\n    if (error !== null) {\n      // Additional console.error to get the stack.\n      console.error(error)\n    }\n  }, [error])\n  React.useEffect(() => {\n    if (copyState.state === 'success') {\n      const timeoutId = setTimeout(() => {\n        reset()\n      }, 2000)\n\n      return () => {\n        clearTimeout(timeoutId)\n      }\n    }\n  }, [isPending, copyState.state, reset])\n  const isDisabled = isPending || disabled\n  const label = copyState.state === 'success' ? successLabel : actionLabel\n\n  // Assign default icon\n  const renderedIcon =\n    copyState.state === 'success' ? (\n      <CopySuccessIcon />\n    ) : (\n      icon || (\n        <CopyIcon\n          width={14}\n          height={14}\n          className=\"error-overlay-toolbar-button-icon\"\n        />\n      )\n    )\n\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={label}\n      aria-label={label}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-nextjs-copy-button\n      className={cx(\n        props.className,\n        'nextjs-data-copy-button',\n        `nextjs-data-copy-button--${copyState.state}`\n      )}\n      onClick={() => {\n        if (!isDisabled) {\n          copy()\n        }\n      }}\n    >\n      {renderedIcon}\n      {copyState.state === 'error' ? ` ${copyState.error}` : null}\n    </button>\n  )\n}\n\nfunction CopyIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M2.406.438c-.845 0-1.531.685-1.531 1.53v6.563c0 .846.686 1.531 1.531 1.531H3.937V8.75H2.406a.219.219 0 0 1-.219-.219V1.97c0-.121.098-.219.22-.219h4.812c.12 0 .218.098.218.219v.656H8.75v-.656c0-.846-.686-1.532-1.531-1.532H2.406zm4.375 3.5c-.845 0-1.531.685-1.531 1.53v6.563c0 .846.686 1.531 1.531 1.531h4.813c.845 0 1.531-.685 1.531-1.53V5.468c0-.846-.686-1.532-1.531-1.532H6.78zm-.218 1.53c0-.12.097-.218.218-.218h4.813c.12 0 .219.098.219.219v6.562c0 .121-.098.219-.22.219H6.782a.219.219 0 0 1-.218-.219V5.47z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nfunction CopySuccessIcon() {\n  return (\n    <svg\n      height=\"16\"\n      xlinkTitle=\"copied\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\" />\n    </svg>\n  )\n}\n\nexport const COPY_BUTTON_STYLES = css`\n  .nextjs-data-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-copy-button--error,\n  .nextjs-data-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n`\n"],"names":["COPY_BUTTON_STYLES","CopyButton","useCopyLegacy","content","copyState","dispatch","React","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","actionLabel","successLabel","icon","disabled","props","useEffect","console","timeoutId","setTimeout","clearTimeout","isDisabled","label","renderedIcon","CopySuccessIcon","CopyIcon","width","height","className","button","title","aria-label","aria-disabled","data-nextjs-copy-button","cx","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/copy-button/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cx } from '../../utils/cx'\n\nfunction useCopyLegacy(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n    | { state: 'pending' }\n\n  // This would be simpler with useActionState but we need to support React 18 here.\n  // React 18 also doesn't have async transitions.\n  const [copyState, dispatch] = React.useReducer(\n    (\n      state: CopyState,\n      action:\n        | { type: 'reset' | 'copied' | 'copying' }\n        | { type: 'error'; error: unknown }\n    ): CopyState => {\n      if (action.type === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action.type === 'copied') {\n        return { state: 'success' }\n      }\n      if (action.type === 'copying') {\n        return { state: 'pending' }\n      }\n      if (action.type === 'error') {\n        return { state: 'error', error: action.error }\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n  function copy() {\n    if (isPending) {\n      return\n    }\n\n    if (!navigator.clipboard) {\n      dispatch({\n        type: 'error',\n        error: new Error('Copy to clipboard is not supported in this browser'),\n      })\n    } else {\n      dispatch({ type: 'copying' })\n      navigator.clipboard.writeText(content).then(\n        () => {\n          dispatch({ type: 'copied' })\n        },\n        (error) => {\n          dispatch({ type: 'error', error })\n        }\n      )\n    }\n  }\n  const reset = React.useCallback(() => {\n    dispatch({ type: 'reset' })\n  }, [])\n\n  const isPending = copyState.state === 'pending'\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nfunction useCopyModern(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n\n  const [copyState, dispatch, isPending] = React.useActionState(\n    (\n      state: CopyState,\n      action: 'reset' | 'copy'\n    ): CopyState | Promise<CopyState> => {\n      if (action === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action === 'copy') {\n        if (!navigator.clipboard) {\n          return {\n            state: 'error',\n            error: new Error(\n              'Copy to clipboard is not supported in this browser'\n            ),\n          }\n        }\n        return navigator.clipboard.writeText(content).then(\n          () => {\n            return { state: 'success' }\n          },\n          (error) => {\n            return { state: 'error', error }\n          }\n        )\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n\n  function copy() {\n    React.startTransition(() => {\n      dispatch('copy')\n    })\n  }\n\n  const reset = React.useCallback(() => {\n    dispatch('reset')\n  }, [\n    // TODO: `dispatch` from `useActionState` is not reactive.\n    // Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.\n    dispatch,\n  ])\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nconst useCopy =\n  typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy\n\nexport function CopyButton({\n  actionLabel,\n  successLabel,\n  content,\n  icon,\n  disabled,\n  ...props\n}: React.HTMLProps<HTMLButtonElement> & {\n  actionLabel: string\n  successLabel: string\n  content: string\n  icon?: React.ReactNode\n}) {\n  const [copyState, copy, reset, isPending] = useCopy(content)\n\n  const error = copyState.state === 'error' ? copyState.error : null\n  React.useEffect(() => {\n    if (error !== null) {\n      // Additional console.error to get the stack.\n      console.error(error)\n    }\n  }, [error])\n  React.useEffect(() => {\n    if (copyState.state === 'success') {\n      const timeoutId = setTimeout(() => {\n        reset()\n      }, 2000)\n\n      return () => {\n        clearTimeout(timeoutId)\n      }\n    }\n  }, [isPending, copyState.state, reset])\n  const isDisabled = isPending || disabled\n  const label = copyState.state === 'success' ? successLabel : actionLabel\n\n  // Assign default icon\n  const renderedIcon =\n    copyState.state === 'success' ? (\n      <CopySuccessIcon />\n    ) : (\n      icon || (\n        <CopyIcon\n          width={14}\n          height={14}\n          className=\"error-overlay-toolbar-button-icon\"\n        />\n      )\n    )\n\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={label}\n      aria-label={label}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-nextjs-copy-button\n      className={cx(\n        props.className,\n        'nextjs-data-copy-button',\n        `nextjs-data-copy-button--${copyState.state}`\n      )}\n      onClick={() => {\n        if (!isDisabled) {\n          copy()\n        }\n      }}\n    >\n      {renderedIcon}\n      {copyState.state === 'error' ? ` ${copyState.error}` : null}\n    </button>\n  )\n}\n\nfunction CopyIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M2.406.438c-.845 0-1.531.685-1.531 1.53v6.563c0 .846.686 1.531 1.531 1.531H3.937V8.75H2.406a.219.219 0 0 1-.219-.219V1.97c0-.121.098-.219.22-.219h4.812c.12 0 .218.098.218.219v.656H8.75v-.656c0-.846-.686-1.532-1.531-1.532H2.406zm4.375 3.5c-.845 0-1.531.685-1.531 1.53v6.563c0 .846.686 1.531 1.531 1.531h4.813c.845 0 1.531-.685 1.531-1.53V5.468c0-.846-.686-1.532-1.531-1.532H6.78zm-.218 1.53c0-.12.097-.218.218-.218h4.813c.12 0 .219.098.219.219v6.562c0 .121-.098.219-.22.219H6.782a.219.219 0 0 1-.218-.219V5.47z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nfunction CopySuccessIcon() {\n  return (\n    <svg\n      height=\"16\"\n      xlinkTitle=\"copied\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\" />\n    </svg>\n  )\n}\n\nexport const COPY_BUTTON_STYLES = `\n  .nextjs-data-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-copy-button--error,\n  .nextjs-data-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n`\n"],"names":["COPY_BUTTON_STYLES","CopyButton","useCopyLegacy","content","copyState","dispatch","React","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","actionLabel","successLabel","icon","disabled","props","useEffect","console","timeoutId","setTimeout","clearTimeout","isDisabled","label","renderedIcon","CopySuccessIcon","CopyIcon","width","height","className","button","title","aria-label","aria-disabled","data-nextjs-copy-button","cx","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke"],"mappings":";;;;;;;;;;;;;;;IAuPaA,kBAAkB;eAAlBA;;IA9GGC,UAAU;eAAVA;;;;;iEAzIO;oBACJ;AAEnB,SAASC,cAAcC,OAAe;IAYpC,kFAAkF;IAClF,gDAAgD;IAChD,MAAM,CAACC,WAAWC,SAAS,GAAGC,OAAMC,UAAU,CAC5C,CACEC,OACAC;QAIA,IAAIA,OAAOC,IAAI,KAAK,SAAS;YAC3B,OAAO;gBAAEF,OAAO;YAAU;QAC5B;QACA,IAAIC,OAAOC,IAAI,KAAK,UAAU;YAC5B,OAAO;gBAAEF,OAAO;YAAU;QAC5B;QACA,IAAIC,OAAOC,IAAI,KAAK,WAAW;YAC7B,OAAO;gBAAEF,OAAO;YAAU;QAC5B;QACA,IAAIC,OAAOC,IAAI,KAAK,SAAS;YAC3B,OAAO;gBAAEF,OAAO;gBAASG,OAAOF,OAAOE,KAAK;YAAC;QAC/C;QACA,OAAOH;IACT,GACA;QACEA,OAAO;IACT;IAEF,SAASI;QACP,IAAIC,WAAW;YACb;QACF;QAEA,IAAI,CAACC,UAAUC,SAAS,EAAE;YACxBV,SAAS;gBACPK,MAAM;gBACNC,OAAO,qBAA+D,CAA/D,IAAIK,MAAM,uDAAV,qBAAA;2BAAA;gCAAA;kCAAA;gBAA8D;YACvE;QACF,OAAO;YACLX,SAAS;gBAAEK,MAAM;YAAU;YAC3BI,UAAUC,SAAS,CAACE,SAAS,CAACd,SAASe,IAAI,CACzC;gBACEb,SAAS;oBAAEK,MAAM;gBAAS;YAC5B,GACA,CAACC;gBACCN,SAAS;oBAAEK,MAAM;oBAASC;gBAAM;YAClC;QAEJ;IACF;IACA,MAAMQ,QAAQb,OAAMc,WAAW,CAAC;QAC9Bf,SAAS;YAAEK,MAAM;QAAQ;IAC3B,GAAG,EAAE;IAEL,MAAMG,YAAYT,UAAUI,KAAK,KAAK;IAEtC,OAAO;QAACJ;QAAWQ;QAAMO;QAAON;KAAU;AAC5C;AAEA,SAASQ,cAAclB,OAAe;IAWpC,MAAM,CAACC,WAAWC,UAAUQ,UAAU,GAAGP,OAAMgB,cAAc,CAC3D,CACEd,OACAC;QAEA,IAAIA,WAAW,SAAS;YACtB,OAAO;gBAAED,OAAO;YAAU;QAC5B;QACA,IAAIC,WAAW,QAAQ;YACrB,IAAI,CAACK,UAAUC,SAAS,EAAE;gBACxB,OAAO;oBACLP,OAAO;oBACPG,OAAO,qBAEN,CAFM,IAAIK,MACT,uDADK,qBAAA;+BAAA;oCAAA;sCAAA;oBAEP;gBACF;YACF;YACA,OAAOF,UAAUC,SAAS,CAACE,SAAS,CAACd,SAASe,IAAI,CAChD;gBACE,OAAO;oBAAEV,OAAO;gBAAU;YAC5B,GACA,CAACG;gBACC,OAAO;oBAAEH,OAAO;oBAASG;gBAAM;YACjC;QAEJ;QACA,OAAOH;IACT,GACA;QACEA,OAAO;IACT;IAGF,SAASI;QACPN,OAAMiB,eAAe,CAAC;YACpBlB,SAAS;QACX;IACF;IAEA,MAAMc,QAAQb,OAAMc,WAAW,CAAC;QAC9Bf,SAAS;IACX,GAAG;QACD,0DAA0D;QAC1D,0FAA0F;QAC1FA;KACD;IAED,OAAO;QAACD;QAAWQ;QAAMO;QAAON;KAAU;AAC5C;AAEA,MAAMW,UACJ,OAAOlB,OAAMgB,cAAc,KAAK,aAAaD,gBAAgBnB;AAExD,SAASD,WAAW,KAY1B;IAZ0B,IAAA,EACzBwB,WAAW,EACXC,YAAY,EACZvB,OAAO,EACPwB,IAAI,EACJC,QAAQ,EACR,GAAGC,OAMJ,GAZ0B;IAazB,MAAM,CAACzB,WAAWQ,MAAMO,OAAON,UAAU,GAAGW,QAAQrB;IAEpD,MAAMQ,QAAQP,UAAUI,KAAK,KAAK,UAAUJ,UAAUO,KAAK,GAAG;IAC9DL,OAAMwB,SAAS,CAAC;QACd,IAAInB,UAAU,MAAM;YAClB,6CAA6C;YAC7CoB,QAAQpB,KAAK,CAACA;QAChB;IACF,GAAG;QAACA;KAAM;IACVL,OAAMwB,SAAS,CAAC;QACd,IAAI1B,UAAUI,KAAK,KAAK,WAAW;YACjC,MAAMwB,YAAYC,WAAW;gBAC3Bd;YACF,GAAG;YAEH,OAAO;gBACLe,aAAaF;YACf;QACF;IACF,GAAG;QAACnB;QAAWT,UAAUI,KAAK;QAAEW;KAAM;IACtC,MAAMgB,aAAatB,aAAae;IAChC,MAAMQ,QAAQhC,UAAUI,KAAK,KAAK,YAAYkB,eAAeD;IAE7D,sBAAsB;IACtB,MAAMY,eACJjC,UAAUI,KAAK,KAAK,0BAClB,qBAAC8B,uBAEDX,sBACE,qBAACY;QACCC,OAAO;QACPC,QAAQ;QACRC,WAAU;;IAKlB,qBACE,sBAACC;QACE,GAAGd,KAAK;QACTnB,MAAK;QACLkC,OAAOR;QACPS,cAAYT;QACZU,iBAAeX;QACfP,UAAUO;QACVY,yBAAuB;QACvBL,WAAWM,IAAAA,MAAE,EACXnB,MAAMa,SAAS,EACf,2BACA,AAAC,8BAA2BtC,UAAUI,KAAK;QAE7CyC,SAAS;YACP,IAAI,CAACd,YAAY;gBACfvB;YACF;QACF;;YAECyB;YACAjC,UAAUI,KAAK,KAAK,UAAU,AAAC,MAAGJ,UAAUO,KAAK,GAAK;;;AAG7D;AAEA,SAAS4B,SAASV,KAAoC;IACpD,qBACE,qBAACqB;QACCV,OAAM;QACNC,QAAO;QACPU,MAAK;QACLC,OAAM;QACL,GAAGvB,KAAK;kBAET,cAAA,qBAACwB;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb;AAEA,SAASb;IACP,qBACE,qBAACY;QACCT,QAAO;QACPgB,YAAW;QACXC,SAAQ;QACRlB,OAAM;QACNmB,QAAO;QACPR,MAAK;kBAEL,cAAA,qBAACE;YAAKG,GAAE;;;AAGd;AAEO,MAAMxD,qBAAsB"}

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

@@ -1,2 +1,2 @@
-declare const styles: string;
+declare const styles = "\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\n\n    display: flex;\n    flex-direction: column-reverse;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n    overflow: hidden;\n  }\n  [data-nextjs-dialog]::-webkit-scrollbar {\n    display: none;\n  }\n\n  \n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: var(--size-4) var(--size-3);\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n    margin-bottom: var(--next-dialog-footer-height);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-2);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    /* Subtract border width */\n    width: calc(100% - 2px);\n    /* \n      We make this element fixed to anchor it to the bottom during the height transition.\n      If you make this relative it will jump during the transition and not collapse or expand smoothly.\n      If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n    */\n    position: fixed;\n    bottom: 1px;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      min-height: var(--next-dialog-footer-height);\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n";
 export { styles };

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

@@ -8,19 +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  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\n\n    display: flex;\n    flex-direction: column-reverse;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n    overflow: hidden;\n  }\n  [data-nextjs-dialog]::-webkit-scrollbar {\n    display: none;\n  }\n\n  ",
-        "\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: var(--size-4) var(--size-3);\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n    margin-bottom: var(--next-dialog-footer-height);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-2);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    /* Subtract border width */\n    width: calc(100% - 2px);\n    /* \n      We make this element fixed to anchor it to the bottom during the height transition.\n      If you make this relative it will jump during the transition and not collapse or expand smoothly.\n      If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n    */\n    position: fixed;\n    bottom: 1px;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      min-height: var(--next-dialog-footer-height);\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
-const styles = (0, _nooptemplate.noop)(_templateObject(), '' /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */ );
+const styles = "\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\n\n    display: flex;\n    flex-direction: column-reverse;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n    overflow: hidden;\n  }\n  [data-nextjs-dialog]::-webkit-scrollbar {\n    display: none;\n  }\n\n  \n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: var(--size-4) var(--size-3);\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n    margin-bottom: var(--next-dialog-footer-height);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-2);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    /* Subtract border width */\n    width: calc(100% - 2px);\n    /* \n      We make this element fixed to anchor it to the bottom during the height transition.\n      If you make this relative it will jump during the transition and not collapse or expand smoothly.\n      If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n    */\n    position: fixed;\n    bottom: 1px;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      min-height: var(--next-dialog-footer-height);\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\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/dialog/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/styles.ts"],"sourcesContent":["import { noop as css } from '../../../utils/noop-template'\n\nconst styles = css`\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\n\n    display: flex;\n    flex-direction: column-reverse;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n    overflow: hidden;\n  }\n  [data-nextjs-dialog]::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${\n    '' /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n  }\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: var(--size-4) var(--size-3);\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n    margin-bottom: var(--next-dialog-footer-height);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-2);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    /* Subtract border width */\n    width: calc(100% - 2px);\n    /* \n      We make this element fixed to anchor it to the bottom during the height transition.\n      If you make this relative it will jump during the transition and not collapse or expand smoothly.\n      If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n    */\n    position: fixed;\n    bottom: 1px;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      min-height: var(--next-dialog-footer-height);\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n`\n\nexport { styles }\n"],"names":["styles","css"],"mappings":";;;;+BA2HSA;;;eAAAA;;;;8BA3HmB;;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG,qBAmCd,GAAG,gFAAgF"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/dialog/styles.ts"],"sourcesContent":["const styles = `\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n    --next-dialog-row-padding: 16px;\n\n    display: flex;\n    flex-direction: column-reverse;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n    overflow: hidden;\n  }\n  [data-nextjs-dialog]::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${\n    '' /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n  }\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    padding: var(--size-4) var(--size-3);\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog][data-has-footer='true'] [data-nextjs-dialog-body] {\n    margin-bottom: var(--next-dialog-footer-height);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-2);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    /* Subtract border width */\n    width: calc(100% - 2px);\n    /* \n      We make this element fixed to anchor it to the bottom during the height transition.\n      If you make this relative it will jump during the transition and not collapse or expand smoothly.\n      If you make this absolute it will remain stuck at its initial position when scrolling the dialog.\n    */\n    position: fixed;\n    bottom: 1px;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      min-height: var(--next-dialog-footer-height);\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n`\n\nexport { styles }\n"],"names":["styles"],"mappings":";;;;+BAyHSA;;;eAAAA;;;AAzHT,MAAMA,SAAU"}

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

@@ -4,5 +4,5 @@ interface CallStackProps {
     dialogResizerRef: React.RefObject<HTMLDivElement | null>;
 }
 export declare function CallStack({ frames, dialogResizerRef }: CallStackProps): import("react/jsx-runtime").JSX.Element;
-export declare const CALL_STACK_STYLES: string;
+export declare const CALL_STACK_STYLES = "\n  .error-overlay-call-stack-container {\n    position: relative;\n    margin-top: var(--size-2);\n  }\n\n  .error-overlay-call-stack-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 28px;\n    padding: var(--size-2) var(--size-2) var(--size-3) var(--size-1);\n    width: 100%;\n  }\n\n  .error-overlay-call-stack-title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--size-2);\n\n    margin: 0;\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .error-overlay-call-stack-count {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 20px;\n    height: 20px;\n    gap: var(--size-1);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-11);\n    font-weight: 500;\n    line-height: var(--size-4);\n\n    border-radius: var(--rounded-full);\n    background: var(--color-gray-300);\n  }\n\n  .error-overlay-call-stack-ignored-list-toggle-button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    border-radius: 6px;\n    padding: 4px 6px;\n    margin-right: -6px;\n    transition: background 150ms ease;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n";
 export {};

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

@@ -20,20 +20,9 @@ _export(exports, {
         return CallStack;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _callstackframe = require("../../call-stack-frame/call-stack-frame");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .error-overlay-call-stack-container {\n    position: relative;\n    margin-top: var(--size-2);\n  }\n\n  .error-overlay-call-stack-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 28px;\n    padding: var(--size-2) var(--size-2) var(--size-3) var(--size-1);\n    width: 100%;\n  }\n\n  .error-overlay-call-stack-title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--size-2);\n\n    margin: 0;\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .error-overlay-call-stack-count {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 20px;\n    height: 20px;\n    gap: var(--size-1);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-11);\n    font-weight: 500;\n    line-height: var(--size-4);\n\n    border-radius: var(--rounded-full);\n    background: var(--color-gray-300);\n  }\n\n  .error-overlay-call-stack-ignored-list-toggle-button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    border-radius: 6px;\n    padding: 4px 6px;\n    margin-right: -6px;\n    transition: background 150ms ease;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function CallStack(param) {
     let { frames, dialogResizerRef } = param;
     const initialDialogHeight = (0, _react.useRef)(NaN);
@@ -133,7 +122,7 @@ function ChevronUpDown() {
         })
     });
 }
-const CALL_STACK_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const CALL_STACK_STYLES = "\n  .error-overlay-call-stack-container {\n    position: relative;\n    margin-top: var(--size-2);\n  }\n\n  .error-overlay-call-stack-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 28px;\n    padding: var(--size-2) var(--size-2) var(--size-3) var(--size-1);\n    width: 100%;\n  }\n\n  .error-overlay-call-stack-title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--size-2);\n\n    margin: 0;\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .error-overlay-call-stack-count {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 20px;\n    height: 20px;\n    gap: var(--size-1);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-11);\n    font-weight: 500;\n    line-height: var(--size-4);\n\n    border-radius: var(--rounded-full);\n    background: var(--color-gray-300);\n  }\n\n  .error-overlay-call-stack-ignored-list-toggle-button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    border-radius: 6px;\n    padding: 4px 6px;\n    margin-right: -6px;\n    transition: background 150ms ease;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\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 });