next 15.2.0-canary.44 → 15.2.0-canary.45

package/dist/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../../helpers/noop-template'\n\nfunction useCopyLegacy(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n    | { state: 'pending' }\n\n  // This would be simpler with useActionState but we need to support React 18 here.\n  // React 18 also doesn't have async transitions.\n  const [copyState, dispatch] = React.useReducer(\n    (\n      state: CopyState,\n      action:\n        | { type: 'reset' | 'copied' | 'copying' }\n        | { type: 'error'; error: unknown }\n    ): CopyState => {\n      if (action.type === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action.type === 'copied') {\n        return { state: 'success' }\n      }\n      if (action.type === 'copying') {\n        return { state: 'pending' }\n      }\n      if (action.type === 'error') {\n        return { state: 'error', error: action.error }\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n  function copy() {\n    if (isPending) {\n      return\n    }\n\n    if (!navigator.clipboard) {\n      dispatch({\n        type: 'error',\n        error: new Error('Copy to clipboard is not supported in this browser'),\n      })\n    } else {\n      dispatch({ type: 'copying' })\n      navigator.clipboard.writeText(content).then(\n        () => {\n          dispatch({ type: 'copied' })\n        },\n        (error) => {\n          dispatch({ type: 'error', error })\n        }\n      )\n    }\n  }\n  const reset = React.useCallback(() => {\n    dispatch({ type: 'reset' })\n  }, [])\n\n  const isPending = copyState.state === 'pending'\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nfunction useCopyModern(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n\n  const [copyState, dispatch, isPending] = React.useActionState(\n    (\n      state: CopyState,\n      action: 'reset' | 'copy'\n    ): CopyState | Promise<CopyState> => {\n      if (action === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action === 'copy') {\n        if (!navigator.clipboard) {\n          return {\n            state: 'error',\n            error: new Error(\n              'Copy to clipboard is not supported in this browser'\n            ),\n          }\n        }\n        return navigator.clipboard.writeText(content).then(\n          () => {\n            return { state: 'success' }\n          },\n          (error) => {\n            return { state: 'error', error }\n          }\n        )\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n\n  function copy() {\n    React.startTransition(() => {\n      dispatch('copy')\n    })\n  }\n\n  const reset = React.useCallback(() => {\n    dispatch('reset')\n  }, [\n    // TODO: `dispatch` from `useActionState` is not reactive.\n    // Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.\n    dispatch,\n  ])\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nconst useCopy =\n  typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy\n\nexport function CopyButton({\n  actionLabel,\n  successLabel,\n  content,\n  icon,\n  disabled,\n  ...props\n}: React.HTMLProps<HTMLButtonElement> & {\n  actionLabel: string\n  successLabel: string\n  content: string\n  icon?: React.ReactNode\n}) {\n  const [copyState, copy, reset, isPending] = useCopy(content)\n\n  const error = copyState.state === 'error' ? copyState.error : null\n  React.useEffect(() => {\n    if (error !== null) {\n      // Additional console.error to get the stack.\n      console.error(error)\n    }\n  }, [error])\n  React.useEffect(() => {\n    if (copyState.state === 'success') {\n      const timeoutId = setTimeout(() => {\n        reset()\n      }, 2000)\n\n      return () => {\n        clearTimeout(timeoutId)\n      }\n    }\n  }, [isPending, copyState.state, reset])\n  const isDisabled = isPending || disabled\n  const label = copyState.state === 'success' ? successLabel : actionLabel\n\n  // Assign default icon\n  const renderedIcon =\n    copyState.state === 'success' ? <CopySuccessIcon /> : icon || <CopyIcon />\n\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={label}\n      aria-label={label}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-nextjs-data-runtime-error-copy-button\n      className={`${props.className || ''} nextjs-data-runtime-error-copy-button nextjs-data-runtime-error-copy-button--${copyState.state}`}\n      onClick={() => {\n        if (!isDisabled) {\n          copy()\n        }\n      }}\n    >\n      {renderedIcon}\n      {copyState.state === 'error' ? ` ${copyState.error}` : null}\n    </button>\n  )\n}\n\nfunction CopyIcon() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"error-overlay-toolbar-button-icon\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nfunction CopySuccessIcon() {\n  return (\n    <svg\n      height=\"16\"\n      xlinkTitle=\"copied\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\" />\n    </svg>\n  )\n}\n\n// TODO(jiwon): Is not used anymore, should we decouple the styles?\nexport const COPY_BUTTON_STYLES = css`\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n`\n"],"names":["COPY_BUTTON_STYLES","CopyButton","useCopyLegacy","content","copyState","dispatch","React","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","actionLabel","successLabel","icon","disabled","props","useEffect","console","timeoutId","setTimeout","clearTimeout","isDisabled","label","renderedIcon","CopySuccessIcon","CopyIcon","button","title","aria-label","aria-disabled","data-nextjs-data-runtime-error-copy-button","className","onClick","svg","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","stroke","css"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/copy-button/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../../helpers/noop-template'\nimport { cx } from '../../helpers/cx'\n\nfunction useCopyLegacy(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n    | { state: 'pending' }\n\n  // This would be simpler with useActionState but we need to support React 18 here.\n  // React 18 also doesn't have async transitions.\n  const [copyState, dispatch] = React.useReducer(\n    (\n      state: CopyState,\n      action:\n        | { type: 'reset' | 'copied' | 'copying' }\n        | { type: 'error'; error: unknown }\n    ): CopyState => {\n      if (action.type === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action.type === 'copied') {\n        return { state: 'success' }\n      }\n      if (action.type === 'copying') {\n        return { state: 'pending' }\n      }\n      if (action.type === 'error') {\n        return { state: 'error', error: action.error }\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n  function copy() {\n    if (isPending) {\n      return\n    }\n\n    if (!navigator.clipboard) {\n      dispatch({\n        type: 'error',\n        error: new Error('Copy to clipboard is not supported in this browser'),\n      })\n    } else {\n      dispatch({ type: 'copying' })\n      navigator.clipboard.writeText(content).then(\n        () => {\n          dispatch({ type: 'copied' })\n        },\n        (error) => {\n          dispatch({ type: 'error', error })\n        }\n      )\n    }\n  }\n  const reset = React.useCallback(() => {\n    dispatch({ type: 'reset' })\n  }, [])\n\n  const isPending = copyState.state === 'pending'\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nfunction useCopyModern(content: string) {\n  type CopyState =\n    | {\n        state: 'initial'\n      }\n    | {\n        state: 'error'\n        error: unknown\n      }\n    | { state: 'success' }\n\n  const [copyState, dispatch, isPending] = React.useActionState(\n    (\n      state: CopyState,\n      action: 'reset' | 'copy'\n    ): CopyState | Promise<CopyState> => {\n      if (action === 'reset') {\n        return { state: 'initial' }\n      }\n      if (action === 'copy') {\n        if (!navigator.clipboard) {\n          return {\n            state: 'error',\n            error: new Error(\n              'Copy to clipboard is not supported in this browser'\n            ),\n          }\n        }\n        return navigator.clipboard.writeText(content).then(\n          () => {\n            return { state: 'success' }\n          },\n          (error) => {\n            return { state: 'error', error }\n          }\n        )\n      }\n      return state\n    },\n    {\n      state: 'initial',\n    }\n  )\n\n  function copy() {\n    React.startTransition(() => {\n      dispatch('copy')\n    })\n  }\n\n  const reset = React.useCallback(() => {\n    dispatch('reset')\n  }, [\n    // TODO: `dispatch` from `useActionState` is not reactive.\n    // Remove from dependencies once https://github.com/facebook/react/pull/29665 is released.\n    dispatch,\n  ])\n\n  return [copyState, copy, reset, isPending] as const\n}\n\nconst useCopy =\n  typeof React.useActionState === 'function' ? useCopyModern : useCopyLegacy\n\nexport function CopyButton({\n  actionLabel,\n  successLabel,\n  content,\n  icon,\n  disabled,\n  ...props\n}: React.HTMLProps<HTMLButtonElement> & {\n  actionLabel: string\n  successLabel: string\n  content: string\n  icon?: React.ReactNode\n}) {\n  const [copyState, copy, reset, isPending] = useCopy(content)\n\n  const error = copyState.state === 'error' ? copyState.error : null\n  React.useEffect(() => {\n    if (error !== null) {\n      // Additional console.error to get the stack.\n      console.error(error)\n    }\n  }, [error])\n  React.useEffect(() => {\n    if (copyState.state === 'success') {\n      const timeoutId = setTimeout(() => {\n        reset()\n      }, 2000)\n\n      return () => {\n        clearTimeout(timeoutId)\n      }\n    }\n  }, [isPending, copyState.state, reset])\n  const isDisabled = isPending || disabled\n  const label = copyState.state === 'success' ? successLabel : actionLabel\n\n  // Assign default icon\n  const renderedIcon =\n    copyState.state === 'success' ? <CopySuccessIcon /> : icon || <CopyIcon />\n\n  return (\n    <button\n      {...props}\n      type=\"button\"\n      title={label}\n      aria-label={label}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-nextjs-data-runtime-error-copy-button\n      className={cx(\n        props.className,\n        'nextjs-data-runtime-error-copy-button',\n        `nextjs-data-runtime-error-copy-button--${copyState.state}`\n      )}\n      onClick={() => {\n        if (!isDisabled) {\n          copy()\n        }\n      }}\n    >\n      {renderedIcon}\n      {copyState.state === 'error' ? ` ${copyState.error}` : null}\n    </button>\n  )\n}\n\nfunction CopyIcon() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"error-overlay-toolbar-button-icon\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nfunction CopySuccessIcon() {\n  return (\n    <svg\n      height=\"16\"\n      xlinkTitle=\"copied\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n    >\n      <path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\" />\n    </svg>\n  )\n}\n\n// TODO(jiwon): Is not used anymore, should we decouple the styles?\nexport const COPY_BUTTON_STYLES = css`\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n`\n"],"names":["COPY_BUTTON_STYLES","CopyButton","useCopyLegacy","content","copyState","dispatch","React","useReducer","state","action","type","error","copy","isPending","navigator","clipboard","Error","writeText","then","reset","useCallback","useCopyModern","useActionState","startTransition","useCopy","actionLabel","successLabel","icon","disabled","props","useEffect","console","timeoutId","setTimeout","clearTimeout","isDisabled","label","renderedIcon","CopySuccessIcon","CopyIcon","button","title","aria-label","aria-disabled","data-nextjs-data-runtime-error-copy-button","className","cx","onClick","svg","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d","xlinkTitle","stroke","css"],"mappings":"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"}

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

@@ -12,7 +12,7 @@ const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_
 const _nooptemplate = require("../../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n  }\n\n  /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    border: none;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog-body]:has(~ [data-nextjs-dialog-footer]) {\n    margin-bottom: calc(var(--next-dialog-footer-height) + 2px);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    padding: var(--size-4);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    width: 100%;\n    /* We make this element absolute to fix it to the bottom during the height transition */\n    position: absolute;\n    bottom: 0;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      height: 100%;\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n"
+        "\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n  }\n\n  /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    border: none;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog-body]:has(~ [data-nextjs-dialog-footer]) {\n    margin-bottom: calc(var(--next-dialog-footer-height) + 2px);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    padding: var(--size-4);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    width: 100%;\n    /* We make this element absolute to fix it to the bottom during the height transition */\n    position: absolute;\n    bottom: 0;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      height: 100%;\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n"
     ]);
     _templateObject = function() {
         return data;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nconst styles = css`\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n  }\n\n  /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    border: none;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog-body]:has(~ [data-nextjs-dialog-footer]) {\n    margin-bottom: calc(var(--next-dialog-footer-height) + 2px);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    padding: var(--size-4);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    width: 100%;\n    /* We make this element absolute to fix it to the bottom during the height transition */\n    position: absolute;\n    bottom: 0;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      height: 100%;\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n`\n\nexport { styles }\n"],"names":["styles","css"],"mappings":";;;;+BA6GSA;;;eAAAA;;;;8BA7GmB;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/dialog/styles.ts"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nconst styles = css`\n  [data-nextjs-dialog-root] {\n    --next-dialog-radius: var(--rounded-xl);\n    --next-dialog-footer-height: 48px;\n    --next-dialog-max-width: 960px;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-height: calc(100% - 56px);\n    max-width: var(--next-dialog-max-width);\n    margin-right: auto;\n    margin-left: auto;\n    scale: 0.98;\n    opacity: 0;\n    transition-property: scale, opacity;\n    transition-duration: var(--transition-duration);\n    transition-timing-function: var(--timing-overlay);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  [data-nextjs-dialog] {\n    outline: none;\n  }\n\n  /* Place overflow: hidden on this so we can break out from [data-nextjs-dialog] */\n  [data-nextjs-dialog-sizer] {\n    overflow: hidden;\n    border-radius: inherit;\n  }\n\n  [data-nextjs-dialog-backdrop] {\n    opacity: 0;\n    transition: opacity var(--transition-duration) var(--timing-overlay);\n  }\n\n  [data-nextjs-dialog-overlay][data-rendered='true']\n    [data-nextjs-dialog-backdrop] {\n    opacity: 1;\n  }\n\n  [data-nextjs-dialog-content] {\n    border: none;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n\n  /* Account for the footer height, when present */\n  [data-nextjs-dialog-body]:has(~ [data-nextjs-dialog-footer]) {\n    margin-bottom: calc(var(--next-dialog-footer-height) + 2px);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    padding: var(--size-4);\n  }\n\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  [data-nextjs-dialog-footer] {\n    width: 100%;\n    /* We make this element absolute to fix it to the bottom during the height transition */\n    position: absolute;\n    bottom: 0;\n    min-height: var(--next-dialog-footer-height);\n    border-radius: 0 0 var(--next-dialog-radius) var(--next-dialog-radius);\n    overflow: hidden;\n\n    > * {\n      height: 100%;\n    }\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 540px;\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog-root] {\n      --next-dialog-max-width: 960px;\n    }\n  }\n`\n\nexport { styles }\n"],"names":["styles","css"],"mappings":";;;;+BA8GSA;;;eAAAA;;;;8BA9GmB;;;;;;;;;;AAE5B,MAAMA,aAASC,kBAAG"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.js

@@ -24,6 +24,7 @@ const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_
 const _jsxruntime = require("react/jsx-runtime");
 const _dialogheader = require("../../dialog/dialog-header");
 const _nooptemplate = require("../../../helpers/noop-template");
+const _cx = require("../../../helpers/cx");
 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\n  .nextjs-error-overlay-dialog-header-turbopack-background {\n    background-image: linear-gradient(\n      10deg,\n      var(--color-background-100) 60%,\n      var(--color-turbopack-background-red) 75%,\n      var(--color-turbopack-background-blue) 100%\n    );\n  }\n"
@@ -36,7 +37,7 @@ function _templateObject() {
 function ErrorOverlayDialogHeader(param) {
     let { children, isTurbopack } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dialogheader.DialogHeader, {
-        className: "nextjs-container-errors-header " + (isTurbopack ? 'nextjs-error-overlay-dialog-header-turbopack-background' : ''),
+        className: (0, _cx.cx)('nextjs-container-errors-header', isTurbopack && 'nextjs-error-overlay-dialog-header-turbopack-background'),
         children: children
     });
 }

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx"],"sourcesContent":["import { DialogHeader } from '../../dialog/dialog-header'\nimport { noop as css } from '../../../helpers/noop-template'\n\ntype ErrorOverlayDialogHeaderProps = {\n  children?: React.ReactNode\n  isTurbopack?: boolean\n}\n\nexport function ErrorOverlayDialogHeader({\n  children,\n  isTurbopack,\n}: ErrorOverlayDialogHeaderProps) {\n  return (\n    <DialogHeader\n      className={`nextjs-container-errors-header ${\n        isTurbopack\n          ? 'nextjs-error-overlay-dialog-header-turbopack-background'\n          : ''\n      }`}\n    >\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  .nextjs-error-overlay-dialog-header-turbopack-background {\n    background-image: linear-gradient(\n      10deg,\n      var(--color-background-100) 60%,\n      var(--color-turbopack-background-red) 75%,\n      var(--color-turbopack-background-blue) 100%\n    );\n  }\n`\n"],"names":["DIALOG_HEADER_STYLES","ErrorOverlayDialogHeader","children","isTurbopack","DialogHeader","className","css"],"mappings":";;;;;;;;;;;;;;;IAyBaA,oBAAoB;eAApBA;;IAjBGC,wBAAwB;eAAxBA;;;;;8BARa;8BACD;;;;;;;;;;AAOrB,SAASA,yBAAyB,KAGT;IAHS,IAAA,EACvCC,QAAQ,EACRC,WAAW,EACmB,GAHS;IAIvC,qBACE,qBAACC,0BAAY;QACXC,WAAW,AAAC,oCACVF,CAAAA,cACI,4DACA,EAAC;kBAGND;;AAGP;AAEO,MAAMF,2BAAuBM,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dialog/header.tsx"],"sourcesContent":["import { DialogHeader } from '../../dialog/dialog-header'\nimport { noop as css } from '../../../helpers/noop-template'\nimport { cx } from '../../../helpers/cx'\n\ntype ErrorOverlayDialogHeaderProps = {\n  children?: React.ReactNode\n  isTurbopack?: boolean\n}\n\nexport function ErrorOverlayDialogHeader({\n  children,\n  isTurbopack,\n}: ErrorOverlayDialogHeaderProps) {\n  return (\n    <DialogHeader\n      className={cx(\n        'nextjs-container-errors-header',\n        isTurbopack && 'nextjs-error-overlay-dialog-header-turbopack-background'\n      )}\n    >\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  .nextjs-error-overlay-dialog-header-turbopack-background {\n    background-image: linear-gradient(\n      10deg,\n      var(--color-background-100) 60%,\n      var(--color-turbopack-background-red) 75%,\n      var(--color-turbopack-background-blue) 100%\n    );\n  }\n`\n"],"names":["DIALOG_HEADER_STYLES","ErrorOverlayDialogHeader","children","isTurbopack","DialogHeader","className","cx","css"],"mappings":";;;;;;;;;;;;;;;IAyBaA,oBAAoB;eAApBA;;IAhBGC,wBAAwB;eAAxBA;;;;;8BATa;8BACD;oBACT;;;;;;;;;;AAOZ,SAASA,yBAAyB,KAGT;IAHS,IAAA,EACvCC,QAAQ,EACRC,WAAW,EACmB,GAHS;IAIvC,qBACE,qBAACC,0BAAY;QACXC,WAAWC,IAAAA,MAAE,EACX,kCACAH,eAAe;kBAGhBD;;AAGP;AAEO,MAAMF,2BAAuBO,kBAAG"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.js

@@ -26,6 +26,7 @@ const _react = require("react");
 const _thumbsup = require("../../../../icons/thumbs/thumbs-up");
 const _thumbsdown = require("../../../../icons/thumbs/thumbs-down");
 const _nooptemplate = require("../../../../helpers/noop-template");
+const _cx = require("../../../../helpers/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"
@@ -62,7 +63,7 @@ function ErrorFeedback(param) {
         errorCode
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "error-feedback" + (className ? " " + className : ''),
+        className: (0, _cx.cx)('error-feedback', className),
         role: "region",
         "aria-label": "Error feedback",
         children: hasVoted ? /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
@@ -78,7 +79,7 @@ function ErrorFeedback(param) {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                     "aria-label": "Mark as helpful",
                     onClick: ()=>handleFeedback(true),
-                    className: "feedback-button " + (voted === true ? 'voted' : ''),
+                    className: (0, _cx.cx)('feedback-button', voted === true && 'voted'),
                     type: "button",
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_thumbsup.ThumbsUp, {
                         "aria-hidden": "true"
@@ -87,7 +88,7 @@ function ErrorFeedback(param) {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                     "aria-label": "Mark as not helpful",
                     onClick: ()=>handleFeedback(false),
-                    className: "feedback-button " + (voted === false ? 'voted' : ''),
+                    className: (0, _cx.cx)('feedback-button', voted === false && 'voted'),
                     type: "button",
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_thumbsdown.ThumbsDown, {
                         "aria-hidden": "true",

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/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 '../../../../helpers/noop-template'\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={`error-feedback${className ? ` ${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={`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={`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","role","aria-label","p","aria-live","button","onClick","type","ThumbsUp","aria-hidden","ThumbsDown","style","translate","css"],"mappings":";;;;;;;;;;;;;;;IASgBA,aAAa;eAAbA;;IA2EHC,MAAM;eAANA;;;;;uBApFyB;0BACb;4BACE;8BACC;;;;;;;;;;AAMrB,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,WAAW,AAAC,mBAAgBA,CAAAA,YAAY,AAAC,MAAGA,YAAc,EAAC;QAC3DsB,MAAK;QACLC,cAAW;kBAEVlB,yBACC,qBAACmB;YAAExB,WAAU;YAAwBsB,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,qBAACD;8BAAE;;8BACH,qBAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMpB,eAAe;oBAC9BP,WAAW,AAAC,qBAAkBI,CAAAA,UAAU,OAAO,UAAU,EAAC;oBAC1DwB,MAAK;8BAEL,cAAA,qBAACC,kBAAQ;wBAACC,eAAY;;;8BAExB,qBAACJ;oBACCH,cAAW;oBACXI,SAAS,IAAMpB,eAAe;oBAC9BP,WAAW,AAAC,qBAAkBI,CAAAA,UAAU,QAAQ,UAAU,EAAC;oBAC3DwB,MAAK;8BAEL,cAAA,qBAACG,sBAAU;wBACTD,eAAY;wBACZ,oBAAoB;wBACpBE,OAAO;4BACLC,WAAW;wBACb;;;;;;AAOd;AAEO,MAAMnC,aAASoC,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/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 '../../../../helpers/noop-template'\nimport { cx } from '../../../../helpers/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"}

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "Toast", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _cx = require("../../helpers/cx");
 const Toast = function Toast(param) {
     let { onClick, children, className, ...props } = param;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -19,7 +20,7 @@ const Toast = function Toast(param) {
             e.preventDefault();
             return onClick == null ? void 0 : onClick();
         },
-        className: "nextjs-toast" + (className ? ' ' + className : ''),
+        className: (0, _cx.cx)('nextjs-toast', className),
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             "data-nextjs-toast-wrapper": true,
             children: children

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type ToastProps = React.HTMLProps<HTMLDivElement> & {\n  children?: React.ReactNode\n  onClick?: () => void\n  className?: string\n}\n\nexport const Toast: React.FC<ToastProps> = function Toast({\n  onClick,\n  children,\n  className,\n  ...props\n}) {\n  return (\n    <div\n      {...props}\n      onClick={(e) => {\n        e.preventDefault()\n        return onClick?.()\n      }}\n      className={`nextjs-toast${className ? ' ' + className : ''}`}\n    >\n      <div data-nextjs-toast-wrapper>{children}</div>\n    </div>\n  )\n}\n"],"names":["Toast","onClick","children","className","props","div","e","preventDefault","data-nextjs-toast-wrapper"],"mappings":";;;;+BAQaA;;;eAAAA;;;;;iEARU;AAQhB,MAAMA,QAA8B,SAASA,MAAM,KAKzD;IALyD,IAAA,EACxDC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACJ,GALyD;IAMxD,qBACE,qBAACC;QACE,GAAGD,KAAK;QACTH,SAAS,CAACK;YACRA,EAAEC,cAAc;YAChB,OAAON,2BAAAA;QACT;QACAE,WAAW,AAAC,iBAAcA,CAAAA,YAAY,MAAMA,YAAY,EAAC;kBAEzD,cAAA,qBAACE;YAAIG,2BAAyB;sBAAEN;;;AAGtC"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/toast/toast.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cx } from '../../helpers/cx'\nexport type ToastProps = React.HTMLProps<HTMLDivElement> & {\n  children?: React.ReactNode\n  onClick?: () => void\n  className?: string\n}\n\nexport const Toast: React.FC<ToastProps> = function Toast({\n  onClick,\n  children,\n  className,\n  ...props\n}) {\n  return (\n    <div\n      {...props}\n      onClick={(e) => {\n        e.preventDefault()\n        return onClick?.()\n      }}\n      className={cx('nextjs-toast', className)}\n    >\n      <div data-nextjs-toast-wrapper>{children}</div>\n    </div>\n  )\n}\n"],"names":["Toast","onClick","children","className","props","div","e","preventDefault","cx","data-nextjs-toast-wrapper"],"mappings":";;;;+BAQaA;;;eAAAA;;;;;iEARU;oBACJ;AAOZ,MAAMA,QAA8B,SAASA,MAAM,KAKzD;IALyD,IAAA,EACxDC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACJ,GALyD;IAMxD,qBACE,qBAACC;QACE,GAAGD,KAAK;QACTH,SAAS,CAACK;YACRA,EAAEC,cAAc;YAChB,OAAON,2BAAAA;QACT;QACAE,WAAWK,IAAAA,MAAE,EAAC,gBAAgBL;kBAE9B,cAAA,qBAACE;YAAII,2BAAyB;sBAAEP;;;AAGtC"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.js

@@ -26,6 +26,7 @@ _export(exports, {
 });
 const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
+const _cx = require("../../helpers/cx");
 const _nooptemplate = require("../../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
@@ -43,10 +44,10 @@ function VersionStalenessInfo(param) {
     let { text, indicatorClass, title } = getStaleness(versionInfo);
     if (!text) return null;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-        className: "nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click " + (isTurbopack ? 'turbopack-border' : ''),
+        className: (0, _cx.cx)('nextjs-container-build-error-version-status', 'dialog-exclude-closing-from-outside-click', isTurbopack && 'turbopack-border'),
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(Eclipse, {
-                className: "version-staleness-indicator " + indicatorClass
+                className: (0, _cx.cx)('version-staleness-indicator', indicatorClass)
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                 "data-nextjs-version-checker": true,

package/dist/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'\nimport { noop as css } from '../../helpers/noop-template'\n\nexport function VersionStalenessInfo({\n  versionInfo,\n  isTurbopack,\n}: {\n  versionInfo: VersionInfo | undefined\n  isTurbopack?: boolean\n}) {\n  if (!versionInfo) return null\n  const { staleness } = versionInfo\n  let { text, indicatorClass, title } = getStaleness(versionInfo)\n\n  if (!text) return null\n\n  return (\n    <span\n      className={`nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click ${\n        isTurbopack ? 'turbopack-border' : ''\n      }`}\n    >\n      <Eclipse className={`version-staleness-indicator ${indicatorClass}`} />\n      <span data-nextjs-version-checker title={title}>\n        {text}\n      </span>{' '}\n      {staleness === 'fresh' ||\n      staleness === 'newer-than-npm' ||\n      staleness === 'unknown' ? null : (\n        <a\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          href=\"https://nextjs.org/docs/messages/version-staleness\"\n        >\n          (learn more)\n        </a>\n      )}\n      {isTurbopack && <span className=\"turbopack-text\">Turbopack</span>}\n    </span>\n  )\n}\n\nexport function getStaleness({ installed, staleness, expected }: VersionInfo) {\n  let text = ''\n  let title = ''\n  let indicatorClass = ''\n  const versionLabel = `Next.js ${installed}`\n  switch (staleness) {\n    case 'newer-than-npm':\n    case 'fresh':\n      text = versionLabel\n      title = `Latest available version is detected (${installed}).`\n      indicatorClass = 'fresh'\n      break\n    case 'stale-patch':\n    case 'stale-minor':\n      text = `${versionLabel} (stale)`\n      title = `There is a newer version (${expected}) available, upgrade recommended! `\n      indicatorClass = 'stale'\n      break\n    case 'stale-major': {\n      text = `${versionLabel} (outdated)`\n      title = `An outdated version detected (latest is ${expected}), upgrade is highly recommended!`\n      indicatorClass = 'outdated'\n      break\n    }\n    case 'stale-prerelease': {\n      text = `${versionLabel} (stale)`\n      title = `There is a newer canary version (${expected}) available, please upgrade! `\n      indicatorClass = 'stale'\n      break\n    }\n    case 'unknown':\n      break\n    default:\n      break\n  }\n  return { text, indicatorClass, title }\n}\n\nexport const styles = css`\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 28px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n\n  .nextjs-container-build-error-version-status.turbopack-border {\n    border: 1px solid transparent;\n    background:\n      linear-gradient(var(--color-background-100), var(--color-background-100))\n        padding-box,\n      linear-gradient(\n          to right,\n          var(--color-turbopack-border-red) 0%,\n          var(--color-turbopack-border-blue) 100%\n        )\n        border-box;\n    border-radius: var(--rounded-full);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n`\n\nfunction Eclipse({ className }: { className: string }) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle className={className} cx=\"7\" cy=\"7\" r=\"5.5\" strokeWidth=\"3\" />\n    </svg>\n  )\n}\n"],"names":["VersionStalenessInfo","getStaleness","styles","versionInfo","isTurbopack","staleness","text","indicatorClass","title","span","className","Eclipse","data-nextjs-version-checker","a","target","rel","href","installed","expected","versionLabel","css","svg","width","height","viewBox","fill","xmlns","circle","cx","cy","r","strokeWidth"],"mappings":";;;;;;;;;;;;;;;;IAGgBA,oBAAoB;eAApBA;;IAuCAC,YAAY;eAAZA;;IAsCHC,MAAM;eAANA;;;;;8BA/Ee;;;;;;;;;;AAErB,SAASF,qBAAqB,KAMpC;IANoC,IAAA,EACnCG,WAAW,EACXC,WAAW,EAIZ,GANoC;IAOnC,IAAI,CAACD,aAAa,OAAO;IACzB,MAAM,EAAEE,SAAS,EAAE,GAAGF;IACtB,IAAI,EAAEG,IAAI,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGP,aAAaE;IAEnD,IAAI,CAACG,MAAM,OAAO;IAElB,qBACE,sBAACG;QACCC,WAAW,AAAC,2FACVN,CAAAA,cAAc,qBAAqB,EAAC;;0BAGtC,qBAACO;gBAAQD,WAAW,AAAC,iCAA8BH;;0BACnD,qBAACE;gBAAKG,6BAA2B;gBAACJ,OAAOA;0BACtCF;;YACK;YACPD,cAAc,WACfA,cAAc,oBACdA,cAAc,YAAY,qBACxB,qBAACQ;gBACCC,QAAO;gBACPC,KAAI;gBACJC,MAAK;0BACN;;YAIFZ,6BAAe,qBAACK;gBAAKC,WAAU;0BAAiB;;;;AAGvD;AAEO,SAAST,aAAa,KAA+C;IAA/C,IAAA,EAAEgB,SAAS,EAAEZ,SAAS,EAAEa,QAAQ,EAAe,GAA/C;IAC3B,IAAIZ,OAAO;IACX,IAAIE,QAAQ;IACZ,IAAID,iBAAiB;IACrB,MAAMY,eAAe,AAAC,aAAUF;IAChC,OAAQZ;QACN,KAAK;QACL,KAAK;YACHC,OAAOa;YACPX,QAAQ,AAAC,2CAAwCS,YAAU;YAC3DV,iBAAiB;YACjB;QACF,KAAK;QACL,KAAK;YACHD,OAAO,AAAC,KAAEa,eAAa;YACvBX,QAAQ,AAAC,+BAA4BU,WAAS;YAC9CX,iBAAiB;YACjB;QACF,KAAK;YAAe;gBAClBD,OAAO,AAAC,KAAEa,eAAa;gBACvBX,QAAQ,AAAC,6CAA0CU,WAAS;gBAC5DX,iBAAiB;gBACjB;YACF;QACA,KAAK;YAAoB;gBACvBD,OAAO,AAAC,KAAEa,eAAa;gBACvBX,QAAQ,AAAC,sCAAmCU,WAAS;gBACrDX,iBAAiB;gBACjB;YACF;QACA,KAAK;YACH;QACF;YACE;IACJ;IACA,OAAO;QAAED;QAAMC;QAAgBC;IAAM;AACvC;AAEO,MAAMN,aAASkB,kBAAG;AA6DzB,SAAST,QAAQ,KAAoC;IAApC,IAAA,EAAED,SAAS,EAAyB,GAApC;IACf,qBACE,qBAACW;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,qBAACC;YAAOjB,WAAWA;YAAWkB,IAAG;YAAIC,IAAG;YAAIC,GAAE;YAAMC,aAAY;;;AAGtE"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/version-staleness-info/version-staleness-info.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../server/dev/parse-version-info'\nimport { cx } from '../../helpers/cx'\nimport { noop as css } from '../../helpers/noop-template'\n\nexport function VersionStalenessInfo({\n  versionInfo,\n  isTurbopack,\n}: {\n  versionInfo: VersionInfo | undefined\n  isTurbopack?: boolean\n}) {\n  if (!versionInfo) return null\n  const { staleness } = versionInfo\n  let { text, indicatorClass, title } = getStaleness(versionInfo)\n\n  if (!text) return null\n\n  return (\n    <span\n      className={cx(\n        'nextjs-container-build-error-version-status',\n        'dialog-exclude-closing-from-outside-click',\n        isTurbopack && 'turbopack-border'\n      )}\n    >\n      <Eclipse className={cx('version-staleness-indicator', indicatorClass)} />\n      <span data-nextjs-version-checker title={title}>\n        {text}\n      </span>{' '}\n      {staleness === 'fresh' ||\n      staleness === 'newer-than-npm' ||\n      staleness === 'unknown' ? null : (\n        <a\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          href=\"https://nextjs.org/docs/messages/version-staleness\"\n        >\n          (learn more)\n        </a>\n      )}\n      {isTurbopack && <span className=\"turbopack-text\">Turbopack</span>}\n    </span>\n  )\n}\n\nexport function getStaleness({ installed, staleness, expected }: VersionInfo) {\n  let text = ''\n  let title = ''\n  let indicatorClass = ''\n  const versionLabel = `Next.js ${installed}`\n  switch (staleness) {\n    case 'newer-than-npm':\n    case 'fresh':\n      text = versionLabel\n      title = `Latest available version is detected (${installed}).`\n      indicatorClass = 'fresh'\n      break\n    case 'stale-patch':\n    case 'stale-minor':\n      text = `${versionLabel} (stale)`\n      title = `There is a newer version (${expected}) available, upgrade recommended! `\n      indicatorClass = 'stale'\n      break\n    case 'stale-major': {\n      text = `${versionLabel} (outdated)`\n      title = `An outdated version detected (latest is ${expected}), upgrade is highly recommended!`\n      indicatorClass = 'outdated'\n      break\n    }\n    case 'stale-prerelease': {\n      text = `${versionLabel} (stale)`\n      title = `There is a newer canary version (${expected}) available, please upgrade! `\n      indicatorClass = 'stale'\n      break\n    }\n    case 'unknown':\n      break\n    default:\n      break\n  }\n  return { text, indicatorClass, title }\n}\n\nexport const styles = css`\n  .nextjs-container-build-error-version-status {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: var(--size-1);\n\n    height: 28px;\n    padding: 6px 8px 6px 6px;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-full);\n\n    color: var(--color-gray-900);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: var(--size-4);\n  }\n\n  .version-staleness-indicator.fresh {\n    fill: var(--color-green-800);\n    stroke: var(--color-green-300);\n  }\n  .version-staleness-indicator.stale {\n    fill: var(--color-amber-800);\n    stroke: var(--color-amber-300);\n  }\n  .version-staleness-indicator.outdated {\n    fill: var(--color-red-800);\n    stroke: var(--color-red-300);\n  }\n\n  .nextjs-container-build-error-version-status.turbopack-border {\n    border: 1px solid transparent;\n    background:\n      linear-gradient(var(--color-background-100), var(--color-background-100))\n        padding-box,\n      linear-gradient(\n          to right,\n          var(--color-turbopack-border-red) 0%,\n          var(--color-turbopack-border-blue) 100%\n        )\n        border-box;\n    border-radius: var(--rounded-full);\n  }\n\n  .nextjs-container-build-error-version-status > .turbopack-text {\n    background: linear-gradient(\n      to right,\n      var(--color-turbopack-text-red) 0%,\n      var(--color-turbopack-text-blue) 100%\n    );\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n`\n\nfunction Eclipse({ className }: { className: string }) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle className={className} cx=\"7\" cy=\"7\" r=\"5.5\" strokeWidth=\"3\" />\n    </svg>\n  )\n}\n"],"names":["VersionStalenessInfo","getStaleness","styles","versionInfo","isTurbopack","staleness","text","indicatorClass","title","span","className","cx","Eclipse","data-nextjs-version-checker","a","target","rel","href","installed","expected","versionLabel","css","svg","width","height","viewBox","fill","xmlns","circle","cy","r","strokeWidth"],"mappings":";;;;;;;;;;;;;;;;IAIgBA,oBAAoB;eAApBA;;IAyCAC,YAAY;eAAZA;;IAsCHC,MAAM;eAANA;;;;;oBAlFM;8BACS;;;;;;;;;;AAErB,SAASF,qBAAqB,KAMpC;IANoC,IAAA,EACnCG,WAAW,EACXC,WAAW,EAIZ,GANoC;IAOnC,IAAI,CAACD,aAAa,OAAO;IACzB,MAAM,EAAEE,SAAS,EAAE,GAAGF;IACtB,IAAI,EAAEG,IAAI,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGP,aAAaE;IAEnD,IAAI,CAACG,MAAM,OAAO;IAElB,qBACE,sBAACG;QACCC,WAAWC,IAAAA,MAAE,EACX,+CACA,6CACAP,eAAe;;0BAGjB,qBAACQ;gBAAQF,WAAWC,IAAAA,MAAE,EAAC,+BAA+BJ;;0BACtD,qBAACE;gBAAKI,6BAA2B;gBAACL,OAAOA;0BACtCF;;YACK;YACPD,cAAc,WACfA,cAAc,oBACdA,cAAc,YAAY,qBACxB,qBAACS;gBACCC,QAAO;gBACPC,KAAI;gBACJC,MAAK;0BACN;;YAIFb,6BAAe,qBAACK;gBAAKC,WAAU;0BAAiB;;;;AAGvD;AAEO,SAAST,aAAa,KAA+C;IAA/C,IAAA,EAAEiB,SAAS,EAAEb,SAAS,EAAEc,QAAQ,EAAe,GAA/C;IAC3B,IAAIb,OAAO;IACX,IAAIE,QAAQ;IACZ,IAAID,iBAAiB;IACrB,MAAMa,eAAe,AAAC,aAAUF;IAChC,OAAQb;QACN,KAAK;QACL,KAAK;YACHC,OAAOc;YACPZ,QAAQ,AAAC,2CAAwCU,YAAU;YAC3DX,iBAAiB;YACjB;QACF,KAAK;QACL,KAAK;YACHD,OAAO,AAAC,KAAEc,eAAa;YACvBZ,QAAQ,AAAC,+BAA4BW,WAAS;YAC9CZ,iBAAiB;YACjB;QACF,KAAK;YAAe;gBAClBD,OAAO,AAAC,KAAEc,eAAa;gBACvBZ,QAAQ,AAAC,6CAA0CW,WAAS;gBAC5DZ,iBAAiB;gBACjB;YACF;QACA,KAAK;YAAoB;gBACvBD,OAAO,AAAC,KAAEc,eAAa;gBACvBZ,QAAQ,AAAC,sCAAmCW,WAAS;gBACrDZ,iBAAiB;gBACjB;YACF;QACA,KAAK;YACH;QACF;YACE;IACJ;IACA,OAAO;QAAED;QAAMC;QAAgBC;IAAM;AACvC;AAEO,MAAMN,aAASmB,kBAAG;AA6DzB,SAAST,QAAQ,KAAoC;IAApC,IAAA,EAAEF,SAAS,EAAyB,GAApC;IACf,qBACE,qBAACY;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;kBAEN,cAAA,qBAACC;YAAOlB,WAAWA;YAAWC,IAAG;YAAIkB,IAAG;YAAIC,GAAE;YAAMC,aAAY;;;AAGtE"}

package/dist/client/components/react-dev-overlay/_experimental/internal/helpers/cx.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Merge multiple args to a single string with spaces. Useful for merging class names.
+ * @example
+ * cx('foo', 'bar') // 'foo bar'
+ * cx('foo', null, 'bar', undefined, 'baz', false) // 'foo bar baz'
+ */
+export declare function cx(...args: (string | undefined | null | false)[]): string;

package/dist/client/components/react-dev-overlay/_experimental/internal/helpers/cx.js

@@ -0,0 +1,29 @@
+/**
+ * Merge multiple args to a single string with spaces. Useful for merging class names.
+ * @example
+ * cx('foo', 'bar') // 'foo bar'
+ * cx('foo', null, 'bar', undefined, 'baz', false) // 'foo bar baz'
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "cx", {
+    enumerable: true,
+    get: function() {
+        return cx;
+    }
+});
+function cx() {
+    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+        args[_key] = arguments[_key];
+    }
+    return args.filter(Boolean).join(' ');
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=cx.js.map

package/dist/client/components/react-dev-overlay/_experimental/internal/helpers/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/helpers/cx.ts"],"sourcesContent":["/**\n * Merge multiple args to a single string with spaces. Useful for merging class names.\n * @example\n * cx('foo', 'bar') // 'foo bar'\n * cx('foo', null, 'bar', undefined, 'baz', false) // 'foo bar baz'\n */\nexport function cx(...args: (string | undefined | null | false)[]): string {\n  return args.filter(Boolean).join(' ')\n}\n"],"names":["cx","args","filter","Boolean","join"],"mappings":"AAAA;;;;;CAKC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA;IAAG,IAAA,IAAA,OAAA,UAAA,QAAA,AAAGC,OAAH,UAAA,OAAA,OAAA,GAAA,OAAA,MAAA;QAAGA,KAAH,QAAA,SAAA,CAAA,KAA8C;;IAC/D,OAAOA,KAAKC,MAAM,CAACC,SAASC,IAAI,CAAC;AACnC"}

package/dist/client/components/react-dev-overlay/_experimental/internal/helpers/cx.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/components/react-dev-overlay/internal/helpers/stack-frame.js

@@ -81,6 +81,16 @@ async function getOriginalStackFrames(frames, type, isAppDir) {
         method: 'POST',
         body: JSON.stringify(req)
     });
+    // When fails to fetch the original stack frames, we reject here to be
+    // caught at `_getOriginalStackFrame()` and return the stack frames so
+    // that the error overlay can render.
+    if (!res.ok || res.status === 204) {
+        const reason = await res.text();
+        return Promise.all(frames.map((frame)=>getOriginalStackFrame(frame, {
+                status: 'rejected',
+                reason: "Failed to fetch the original stack frames: " + reason
+            })));
+    }
     const data = await res.json();
     return Promise.all(frames.map((frame, index)=>getOriginalStackFrame(frame, data[index])));
 }

package/dist/client/components/react-dev-overlay/internal/helpers/stack-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type {\n  OriginalStackFrameResponse,\n  OriginalStackFrameResponseResult,\n  OriginalStackFramesRequest,\n} from '../../server/shared'\nimport {\n  isWebpackInternalResource,\n  formatFrameSourceFile,\n} from './webpack-module-path'\nexport interface OriginalStackFrame extends OriginalStackFrameResponse {\n  error: boolean\n  reason: string | null\n  external: boolean\n  ignored: boolean\n  sourceStackFrame: StackFrame\n}\n\nfunction getOriginalStackFrame(\n  source: StackFrame,\n  response: OriginalStackFrameResponseResult\n): Promise<OriginalStackFrame> {\n  async function _getOriginalStackFrame(): Promise<OriginalStackFrame> {\n    if (response.status === 'rejected') {\n      return Promise.reject(new Error(response.reason))\n    }\n\n    const body: OriginalStackFrameResponse = response.value\n\n    return {\n      error: false,\n      reason: null,\n      external: false,\n      sourceStackFrame: source,\n      originalStackFrame: body.originalStackFrame,\n      originalCodeFrame: body.originalCodeFrame || null,\n      sourcePackage: body.sourcePackage,\n      ignored: body.originalStackFrame?.ignored || false,\n    }\n  }\n\n  // TODO: merge this section into ignoredList handling\n  if (source.file === 'file://' || source.file?.match(/https?:\\/\\//)) {\n    return Promise.resolve({\n      error: false,\n      reason: null,\n      external: true,\n      sourceStackFrame: source,\n      originalStackFrame: null,\n      originalCodeFrame: null,\n      sourcePackage: null,\n      ignored: true,\n    })\n  }\n\n  return _getOriginalStackFrame().catch((err: Error) => ({\n    error: true,\n    reason: err?.message ?? err?.toString() ?? 'Unknown Error',\n    external: false,\n    sourceStackFrame: source,\n    originalStackFrame: null,\n    originalCodeFrame: null,\n    sourcePackage: null,\n    ignored: false,\n  }))\n}\n\nexport async function getOriginalStackFrames(\n  frames: StackFrame[],\n  type: 'server' | 'edge-server' | null,\n  isAppDir: boolean\n): Promise<OriginalStackFrame[]> {\n  const req: OriginalStackFramesRequest = {\n    frames,\n    isServer: type === 'server',\n    isEdgeServer: type === 'edge-server',\n    isAppDirectory: isAppDir,\n  }\n  const res = await fetch('/__nextjs_original-stack-frames', {\n    method: 'POST',\n    body: JSON.stringify(req),\n  })\n  const data = await res.json()\n  return Promise.all(\n    frames.map((frame, index) => getOriginalStackFrame(frame, data[index]))\n  )\n}\n\nexport function getFrameSource(frame: StackFrame): string {\n  if (!frame.file) return ''\n\n  const isWebpackFrame = isWebpackInternalResource(frame.file)\n\n  let str = ''\n  // Skip URL parsing for webpack internal file paths.\n  if (isWebpackFrame) {\n    str = formatFrameSourceFile(frame.file)\n  } else {\n    try {\n      const u = new URL(frame.file)\n\n      let parsedPath = ''\n      // Strip the origin for same-origin scripts.\n      if (globalThis.location?.origin !== u.origin) {\n        // URLs can be valid without an `origin`, so long as they have a\n        // `protocol`. However, `origin` is preferred.\n        if (u.origin === 'null') {\n          parsedPath += u.protocol\n        } else {\n          parsedPath += u.origin\n        }\n      }\n\n      // Strip query string information as it's typically too verbose to be\n      // meaningful.\n      parsedPath += u.pathname\n      str = formatFrameSourceFile(parsedPath)\n    } catch {\n      str = formatFrameSourceFile(frame.file)\n    }\n  }\n\n  if (!isWebpackInternalResource(frame.file) && frame.lineNumber != null) {\n    if (str) {\n      if (frame.column != null) {\n        str += ` (${frame.lineNumber}:${frame.column})`\n      } else {\n        str += ` (${frame.lineNumber})`\n      }\n    }\n  }\n  return str\n}\n"],"names":["getFrameSource","getOriginalStackFrames","getOriginalStackFrame","source","response","_getOriginalStackFrame","body","status","Promise","reject","Error","reason","value","error","external","sourceStackFrame","originalStackFrame","originalCodeFrame","sourcePackage","ignored","file","match","resolve","catch","err","message","toString","frames","type","isAppDir","req","isServer","isEdgeServer","isAppDirectory","res","fetch","method","JSON","stringify","data","json","all","map","frame","index","isWebpackFrame","isWebpackInternalResource","str","formatFrameSourceFile","globalThis","u","URL","parsedPath","location","origin","protocol","pathname","lineNumber","column"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type {\n  OriginalStackFrameResponse,\n  OriginalStackFrameResponseResult,\n  OriginalStackFramesRequest,\n} from '../../server/shared'\nimport {\n  isWebpackInternalResource,\n  formatFrameSourceFile,\n} from './webpack-module-path'\nexport interface OriginalStackFrame extends OriginalStackFrameResponse {\n  error: boolean\n  reason: string | null\n  external: boolean\n  ignored: boolean\n  sourceStackFrame: StackFrame\n}\n\nfunction getOriginalStackFrame(\n  source: StackFrame,\n  response: OriginalStackFrameResponseResult\n): Promise<OriginalStackFrame> {\n  async function _getOriginalStackFrame(): Promise<OriginalStackFrame> {\n    if (response.status === 'rejected') {\n      return Promise.reject(new Error(response.reason))\n    }\n\n    const body: OriginalStackFrameResponse = response.value\n\n    return {\n      error: false,\n      reason: null,\n      external: false,\n      sourceStackFrame: source,\n      originalStackFrame: body.originalStackFrame,\n      originalCodeFrame: body.originalCodeFrame || null,\n      sourcePackage: body.sourcePackage,\n      ignored: body.originalStackFrame?.ignored || false,\n    }\n  }\n\n  // TODO: merge this section into ignoredList handling\n  if (source.file === 'file://' || source.file?.match(/https?:\\/\\//)) {\n    return Promise.resolve({\n      error: false,\n      reason: null,\n      external: true,\n      sourceStackFrame: source,\n      originalStackFrame: null,\n      originalCodeFrame: null,\n      sourcePackage: null,\n      ignored: true,\n    })\n  }\n\n  return _getOriginalStackFrame().catch((err: Error) => ({\n    error: true,\n    reason: err?.message ?? err?.toString() ?? 'Unknown Error',\n    external: false,\n    sourceStackFrame: source,\n    originalStackFrame: null,\n    originalCodeFrame: null,\n    sourcePackage: null,\n    ignored: false,\n  }))\n}\n\nexport async function getOriginalStackFrames(\n  frames: StackFrame[],\n  type: 'server' | 'edge-server' | null,\n  isAppDir: boolean\n): Promise<OriginalStackFrame[]> {\n  const req: OriginalStackFramesRequest = {\n    frames,\n    isServer: type === 'server',\n    isEdgeServer: type === 'edge-server',\n    isAppDirectory: isAppDir,\n  }\n\n  const res = await fetch('/__nextjs_original-stack-frames', {\n    method: 'POST',\n    body: JSON.stringify(req),\n  })\n\n  // When fails to fetch the original stack frames, we reject here to be\n  // caught at `_getOriginalStackFrame()` and return the stack frames so\n  // that the error overlay can render.\n  if (!res.ok || res.status === 204) {\n    const reason = await res.text()\n    return Promise.all(\n      frames.map((frame) =>\n        getOriginalStackFrame(frame, {\n          status: 'rejected',\n          reason: `Failed to fetch the original stack frames: ${reason}`,\n        })\n      )\n    )\n  }\n\n  const data = await res.json()\n  return Promise.all(\n    frames.map((frame, index) => getOriginalStackFrame(frame, data[index]))\n  )\n}\n\nexport function getFrameSource(frame: StackFrame): string {\n  if (!frame.file) return ''\n\n  const isWebpackFrame = isWebpackInternalResource(frame.file)\n\n  let str = ''\n  // Skip URL parsing for webpack internal file paths.\n  if (isWebpackFrame) {\n    str = formatFrameSourceFile(frame.file)\n  } else {\n    try {\n      const u = new URL(frame.file)\n\n      let parsedPath = ''\n      // Strip the origin for same-origin scripts.\n      if (globalThis.location?.origin !== u.origin) {\n        // URLs can be valid without an `origin`, so long as they have a\n        // `protocol`. However, `origin` is preferred.\n        if (u.origin === 'null') {\n          parsedPath += u.protocol\n        } else {\n          parsedPath += u.origin\n        }\n      }\n\n      // Strip query string information as it's typically too verbose to be\n      // meaningful.\n      parsedPath += u.pathname\n      str = formatFrameSourceFile(parsedPath)\n    } catch {\n      str = formatFrameSourceFile(frame.file)\n    }\n  }\n\n  if (!isWebpackInternalResource(frame.file) && frame.lineNumber != null) {\n    if (str) {\n      if (frame.column != null) {\n        str += ` (${frame.lineNumber}:${frame.column})`\n      } else {\n        str += ` (${frame.lineNumber})`\n      }\n    }\n  }\n  return str\n}\n"],"names":["getFrameSource","getOriginalStackFrames","getOriginalStackFrame","source","response","_getOriginalStackFrame","body","status","Promise","reject","Error","reason","value","error","external","sourceStackFrame","originalStackFrame","originalCodeFrame","sourcePackage","ignored","file","match","resolve","catch","err","message","toString","frames","type","isAppDir","req","isServer","isEdgeServer","isAppDirectory","res","fetch","method","JSON","stringify","ok","text","all","map","frame","data","json","index","isWebpackFrame","isWebpackInternalResource","str","formatFrameSourceFile","globalThis","u","URL","parsedPath","location","origin","protocol","pathname","lineNumber","column"],"mappings":"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"}

package/dist/client/index.js

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