next 15.2.0-canary.15 → 15.2.0-canary.16

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  onClick: () => void\n  isDevBuilding: boolean\n  isDevRendering: boolean\n}\n\nexport const NextLogo = ({\n  issueCount,\n  onClick,\n  isDevBuilding,\n  isDevRendering,\n  ...props\n}: Props) => {\n  const [isLoading, setIsLoading] = useState(false)\n  const [isPressed, setIsPressed] = useState(false)\n\n  // Only shows the loading state after a 200ms delay when building or rendering,\n  // to avoid flashing the loading state for quick updates\n  useEffect(() => {\n    if (isDevBuilding || isDevRendering) {\n      const timeout = setTimeout(() => {\n        setIsLoading(true)\n      }, 200)\n      return () => clearTimeout(timeout)\n    } else {\n      setIsLoading(false)\n    }\n  }, [isDevBuilding, isDevRendering])\n\n  return (\n    <button\n      onClick={onClick}\n      style={{\n        position: 'relative',\n        cursor: 'pointer',\n        userSelect: 'none',\n        backdropFilter: 'blur(48px)',\n        boxShadow:\n          '0px 24px 32px -8px #0000001A, 0px 8px 16px -4px #0000001A, 0px 1px 1px 0px #00000026',\n        borderRadius: '50%',\n        transition: 'transform 0.1s ease',\n        transform: isPressed ? 'scale(0.95)' : 'scale(1)',\n      }}\n      onMouseDown={() => setIsPressed(true)}\n      onMouseUp={() => setIsPressed(false)}\n      onMouseLeave={() => setIsPressed(false)}\n      {...props}\n    >\n      <style>\n        {css`\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          @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      </style>\n\n      {/* Add issue count circle if issues exist */}\n      {issueCount > 0 ? (\n        <div\n          style={{\n            position: 'absolute',\n            top: '-5px',\n            right: '-5px',\n            width: '20px',\n            height: '20px',\n            background: 'var(--color-red-300)',\n            borderRadius: '50%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            color: 'var(--color-red-900)',\n            fontSize: '12px',\n            fontWeight: 'bold',\n          }}\n        >\n          {issueCount}\n        </div>\n      ) : null}\n\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ shapeRendering: 'geometricPrecision' }}\n      >\n        <defs>\n          <clipPath id=\"circleClip\">\n            <circle cx=\"20\" cy=\"20\" r=\"20\" />\n          </clipPath>\n        </defs>\n\n        <g clipPath=\"url(#circleClip)\">\n          <g filter=\"url(#filter0_bdddi_1457_6023)\">\n            <circle cx=\"20\" cy=\"20\" r=\"20\" fill={'black'} fillOpacity=\"0.8\" />\n            <g filter=\"url(#filter1_i_1457_6023)\">\n              <circle\n                cx=\"20\"\n                cy=\"20\"\n                r=\"18.5\"\n                stroke=\"url(#paint0_angular_1457_6023)\"\n                strokeOpacity=\"0.8\"\n              />\n              <circle\n                cx=\"20\"\n                cy=\"20\"\n                r=\"18.5\"\n                stroke=\"white\"\n                strokeOpacity=\"0.2\"\n                style={{ mixBlendMode: 'multiply' }}\n              />\n              <circle\n                cx=\"20\"\n                cy=\"20\"\n                r=\"18\"\n                fill={issueCount > 0 ? '#CA2A30' : '#2A2A2A'}\n              />\n\n              <g transform=\"translate(13, 12)\">\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            </g>\n          </g>\n        </g>\n\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\n              stopColor={isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'}\n            />\n            <stop\n              offset=\"0.604072\"\n              stopColor={isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'}\n              stopOpacity=\"0\"\n            />\n            <stop\n              offset=\"1\"\n              stopColor={isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'}\n              stopOpacity=\"0\"\n            />\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\n              stopColor={isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'}\n            />\n            <stop\n              offset=\"1\"\n              stopColor={isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'}\n              stopOpacity=\"0\"\n            />\n          </linearGradient>\n          <mask id=\"mask0\">\n            <rect\n              width=\"100%\"\n              height=\"100%\"\n              fill={isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'}\n            />\n            <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n          </mask>\n\n          <filter\n            id=\"filter0_bdddi_1457_6023\"\n            x=\"0\"\n            y=\"0\"\n            width=\"40\"\n            height=\"40\"\n            filterUnits=\"userSpaceOnUse\"\n            colorInterpolationFilters=\"sRGB\"\n          >\n            <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n            <feGaussianBlur in=\"BackgroundImageFix\" stdDeviation=\"24\" />\n            <feComposite\n              in2=\"SourceAlpha\"\n              operator=\"in\"\n              result=\"effect1_backgroundBlur_1457_6023\"\n            />\n            <feColorMatrix\n              in=\"SourceAlpha\"\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n              result=\"hardAlpha\"\n            />\n            <feMorphology\n              radius=\"8\"\n              operator=\"erode\"\n              in=\"SourceAlpha\"\n              result=\"effect2_dropShadow_1457_6023\"\n            />\n            <feOffset dy=\"24\" />\n            <feGaussianBlur stdDeviation=\"16\" />\n            <feComposite in2=\"hardAlpha\" operator=\"out\" />\n            <feColorMatrix\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"\n            />\n            <feBlend\n              mode=\"normal\"\n              in2=\"effect1_backgroundBlur_1457_6023\"\n              result=\"effect2_dropShadow_1457_6023\"\n            />\n            <feColorMatrix\n              in=\"SourceAlpha\"\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n              result=\"hardAlpha\"\n            />\n            <feMorphology\n              radius=\"4\"\n              operator=\"erode\"\n              in=\"SourceAlpha\"\n              result=\"effect3_dropShadow_1457_6023\"\n            />\n            <feOffset dy=\"8\" />\n            <feGaussianBlur stdDeviation=\"8\" />\n            <feColorMatrix\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\"\n            />\n            <feBlend\n              mode=\"normal\"\n              in2=\"effect2_dropShadow_1457_6023\"\n              result=\"effect3_dropShadow_1457_6023\"\n            />\n            <feColorMatrix\n              in=\"SourceAlpha\"\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n              result=\"hardAlpha\"\n            />\n            <feOffset dy=\"1\" />\n            <feGaussianBlur stdDeviation=\"0.5\" />\n            <feColorMatrix\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0\"\n            />\n            <feBlend\n              mode=\"normal\"\n              in=\"SourceGraphic\"\n              in2=\"effect3_dropShadow_1457_6023\"\n              result=\"effect4_dropShadow_1457_6023\"\n            />\n            <feBlend\n              mode=\"normal\"\n              in=\"SourceGraphic\"\n              in2=\"effect4_dropShadow_1457_6023\"\n              result=\"shape\"\n            />\n            <feColorMatrix\n              in=\"SourceAlpha\"\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n              result=\"hardAlpha\"\n            />\n            <feOffset dx=\"4\" dy=\"4\" />\n            <feGaussianBlur stdDeviation=\"2\" />\n            <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n            <feColorMatrix\n              type=\"matrix\"\n              values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0\"\n            />\n            <feBlend\n              mode=\"lighten\"\n              in2=\"shape\"\n              result=\"effect5_innerShadow_1457_6023\"\n            />\n          </filter>\n\n          <filter\n            id=\"filter1_i_1457_6023\"\n            x=\"1\"\n            y=\"1\"\n            width=\"39\"\n            height=\"42\"\n            filterUnits=\"userSpaceOnUse\"\n            colorInterpolationFilters=\"sRGB\"\n          >\n            <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n            <feBlend\n              mode=\"normal\"\n              in=\"SourceGraphic\"\n              in2=\"BackgroundImageFix\"\n              result=\"shape\"\n            />\n            <feColorMatrix\n              in=\"SourceAlpha\"\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n              result=\"hardAlpha\"\n            />\n            <feOffset dy=\"4\" />\n            <feGaussianBlur stdDeviation=\"2\" />\n            <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n            <feColorMatrix\n              type=\"matrix\"\n              values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0\"\n            />\n            <feBlend\n              mode=\"normal\"\n              in2=\"shape\"\n              result=\"effect1_innerShadow_1457_6023\"\n            />\n          </filter>\n\n          <radialGradient\n            id=\"paint0_angular_1457_6023\"\n            cx=\"0\"\n            cy=\"0\"\n            r=\"1\"\n            gradientUnits=\"userSpaceOnUse\"\n            gradientTransform=\"translate(20 20) rotate(-90) scale(12.75)\"\n          >\n            <stop stopColor=\"white\" />\n            <stop offset=\"0.0914784\" stopColor=\"white\" stopOpacity=\"0.463159\" />\n            <stop offset=\"0.405428\" stopColor=\"white\" stopOpacity=\"0.4\" />\n          </radialGradient>\n        </defs>\n      </svg>\n    </button>\n  )\n}\n"],"names":["NextLogo","issueCount","onClick","isDevBuilding","isDevRendering","props","isLoading","setIsLoading","useState","isPressed","setIsPressed","useEffect","timeout","setTimeout","clearTimeout","button","style","position","cursor","userSelect","backdropFilter","boxShadow","borderRadius","transition","transform","onMouseDown","onMouseUp","onMouseLeave","css","div","top","right","width","height","background","display","alignItems","justifyContent","color","fontSize","fontWeight","svg","viewBox","fill","xmlns","shapeRendering","defs","clipPath","id","circle","cx","cy","r","g","filter","fillOpacity","stroke","strokeOpacity","mixBlendMode","path","className","d","strokeWidth","mask","strokeDasharray","strokeDashoffset","linearGradient","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","x","y","filterUnits","colorInterpolationFilters","feFlood","floodOpacity","result","feGaussianBlur","in","stdDeviation","feComposite","in2","operator","feColorMatrix","type","values","feMorphology","radius","feOffset","dy","feBlend","mode","dx","k2","k3","radialGradient","gradientTransform"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  onClick: () => void\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  onIssuesClick: () => void\n}\n\nconst SIZE = 36\n\nexport const NextLogo = ({\n  issueCount,\n  onClick,\n  isDevBuilding,\n  isDevRendering,\n  onIssuesClick,\n  ...props\n}: Props) => {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n\n  // Only shows the loading state after a 200ms delay when building or rendering,\n  // to avoid flashing the loading state for quick updates\n  useEffect(() => {\n    if (isDevBuilding || isDevRendering) {\n      const timeout = setTimeout(() => {\n        setIsLoading(true)\n      }, 200)\n      return () => clearTimeout(timeout)\n    } else {\n      setIsLoading(false)\n    }\n  }, [isDevBuilding, isDevRendering])\n\n  return (\n    <>\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge] {\n            --timing: cubic-bezier(0.5, 0.36, 0.25, 1.1);\n            --duration: 300ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-2: hsla(0, 0%, 100%, 0.23);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\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            transition:\n              scale 150ms var(--timing),\n              width 250ms var(--timing),\n              box-shadow 250ms var(--timing),\n              background 150ms ease;\n\n            &:active:not([data-error='true']) {\n              scale: 0.95;\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);\n\n                &:hover {\n                  background: var(--color-hover-alpha-2);\n                }\n              }\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha);\n            }\n\n            [data-cross] {\n              translate: 0 -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: 8px;\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\n          [data-issues-close] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:hover {\n              background: var(--color-hover-alpha);\n            }\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) var(--timing);\n\n            svg {\n              flex-shrink: 0;\n            }\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 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      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        style={\n          {\n            width: hasError && width > SIZE ? width : SIZE,\n            '--size': `${SIZE}px`,\n          } as React.CSSProperties\n        }\n      >\n        <div ref={ref}>\n          {/* Children */}\n          <button data-next-mark onClick={onClick} {...props}>\n            <NextMark isLoading={isLoading} />\n          </button>\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={onIssuesClick}\n              >\n                {issueCount} {issueCount === 1 ? 'Issue' : 'Issues'}\n              </button>\n              <button\n                data-issues-close\n                aria-label=\"Dismiss\"\n                onClick={() => {\n                  setIsErrorExpanded(false)\n                }}\n              >\n                <Cross />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </>\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return width\n}\n\nfunction NextMark({ isLoading }: { isLoading?: boolean }) {\n  return (\n    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\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 Cross() {\n  return (\n    <svg\n      data-cross\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"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=\"#EAEAEA\"\n      />\n    </svg>\n  )\n}\n"],"names":["NextLogo","SIZE","issueCount","onClick","isDevBuilding","isDevRendering","onIssuesClick","props","hasError","isErrorExpanded","setIsErrorExpanded","useState","isLoading","setIsLoading","ref","useRef","width","useMeasureWidth","useEffect","timeout","setTimeout","clearTimeout","style","css","div","data-next-badge","data-error","button","data-next-mark","NextMark","data-issues","data-issues-open","aria-label","data-issues-close","Cross","setWidth","el","current","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","data-cross","xmlns","fill-rule","clip-rule"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/use-delayed-render.d.ts

@@ -0,0 +1,11 @@
+interface Options {
+    enterDelay?: number;
+    exitDelay?: number;
+    onUnmount?: () => void;
+}
+/** Useful to perform CSS animations on React components */
+export declare function useDelayedRender(active?: boolean, options?: Options): {
+    mounted: boolean;
+    rendered: boolean;
+};
+export {};

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/use-delayed-render.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDelayedRender", {
+    enumerable: true,
+    get: function() {
+        return useDelayedRender;
+    }
+});
+const _react = require("react");
+function useDelayedRender(active, options) {
+    if (active === void 0) active = false;
+    if (options === void 0) options = {};
+    const [, force] = (0, _react.useState)();
+    const mounted = (0, _react.useRef)(active);
+    const rendered = (0, _react.useRef)(false);
+    const renderTimer = (0, _react.useRef)(null);
+    const unmountTimer = (0, _react.useRef)(null);
+    const prevActive = (0, _react.useRef)(active);
+    const recalculate = (0, _react.useCallback)(()=>{
+        const { enterDelay = 1, exitDelay = 0 } = options;
+        if (prevActive.current) {
+            // Mount immediately
+            mounted.current = true;
+            if (unmountTimer.current) clearTimeout(unmountTimer.current);
+            if (enterDelay <= 0) {
+                // Render immediately
+                rendered.current = true;
+            } else {
+                if (renderTimer.current) return;
+                // Render after a delay
+                renderTimer.current = setTimeout(()=>{
+                    rendered.current = true;
+                    renderTimer.current = null;
+                    force({});
+                }, enterDelay);
+            }
+        } else {
+            // Immediately set to unrendered
+            rendered.current = false;
+            if (exitDelay <= 0) {
+                mounted.current = false;
+            } else {
+                if (unmountTimer.current) return;
+                // Unmount after a delay
+                unmountTimer.current = setTimeout(()=>{
+                    mounted.current = false;
+                    unmountTimer.current = null;
+                    force({});
+                }, exitDelay);
+            }
+        }
+    }, [
+        options
+    ]);
+    // When the active prop changes, need to re-calculate
+    if (active !== prevActive.current) {
+        prevActive.current = active;
+        // We want to do this synchronously with the render, not in an effect
+        // this way when active → true, mounted → true in the same pass
+        recalculate();
+    }
+    return {
+        mounted: mounted.current,
+        rendered: rendered.current
+    };
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=use-delayed-render.js.map

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/use-delayed-render.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/use-delayed-render.ts"],"sourcesContent":["import { useState, useRef, useCallback } from 'react'\n\ninterface Options {\n  enterDelay?: number\n  exitDelay?: number\n  onUnmount?: () => void\n}\n\n/** Useful to perform CSS animations on React components */\nexport function useDelayedRender(\n  active: boolean = false,\n  options: Options = {}\n) {\n  const [, force] = useState<any>()\n  const mounted = useRef(active)\n  const rendered = useRef(false)\n  const renderTimer = useRef<NodeJS.Timeout | null>(null)\n  const unmountTimer = useRef<NodeJS.Timeout | null>(null)\n  const prevActive = useRef(active)\n\n  const recalculate = useCallback(() => {\n    const { enterDelay = 1, exitDelay = 0 } = options\n\n    if (prevActive.current) {\n      // Mount immediately\n      mounted.current = true\n      if (unmountTimer.current) clearTimeout(unmountTimer.current)\n\n      if (enterDelay <= 0) {\n        // Render immediately\n        rendered.current = true\n      } else {\n        if (renderTimer.current) return\n\n        // Render after a delay\n        renderTimer.current = setTimeout(() => {\n          rendered.current = true\n          renderTimer.current = null\n          force({})\n        }, enterDelay)\n      }\n    } else {\n      // Immediately set to unrendered\n      rendered.current = false\n\n      if (exitDelay <= 0) {\n        mounted.current = false\n      } else {\n        if (unmountTimer.current) return\n\n        // Unmount after a delay\n        unmountTimer.current = setTimeout(() => {\n          mounted.current = false\n          unmountTimer.current = null\n          force({})\n        }, exitDelay)\n      }\n    }\n  }, [options])\n\n  // When the active prop changes, need to re-calculate\n  if (active !== prevActive.current) {\n    prevActive.current = active\n    // We want to do this synchronously with the render, not in an effect\n    // this way when active → true, mounted → true in the same pass\n    recalculate()\n  }\n\n  return {\n    mounted: mounted.current,\n    rendered: rendered.current,\n  }\n}\n"],"names":["useDelayedRender","active","options","force","useState","mounted","useRef","rendered","renderTimer","unmountTimer","prevActive","recalculate","useCallback","enterDelay","exitDelay","current","clearTimeout","setTimeout"],"mappings":";;;;+BASgBA;;;eAAAA;;;uBAT8B;AASvC,SAASA,iBACdC,MAAuB,EACvBC,OAAqB;IADrBD,IAAAA,mBAAAA,SAAkB;IAClBC,IAAAA,oBAAAA,UAAmB,CAAC;IAEpB,MAAM,GAAGC,MAAM,GAAGC,IAAAA,eAAQ;IAC1B,MAAMC,UAAUC,IAAAA,aAAM,EAACL;IACvB,MAAMM,WAAWD,IAAAA,aAAM,EAAC;IACxB,MAAME,cAAcF,IAAAA,aAAM,EAAwB;IAClD,MAAMG,eAAeH,IAAAA,aAAM,EAAwB;IACnD,MAAMI,aAAaJ,IAAAA,aAAM,EAACL;IAE1B,MAAMU,cAAcC,IAAAA,kBAAW,EAAC;QAC9B,MAAM,EAAEC,aAAa,CAAC,EAAEC,YAAY,CAAC,EAAE,GAAGZ;QAE1C,IAAIQ,WAAWK,OAAO,EAAE;YACtB,oBAAoB;YACpBV,QAAQU,OAAO,GAAG;YAClB,IAAIN,aAAaM,OAAO,EAAEC,aAAaP,aAAaM,OAAO;YAE3D,IAAIF,cAAc,GAAG;gBACnB,qBAAqB;gBACrBN,SAASQ,OAAO,GAAG;YACrB,OAAO;gBACL,IAAIP,YAAYO,OAAO,EAAE;gBAEzB,uBAAuB;gBACvBP,YAAYO,OAAO,GAAGE,WAAW;oBAC/BV,SAASQ,OAAO,GAAG;oBACnBP,YAAYO,OAAO,GAAG;oBACtBZ,MAAM,CAAC;gBACT,GAAGU;YACL;QACF,OAAO;YACL,gCAAgC;YAChCN,SAASQ,OAAO,GAAG;YAEnB,IAAID,aAAa,GAAG;gBAClBT,QAAQU,OAAO,GAAG;YACpB,OAAO;gBACL,IAAIN,aAAaM,OAAO,EAAE;gBAE1B,wBAAwB;gBACxBN,aAAaM,OAAO,GAAGE,WAAW;oBAChCZ,QAAQU,OAAO,GAAG;oBAClBN,aAAaM,OAAO,GAAG;oBACvBZ,MAAM,CAAC;gBACT,GAAGW;YACL;QACF;IACF,GAAG;QAACZ;KAAQ;IAEZ,qDAAqD;IACrD,IAAID,WAAWS,WAAWK,OAAO,EAAE;QACjCL,WAAWK,OAAO,GAAGd;QACrB,qEAAqE;QACrE,+DAA+D;QAC/DU;IACF;IAEA,OAAO;QACLN,SAASA,QAAQU,OAAO;QACxBR,UAAUA,SAASQ,OAAO;IAC5B;AACF"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.js

@@ -12,7 +12,7 @@ const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_
 const _nooptemplate = require("../../../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-toast-wrapper] {\n    border: none;\n  }\n\n  [data-nextjs-dev-tools-button] {\n    border: none;\n    background: none;\n    padding: 0;\n    font-size: var(--size-font);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-popover] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-sm), var(--shadow-lg);\n    border-radius: var(--rounded-lg);\n    position: absolute;\n    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n  }\n\n  [data-nextjs-dev-tools-content] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-footer] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    gap: var(--size-2_5);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-200);\n    width: 100%;\n  }\n\n  [data-nextjs-dev-tools-footer-text] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-2) var(--size-1_5);\n    width: 248px;\n  }\n\n  [data-nextjs-dev-tools-version] {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 11px;\n    line-height: var(--size-4);\n    color: var(--color-gray-900);\n  }\n\n  [data-nextjs-dev-tools-row] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n    gap: var(--size-2);\n    width: 248px;\n    height: 36px;\n    border-radius: var(--rounded-md);\n  }\n\n  [data-nextjs-dev-tools-row]:hover {\n    background-color: var(--color-gray-100);\n  }\n\n  [data-nextjs-dev-tools-row-label] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-row-value] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n    padding: 0 var(--size-0_5);\n  }\n\n  [data-nextjs-dev-tools-issue-count] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--size-1);\n    width: var(--size-5);\n    height: var(--size-5);\n    border-radius: var(--rounded-full);\n  }\n\n  [data-nextjs-dev-tools-issue-text] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 500;\n    font-size: 11px;\n    line-height: var(--size-4);\n    text-align: center;\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='true'] {\n    background: var(--color-red-300);\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='false'] {\n    background: var(--color-gray-300);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='true'] {\n    color: var(--color-red-900);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='false'] {\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-container] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-shortcut-group] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--size-1);\n  }\n\n  [data-nextjs-dev-tools-icon] {\n    display: flex;\n    min-width: var(--size-5);\n    height: var(--size-5);\n    padding: var(--size-1) var(--size-1_5);\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-smaller);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--size-4);\n  }\n\n  [data-nextjs-dev-tools-ctrl-icon] {\n    width: 100%;\n  }\n"
+        "\n  [data-nextjs-toast-wrapper] {\n    border: none;\n  }\n\n  [data-nextjs-dev-tools-button] {\n    border: none;\n    background: none;\n    padding: 0;\n    font-size: var(--size-font);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\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    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\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  [data-nextjs-dev-tools-content] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-footer] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    gap: var(--size-2_5);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-200);\n    width: 100%;\n  }\n\n  [data-nextjs-dev-tools-footer-text] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-2) var(--size-1_5);\n    width: 248px;\n  }\n\n  [data-nextjs-dev-tools-version] {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 11px;\n    line-height: var(--size-4);\n    color: var(--color-gray-900);\n  }\n\n  [data-nextjs-dev-tools-row] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n    gap: var(--size-2);\n    width: 248px;\n    height: 36px;\n    border-radius: var(--rounded-md);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-row]:hover {\n    background-color: var(--color-gray-100);\n  }\n\n  [data-nextjs-dev-tools-row-label] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-row-value] {\n    font-family: var(--font-stack-sans);\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n    padding: 0 var(--size-0_5);\n  }\n\n  [data-nextjs-dev-tools-issue-count] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--size-1);\n    width: var(--size-5);\n    height: var(--size-5);\n    border-radius: var(--rounded-full);\n  }\n\n  [data-nextjs-dev-tools-issue-text] {\n    font-family: var(--font-stack-sans);\n    font-weight: 500;\n    font-size: 11px;\n    line-height: var(--size-4);\n    text-align: center;\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='true'] {\n    background: var(--color-red-300);\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='false'] {\n    background: var(--color-gray-300);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='true'] {\n    color: var(--color-red-900);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='false'] {\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-container] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-shortcut-group] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--size-1);\n  }\n\n  [data-nextjs-dev-tools-icon] {\n    display: flex;\n    width: var(--size-5);\n    height: var(--size-5);\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-100);\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-smaller);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--size-4);\n  }\n\n  [data-nextjs-dev-tools-ctrl-icon] {\n    width: 100%;\n  }\n"
     ]);
     _templateObject = function() {
         return data;

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.ts"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport const styles = css`\n  [data-nextjs-toast-wrapper] {\n    border: none;\n  }\n\n  [data-nextjs-dev-tools-button] {\n    border: none;\n    background: none;\n    padding: 0;\n    font-size: var(--size-font);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-popover] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    box-shadow: var(--shadow-sm), var(--shadow-lg);\n    border-radius: var(--rounded-lg);\n    position: absolute;\n    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n  }\n\n  [data-nextjs-dev-tools-content] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-footer] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    gap: var(--size-2_5);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-200);\n    width: 100%;\n  }\n\n  [data-nextjs-dev-tools-footer-text] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-2) var(--size-1_5);\n    width: 248px;\n  }\n\n  [data-nextjs-dev-tools-version] {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 11px;\n    line-height: var(--size-4);\n    color: var(--color-gray-900);\n  }\n\n  [data-nextjs-dev-tools-row] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n    gap: var(--size-2);\n    width: 248px;\n    height: 36px;\n    border-radius: var(--rounded-md);\n  }\n\n  [data-nextjs-dev-tools-row]:hover {\n    background-color: var(--color-gray-100);\n  }\n\n  [data-nextjs-dev-tools-row-label] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-row-value] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n    padding: 0 var(--size-0_5);\n  }\n\n  [data-nextjs-dev-tools-issue-count] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--size-1);\n    width: var(--size-5);\n    height: var(--size-5);\n    border-radius: var(--rounded-full);\n  }\n\n  [data-nextjs-dev-tools-issue-text] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 500;\n    font-size: 11px;\n    line-height: var(--size-4);\n    text-align: center;\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='true'] {\n    background: var(--color-red-300);\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='false'] {\n    background: var(--color-gray-300);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='true'] {\n    color: var(--color-red-900);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='false'] {\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-container] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-shortcut-group] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--size-1);\n  }\n\n  [data-nextjs-dev-tools-icon] {\n    display: flex;\n    min-width: var(--size-5);\n    height: var(--size-5);\n    padding: var(--size-1) var(--size-1_5);\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-smaller);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--size-4);\n  }\n\n  [data-nextjs-dev-tools-ctrl-icon] {\n    width: 100%;\n  }\n`\n"],"names":["styles","css"],"mappings":";;;;+BAEaA;;;eAAAA;;;;8BAFe;;;;;;;;;;AAErB,MAAMA,aAASC,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.ts"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport const styles = css`\n  [data-nextjs-toast-wrapper] {\n    border: none;\n  }\n\n  [data-nextjs-dev-tools-button] {\n    border: none;\n    background: none;\n    padding: 0;\n    font-size: var(--size-font);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\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    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\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  [data-nextjs-dev-tools-content] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-footer] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    gap: var(--size-2_5);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-200);\n    width: 100%;\n  }\n\n  [data-nextjs-dev-tools-footer-text] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-2) var(--size-1_5);\n    width: 248px;\n  }\n\n  [data-nextjs-dev-tools-version] {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 11px;\n    line-height: var(--size-4);\n    color: var(--color-gray-900);\n  }\n\n  [data-nextjs-dev-tools-row] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n    gap: var(--size-2);\n    width: 248px;\n    height: 36px;\n    border-radius: var(--rounded-md);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-row]:hover {\n    background-color: var(--color-gray-100);\n  }\n\n  [data-nextjs-dev-tools-row-label] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-row-value] {\n    font-family: var(--font-stack-sans);\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n    padding: 0 var(--size-0_5);\n  }\n\n  [data-nextjs-dev-tools-issue-count] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--size-1);\n    width: var(--size-5);\n    height: var(--size-5);\n    border-radius: var(--rounded-full);\n  }\n\n  [data-nextjs-dev-tools-issue-text] {\n    font-family: var(--font-stack-sans);\n    font-weight: 500;\n    font-size: 11px;\n    line-height: var(--size-4);\n    text-align: center;\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='true'] {\n    background: var(--color-red-300);\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='false'] {\n    background: var(--color-gray-300);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='true'] {\n    color: var(--color-red-900);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='false'] {\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-container] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-shortcut-group] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--size-1);\n  }\n\n  [data-nextjs-dev-tools-icon] {\n    display: flex;\n    width: var(--size-5);\n    height: var(--size-5);\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-100);\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-smaller);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--size-4);\n  }\n\n  [data-nextjs-dev-tools-ctrl-icon] {\n    width: 100%;\n  }\n`\n"],"names":["styles","css"],"mappings":";;;;+BAEaA;;;eAAAA;;;;8BAFe;;;;;;;;;;AAErB,MAAMA,aAASC,kBAAG"}

package/dist/client/components/react-dev-overlay/_experimental/internal/styles/base.js

@@ -15,7 +15,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _nooptemplate = require("../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      "
+        "\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      "
     ]);
     _templateObject = function() {
         return data;

package/dist/client/components/react-dev-overlay/_experimental/internal/styles/base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/styles/base.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function Base() {\n  return (\n    <style>\n      {css`\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["Base","style","css"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;;;iEAHO;8BACK;;;;;;;;;;AAErB,SAASA;IACd,qBACE,qBAACC;sBACEC,kBAAG;;AAiIV"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/styles/base.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function Base() {\n  return (\n    <style>\n      {css`\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["Base","style","css"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;;;iEAHO;8BACK;;;;;;;;;;AAErB,SAASA;IACd,qBACE,qBAACC;sBACEC,kBAAG;;AAoIV"}

package/dist/client/index.js

@@ -62,7 +62,7 @@ const _onrecoverableerror = require("./react-client-callbacks/on-recoverable-err
 const _tracer = /*#__PURE__*/ _interop_require_default._(require("./tracing/tracer"));
 const _reporttosocket = /*#__PURE__*/ _interop_require_default._(require("./tracing/report-to-socket"));
 const _isnextroutererror = require("./components/is-next-router-error");
-const version = "15.2.0-canary.15";
+const version = "15.2.0-canary.16";
 let router;
 const emitter = (0, _mitt.default)();
 const looseToArray = (input)=>[].slice.call(input);