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

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

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

Potentially problematic release.

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

Files changed (246) hide show

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

	@@ -1 +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":["Cross","NextLogo","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","useRef","animatedDep","setAnimatedDep","useState","isInitialRef","useEffect","current","timeoutId","setTimeout","clearTimeout","forwardRef","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","display","css","data-next-badge","data-error","data-error-expanded","data-animate","button","mergeRefs","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","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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"}
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 { 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":["Cross","NextLogo","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","useRef","animatedDep","setAnimatedDep","useState","isInitialRef","useEffect","current","timeoutId","setTimeout","clearTimeout","forwardRef","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","display","css","data-next-badge","data-error","data-error-expanded","data-animate","button","mergeRefs","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","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":"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"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dialog/body.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ type ErrorOverlayDialogBodyProps = {
     onClose?: () => void;
 };
 export declare function ErrorOverlayDialogBody({ children, }: ErrorOverlayDialogBodyProps): import("react/jsx-runtime").JSX.Element;
-export declare const DIALOG_BODY_STYLES: string;
+export declare const DIALOG_BODY_STYLES = "";
 export {};

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

@@ -20,19 +20,8 @@ _export(exports, {
         return ErrorOverlayDialogBody;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
-const _nooptemplate = require("../../../../utils/noop-template");
 const _dialog = require("../../dialog");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        ""
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayDialogBody(param) {
     let { children } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.DialogBody, {
@@ -40,7 +29,7 @@ function ErrorOverlayDialogBody(param) {
         children: children
     });
 }
-const DIALOG_BODY_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DIALOG_BODY_STYLES = "";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

	@@ -1 +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":["DIALOG_BODY_STYLES","ErrorOverlayDialogBody","children","DialogBody","className"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IAgBaA~~,kBAAkB;eAAlBA;;IARGC,sBAAsB;eAAtBA~~;;;;;8BARY~~;~~wBACD;;;;;;;;;;~~AAOpB,SAASA,uBAAuB,KAET;IAFS,IAAA,EACrCC,QAAQ,EACoB,GAFS;IAGrC,qBACE,qBAACC,kBAAU;QAACC,WAAU;kBAAgCF;;AAE1D;AAEO,MAAMF,~~yBAAqBK,kBAAG~~"}
1	+ {"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":["DIALOG_BODY_STYLES","ErrorOverlayDialogBody","children","DialogBody","className"],"mappings":";;;;;;;;;;;;;;;IAeaA,kBAAkB;eAAlBA;;IARGC,sBAAsB;eAAtBA;;;;wBAPW;AAOpB,SAASA,uBAAuB,KAET;IAFS,IAAA,EACrCC,QAAQ,EACoB,GAFS;IAGrC,qBACE,qBAACC,kBAAU;QAACC,WAAU;kBAAgCF;;AAE1D;AAEO,MAAMF,qBAAsB"}

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

@@ -4,5 +4,5 @@ type ErrorOverlayDialogProps = {
     dialogResizerRef?: React.RefObject<HTMLDivElement | null>;
 };
 export declare function ErrorOverlayDialog({ children, onClose, ...props }: ErrorOverlayDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare const DIALOG_STYLES: string;
+export declare const DIALOG_STYLES = "\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--next-dialog-radius);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-gray-400);\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n";
 export {};

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

@@ -20,19 +20,8 @@ _export(exports, {
         return ErrorOverlayDialog;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _dialog = require("../../dialog/dialog");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--next-dialog-radius);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-gray-400);\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayDialog(param) {
     let { children, onClose, ...props } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialog.Dialog, {
@@ -45,7 +34,7 @@ function ErrorOverlayDialog(param) {
         children: children
     });
 }
-const DIALOG_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DIALOG_STYLES = "\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--next-dialog-radius);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-gray-400);\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx"],"sourcesContent":["import { Dialog } from '../../dialog/dialog'\~~nimport { noop as css } from '../../../../utils/noop-template'\~~n\ntype ErrorOverlayDialogProps = {\n children?: React.ReactNode\n onClose?: () => void\n dialogResizerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nexport function ErrorOverlayDialog({\n children,\n onClose,\n ...props\n}: ErrorOverlayDialogProps) {\n return (\n <Dialog\n type=\"error\"\n aria-labelledby=\"nextjs__container_errors_label\"\n aria-describedby=\"nextjs__container_errors_desc\"\n onClose={onClose}\n className=\"error-overlay-dialog\"\n {...props}\n >\n {children}\n </Dialog>\n )\n}\n\nexport const DIALOG_STYLES = ~~css~~`\n .error-overlay-dialog {\n overflow-y: auto;\n -webkit-font-smoothing: antialiased;\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--next-dialog-radius);\n box-shadow: var(--shadow-menu);\n position: relative;\n\n @media (prefers-color-scheme: dark) {\n border-color: var(--color-gray-400);\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n ) {\n border-top-left-radius: 0;\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav]\n .error-overlay-notch[data-side='right']\n ) {\n border-top-right-radius: 0;\n }\n }\n`\n"],"names":["DIALOG_STYLES","ErrorOverlayDialog","children","onClose","props","Dialog","type","aria-labelledby","aria-describedby","className"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IA4BaA~~,aAAa;eAAbA;;IAnBGC,kBAAkB;eAAlBA~~;;;;;wBATO~~;~~8BACK;;;;;;;;;;AAQrB~~,SAASA,mBAAmB,KAIT;IAJS,IAAA,EACjCC,QAAQ,EACRC,OAAO,EACP,GAAGC,OACqB,GAJS;IAKjC,qBACE,qBAACC,cAAM;QACLC,MAAK;QACLC,mBAAgB;QAChBC,oBAAiB;QACjBL,SAASA;QACTM,WAAU;QACT,GAAGL,KAAK;kBAERF;;AAGP;AAEO,MAAMF,~~oBAAgBU,kBAAG~~"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx"],"sourcesContent":["import { Dialog } from '../../dialog/dialog'\n\ntype ErrorOverlayDialogProps = {\n children?: React.ReactNode\n onClose?: () => void\n dialogResizerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nexport function ErrorOverlayDialog({\n children,\n onClose,\n ...props\n}: ErrorOverlayDialogProps) {\n return (\n <Dialog\n type=\"error\"\n aria-labelledby=\"nextjs__container_errors_label\"\n aria-describedby=\"nextjs__container_errors_desc\"\n onClose={onClose}\n className=\"error-overlay-dialog\"\n {...props}\n >\n {children}\n </Dialog>\n )\n}\n\nexport const DIALOG_STYLES = `\n .error-overlay-dialog {\n overflow-y: auto;\n -webkit-font-smoothing: antialiased;\n background: var(--color-background-100);\n background-clip: padding-box;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--next-dialog-radius);\n box-shadow: var(--shadow-menu);\n position: relative;\n\n @media (prefers-color-scheme: dark) {\n border-color: var(--color-gray-400);\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n ) {\n border-top-left-radius: 0;\n }\n\n &:has(\n ~ [data-nextjs-error-overlay-nav]\n .error-overlay-notch[data-side='right']\n ) {\n border-top-right-radius: 0;\n }\n }\n`\n"],"names":["DIALOG_STYLES","ErrorOverlayDialog","children","onClose","props","Dialog","type","aria-labelledby","aria-describedby","className"],"mappings":";;;;;;;;;;;;;;;IA2BaA,aAAa;eAAbA;;IAnBGC,kBAAkB;eAAlBA;;;;wBARO;AAQhB,SAASA,mBAAmB,KAIT;IAJS,IAAA,EACjCC,QAAQ,EACRC,OAAO,EACP,GAAGC,OACqB,GAJS;IAKjC,qBACE,qBAACC,cAAM;QACLC,MAAK;QACLC,mBAAgB;QAChBC,oBAAiB;QACjBL,SAASA;QACTM,WAAU;QACT,GAAGL,KAAK;kBAERF;;AAGP;AAEO,MAAMF,gBAAiB"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dialog/header.d.ts CHANGED Viewed

@@ -2,5 +2,5 @@ type ErrorOverlayDialogHeaderProps = {
     children?: React.ReactNode;
 };
 export declare function ErrorOverlayDialogHeader({ children, }: ErrorOverlayDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare const DIALOG_HEADER_STYLES: string;
+export declare const DIALOG_HEADER_STYLES = "\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: var(--size-4);\n    right: var(--size-4);\n  }\n";
 export {};

package/dist/client/components/react-dev-overlay/ui/components/errors/dialog/header.js CHANGED Viewed

@@ -20,19 +20,8 @@ _export(exports, {
         return ErrorOverlayDialogHeader;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _dialogheader = require("../../dialog/dialog-header");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: var(--size-4);\n    right: var(--size-4);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayDialogHeader(param) {
     let { children } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialogheader.DialogHeader, {
@@ -40,7 +29,7 @@ function ErrorOverlayDialogHeader(param) {
         children: children
     });
 }
-const DIALOG_HEADER_STYLES = (0, _nooptemplate.noop)(_templateObject());
+const DIALOG_HEADER_STYLES = "\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: var(--size-4);\n    right: var(--size-4);\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/header.tsx"],"sourcesContent":["import { DialogHeader } from '../../dialog/dialog-header'\~~nimport { noop as css } from '../../../../utils/noop-template'\~~n\ntype ErrorOverlayDialogHeaderProps = {\n children?: React.ReactNode\n}\n\nexport function ErrorOverlayDialogHeader({\n children,\n}: ErrorOverlayDialogHeaderProps) {\n return (\n <DialogHeader className=\"nextjs-container-errors-header\">\n {children}\n </DialogHeader>\n )\n}\n\nexport const DIALOG_HEADER_STYLES = ~~css~~`\n .nextjs-container-errors-header {\n position: relative;\n }\n .nextjs-container-errors-header > h1 {\n font-size: var(--size-font-big);\n line-height: var(--size-font-bigger);\n font-weight: bold;\n margin: calc(var(--size-gap-double) * 1.5) 0;\n color: var(--color-title-h1);\n }\n .nextjs-container-errors-header small {\n font-size: var(--size-font-small);\n color: var(--color-accents-1);\n margin-left: var(--size-gap-double);\n }\n .nextjs-container-errors-header small > span {\n font-family: var(--font-stack-monospace);\n }\n .nextjs-container-errors-header > div > small {\n margin: 0;\n margin-top: var(--size-gap-half);\n }\n .nextjs-container-errors-header > p > a {\n color: inherit;\n font-weight: bold;\n }\n .nextjs-container-errors-header\n > .nextjs-container-build-error-version-status {\n position: absolute;\n top: var(--size-4);\n right: var(--size-4);\n }\n`\n"],"names":["DIALOG_HEADER_STYLES","ErrorOverlayDialogHeader","children","DialogHeader","className"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IAiBaA~~,oBAAoB;eAApBA;;IAVGC,wBAAwB;eAAxBA~~;;;;;8BAPa~~;~~8BACD;;;;;;;;;;AAMrB~~,SAASA,yBAAyB,KAET;IAFS,IAAA,EACvCC,QAAQ,EACsB,GAFS;IAGvC,qBACE,qBAACC,0BAAY;QAACC,WAAU;kBACrBF;;AAGP;AAEO,MAAMF,~~2BAAuBK,kBAAG~~"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/header.tsx"],"sourcesContent":["import { DialogHeader } from '../../dialog/dialog-header'\n\ntype ErrorOverlayDialogHeaderProps = {\n children?: React.ReactNode\n}\n\nexport function ErrorOverlayDialogHeader({\n children,\n}: ErrorOverlayDialogHeaderProps) {\n return (\n <DialogHeader className=\"nextjs-container-errors-header\">\n {children}\n </DialogHeader>\n )\n}\n\nexport const DIALOG_HEADER_STYLES = `\n .nextjs-container-errors-header {\n position: relative;\n }\n .nextjs-container-errors-header > h1 {\n font-size: var(--size-font-big);\n line-height: var(--size-font-bigger);\n font-weight: bold;\n margin: calc(var(--size-gap-double) * 1.5) 0;\n color: var(--color-title-h1);\n }\n .nextjs-container-errors-header small {\n font-size: var(--size-font-small);\n color: var(--color-accents-1);\n margin-left: var(--size-gap-double);\n }\n .nextjs-container-errors-header small > span {\n font-family: var(--font-stack-monospace);\n }\n .nextjs-container-errors-header > div > small {\n margin: 0;\n margin-top: var(--size-gap-half);\n }\n .nextjs-container-errors-header > p > a {\n color: inherit;\n font-weight: bold;\n }\n .nextjs-container-errors-header\n > .nextjs-container-build-error-version-status {\n position: absolute;\n top: var(--size-4);\n right: var(--size-4);\n }\n`\n"],"names":["DIALOG_HEADER_STYLES","ErrorOverlayDialogHeader","children","DialogHeader","className"],"mappings":";;;;;;;;;;;;;;;IAgBaA,oBAAoB;eAApBA;;IAVGC,wBAAwB;eAAxBA;;;;8BANa;AAMtB,SAASA,yBAAyB,KAET;IAFS,IAAA,EACvCC,QAAQ,EACsB,GAFS;IAGvC,qBACE,qBAACC,0BAAY;QAACC,WAAU;kBACrBF;;AAGP;AAEO,MAAMF,uBAAwB"}

package/dist/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export declare function EnvironmentNameLabel({ environmentName, }: {
     environmentName: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const ENVIRONMENT_NAME_LABEL_STYLES: string;
+export declare const ENVIRONMENT_NAME_LABEL_STYLES = "\n  [data-nextjs-environment-name-label] {\n    padding: var(--size-0_5) var(--size-1_5);\n    margin: 0;\n    /* used --size instead of --rounded because --rounded is missing 6px */\n    border-radius: var(--size-1_5);\n    background: var(--color-gray-300);\n    font-weight: 600;\n    font-size: var(--size-font-11);\n    color: var(--color-gray-900);\n    font-family: var(--font-stack-monospace);\n    line-height: var(--size-5);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.js CHANGED Viewed

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

package/dist/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.tsx"],"sourcesContent":["~~import~~ ~~{ noop as css } from '../../../../utils/noop-template'\n\nexport~~ function EnvironmentNameLabel({\n environmentName,\n}: {\n environmentName: string\n}) {\n return <span data-nextjs-environment-name-label>{environmentName}</span>\n}\n\nexport const ENVIRONMENT_NAME_LABEL_STYLES = ~~css~~`\n [data-nextjs-environment-name-label] {\n padding: var(--size-0_5) var(--size-1_5);\n margin: 0;\n /* used --size instead of --rounded because --rounded is missing 6px */\n border-radius: var(--size-1_5);\n background: var(--color-gray-300);\n font-weight: 600;\n font-size: var(--size-font-11);\n color: var(--color-gray-900);\n font-family: var(--font-stack-monospace);\n line-height: var(--size-5);\n }\n`\n"],"names":["ENVIRONMENT_NAME_LABEL_STYLES","EnvironmentNameLabel","environmentName","span","data-nextjs-environment-name-label"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IAUaA~~,6BAA6B;eAA7BA;;IARGC,oBAAoB;eAApBA~~;;;;;8BAFY;;;;;;;;;;AAErB~~,SAASA,qBAAqB,KAIpC;IAJoC,IAAA,EACnCC,eAAe,EAGhB,GAJoC;IAKnC,qBAAO,qBAACC;QAAKC,oCAAkC;kBAAEF;;AACnD;AAEO,MAAMF,~~oCAAgCK,kBAAG~~"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.tsx"],"sourcesContent":["export function EnvironmentNameLabel({\n environmentName,\n}: {\n environmentName: string\n}) {\n return <span data-nextjs-environment-name-label>{environmentName}</span>\n}\n\nexport const ENVIRONMENT_NAME_LABEL_STYLES = `\n [data-nextjs-environment-name-label] {\n padding: var(--size-0_5) var(--size-1_5);\n margin: 0;\n /* used --size instead of --rounded because --rounded is missing 6px */\n border-radius: var(--size-1_5);\n background: var(--color-gray-300);\n font-weight: 600;\n font-size: var(--size-font-11);\n color: var(--color-gray-900);\n font-family: var(--font-stack-monospace);\n line-height: var(--size-5);\n }\n`\n"],"names":["ENVIRONMENT_NAME_LABEL_STYLES","EnvironmentNameLabel","environmentName","span","data-nextjs-environment-name-label"],"mappings":";;;;;;;;;;;;;;;IAQaA,6BAA6B;eAA7BA;;IARGC,oBAAoB;eAApBA;;;;AAAT,SAASA,qBAAqB,KAIpC;IAJoC,IAAA,EACnCC,eAAe,EAGhB,GAJoC;IAKnC,qBAAO,qBAACC;QAAKC,oCAAkC;kBAAEF;;AACnD;AAEO,MAAMF,gCAAiC"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ type ErrorMessageProps = {
     errorMessage: ErrorMessageType;
 };
 export declare function ErrorMessage({ errorMessage }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .nextjs__container_errors_wrapper {\n    position: relative;\n  }\n\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n\n  .nextjs__container_errors_desc.truncated {\n    max-height: 200px;\n    overflow: hidden;\n  }\n\n  .nextjs__container_errors_gradient_overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 85px;\n    background: linear-gradient(\n      180deg,\n      rgba(250, 250, 250, 0) 0%,\n      var(--color-background-200) 100%\n    );\n  }\n\n  .nextjs__container_errors_expand_button {\n    position: absolute;\n    bottom: 10px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    align-items: center;\n    padding: 6px 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: 999px;\n    box-shadow:\n      0px 2px 2px var(--color-gray-alpha-100),\n      0px 8px 8px -8px var(--color-gray-alpha-100);\n    font-size: 13px;\n    cursor: pointer;\n    color: var(--color-gray-900);\n    font-weight: 500;\n  }\n";
 export {};

package/dist/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.js CHANGED Viewed

@@ -20,19 +20,8 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .nextjs__container_errors_wrapper {\n    position: relative;\n  }\n\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n\n  .nextjs__container_errors_desc.truncated {\n    max-height: 200px;\n    overflow: hidden;\n  }\n\n  .nextjs__container_errors_gradient_overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 85px;\n    background: linear-gradient(\n      180deg,\n      rgba(250, 250, 250, 0) 0%,\n      var(--color-background-200) 100%\n    );\n  }\n\n  .nextjs__container_errors_expand_button {\n    position: absolute;\n    bottom: 10px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    align-items: center;\n    padding: 6px 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: 999px;\n    box-shadow:\n      0px 2px 2px var(--color-gray-alpha-100),\n      0px 8px 8px -8px var(--color-gray-alpha-100);\n    font-size: 13px;\n    cursor: pointer;\n    color: var(--color-gray-900);\n    font-weight: 500;\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorMessage(param) {
     let { errorMessage } = param;
     const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
@@ -71,7 +60,7 @@ function ErrorMessage(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .nextjs__container_errors_wrapper {\n    position: relative;\n  }\n\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n\n  .nextjs__container_errors_desc.truncated {\n    max-height: 200px;\n    overflow: hidden;\n  }\n\n  .nextjs__container_errors_gradient_overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 85px;\n    background: linear-gradient(\n      180deg,\n      rgba(250, 250, 250, 0) 0%,\n      var(--color-background-200) 100%\n    );\n  }\n\n  .nextjs__container_errors_expand_button {\n    position: absolute;\n    bottom: 10px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: flex;\n    align-items: center;\n    padding: 6px 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: 999px;\n    box-shadow:\n      0px 2px 2px var(--color-gray-alpha-100),\n      0px 8px 8px -8px var(--color-gray-alpha-100);\n    font-size: 13px;\n    cursor: pointer;\n    color: var(--color-gray-900);\n    font-weight: 500;\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { useState, useRef, useLayoutEffect } from 'react'\~~nimport { noop as css } from '../../../../utils/noop-template'\~~n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n const [isExpanded, setIsExpanded] = useState(false)\n const [shouldTruncate, setShouldTruncate] = useState(false)\n const messageRef = useRef<HTMLParagraphElement>(null)\n\n useLayoutEffect(() => {\n if (messageRef.current) {\n setShouldTruncate(messageRef.current.scrollHeight > 200)\n }\n }, [errorMessage])\n\n return (\n <div className=\"nextjs__container_errors_wrapper\">\n <p\n ref={messageRef}\n id=\"nextjs__container_errors_desc\"\n className={`nextjs__container_errors_desc ${shouldTruncate && !isExpanded ? 'truncated' : ''}`}\n >\n {errorMessage}\n </p>\n {shouldTruncate && !isExpanded && (\n <>\n <div className=\"nextjs__container_errors_gradient_overlay\" />\n <button\n onClick={() => setIsExpanded(true)}\n className=\"nextjs__container_errors_expand_button\"\n aria-expanded={isExpanded}\n aria-controls=\"nextjs__container_errors_desc\"\n >\n Show More\n </button>\n </>\n )}\n </div>\n )\n}\n\nexport const styles = ~~css~~`\n .nextjs__container_errors_wrapper {\n position: relative;\n }\n\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: var(--size-1);\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-font);\n letter-spacing: -0.32px;\n line-height: var(--size-6);\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n\n .nextjs__container_errors_desc.truncated {\n max-height: 200px;\n overflow: hidden;\n }\n\n .nextjs__container_errors_gradient_overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 85px;\n background: linear-gradient(\n 180deg,\n rgba(250, 250, 250, 0) 0%,\n var(--color-background-200) 100%\n );\n }\n\n .nextjs__container_errors_expand_button {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n padding: 6px 8px;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: 999px;\n box-shadow:\n 0px 2px 2px var(--color-gray-alpha-100),\n 0px 8px 8px -8px var(--color-gray-alpha-100);\n font-size: 13px;\n cursor: pointer;\n color: var(--color-gray-900);\n font-weight: 500;\n }\n`\n"],"names":["ErrorMessage","styles","errorMessage","isExpanded","setIsExpanded","useState","shouldTruncate","setShouldTruncate","messageRef","useRef","useLayoutEffect","current","scrollHeight","div","className","p","ref","id","button","onClick","aria-expanded","aria-controls"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IASgBA~~,YAAY;eAAZA;;IAqCHC,MAAM;eAANA~~;;;;;uBA9CqC~~;~~8BACtB;;;;;;;;;;AAQrB~~,SAASD,aAAa,KAAmC;IAAnC,IAAA,EAAEE,YAAY,EAAqB,GAAnC;IAC3B,MAAM,CAACC,YAAYC,cAAc,GAAGC,IAAAA,eAAQ,EAAC;IAC7C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGF,IAAAA,eAAQ,EAAC;IACrD,MAAMG,aAAaC,IAAAA,aAAM,EAAuB;IAEhDC,IAAAA,sBAAe,EAAC;QACd,IAAIF,WAAWG,OAAO,EAAE;YACtBJ,kBAAkBC,WAAWG,OAAO,CAACC,YAAY,GAAG;QACtD;IACF,GAAG;QAACV;KAAa;IAEjB,qBACE,sBAACW;QAAIC,WAAU;;0BACb,qBAACC;gBACCC,KAAKR;gBACLS,IAAG;gBACHH,WAAW,AAAC,mCAAgCR,CAAAA,kBAAkB,CAACH,aAAa,cAAc,EAAC;0BAE1FD;;YAEFI,kBAAkB,CAACH,4BAClB;;kCACE,qBAACU;wBAAIC,WAAU;;kCACf,qBAACI;wBACCC,SAAS,IAAMf,cAAc;wBAC7BU,WAAU;wBACVM,iBAAejB;wBACfkB,iBAAc;kCACf;;;;;;AAOX;AAEO,MAAMpB,~~aAASqB,kBAAG~~"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { useState, useRef, useLayoutEffect } from 'react'\n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n const [isExpanded, setIsExpanded] = useState(false)\n const [shouldTruncate, setShouldTruncate] = useState(false)\n const messageRef = useRef<HTMLParagraphElement>(null)\n\n useLayoutEffect(() => {\n if (messageRef.current) {\n setShouldTruncate(messageRef.current.scrollHeight > 200)\n }\n }, [errorMessage])\n\n return (\n <div className=\"nextjs__container_errors_wrapper\">\n <p\n ref={messageRef}\n id=\"nextjs__container_errors_desc\"\n className={`nextjs__container_errors_desc ${shouldTruncate && !isExpanded ? 'truncated' : ''}`}\n >\n {errorMessage}\n </p>\n {shouldTruncate && !isExpanded && (\n <>\n <div className=\"nextjs__container_errors_gradient_overlay\" />\n <button\n onClick={() => setIsExpanded(true)}\n className=\"nextjs__container_errors_expand_button\"\n aria-expanded={isExpanded}\n aria-controls=\"nextjs__container_errors_desc\"\n >\n Show More\n </button>\n </>\n )}\n </div>\n )\n}\n\nexport const styles = `\n .nextjs__container_errors_wrapper {\n position: relative;\n }\n\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: var(--size-1);\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-font);\n letter-spacing: -0.32px;\n line-height: var(--size-6);\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n\n .nextjs__container_errors_desc.truncated {\n max-height: 200px;\n overflow: hidden;\n }\n\n .nextjs__container_errors_gradient_overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 85px;\n background: linear-gradient(\n 180deg,\n rgba(250, 250, 250, 0) 0%,\n var(--color-background-200) 100%\n );\n }\n\n .nextjs__container_errors_expand_button {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n padding: 6px 8px;\n background: var(--color-background-100);\n border: 1px solid var(--color-gray-alpha-400);\n border-radius: 999px;\n box-shadow:\n 0px 2px 2px var(--color-gray-alpha-100),\n 0px 8px 8px -8px var(--color-gray-alpha-100);\n font-size: 13px;\n cursor: pointer;\n color: var(--color-gray-900);\n font-weight: 500;\n }\n`\n"],"names":["ErrorMessage","styles","errorMessage","isExpanded","setIsExpanded","useState","shouldTruncate","setShouldTruncate","messageRef","useRef","useLayoutEffect","current","scrollHeight","div","className","p","ref","id","button","onClick","aria-expanded","aria-controls"],"mappings":";;;;;;;;;;;;;;;IAQgBA,YAAY;eAAZA;;IAqCHC,MAAM;eAANA;;;;uBA7CqC;AAQ3C,SAASD,aAAa,KAAmC;IAAnC,IAAA,EAAEE,YAAY,EAAqB,GAAnC;IAC3B,MAAM,CAACC,YAAYC,cAAc,GAAGC,IAAAA,eAAQ,EAAC;IAC7C,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGF,IAAAA,eAAQ,EAAC;IACrD,MAAMG,aAAaC,IAAAA,aAAM,EAAuB;IAEhDC,IAAAA,sBAAe,EAAC;QACd,IAAIF,WAAWG,OAAO,EAAE;YACtBJ,kBAAkBC,WAAWG,OAAO,CAACC,YAAY,GAAG;QACtD;IACF,GAAG;QAACV;KAAa;IAEjB,qBACE,sBAACW;QAAIC,WAAU;;0BACb,qBAACC;gBACCC,KAAKR;gBACLS,IAAG;gBACHH,WAAW,AAAC,mCAAgCR,CAAAA,kBAAkB,CAACH,aAAa,cAAc,EAAC;0BAE1FD;;YAEFI,kBAAkB,CAACH,4BAClB;;kCACE,qBAACU;wBAAIC,WAAU;;kCACf,qBAACI;wBACCC,SAAS,IAAMf,cAAc;wBAC7BU,WAAU;wBACVM,iBAAejB;wBACfkB,iBAAc;kCACf;;;;;;AAOX;AAEO,MAAMpB,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ export declare function ErrorOverlayBottomStack({ count, activeIdx, }: {
     count: number;
     activeIdx: number;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .layer1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .layer2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .layer1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .layer1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js CHANGED Viewed

@@ -20,18 +20,7 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .layer1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .layer2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .layer1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .layer1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayBottomStack(param) {
     let { count, activeIdx } = param;
     let stackCount = '0';
@@ -66,7 +55,7 @@ function ErrorOverlayBottomStack(param) {
         })
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .layer1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .layer2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .layer1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .layer1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["~~import~~ ~~{ noop as css } from '../../../../utils/noop-template'\n\nexport~~ function ErrorOverlayBottomStack({\n count,\n activeIdx,\n}: {\n count: number\n activeIdx: number\n}) {\n let stackCount = '0'\n\n if (count > 1) {\n stackCount = '1'\n }\n\n if (count > 2) {\n stackCount = '2'\n }\n\n if (activeIdx === 1) {\n stackCount = '1'\n }\n\n if (activeIdx > 1) {\n stackCount = '0'\n }\n\n return (\n <div aria-hidden className=\"error-overlay-bottom-stack\">\n <div className=\"stack\" data-stack-count={stackCount}>\n <div className=\"layer layer1\">1</div>\n <div className=\"layer layer2\">2</div>\n </div>\n </div>\n )\n}\n\nexport const styles = ~~css~~`\n .layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .layer1 {\n width: calc(100% - var(--size-6));\n }\n\n .layer2 {\n width: calc(100% - var(--size-12));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .layer {\n grid-area: 1 / 1;\n /* Hide /\n translate: 0 calc(var(--stack-layer-height) -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .layer1 {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .layer2 {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .layer1 {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .layer2 {\n box-shadow: var(--shadow);\n }\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .layer {\n border-color: var(--color-gray-400);\n }\n }\n`\n"],"names":["ErrorOverlayBottomStack","styles","count","activeIdx","stackCount","div","aria-hidden","className","data-stack-count"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IAEgBA~~,uBAAuB;eAAvBA;;IAmCHC,MAAM;eAANA~~;;;;;8BArCe;;;;;;;;;;AAErB~~,SAASD,wBAAwB,KAMvC;IANuC,IAAA,EACtCE,KAAK,EACLC,SAAS,EAIV,GANuC;IAOtC,IAAIC,aAAa;IAEjB,IAAIF,QAAQ,GAAG;QACbE,aAAa;IACf;IAEA,IAAIF,QAAQ,GAAG;QACbE,aAAa;IACf;IAEA,IAAID,cAAc,GAAG;QACnBC,aAAa;IACf;IAEA,IAAID,YAAY,GAAG;QACjBC,aAAa;IACf;IAEA,qBACE,qBAACC;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,sBAACF;YAAIE,WAAU;YAAQC,oBAAkBJ;;8BACvC,qBAACC;oBAAIE,WAAU;8BAAe;;8BAC9B,qBAACF;oBAAIE,WAAU;8BAAe;;;;;AAItC;AAEO,MAAMN,~~aAASQ,kBAAG~~"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["export function ErrorOverlayBottomStack({\n count,\n activeIdx,\n}: {\n count: number\n activeIdx: number\n}) {\n let stackCount = '0'\n\n if (count > 1) {\n stackCount = '1'\n }\n\n if (count > 2) {\n stackCount = '2'\n }\n\n if (activeIdx === 1) {\n stackCount = '1'\n }\n\n if (activeIdx > 1) {\n stackCount = '0'\n }\n\n return (\n <div aria-hidden className=\"error-overlay-bottom-stack\">\n <div className=\"stack\" data-stack-count={stackCount}>\n <div className=\"layer layer1\">1</div>\n <div className=\"layer layer2\">2</div>\n </div>\n </div>\n )\n}\n\nexport const styles = `\n .layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .layer1 {\n width: calc(100% - var(--size-6));\n }\n\n .layer2 {\n width: calc(100% - var(--size-12));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .layer {\n grid-area: 1 / 1;\n /* Hide /\n translate: 0 calc(var(--stack-layer-height) -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .layer1 {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .layer2 {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .layer1 {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .layer2 {\n box-shadow: var(--shadow);\n }\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .layer {\n border-color: var(--color-gray-400);\n }\n }\n`\n"],"names":["ErrorOverlayBottomStack","styles","count","activeIdx","stackCount","div","aria-hidden","className","data-stack-count"],"mappings":";;;;;;;;;;;;;;;IAAgBA,uBAAuB;eAAvBA;;IAmCHC,MAAM;eAANA;;;;AAnCN,SAASD,wBAAwB,KAMvC;IANuC,IAAA,EACtCE,KAAK,EACLC,SAAS,EAIV,GANuC;IAOtC,IAAIC,aAAa;IAEjB,IAAIF,QAAQ,GAAG;QACbE,aAAa;IACf;IAEA,IAAIF,QAAQ,GAAG;QACbE,aAAa;IACf;IAEA,IAAID,cAAc,GAAG;QACnBC,aAAa;IACf;IAEA,IAAID,YAAY,GAAG;QACjBC,aAAa;IACf;IAEA,qBACE,qBAACC;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,sBAACF;YAAIE,WAAU;YAAQC,oBAAkBJ;;8BACvC,qBAACC;oBAAIE,WAAU;8BAAe;;8BAC9B,qBAACF;oBAAIE,WAAU;8BAAe;;;;;AAItC;AAEO,MAAMN,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-feedback/error-feedback.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ interface ErrorFeedbackProps {
     className?: string;
 }
 export declare function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .error-feedback {\n    display: flex;\n    align-items: center;\n    gap: var(--size-gap);\n    white-space: nowrap;\n    color: var(--color-gray-900);\n  }\n\n  .error-feedback-thanks {\n    height: 24px;\n    display: flex;\n    align-items: center;\n    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n  }\n\n  .feedback-button {\n    background: none;\n    border: none;\n    border-radius: var(--rounded-md);\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  .feedback-button:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .feedback-button.voted {\n    background: var(--color-gray-alpha-200);\n  }\n\n  .thumbs-up-icon,\n  .thumbs-down-icon {\n    color: var(--color-gray-900);\n  }\n";
 export {};

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-feedback/error-feedback.js CHANGED Viewed

@@ -20,22 +20,11 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _thumbsup = require("../../../../icons/thumbs/thumbs-up");
 const _thumbsdown = require("../../../../icons/thumbs/thumbs-down");
-const _nooptemplate = require("../../../../../utils/noop-template");
 const _cx = require("../../../../utils/cx");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .error-feedback {\n    display: flex;\n    align-items: center;\n    gap: var(--size-gap);\n    white-space: nowrap;\n    color: var(--color-gray-900);\n  }\n\n  .error-feedback-thanks {\n    height: 24px;\n    display: flex;\n    align-items: center;\n    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n  }\n\n  .feedback-button {\n    background: none;\n    border: none;\n    border-radius: var(--rounded-md);\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  .feedback-button:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .feedback-button.voted {\n    background: var(--color-gray-alpha-200);\n  }\n\n  .thumbs-up-icon,\n  .thumbs-down-icon {\n    color: var(--color-gray-900);\n  }\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorFeedback(param) {
     let { errorCode, className } = param;
     const [votedMap, setVotedMap] = (0, _react.useState)({});
@@ -102,7 +91,7 @@ function ErrorFeedback(param) {
         })
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject());
+const styles = "\n  .error-feedback {\n    display: flex;\n    align-items: center;\n    gap: var(--size-gap);\n    white-space: nowrap;\n    color: var(--color-gray-900);\n  }\n\n  .error-feedback-thanks {\n    height: 24px;\n    display: flex;\n    align-items: center;\n    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n  }\n\n  .feedback-button {\n    background: none;\n    border: none;\n    border-radius: var(--rounded-md);\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  .feedback-button:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .feedback-button.voted {\n    background: var(--color-gray-alpha-200);\n  }\n\n  .thumbs-up-icon,\n  .thumbs-down-icon {\n    color: var(--color-gray-900);\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'\nimport { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'\nimport { ~~noop as css } from '../../../../../utils/noop-template'\nimport {~~ cx } from '../../../../utils/cx'\n\ninterface ErrorFeedbackProps {\n errorCode: string\n className?: string\n}\nexport function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {\n const [votedMap, setVotedMap] = useState<Record<string, boolean>>({})\n const voted = votedMap[errorCode]\n const hasVoted = voted !== undefined\n\n const handleFeedback = useCallback(\n async (wasHelpful: boolean) => {\n // Optimistically set feedback state without loading/error states to keep implementation simple\n setVotedMap((prev) => ({\n ...prev,\n [errorCode]: wasHelpful,\n }))\n\n try {\n const response = await fetch(\n `${process.env.__NEXT_ROUTER_BASEPATH \|\| ''}/__nextjs_error_feedback?${new URLSearchParams(\n {\n errorCode,\n wasHelpful: wasHelpful.toString(),\n }\n )}`\n )\n\n if (!response.ok) {\n // Handle non-2xx HTTP responses here if needed\n console.error('Failed to record feedback on the server.')\n }\n } catch (error) {\n console.error('Failed to record feedback:', error)\n }\n },\n [errorCode]\n )\n\n return (\n <div\n className={cx('error-feedback', className)}\n role=\"region\"\n aria-label=\"Error feedback\"\n >\n {hasVoted ? (\n <p className=\"error-feedback-thanks\" role=\"status\" aria-live=\"polite\">\n Thanks for your feedback!\n </p>\n ) : (\n <>\n <p>Was this helpful?</p>\n <button\n aria-label=\"Mark as helpful\"\n onClick={() => handleFeedback(true)}\n className={cx('feedback-button', voted === true && 'voted')}\n type=\"button\"\n >\n <ThumbsUp aria-hidden=\"true\" />\n </button>\n <button\n aria-label=\"Mark as not helpful\"\n onClick={() => handleFeedback(false)}\n className={cx('feedback-button', voted === false && 'voted')}\n type=\"button\"\n >\n <ThumbsDown\n aria-hidden=\"true\"\n // Optical alignment\n style={{\n translate: '1px 1px',\n }}\n />\n </button>\n </>\n )}\n </div>\n )\n}\n\nexport const styles = ~~css~~`\n .error-feedback {\n display: flex;\n align-items: center;\n gap: var(--size-gap);\n white-space: nowrap;\n color: var(--color-gray-900);\n }\n\n .error-feedback-thanks {\n height: 24px;\n display: flex;\n align-items: center;\n padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n }\n\n .feedback-button {\n background: none;\n border: none;\n border-radius: var(--rounded-md);\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:active {\n background: var(--color-gray-alpha-200);\n }\n }\n\n .feedback-button:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n .feedback-button.voted {\n background: var(--color-gray-alpha-200);\n }\n\n .thumbs-up-icon,\n .thumbs-down-icon {\n color: var(--color-gray-900);\n }\n`\n"],"names":["ErrorFeedback","styles","errorCode","className","votedMap","setVotedMap","useState","voted","hasVoted","undefined","handleFeedback","useCallback","wasHelpful","prev","response","fetch","process","env","__NEXT_ROUTER_BASEPATH","URLSearchParams","toString","ok","console","error","div","cx","role","aria-label","p","aria-live","button","onClick","type","ThumbsUp","aria-hidden","ThumbsDown","style","translate"~~,"css"~~],"mappings":";;;;;;;;;;;;;;;~~IAUgBA~~,aAAa;eAAbA;;IA2EHC,MAAM;eAANA~~;;;;;uBArFyB~~;0BACb;4BACE;~~8BACC~~;~~oBACT;;;;;;;;;;~~AAMZ,SAASD,cAAc,KAA4C;IAA5C,IAAA,EAAEE,SAAS,EAAEC,SAAS,EAAsB,GAA5C;IAC5B,MAAM,CAACC,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAA0B,CAAC;IACnE,MAAMC,QAAQH,QAAQ,CAACF,UAAU;IACjC,MAAMM,WAAWD,UAAUE;IAE3B,MAAMC,iBAAiBC,IAAAA,kBAAW,EAChC,OAAOC;QACL,+FAA+F;QAC/FP,YAAY,CAACQ,OAAU,CAAA;gBACrB,GAAGA,IAAI;gBACP,CAACX,UAAU,EAAEU;YACf,CAAA;QAEA,IAAI;YACF,MAAME,WAAW,MAAMC,MACrB,AAAGC,CAAAA,QAAQC,GAAG,CAACC,sBAAsB,IAAI,EAAC,IAAE,8BAA2B,IAAIC,gBACzE;gBACEjB;gBACAU,YAAYA,WAAWQ,QAAQ;YACjC;YAIJ,IAAI,CAACN,SAASO,EAAE,EAAE;gBAChB,+CAA+C;gBAC/CC,QAAQC,KAAK,CAAC;YAChB;QACF,EAAE,OAAOA,OAAO;YACdD,QAAQC,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GACA;QAACrB;KAAU;IAGb,qBACE,qBAACsB;QACCrB,WAAWsB,IAAAA,MAAE,EAAC,kBAAkBtB;QAChCuB,MAAK;QACLC,cAAW;kBAEVnB,yBACC,qBAACoB;YAAEzB,WAAU;YAAwBuB,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,qBAACD;8BAAE;;8BACH,qBAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMrB,eAAe;oBAC9BP,WAAWsB,IAAAA,MAAE,EAAC,mBAAmBlB,UAAU,QAAQ;oBACnDyB,MAAK;8BAEL,cAAA,qBAACC,kBAAQ;wBAACC,eAAY;;;8BAExB,qBAACJ;oBACCH,cAAW;oBACXI,SAAS,IAAMrB,eAAe;oBAC9BP,WAAWsB,IAAAA,MAAE,EAAC,mBAAmBlB,UAAU,SAAS;oBACpDyB,MAAK;8BAEL,cAAA,qBAACG,sBAAU;wBACTD,eAAY;wBACZ,oBAAoB;wBACpBE,OAAO;4BACLC,WAAW;wBACb;;;;;;AAOd;AAEO,MAAMpC,~~aAASqC,kBAAG~~"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'\nimport { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'\nimport { cx } from '../../../../utils/cx'\n\ninterface ErrorFeedbackProps {\n errorCode: string\n className?: string\n}\nexport function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {\n const [votedMap, setVotedMap] = useState<Record<string, boolean>>({})\n const voted = votedMap[errorCode]\n const hasVoted = voted !== undefined\n\n const handleFeedback = useCallback(\n async (wasHelpful: boolean) => {\n // Optimistically set feedback state without loading/error states to keep implementation simple\n setVotedMap((prev) => ({\n ...prev,\n [errorCode]: wasHelpful,\n }))\n\n try {\n const response = await fetch(\n `${process.env.__NEXT_ROUTER_BASEPATH \|\| ''}/__nextjs_error_feedback?${new URLSearchParams(\n {\n errorCode,\n wasHelpful: wasHelpful.toString(),\n }\n )}`\n )\n\n if (!response.ok) {\n // Handle non-2xx HTTP responses here if needed\n console.error('Failed to record feedback on the server.')\n }\n } catch (error) {\n console.error('Failed to record feedback:', error)\n }\n },\n [errorCode]\n )\n\n return (\n <div\n className={cx('error-feedback', className)}\n role=\"region\"\n aria-label=\"Error feedback\"\n >\n {hasVoted ? (\n <p className=\"error-feedback-thanks\" role=\"status\" aria-live=\"polite\">\n Thanks for your feedback!\n </p>\n ) : (\n <>\n <p>Was this helpful?</p>\n <button\n aria-label=\"Mark as helpful\"\n onClick={() => handleFeedback(true)}\n className={cx('feedback-button', voted === true && 'voted')}\n type=\"button\"\n >\n <ThumbsUp aria-hidden=\"true\" />\n </button>\n <button\n aria-label=\"Mark as not helpful\"\n onClick={() => handleFeedback(false)}\n className={cx('feedback-button', voted === false && 'voted')}\n type=\"button\"\n >\n <ThumbsDown\n aria-hidden=\"true\"\n // Optical alignment\n style={{\n translate: '1px 1px',\n }}\n />\n </button>\n </>\n )}\n </div>\n )\n}\n\nexport const styles = `\n .error-feedback {\n display: flex;\n align-items: center;\n gap: var(--size-gap);\n white-space: nowrap;\n color: var(--color-gray-900);\n }\n\n .error-feedback-thanks {\n height: 24px;\n display: flex;\n align-items: center;\n padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n }\n\n .feedback-button {\n background: none;\n border: none;\n border-radius: var(--rounded-md);\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &:focus {\n outline: var(--focus-ring);\n }\n\n &:hover {\n background: var(--color-gray-alpha-100);\n }\n\n &:active {\n background: var(--color-gray-alpha-200);\n }\n }\n\n .feedback-button:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n .feedback-button.voted {\n background: var(--color-gray-alpha-200);\n }\n\n .thumbs-up-icon,\n .thumbs-down-icon {\n color: var(--color-gray-900);\n }\n`\n"],"names":["ErrorFeedback","styles","errorCode","className","votedMap","setVotedMap","useState","voted","hasVoted","undefined","handleFeedback","useCallback","wasHelpful","prev","response","fetch","process","env","__NEXT_ROUTER_BASEPATH","URLSearchParams","toString","ok","console","error","div","cx","role","aria-label","p","aria-live","button","onClick","type","ThumbsUp","aria-hidden","ThumbsDown","style","translate"],"mappings":";;;;;;;;;;;;;;;IASgBA,aAAa;eAAbA;;IA2EHC,MAAM;eAANA;;;;uBApFyB;0BACb;4BACE;oBACR;AAMZ,SAASD,cAAc,KAA4C;IAA5C,IAAA,EAAEE,SAAS,EAAEC,SAAS,EAAsB,GAA5C;IAC5B,MAAM,CAACC,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAA0B,CAAC;IACnE,MAAMC,QAAQH,QAAQ,CAACF,UAAU;IACjC,MAAMM,WAAWD,UAAUE;IAE3B,MAAMC,iBAAiBC,IAAAA,kBAAW,EAChC,OAAOC;QACL,+FAA+F;QAC/FP,YAAY,CAACQ,OAAU,CAAA;gBACrB,GAAGA,IAAI;gBACP,CAACX,UAAU,EAAEU;YACf,CAAA;QAEA,IAAI;YACF,MAAME,WAAW,MAAMC,MACrB,AAAGC,CAAAA,QAAQC,GAAG,CAACC,sBAAsB,IAAI,EAAC,IAAE,8BAA2B,IAAIC,gBACzE;gBACEjB;gBACAU,YAAYA,WAAWQ,QAAQ;YACjC;YAIJ,IAAI,CAACN,SAASO,EAAE,EAAE;gBAChB,+CAA+C;gBAC/CC,QAAQC,KAAK,CAAC;YAChB;QACF,EAAE,OAAOA,OAAO;YACdD,QAAQC,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GACA;QAACrB;KAAU;IAGb,qBACE,qBAACsB;QACCrB,WAAWsB,IAAAA,MAAE,EAAC,kBAAkBtB;QAChCuB,MAAK;QACLC,cAAW;kBAEVnB,yBACC,qBAACoB;YAAEzB,WAAU;YAAwBuB,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,qBAACD;8BAAE;;8BACH,qBAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMrB,eAAe;oBAC9BP,WAAWsB,IAAAA,MAAE,EAAC,mBAAmBlB,UAAU,QAAQ;oBACnDyB,MAAK;8BAEL,cAAA,qBAACC,kBAAQ;wBAACC,eAAY;;;8BAExB,qBAACJ;oBACCH,cAAW;oBACXI,SAAS,IAAMrB,eAAe;oBAC9BP,WAAWsB,IAAAA,MAAE,EAAC,mBAAmBlB,UAAU,SAAS;oBACpDyB,MAAK;8BAEL,cAAA,qBAACG,sBAAU;wBACTD,eAAY;wBACZ,oBAAoB;wBACpBE,OAAO;4BACLC,WAAW;wBACb;;;;;;AAOd;AAEO,MAAMpC,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-overlay-footer.d.ts CHANGED Viewed

@@ -3,4 +3,4 @@ export type ErrorOverlayFooterProps = {
     footerMessage: string | undefined;
 };
 export declare function ErrorOverlayFooter({ errorCode, footerMessage, }: ErrorOverlayFooterProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles: string;
+export declare const styles = "\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n\n    p {\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0;\n    }\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  \n  .error-feedback {\n    display: flex;\n    align-items: center;\n    gap: var(--size-gap);\n    white-space: nowrap;\n    color: var(--color-gray-900);\n  }\n\n  .error-feedback-thanks {\n    height: 24px;\n    display: flex;\n    align-items: center;\n    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n  }\n\n  .feedback-button {\n    background: none;\n    border: none;\n    border-radius: var(--rounded-md);\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n\n    &:focus {\n      outline: var(--focus-ring);\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  .feedback-button:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .feedback-button.voted {\n    background: var(--color-gray-alpha-200);\n  }\n\n  .thumbs-up-icon,\n  .thumbs-down-icon {\n    color: var(--color-gray-900);\n  }\n\n";

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

@@ -20,20 +20,8 @@ _export(exports, {
         return styles;
     }
 });
-const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _errorfeedback = require("./error-feedback/error-feedback");
-const _nooptemplate = require("../../../../utils/noop-template");
-function _templateObject() {
-    const data = _tagged_template_literal_loose._([
-        "\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n\n    p {\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0;\n    }\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ",
-        "\n"
-    ]);
-    _templateObject = function() {
-        return data;
-    };
-    return data;
-}
 function ErrorOverlayFooter(param) {
     let { errorCode, footerMessage } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("footer", {
@@ -50,7 +38,7 @@ function ErrorOverlayFooter(param) {
         ]
     });
 }
-const styles = (0, _nooptemplate.noop)(_templateObject(), _errorfeedback.styles);
+const styles = "\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n\n    p {\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0;\n    }\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  " + _errorfeedback.styles + "\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });