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

package/dist/esm/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":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","noop","css","TurbopackInfo","RouteInfo","StopIcon","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","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","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"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":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","StopIcon","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","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","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}

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

@@ -1,15 +1,4 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-function _templateObject() {
-    const data = _tagged_template_literal_loose([
-        "\n  [data-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;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { noop as css } from '../../../../../utils/noop-template';
 export function DevToolsInfo(param) {
     let { title, children, learnMoreLink, setIsOpen, setPreviousOpen, ...props } = param;
     return /*#__PURE__*/ _jsx("div", {
@@ -47,6 +36,6 @@ export function DevToolsInfo(param) {
         })
     });
 }
-export const DEV_TOOLS_INFO_STYLES = css(_templateObject());
+export 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";
 
 //# sourceMappingURL=dev-tools-info.js.map

package/dist/esm/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":["noop","css","DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","DEV_TOOLS_INFO_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,qCAAoC;AAEhE,OAAO,SAASC,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,KAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,MAACC;YAAIE,WAAU;;8BACb,KAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,MAACK;oBAAIE,WAAU;;sCACb,KAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,KAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEA,OAAO,MAAMC,wBAAwBlB,uBAgGpC"}
+{"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":["DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","DEV_TOOLS_INFO_STYLES"],"mappings":";AAAA,OAAO,SAASA,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,KAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,MAACC;YAAIE,WAAU;;8BACb,KAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,MAACK;oBAAIE,WAAU;;sCACb,KAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,KAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEA,OAAO,MAAMC,wBAAyB,q5EAgGrC"}

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

@@ -1,16 +1,5 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-function _templateObject() {
-    const data = _tagged_template_literal_loose([
-        "\n  .dev-tools-info-link {\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DevToolsInfo } from './dev-tools-info';
-import { noop as css } from '../../../../../utils/noop-template';
 function StaticRouteContent() {
     return /*#__PURE__*/ _jsxs("article", {
         className: "dev-tools-info-article",
@@ -125,6 +114,6 @@ export function RouteInfo(param) {
         children: isStaticRoute ? /*#__PURE__*/ _jsx(StaticRouteContent, {}) : /*#__PURE__*/ _jsx(DynamicRouteContent, {})
     });
 }
-export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = css(_templateObject());
+export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "\n  .dev-tools-info-link {\n  }\n";
 
 //# sourceMappingURL=route-info.js.map

package/dist/esm/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":["DevToolsInfo","noop","css","StaticRouteContent","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMoreLink","title","DEV_TOOLS_INFO_ROUTE_INFO_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,QAAQC,GAAG,QAAQ,qCAAoC;AAEhE,SAASC;IACP,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,MAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,KAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU;IACP,qBACE,MAACX;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,KAACM;kCAAO;;oBAAqB;;;0BAE/B,KAACV;gBAAED,WAAU;0BAA2B;;0BAKxC,MAACC;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,KAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,KAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAMnF;AAEA,OAAO,SAASY,UAAU,KAazB;IAbyB,IAAA,EACxBC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAQJ,GAbyB;IAcxB,MAAMC,gBAAgBL,cAAc;IACpC,MAAMM,gBAAgBD,gBAClB,+GACA;IACJ,qBACE,KAACvB;QACE,GAAGsB,KAAK;QACTG,OAAO,AAAC,KAAEP,YAAU;QACpBM,eAAeA;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BAAgB,KAACpB,wCAAwB,KAACY;;AAGjD;AAEA,OAAO,MAAMW,mCAAmCxB,uBAG/C"}
+{"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":["DevToolsInfo","StaticRouteContent","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMoreLink","title","DEV_TOOLS_INFO_ROUTE_INFO_STYLES"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAE/C,SAASC;IACP,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,MAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,KAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU;IACP,qBACE,MAACX;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,KAACM;kCAAO;;oBAAqB;;;0BAE/B,KAACV;gBAAED,WAAU;0BAA2B;;0BAKxC,MAACC;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,KAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,KAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAMnF;AAEA,OAAO,SAASY,UAAU,KAazB;IAbyB,IAAA,EACxBC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAQJ,GAbyB;IAcxB,MAAMC,gBAAgBL,cAAc;IACpC,MAAMM,gBAAgBD,gBAClB,+GACA;IACJ,qBACE,KAACrB;QACE,GAAGoB,KAAK;QACTG,OAAO,AAAC,KAAEP,YAAU;QACpBM,eAAeA;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BAAgB,KAACpB,wCAAwB,KAACY;;AAGjD;AAEA,OAAO,MAAMW,mCAAoC,oCAGhD"}

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

@@ -1,17 +1,6 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-function _templateObject() {
-    const data = _tagged_template_literal_loose([
-        "\n  .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;
-}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DevToolsInfo } from './dev-tools-info';
 import { CopyButton } from '../../../copy-button';
-import { noop as css } from '../../../../../utils/noop-template';
 export function TurbopackInfo(param) {
     let { isOpen, setIsOpen, setPreviousOpen, ...props } = param;
     return /*#__PURE__*/ _jsxs(DevToolsInfo, {
@@ -179,6 +168,6 @@ export function TurbopackInfo(param) {
         ]
     });
 }
-export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = css(_templateObject());
+export 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";
 
 //# sourceMappingURL=turbopack-info.js.map

package/dist/esm/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":["DevToolsInfo","CopyButton","noop","css","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","title","learnMoreLink","article","className","p","code","div","actionLabel","successLabel","content","pre","span","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,UAAU,QAAQ,uBAAsB;AACjD,SAASC,QAAQC,GAAG,QAAQ,qCAAoC;AAEhE,OAAO,SAASC,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,MAACR;QACCS,OAAM;QACNC,eAAc;QACdJ,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,MAACG;gBAAQC,WAAU;;kCACjB,MAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,MAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,KAACG;gBAAIH,WAAU;0BACb,cAAA,MAACG;oBAAIH,WAAU;;sCACb,KAACX;4BACCe,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTN,WAAU;;sCAEZ,KAACO;4BAAIP,WAAU;sCACb,cAAA,MAACE;;kDACC,KAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;;;kDAIzD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEA,OAAO,MAAMS,uCAAuClB,uBAgEnD"}
+{"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":["DevToolsInfo","CopyButton","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","title","learnMoreLink","article","className","p","code","div","actionLabel","successLabel","content","pre","span","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,UAAU,QAAQ,uBAAsB;AAEjD,OAAO,SAASC,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,MAACN;QACCO,OAAM;QACNC,eAAc;QACdJ,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,MAACG;gBAAQC,WAAU;;kCACjB,MAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,MAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,KAACG;gBAAIH,WAAU;0BACb,cAAA,MAACG;oBAAIH,WAAU;;sCACb,KAACT;4BACCa,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTN,WAAU;;sCAEZ,KAACO;4BAAIP,WAAU;sCACb,cAAA,MAACE;;kDACC,KAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;;;kDAIzD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEA,OAAO,MAAMS,uCAAwC,okDAgEpD"}

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

@@ -11,7 +11,7 @@ function _templateObject() {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { noop as css } from '../../../../utils/noop-template';
+import { css } from '../../../../utils/css';
 import mergeRefs from '../../../utils/merge-refs';
 import { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple';
 const SIZE = 36;
@@ -98,7 +98,8 @@ export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRe
                             onClick: onTriggerClick,
                             ...props,
                             children: /*#__PURE__*/ _jsx(NextMark, {
-                                isLoading: isLoading
+                                isLoading: isLoading,
+                                isDevBuilding: isDevBuilding
                             })
                         }),
                         isErrorExpanded && /*#__PURE__*/ _jsxs("div", {
@@ -194,7 +195,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__*/ _jsxs("svg", {
         width: "40",
         height: "40",
@@ -236,16 +238,16 @@ function NextMark(param) {
                         gradientUnits: "userSpaceOnUse",
                         children: [
                             /*#__PURE__*/ _jsx("stop", {
-                                stopColor: "white"
+                                stopColor: strokeColor
                             }),
                             /*#__PURE__*/ _jsx("stop", {
                                 offset: "0.604072",
-                                stopColor: "white",
+                                stopColor: strokeColor,
                                 stopOpacity: "0"
                             }),
                             /*#__PURE__*/ _jsx("stop", {
                                 offset: "1",
-                                stopColor: "white",
+                                stopColor: strokeColor,
                                 stopOpacity: "0"
                             })
                         ]
@@ -259,11 +261,11 @@ function NextMark(param) {
                         gradientUnits: "userSpaceOnUse",
                         children: [
                             /*#__PURE__*/ _jsx("stop", {
-                                stopColor: "white"
+                                stopColor: strokeColor
                             }),
                             /*#__PURE__*/ _jsx("stop", {
                                 offset: "1",
-                                stopColor: "white",
+                                stopColor: strokeColor,
                                 stopOpacity: "0"
                             })
                         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../utils/noop-template'\nimport mergeRefs from '../../../utils/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  isBuildError: boolean\n  onTriggerClick: () => void\n  openErrorOverlay: () => void\n}\n\nconst SIZE = 36\nconst SHORT_DURATION_MS = 150\n\n/**\n * A hook that creates an animated state based on changes to a dependency.\n * When the dependency changes and passes the shouldSkip check, it triggers\n * an animation state that lasts for the specified duration.\n *\n * @param dep The dependency to watch for changes\n * @param config Configuration object containing:\n *               - shouldSkip: Function to determine if animation should be skipped\n *               - animationDuration: Duration of the animation in milliseconds\n * @returns Boolean indicating if animation is currently active\n */\nconst useAnimated = <T,>(\n  dep: T,\n  config: { shouldSkip: (dep: T) => boolean; animationDuration: number }\n) => {\n  const { shouldSkip: _shouldSkip, animationDuration } = config\n  const shouldSkipRef = useRef(_shouldSkip) // ensure stable reference in case it's not\n\n  const [animatedDep, setAnimatedDep] = useState(false)\n  const isInitialRef = useRef(true)\n\n  useEffect(() => {\n    if (isInitialRef.current) {\n      isInitialRef.current = false\n      return\n    }\n\n    if (shouldSkipRef.current(dep)) {\n      return\n    }\n\n    setAnimatedDep(true)\n    const timeoutId = setTimeout(() => {\n      setAnimatedDep(false)\n    }, animationDuration)\n\n    return () => clearTimeout(timeoutId)\n  }, [dep, animationDuration])\n\n  return animatedDep\n}\n\nexport const NextLogo = forwardRef(function NextLogo(\n  {\n    disabled,\n    issueCount,\n    isDevBuilding,\n    isDevRendering,\n    isBuildError,\n    onTriggerClick,\n    openErrorOverlay,\n    ...props\n  }: Props,\n  propRef: React.Ref<HTMLButtonElement>\n) {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const newErrorDetected = useAnimated(issueCount, {\n    shouldSkip: (count) => count === 0,\n    animationDuration: SHORT_DURATION_MS,\n  })\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n\n  const isLoading = useMinimumLoadingTimeMultiple(\n    isDevBuilding || isDevRendering\n  )\n\n  useEffect(() => {\n    setIsErrorExpanded(hasError)\n  }, [hasError])\n\n  return (\n    <div\n      data-next-badge-root\n      style={\n        {\n          '--size': `${SIZE}px`,\n          '--duration-short': `${SHORT_DURATION_MS}ms`,\n          // if the indicator is disabled and there are no errors, hide the badge\n          display: disabled && !hasError ? 'none' : 'block',\n        } as React.CSSProperties\n      }\n    >\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration-long: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-disabled-icon] {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding-right: 4px;\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale var(--duration-short) var(--timing),\n              width var(--duration-long) var(--timing),\n              box-shadow var(--duration-long) var(--timing),\n              background var(--duration-short) ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-animate='true']:not(:hover) {\n              scale: 1.02;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha-error);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-error-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: var(--duration-short);\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: ${disabled || isBuildError\n              ? '8px'\n              : 'calc(var(--padding) * 2)'};\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha-error);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 2px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:hover {\n              background: var(--color-hover-alpha-error);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration-long) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            &:hover {\n              background: var(--color-hover-alpha-subtle);\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          [data-issues-count-animation] {\n            display: grid;\n            place-items: center center;\n            font-variant-numeric: tabular-nums;\n\n            &[data-animate='false'] {\n              [data-issues-count-exit],\n              [data-issues-count-enter] {\n                animation-duration: 0ms;\n              }\n            }\n\n            > * {\n              grid-area: 1 / 1;\n            }\n\n            [data-issues-count-exit] {\n              animation: fadeOut 300ms var(--timing) forwards;\n            }\n\n            [data-issues-count-enter] {\n              animation: fadeIn 300ms var(--timing) forwards;\n            }\n          }\n\n          [data-issues-count-plural] {\n            display: inline-block;\n            animation: fadeIn 300ms var(--timing) forwards;\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes fadeIn {\n            0% {\n              opacity: 0;\n              filter: blur(2px);\n              transform: translateY(8px);\n            }\n            100% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n          }\n\n          @keyframes fadeOut {\n            0% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n            100% {\n              opacity: 0;\n              transform: translateY(-12px);\n              filter: blur(2px);\n            }\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n\n          @media (prefers-reduced-motion) {\n            [data-issues-count-exit],\n            [data-issues-count-enter],\n            [data-issues-count-plural] {\n              animation-duration: 0ms !important;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        data-error-expanded={isErrorExpanded}\n        data-animate={newErrorDetected}\n        style={{\n          width: hasError && width > SIZE ? width : SIZE,\n        }}\n      >\n        <div ref={ref}>\n          {/* Children */}\n          {!disabled && (\n            <button\n              ref={mergeRefs(triggerRef, propRef)}\n              data-next-mark\n              data-next-mark-loading={isLoading}\n              onClick={onTriggerClick}\n              {...props}\n            >\n              <NextMark isLoading={isLoading} />\n            </button>\n          )}\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={openErrorOverlay}\n              >\n                {disabled && (\n                  <div data-disabled-icon>\n                    <Warning />\n                  </div>\n                )}\n                <AnimateCount\n                  // Used the key to force a re-render when the count changes.\n                  key={issueCount}\n                  animate={newErrorDetected}\n                  data-issues-count-animation\n                >\n                  {issueCount}\n                </AnimateCount>{' '}\n                <div>\n                  Issue\n                  {issueCount > 1 && (\n                    <span aria-hidden data-issues-count-plural>\n                      s\n                    </span>\n                  )}\n                </div>\n              </button>\n              {!disabled && !isBuildError && (\n                <button\n                  data-issues-collapse\n                  aria-label=\"Collapse issues badge\"\n                  onClick={() => {\n                    setIsErrorExpanded(false)\n                    // Move focus to the trigger to prevent having it stuck on this element\n                    triggerRef.current?.focus()\n                  }}\n                >\n                  <Cross data-cross />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div aria-hidden data-dot />\n    </div>\n  )\n})\n\nfunction AnimateCount({\n  children: count,\n  animate = true,\n  ...props\n}: {\n  children: number\n  animate: boolean\n}) {\n  return (\n    <div {...props} data-animate={animate}>\n      <div aria-hidden data-issues-count-exit>\n        {count - 1}\n      </div>\n      <div data-issues-count data-issues-count-enter>\n        {count}\n      </div>\n    </div>\n  )\n}\n\nfunction useMeasureWidth(ref: React.RefObject<HTMLDivElement | null>) {\n  const [width, setWidth] = useState<number>(0)\n\n  useEffect(() => {\n    const el = ref.current\n\n    if (!el) {\n      return\n    }\n\n    const observer = new ResizeObserver(() => {\n      const { width: w } = el.getBoundingClientRect()\n      setWidth(w)\n    })\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  return width\n}\n\nfunction NextMark({ isLoading }: { isLoading?: boolean }) {\n  return (\n    <svg\n      width=\"40\"\n      height=\"40\"\n      viewBox=\"0 0 40 40\"\n      fill=\"none\"\n      data-next-mark-loading={isLoading}\n    >\n      <g transform=\"translate(8.5, 13)\">\n        <path\n          className={isLoading ? 'path0' : 'paused'}\n          d=\"M13.3 15.2 L2.34 1 V12.6\"\n          fill=\"none\"\n          stroke=\"url(#paint0_linear_1357_10853)\"\n          strokeWidth=\"1.86\"\n          mask=\"url(#mask0)\"\n          strokeDasharray=\"29.6\"\n          strokeDashoffset=\"29.6\"\n        />\n        <path\n          className={isLoading ? 'path1' : 'paused'}\n          d=\"M11.825 1.5 V13.1\"\n          strokeWidth=\"1.86\"\n          stroke=\"url(#paint1_linear_1357_10853)\"\n          strokeDasharray=\"11.6\"\n          strokeDashoffset=\"11.6\"\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_1357_10853\"\n          x1=\"9.95555\"\n          y1=\"11.1226\"\n          x2=\"15.4778\"\n          y2=\"17.9671\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id=\"paint1_linear_1357_10853\"\n          x1=\"11.8222\"\n          y1=\"1.40039\"\n          x2=\"11.791\"\n          y2=\"9.62542\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"mask0\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n        </mask>\n      </defs>\n    </svg>\n  )\n}\n\nfunction Warning() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z\"\n        fill=\"#EAEAEA\"\n      />\n    </svg>\n  )\n}\n\nexport function Cross(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["forwardRef","useEffect","useRef","useState","noop","css","mergeRefs","useMinimumLoadingTimeMultiple","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","animatedDep","setAnimatedDep","isInitialRef","current","timeoutId","setTimeout","clearTimeout","NextLogo","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","display","data-next-badge","data-error","data-error-expanded","data-animate","button","data-next-mark","data-next-mark-loading","onClick","NextMark","data-issues","data-issues-open","aria-label","data-disabled-icon","Warning","AnimateCount","animate","data-issues-count-animation","span","aria-hidden","data-issues-count-plural","data-issues-collapse","focus","Cross","data-cross","data-dot","children","data-issues-count-exit","data-issues-count","data-issues-count-enter","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","svg","height","viewBox","fill","g","transform","path","className","d","stroke","strokeWidth","mask","strokeDasharray","strokeDashoffset","defs","linearGradient","id","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","xmlns","fillRule","clipRule"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { css } from '../../../../utils/css'\nimport mergeRefs from '../../../utils/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  isBuildError: boolean\n  onTriggerClick: () => void\n  openErrorOverlay: () => void\n}\n\nconst SIZE = 36\nconst SHORT_DURATION_MS = 150\n\n/**\n * A hook that creates an animated state based on changes to a dependency.\n * When the dependency changes and passes the shouldSkip check, it triggers\n * an animation state that lasts for the specified duration.\n *\n * @param dep The dependency to watch for changes\n * @param config Configuration object containing:\n *               - shouldSkip: Function to determine if animation should be skipped\n *               - animationDuration: Duration of the animation in milliseconds\n * @returns Boolean indicating if animation is currently active\n */\nconst useAnimated = <T,>(\n  dep: T,\n  config: { shouldSkip: (dep: T) => boolean; animationDuration: number }\n) => {\n  const { shouldSkip: _shouldSkip, animationDuration } = config\n  const shouldSkipRef = useRef(_shouldSkip) // ensure stable reference in case it's not\n\n  const [animatedDep, setAnimatedDep] = useState(false)\n  const isInitialRef = useRef(true)\n\n  useEffect(() => {\n    if (isInitialRef.current) {\n      isInitialRef.current = false\n      return\n    }\n\n    if (shouldSkipRef.current(dep)) {\n      return\n    }\n\n    setAnimatedDep(true)\n    const timeoutId = setTimeout(() => {\n      setAnimatedDep(false)\n    }, animationDuration)\n\n    return () => clearTimeout(timeoutId)\n  }, [dep, animationDuration])\n\n  return animatedDep\n}\n\nexport const NextLogo = forwardRef(function NextLogo(\n  {\n    disabled,\n    issueCount,\n    isDevBuilding,\n    isDevRendering,\n    isBuildError,\n    onTriggerClick,\n    openErrorOverlay,\n    ...props\n  }: Props,\n  propRef: React.Ref<HTMLButtonElement>\n) {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const newErrorDetected = useAnimated(issueCount, {\n    shouldSkip: (count) => count === 0,\n    animationDuration: SHORT_DURATION_MS,\n  })\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n\n  const isLoading = useMinimumLoadingTimeMultiple(\n    isDevBuilding || isDevRendering\n  )\n\n  useEffect(() => {\n    setIsErrorExpanded(hasError)\n  }, [hasError])\n\n  return (\n    <div\n      data-next-badge-root\n      style={\n        {\n          '--size': `${SIZE}px`,\n          '--duration-short': `${SHORT_DURATION_MS}ms`,\n          // if the indicator is disabled and there are no errors, hide the badge\n          display: disabled && !hasError ? 'none' : 'block',\n        } as React.CSSProperties\n      }\n    >\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration-long: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-disabled-icon] {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding-right: 4px;\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale var(--duration-short) var(--timing),\n              width var(--duration-long) var(--timing),\n              box-shadow var(--duration-long) var(--timing),\n              background var(--duration-short) ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-animate='true']:not(:hover) {\n              scale: 1.02;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha-error);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-error-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: var(--duration-short);\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: ${disabled || isBuildError\n              ? '8px'\n              : 'calc(var(--padding) * 2)'};\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha-error);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 2px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:hover {\n              background: var(--color-hover-alpha-error);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration-long) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            &:hover {\n              background: var(--color-hover-alpha-subtle);\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          [data-issues-count-animation] {\n            display: grid;\n            place-items: center center;\n            font-variant-numeric: tabular-nums;\n\n            &[data-animate='false'] {\n              [data-issues-count-exit],\n              [data-issues-count-enter] {\n                animation-duration: 0ms;\n              }\n            }\n\n            > * {\n              grid-area: 1 / 1;\n            }\n\n            [data-issues-count-exit] {\n              animation: fadeOut 300ms var(--timing) forwards;\n            }\n\n            [data-issues-count-enter] {\n              animation: fadeIn 300ms var(--timing) forwards;\n            }\n          }\n\n          [data-issues-count-plural] {\n            display: inline-block;\n            animation: fadeIn 300ms var(--timing) forwards;\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes fadeIn {\n            0% {\n              opacity: 0;\n              filter: blur(2px);\n              transform: translateY(8px);\n            }\n            100% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n          }\n\n          @keyframes fadeOut {\n            0% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n            100% {\n              opacity: 0;\n              transform: translateY(-12px);\n              filter: blur(2px);\n            }\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n\n          @media (prefers-reduced-motion) {\n            [data-issues-count-exit],\n            [data-issues-count-enter],\n            [data-issues-count-plural] {\n              animation-duration: 0ms !important;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        data-error-expanded={isErrorExpanded}\n        data-animate={newErrorDetected}\n        style={{\n          width: hasError && width > SIZE ? width : SIZE,\n        }}\n      >\n        <div ref={ref}>\n          {/* Children */}\n          {!disabled && (\n            <button\n              ref={mergeRefs(triggerRef, propRef)}\n              data-next-mark\n              data-next-mark-loading={isLoading}\n              onClick={onTriggerClick}\n              {...props}\n            >\n              <NextMark isLoading={isLoading} isDevBuilding={isDevBuilding} />\n            </button>\n          )}\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={openErrorOverlay}\n              >\n                {disabled && (\n                  <div data-disabled-icon>\n                    <Warning />\n                  </div>\n                )}\n                <AnimateCount\n                  // Used the key to force a re-render when the count changes.\n                  key={issueCount}\n                  animate={newErrorDetected}\n                  data-issues-count-animation\n                >\n                  {issueCount}\n                </AnimateCount>{' '}\n                <div>\n                  Issue\n                  {issueCount > 1 && (\n                    <span aria-hidden data-issues-count-plural>\n                      s\n                    </span>\n                  )}\n                </div>\n              </button>\n              {!disabled && !isBuildError && (\n                <button\n                  data-issues-collapse\n                  aria-label=\"Collapse issues badge\"\n                  onClick={() => {\n                    setIsErrorExpanded(false)\n                    // Move focus to the trigger to prevent having it stuck on this element\n                    triggerRef.current?.focus()\n                  }}\n                >\n                  <Cross data-cross />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div aria-hidden data-dot />\n    </div>\n  )\n})\n\nfunction AnimateCount({\n  children: count,\n  animate = true,\n  ...props\n}: {\n  children: number\n  animate: boolean\n}) {\n  return (\n    <div {...props} data-animate={animate}>\n      <div aria-hidden data-issues-count-exit>\n        {count - 1}\n      </div>\n      <div data-issues-count data-issues-count-enter>\n        {count}\n      </div>\n    </div>\n  )\n}\n\nfunction useMeasureWidth(ref: React.RefObject<HTMLDivElement | null>) {\n  const [width, setWidth] = useState<number>(0)\n\n  useEffect(() => {\n    const el = ref.current\n\n    if (!el) {\n      return\n    }\n\n    const observer = new ResizeObserver(() => {\n      const { width: w } = el.getBoundingClientRect()\n      setWidth(w)\n    })\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  return width\n}\n\nfunction NextMark({\n  isLoading,\n  isDevBuilding,\n}: {\n  isLoading?: boolean\n  isDevBuilding?: boolean\n}) {\n  const strokeColor = isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'\n  return (\n    <svg\n      width=\"40\"\n      height=\"40\"\n      viewBox=\"0 0 40 40\"\n      fill=\"none\"\n      data-next-mark-loading={isLoading}\n    >\n      <g transform=\"translate(8.5, 13)\">\n        <path\n          className={isLoading ? 'path0' : 'paused'}\n          d=\"M13.3 15.2 L2.34 1 V12.6\"\n          fill=\"none\"\n          stroke=\"url(#paint0_linear_1357_10853)\"\n          strokeWidth=\"1.86\"\n          mask=\"url(#mask0)\"\n          strokeDasharray=\"29.6\"\n          strokeDashoffset=\"29.6\"\n        />\n        <path\n          className={isLoading ? 'path1' : 'paused'}\n          d=\"M11.825 1.5 V13.1\"\n          strokeWidth=\"1.86\"\n          stroke=\"url(#paint1_linear_1357_10853)\"\n          strokeDasharray=\"11.6\"\n          strokeDashoffset=\"11.6\"\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_1357_10853\"\n          x1=\"9.95555\"\n          y1=\"11.1226\"\n          x2=\"15.4778\"\n          y2=\"17.9671\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor={strokeColor} />\n          <stop offset=\"0.604072\" stopColor={strokeColor} stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor={strokeColor} stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id=\"paint1_linear_1357_10853\"\n          x1=\"11.8222\"\n          y1=\"1.40039\"\n          x2=\"11.791\"\n          y2=\"9.62542\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor={strokeColor} />\n          <stop offset=\"1\" stopColor={strokeColor} stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"mask0\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n        </mask>\n      </defs>\n    </svg>\n  )\n}\n\nfunction Warning() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z\"\n        fill=\"#EAEAEA\"\n      />\n    </svg>\n  )\n}\n\nexport function Cross(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["forwardRef","useEffect","useRef","useState","css","mergeRefs","useMinimumLoadingTimeMultiple","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","animatedDep","setAnimatedDep","isInitialRef","current","timeoutId","setTimeout","clearTimeout","NextLogo","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","display","data-next-badge","data-error","data-error-expanded","data-animate","button","data-next-mark","data-next-mark-loading","onClick","NextMark","data-issues","data-issues-open","aria-label","data-disabled-icon","Warning","AnimateCount","animate","data-issues-count-animation","span","aria-hidden","data-issues-count-plural","data-issues-collapse","focus","Cross","data-cross","data-dot","children","data-issues-count-exit","data-issues-count","data-issues-count-enter","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","strokeColor","svg","height","viewBox","fill","g","transform","path","className","d","stroke","strokeWidth","mask","strokeDasharray","strokeDashoffset","defs","linearGradient","id","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","xmlns","fillRule","clipRule"],"mappings":";;;;;;;;;;;;AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAC/D,SAASC,GAAG,QAAQ,wBAAuB;AAC3C,OAAOC,eAAe,4BAA2B;AACjD,SAASC,6BAA6B,QAAQ,sCAAqC;AAWnF,MAAMC,OAAO;AACb,MAAMC,oBAAoB;AAE1B;;;;;;;;;;CAUC,GACD,MAAMC,cAAc,CAClBC,KACAC;IAEA,MAAM,EAAEC,YAAYC,WAAW,EAAEC,iBAAiB,EAAE,GAAGH;IACvD,MAAMI,gBAAgBb,OAAOW,aAAa,2CAA2C;;IAErF,MAAM,CAACG,aAAaC,eAAe,GAAGd,SAAS;IAC/C,MAAMe,eAAehB,OAAO;IAE5BD,UAAU;QACR,IAAIiB,aAAaC,OAAO,EAAE;YACxBD,aAAaC,OAAO,GAAG;YACvB;QACF;QAEA,IAAIJ,cAAcI,OAAO,CAACT,MAAM;YAC9B;QACF;QAEAO,eAAe;QACf,MAAMG,YAAYC,WAAW;YAC3BJ,eAAe;QACjB,GAAGH;QAEH,OAAO,IAAMQ,aAAaF;IAC5B,GAAG;QAACV;QAAKI;KAAkB;IAE3B,OAAOE;AACT;AAEA,OAAO,MAAMO,yBAAWvB,WAAW,SAASuB,SAC1C,KASQ,EACRC,OAAqC;IAVrC,IAAA,EACEC,QAAQ,EACRC,UAAU,EACVC,aAAa,EACbC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,gBAAgB,EAChB,GAAGC,OACG,GATR;IAYA,MAAMC,WAAWP,aAAa;IAC9B,MAAM,CAACQ,iBAAiBC,mBAAmB,GAAGhC,SAAS8B;IACvD,MAAMG,mBAAmB3B,YAAYiB,YAAY;QAC/Cd,YAAY,CAACyB,QAAUA,UAAU;QACjCvB,mBAAmBN;IACrB;IAEA,MAAM8B,aAAapC,OAAiC;IACpD,MAAMqC,MAAMrC,OAA8B;IAC1C,MAAMsC,QAAQC,gBAAgBF;IAE9B,MAAMG,YAAYpC,8BAChBqB,iBAAiBC;IAGnB3B,UAAU;QACRkC,mBAAmBF;IACrB,GAAG;QAACA;KAAS;IAEb,qBACE,MAACU;QACCC,sBAAoB;QACpBC,OACE;YACE,UAAU,AAAC,KAAEtC,OAAK;YAClB,oBAAoB,AAAC,KAAEC,oBAAkB;YACzC,uEAAuE;YACvEsC,SAASrB,YAAY,CAACQ,WAAW,SAAS;QAC5C;;0BAIF,KAACY;0BACEzC,uBA2HoBqB,YAAYI,eACzB,QACA;;0BA2LV,KAACc;gBACCI,iBAAe;gBACfC,cAAYf;gBACZgB,uBAAqBf;gBACrBgB,gBAAcd;gBACdS,OAAO;oBACLL,OAAOP,YAAYO,QAAQjC,OAAOiC,QAAQjC;gBAC5C;0BAEA,cAAA,MAACoC;oBAAIJ,KAAKA;;wBAEP,CAACd,0BACA,KAAC0B;4BACCZ,KAAKlC,UAAUiC,YAAYd;4BAC3B4B,gBAAc;4BACdC,0BAAwBX;4BACxBY,SAASxB;4BACR,GAAGE,KAAK;sCAET,cAAA,KAACuB;gCAASb,WAAWA;gCAAWf,eAAeA;;;wBAGlDO,iCACC,MAACS;4BAAIa,aAAW;;8CACd,MAACL;oCACCM,kBAAgB;oCAChBC,cAAW;oCACXJ,SAASvB;;wCAERN,0BACC,KAACkB;4CAAIgB,oBAAkB;sDACrB,cAAA,KAACC;;sDAGL,KAACC;4CAGCC,SAAS1B;4CACT2B,6BAA2B;sDAE1BrC;2CAJIA;wCAKS;sDAChB,MAACiB;;gDAAI;gDAEFjB,aAAa,mBACZ,KAACsC;oDAAKC,aAAW;oDAACC,0BAAwB;8DAAC;;;;;;gCAMhD,CAACzC,YAAY,CAACI,8BACb,KAACsB;oCACCgB,sBAAoB;oCACpBT,cAAW;oCACXJ,SAAS;4CAEP,uEAAuE;wCACvEhB;wCAFAH,mBAAmB;yCAEnBG,sBAAAA,WAAWnB,OAAO,qBAAlBmB,oBAAoB8B,KAAK;oCAC3B;8CAEA,cAAA,KAACC;wCAAMC,YAAU;;;;;;;;0BAO7B,KAAC3B;gBAAIsB,aAAW;gBAACM,UAAQ;;;;AAG/B,GAAE;AAEF,SAASV,aAAa,KAOrB;IAPqB,IAAA,EACpBW,UAAUnC,KAAK,EACfyB,UAAU,IAAI,EACd,GAAG9B,OAIJ,GAPqB;IAQpB,qBACE,MAACW;QAAK,GAAGX,KAAK;QAAEkB,gBAAcY;;0BAC5B,KAACnB;gBAAIsB,aAAW;gBAACQ,wBAAsB;0BACpCpC,QAAQ;;0BAEX,KAACM;gBAAI+B,mBAAiB;gBAACC,yBAAuB;0BAC3CtC;;;;AAIT;AAEA,SAASI,gBAAgBF,GAA2C;IAClE,MAAM,CAACC,OAAOoC,SAAS,GAAGzE,SAAiB;IAE3CF,UAAU;QACR,MAAM4E,KAAKtC,IAAIpB,OAAO;QAEtB,IAAI,CAAC0D,IAAI;YACP;QACF;QAEA,MAAMC,WAAW,IAAIC,eAAe;YAClC,MAAM,EAAEvC,OAAOwC,CAAC,EAAE,GAAGH,GAAGI,qBAAqB;YAC7CL,SAASI;QACX;QAEAF,SAASI,OAAO,CAACL;QACjB,OAAO,IAAMC,SAASK,UAAU;IAClC,GAAG;QAAC5C;KAAI;IAER,OAAOC;AACT;AAEA,SAASe,SAAS,KAMjB;IANiB,IAAA,EAChBb,SAAS,EACTf,aAAa,EAId,GANiB;IAOhB,MAAMyD,cAAczD,gBAAgB,0BAA0B;IAC9D,qBACE,MAAC0D;QACC7C,OAAM;QACN8C,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLnC,0BAAwBX;;0BAExB,MAAC+C;gBAAEC,WAAU;;kCACX,KAACC;wBACCC,WAAWlD,YAAY,UAAU;wBACjCmD,GAAE;wBACFL,MAAK;wBACLM,QAAO;wBACPC,aAAY;wBACZC,MAAK;wBACLC,iBAAgB;wBAChBC,kBAAiB;;kCAEnB,KAACP;wBACCC,WAAWlD,YAAY,UAAU;wBACjCmD,GAAE;wBACFE,aAAY;wBACZD,QAAO;wBACPG,iBAAgB;wBAChBC,kBAAiB;;;;0BAGrB,MAACC;;kCACC,MAACC;wBACCC,IAAG;wBACHC,IAAG;wBACHC,IAAG;wBACHC,IAAG;wBACHC,IAAG;wBACHC,eAAc;;0CAEd,KAACC;gCAAKC,WAAWxB;;0CACjB,KAACuB;gCAAKE,QAAO;gCAAWD,WAAWxB;gCAAa0B,aAAY;;0CAC5D,KAACH;gCAAKE,QAAO;gCAAID,WAAWxB;gCAAa0B,aAAY;;;;kCAEvD,MAACV;wBACCC,IAAG;wBACHC,IAAG;wBACHC,IAAG;wBACHC,IAAG;wBACHC,IAAG;wBACHC,eAAc;;0CAEd,KAACC;gCAAKC,WAAWxB;;0CACjB,KAACuB;gCAAKE,QAAO;gCAAID,WAAWxB;gCAAa0B,aAAY;;;;kCAEvD,MAACd;wBAAKK,IAAG;;0CACP,KAACU;gCAAKvE,OAAM;gCAAO8C,QAAO;gCAAOE,MAAK;;0CACtC,KAACuB;gCAAKvE,OAAM;gCAAI8C,QAAO;gCAAME,MAAK;;;;;;;;AAK5C;AAEA,SAAS5B;IACP,qBACE,KAACyB;QACC7C,OAAM;QACN8C,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLwB,OAAM;kBAEN,cAAA,KAACrB;YACCsB,UAAS;YACTC,UAAS;YACTrB,GAAE;YACFL,MAAK;;;AAIb;AAEA,OAAO,SAASnB,MAAMrC,KAAoC;IACxD,qBACE,KAACqD;QACC7C,OAAM;QACN8C,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLwB,OAAM;QACL,GAAGhF,KAAK;kBAET,cAAA,KAAC2D;YACCsB,UAAS;YACTC,UAAS;YACTrB,GAAE;YACFL,MAAK;;;AAIb"}

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

@@ -1,15 +1,4 @@
-import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
-function _templateObject() {
-    const data = _tagged_template_literal_loose([
-        ""
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 import { jsx as _jsx } from "react/jsx-runtime";
-import { noop as css } from '../../../../utils/noop-template';
 import { DialogBody } from '../../dialog';
 export function ErrorOverlayDialogBody(param) {
     let { children } = param;
@@ -18,6 +7,6 @@ export function ErrorOverlayDialogBody(param) {
         children: children
     });
 }
-export const DIALOG_BODY_STYLES = css(_templateObject());
+export const DIALOG_BODY_STYLES = "";
 
 //# sourceMappingURL=body.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/body.tsx"],"sourcesContent":["import { noop as css } from '../../../../utils/noop-template'\nimport { DialogBody } from '../../dialog'\n\ntype ErrorOverlayDialogBodyProps = {\n  children?: React.ReactNode\n  onClose?: () => void\n}\n\nexport function ErrorOverlayDialogBody({\n  children,\n}: ErrorOverlayDialogBodyProps) {\n  return (\n    <DialogBody className=\"nextjs-container-errors-body\">{children}</DialogBody>\n  )\n}\n\nexport const DIALOG_BODY_STYLES = css``\n"],"names":["noop","css","DialogBody","ErrorOverlayDialogBody","children","className","DIALOG_BODY_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,kCAAiC;AAC7D,SAASC,UAAU,QAAQ,eAAc;AAOzC,OAAO,SAASC,uBAAuB,KAET;IAFS,IAAA,EACrCC,QAAQ,EACoB,GAFS;IAGrC,qBACE,KAACF;QAAWG,WAAU;kBAAgCD;;AAE1D;AAEA,OAAO,MAAME,qBAAqBL,uBAAK"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/body.tsx"],"sourcesContent":["import { DialogBody } from '../../dialog'\n\ntype ErrorOverlayDialogBodyProps = {\n  children?: React.ReactNode\n  onClose?: () => void\n}\n\nexport function ErrorOverlayDialogBody({\n  children,\n}: ErrorOverlayDialogBodyProps) {\n  return (\n    <DialogBody className=\"nextjs-container-errors-body\">{children}</DialogBody>\n  )\n}\n\nexport const DIALOG_BODY_STYLES = ``\n"],"names":["DialogBody","ErrorOverlayDialogBody","children","className","DIALOG_BODY_STYLES"],"mappings":";AAAA,SAASA,UAAU,QAAQ,eAAc;AAOzC,OAAO,SAASC,uBAAuB,KAET;IAFS,IAAA,EACrCC,QAAQ,EACoB,GAFS;IAGrC,qBACE,KAACF;QAAWG,WAAU;kBAAgCD;;AAE1D;AAEA,OAAO,MAAME,qBAAsB,GAAC"}