npm - next - Versions diffs - 15.2.0-canary.69 → 15.2.0-canary.70 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of next might be problematic. Click here for more details.

Files changed (246) hide show

package/dist/esm/build/index.js CHANGED Viewed

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

package/dist/esm/build/swc/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { isDeepStrictEqual } from 'util';
 import { getDefineEnv } from '../webpack/plugins/define-env-plugin';
 import { getReactCompilerLoader } from '../get-babel-loader-config';
 import { TurbopackInternalError } from '../../shared/lib/turbopack/utils';
-const nextVersion = "15.2.0-canary.69";
+const nextVersion = "15.2.0-canary.70";
 const ArchName = arch();
 const PlatformName = platform();
 function infoLog(...args) {

package/dist/esm/build/webpack-config.js CHANGED Viewed

@@ -1469,7 +1469,7 @@ export default async function getBaseWebpackConfig(dir, { buildId, encryptionKey
             isClient && new 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: {
@@ -1701,7 +1701,7 @@ export default async function getBaseWebpackConfig(dir, { buildId, encryptionKey
         //  - 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.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/esm/client/app-bootstrap.js CHANGED Viewed

@@ -3,7 +3,7 @@
  * sure the following scripts are executed in the correct order:
  * - Polyfills
  * - next/script with `beforeInteractive` strategy
- */ const version = "15.2.0-canary.69";
+ */ const version = "15.2.0-canary.70";
 window.next = {
     version,
     appDir: true

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

@@ -1,10 +1,14 @@
 import { getDefaultHydrationErrorMessage, isHydrationError, testReactHydrationWarning } from '../is-hydration-error';
 import { hydrationErrorState, getReactHydrationDiffSegments } from './hydration-error-info';
 export function attachHydrationErrorState(error) {
-    const reactHydrationDiffSegments = getReactHydrationDiffSegments(error.message);
     let parsedHydrationErrorState = {};
     const isHydrationWarning = testReactHydrationWarning(error.message);
     const isHydrationRuntimeError = isHydrationError(error);
+    // If it's not hydration warnings or errors, skip
+    if (!(isHydrationRuntimeError || isHydrationWarning)) {
+        return;
+    }
+    const reactHydrationDiffSegments = getReactHydrationDiffSegments(error.message);
     // If the reactHydrationDiffSegments exists
     // and the diff (reactHydrationDiffSegments[1]) exists
     // e.g. the hydration diff log error.
@@ -54,6 +58,7 @@ export function attachHydrationErrorState(error) {
             parsedHydrationErrorState.reactOutputComponentDiff = hydrationErrorState.reactOutputComponentDiff;
         }
     }
+    // If it's a hydration error, store the hydration error state into the error object
     ;
     error.details = parsedHydrationErrorState;
 }

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

	@@ -1 +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":["getDefaultHydrationErrorMessage","isHydrationError","testReactHydrationWarning","hydrationErrorState","getReactHydrationDiffSegments","attachHydrationErrorState","error","~~reactHydrationDiffSegments~~","~~message~~","~~parsedHydrationErrorState~~","~~isHydrationWarning~~","~~isHydrationRuntimeError~~","diff","details","warning","notes","reactOutputComponentDiff"],"mappings":"AAAA,SACEA,+BAA+B,EAC/BC,gBAAgB,EAChBC,yBAAyB,QACpB,wBAAuB;AAC9B,SACEC,mBAAmB,EACnBC,6BAA6B,QACxB,yBAAwB;AAE/B,OAAO,SAASC,0BAA0BC,KAAY;IACpD,~~MAAMC,6BAA6BH,8BACjCE,MAAME,OAAO;IAEf,~~IAAIC,4BAAwD,CAAC;IAC7D,MAAMC,~~qBAAqBR~~,0BAA0BI,~~MAAME~~,OAAO;IAClE,~~MAAMG~~,~~0BAA0BV~~,iBAAiBK;IACjD,2CAA2C;IAC3C,sDAAsD;IACtD,qCAAqC;IACrC,~~IAAIC~~,4BAA4B;QAC9B,~~MAAMK~~,~~OAAOL~~,0BAA0B,CAAC,EAAE;~~QAC1CE~~,4BAA4B;YAC1B,GAAG,~~AAACH~~,MAAcO,OAAO;YACzB,GAAGV,mBAAmB;YACtB,oFAAoF;YACpF,oGAAoG;YACpG,mFAAmF;YAEnFW,SAAS,AAACF,CAAAA,QAAQ,~~CAACF~~,qBACf,~~OACAP~~,oBAAoBW,OAAO,AAAD,KAAM;gBAACd;aAAkC;YACvE,2DAA2D;YAC3D,qDAAqD;YACrDe,~~OAAOL~~,qBAAqB,~~KAAKH~~,0BAA0B,CAAC,EAAE;~~YAC9DS~~,0BAA0BJ;QAC5B;QACA,iEAAiE;QACjE,oGAAoG;QACpG,2EAA2E;QAC3E,IAAI,CAACT,oBAAoBa,wBAAwB,IAAIJ,MAAM;YACzDT,oBAAoBa,wBAAwB,GAAGJ;QACjD;QACA,kHAAkH;QAClH,IACE,CAACA,~~QACDD~~,~~2BACAR~~,oBAAoBa,wBAAwB,EAC5C;~~YACAP~~,~~0BAA0BO~~,wBAAwB,GAChDb,oBAAoBa,wBAAwB;QAChD;IACF,OAAO;QACL,qEAAqE;QAErE,oEAAoE;QACpE,kDAAkD;QAClD,IAAIb,oBAAoBW,OAAO,EAAE;YAC/B,mEAAmE;YACnE,iDAAiD;~~YACjDL~~,4BAA4B;gBAC1B,GAAG,~~AAACH~~,MAAcO,OAAO;gBACzB,wEAAwE;gBACxE,GAAGV,mBAAmB;YACxB;QACF;QACA,qCAAqC;QACrC,oGAAoG;QACpG,2EAA2E;QAC3E,IAAIA,oBAAoBa,wBAAwB,EAAE;~~YAChDP~~,~~0BAA0BO~~,wBAAwB,GAChDb,oBAAoBa,wBAAwB;QAChD;IACF;;~~IACEV~~,MAAcO,OAAO,~~GAAGJ~~;AAC5B"}
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 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":["getDefaultHydrationErrorMessage","isHydrationError","testReactHydrationWarning","hydrationErrorState","getReactHydrationDiffSegments","attachHydrationErrorState","error","parsedHydrationErrorState","isHydrationWarning","message","isHydrationRuntimeError","reactHydrationDiffSegments","diff","details","warning","notes","reactOutputComponentDiff"],"mappings":"AAAA,SACEA,+BAA+B,EAC/BC,gBAAgB,EAChBC,yBAAyB,QACpB,wBAAuB;AAC9B,SACEC,mBAAmB,EACnBC,6BAA6B,QACxB,yBAAwB;AAE/B,OAAO,SAASC,0BAA0BC,KAAY;IACpD,IAAIC,4BAAwD,CAAC;IAC7D,MAAMC,qBAAqBN,0BAA0BI,MAAMG,OAAO;IAClE,MAAMC,0BAA0BT,iBAAiBK;IAEjD,iDAAiD;IACjD,IAAI,CAAEI,CAAAA,2BAA2BF,kBAAiB,GAAI;QACpD;IACF;IAEA,MAAMG,6BAA6BP,8BACjCE,MAAMG,OAAO;IAEf,2CAA2C;IAC3C,sDAAsD;IACtD,qCAAqC;IACrC,IAAIE,4BAA4B;QAC9B,MAAMC,OAAOD,0BAA0B,CAAC,EAAE;QAC1CJ,4BAA4B;YAC1B,GAAG,AAACD,MAAcO,OAAO;YACzB,GAAGV,mBAAmB;YACtB,oFAAoF;YACpF,oGAAoG;YACpG,mFAAmF;YAEnFW,SAAS,AAACF,CAAAA,QAAQ,CAACJ,qBACf,OACAL,oBAAoBW,OAAO,AAAD,KAAM;gBAACd;aAAkC;YACvE,2DAA2D;YAC3D,qDAAqD;YACrDe,OAAOP,qBAAqB,KAAKG,0BAA0B,CAAC,EAAE;YAC9DK,0BAA0BJ;QAC5B;QACA,iEAAiE;QACjE,oGAAoG;QACpG,2EAA2E;QAC3E,IAAI,CAACT,oBAAoBa,wBAAwB,IAAIJ,MAAM;YACzDT,oBAAoBa,wBAAwB,GAAGJ;QACjD;QACA,kHAAkH;QAClH,IACE,CAACA,QACDF,2BACAP,oBAAoBa,wBAAwB,EAC5C;YACAT,0BAA0BS,wBAAwB,GAChDb,oBAAoBa,wBAAwB;QAChD;IACF,OAAO;QACL,qEAAqE;QAErE,oEAAoE;QACpE,kDAAkD;QAClD,IAAIb,oBAAoBW,OAAO,EAAE;YAC/B,mEAAmE;YACnE,iDAAiD;YACjDP,4BAA4B;gBAC1B,GAAG,AAACD,MAAcO,OAAO;gBACzB,wEAAwE;gBACxE,GAAGV,mBAAmB;YACxB;QACF;QACA,qCAAqC;QACrC,oGAAoG;QACpG,2EAA2E;QAC3E,IAAIA,oBAAoBa,wBAAwB,EAAE;YAChDT,0BAA0BS,wBAAwB,GAChDb,oBAAoBa,wBAAwB;QAChD;IACF;IACA,mFAAmF;;IACjFV,MAAcO,OAAO,GAAGN;AAC5B"}

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

@@ -8,7 +8,7 @@ function _templateObject() {
     };
     return data;
 }
-import { noop as css } from '../utils/noop-template';
+import { css } from '../utils/css';
 import { useInsertionEffect } from 'react';
 export const FontStyles = ()=>{
     useInsertionEffect(()=>{

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

	@@ -1 +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":["~~noop","~~css","useInsertionEffect","FontStyles","style","document","createElement","textContent","head","appendChild","removeChild"],"mappings":";;;;;;;;;;AAAA,SAASA,~~QAAQC,~~GAAG,QAAQ,~~yBAAwB~~;~~AACpD~~,SAASC,kBAAkB,QAAQ,QAAO;AAE1C,OAAO,MAAMC,aAAa;IACxBD,mBAAmB;QACjB,MAAME,QAAQC,SAASC,aAAa,CAAC;QACrCF,MAAMG,WAAW,GAAGN;QAgDpBI,SAASG,IAAI,CAACC,WAAW,CAACL;QAE1B,OAAO;YACLC,SAASG,IAAI,CAACE,WAAW,CAACN;QAC5B;IACF,GAAG,EAAE;IAEL,OAAO;AACT,EAAC"}
1	+ {"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":["css","useInsertionEffect","FontStyles","style","document","createElement","textContent","head","appendChild","removeChild"],"mappings":";;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,eAAc;AAClC,SAASC,kBAAkB,QAAQ,QAAO;AAE1C,OAAO,MAAMC,aAAa;IACxBD,mBAAmB;QACjB,MAAME,QAAQC,SAASC,aAAa,CAAC;QACrCF,MAAMG,WAAW,GAAGN;QAgDpBI,SAASG,IAAI,CAACC,WAAW,CAACL;QAE1B,OAAO;YACLC,SAASG,IAAI,CAACE,WAAW,CAACN;QAC5B;IACF,GAAG,EAAE;IAEL,OAAO;AACT,EAAC"}

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

@@ -1,19 +1,8 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-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;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HotlinkedText } from '../hot-linked-text';
 import { ExternalIcon } from '../../icons/external';
 import { getFrameSource } from '../../../utils/stack-frame';
 import { useOpenInEditor } from '../../utils/use-open-in-editor';
-import { noop as css } from '../../../utils/noop-template';
 export const CallStackFrame = function CallStackFrame(param) {
     let { frame, index } = param;
     var _frame_originalStackFrame;
@@ -67,6 +56,6 @@ export const CallStackFrame = function CallStackFrame(param) {
         ]
     });
 };
-export const CALL_STACK_FRAME_STYLES = css(_templateObject());
+export 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";
 //# sourceMappingURL=call-stack-frame.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.js.map CHANGED Viewed

	@@ -1 +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":["HotlinkedText","ExternalIcon","getFrameSource","useOpenInEditor","~~noop","css","~~CallStackFrame","frame","index","f","originalStackFrame","sourceStackFrame","hasSource","Boolean","originalCodeFrame","open","file","lineNumber","column","undefined","formattedMethod","methodName","replace","fileSource","div","data-nextjs-call-stack-frame","data-nextjs-call-stack-frame-ignored","style","data-nextjs-frame-expanded","ignored","className","text","button","onClick","width","height","span","data-has-source","CALL_STACK_FRAME_STYLES"],"mappings":"~~;;;;;;;;;;;~~AAGA,SAASA,aAAa,QAAQ,qBAAoB;AAClD,SAASC,YAAY,QAAQ,uBAAsB;AACnD,SAASC,cAAc,QAAQ,6BAA4B;AAC3D,SAASC,eAAe,QAAQ,iCAAgC;~~AAChE~~,~~SAASC,QAAQC,GAAG,QAAQ,+BAA8B;AAE1D,~~OAAO,MAAMC,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,~~OAAOZ~~,~~gBACXS~~,YACI;QACEI,MAAMP,EAAEO,IAAI;QACZC,YAAYR,EAAEQ,UAAU;QACxBC,QAAQT,EAAES,MAAM;IAClB,IACAC;IAGN,uDAAuD;IACvD,4DAA4D;IAC5D,MAAMC,kBAAkBX,EAAEY,UAAU,CAACC,OAAO,CAAC,iBAAiB;IAE9D,4FAA4F;IAC5F,+CAA+C;IAC/C,MAAMC,~~aAAarB~~,~~eAAeO~~;IAElC,IAAI,CAACc,YAAY;QACf,OAAO;IACT;IAEA,qBACE,MAACC;QACCC,8BAA4B;QAC5BC,wCAAsC,CAACd;QACvCe,OACE;YACE,WAAWnB;QACb;;0BAGF,MAACgB;gBACCI,8BAA4B,CAACrB,MAAMsB,OAAO;gBAC1CC,WAAU;;kCAEV,~~KAAC9B~~;~~wBAAc+B~~,MAAMX;;oBACpBR,2BACC,KAACoB;wBAAOC,SAASlB;wBAAMe,WAAU;kCAC/B,cAAA,~~KAAC7B~~;~~4BAAaiC~~,OAAO;4BAAIC,QAAQ;;;;;0BAIvC,KAACC;gBACCN,WAAU;gBACVO,mBAAiBzB;0BAEhBW;;;;AAIT,EAAC;AAED,OAAO,MAAMe,~~0BAA0BjC~~,~~uBAgEtC~~"}
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'\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":["HotlinkedText","ExternalIcon","getFrameSource","useOpenInEditor","CallStackFrame","frame","index","f","originalStackFrame","sourceStackFrame","hasSource","Boolean","originalCodeFrame","open","file","lineNumber","column","undefined","formattedMethod","methodName","replace","fileSource","div","data-nextjs-call-stack-frame","data-nextjs-call-stack-frame-ignored","style","data-nextjs-frame-expanded","ignored","className","text","button","onClick","width","height","span","data-has-source","CALL_STACK_FRAME_STYLES"],"mappings":";AAGA,SAASA,aAAa,QAAQ,qBAAoB;AAClD,SAASC,YAAY,QAAQ,uBAAsB;AACnD,SAASC,cAAc,QAAQ,6BAA4B;AAC3D,SAASC,eAAe,QAAQ,iCAAgC;AAEhE,OAAO,MAAMC,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,OAAOV,gBACXO,YACI;QACEI,MAAMP,EAAEO,IAAI;QACZC,YAAYR,EAAEQ,UAAU;QACxBC,QAAQT,EAAES,MAAM;IAClB,IACAC;IAGN,uDAAuD;IACvD,4DAA4D;IAC5D,MAAMC,kBAAkBX,EAAEY,UAAU,CAACC,OAAO,CAAC,iBAAiB;IAE9D,4FAA4F;IAC5F,+CAA+C;IAC/C,MAAMC,aAAanB,eAAeK;IAElC,IAAI,CAACc,YAAY;QACf,OAAO;IACT;IAEA,qBACE,MAACC;QACCC,8BAA4B;QAC5BC,wCAAsC,CAACd;QACvCe,OACE;YACE,WAAWnB;QACb;;0BAGF,MAACgB;gBACCI,8BAA4B,CAACrB,MAAMsB,OAAO;gBAC1CC,WAAU;;kCAEV,KAAC5B;wBAAc6B,MAAMX;;oBACpBR,2BACC,KAACoB;wBAAOC,SAASlB;wBAAMe,WAAU;kCAC/B,cAAA,KAAC3B;4BAAa+B,OAAO;4BAAIC,QAAQ;;;;;0BAIvC,KAACC;gBACCN,WAAU;gBACVO,mBAAiBzB;0BAEhBW;;;;AAIT,EAAC;AAED,OAAO,MAAMe,0BAA2B,23CAgEvC"}

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

@@ -1,13 +1,3 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-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;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Anser from 'next/dist/compiled/anser';
 import stripAnsi from 'next/dist/compiled/strip-ansi';
@@ -15,7 +5,6 @@ import { useMemo } from 'react';
 import { HotlinkedText } from '../hot-linked-text';
 import { getFrameSource } from '../../../utils/stack-frame';
 import { useOpenInEditor } from '../../utils/use-open-in-editor';
-import { noop as css } from '../../../utils/noop-template';
 import { ExternalIcon } from '../../icons/external';
 import { FileIcon } from '../../icons/file';
 export function CodeFrame(param) {
@@ -111,6 +100,6 @@ export function CodeFrame(param) {
         ]
     });
 }
-export const CODE_FRAME_STYLES = css(_templateObject());
+export 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";
 //# sourceMappingURL=code-frame.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/code-frame/code-frame.js.map CHANGED Viewed

	@@ -1 +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":["Anser","stripAnsi","useMemo","HotlinkedText","getFrameSource","useOpenInEditor","~~noop","css","~~ExternalIcon","FileIcon","CodeFrame","stackFrame","codeFrame","formattedFrame","lines","split","miniLeadingSpacesLength","map","line","exec","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","ansiToJson","json","use_classes","remove_empty","open","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","lang","data-text","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","CODE_FRAME_STYLES"],"mappings":"~~;;;;;;;;;;;~~AAEA,OAAOA,WAAW,2BAA0B;AAC5C,OAAOC,eAAe,gCAA+B;AAErD,SAASC,OAAO,QAAQ,QAAO;AAC/B,SAASC,aAAa,QAAQ,qBAAoB;AAClD,SAASC,cAAc,QAAQ,6BAA4B;AAC3D,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,~~QAAQC,GAAG,QAAQ,+BAA8B;AAC1D,SAASC,~~YAAY,QAAQ,uBAAsB;AACnD,SAASC,QAAQ,QAAQ,mBAAkB;AAI3C,OAAO,SAASC,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QA6CFD;IA5CtB,8CAA8C;IAC9C,MAAME,~~iBAAiBX~~,QAAgB;QACrC,~~MAAMY~~,QAAQF,UAAUG,KAAK,CAAC;QAE9B,wEAAwE;QACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,~~CAAClB~~,~~UAAUiB~~,WAAW,OAC1C,OACA,oBAAoBC,IAAI,~~CAAClB~~,~~UAAUiB~~,QAExCE,MAAM,CAACC,SACPJ,GAAG,CAAC,CAACK,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,IAAIf,0BAA0B,GAAG;YAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMc,IACV,CAAEA,CAAAA,IAAId,KAAKe,OAAO,CAAC,IAAG,IAClBf,KAAKgB,SAAS,CAAC,GAAGF,KAClBd,KAAKgB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOnB,0BAAwB,KAAI,MAC9DE,MAELkB,IAAI,CAAC;QACV;QACA,OAAOtB,MAAMsB,IAAI,CAAC;IACpB,GAAG;QAACxB;KAAU;IAEd,MAAMyB,~~UAAUnC~~,QAAQ;QACtB,OAAOF,~~MAAMsC~~,UAAU,CAACzB,gBAAgB;YACtC0B,MAAM;YACNC,aAAa;YACbC,cAAc;QAChB;IACF,GAAG;QAAC5B;KAAe;IAEnB,MAAM6B,~~OAAOrC~~,gBAAgB;~~QAC3BsC~~,MAAMhC,WAAWgC,IAAI;QACrBC,YAAYjC,WAAWiC,UAAU;QACjCC,QAAQlC,WAAWkC,MAAM;IAC3B;IAEA,MAAMC,gBAAgBnC,+BAAAA,mBAAAA,WAAYgC,IAAI,qBAAhBhC,iBAAkBI,KAAK,CAAC,KAAKQ,GAAG;IAEtD,gCAAgC;IAChC,qBACE,MAACwB;QAAIC,uBAAqB;;0BACxB,KAACD;gBAAIE,WAAU;0BAMb,cAAA,MAACC;oBAAED,WAAU;;sCACX,KAACE;4BAAKF,WAAU;sCACd,cAAA,KAACxC;gCAAS2C,MAAMN;;;sCAElB,MAACK;4BAAKE,WAAS;;~~gCACZjD~~,~~eAAeO~~;gCAAY;gCAAG;8CAC/B,~~KAACR~~;~~oCAAcmD~~,MAAM3C,WAAW4C,UAAU;;;;sCAE5C,KAACC;4BACCC,cAAW;4BACXC,2CAAyC;4BACzCC,SAASjB;sCAET,cAAA,KAACS;gCAAKF,WAAU;gCAAkBW,aAAU;0CAC1C,cAAA,KAACpD;oCAAaqD,OAAO;oCAAIC,QAAQ;;;;;;;0BAKzC,KAACC;gBAAId,WAAU;0BACZZ,QAAQpB,GAAG,CAAC,CAAC+C,OAAOC,sBACnB,KAACd;wBAECe,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;AAEA,OAAO,MAAMS,~~oBAAoBnE~~,~~uBAuFhC~~"}
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 { 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":["Anser","stripAnsi","useMemo","HotlinkedText","getFrameSource","useOpenInEditor","ExternalIcon","FileIcon","CodeFrame","stackFrame","codeFrame","formattedFrame","lines","split","miniLeadingSpacesLength","map","line","exec","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","ansiToJson","json","use_classes","remove_empty","open","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","lang","data-text","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","CODE_FRAME_STYLES"],"mappings":"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"}

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

@@ -1,16 +1,5 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-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;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { noop as css } from '../../../utils/noop-template';
 import { cx } from '../../utils/cx';
 function useCopyLegacy(content) {
     // This would be simpler with useActionState but we need to support React 18 here.
@@ -218,6 +207,6 @@ function CopySuccessIcon() {
         })
     });
 }
-export const COPY_BUTTON_STYLES = css(_templateObject());
+export 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";
 //# sourceMappingURL=index.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/copy-button/index.js.map CHANGED Viewed

	@@ -1 +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":["React","noop","css","cx","useCopyLegacy","content","copyState","dispatch","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","CopyButton","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","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","COPY_BUTTON_STYLES"],"mappings":"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"}
1	+ {"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":["React","cx","useCopyLegacy","content","copyState","dispatch","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","CopyButton","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","onClick","svg","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","viewBox","stroke","COPY_BUTTON_STYLES"],"mappings":"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"}

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

@@ -1,16 +1,4 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-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;
-}
-import { noop as css } from '../../../utils/noop-template';
-const styles = css(_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";
 export { styles };
 //# sourceMappingURL=styles.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/dialog/styles.js.map CHANGED Viewed

	@@ -1 +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":["~~noop","css","~~styles"],"mappings":"~~;;;;;;;;;;;~~AAAA,~~SAASA~~,~~QAAQC,GAAG,QAAQ,+BAA8B~~;~~AAE1D~~,~~MAAMC~~,~~SAASD,uBAmCX,GAAG,gFAAgF;AAsFvF,SAASC,~~MAAM,GAAE"}
1	+ {"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":"AAAA,MAAMA,SAAU;AAyHhB,SAASA,MAAM,GAAE"}

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

@@ -1,17 +1,6 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-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;
-}
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useRef } from 'react';
 import { CallStackFrame } from '../../call-stack-frame/call-stack-frame';
-import { noop as css } from '../../../../utils/noop-template';
 export function CallStack(param) {
     let { frames, dialogResizerRef } = param;
     const initialDialogHeight = useRef(NaN);
@@ -111,6 +100,6 @@ function ChevronUpDown() {
         })
     });
 }
-export const CALL_STACK_STYLES = css(_templateObject());
+export 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";
 //# sourceMappingURL=call-stack.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx"],"sourcesContent":["import type { OriginalStackFrame } from '../../../../utils/stack-frame'\nimport { useMemo, useState, useRef } from 'react'\nimport { CallStackFrame } from '../../call-stack-frame/call-stack-frame'\~~nimport { noop as css } from '../../../../utils/noop-template'\~~n\ninterface CallStackProps {\n frames: OriginalStackFrame[]\n dialogResizerRef: React.RefObject<HTMLDivElement \| null>\n}\n\nexport function CallStack({ frames, dialogResizerRef }: CallStackProps) {\n const initialDialogHeight = useRef<number>(NaN)\n const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false)\n\n const { visibleFrames, ignoredFrames, ignoreListLength } = useMemo(() => {\n const visible: OriginalStackFrame[] = []\n const ignored: OriginalStackFrame[] = []\n\n for (const frame of frames) {\n if (!frame.ignored) {\n visible.push(frame)\n }\n if (frame.ignored) {\n ignored.push(frame)\n }\n }\n\n return {\n visibleFrames: visible,\n ignoredFrames: ignored,\n ignoreListLength: ignored.length,\n }\n }, [frames])\n\n function onToggleIgnoreList() {\n const dialog = dialogResizerRef?.current as HTMLElement\n\n if (!dialog) {\n return\n }\n\n const { height: currentHeight } = dialog?.getBoundingClientRect()\n\n if (!initialDialogHeight.current) {\n initialDialogHeight.current = currentHeight\n }\n\n if (isIgnoreListOpen) {\n function onTransitionEnd() {\n dialog.removeEventListener('transitionend', onTransitionEnd)\n setIsIgnoreListOpen(false)\n }\n dialog.style.height = `${initialDialogHeight.current}px`\n dialog.addEventListener('transitionend', onTransitionEnd)\n } else {\n setIsIgnoreListOpen(true)\n }\n }\n\n return (\n <div className=\"error-overlay-call-stack-container\">\n <div className=\"error-overlay-call-stack-header\">\n <p className=\"error-overlay-call-stack-title\">\n Call Stack{' '}\n <span className=\"error-overlay-call-stack-count\">\n {frames.length}\n </span>\n </p>\n {ignoreListLength > 0 && (\n <button\n data-expand-ignore-button={isIgnoreListOpen}\n className=\"error-overlay-call-stack-ignored-list-toggle-button\"\n onClick={onToggleIgnoreList}\n >\n {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignored-listed Frames`}\n <ChevronUpDown />\n </button>\n )}\n </div>\n {visibleFrames.map((frame, frameIndex) => (\n <CallStackFrame\n key={`call-stack-leading-${frameIndex}`}\n frame={frame}\n index={frameIndex}\n />\n ))}\n\n {isIgnoreListOpen && (\n <>\n {ignoredFrames.map((frame, frameIndex) => (\n <CallStackFrame\n key={`call-stack-ignored-${frameIndex}`}\n frame={frame}\n index={frameIndex}\n />\n ))}\n </>\n )}\n </div>\n )\n}\n\nfunction ChevronUpDown() {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nexport const CALL_STACK_STYLES = ~~css~~`\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`\n"],"names":["useMemo","useState","useRef","CallStackFrame","~~noop","css","~~CallStack","frames","dialogResizerRef","initialDialogHeight","NaN","isIgnoreListOpen","setIsIgnoreListOpen","visibleFrames","ignoredFrames","ignoreListLength","visible","ignored","frame","push","length","onToggleIgnoreList","dialog","current","height","currentHeight","getBoundingClientRect","onTransitionEnd","removeEventListener","style","addEventListener","div","className","p","span","button","data-expand-ignore-button","onClick","ChevronUpDown","map","frameIndex","index","svg","width","viewBox","fill","xmlns","path","fillRule","clipRule","d","CALL_STACK_STYLES"],"mappings":"~~;;;;;;;;;;;~~AACA,SAASA,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,QAAO;AACjD,SAASC,cAAc,QAAQ,0CAAyC;~~AACxE~~,~~SAASC,QAAQC,GAAG,QAAQ,kCAAiC;AAO7D,~~OAAO,SAASC,UAAU,KAA4C;IAA5C,IAAA,EAAEC,MAAM,EAAEC,gBAAgB,EAAkB,GAA5C;IACxB,MAAMC,~~sBAAsBP~~,~~OAAeQ~~;IAC3C,MAAM,CAACC,kBAAkBC,oBAAoB,~~GAAGX~~,SAAS;IAEzD,MAAM,~~EAAEY~~,aAAa,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,~~GAAGf~~,QAAQ;QACjE,~~MAAMgB~~,UAAgC,EAAE;QACxC,MAAMC,UAAgC,EAAE;QAExC,KAAK,MAAMC,SAASX,OAAQ;YAC1B,IAAI,CAACW,MAAMD,OAAO,EAAE;gBAClBD,QAAQG,IAAI,CAACD;YACf;YACA,IAAIA,MAAMD,OAAO,EAAE;gBACjBA,QAAQE,IAAI,CAACD;YACf;QACF;QAEA,OAAO;YACLL,eAAeG;YACfF,eAAeG;YACfF,kBAAkBE,QAAQG,MAAM;QAClC;IACF,GAAG;QAACb;KAAO;IAEX,SAASc;QACP,MAAMC,SAASd,oCAAAA,iBAAkBe,OAAO;QAExC,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,MAAM,EAAEE,QAAQC,aAAa,EAAE,GAAGH,0BAAAA,OAAQI,qBAAqB;QAE/D,IAAI,CAACjB,oBAAoBc,OAAO,EAAE;YAChCd,oBAAoBc,OAAO,GAAGE;QAChC;QAEA,IAAId,kBAAkB;YACpB,SAASgB;gBACPL,OAAOM,mBAAmB,CAAC,iBAAiBD;gBAC5Cf,oBAAoB;YACtB;YACAU,OAAOO,KAAK,CAACL,MAAM,GAAG,AAAC,KAAEf,oBAAoBc,OAAO,GAAC;YACrDD,OAAOQ,gBAAgB,CAAC,iBAAiBH;QAC3C,OAAO;YACLf,oBAAoB;QACtB;IACF;IAEA,qBACE,MAACmB;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,MAACC;wBAAED,WAAU;;4BAAiC;4BACjC;0CACX,KAACE;gCAAKF,WAAU;0CACbzB,OAAOa,MAAM;;;;oBAGjBL,mBAAmB,mBAClB,MAACoB;wBACCC,6BAA2BzB;wBAC3BqB,WAAU;wBACVK,SAAShB;;4BAELV,CAAAA,mBAAmB,SAAS,MAAK,IAAE,MAAGI,mBAAiB;0CAC3D,KAACuB;;;;;YAINzB,cAAc0B,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,~~KAACrC~~;~~oBAECe~~,OAAOA;oBACPuB,OAAOD;mBAFF,AAAC,wBAAqBA;YAM9B7B,kCACC;0BACGG,cAAcyB,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,~~KAACrC~~;~~wBAECe~~,OAAOA;wBACPuB,OAAOD;uBAFF,AAAC,wBAAqBA;;;;AASzC;AAEA,SAASF;IACP,qBACE,KAACI;QACCC,OAAM;QACNnB,QAAO;QACPoB,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,KAACC;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb;AAEA,OAAO,MAAMM,~~oBAAoB9C~~,~~uBAqEhC~~"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx"],"sourcesContent":["import type { OriginalStackFrame } from '../../../../utils/stack-frame'\nimport { useMemo, useState, useRef } from 'react'\nimport { CallStackFrame } from '../../call-stack-frame/call-stack-frame'\n\ninterface CallStackProps {\n frames: OriginalStackFrame[]\n dialogResizerRef: React.RefObject<HTMLDivElement \| null>\n}\n\nexport function CallStack({ frames, dialogResizerRef }: CallStackProps) {\n const initialDialogHeight = useRef<number>(NaN)\n const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false)\n\n const { visibleFrames, ignoredFrames, ignoreListLength } = useMemo(() => {\n const visible: OriginalStackFrame[] = []\n const ignored: OriginalStackFrame[] = []\n\n for (const frame of frames) {\n if (!frame.ignored) {\n visible.push(frame)\n }\n if (frame.ignored) {\n ignored.push(frame)\n }\n }\n\n return {\n visibleFrames: visible,\n ignoredFrames: ignored,\n ignoreListLength: ignored.length,\n }\n }, [frames])\n\n function onToggleIgnoreList() {\n const dialog = dialogResizerRef?.current as HTMLElement\n\n if (!dialog) {\n return\n }\n\n const { height: currentHeight } = dialog?.getBoundingClientRect()\n\n if (!initialDialogHeight.current) {\n initialDialogHeight.current = currentHeight\n }\n\n if (isIgnoreListOpen) {\n function onTransitionEnd() {\n dialog.removeEventListener('transitionend', onTransitionEnd)\n setIsIgnoreListOpen(false)\n }\n dialog.style.height = `${initialDialogHeight.current}px`\n dialog.addEventListener('transitionend', onTransitionEnd)\n } else {\n setIsIgnoreListOpen(true)\n }\n }\n\n return (\n <div className=\"error-overlay-call-stack-container\">\n <div className=\"error-overlay-call-stack-header\">\n <p className=\"error-overlay-call-stack-title\">\n Call Stack{' '}\n <span className=\"error-overlay-call-stack-count\">\n {frames.length}\n </span>\n </p>\n {ignoreListLength > 0 && (\n <button\n data-expand-ignore-button={isIgnoreListOpen}\n className=\"error-overlay-call-stack-ignored-list-toggle-button\"\n onClick={onToggleIgnoreList}\n >\n {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignored-listed Frames`}\n <ChevronUpDown />\n </button>\n )}\n </div>\n {visibleFrames.map((frame, frameIndex) => (\n <CallStackFrame\n key={`call-stack-leading-${frameIndex}`}\n frame={frame}\n index={frameIndex}\n />\n ))}\n\n {isIgnoreListOpen && (\n <>\n {ignoredFrames.map((frame, frameIndex) => (\n <CallStackFrame\n key={`call-stack-ignored-${frameIndex}`}\n frame={frame}\n index={frameIndex}\n />\n ))}\n </>\n )}\n </div>\n )\n}\n\nfunction ChevronUpDown() {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n}\n\nexport 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`\n"],"names":["useMemo","useState","useRef","CallStackFrame","CallStack","frames","dialogResizerRef","initialDialogHeight","NaN","isIgnoreListOpen","setIsIgnoreListOpen","visibleFrames","ignoredFrames","ignoreListLength","visible","ignored","frame","push","length","onToggleIgnoreList","dialog","current","height","currentHeight","getBoundingClientRect","onTransitionEnd","removeEventListener","style","addEventListener","div","className","p","span","button","data-expand-ignore-button","onClick","ChevronUpDown","map","frameIndex","index","svg","width","viewBox","fill","xmlns","path","fillRule","clipRule","d","CALL_STACK_STYLES"],"mappings":";AACA,SAASA,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,QAAO;AACjD,SAASC,cAAc,QAAQ,0CAAyC;AAOxE,OAAO,SAASC,UAAU,KAA4C;IAA5C,IAAA,EAAEC,MAAM,EAAEC,gBAAgB,EAAkB,GAA5C;IACxB,MAAMC,sBAAsBL,OAAeM;IAC3C,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGT,SAAS;IAEzD,MAAM,EAAEU,aAAa,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGb,QAAQ;QACjE,MAAMc,UAAgC,EAAE;QACxC,MAAMC,UAAgC,EAAE;QAExC,KAAK,MAAMC,SAASX,OAAQ;YAC1B,IAAI,CAACW,MAAMD,OAAO,EAAE;gBAClBD,QAAQG,IAAI,CAACD;YACf;YACA,IAAIA,MAAMD,OAAO,EAAE;gBACjBA,QAAQE,IAAI,CAACD;YACf;QACF;QAEA,OAAO;YACLL,eAAeG;YACfF,eAAeG;YACfF,kBAAkBE,QAAQG,MAAM;QAClC;IACF,GAAG;QAACb;KAAO;IAEX,SAASc;QACP,MAAMC,SAASd,oCAAAA,iBAAkBe,OAAO;QAExC,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,MAAM,EAAEE,QAAQC,aAAa,EAAE,GAAGH,0BAAAA,OAAQI,qBAAqB;QAE/D,IAAI,CAACjB,oBAAoBc,OAAO,EAAE;YAChCd,oBAAoBc,OAAO,GAAGE;QAChC;QAEA,IAAId,kBAAkB;YACpB,SAASgB;gBACPL,OAAOM,mBAAmB,CAAC,iBAAiBD;gBAC5Cf,oBAAoB;YACtB;YACAU,OAAOO,KAAK,CAACL,MAAM,GAAG,AAAC,KAAEf,oBAAoBc,OAAO,GAAC;YACrDD,OAAOQ,gBAAgB,CAAC,iBAAiBH;QAC3C,OAAO;YACLf,oBAAoB;QACtB;IACF;IAEA,qBACE,MAACmB;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,MAACC;wBAAED,WAAU;;4BAAiC;4BACjC;0CACX,KAACE;gCAAKF,WAAU;0CACbzB,OAAOa,MAAM;;;;oBAGjBL,mBAAmB,mBAClB,MAACoB;wBACCC,6BAA2BzB;wBAC3BqB,WAAU;wBACVK,SAAShB;;4BAELV,CAAAA,mBAAmB,SAAS,MAAK,IAAE,MAAGI,mBAAiB;0CAC3D,KAACuB;;;;;YAINzB,cAAc0B,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,KAACnC;oBAECa,OAAOA;oBACPuB,OAAOD;mBAFF,AAAC,wBAAqBA;YAM9B7B,kCACC;0BACGG,cAAcyB,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,KAACnC;wBAECa,OAAOA;wBACPuB,OAAOD;uBAFF,AAAC,wBAAqBA;;;;AASzC;AAEA,SAASF;IACP,qBACE,KAACI;QACCC,OAAM;QACNnB,QAAO;QACPoB,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,KAACC;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb;AAEA,OAAO,MAAMM,oBAAqB,shDAqEjC"}

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.js CHANGED Viewed

@@ -1,13 +1,3 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-function _templateObject() {
-    const data = _tagged_template_literal_loose([
-        "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { Toast } from '../../toast';
@@ -15,7 +5,6 @@ import { NextLogo } from './next-logo';
 import { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize';
 import { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator';
 import { useDelayedRender } from '../../../hooks/use-delayed-render';
-import { noop as css } from '../../../../utils/noop-template';
 import { TurbopackInfo } from './dev-tools-info/turbopack-info';
 import { RouteInfo } from './dev-tools-info/route-info';
 import { StopIcon } from '../../../icons/stop-icon';
@@ -416,6 +405,6 @@ function useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu) {
     ]);
 }
 //////////////////////////////////////////////////////////////////////////////////////
-export const DEV_TOOLS_INDICATOR_STYLES = css(_templateObject());
+export const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n";
 //# sourceMappingURL=dev-tools-indicator.js.map