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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-overlay-footer.tsx"],"sourcesContent":["import { ErrorFeedback } from './error-feedback/error-feedback'\nimport { styles as feedbackStyles } from './error-feedback/error-feedback'\nimport { noop as css } from '../../../../utils/noop-template'\n\nexport type ErrorOverlayFooterProps = {\n  errorCode: string | undefined\n  footerMessage: string | undefined\n}\n\nexport function ErrorOverlayFooter({\n  errorCode,\n  footerMessage,\n}: ErrorOverlayFooterProps) {\n  return (\n    <footer className=\"error-overlay-footer\">\n      {footerMessage ? (\n        <p className=\"error-overlay-footer-message\">{footerMessage}</p>\n      ) : null}\n      {errorCode ? (\n        <ErrorFeedback className=\"error-feedback\" errorCode={errorCode} />\n      ) : null}\n    </footer>\n  )\n}\n\nexport const styles = css`\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n\n    p {\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0;\n    }\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ${feedbackStyles}\n`\n"],"names":["ErrorOverlayFooter","styles","errorCode","footerMessage","footer","className","p","ErrorFeedback","css","feedbackStyles"],"mappings":";;;;;;;;;;;;;;;IASgBA,kBAAkB;eAAlBA;;IAgBHC,MAAM;eAANA;;;;;+BAzBiB;8BAEF;;;;;;;;;;;AAOrB,SAASD,mBAAmB,KAGT;IAHS,IAAA,EACjCE,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,sBAACC;QAAOC,WAAU;;YACfF,8BACC,qBAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BACC,qBAACK,4BAAa;gBAACF,WAAU;gBAAiBH,WAAWA;iBACnD;;;AAGV;AAEO,MAAMD,aAASO,kBAAG,qBA8BrBC,qBAAc"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-overlay-footer.tsx"],"sourcesContent":["import { ErrorFeedback } from './error-feedback/error-feedback'\nimport { styles as feedbackStyles } from './error-feedback/error-feedback'\n\nexport type ErrorOverlayFooterProps = {\n  errorCode: string | undefined\n  footerMessage: string | undefined\n}\n\nexport function ErrorOverlayFooter({\n  errorCode,\n  footerMessage,\n}: ErrorOverlayFooterProps) {\n  return (\n    <footer className=\"error-overlay-footer\">\n      {footerMessage ? (\n        <p className=\"error-overlay-footer-message\">{footerMessage}</p>\n      ) : null}\n      {errorCode ? (\n        <ErrorFeedback className=\"error-feedback\" errorCode={errorCode} />\n      ) : null}\n    </footer>\n  )\n}\n\nexport const styles = `\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n\n    p {\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0;\n    }\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ${feedbackStyles}\n`\n"],"names":["ErrorOverlayFooter","styles","errorCode","footerMessage","footer","className","p","ErrorFeedback","feedbackStyles"],"mappings":";;;;;;;;;;;;;;;IAQgBA,kBAAkB;eAAlBA;;IAgBHC,MAAM;eAANA;;;;+BAxBiB;AAQvB,SAASD,mBAAmB,KAGT;IAHS,IAAA,EACjCE,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,sBAACC;QAAOC,WAAU;;YACfF,8BACC,qBAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BACC,qBAACK,4BAAa;gBAACF,WAAU;gBAAiBH,WAAWA;iBACnD;;;AAGV;AAEO,MAAMD,SAAS,AAAC,mlBA8BnBO,qBAAc,GAAC"}

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

@@ -19,5 +19,5 @@ interface ErrorOverlayLayoutProps extends ErrorBaseProps {
     dialogResizerRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare function ErrorOverlayLayout({ errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, runtimeErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, rendered, transitionDurationMs, }: ErrorOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  \n  [data-nextjs-dialog-overlay] {\n    padding: initial;\n    top: 10vh;\n  }\n\n  \n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--next-dialog-radius);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-gray-400);\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n\n  \n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: var(--size-4);\n    right: var(--size-4);\n  }\n\n  \n\n  \n  [data-nextjs-error-overlay-nav] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    width: 100%;\n\n    outline: none;\n    translate: 1px 1px;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-notch {\n      --stroke-color: var(--color-gray-400);\n      --background-color: var(--color-background-100);\n\n      translate: -1px 0;\n      width: auto;\n      height: 42px;\n      padding: 12px;\n      background: var(--background-color);\n      border: 1px solid var(--stroke-color);\n      border-bottom: none;\n      position: relative;\n\n      &[data-side='left'] {\n        padding-right: 0;\n        border-radius: var(--next-dialog-radius) 0 0 0;\n\n        .error-overlay-notch-tail {\n          right: -54px;\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-right: -10px;\n        }\n      }\n\n      &[data-side='right'] {\n        padding-left: 0;\n        border-radius: 0 var(--next-dialog-radius) 0 0;\n\n        .error-overlay-notch-tail {\n          left: -54px;\n          transform: rotateY(180deg);\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-left: -12px;\n        }\n      }\n\n      .error-overlay-notch-tail {\n        position: absolute;\n        top: -1px;\n        pointer-events: none;\n        z-index: -1;\n      }\n    }\n  }\n\n  \n  .nextjs__container_errors_label {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-red-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-red-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n\n  \n  .nextjs__container_errors_wrapper {\n    position: relative;\n  }\n\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n\n  .nextjs__container_errors_desc.truncated {\n    max-height: 200px;\n    overflow: hidden;\n  }\n\n  .nextjs__container_errors_gradient_overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 85px;\n    background: linear-gradient(\n      180deg,\n      rgba(250, 250, 250, 0) 0%,\n      var(--color-background-200) 100%\n    );\n  }\n\n  .nextjs__container_errors_expand_button {\n    position: absolute;\n    bottom: 10px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    align-items: center;\n    padding: 6px 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: 999px;\n    box-shadow:\n      0px 2px 2px var(--color-gray-alpha-100),\n      0px 8px 8px -8px var(--color-gray-alpha-100);\n    font-size: 13px;\n    cursor: pointer;\n    color: var(--color-gray-900);\n    font-weight: 500;\n  }\n\n  \n  .error-overlay-toolbar {\n    display: flex;\n    gap: var(--size-1_5);\n  }\n\n  .nodejs-inspector-button,\n  .copy-stack-trace-button,\n  .docs-link-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 28px;\n    height: 28px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-alpha-200);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-toolbar-button-icon {\n    color: var(--color-gray-900);\n  }\n\n  \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\n  [data-nextjs-error-label-group] {\n    display: flex;\n    align-items: center;\n    gap: var(--size-2);\n  }\n";
 export {};

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

@@ -20,12 +20,10 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _dialog = require("../../dialog");
 const _erroroverlaytoolbar = require("../error-overlay-toolbar/error-overlay-toolbar");
 const _erroroverlayfooter = require("../error-overlay-footer/error-overlay-footer");
-const _nooptemplate = require("../../../../utils/noop-template");
 const _errormessage = require("../error-message/error-message");
 const _errortypelabel = require("../error-type-label/error-type-label");
 const _erroroverlaynav = require("../error-overlay-nav/error-overlay-nav");
@@ -36,24 +34,6 @@ const _callstack = require("../call-stack/call-stack");
 const _overlay = require("../overlay/overlay");
 const _erroroverlaybottomstack = require("../error-overlay-bottom-stack");
 const _environmentnamelabel = require("../environment-name-label/environment-name-label");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  ",
-        "\n  ",
-        "\n  ",
-        "\n  ",
-        "\n\n  ",
-        "\n  ",
-        "\n  ",
-        "\n  ",
-        "\n  ",
-        "\n\n  [data-nextjs-error-label-group] {\n    display: flex;\n    align-items: center;\n    gap: var(--size-2);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayLayout(param) {
     let { errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, runtimeErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)
     // If it's not being passed, we should just render the component as it is being
@@ -138,7 +118,7 @@ function ErrorOverlayLayout(param) {
         })
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject(), _overlay.OVERLAY_STYLES, _dialog1.DIALOG_STYLES, _header.DIALOG_HEADER_STYLES, _body.DIALOG_BODY_STYLES, _erroroverlaynav.styles, _errortypelabel.styles, _errormessage.styles, _erroroverlaytoolbar.styles, _callstack.CALL_STACK_STYLES);
+const styles = "\n  " + _overlay.OVERLAY_STYLES + "\n  " + _dialog1.DIALOG_STYLES + "\n  " + _header.DIALOG_HEADER_STYLES + "\n  " + _body.DIALOG_BODY_STYLES + "\n\n  " + _erroroverlaynav.styles + "\n  " + _errortypelabel.styles + "\n  " + _errormessage.styles + "\n  " + _erroroverlaytoolbar.styles + "\n  " + _callstack.CALL_STACK_STYLES + "\n\n  [data-nextjs-error-label-group] {\n    display: flex;\n    align-items: center;\n    gap: var(--size-2);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport type { ErrorMessageType } from '../error-message/error-message'\nimport type { ErrorType } from '../error-type-label/error-type-label'\n\nimport { DialogContent, DialogFooter } from '../../dialog'\nimport {\n  ErrorOverlayToolbar,\n  styles as toolbarStyles,\n} from '../error-overlay-toolbar/error-overlay-toolbar'\nimport { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'\nimport { noop as css } from '../../../../utils/noop-template'\nimport {\n  ErrorMessage,\n  styles as errorMessageStyles,\n} from '../error-message/error-message'\nimport {\n  ErrorTypeLabel,\n  styles as errorTypeLabelStyles,\n} from '../error-type-label/error-type-label'\nimport {\n  ErrorOverlayNav,\n  styles as floatingHeaderStyles,\n} from '../error-overlay-nav/error-overlay-nav'\n\nimport { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog'\nimport {\n  ErrorOverlayDialogHeader,\n  DIALOG_HEADER_STYLES,\n} from '../dialog/header'\nimport { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'\nimport { CALL_STACK_STYLES } from '../call-stack/call-stack'\nimport { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay'\nimport { ErrorOverlayBottomStack } from '../error-overlay-bottom-stack'\nimport type { ErrorBaseProps } from '../error-overlay/error-overlay'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\nimport { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'\n\ninterface ErrorOverlayLayoutProps extends ErrorBaseProps {\n  errorMessage: ErrorMessageType\n  errorType: ErrorType\n  children?: React.ReactNode\n  errorCode?: string\n  error: ReadyRuntimeError['error']\n  debugInfo?: DebugInfo\n  isBuildError?: boolean\n  onClose?: () => void\n  // TODO: better handle receiving\n  runtimeErrors?: ReadyRuntimeError[]\n  activeIdx?: number\n  setActiveIndex?: (index: number) => void\n  footerMessage?: string\n  dialogResizerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nexport function ErrorOverlayLayout({\n  errorMessage,\n  errorType,\n  children,\n  errorCode,\n  error,\n  debugInfo,\n  isBuildError,\n  onClose,\n  versionInfo,\n  runtimeErrors,\n  activeIdx,\n  setActiveIndex,\n  footerMessage,\n  isTurbopack,\n  dialogResizerRef,\n  // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)\n  // If it's not being passed, we should just render the component as it is being\n  // used without the context of a parent component that controls its state (e.g. Storybook).\n  rendered = true,\n  transitionDurationMs,\n}: ErrorOverlayLayoutProps) {\n  const animationProps = {\n    'data-rendered': rendered,\n    style: {\n      '--transition-duration': `${transitionDurationMs}ms`,\n    } as React.CSSProperties,\n  }\n\n  const hasFooter = Boolean(footerMessage || errorCode)\n\n  return (\n    <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>\n      <div data-nextjs-dialog-root {...animationProps}>\n        <ErrorOverlayDialog\n          onClose={onClose}\n          dialogResizerRef={dialogResizerRef}\n          data-has-footer={hasFooter}\n        >\n          <DialogContent>\n            <ErrorOverlayDialogHeader>\n              <div\n                className=\"nextjs__container_errors__error_title\"\n                // allow assertion in tests before error rating is implemented\n                data-nextjs-error-code={errorCode}\n              >\n                <span data-nextjs-error-label-group>\n                  <ErrorTypeLabel errorType={errorType} />\n                  {error.environmentName && (\n                    <EnvironmentNameLabel\n                      environmentName={error.environmentName}\n                    />\n                  )}\n                </span>\n                <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />\n              </div>\n              <ErrorMessage errorMessage={errorMessage} />\n            </ErrorOverlayDialogHeader>\n\n            <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>\n          </DialogContent>\n          {hasFooter && (\n            <DialogFooter>\n              <ErrorOverlayFooter\n                footerMessage={footerMessage}\n                errorCode={errorCode}\n              />\n            </DialogFooter>\n          )}\n          <ErrorOverlayBottomStack\n            count={runtimeErrors?.length ?? 0}\n            activeIdx={activeIdx ?? 0}\n          />\n        </ErrorOverlayDialog>\n        <ErrorOverlayNav\n          runtimeErrors={runtimeErrors}\n          activeIdx={activeIdx}\n          setActiveIndex={setActiveIndex}\n          versionInfo={versionInfo}\n          isTurbopack={isTurbopack}\n        />\n      </div>\n    </ErrorOverlayOverlay>\n  )\n}\n\nexport const styles = css`\n  ${OVERLAY_STYLES}\n  ${DIALOG_STYLES}\n  ${DIALOG_HEADER_STYLES}\n  ${DIALOG_BODY_STYLES}\n\n  ${floatingHeaderStyles}\n  ${errorTypeLabelStyles}\n  ${errorMessageStyles}\n  ${toolbarStyles}\n  ${CALL_STACK_STYLES}\n\n  [data-nextjs-error-label-group] {\n    display: flex;\n    align-items: center;\n    gap: var(--size-2);\n  }\n`\n"],"names":["ErrorOverlayLayout","styles","errorMessage","errorType","children","errorCode","error","debugInfo","isBuildError","onClose","versionInfo","runtimeErrors","activeIdx","setActiveIndex","footerMessage","isTurbopack","dialogResizerRef","rendered","transitionDurationMs","animationProps","style","hasFooter","Boolean","ErrorOverlayOverlay","fixed","div","data-nextjs-dialog-root","ErrorOverlayDialog","data-has-footer","DialogContent","ErrorOverlayDialogHeader","className","data-nextjs-error-code","span","data-nextjs-error-label-group","ErrorTypeLabel","environmentName","EnvironmentNameLabel","ErrorOverlayToolbar","ErrorMessage","ErrorOverlayDialogBody","DialogFooter","ErrorOverlayFooter","ErrorOverlayBottomStack","count","length","ErrorOverlayNav","css","OVERLAY_STYLES","DIALOG_STYLES","DIALOG_HEADER_STYLES","DIALOG_BODY_STYLES","floatingHeaderStyles","errorTypeLabelStyles","errorMessageStyles","toolbarStyles","CALL_STACK_STYLES"],"mappings":";;;;;;;;;;;;;;;IAsDgBA,kBAAkB;eAAlBA;;IAsFHC,MAAM;eAANA;;;;;wBAxI+B;qCAIrC;oCAC4B;8BACP;8BAIrB;gCAIA;iCAIA;yBAE2C;wBAI3C;sBACoD;2BACzB;yBACkB;yCACZ;sCAGH;;;;;;;;;;;;;;;;;;;AAmB9B,SAASD,mBAAmB,KAqBT;IArBS,IAAA,EACjCE,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,OAAO,EACPC,WAAW,EACXC,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChB,6FAA6F;IAC7F,+EAA+E;IAC/E,2FAA2F;IAC3FC,WAAW,IAAI,EACfC,oBAAoB,EACI,GArBS;IAsBjC,MAAMC,iBAAiB;QACrB,iBAAiBF;QACjBG,OAAO;YACL,yBAAyB,AAAC,KAAEF,uBAAqB;QACnD;IACF;IAEA,MAAMG,YAAYC,QAAQR,iBAAiBT;QAyC1BM;IAvCjB,qBACE,qBAACY,4BAAmB;QAACC,OAAOhB;QAAe,GAAGW,cAAc;kBAC1D,cAAA,sBAACM;YAAIC,yBAAuB;YAAE,GAAGP,cAAc;;8BAC7C,sBAACQ,2BAAkB;oBACjBlB,SAASA;oBACTO,kBAAkBA;oBAClBY,mBAAiBP;;sCAEjB,sBAACQ,qBAAa;;8CACZ,sBAACC,gCAAwB;;sDACvB,sBAACL;4CACCM,WAAU;4CACV,8DAA8D;4CAC9DC,0BAAwB3B;;8DAExB,sBAAC4B;oDAAKC,+BAA6B;;sEACjC,qBAACC,8BAAc;4DAAChC,WAAWA;;wDAC1BG,MAAM8B,eAAe,kBACpB,qBAACC,0CAAoB;4DACnBD,iBAAiB9B,MAAM8B,eAAe;;;;8DAI5C,qBAACE,wCAAmB;oDAAChC,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,qBAACgC,0BAAY;4CAACrC,cAAcA;;;;8CAG9B,qBAACsC,4BAAsB;8CAAEpC;;;;wBAE1BiB,2BACC,qBAACoB,oBAAY;sCACX,cAAA,qBAACC,sCAAkB;gCACjB5B,eAAeA;gCACfT,WAAWA;;;sCAIjB,qBAACsC,gDAAuB;4BACtBC,OAAOjC,CAAAA,wBAAAA,iCAAAA,cAAekC,MAAM,YAArBlC,wBAAyB;4BAChCC,WAAWA,oBAAAA,YAAa;;;;8BAG5B,qBAACkC,gCAAe;oBACdnC,eAAeA;oBACfC,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEO,MAAMd,aAAS8C,kBAAG,qBACrBC,uBAAc,EACdC,sBAAa,EACbC,4BAAoB,EACpBC,wBAAkB,EAElBC,uBAAoB,EACpBC,sBAAoB,EACpBC,oBAAkB,EAClBC,2BAAa,EACbC,4BAAiB"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport type { ErrorMessageType } from '../error-message/error-message'\nimport type { ErrorType } from '../error-type-label/error-type-label'\n\nimport { DialogContent, DialogFooter } from '../../dialog'\nimport {\n  ErrorOverlayToolbar,\n  styles as toolbarStyles,\n} from '../error-overlay-toolbar/error-overlay-toolbar'\nimport { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'\nimport {\n  ErrorMessage,\n  styles as errorMessageStyles,\n} from '../error-message/error-message'\nimport {\n  ErrorTypeLabel,\n  styles as errorTypeLabelStyles,\n} from '../error-type-label/error-type-label'\nimport {\n  ErrorOverlayNav,\n  styles as floatingHeaderStyles,\n} from '../error-overlay-nav/error-overlay-nav'\n\nimport { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog'\nimport {\n  ErrorOverlayDialogHeader,\n  DIALOG_HEADER_STYLES,\n} from '../dialog/header'\nimport { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'\nimport { CALL_STACK_STYLES } from '../call-stack/call-stack'\nimport { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay'\nimport { ErrorOverlayBottomStack } from '../error-overlay-bottom-stack'\nimport type { ErrorBaseProps } from '../error-overlay/error-overlay'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\nimport { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'\n\ninterface ErrorOverlayLayoutProps extends ErrorBaseProps {\n  errorMessage: ErrorMessageType\n  errorType: ErrorType\n  children?: React.ReactNode\n  errorCode?: string\n  error: ReadyRuntimeError['error']\n  debugInfo?: DebugInfo\n  isBuildError?: boolean\n  onClose?: () => void\n  // TODO: better handle receiving\n  runtimeErrors?: ReadyRuntimeError[]\n  activeIdx?: number\n  setActiveIndex?: (index: number) => void\n  footerMessage?: string\n  dialogResizerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nexport function ErrorOverlayLayout({\n  errorMessage,\n  errorType,\n  children,\n  errorCode,\n  error,\n  debugInfo,\n  isBuildError,\n  onClose,\n  versionInfo,\n  runtimeErrors,\n  activeIdx,\n  setActiveIndex,\n  footerMessage,\n  isTurbopack,\n  dialogResizerRef,\n  // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)\n  // If it's not being passed, we should just render the component as it is being\n  // used without the context of a parent component that controls its state (e.g. Storybook).\n  rendered = true,\n  transitionDurationMs,\n}: ErrorOverlayLayoutProps) {\n  const animationProps = {\n    'data-rendered': rendered,\n    style: {\n      '--transition-duration': `${transitionDurationMs}ms`,\n    } as React.CSSProperties,\n  }\n\n  const hasFooter = Boolean(footerMessage || errorCode)\n\n  return (\n    <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>\n      <div data-nextjs-dialog-root {...animationProps}>\n        <ErrorOverlayDialog\n          onClose={onClose}\n          dialogResizerRef={dialogResizerRef}\n          data-has-footer={hasFooter}\n        >\n          <DialogContent>\n            <ErrorOverlayDialogHeader>\n              <div\n                className=\"nextjs__container_errors__error_title\"\n                // allow assertion in tests before error rating is implemented\n                data-nextjs-error-code={errorCode}\n              >\n                <span data-nextjs-error-label-group>\n                  <ErrorTypeLabel errorType={errorType} />\n                  {error.environmentName && (\n                    <EnvironmentNameLabel\n                      environmentName={error.environmentName}\n                    />\n                  )}\n                </span>\n                <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />\n              </div>\n              <ErrorMessage errorMessage={errorMessage} />\n            </ErrorOverlayDialogHeader>\n\n            <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>\n          </DialogContent>\n          {hasFooter && (\n            <DialogFooter>\n              <ErrorOverlayFooter\n                footerMessage={footerMessage}\n                errorCode={errorCode}\n              />\n            </DialogFooter>\n          )}\n          <ErrorOverlayBottomStack\n            count={runtimeErrors?.length ?? 0}\n            activeIdx={activeIdx ?? 0}\n          />\n        </ErrorOverlayDialog>\n        <ErrorOverlayNav\n          runtimeErrors={runtimeErrors}\n          activeIdx={activeIdx}\n          setActiveIndex={setActiveIndex}\n          versionInfo={versionInfo}\n          isTurbopack={isTurbopack}\n        />\n      </div>\n    </ErrorOverlayOverlay>\n  )\n}\n\nexport const styles = `\n  ${OVERLAY_STYLES}\n  ${DIALOG_STYLES}\n  ${DIALOG_HEADER_STYLES}\n  ${DIALOG_BODY_STYLES}\n\n  ${floatingHeaderStyles}\n  ${errorTypeLabelStyles}\n  ${errorMessageStyles}\n  ${toolbarStyles}\n  ${CALL_STACK_STYLES}\n\n  [data-nextjs-error-label-group] {\n    display: flex;\n    align-items: center;\n    gap: var(--size-2);\n  }\n`\n"],"names":["ErrorOverlayLayout","styles","errorMessage","errorType","children","errorCode","error","debugInfo","isBuildError","onClose","versionInfo","runtimeErrors","activeIdx","setActiveIndex","footerMessage","isTurbopack","dialogResizerRef","rendered","transitionDurationMs","animationProps","style","hasFooter","Boolean","ErrorOverlayOverlay","fixed","div","data-nextjs-dialog-root","ErrorOverlayDialog","data-has-footer","DialogContent","ErrorOverlayDialogHeader","className","data-nextjs-error-code","span","data-nextjs-error-label-group","ErrorTypeLabel","environmentName","EnvironmentNameLabel","ErrorOverlayToolbar","ErrorMessage","ErrorOverlayDialogBody","DialogFooter","ErrorOverlayFooter","ErrorOverlayBottomStack","count","length","ErrorOverlayNav","OVERLAY_STYLES","DIALOG_STYLES","DIALOG_HEADER_STYLES","DIALOG_BODY_STYLES","floatingHeaderStyles","errorTypeLabelStyles","errorMessageStyles","toolbarStyles","CALL_STACK_STYLES"],"mappings":";;;;;;;;;;;;;;;IAqDgBA,kBAAkB;eAAlBA;;IAsFHC,MAAM;eAANA;;;;wBAvI+B;qCAIrC;oCAC4B;8BAI5B;gCAIA;iCAIA;yBAE2C;wBAI3C;sBACoD;2BACzB;yBACkB;yCACZ;sCAGH;AAmB9B,SAASD,mBAAmB,KAqBT;IArBS,IAAA,EACjCE,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,OAAO,EACPC,WAAW,EACXC,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChB,6FAA6F;IAC7F,+EAA+E;IAC/E,2FAA2F;IAC3FC,WAAW,IAAI,EACfC,oBAAoB,EACI,GArBS;IAsBjC,MAAMC,iBAAiB;QACrB,iBAAiBF;QACjBG,OAAO;YACL,yBAAyB,AAAC,KAAEF,uBAAqB;QACnD;IACF;IAEA,MAAMG,YAAYC,QAAQR,iBAAiBT;QAyC1BM;IAvCjB,qBACE,qBAACY,4BAAmB;QAACC,OAAOhB;QAAe,GAAGW,cAAc;kBAC1D,cAAA,sBAACM;YAAIC,yBAAuB;YAAE,GAAGP,cAAc;;8BAC7C,sBAACQ,2BAAkB;oBACjBlB,SAASA;oBACTO,kBAAkBA;oBAClBY,mBAAiBP;;sCAEjB,sBAACQ,qBAAa;;8CACZ,sBAACC,gCAAwB;;sDACvB,sBAACL;4CACCM,WAAU;4CACV,8DAA8D;4CAC9DC,0BAAwB3B;;8DAExB,sBAAC4B;oDAAKC,+BAA6B;;sEACjC,qBAACC,8BAAc;4DAAChC,WAAWA;;wDAC1BG,MAAM8B,eAAe,kBACpB,qBAACC,0CAAoB;4DACnBD,iBAAiB9B,MAAM8B,eAAe;;;;8DAI5C,qBAACE,wCAAmB;oDAAChC,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,qBAACgC,0BAAY;4CAACrC,cAAcA;;;;8CAG9B,qBAACsC,4BAAsB;8CAAEpC;;;;wBAE1BiB,2BACC,qBAACoB,oBAAY;sCACX,cAAA,qBAACC,sCAAkB;gCACjB5B,eAAeA;gCACfT,WAAWA;;;sCAIjB,qBAACsC,gDAAuB;4BACtBC,OAAOjC,CAAAA,wBAAAA,iCAAAA,cAAekC,MAAM,YAArBlC,wBAAyB;4BAChCC,WAAWA,oBAAAA,YAAa;;;;8BAG5B,qBAACkC,gCAAe;oBACdnC,eAAeA;oBACfC,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEO,MAAMd,SAAS,AAAC,SACnB8C,uBAAc,GAAC,SACfC,sBAAa,GAAC,SACdC,4BAAoB,GAAC,SACrBC,wBAAkB,GAAC,WAEnBC,uBAAoB,GAAC,SACrBC,sBAAoB,GAAC,SACrBC,oBAAkB,GAAC,SACnBC,2BAAa,GAAC,SACdC,4BAAiB,GAAC"}

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

@@ -8,5 +8,5 @@ type ErrorOverlayNavProps = {
     isTurbopack?: boolean;
 };
 export declare function ErrorOverlayNav({ runtimeErrors, activeIdx, setActiveIndex, versionInfo, isTurbopack, }: ErrorOverlayNavProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  [data-nextjs-error-overlay-nav] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    width: 100%;\n\n    outline: none;\n    translate: 1px 1px;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-notch {\n      --stroke-color: var(--color-gray-400);\n      --background-color: var(--color-background-100);\n\n      translate: -1px 0;\n      width: auto;\n      height: 42px;\n      padding: 12px;\n      background: var(--background-color);\n      border: 1px solid var(--stroke-color);\n      border-bottom: none;\n      position: relative;\n\n      &[data-side='left'] {\n        padding-right: 0;\n        border-radius: var(--next-dialog-radius) 0 0 0;\n\n        .error-overlay-notch-tail {\n          right: -54px;\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-right: -10px;\n        }\n      }\n\n      &[data-side='right'] {\n        padding-left: 0;\n        border-radius: 0 var(--next-dialog-radius) 0 0;\n\n        .error-overlay-notch-tail {\n          left: -54px;\n          transform: rotateY(180deg);\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-left: -12px;\n        }\n      }\n\n      .error-overlay-notch-tail {\n        position: absolute;\n        top: -1px;\n        pointer-events: none;\n        z-index: -1;\n      }\n    }\n  }\n";
 export {};

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

@@ -20,20 +20,9 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _erroroverlaypagination = require("../error-overlay-pagination/error-overlay-pagination");
 const _versionstalenessinfo = require("../../version-staleness-info/version-staleness-info");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-error-overlay-nav] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    width: 100%;\n\n    outline: none;\n    translate: 1px 1px;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-notch {\n      --stroke-color: var(--color-gray-400);\n      --background-color: var(--color-background-100);\n\n      translate: -1px 0;\n      width: auto;\n      height: 42px;\n      padding: 12px;\n      background: var(--background-color);\n      border: 1px solid var(--stroke-color);\n      border-bottom: none;\n      position: relative;\n\n      &[data-side='left'] {\n        padding-right: 0;\n        border-radius: var(--next-dialog-radius) 0 0 0;\n\n        .error-overlay-notch-tail {\n          right: -54px;\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-right: -10px;\n        }\n      }\n\n      &[data-side='right'] {\n        padding-left: 0;\n        border-radius: 0 var(--next-dialog-radius) 0 0;\n\n        .error-overlay-notch-tail {\n          left: -54px;\n          transform: rotateY(180deg);\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-left: -12px;\n        }\n      }\n\n      .error-overlay-notch-tail {\n        position: absolute;\n        top: -1px;\n        pointer-events: none;\n        z-index: -1;\n      }\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayNav(param) {
     let { runtimeErrors, activeIdx, setActiveIndex, versionInfo, isTurbopack } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -57,7 +46,7 @@ function ErrorOverlayNav(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  [data-nextjs-error-overlay-nav] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    width: 100%;\n\n    outline: none;\n    translate: 1px 1px;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-notch {\n      --stroke-color: var(--color-gray-400);\n      --background-color: var(--color-background-100);\n\n      translate: -1px 0;\n      width: auto;\n      height: 42px;\n      padding: 12px;\n      background: var(--background-color);\n      border: 1px solid var(--stroke-color);\n      border-bottom: none;\n      position: relative;\n\n      &[data-side='left'] {\n        padding-right: 0;\n        border-radius: var(--next-dialog-radius) 0 0 0;\n\n        .error-overlay-notch-tail {\n          right: -54px;\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-right: -10px;\n        }\n      }\n\n      &[data-side='right'] {\n        padding-left: 0;\n        border-radius: 0 var(--next-dialog-radius) 0 0;\n\n        .error-overlay-notch-tail {\n          left: -54px;\n          transform: rotateY(180deg);\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-left: -12px;\n        }\n      }\n\n      .error-overlay-notch-tail {\n        position: absolute;\n        top: -1px;\n        pointer-events: none;\n        z-index: -1;\n      }\n    }\n  }\n";
 function Notch(param) {
     let { children, side = 'left' } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'\n\nimport { ErrorOverlayPagination } from '../error-overlay-pagination/error-overlay-pagination'\nimport { VersionStalenessInfo } from '../../version-staleness-info/version-staleness-info'\nimport { noop as css } from '../../../../utils/noop-template'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\n\ntype ErrorOverlayNavProps = {\n  runtimeErrors?: ReadyRuntimeError[]\n  activeIdx?: number\n  setActiveIndex?: (index: number) => void\n  versionInfo?: VersionInfo\n  isTurbopack?: boolean\n}\n\nexport function ErrorOverlayNav({\n  runtimeErrors,\n  activeIdx,\n  setActiveIndex,\n  versionInfo,\n  isTurbopack,\n}: ErrorOverlayNavProps) {\n  return (\n    <div data-nextjs-error-overlay-nav>\n      <Notch side=\"left\">\n        {/* TODO: better passing data instead of nullish coalescing */}\n        <ErrorOverlayPagination\n          runtimeErrors={runtimeErrors ?? []}\n          activeIdx={activeIdx ?? 0}\n          onActiveIndexChange={setActiveIndex ?? (() => {})}\n        />\n      </Notch>\n      {versionInfo && (\n        <Notch side=\"right\">\n          <VersionStalenessInfo\n            versionInfo={versionInfo}\n            isTurbopack={isTurbopack}\n          />\n        </Notch>\n      )}\n    </div>\n  )\n}\n\nexport const styles = css`\n  [data-nextjs-error-overlay-nav] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    width: 100%;\n\n    outline: none;\n    translate: 1px 1px;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-notch {\n      --stroke-color: var(--color-gray-400);\n      --background-color: var(--color-background-100);\n\n      translate: -1px 0;\n      width: auto;\n      height: 42px;\n      padding: 12px;\n      background: var(--background-color);\n      border: 1px solid var(--stroke-color);\n      border-bottom: none;\n      position: relative;\n\n      &[data-side='left'] {\n        padding-right: 0;\n        border-radius: var(--next-dialog-radius) 0 0 0;\n\n        .error-overlay-notch-tail {\n          right: -54px;\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-right: -10px;\n        }\n      }\n\n      &[data-side='right'] {\n        padding-left: 0;\n        border-radius: 0 var(--next-dialog-radius) 0 0;\n\n        .error-overlay-notch-tail {\n          left: -54px;\n          transform: rotateY(180deg);\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-left: -12px;\n        }\n      }\n\n      .error-overlay-notch-tail {\n        position: absolute;\n        top: -1px;\n        pointer-events: none;\n        z-index: -1;\n      }\n    }\n  }\n`\n\nfunction Notch({\n  children,\n  side = 'left',\n}: {\n  children: React.ReactNode\n  side?: 'left' | 'right'\n}) {\n  return (\n    <div className=\"error-overlay-notch\" data-side={side}>\n      {children}\n      <Tail />\n    </div>\n  )\n}\n\nfunction Tail() {\n  return (\n    <svg\n      width=\"60\"\n      height=\"42\"\n      viewBox=\"0 0 60 42\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"error-overlay-notch-tail\"\n    >\n      <mask\n        id=\"mask0_2667_14687\"\n        style={{\n          maskType: 'alpha',\n        }}\n        maskUnits=\"userSpaceOnUse\"\n        x=\"0\"\n        y=\"-1\"\n        width=\"60\"\n        height=\"43\"\n      >\n        <mask\n          id=\"path-1-outside-1_2667_14687\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"0\"\n          y=\"-1\"\n          width=\"60\"\n          height=\"43\"\n          fill=\"black\"\n        >\n          <rect fill=\"white\" y=\"-1\" width=\"60\" height=\"43\" />\n          <path d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\" />\n        </mask>\n        <path\n          d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z\"\n          fill=\"black\"\n          mask=\"url(#path-1-outside-1_2667_14687)\"\n        />\n      </mask>\n      <g mask=\"url(#mask0_2667_14687)\">\n        <mask\n          id=\"path-3-outside-2_2667_14687\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"-1\"\n          y=\"0.0244141\"\n          width=\"60\"\n          height=\"43\"\n          fill=\"black\"\n        >\n          <rect fill=\"white\" x=\"-1\" y=\"0.0244141\" width=\"60\" height=\"43\" />\n          <path d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\" />\n        </mask>\n        <path\n          d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\"\n          fill=\"var(--background-color)\"\n        />\n        <path\n          d=\"M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z\"\n          fill=\"var(--stroke-color)\"\n          mask=\"url(#path-3-outside-2_2667_14687)\"\n        />\n      </g>\n    </svg>\n  )\n}\n"],"names":["ErrorOverlayNav","styles","runtimeErrors","activeIdx","setActiveIndex","versionInfo","isTurbopack","div","data-nextjs-error-overlay-nav","Notch","side","ErrorOverlayPagination","onActiveIndexChange","VersionStalenessInfo","css","children","className","data-side","Tail","svg","width","height","viewBox","fill","xmlns","mask","id","style","maskType","maskUnits","x","y","rect","path","d","g"],"mappings":";;;;;;;;;;;;;;;IAegBA,eAAe;eAAfA;;IA6BHC,MAAM;eAANA;;;;;wCA1C0B;sCACF;8BACT;;;;;;;;;;AAWrB,SAASD,gBAAgB,KAMT;IANS,IAAA,EAC9BE,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,WAAW,EACXC,WAAW,EACU,GANS;IAO9B,qBACE,sBAACC;QAAIC,+BAA6B;;0BAChC,qBAACC;gBAAMC,MAAK;0BAEV,cAAA,qBAACC,8CAAsB;oBACrBT,eAAeA,wBAAAA,gBAAiB,EAAE;oBAClCC,WAAWA,oBAAAA,YAAa;oBACxBS,qBAAqBR,yBAAAA,iBAAmB,KAAO;;;YAGlDC,6BACC,qBAACI;gBAAMC,MAAK;0BACV,cAAA,qBAACG,0CAAoB;oBACnBR,aAAaA;oBACbC,aAAaA;;;;;AAMzB;AAEO,MAAML,aAASa,kBAAG;AA8DzB,SAASL,MAAM,KAMd;IANc,IAAA,EACbM,QAAQ,EACRL,OAAO,MAAM,EAId,GANc;IAOb,qBACE,sBAACH;QAAIS,WAAU;QAAsBC,aAAWP;;YAC7CK;0BACD,qBAACG;;;AAGP;AAEA,SAASA;IACP,qBACE,sBAACC;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACNR,WAAU;;0BAEV,sBAACS;gBACCC,IAAG;gBACHC,OAAO;oBACLC,UAAU;gBACZ;gBACAC,WAAU;gBACVC,GAAE;gBACFC,GAAE;gBACFX,OAAM;gBACNC,QAAO;;kCAEP,sBAACI;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,qBAACS;gCAAKT,MAAK;gCAAQQ,GAAE;gCAAKX,OAAM;gCAAKC,QAAO;;0CAC5C,qBAACY;gCAAKC,GAAE;;;;kCAEV,qBAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,qBAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;0BAGT,sBAACU;gBAAEV,MAAK;;kCACN,sBAACA;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,qBAACS;gCAAKT,MAAK;gCAAQO,GAAE;gCAAKC,GAAE;gCAAYX,OAAM;gCAAKC,QAAO;;0CAC1D,qBAACY;gCAAKC,GAAE;;;;kCAEV,qBAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,qBAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;;;AAKf"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'\n\nimport { ErrorOverlayPagination } from '../error-overlay-pagination/error-overlay-pagination'\nimport { VersionStalenessInfo } from '../../version-staleness-info/version-staleness-info'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\n\ntype ErrorOverlayNavProps = {\n  runtimeErrors?: ReadyRuntimeError[]\n  activeIdx?: number\n  setActiveIndex?: (index: number) => void\n  versionInfo?: VersionInfo\n  isTurbopack?: boolean\n}\n\nexport function ErrorOverlayNav({\n  runtimeErrors,\n  activeIdx,\n  setActiveIndex,\n  versionInfo,\n  isTurbopack,\n}: ErrorOverlayNavProps) {\n  return (\n    <div data-nextjs-error-overlay-nav>\n      <Notch side=\"left\">\n        {/* TODO: better passing data instead of nullish coalescing */}\n        <ErrorOverlayPagination\n          runtimeErrors={runtimeErrors ?? []}\n          activeIdx={activeIdx ?? 0}\n          onActiveIndexChange={setActiveIndex ?? (() => {})}\n        />\n      </Notch>\n      {versionInfo && (\n        <Notch side=\"right\">\n          <VersionStalenessInfo\n            versionInfo={versionInfo}\n            isTurbopack={isTurbopack}\n          />\n        </Notch>\n      )}\n    </div>\n  )\n}\n\nexport const styles = `\n  [data-nextjs-error-overlay-nav] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    width: 100%;\n\n    outline: none;\n    translate: 1px 1px;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-notch {\n      --stroke-color: var(--color-gray-400);\n      --background-color: var(--color-background-100);\n\n      translate: -1px 0;\n      width: auto;\n      height: 42px;\n      padding: 12px;\n      background: var(--background-color);\n      border: 1px solid var(--stroke-color);\n      border-bottom: none;\n      position: relative;\n\n      &[data-side='left'] {\n        padding-right: 0;\n        border-radius: var(--next-dialog-radius) 0 0 0;\n\n        .error-overlay-notch-tail {\n          right: -54px;\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-right: -10px;\n        }\n      }\n\n      &[data-side='right'] {\n        padding-left: 0;\n        border-radius: 0 var(--next-dialog-radius) 0 0;\n\n        .error-overlay-notch-tail {\n          left: -54px;\n          transform: rotateY(180deg);\n        }\n\n        > *:not(.error-overlay-notch-tail) {\n          margin-left: -12px;\n        }\n      }\n\n      .error-overlay-notch-tail {\n        position: absolute;\n        top: -1px;\n        pointer-events: none;\n        z-index: -1;\n      }\n    }\n  }\n`\n\nfunction Notch({\n  children,\n  side = 'left',\n}: {\n  children: React.ReactNode\n  side?: 'left' | 'right'\n}) {\n  return (\n    <div className=\"error-overlay-notch\" data-side={side}>\n      {children}\n      <Tail />\n    </div>\n  )\n}\n\nfunction Tail() {\n  return (\n    <svg\n      width=\"60\"\n      height=\"42\"\n      viewBox=\"0 0 60 42\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"error-overlay-notch-tail\"\n    >\n      <mask\n        id=\"mask0_2667_14687\"\n        style={{\n          maskType: 'alpha',\n        }}\n        maskUnits=\"userSpaceOnUse\"\n        x=\"0\"\n        y=\"-1\"\n        width=\"60\"\n        height=\"43\"\n      >\n        <mask\n          id=\"path-1-outside-1_2667_14687\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"0\"\n          y=\"-1\"\n          width=\"60\"\n          height=\"43\"\n          fill=\"black\"\n        >\n          <rect fill=\"white\" y=\"-1\" width=\"60\" height=\"43\" />\n          <path d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\" />\n        </mask>\n        <path\n          d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z\"\n          fill=\"black\"\n          mask=\"url(#path-1-outside-1_2667_14687)\"\n        />\n      </mask>\n      <g mask=\"url(#mask0_2667_14687)\">\n        <mask\n          id=\"path-3-outside-2_2667_14687\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"-1\"\n          y=\"0.0244141\"\n          width=\"60\"\n          height=\"43\"\n          fill=\"black\"\n        >\n          <rect fill=\"white\" x=\"-1\" y=\"0.0244141\" width=\"60\" height=\"43\" />\n          <path d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\" />\n        </mask>\n        <path\n          d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\"\n          fill=\"var(--background-color)\"\n        />\n        <path\n          d=\"M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z\"\n          fill=\"var(--stroke-color)\"\n          mask=\"url(#path-3-outside-2_2667_14687)\"\n        />\n      </g>\n    </svg>\n  )\n}\n"],"names":["ErrorOverlayNav","styles","runtimeErrors","activeIdx","setActiveIndex","versionInfo","isTurbopack","div","data-nextjs-error-overlay-nav","Notch","side","ErrorOverlayPagination","onActiveIndexChange","VersionStalenessInfo","children","className","data-side","Tail","svg","width","height","viewBox","fill","xmlns","mask","id","style","maskType","maskUnits","x","y","rect","path","d","g"],"mappings":";;;;;;;;;;;;;;;IAcgBA,eAAe;eAAfA;;IA6BHC,MAAM;eAANA;;;;wCAzC0B;sCACF;AAW9B,SAASD,gBAAgB,KAMT;IANS,IAAA,EAC9BE,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,WAAW,EACXC,WAAW,EACU,GANS;IAO9B,qBACE,sBAACC;QAAIC,+BAA6B;;0BAChC,qBAACC;gBAAMC,MAAK;0BAEV,cAAA,qBAACC,8CAAsB;oBACrBT,eAAeA,wBAAAA,gBAAiB,EAAE;oBAClCC,WAAWA,oBAAAA,YAAa;oBACxBS,qBAAqBR,yBAAAA,iBAAmB,KAAO;;;YAGlDC,6BACC,qBAACI;gBAAMC,MAAK;0BACV,cAAA,qBAACG,0CAAoB;oBACnBR,aAAaA;oBACbC,aAAaA;;;;;AAMzB;AAEO,MAAML,SAAU;AA8DvB,SAASQ,MAAM,KAMd;IANc,IAAA,EACbK,QAAQ,EACRJ,OAAO,MAAM,EAId,GANc;IAOb,qBACE,sBAACH;QAAIQ,WAAU;QAAsBC,aAAWN;;YAC7CI;0BACD,qBAACG;;;AAGP;AAEA,SAASA;IACP,qBACE,sBAACC;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACNR,WAAU;;0BAEV,sBAACS;gBACCC,IAAG;gBACHC,OAAO;oBACLC,UAAU;gBACZ;gBACAC,WAAU;gBACVC,GAAE;gBACFC,GAAE;gBACFX,OAAM;gBACNC,QAAO;;kCAEP,sBAACI;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,qBAACS;gCAAKT,MAAK;gCAAQQ,GAAE;gCAAKX,OAAM;gCAAKC,QAAO;;0CAC5C,qBAACY;gCAAKC,GAAE;;;;kCAEV,qBAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,qBAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;0BAGT,sBAACU;gBAAEV,MAAK;;kCACN,sBAACA;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,qBAACS;gCAAKT,MAAK;gCAAQO,GAAE;gCAAKC,GAAE;gCAAYX,OAAM;gCAAKC,QAAO;;0CAC1D,qBAACY;gCAAKC,GAAE;;;;kCAEV,qBAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,qBAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;;;AAKf"}

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

@@ -5,5 +5,5 @@ type ErrorPaginationProps = {
     onActiveIndexChange: (index: number) => void;
 };
 export declare function ErrorOverlayPagination({ runtimeErrors, activeIdx, onActiveIndexChange, }: ErrorPaginationProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .error-overlay-pagination {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    width: fit-content;\n  }\n\n  .error-overlay-pagination-count {\n    color: var(--color-gray-900);\n    text-align: center;\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: 16px;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .error-overlay-pagination-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    background: var(--color-gray-300);\n    flex-shrink: 0;\n\n    border: none;\n    border-radius: var(--rounded-full);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-500);\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-pagination-button-icon {\n    color: var(--color-gray-1000);\n  }\n";
 export {};

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

@@ -20,21 +20,10 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _nooptemplate = require("../../../../utils/noop-template");
 const _leftarrow = require("../../../icons/left-arrow");
 const _rightarrow = require("../../../icons/right-arrow");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .error-overlay-pagination {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    width: fit-content;\n  }\n\n  .error-overlay-pagination-count {\n    color: var(--color-gray-900);\n    text-align: center;\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: 16px;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .error-overlay-pagination-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    background: var(--color-gray-300);\n    flex-shrink: 0;\n\n    border: none;\n    border-radius: var(--rounded-full);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-500);\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-pagination-button-icon {\n    color: var(--color-gray-1000);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayPagination(param) {
     let { runtimeErrors, activeIdx, onActiveIndexChange } = param;
     const handlePrevious = (0, _react.useCallback)(()=>(0, _react.startTransition)(()=>{
@@ -167,7 +156,7 @@ function ErrorOverlayPagination(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .error-overlay-pagination {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    width: fit-content;\n  }\n\n  .error-overlay-pagination-count {\n    color: var(--color-gray-900);\n    text-align: center;\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: 16px;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .error-overlay-pagination-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    background: var(--color-gray-300);\n    flex-shrink: 0;\n\n    border: none;\n    border-radius: var(--rounded-full);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-500);\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-pagination-button-icon {\n    color: var(--color-gray-1000);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-pagination/error-overlay-pagination.tsx"],"sourcesContent":["import {\n  startTransition,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { noop as css } from '../../../../utils/noop-template'\nimport { LeftArrow } from '../../../icons/left-arrow'\nimport { RightArrow } from '../../../icons/right-arrow'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\n\ntype ErrorPaginationProps = {\n  runtimeErrors: ReadyRuntimeError[]\n  activeIdx: number\n  onActiveIndexChange: (index: number) => void\n}\n\nexport function ErrorOverlayPagination({\n  runtimeErrors,\n  activeIdx,\n  onActiveIndexChange,\n}: ErrorPaginationProps) {\n  const handlePrevious = useCallback(\n    () =>\n      startTransition(() => {\n        if (activeIdx > 0) {\n          onActiveIndexChange(Math.max(0, activeIdx - 1))\n        }\n      }),\n    [activeIdx, onActiveIndexChange]\n  )\n\n  const handleNext = useCallback(\n    () =>\n      startTransition(() => {\n        if (activeIdx < runtimeErrors.length - 1) {\n          onActiveIndexChange(\n            Math.max(0, Math.min(runtimeErrors.length - 1, activeIdx + 1))\n          )\n        }\n      }),\n    [activeIdx, runtimeErrors.length, onActiveIndexChange]\n  )\n\n  const buttonLeft = useRef<HTMLButtonElement | null>(null)\n  const buttonRight = useRef<HTMLButtonElement | null>(null)\n\n  const [nav, setNav] = useState<HTMLElement | null>(null)\n  const onNav = useCallback((el: HTMLElement) => {\n    setNav(el)\n  }, [])\n\n  useEffect(() => {\n    if (nav == null) {\n      return\n    }\n\n    const root = nav.getRootNode()\n    const d = self.document\n\n    function handler(e: KeyboardEvent) {\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        e.stopPropagation()\n        handlePrevious && handlePrevious()\n      } else if (e.key === 'ArrowRight') {\n        e.preventDefault()\n        e.stopPropagation()\n        handleNext && handleNext()\n      }\n    }\n\n    root.addEventListener('keydown', handler as EventListener)\n    if (root !== d) {\n      d.addEventListener('keydown', handler)\n    }\n    return function () {\n      root.removeEventListener('keydown', handler as EventListener)\n      if (root !== d) {\n        d.removeEventListener('keydown', handler)\n      }\n    }\n  }, [nav, handleNext, handlePrevious])\n\n  // Unlock focus for browsers like Firefox, that break all user focus if the\n  // currently focused item becomes disabled.\n  useEffect(() => {\n    if (nav == null) {\n      return\n    }\n\n    const root = nav.getRootNode()\n    // Always true, but we do this for TypeScript:\n    if (root instanceof ShadowRoot) {\n      const a = root.activeElement\n\n      if (activeIdx === 0) {\n        if (buttonLeft.current && a === buttonLeft.current) {\n          buttonLeft.current.blur()\n        }\n      } else if (activeIdx === runtimeErrors.length - 1) {\n        if (buttonRight.current && a === buttonRight.current) {\n          buttonRight.current.blur()\n        }\n      }\n    }\n  }, [nav, activeIdx, runtimeErrors.length])\n\n  return (\n    <nav\n      className=\"error-overlay-pagination dialog-exclude-closing-from-outside-click\"\n      ref={onNav}\n    >\n      <button\n        ref={buttonLeft}\n        type=\"button\"\n        disabled={activeIdx === 0}\n        aria-disabled={activeIdx === 0}\n        onClick={handlePrevious}\n        data-nextjs-dialog-error-previous\n        className=\"error-overlay-pagination-button\"\n      >\n        <LeftArrow\n          title=\"previous\"\n          className=\"error-overlay-pagination-button-icon\"\n        />\n      </button>\n      <div className=\"error-overlay-pagination-count\">\n        <span data-nextjs-dialog-error-index={activeIdx}>{activeIdx + 1}/</span>\n        <span data-nextjs-dialog-header-total-count>\n          {/* Display 1 out of 1 if there are no errors (e.g. for build errors). */}\n          {runtimeErrors.length || 1}\n        </span>\n      </div>\n      <button\n        ref={buttonRight}\n        type=\"button\"\n        // If no errors or the last error is active, disable the button.\n        disabled={activeIdx >= runtimeErrors.length - 1}\n        aria-disabled={activeIdx >= runtimeErrors.length - 1}\n        onClick={handleNext}\n        data-nextjs-dialog-error-next\n        className=\"error-overlay-pagination-button\"\n      >\n        <RightArrow\n          title=\"next\"\n          className=\"error-overlay-pagination-button-icon\"\n        />\n      </button>\n    </nav>\n  )\n}\n\nexport const styles = css`\n  .error-overlay-pagination {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    width: fit-content;\n  }\n\n  .error-overlay-pagination-count {\n    color: var(--color-gray-900);\n    text-align: center;\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: 16px;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .error-overlay-pagination-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    background: var(--color-gray-300);\n    flex-shrink: 0;\n\n    border: none;\n    border-radius: var(--rounded-full);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-500);\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-pagination-button-icon {\n    color: var(--color-gray-1000);\n  }\n`\n"],"names":["ErrorOverlayPagination","styles","runtimeErrors","activeIdx","onActiveIndexChange","handlePrevious","useCallback","startTransition","Math","max","handleNext","length","min","buttonLeft","useRef","buttonRight","nav","setNav","useState","onNav","el","useEffect","root","getRootNode","d","self","document","handler","e","key","preventDefault","stopPropagation","addEventListener","removeEventListener","ShadowRoot","a","activeElement","current","blur","className","ref","button","type","disabled","aria-disabled","onClick","data-nextjs-dialog-error-previous","LeftArrow","title","div","span","data-nextjs-dialog-error-index","data-nextjs-dialog-header-total-count","data-nextjs-dialog-error-next","RightArrow","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-pagination/error-overlay-pagination.tsx"],"sourcesContent":["import {\n  startTransition,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { LeftArrow } from '../../../icons/left-arrow'\nimport { RightArrow } from '../../../icons/right-arrow'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\n\ntype ErrorPaginationProps = {\n  runtimeErrors: ReadyRuntimeError[]\n  activeIdx: number\n  onActiveIndexChange: (index: number) => void\n}\n\nexport function ErrorOverlayPagination({\n  runtimeErrors,\n  activeIdx,\n  onActiveIndexChange,\n}: ErrorPaginationProps) {\n  const handlePrevious = useCallback(\n    () =>\n      startTransition(() => {\n        if (activeIdx > 0) {\n          onActiveIndexChange(Math.max(0, activeIdx - 1))\n        }\n      }),\n    [activeIdx, onActiveIndexChange]\n  )\n\n  const handleNext = useCallback(\n    () =>\n      startTransition(() => {\n        if (activeIdx < runtimeErrors.length - 1) {\n          onActiveIndexChange(\n            Math.max(0, Math.min(runtimeErrors.length - 1, activeIdx + 1))\n          )\n        }\n      }),\n    [activeIdx, runtimeErrors.length, onActiveIndexChange]\n  )\n\n  const buttonLeft = useRef<HTMLButtonElement | null>(null)\n  const buttonRight = useRef<HTMLButtonElement | null>(null)\n\n  const [nav, setNav] = useState<HTMLElement | null>(null)\n  const onNav = useCallback((el: HTMLElement) => {\n    setNav(el)\n  }, [])\n\n  useEffect(() => {\n    if (nav == null) {\n      return\n    }\n\n    const root = nav.getRootNode()\n    const d = self.document\n\n    function handler(e: KeyboardEvent) {\n      if (e.key === 'ArrowLeft') {\n        e.preventDefault()\n        e.stopPropagation()\n        handlePrevious && handlePrevious()\n      } else if (e.key === 'ArrowRight') {\n        e.preventDefault()\n        e.stopPropagation()\n        handleNext && handleNext()\n      }\n    }\n\n    root.addEventListener('keydown', handler as EventListener)\n    if (root !== d) {\n      d.addEventListener('keydown', handler)\n    }\n    return function () {\n      root.removeEventListener('keydown', handler as EventListener)\n      if (root !== d) {\n        d.removeEventListener('keydown', handler)\n      }\n    }\n  }, [nav, handleNext, handlePrevious])\n\n  // Unlock focus for browsers like Firefox, that break all user focus if the\n  // currently focused item becomes disabled.\n  useEffect(() => {\n    if (nav == null) {\n      return\n    }\n\n    const root = nav.getRootNode()\n    // Always true, but we do this for TypeScript:\n    if (root instanceof ShadowRoot) {\n      const a = root.activeElement\n\n      if (activeIdx === 0) {\n        if (buttonLeft.current && a === buttonLeft.current) {\n          buttonLeft.current.blur()\n        }\n      } else if (activeIdx === runtimeErrors.length - 1) {\n        if (buttonRight.current && a === buttonRight.current) {\n          buttonRight.current.blur()\n        }\n      }\n    }\n  }, [nav, activeIdx, runtimeErrors.length])\n\n  return (\n    <nav\n      className=\"error-overlay-pagination dialog-exclude-closing-from-outside-click\"\n      ref={onNav}\n    >\n      <button\n        ref={buttonLeft}\n        type=\"button\"\n        disabled={activeIdx === 0}\n        aria-disabled={activeIdx === 0}\n        onClick={handlePrevious}\n        data-nextjs-dialog-error-previous\n        className=\"error-overlay-pagination-button\"\n      >\n        <LeftArrow\n          title=\"previous\"\n          className=\"error-overlay-pagination-button-icon\"\n        />\n      </button>\n      <div className=\"error-overlay-pagination-count\">\n        <span data-nextjs-dialog-error-index={activeIdx}>{activeIdx + 1}/</span>\n        <span data-nextjs-dialog-header-total-count>\n          {/* Display 1 out of 1 if there are no errors (e.g. for build errors). */}\n          {runtimeErrors.length || 1}\n        </span>\n      </div>\n      <button\n        ref={buttonRight}\n        type=\"button\"\n        // If no errors or the last error is active, disable the button.\n        disabled={activeIdx >= runtimeErrors.length - 1}\n        aria-disabled={activeIdx >= runtimeErrors.length - 1}\n        onClick={handleNext}\n        data-nextjs-dialog-error-next\n        className=\"error-overlay-pagination-button\"\n      >\n        <RightArrow\n          title=\"next\"\n          className=\"error-overlay-pagination-button-icon\"\n        />\n      </button>\n    </nav>\n  )\n}\n\nexport const styles = `\n  .error-overlay-pagination {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    width: fit-content;\n  }\n\n  .error-overlay-pagination-count {\n    color: var(--color-gray-900);\n    text-align: center;\n    font-size: var(--size-font-small);\n    font-weight: 500;\n    line-height: 16px;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .error-overlay-pagination-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 24px;\n    height: 24px;\n    background: var(--color-gray-300);\n    flex-shrink: 0;\n\n    border: none;\n    border-radius: var(--rounded-full);\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-500);\n    }\n\n    &:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-pagination-button-icon {\n    color: var(--color-gray-1000);\n  }\n`\n"],"names":["ErrorOverlayPagination","styles","runtimeErrors","activeIdx","onActiveIndexChange","handlePrevious","useCallback","startTransition","Math","max","handleNext","length","min","buttonLeft","useRef","buttonRight","nav","setNav","useState","onNav","el","useEffect","root","getRootNode","d","self","document","handler","e","key","preventDefault","stopPropagation","addEventListener","removeEventListener","ShadowRoot","a","activeElement","current","blur","className","ref","button","type","disabled","aria-disabled","onClick","data-nextjs-dialog-error-previous","LeftArrow","title","div","span","data-nextjs-dialog-error-index","data-nextjs-dialog-header-total-count","data-nextjs-dialog-error-next","RightArrow"],"mappings":"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"}

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

@@ -4,5 +4,5 @@ type ErrorOverlayToolbarProps = {
     debugInfo: DebugInfo | undefined;
 };
 export declare function ErrorOverlayToolbar({ error, debugInfo, }: ErrorOverlayToolbarProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .error-overlay-toolbar {\n    display: flex;\n    gap: var(--size-1_5);\n  }\n\n  .nodejs-inspector-button,\n  .copy-stack-trace-button,\n  .docs-link-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 28px;\n    height: 28px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-alpha-200);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-toolbar-button-icon {\n    color: var(--color-gray-900);\n  }\n";
 export {};

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

@@ -20,21 +20,10 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _nodejsinspectorbutton = require("./nodejs-inspector-button");
-const _nooptemplate = require("../../../../utils/noop-template");
 const _copystacktracebutton = require("./copy-stack-trace-button");
 const _docslinkbutton = require("./docs-link-button");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .error-overlay-toolbar {\n    display: flex;\n    gap: var(--size-1_5);\n  }\n\n  .nodejs-inspector-button,\n  .copy-stack-trace-button,\n  .docs-link-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 28px;\n    height: 28px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-alpha-200);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-toolbar-button-icon {\n    color: var(--color-gray-900);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayToolbar(param) {
     let { error, debugInfo } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
@@ -52,7 +41,7 @@ function ErrorOverlayToolbar(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .error-overlay-toolbar {\n    display: flex;\n    gap: var(--size-1_5);\n  }\n\n  .nodejs-inspector-button,\n  .copy-stack-trace-button,\n  .docs-link-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 28px;\n    height: 28px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-alpha-200);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-toolbar-button-icon {\n    color: var(--color-gray-900);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport { NodejsInspectorButton } from './nodejs-inspector-button'\nimport { noop as css } from '../../../../utils/noop-template'\nimport { CopyStackTraceButton } from './copy-stack-trace-button'\nimport { DocsLinkButton } from './docs-link-button'\n\ntype ErrorOverlayToolbarProps = {\n  error: Error\n  debugInfo: DebugInfo | undefined\n}\n\nexport function ErrorOverlayToolbar({\n  error,\n  debugInfo,\n}: ErrorOverlayToolbarProps) {\n  return (\n    <span className=\"error-overlay-toolbar\">\n      <CopyStackTraceButton error={error} />\n      <DocsLinkButton errorMessage={error.message} />\n      <NodejsInspectorButton\n        devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n      />\n    </span>\n  )\n}\n\nexport const styles = css`\n  .error-overlay-toolbar {\n    display: flex;\n    gap: var(--size-1_5);\n  }\n\n  .nodejs-inspector-button,\n  .copy-stack-trace-button,\n  .docs-link-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 28px;\n    height: 28px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-alpha-200);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-toolbar-button-icon {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["ErrorOverlayToolbar","styles","error","debugInfo","span","className","CopyStackTraceButton","DocsLinkButton","errorMessage","message","NodejsInspectorButton","devtoolsFrontendUrl","css"],"mappings":";;;;;;;;;;;;;;;IAWgBA,mBAAmB;eAAnBA;;IAeHC,MAAM;eAANA;;;;;uCAzByB;8BACV;sCACS;gCACN;;;;;;;;;;AAOxB,SAASD,oBAAoB,KAGT;IAHS,IAAA,EAClCE,KAAK,EACLC,SAAS,EACgB,GAHS;IAIlC,qBACE,sBAACC;QAAKC,WAAU;;0BACd,qBAACC,0CAAoB;gBAACJ,OAAOA;;0BAC7B,qBAACK,8BAAc;gBAACC,cAAcN,MAAMO,OAAO;;0BAC3C,qBAACC,4CAAqB;gBACpBC,mBAAmB,EAAER,6BAAAA,UAAWQ,mBAAmB;;;;AAI3D;AAEO,MAAMV,aAASW,kBAAG"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport { NodejsInspectorButton } from './nodejs-inspector-button'\nimport { CopyStackTraceButton } from './copy-stack-trace-button'\nimport { DocsLinkButton } from './docs-link-button'\n\ntype ErrorOverlayToolbarProps = {\n  error: Error\n  debugInfo: DebugInfo | undefined\n}\n\nexport function ErrorOverlayToolbar({\n  error,\n  debugInfo,\n}: ErrorOverlayToolbarProps) {\n  return (\n    <span className=\"error-overlay-toolbar\">\n      <CopyStackTraceButton error={error} />\n      <DocsLinkButton errorMessage={error.message} />\n      <NodejsInspectorButton\n        devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n      />\n    </span>\n  )\n}\n\nexport const styles = `\n  .error-overlay-toolbar {\n    display: flex;\n    gap: var(--size-1_5);\n  }\n\n  .nodejs-inspector-button,\n  .copy-stack-trace-button,\n  .docs-link-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 28px;\n    height: 28px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-small);\n    border-radius: var(--rounded-full);\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:not(:disabled):hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:not(:disabled):active {\n      background: var(--color-gray-alpha-200);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .error-overlay-toolbar-button-icon {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["ErrorOverlayToolbar","styles","error","debugInfo","span","className","CopyStackTraceButton","DocsLinkButton","errorMessage","message","NodejsInspectorButton","devtoolsFrontendUrl"],"mappings":";;;;;;;;;;;;;;;IAUgBA,mBAAmB;eAAnBA;;IAeHC,MAAM;eAANA;;;;uCAxByB;sCACD;gCACN;AAOxB,SAASD,oBAAoB,KAGT;IAHS,IAAA,EAClCE,KAAK,EACLC,SAAS,EACgB,GAHS;IAIlC,qBACE,sBAACC;QAAKC,WAAU;;0BACd,qBAACC,0CAAoB;gBAACJ,OAAOA;;0BAC7B,qBAACK,8BAAc;gBAACC,cAAcN,MAAMO,OAAO;;0BAC3C,qBAACC,4CAAqB;gBACpBC,mBAAmB,EAAER,6BAAAA,UAAWQ,mBAAmB;;;;AAI3D;AAEO,MAAMV,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-type-label/error-type-label.d.ts

@@ -3,5 +3,5 @@ type ErrorTypeLabelProps = {
     errorType: ErrorType;
 };
 export declare function ErrorTypeLabel({ errorType }: ErrorTypeLabelProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .nextjs__container_errors_label {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-red-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-red-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n";
 export {};

package/dist/client/components/react-dev-overlay/ui/components/errors/error-type-label/error-type-label.js

@@ -20,18 +20,7 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs__container_errors_label {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-red-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-red-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorTypeLabel(param) {
     let { errorType } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
@@ -40,7 +29,7 @@ function ErrorTypeLabel(param) {
         children: errorType
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .nextjs__container_errors_label {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-red-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-red-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/errors/error-type-label/error-type-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-type-label/error-type-label.tsx"],"sourcesContent":["import { noop as css } from '../../../../utils/noop-template'\n\nexport type ErrorType =\n  | 'Build Error'\n  | 'Runtime Error'\n  | 'Console Error'\n  | 'Unhandled Runtime Error'\n  | 'Missing Required HTML Tag'\n\ntype ErrorTypeLabelProps = {\n  errorType: ErrorType\n}\n\nexport function ErrorTypeLabel({ errorType }: ErrorTypeLabelProps) {\n  return (\n    <span\n      id=\"nextjs__container_errors_label\"\n      className=\"nextjs__container_errors_label\"\n    >\n      {errorType}\n    </span>\n  )\n}\n\nexport const styles = css`\n  .nextjs__container_errors_label {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-red-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-red-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n`\n"],"names":["ErrorTypeLabel","styles","errorType","span","id","className","css"],"mappings":";;;;;;;;;;;;;;;IAagBA,cAAc;eAAdA;;IAWHC,MAAM;eAANA;;;;;8BAxBe;;;;;;;;;;AAarB,SAASD,eAAe,KAAkC;IAAlC,IAAA,EAAEE,SAAS,EAAuB,GAAlC;IAC7B,qBACE,qBAACC;QACCC,IAAG;QACHC,WAAU;kBAETH;;AAGP;AAEO,MAAMD,aAASK,kBAAG"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-type-label/error-type-label.tsx"],"sourcesContent":["export type ErrorType =\n  | 'Build Error'\n  | 'Runtime Error'\n  | 'Console Error'\n  | 'Unhandled Runtime Error'\n  | 'Missing Required HTML Tag'\n\ntype ErrorTypeLabelProps = {\n  errorType: ErrorType\n}\n\nexport function ErrorTypeLabel({ errorType }: ErrorTypeLabelProps) {\n  return (\n    <span\n      id=\"nextjs__container_errors_label\"\n      className=\"nextjs__container_errors_label\"\n    >\n      {errorType}\n    </span>\n  )\n}\n\nexport const styles = `\n  .nextjs__container_errors_label {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-red-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-red-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n`\n"],"names":["ErrorTypeLabel","styles","errorType","span","id","className"],"mappings":";;;;;;;;;;;;;;;IAWgBA,cAAc;eAAdA;;IAWHC,MAAM;eAANA;;;;AAXN,SAASD,eAAe,KAAkC;IAAlC,IAAA,EAAEE,SAAS,EAAuB,GAAlC;IAC7B,qBACE,qBAACC;QACCC,IAAG;QACHC,WAAU;kBAETH;;AAGP;AAEO,MAAMD,SAAU"}

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

@@ -1,3 +1,3 @@
 import { type OverlayProps } from '../../overlay/overlay';
 export declare function ErrorOverlayOverlay({ children, ...props }: OverlayProps): import("react/jsx-runtime").JSX.Element;
-export declare const OVERLAY_STYLES: string;
+export declare const OVERLAY_STYLES = "\n  [data-nextjs-dialog-overlay] {\n    padding: initial;\n    top: 10vh;\n  }\n";

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

@@ -20,19 +20,8 @@ _export(exports, {
         return OVERLAY_STYLES;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
-const _nooptemplate = require("../../../../utils/noop-template");
 const _overlay = require("../../overlay/overlay");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-dialog-overlay] {\n    padding: initial;\n    top: 10vh;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayOverlay(param) {
     let { children, ...props } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_overlay.Overlay, {
@@ -40,7 +29,7 @@ function ErrorOverlayOverlay(param) {
         children: children
     });
 }
-const OVERLAY_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const OVERLAY_STYLES = "\n  [data-nextjs-dialog-overlay] {\n    padding: initial;\n    top: 10vh;\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/overlay/overlay.tsx"],"sourcesContent":["import { noop as css } from '../../../../utils/noop-template'\nimport { Overlay, type OverlayProps } from '../../overlay/overlay'\n\nexport function ErrorOverlayOverlay({ children, ...props }: OverlayProps) {\n  return <Overlay {...props}>{children}</Overlay>\n}\n\nexport const OVERLAY_STYLES = css`\n  [data-nextjs-dialog-overlay] {\n    padding: initial;\n    top: 10vh;\n  }\n`\n"],"names":["ErrorOverlayOverlay","OVERLAY_STYLES","children","props","Overlay","css"],"mappings":";;;;;;;;;;;;;;;IAGgBA,mBAAmB;eAAnBA;;IAIHC,cAAc;eAAdA;;;;;8BAPe;yBACe;;;;;;;;;;AAEpC,SAASD,oBAAoB,KAAoC;IAApC,IAAA,EAAEE,QAAQ,EAAE,GAAGC,OAAqB,GAApC;IAClC,qBAAO,qBAACC,gBAAO;QAAE,GAAGD,KAAK;kBAAGD;;AAC9B;AAEO,MAAMD,qBAAiBI,kBAAG"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/overlay/overlay.tsx"],"sourcesContent":["import { Overlay, type OverlayProps } from '../../overlay/overlay'\n\nexport function ErrorOverlayOverlay({ children, ...props }: OverlayProps) {\n  return <Overlay {...props}>{children}</Overlay>\n}\n\nexport const OVERLAY_STYLES = `\n  [data-nextjs-dialog-overlay] {\n    padding: initial;\n    top: 10vh;\n  }\n`\n"],"names":["ErrorOverlayOverlay","OVERLAY_STYLES","children","props","Overlay"],"mappings":";;;;;;;;;;;;;;;IAEgBA,mBAAmB;eAAnBA;;IAIHC,cAAc;eAAdA;;;;yBAN8B;AAEpC,SAASD,oBAAoB,KAAoC;IAApC,IAAA,EAAEE,QAAQ,EAAE,GAAGC,OAAqB,GAApC;IAClC,qBAAO,qBAACC,gBAAO;QAAE,GAAGD,KAAK;kBAAGD;;AAC9B;AAEO,MAAMD,iBAAkB"}

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

@@ -1,2 +1,2 @@
-declare const styles: string;
+declare const styles = "\n  [data-nextjs-dialog-overlay] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9000;\n\n    display: flex;\n    align-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding: 10vh 15px 0;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      padding: 15px 15px 0;\n    }\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--color-backdrop);\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n    z-index: -1;\n  }\n\n  [data-nextjs-dialog-backdrop-fixed] {\n    cursor: not-allowed;\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n  }\n";
 export { styles };

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

@@ -8,18 +8,7 @@ Object.defineProperty(exports, "styles", {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
-const _nooptemplate = require("../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-dialog-overlay] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9000;\n\n    display: flex;\n    align-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding: 10vh 15px 0;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      padding: 15px 15px 0;\n    }\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--color-backdrop);\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n    z-index: -1;\n  }\n\n  [data-nextjs-dialog-backdrop-fixed] {\n    cursor: not-allowed;\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  [data-nextjs-dialog-overlay] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9000;\n\n    display: flex;\n    align-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding: 10vh 15px 0;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      padding: 15px 15px 0;\n    }\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--color-backdrop);\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n    z-index: -1;\n  }\n\n  [data-nextjs-dialog-backdrop-fixed] {\n    cursor: not-allowed;\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/overlay/styles.tsx"],"sourcesContent":["import { noop as css } from '../../../utils/noop-template'\n\nconst styles = css`\n  [data-nextjs-dialog-overlay] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9000;\n\n    display: flex;\n    align-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding: 10vh 15px 0;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      padding: 15px 15px 0;\n    }\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--color-backdrop);\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n    z-index: -1;\n  }\n\n  [data-nextjs-dialog-backdrop-fixed] {\n    cursor: not-allowed;\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n  }\n`\n\nexport { styles }\n"],"names":["styles","css"],"mappings":";;;;+BA2CSA;;;eAAAA;;;;8BA3CmB;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/overlay/styles.tsx"],"sourcesContent":["const styles = `\n  [data-nextjs-dialog-overlay] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9000;\n\n    display: flex;\n    align-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding: 10vh 15px 0;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      padding: 15px 15px 0;\n    }\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--color-backdrop);\n    backdrop-filter: blur(10px);\n    pointer-events: all;\n    z-index: -1;\n  }\n\n  [data-nextjs-dialog-backdrop-fixed] {\n    cursor: not-allowed;\n    -webkit-backdrop-filter: blur(8px);\n    backdrop-filter: blur(8px);\n  }\n`\n\nexport { styles }\n"],"names":["styles"],"mappings":";;;;+BAyCSA;;;eAAAA;;;AAzCT,MAAMA,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/terminal/editor-link.d.ts

@@ -7,5 +7,5 @@ type EditorLinkProps = {
     };
 };
 export declare function EditorLink({ file, location }: EditorLinkProps): import("react/jsx-runtime").JSX.Element;
-export declare const EDITOR_LINK_STYLES: string;
+export declare const EDITOR_LINK_STYLES = "\n  [data-with-open-in-editor-link] svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n  }\n  [data-with-open-in-editor-link] {\n    cursor: pointer;\n  }\n  [data-with-open-in-editor-link]:hover {\n    text-decoration: underline dotted;\n  }\n  [data-with-open-in-editor-link-import-trace] {\n    margin-left: var(--size-gap-double);\n  }\n";
 export {};

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

@@ -20,19 +20,8 @@ _export(exports, {
         return EditorLink;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _useopenineditor = require("../../utils/use-open-in-editor");
-const _nooptemplate = require("../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  [data-with-open-in-editor-link] svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n  }\n  [data-with-open-in-editor-link] {\n    cursor: pointer;\n  }\n  [data-with-open-in-editor-link]:hover {\n    text-decoration: underline dotted;\n  }\n  [data-with-open-in-editor-link-import-trace] {\n    margin-left: var(--size-gap-double);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function EditorLink(param) {
     let { file, location } = param;
     var _location_line, _location_column;
@@ -77,7 +66,7 @@ function EditorLink(param) {
         ]
     });
 }
-const EDITOR_LINK_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const EDITOR_LINK_STYLES = "\n  [data-with-open-in-editor-link] svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n  }\n  [data-with-open-in-editor-link] {\n    cursor: pointer;\n  }\n  [data-with-open-in-editor-link]:hover {\n    text-decoration: underline dotted;\n  }\n  [data-with-open-in-editor-link-import-trace] {\n    margin-left: var(--size-gap-double);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/terminal/editor-link.tsx"],"sourcesContent":["import { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { noop as css } from '../../../utils/noop-template'\n\ntype EditorLinkProps = {\n  file: string\n  isSourceFile: boolean\n  location?: {\n    line: number\n    column: number\n  }\n}\nexport function EditorLink({ file, location }: EditorLinkProps) {\n  const open = useOpenInEditor({\n    file,\n    lineNumber: location?.line ?? 1,\n    column: location?.column ?? 0,\n  })\n\n  return (\n    <div\n      data-with-open-in-editor-link\n      data-with-open-in-editor-link-import-trace\n      tabIndex={10}\n      role={'link'}\n      onClick={open}\n      title={'Click to open in your editor'}\n    >\n      {file}\n      {location ? `:${location.line}:${location.column}` : null}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n        <polyline points=\"15 3 21 3 21 9\"></polyline>\n        <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n      </svg>\n    </div>\n  )\n}\n\nexport const EDITOR_LINK_STYLES = css`\n  [data-with-open-in-editor-link] svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n  }\n  [data-with-open-in-editor-link] {\n    cursor: pointer;\n  }\n  [data-with-open-in-editor-link]:hover {\n    text-decoration: underline dotted;\n  }\n  [data-with-open-in-editor-link-import-trace] {\n    margin-left: var(--size-gap-double);\n  }\n`\n"],"names":["EDITOR_LINK_STYLES","EditorLink","file","location","open","useOpenInEditor","lineNumber","line","column","div","data-with-open-in-editor-link","data-with-open-in-editor-link-import-trace","tabIndex","role","onClick","title","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","x1","y1","x2","y2","css"],"mappings":";;;;;;;;;;;;;;;IA8CaA,kBAAkB;eAAlBA;;IAnCGC,UAAU;eAAVA;;;;;iCAXgB;8BACJ;;;;;;;;;;AAUrB,SAASA,WAAW,KAAmC;IAAnC,IAAA,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAnC;QAGXA,gBACJA;IAHV,MAAMC,OAAOC,IAAAA,gCAAe,EAAC;QAC3BH;QACAI,YAAYH,CAAAA,iBAAAA,4BAAAA,SAAUI,IAAI,YAAdJ,iBAAkB;QAC9BK,QAAQL,CAAAA,mBAAAA,4BAAAA,SAAUK,MAAM,YAAhBL,mBAAoB;IAC9B;IAEA,qBACE,sBAACM;QACCC,+BAA6B;QAC7BC,4CAA0C;QAC1CC,UAAU;QACVC,MAAM;QACNC,SAASV;QACTW,OAAO;;YAENb;YACAC,WAAW,AAAC,MAAGA,SAASI,IAAI,GAAC,MAAGJ,SAASK,MAAM,GAAK;0BACrD,sBAACQ;gBACCC,OAAM;gBACNC,SAAQ;gBACRC,MAAK;gBACLC,QAAO;gBACPC,aAAY;gBACZC,eAAc;gBACdC,gBAAe;;kCAEf,qBAACC;wBAAKC,GAAE;;kCACR,qBAACC;wBAASC,QAAO;;kCACjB,qBAACpB;wBAAKqB,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;;;;;;AAIzC;AAEO,MAAM/B,yBAAqBgC,kBAAG"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/terminal/editor-link.tsx"],"sourcesContent":["import { useOpenInEditor } from '../../utils/use-open-in-editor'\n\ntype EditorLinkProps = {\n  file: string\n  isSourceFile: boolean\n  location?: {\n    line: number\n    column: number\n  }\n}\nexport function EditorLink({ file, location }: EditorLinkProps) {\n  const open = useOpenInEditor({\n    file,\n    lineNumber: location?.line ?? 1,\n    column: location?.column ?? 0,\n  })\n\n  return (\n    <div\n      data-with-open-in-editor-link\n      data-with-open-in-editor-link-import-trace\n      tabIndex={10}\n      role={'link'}\n      onClick={open}\n      title={'Click to open in your editor'}\n    >\n      {file}\n      {location ? `:${location.line}:${location.column}` : null}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n        <polyline points=\"15 3 21 3 21 9\"></polyline>\n        <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n      </svg>\n    </div>\n  )\n}\n\nexport const EDITOR_LINK_STYLES = `\n  [data-with-open-in-editor-link] svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n  }\n  [data-with-open-in-editor-link] {\n    cursor: pointer;\n  }\n  [data-with-open-in-editor-link]:hover {\n    text-decoration: underline dotted;\n  }\n  [data-with-open-in-editor-link-import-trace] {\n    margin-left: var(--size-gap-double);\n  }\n`\n"],"names":["EDITOR_LINK_STYLES","EditorLink","file","location","open","useOpenInEditor","lineNumber","line","column","div","data-with-open-in-editor-link","data-with-open-in-editor-link-import-trace","tabIndex","role","onClick","title","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","x1","y1","x2","y2"],"mappings":";;;;;;;;;;;;;;;IA6CaA,kBAAkB;eAAlBA;;IAnCGC,UAAU;eAAVA;;;;iCAVgB;AAUzB,SAASA,WAAW,KAAmC;IAAnC,IAAA,EAAEC,IAAI,EAAEC,QAAQ,EAAmB,GAAnC;QAGXA,gBACJA;IAHV,MAAMC,OAAOC,IAAAA,gCAAe,EAAC;QAC3BH;QACAI,YAAYH,CAAAA,iBAAAA,4BAAAA,SAAUI,IAAI,YAAdJ,iBAAkB;QAC9BK,QAAQL,CAAAA,mBAAAA,4BAAAA,SAAUK,MAAM,YAAhBL,mBAAoB;IAC9B;IAEA,qBACE,sBAACM;QACCC,+BAA6B;QAC7BC,4CAA0C;QAC1CC,UAAU;QACVC,MAAM;QACNC,SAASV;QACTW,OAAO;;YAENb;YACAC,WAAW,AAAC,MAAGA,SAASI,IAAI,GAAC,MAAGJ,SAASK,MAAM,GAAK;0BACrD,sBAACQ;gBACCC,OAAM;gBACNC,SAAQ;gBACRC,MAAK;gBACLC,QAAO;gBACPC,aAAY;gBACZC,eAAc;gBACdC,gBAAe;;kCAEf,qBAACC;wBAAKC,GAAE;;kCACR,qBAACC;wBAASC,QAAO;;kCACjB,qBAACpB;wBAAKqB,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;;;;;;AAIzC;AAEO,MAAM/B,qBAAsB"}

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

@@ -3,4 +3,4 @@ export type TerminalProps = {
     content: string;
 };
 export declare const Terminal: React.FC<TerminalProps>;
-export declare const TERMINAL_STYLES: string;
+export declare const TERMINAL_STYLES = "\n  [data-nextjs-terminal]::selection,\n  [data-nextjs-terminal] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-terminal] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-terminal] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-terminal] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-terminal] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n";