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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx"],"sourcesContent":["import type { OriginalStackFrame } from '../../../../utils/stack-frame'\nimport { useMemo, useState, useRef } from 'react'\nimport { CallStackFrame } from '../../call-stack-frame/call-stack-frame'\nimport { noop as css } from '../../../../utils/noop-template'\n\ninterface CallStackProps {\n  frames: OriginalStackFrame[]\n  dialogResizerRef: React.RefObject<HTMLDivElement | null>\n}\n\nexport function CallStack({ frames, dialogResizerRef }: CallStackProps) {\n  const initialDialogHeight = useRef<number>(NaN)\n  const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false)\n\n  const { visibleFrames, ignoredFrames, ignoreListLength } = useMemo(() => {\n    const visible: OriginalStackFrame[] = []\n    const ignored: OriginalStackFrame[] = []\n\n    for (const frame of frames) {\n      if (!frame.ignored) {\n        visible.push(frame)\n      }\n      if (frame.ignored) {\n        ignored.push(frame)\n      }\n    }\n\n    return {\n      visibleFrames: visible,\n      ignoredFrames: ignored,\n      ignoreListLength: ignored.length,\n    }\n  }, [frames])\n\n  function onToggleIgnoreList() {\n    const dialog = dialogResizerRef?.current as HTMLElement\n\n    if (!dialog) {\n      return\n    }\n\n    const { height: currentHeight } = dialog?.getBoundingClientRect()\n\n    if (!initialDialogHeight.current) {\n      initialDialogHeight.current = currentHeight\n    }\n\n    if (isIgnoreListOpen) {\n      function onTransitionEnd() {\n        dialog.removeEventListener('transitionend', onTransitionEnd)\n        setIsIgnoreListOpen(false)\n      }\n      dialog.style.height = `${initialDialogHeight.current}px`\n      dialog.addEventListener('transitionend', onTransitionEnd)\n    } else {\n      setIsIgnoreListOpen(true)\n    }\n  }\n\n  return (\n    <div className=\"error-overlay-call-stack-container\">\n      <div className=\"error-overlay-call-stack-header\">\n        <p className=\"error-overlay-call-stack-title\">\n          Call Stack{' '}\n          <span className=\"error-overlay-call-stack-count\">\n            {frames.length}\n          </span>\n        </p>\n        {ignoreListLength > 0 && (\n          <button\n            data-expand-ignore-button={isIgnoreListOpen}\n            className=\"error-overlay-call-stack-ignored-list-toggle-button\"\n            onClick={onToggleIgnoreList}\n          >\n            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignored-listed Frames`}\n            <ChevronUpDown />\n          </button>\n        )}\n      </div>\n      {visibleFrames.map((frame, frameIndex) => (\n        <CallStackFrame\n          key={`call-stack-leading-${frameIndex}`}\n          frame={frame}\n          index={frameIndex}\n        />\n      ))}\n\n      {isIgnoreListOpen && (\n        <>\n          {ignoredFrames.map((frame, frameIndex) => (\n            <CallStackFrame\n              key={`call-stack-ignored-${frameIndex}`}\n              frame={frame}\n              index={frameIndex}\n            />\n          ))}\n        </>\n      )}\n    </div>\n  )\n}\n\nfunction ChevronUpDown() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nexport const CALL_STACK_STYLES = css`\n  .error-overlay-call-stack-container {\n    position: relative;\n    margin-top: var(--size-2);\n  }\n\n  .error-overlay-call-stack-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 28px;\n    padding: var(--size-2) var(--size-2) var(--size-3) var(--size-1);\n    width: 100%;\n  }\n\n  .error-overlay-call-stack-title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--size-2);\n\n    margin: 0;\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .error-overlay-call-stack-count {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 20px;\n    height: 20px;\n    gap: var(--size-1);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-11);\n    font-weight: 500;\n    line-height: var(--size-4);\n\n    border-radius: var(--rounded-full);\n    background: var(--color-gray-300);\n  }\n\n  .error-overlay-call-stack-ignored-list-toggle-button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    border-radius: 6px;\n    padding: 4px 6px;\n    margin-right: -6px;\n    transition: background 150ms ease;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n`\n"],"names":["CALL_STACK_STYLES","CallStack","frames","dialogResizerRef","initialDialogHeight","useRef","NaN","isIgnoreListOpen","setIsIgnoreListOpen","useState","visibleFrames","ignoredFrames","ignoreListLength","useMemo","visible","ignored","frame","push","length","onToggleIgnoreList","dialog","current","height","currentHeight","getBoundingClientRect","onTransitionEnd","removeEventListener","style","addEventListener","div","className","p","span","button","data-expand-ignore-button","onClick","ChevronUpDown","map","frameIndex","CallStackFrame","index","svg","width","viewBox","fill","xmlns","path","fillRule","clipRule","d","css"],"mappings":";;;;;;;;;;;;;;;IAyHaA,iBAAiB;eAAjBA;;IA/GGC,SAAS;eAATA;;;;;uBAT0B;gCACX;8BACH;;;;;;;;;;AAOrB,SAASA,UAAU,KAA4C;IAA5C,IAAA,EAAEC,MAAM,EAAEC,gBAAgB,EAAkB,GAA5C;IACxB,MAAMC,sBAAsBC,IAAAA,aAAM,EAASC;IAC3C,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IAEzD,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,cAAO,EAAC;QACjE,MAAMC,UAAgC,EAAE;QACxC,MAAMC,UAAgC,EAAE;QAExC,KAAK,MAAMC,SAASd,OAAQ;YAC1B,IAAI,CAACc,MAAMD,OAAO,EAAE;gBAClBD,QAAQG,IAAI,CAACD;YACf;YACA,IAAIA,MAAMD,OAAO,EAAE;gBACjBA,QAAQE,IAAI,CAACD;YACf;QACF;QAEA,OAAO;YACLN,eAAeI;YACfH,eAAeI;YACfH,kBAAkBG,QAAQG,MAAM;QAClC;IACF,GAAG;QAAChB;KAAO;IAEX,SAASiB;QACP,MAAMC,SAASjB,oCAAAA,iBAAkBkB,OAAO;QAExC,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,MAAM,EAAEE,QAAQC,aAAa,EAAE,GAAGH,0BAAAA,OAAQI,qBAAqB;QAE/D,IAAI,CAACpB,oBAAoBiB,OAAO,EAAE;YAChCjB,oBAAoBiB,OAAO,GAAGE;QAChC;QAEA,IAAIhB,kBAAkB;YACpB,SAASkB;gBACPL,OAAOM,mBAAmB,CAAC,iBAAiBD;gBAC5CjB,oBAAoB;YACtB;YACAY,OAAOO,KAAK,CAACL,MAAM,GAAG,AAAC,KAAElB,oBAAoBiB,OAAO,GAAC;YACrDD,OAAOQ,gBAAgB,CAAC,iBAAiBH;QAC3C,OAAO;YACLjB,oBAAoB;QACtB;IACF;IAEA,qBACE,sBAACqB;QAAIC,WAAU;;0BACb,sBAACD;gBAAIC,WAAU;;kCACb,sBAACC;wBAAED,WAAU;;4BAAiC;4BACjC;0CACX,qBAACE;gCAAKF,WAAU;0CACb5B,OAAOgB,MAAM;;;;oBAGjBN,mBAAmB,mBAClB,sBAACqB;wBACCC,6BAA2B3B;wBAC3BuB,WAAU;wBACVK,SAAShB;;4BAELZ,CAAAA,mBAAmB,SAAS,MAAK,IAAE,MAAGK,mBAAiB;0CAC3D,qBAACwB;;;;;YAIN1B,cAAc2B,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,qBAACC,8BAAc;oBAEbvB,OAAOA;oBACPwB,OAAOF;mBAFF,AAAC,wBAAqBA;YAM9B/B,kCACC;0BACGI,cAAc0B,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,qBAACC,8BAAc;wBAEbvB,OAAOA;wBACPwB,OAAOF;uBAFF,AAAC,wBAAqBA;;;;AASzC;AAEA,SAASF;IACP,qBACE,qBAACK;QACCC,OAAM;QACNpB,QAAO;QACPqB,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,qBAACC;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb;AAEO,MAAM5C,wBAAoBkD,kBAAG"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx"],"sourcesContent":["import type { OriginalStackFrame } from '../../../../utils/stack-frame'\nimport { useMemo, useState, useRef } from 'react'\nimport { CallStackFrame } from '../../call-stack-frame/call-stack-frame'\n\ninterface CallStackProps {\n  frames: OriginalStackFrame[]\n  dialogResizerRef: React.RefObject<HTMLDivElement | null>\n}\n\nexport function CallStack({ frames, dialogResizerRef }: CallStackProps) {\n  const initialDialogHeight = useRef<number>(NaN)\n  const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false)\n\n  const { visibleFrames, ignoredFrames, ignoreListLength } = useMemo(() => {\n    const visible: OriginalStackFrame[] = []\n    const ignored: OriginalStackFrame[] = []\n\n    for (const frame of frames) {\n      if (!frame.ignored) {\n        visible.push(frame)\n      }\n      if (frame.ignored) {\n        ignored.push(frame)\n      }\n    }\n\n    return {\n      visibleFrames: visible,\n      ignoredFrames: ignored,\n      ignoreListLength: ignored.length,\n    }\n  }, [frames])\n\n  function onToggleIgnoreList() {\n    const dialog = dialogResizerRef?.current as HTMLElement\n\n    if (!dialog) {\n      return\n    }\n\n    const { height: currentHeight } = dialog?.getBoundingClientRect()\n\n    if (!initialDialogHeight.current) {\n      initialDialogHeight.current = currentHeight\n    }\n\n    if (isIgnoreListOpen) {\n      function onTransitionEnd() {\n        dialog.removeEventListener('transitionend', onTransitionEnd)\n        setIsIgnoreListOpen(false)\n      }\n      dialog.style.height = `${initialDialogHeight.current}px`\n      dialog.addEventListener('transitionend', onTransitionEnd)\n    } else {\n      setIsIgnoreListOpen(true)\n    }\n  }\n\n  return (\n    <div className=\"error-overlay-call-stack-container\">\n      <div className=\"error-overlay-call-stack-header\">\n        <p className=\"error-overlay-call-stack-title\">\n          Call Stack{' '}\n          <span className=\"error-overlay-call-stack-count\">\n            {frames.length}\n          </span>\n        </p>\n        {ignoreListLength > 0 && (\n          <button\n            data-expand-ignore-button={isIgnoreListOpen}\n            className=\"error-overlay-call-stack-ignored-list-toggle-button\"\n            onClick={onToggleIgnoreList}\n          >\n            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} Ignored-listed Frames`}\n            <ChevronUpDown />\n          </button>\n        )}\n      </div>\n      {visibleFrames.map((frame, frameIndex) => (\n        <CallStackFrame\n          key={`call-stack-leading-${frameIndex}`}\n          frame={frame}\n          index={frameIndex}\n        />\n      ))}\n\n      {isIgnoreListOpen && (\n        <>\n          {ignoredFrames.map((frame, frameIndex) => (\n            <CallStackFrame\n              key={`call-stack-ignored-${frameIndex}`}\n              frame={frame}\n              index={frameIndex}\n            />\n          ))}\n        </>\n      )}\n    </div>\n  )\n}\n\nfunction ChevronUpDown() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nexport const CALL_STACK_STYLES = `\n  .error-overlay-call-stack-container {\n    position: relative;\n    margin-top: var(--size-2);\n  }\n\n  .error-overlay-call-stack-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 28px;\n    padding: var(--size-2) var(--size-2) var(--size-3) var(--size-1);\n    width: 100%;\n  }\n\n  .error-overlay-call-stack-title {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--size-2);\n\n    margin: 0;\n\n    color: var(--color-gray-1000);\n    font-size: var(--size-font);\n    font-weight: 500;\n    line-height: var(--size-5);\n  }\n\n  .error-overlay-call-stack-count {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 20px;\n    height: 20px;\n    gap: var(--size-1);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-11);\n    font-weight: 500;\n    line-height: var(--size-4);\n\n    border-radius: var(--rounded-full);\n    background: var(--color-gray-300);\n  }\n\n  .error-overlay-call-stack-ignored-list-toggle-button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--color-gray-900);\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    border-radius: 6px;\n    padding: 4px 6px;\n    margin-right: -6px;\n    transition: background 150ms ease;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n  }\n`\n"],"names":["CALL_STACK_STYLES","CallStack","frames","dialogResizerRef","initialDialogHeight","useRef","NaN","isIgnoreListOpen","setIsIgnoreListOpen","useState","visibleFrames","ignoredFrames","ignoreListLength","useMemo","visible","ignored","frame","push","length","onToggleIgnoreList","dialog","current","height","currentHeight","getBoundingClientRect","onTransitionEnd","removeEventListener","style","addEventListener","div","className","p","span","button","data-expand-ignore-button","onClick","ChevronUpDown","map","frameIndex","CallStackFrame","index","svg","width","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;;;;;;;;;;;;IAwHaA,iBAAiB;eAAjBA;;IA/GGC,SAAS;eAATA;;;;uBAR0B;gCACX;AAOxB,SAASA,UAAU,KAA4C;IAA5C,IAAA,EAAEC,MAAM,EAAEC,gBAAgB,EAAkB,GAA5C;IACxB,MAAMC,sBAAsBC,IAAAA,aAAM,EAASC;IAC3C,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGC,IAAAA,eAAQ,EAAC;IAEzD,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,cAAO,EAAC;QACjE,MAAMC,UAAgC,EAAE;QACxC,MAAMC,UAAgC,EAAE;QAExC,KAAK,MAAMC,SAASd,OAAQ;YAC1B,IAAI,CAACc,MAAMD,OAAO,EAAE;gBAClBD,QAAQG,IAAI,CAACD;YACf;YACA,IAAIA,MAAMD,OAAO,EAAE;gBACjBA,QAAQE,IAAI,CAACD;YACf;QACF;QAEA,OAAO;YACLN,eAAeI;YACfH,eAAeI;YACfH,kBAAkBG,QAAQG,MAAM;QAClC;IACF,GAAG;QAAChB;KAAO;IAEX,SAASiB;QACP,MAAMC,SAASjB,oCAAAA,iBAAkBkB,OAAO;QAExC,IAAI,CAACD,QAAQ;YACX;QACF;QAEA,MAAM,EAAEE,QAAQC,aAAa,EAAE,GAAGH,0BAAAA,OAAQI,qBAAqB;QAE/D,IAAI,CAACpB,oBAAoBiB,OAAO,EAAE;YAChCjB,oBAAoBiB,OAAO,GAAGE;QAChC;QAEA,IAAIhB,kBAAkB;YACpB,SAASkB;gBACPL,OAAOM,mBAAmB,CAAC,iBAAiBD;gBAC5CjB,oBAAoB;YACtB;YACAY,OAAOO,KAAK,CAACL,MAAM,GAAG,AAAC,KAAElB,oBAAoBiB,OAAO,GAAC;YACrDD,OAAOQ,gBAAgB,CAAC,iBAAiBH;QAC3C,OAAO;YACLjB,oBAAoB;QACtB;IACF;IAEA,qBACE,sBAACqB;QAAIC,WAAU;;0BACb,sBAACD;gBAAIC,WAAU;;kCACb,sBAACC;wBAAED,WAAU;;4BAAiC;4BACjC;0CACX,qBAACE;gCAAKF,WAAU;0CACb5B,OAAOgB,MAAM;;;;oBAGjBN,mBAAmB,mBAClB,sBAACqB;wBACCC,6BAA2B3B;wBAC3BuB,WAAU;wBACVK,SAAShB;;4BAELZ,CAAAA,mBAAmB,SAAS,MAAK,IAAE,MAAGK,mBAAiB;0CAC3D,qBAACwB;;;;;YAIN1B,cAAc2B,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,qBAACC,8BAAc;oBAEbvB,OAAOA;oBACPwB,OAAOF;mBAFF,AAAC,wBAAqBA;YAM9B/B,kCACC;0BACGI,cAAc0B,GAAG,CAAC,CAACrB,OAAOsB,2BACzB,qBAACC,8BAAc;wBAEbvB,OAAOA;wBACPwB,OAAOF;uBAFF,AAAC,wBAAqBA;;;;AASzC;AAEA,SAASF;IACP,qBACE,qBAACK;QACCC,OAAM;QACNpB,QAAO;QACPqB,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,qBAACC;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;;AAIb;AAEO,MAAM5C,oBAAqB"}

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

@@ -8,5 +8,5 @@ export declare function DevToolsIndicator({ state, errorCount, isBuildError, set
     setIsErrorOverlayOpen: (isOverlayOpen: boolean) => void;
     position?: DevToolsIndicatorPosition;
 }): false | import("react/jsx-runtime").JSX.Element;
-export declare const DEV_TOOLS_INDICATOR_STYLES: string;
+export declare const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n";
 export {};

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

@@ -20,7 +20,6 @@ _export(exports, {
         return DevToolsIndicator;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _toast = require("../../toast");
@@ -28,19 +27,9 @@ const _nextlogo = require("./next-logo");
 const _initialize = require("../../../../../../dev/dev-build-indicator/internal/initialize");
 const _devrenderindicator = require("../../../../utils/dev-indicator/dev-render-indicator");
 const _usedelayedrender = require("../../../hooks/use-delayed-render");
-const _nooptemplate = require("../../../../utils/noop-template");
 const _turbopackinfo = require("./dev-tools-info/turbopack-info");
 const _routeinfo = require("./dev-tools-info/route-info");
 const _stopicon = require("../../../icons/stop-icon");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 // TODO: add E2E tests to cover different scenarios
 const INDICATOR_POSITION = process.env.__NEXT_DEV_INDICATOR_POSITION || 'bottom-left';
 function DevToolsIndicator(param) {
@@ -437,7 +426,7 @@ function useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu) {
         isMenuOpen
     ]);
 }
-const DEV_TOOLS_INDICATOR_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n";
 
 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/dev-tools-indicator/dev-tools-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './next-logo'\nimport { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'\nimport { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { noop as css } from '../../../../utils/noop-template'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport { StopIcon } from '../../../icons/stop-icon'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n  (process.env\n    .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||\n  'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  isBuildError,\n  setIsErrorOverlayOpen,\n  position = INDICATOR_POSITION,\n}: {\n  state: OverlayState\n  errorCount: number\n  isBuildError: boolean\n  setIsErrorOverlayOpen: (isOverlayOpen: boolean) => void\n  // Technically this prop isn't needed, but useful for testing.\n  position?: DevToolsIndicatorPosition\n}) {\n  const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n\n  return (\n    isDevToolsIndicatorOpen && (\n      <DevToolsPopover\n        semver={state.versionInfo.installed}\n        issueCount={errorCount}\n        isStaticRoute={state.staticIndicator}\n        hide={() => {\n          setIsDevToolsIndicatorOpen(false)\n        }}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n        isTurbopack={!!process.env.TURBOPACK}\n        position={position}\n        disabled={state.disableDevIndicator}\n        isBuildError={isBuildError}\n      />\n    )\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n  closeMenu: () => void\n  selectedIndex: number\n  setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n  disabled,\n  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  position,\n  isBuildError,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  disabled: boolean\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  position: DevToolsIndicatorPosition\n  isBuildError: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: (isOverlayOpen: boolean) => void\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const turbopackRef = useRef<HTMLElement>(null)\n  const triggerTurbopackRef = useRef<HTMLButtonElement | null>(null)\n  const routeInfoRef = useRef<HTMLElement>(null)\n  const triggerRouteInfoRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)\n  const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n    isMenuOpen,\n    {\n      // Intentionally no fade in, makes the UI feel more immediate\n      enterDelay: 0,\n      // Graceful fade out to confirm that the UI did not break\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    }\n  )\n  const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } =\n    useDelayedRender(isTurbopackInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n  const { mounted: routeInfoMounted, rendered: routeInfoRendered } =\n    useDelayedRender(isRouteInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n\n  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n  useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen)\n  useClickOutside(\n    turbopackRef,\n    triggerTurbopackRef,\n    isTurbopackInfoOpen,\n    closeTurbopackInfo\n  )\n  useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen)\n  useClickOutside(\n    routeInfoRef,\n    triggerRouteInfoRef,\n    isRouteInfoOpen,\n    closeRouteInfo\n  )\n\n  function select(index: number | 'first' | 'last') {\n    if (index === 'first') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const firstIndex = all[0].getAttribute('data-index')\n        select(Number(firstIndex))\n      }\n      return\n    }\n\n    if (index === 'last') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const lastIndex = all.length - 1\n        select(lastIndex)\n      }\n      return\n    }\n\n    const el = menuRef.current?.querySelector(\n      `[data-index=\"${index}\"]`\n    ) as HTMLElement\n    if (el) {\n      setSelectedIndex(index)\n      el?.focus()\n    }\n  }\n\n  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n    e.preventDefault()\n\n    switch (e.key) {\n      case 'ArrowDown':\n        const next = selectedIndex + 1\n        select(next)\n        break\n      case 'ArrowUp':\n        const prev = selectedIndex - 1\n        select(prev)\n        break\n      case 'Home':\n        select('first')\n        break\n      case 'End':\n        select('last')\n        break\n      default:\n        break\n    }\n  }\n\n  function onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (isMenuOpen) {\n      return\n    }\n\n    // Open with first item focused\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('first')\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('last')\n      })\n    }\n  }\n\n  function openErrorOverlay() {\n    if (issueCount > 0) {\n      setIsErrorOverlayOpen(true)\n    }\n  }\n\n  function onTriggerClick() {\n    setIsMenuOpen((prev) => !prev)\n  }\n\n  function closeMenu() {\n    setIsMenuOpen(false)\n    // Avoid flashing selected state\n    setTimeout(() => {\n      setSelectedIndex(-1)\n    }, ANIMATE_OUT_DURATION_MS)\n  }\n\n  function closeTurbopackInfo() {\n    setIsTurbopackInfoOpen(false)\n  }\n\n  function closeRouteInfo() {\n    setIsRouteInfoOpen(false)\n  }\n\n  const [vertical, horizontal] = position.split('-', 2)\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n        // Reset the toast component's default positions.\n        bottom: 'initial',\n        left: 'initial',\n        [vertical]: 'var(--size-2_5)',\n        [horizontal]: 'var(--size-5)',\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        aria-haspopup=\"menu\"\n        aria-expanded={isMenuOpen}\n        aria-controls=\"nextjs-dev-tools-menu\"\n        aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n        data-nextjs-dev-tools-button\n        disabled={disabled}\n        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        openErrorOverlay={openErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n        isBuildError={isBuildError}\n      />\n\n      {routeInfoMounted && (\n        <RouteInfo\n          ref={routeInfoRef}\n          routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n          isOpen={isRouteInfoOpen}\n          setIsOpen={setIsRouteInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + var(--size-gap))',\n            [horizontal]: 0,\n          }}\n          data-rendered={routeInfoRendered}\n        />\n      )}\n\n      {turbopackInfoMounted && (\n        <TurbopackInfo\n          ref={turbopackRef}\n          isOpen={isTurbopackInfoOpen}\n          setIsOpen={setIsTurbopackInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + var(--size-gap))',\n            [horizontal]: 0,\n          }}\n          data-rendered={turbopackInfoRendered}\n        />\n      )}\n\n      {menuMounted && (\n        <div\n          ref={menuRef}\n          id=\"nextjs-dev-tools-menu\"\n          role=\"menu\"\n          dir=\"ltr\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Next.js Dev Tools Items\"\n          tabIndex={-1}\n          className=\"dev-tools-indicator-menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={menuRendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n              [vertical]: 'calc(100% + var(--size-gap))',\n              [horizontal]: 0,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"dev-tools-indicator-inner\">\n              {issueCount > 0 && (\n                <MenuItem\n                  index={0}\n                  label=\"Issues\"\n                  value={<IssueCount>{issueCount}</IssueCount>}\n                  onClick={openErrorOverlay}\n                />\n              )}\n              <MenuItem\n                label=\"Route\"\n                index={1}\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                onClick={() => setIsRouteInfoOpen(true)}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n              ) : (\n                <MenuItem\n                  index={2}\n                  label=\"Try Turbopack\"\n                  value={<ChevronRight />}\n                  onClick={() => setIsTurbopackInfoOpen(true)}\n                />\n              )}\n            </div>\n\n            <div className=\"dev-tools-indicator-footer\">\n              <MenuItem\n                data-hide-dev-tools\n                label=\"Hide Dev Tools\"\n                value={<StopIcon />}\n                onClick={hide}\n                index={isTurbopack ? 2 : 3}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction ChevronRight() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n      <path\n        fill=\"#666\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z\"\n      />\n    </svg>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\n  label: string\n  value: React.ReactNode\n  href?: string\n  onClick?: () => void\n}) {\n  const isInteractive =\n    typeof onClick === 'function' || typeof href === 'string'\n  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n  const selected = selectedIndex === index\n\n  function click() {\n    if (isInteractive) {\n      onClick?.()\n      closeMenu()\n      if (href) {\n        window.open(href, '_blank', 'noopener, noreferrer')\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"dev-tools-indicator-item\"\n      data-index={index}\n      data-selected={selected}\n      onClick={click}\n      // Needs `onMouseMove` instead of enter to work together\n      // with keyboard and mouse input\n      onMouseMove={() => {\n        if (isInteractive && index !== undefined && selectedIndex !== index) {\n          setSelectedIndex(index)\n        }\n      }}\n      onMouseLeave={() => setSelectedIndex(-1)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          click()\n        }\n      }}\n      role={isInteractive ? 'menuitem' : undefined}\n      tabIndex={selected ? 0 : -1}\n      {...props}\n    >\n      <span className=\"dev-tools-indicator-label\">{label}</span>\n      <span className=\"dev-tools-indicator-value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span\n      className=\"dev-tools-indicator-issue-count\"\n      data-has-issues={children > 0}\n    >\n      <span className=\"dev-tools-indicator-issue-count-indicator\" />\n      {children}\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      const root = triggerRef.current?.getRootNode()\n      const activeElement =\n        root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n      // Only restore focus if the focus was previously on the menu.\n      // This avoids us accidentally focusing on mount when the\n      // user could want to interact with their own app instead.\n      if (menuRef.current?.contains(activeElement)) {\n        triggerRef.current?.focus()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean,\n  closeMenu: () => void\n) {\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return\n    }\n\n    // Close menu when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(menuRef.current?.getBoundingClientRect()\n          ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(triggerRef.current?.getBoundingClientRect()\n          ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              triggerRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        closeMenu()\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMenu()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = css`\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n`\n"],"names":["DEV_TOOLS_INDICATOR_STYLES","DevToolsIndicator","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","useState","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","createContext","menuRef","useRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","useDelayedRender","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","Toast","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","TurbopackInfo","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","StopIcon","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","useContext","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","useEffect","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './next-logo'\nimport { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'\nimport { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport { StopIcon } from '../../../icons/stop-icon'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n  (process.env\n    .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||\n  'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  isBuildError,\n  setIsErrorOverlayOpen,\n  position = INDICATOR_POSITION,\n}: {\n  state: OverlayState\n  errorCount: number\n  isBuildError: boolean\n  setIsErrorOverlayOpen: (isOverlayOpen: boolean) => void\n  // Technically this prop isn't needed, but useful for testing.\n  position?: DevToolsIndicatorPosition\n}) {\n  const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n\n  return (\n    isDevToolsIndicatorOpen && (\n      <DevToolsPopover\n        semver={state.versionInfo.installed}\n        issueCount={errorCount}\n        isStaticRoute={state.staticIndicator}\n        hide={() => {\n          setIsDevToolsIndicatorOpen(false)\n        }}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n        isTurbopack={!!process.env.TURBOPACK}\n        position={position}\n        disabled={state.disableDevIndicator}\n        isBuildError={isBuildError}\n      />\n    )\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n  closeMenu: () => void\n  selectedIndex: number\n  setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n  disabled,\n  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  position,\n  isBuildError,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  disabled: boolean\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  position: DevToolsIndicatorPosition\n  isBuildError: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: (isOverlayOpen: boolean) => void\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const turbopackRef = useRef<HTMLElement>(null)\n  const triggerTurbopackRef = useRef<HTMLButtonElement | null>(null)\n  const routeInfoRef = useRef<HTMLElement>(null)\n  const triggerRouteInfoRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)\n  const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n    isMenuOpen,\n    {\n      // Intentionally no fade in, makes the UI feel more immediate\n      enterDelay: 0,\n      // Graceful fade out to confirm that the UI did not break\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    }\n  )\n  const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } =\n    useDelayedRender(isTurbopackInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n  const { mounted: routeInfoMounted, rendered: routeInfoRendered } =\n    useDelayedRender(isRouteInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n\n  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n  useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen)\n  useClickOutside(\n    turbopackRef,\n    triggerTurbopackRef,\n    isTurbopackInfoOpen,\n    closeTurbopackInfo\n  )\n  useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen)\n  useClickOutside(\n    routeInfoRef,\n    triggerRouteInfoRef,\n    isRouteInfoOpen,\n    closeRouteInfo\n  )\n\n  function select(index: number | 'first' | 'last') {\n    if (index === 'first') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const firstIndex = all[0].getAttribute('data-index')\n        select(Number(firstIndex))\n      }\n      return\n    }\n\n    if (index === 'last') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const lastIndex = all.length - 1\n        select(lastIndex)\n      }\n      return\n    }\n\n    const el = menuRef.current?.querySelector(\n      `[data-index=\"${index}\"]`\n    ) as HTMLElement\n    if (el) {\n      setSelectedIndex(index)\n      el?.focus()\n    }\n  }\n\n  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n    e.preventDefault()\n\n    switch (e.key) {\n      case 'ArrowDown':\n        const next = selectedIndex + 1\n        select(next)\n        break\n      case 'ArrowUp':\n        const prev = selectedIndex - 1\n        select(prev)\n        break\n      case 'Home':\n        select('first')\n        break\n      case 'End':\n        select('last')\n        break\n      default:\n        break\n    }\n  }\n\n  function onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (isMenuOpen) {\n      return\n    }\n\n    // Open with first item focused\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('first')\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('last')\n      })\n    }\n  }\n\n  function openErrorOverlay() {\n    if (issueCount > 0) {\n      setIsErrorOverlayOpen(true)\n    }\n  }\n\n  function onTriggerClick() {\n    setIsMenuOpen((prev) => !prev)\n  }\n\n  function closeMenu() {\n    setIsMenuOpen(false)\n    // Avoid flashing selected state\n    setTimeout(() => {\n      setSelectedIndex(-1)\n    }, ANIMATE_OUT_DURATION_MS)\n  }\n\n  function closeTurbopackInfo() {\n    setIsTurbopackInfoOpen(false)\n  }\n\n  function closeRouteInfo() {\n    setIsRouteInfoOpen(false)\n  }\n\n  const [vertical, horizontal] = position.split('-', 2)\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n        // Reset the toast component's default positions.\n        bottom: 'initial',\n        left: 'initial',\n        [vertical]: 'var(--size-2_5)',\n        [horizontal]: 'var(--size-5)',\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        aria-haspopup=\"menu\"\n        aria-expanded={isMenuOpen}\n        aria-controls=\"nextjs-dev-tools-menu\"\n        aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n        data-nextjs-dev-tools-button\n        disabled={disabled}\n        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        openErrorOverlay={openErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n        isBuildError={isBuildError}\n      />\n\n      {routeInfoMounted && (\n        <RouteInfo\n          ref={routeInfoRef}\n          routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n          isOpen={isRouteInfoOpen}\n          setIsOpen={setIsRouteInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + var(--size-gap))',\n            [horizontal]: 0,\n          }}\n          data-rendered={routeInfoRendered}\n        />\n      )}\n\n      {turbopackInfoMounted && (\n        <TurbopackInfo\n          ref={turbopackRef}\n          isOpen={isTurbopackInfoOpen}\n          setIsOpen={setIsTurbopackInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + var(--size-gap))',\n            [horizontal]: 0,\n          }}\n          data-rendered={turbopackInfoRendered}\n        />\n      )}\n\n      {menuMounted && (\n        <div\n          ref={menuRef}\n          id=\"nextjs-dev-tools-menu\"\n          role=\"menu\"\n          dir=\"ltr\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Next.js Dev Tools Items\"\n          tabIndex={-1}\n          className=\"dev-tools-indicator-menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={menuRendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n              [vertical]: 'calc(100% + var(--size-gap))',\n              [horizontal]: 0,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"dev-tools-indicator-inner\">\n              {issueCount > 0 && (\n                <MenuItem\n                  index={0}\n                  label=\"Issues\"\n                  value={<IssueCount>{issueCount}</IssueCount>}\n                  onClick={openErrorOverlay}\n                />\n              )}\n              <MenuItem\n                label=\"Route\"\n                index={1}\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                onClick={() => setIsRouteInfoOpen(true)}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n              ) : (\n                <MenuItem\n                  index={2}\n                  label=\"Try Turbopack\"\n                  value={<ChevronRight />}\n                  onClick={() => setIsTurbopackInfoOpen(true)}\n                />\n              )}\n            </div>\n\n            <div className=\"dev-tools-indicator-footer\">\n              <MenuItem\n                data-hide-dev-tools\n                label=\"Hide Dev Tools\"\n                value={<StopIcon />}\n                onClick={hide}\n                index={isTurbopack ? 2 : 3}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction ChevronRight() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n      <path\n        fill=\"#666\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z\"\n      />\n    </svg>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\n  label: string\n  value: React.ReactNode\n  href?: string\n  onClick?: () => void\n}) {\n  const isInteractive =\n    typeof onClick === 'function' || typeof href === 'string'\n  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n  const selected = selectedIndex === index\n\n  function click() {\n    if (isInteractive) {\n      onClick?.()\n      closeMenu()\n      if (href) {\n        window.open(href, '_blank', 'noopener, noreferrer')\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"dev-tools-indicator-item\"\n      data-index={index}\n      data-selected={selected}\n      onClick={click}\n      // Needs `onMouseMove` instead of enter to work together\n      // with keyboard and mouse input\n      onMouseMove={() => {\n        if (isInteractive && index !== undefined && selectedIndex !== index) {\n          setSelectedIndex(index)\n        }\n      }}\n      onMouseLeave={() => setSelectedIndex(-1)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          click()\n        }\n      }}\n      role={isInteractive ? 'menuitem' : undefined}\n      tabIndex={selected ? 0 : -1}\n      {...props}\n    >\n      <span className=\"dev-tools-indicator-label\">{label}</span>\n      <span className=\"dev-tools-indicator-value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span\n      className=\"dev-tools-indicator-issue-count\"\n      data-has-issues={children > 0}\n    >\n      <span className=\"dev-tools-indicator-issue-count-indicator\" />\n      {children}\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      const root = triggerRef.current?.getRootNode()\n      const activeElement =\n        root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n      // Only restore focus if the focus was previously on the menu.\n      // This avoids us accidentally focusing on mount when the\n      // user could want to interact with their own app instead.\n      if (menuRef.current?.contains(activeElement)) {\n        triggerRef.current?.focus()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean,\n  closeMenu: () => void\n) {\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return\n    }\n\n    // Close menu when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(menuRef.current?.getBoundingClientRect()\n          ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(triggerRef.current?.getBoundingClientRect()\n          ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              triggerRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        closeMenu()\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMenu()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = `\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 41px;\n    height: 24px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n`\n"],"names":["DEV_TOOLS_INDICATOR_STYLES","DevToolsIndicator","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","useState","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","createContext","menuRef","useRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","useDelayedRender","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","Toast","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","TurbopackInfo","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","StopIcon","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","useContext","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","useEffect","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener"],"mappings":"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"}

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

@@ -5,4 +5,4 @@ export declare function DevToolsInfo({ title, children, learnMoreLink, setIsOpen
     setIsOpen: (isOpen: boolean) => void;
     setPreviousOpen: (isOpen: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const DEV_TOOLS_INFO_STYLES: string;
+export declare const DEV_TOOLS_INFO_STYLES = "\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n";

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

@@ -20,18 +20,7 @@ _export(exports, {
         return DevToolsInfo;
     }
 });
-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  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function DevToolsInfo(param) {
     let { title, children, learnMoreLink, setIsOpen, setPreviousOpen, ...props } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -69,7 +58,7 @@ function DevToolsInfo(param) {
         })
     });
 }
-const DEV_TOOLS_INFO_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DEV_TOOLS_INFO_STYLES = "\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\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/dev-tools-indicator/dev-tools-info/dev-tools-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx"],"sourcesContent":["import { noop as css } from '../../../../../utils/noop-template'\n\nexport function DevToolsInfo({\n  title,\n  children,\n  learnMoreLink,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  title: string\n  children: React.ReactNode\n  learnMoreLink: string\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n}) {\n  return (\n    <div data-info-popover {...props}>\n      <div className=\"dev-tools-info-container\">\n        <h1 className=\"dev-tools-info-title\">{title}</h1>\n        {children}\n        <div className=\"dev-tools-info-button-container\">\n          <button\n            className=\"dev-tools-info-close-button\"\n            onClick={() => {\n              setIsOpen(false)\n              setPreviousOpen(true)\n            }}\n          >\n            Close\n          </button>\n          <a\n            className=\"dev-tools-info-learn-more-button\"\n            href={learnMoreLink}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n          >\n            Learn More\n          </a>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const DEV_TOOLS_INFO_STYLES = css`\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n`\n"],"names":["DEV_TOOLS_INFO_STYLES","DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","css"],"mappings":";;;;;;;;;;;;;;;IA6CaA,qBAAqB;eAArBA;;IA3CGC,YAAY;eAAZA;;;;;8BAFY;;;;;;;;;;AAErB,SAASA,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,qBAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,sBAACC;YAAIE,WAAU;;8BACb,qBAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,sBAACK;oBAAIE,WAAU;;sCACb,qBAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,qBAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEO,MAAMjB,4BAAwBkB,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx"],"sourcesContent":["export function DevToolsInfo({\n  title,\n  children,\n  learnMoreLink,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  title: string\n  children: React.ReactNode\n  learnMoreLink: string\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n}) {\n  return (\n    <div data-info-popover {...props}>\n      <div className=\"dev-tools-info-container\">\n        <h1 className=\"dev-tools-info-title\">{title}</h1>\n        {children}\n        <div className=\"dev-tools-info-button-container\">\n          <button\n            className=\"dev-tools-info-close-button\"\n            onClick={() => {\n              setIsOpen(false)\n              setPreviousOpen(true)\n            }}\n          >\n            Close\n          </button>\n          <a\n            className=\"dev-tools-info-learn-more-button\"\n            href={learnMoreLink}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n          >\n            Learn More\n          </a>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const DEV_TOOLS_INFO_STYLES = `\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n`\n"],"names":["DEV_TOOLS_INFO_STYLES","DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel"],"mappings":";;;;;;;;;;;;;;;IA2CaA,qBAAqB;eAArBA;;IA3CGC,YAAY;eAAZA;;;;AAAT,SAASA,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,qBAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,sBAACC;YAAIE,WAAU;;8BACb,qBAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,sBAACK;oBAAIE,WAAU;;sCACb,qBAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,qBAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEO,MAAMjB,wBAAyB"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.d.ts

@@ -6,4 +6,4 @@ export declare function RouteInfo({ routeType, isOpen, setIsOpen, setPreviousOpe
     style?: React.CSSProperties;
     ref?: React.RefObject<HTMLElement | null>;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const DEV_TOOLS_INFO_ROUTE_INFO_STYLES: string;
+export declare const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "\n  .dev-tools-info-link {\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.js

@@ -20,19 +20,8 @@ _export(exports, {
         return RouteInfo;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _devtoolsinfo = require("./dev-tools-info");
-const _nooptemplate = require("../../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .dev-tools-info-link {\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function StaticRouteContent() {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
         className: "dev-tools-info-article",
@@ -147,7 +136,7 @@ function RouteInfo(param) {
         children: isStaticRoute ? /*#__PURE__*/ (0, _jsxruntime.jsx)(StaticRouteContent, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(DynamicRouteContent, {})
     });
 }
-const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "\n  .dev-tools-info-link {\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/dev-tools-indicator/dev-tools-info/route-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { noop as css } from '../../../../../utils/noop-template'\n\nfunction StaticRouteContent() {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"static\" since it will be prerendered during the build\n        time.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        With Static Rendering, routes are rendered at build time, or in the\n        background after{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          data revalidation\n        </a>\n        .\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Static rendering is useful when a route has data that is not\n        personalized to the user and can be known at build time, such as a\n        static blog post or a product page.\n      </p>\n    </article>\n  )\n}\n\nfunction DynamicRouteContent() {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"dynamic\" since it will be rendered for each user at{' '}\n        <strong>request time</strong>.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Dynamic rendering is useful when a route has data that is personalized\n        to the user or has information that can only be known at request time,\n        such as cookies or the URL's search params.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        During rendering, if a{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Dynamic API\n        </a>{' '}\n        or a{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/api-reference/functions/fetch\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          fetch\n        </a>{' '}\n        option of{' '}\n        <code className=\"dev-tools-info-code\">{`{ cache: 'no-store' }`}</code>{' '}\n        is discovered, Next.js will switch to dynamically rendering the whole\n        route.\n      </p>\n    </article>\n  )\n}\n\nexport function RouteInfo({\n  routeType,\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  routeType: 'Static' | 'Dynamic'\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  const isStaticRoute = routeType === 'Static'\n  const learnMoreLink = isStaticRoute\n    ? 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default'\n    : 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering'\n  return (\n    <DevToolsInfo\n      {...props}\n      title={`${routeType} Route`}\n      learnMoreLink={learnMoreLink}\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n    >\n      {isStaticRoute ? <StaticRouteContent /> : <DynamicRouteContent />}\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = css`\n  .dev-tools-info-link {\n  }\n`\n"],"names":["DEV_TOOLS_INFO_ROUTE_INFO_STYLES","RouteInfo","StaticRouteContent","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMoreLink","DevToolsInfo","title","css"],"mappings":";;;;;;;;;;;;;;;IA2GaA,gCAAgC;eAAhCA;;IA/BGC,SAAS;eAATA;;;;;8BA5Ea;8BACD;;;;;;;;;;AAE5B,SAASC;IACP,qBACE,sBAACC;QAAQC,WAAU;;0BACjB,sBAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,qBAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,sBAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,qBAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,qBAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU;IACP,qBACE,sBAACX;QAAQC,WAAU;;0BACjB,sBAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,qBAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,qBAACM;kCAAO;;oBAAqB;;;0BAE/B,qBAACV;gBAAED,WAAU;0BAA2B;;0BAKxC,sBAACC;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,qBAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,qBAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,qBAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAMnF;AAEO,SAASH,UAAU,KAazB;IAbyB,IAAA,EACxBe,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAQJ,GAbyB;IAcxB,MAAMC,gBAAgBL,cAAc;IACpC,MAAMM,gBAAgBD,gBAClB,+GACA;IACJ,qBACE,qBAACE,0BAAY;QACV,GAAGH,KAAK;QACTI,OAAO,AAAC,KAAER,YAAU;QACpBM,eAAeA;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BAAgB,qBAACnB,wCAAwB,qBAACY;;AAGjD;AAEO,MAAMd,uCAAmCyB,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\n\nfunction StaticRouteContent() {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"static\" since it will be prerendered during the build\n        time.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        With Static Rendering, routes are rendered at build time, or in the\n        background after{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          data revalidation\n        </a>\n        .\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Static rendering is useful when a route has data that is not\n        personalized to the user and can be known at build time, such as a\n        static blog post or a product page.\n      </p>\n    </article>\n  )\n}\n\nfunction DynamicRouteContent() {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"dynamic\" since it will be rendered for each user at{' '}\n        <strong>request time</strong>.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Dynamic rendering is useful when a route has data that is personalized\n        to the user or has information that can only be known at request time,\n        such as cookies or the URL's search params.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        During rendering, if a{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Dynamic API\n        </a>{' '}\n        or a{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/api-reference/functions/fetch\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          fetch\n        </a>{' '}\n        option of{' '}\n        <code className=\"dev-tools-info-code\">{`{ cache: 'no-store' }`}</code>{' '}\n        is discovered, Next.js will switch to dynamically rendering the whole\n        route.\n      </p>\n    </article>\n  )\n}\n\nexport function RouteInfo({\n  routeType,\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  routeType: 'Static' | 'Dynamic'\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  const isStaticRoute = routeType === 'Static'\n  const learnMoreLink = isStaticRoute\n    ? 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default'\n    : 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering'\n  return (\n    <DevToolsInfo\n      {...props}\n      title={`${routeType} Route`}\n      learnMoreLink={learnMoreLink}\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n    >\n      {isStaticRoute ? <StaticRouteContent /> : <DynamicRouteContent />}\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = `\n  .dev-tools-info-link {\n  }\n`\n"],"names":["DEV_TOOLS_INFO_ROUTE_INFO_STYLES","RouteInfo","StaticRouteContent","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMoreLink","DevToolsInfo","title"],"mappings":";;;;;;;;;;;;;;;IA0GaA,gCAAgC;eAAhCA;;IA/BGC,SAAS;eAATA;;;;8BA3Ea;AAE7B,SAASC;IACP,qBACE,sBAACC;QAAQC,WAAU;;0BACjB,sBAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,qBAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,sBAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,qBAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,qBAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU;IACP,qBACE,sBAACX;QAAQC,WAAU;;0BACjB,sBAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,qBAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,qBAACM;kCAAO;;oBAAqB;;;0BAE/B,qBAACV;gBAAED,WAAU;0BAA2B;;0BAKxC,sBAACC;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,qBAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,qBAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,qBAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAMnF;AAEO,SAASH,UAAU,KAazB;IAbyB,IAAA,EACxBe,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAQJ,GAbyB;IAcxB,MAAMC,gBAAgBL,cAAc;IACpC,MAAMM,gBAAgBD,gBAClB,+GACA;IACJ,qBACE,qBAACE,0BAAY;QACV,GAAGH,KAAK;QACTI,OAAO,AAAC,KAAER,YAAU;QACpBM,eAAeA;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BAAgB,qBAACnB,wCAAwB,qBAACY;;AAGjD;AAEO,MAAMd,mCAAoC"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.d.ts

@@ -5,4 +5,4 @@ export declare function TurbopackInfo({ isOpen, setIsOpen, setPreviousOpen, ...p
     style?: React.CSSProperties;
     ref?: React.RefObject<HTMLElement | null>;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES: string;
+export declare const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = "\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.js

@@ -20,20 +20,9 @@ _export(exports, {
         return TurbopackInfo;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _devtoolsinfo = require("./dev-tools-info");
 const _copybutton = require("../../../copy-button");
-const _nooptemplate = require("../../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function TurbopackInfo(param) {
     let { isOpen, setIsOpen, setPreviousOpen, ...props } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_devtoolsinfo.DevToolsInfo, {
@@ -201,7 +190,7 @@ function TurbopackInfo(param) {
         ]
     });
 }
-const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = "\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\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/dev-tools-indicator/dev-tools-info/turbopack-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\nimport { noop as css } from '../../../../../utils/noop-template'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = css`\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","DevToolsInfo","title","learnMoreLink","article","className","p","code","div","CopyButton","actionLabel","successLabel","content","pre","span","css"],"mappings":";;;;;;;;;;;;;;;IAiHaA,oCAAoC;eAApCA;;IA7GGC,aAAa;eAAbA;;;;;8BAJa;4BACF;8BACC;;;;;;;;;;AAErB,SAASA,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,sBAACC,0BAAY;QACXC,OAAM;QACNC,eAAc;QACdL,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,sBAACI;gBAAQC,WAAU;;kCACjB,sBAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,sBAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,qBAACG;gBAAIH,WAAU;0BACb,cAAA,sBAACG;oBAAIH,WAAU;;sCACb,qBAACI,sBAAU;4BACTC,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTP,WAAU;;sCAEZ,qBAACQ;4BAAIR,WAAU;sCACb,cAAA,sBAACE;;kDACC,qBAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;;;kDAIzD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEO,MAAMV,2CAAuCoB,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","DevToolsInfo","title","learnMoreLink","article","className","p","code","div","CopyButton","actionLabel","successLabel","content","pre","span"],"mappings":";;;;;;;;;;;;;;;IAgHaA,oCAAoC;eAApCA;;IA7GGC,aAAa;eAAbA;;;;8BAHa;4BACF;AAEpB,SAASA,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,sBAACC,0BAAY;QACXC,OAAM;QACNC,eAAc;QACdL,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,sBAACI;gBAAQC,WAAU;;kCACjB,sBAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,sBAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,qBAACG;gBAAIH,WAAU;0BACb,cAAA,sBAACG;oBAAIH,WAAU;;sCACb,qBAACI,sBAAU;4BACTC,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTP,WAAU;;sCAEZ,qBAACQ;4BAAIR,WAAU;sCACb,cAAA,sBAACE;;kDACC,qBAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;;;kDAIzD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEO,MAAMV,uCAAwC"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.js

@@ -24,7 +24,7 @@ const _interop_require_default = require("@swc/helpers/_/_interop_require_defaul
 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 _css = require("../../../../utils/css");
 const _mergerefs = /*#__PURE__*/ _interop_require_default._(require("../../../utils/merge-refs"));
 const _useminimumloadingtimemultiple = require("./use-minimum-loading-time-multiple");
 function _templateObject() {
@@ -101,7 +101,7 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
         },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-                children: (0, _nooptemplate.noop)(_templateObject(), disabled || isBuildError ? '8px' : 'calc(var(--padding) * 2)')
+                children: (0, _css.css)(_templateObject(), disabled || isBuildError ? '8px' : 'calc(var(--padding) * 2)')
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 "data-next-badge": true,
@@ -121,7 +121,8 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
                             onClick: onTriggerClick,
                             ...props,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(NextMark, {
-                                isLoading: isLoading
+                                isLoading: isLoading,
+                                isDevBuilding: isDevBuilding
                             })
                         }),
                         isErrorExpanded && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -217,7 +218,8 @@ function useMeasureWidth(ref) {
     return width;
 }
 function NextMark(param) {
-    let { isLoading } = param;
+    let { isLoading, isDevBuilding } = param;
+    const strokeColor = isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white';
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
         width: "40",
         height: "40",
@@ -259,16 +261,16 @@ function NextMark(param) {
                         gradientUnits: "userSpaceOnUse",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
-                                stopColor: "white"
+                                stopColor: strokeColor
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
                                 offset: "0.604072",
-                                stopColor: "white",
+                                stopColor: strokeColor,
                                 stopOpacity: "0"
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
                                 offset: "1",
-                                stopColor: "white",
+                                stopColor: strokeColor,
                                 stopOpacity: "0"
                             })
                         ]
@@ -282,11 +284,11 @@ function NextMark(param) {
                         gradientUnits: "userSpaceOnUse",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
-                                stopColor: "white"
+                                stopColor: strokeColor
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)("stop", {
                                 offset: "1",
-                                stopColor: "white",
+                                stopColor: strokeColor,
                                 stopOpacity: "0"
                             })
                         ]