npm - next - Versions diffs - 15.2.0-canary.75 → 15.2.0-canary.76 - Mend

next 15.2.0-canary.75 → 15.2.0-canary.76

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 (120) hide show

package/dist/esm/client/components/react-dev-overlay/ui/styles/colors.js CHANGED Viewed

@@ -1,27 +1,39 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n        :host {\n          ",
-        "\n          /* cyan: keyword */\n          --color-ansi-cyan: var(--color-syntax-keyword);\n          /* yellow: capitalized, jsxIdentifier, punctuation */\n          --color-ansi-yellow: var(--color-syntax-punctuation);\n          /* magenta: number, regex */\n          --color-ansi-magenta: var(--color-syntax-number);\n          /* green: string */\n          --color-ansi-green: var(--color-syntax-string);\n          /* gray (bright black): comment, gutter */\n          --color-ansi-bright-black: var(--color-syntax-comment);\n\n          /* Ansi - Temporary */\n          --color-ansi-selection: var(--color-gray-alpha-300);\n          --color-ansi-bg: var(--color-background-200);\n          --color-ansi-fg: var(--color-gray-1000);\n\n          --color-ansi-white: var(--color-gray-700);\n          --color-ansi-black: var(--color-gray-200);\n          --color-ansi-blue: var(--color-blue-700);\n          --color-ansi-red: var(--color-red-700);\n          --color-ansi-bright-white: var(--color-gray-1000);\n          --color-ansi-bright-blue: var(--color-blue-800);\n          --color-ansi-bright-cyan: var(--color-blue-800);\n          --color-ansi-bright-green: var(--color-green-800);\n          --color-ansi-bright-magenta: var(--color-blue-800);\n          --color-ansi-bright-red: var(--color-red-800);\n          --color-ansi-bright-yellow: var(--color-amber-900);\n\n          /* Background Light */\n          --color-background-100: #ffffff;\n          --color-background-200: #fafafa;\n\n          /* Syntax Light */\n          --color-syntax-comment: #666666;\n          --color-syntax-constant: #171717;\n          --color-syntax-function: #0068d6;\n          --color-syntax-keyword: #c01b5d;\n          --color-syntax-link: #067a6e;\n          --color-syntax-parameter: #ad4b00;\n          --color-syntax-punctuation: #171717;\n          --color-syntax-string: #067a6e;\n          --color-syntax-string-expression: #067a6e;\n\n          /* Gray Scale Light */\n          --color-gray-100: #f2f2f2;\n          --color-gray-200: #ebebeb;\n          --color-gray-300: #e6e6e6;\n          --color-gray-400: #eaeaea;\n          --color-gray-500: #c9c9c9;\n          --color-gray-600: #a8a8a8;\n          --color-gray-700: #8f8f8f;\n          --color-gray-800: #7d7d7d;\n          --color-gray-900: #666666;\n          --color-gray-1000: #171717;\n\n          /* Gray Alpha Scale Light */\n          --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n          --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n          --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n          --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n          --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n          --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n          --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n          --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n          --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n          --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n          /* Blue Scale Light */\n          --color-blue-100: #f0f7ff;\n          --color-blue-200: #edf6ff;\n          --color-blue-300: #e1f0ff;\n          --color-blue-400: #cde7ff;\n          --color-blue-500: #99ceff;\n          --color-blue-600: #52aeff;\n          --color-blue-700: #0070f3;\n          --color-blue-800: #0060d1;\n          --color-blue-900: #0067d6;\n          --color-blue-1000: #0025ad;\n\n          /* Red Scale Light */\n          --color-red-100: #fff0f0;\n          --color-red-200: #ffebeb;\n          --color-red-300: #ffe5e5;\n          --color-red-400: #fdd8d8;\n          --color-red-500: #f8baba;\n          --color-red-600: #f87274;\n          --color-red-700: #e5484d;\n          --color-red-800: #da3036;\n          --color-red-900: #ca2a30;\n          --color-red-1000: #381316;\n\n          /* Amber Scale Light */\n          --color-amber-100: #fff6e5;\n          --color-amber-200: #fff4d5;\n          --color-amber-300: #fef0cd;\n          --color-amber-400: #ffddbf;\n          --color-amber-500: #ffc96b;\n          --color-amber-600: #f5b047;\n          --color-amber-700: #ffb224;\n          --color-amber-800: #ff990a;\n          --color-amber-900: #a35200;\n          --color-amber-1000: #4e2009;\n\n          /* Green Scale Light */\n          --color-green-100: #effbef;\n          --color-green-200: #eafaea;\n          --color-green-300: #dcf6dc;\n          --color-green-400: #c8f1c9;\n          --color-green-500: #99e59f;\n          --color-green-600: #6cda76;\n          --color-green-700: #46a758;\n          --color-green-800: #388e4a;\n          --color-green-900: #297c3b;\n          --color-green-1000: #18311e;\n\n          /* Turbopack Light - Temporary */\n          --color-turbopack-text-red: #ff1e56;\n          --color-turbopack-text-blue: #0096ff;\n          --color-turbopack-border-red: #f0adbe;\n          --color-turbopack-border-blue: #adccea;\n          --color-turbopack-background-red: #fff7f9;\n          --color-turbopack-background-blue: #f6fbff;\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            /* Background Dark */\n            --color-background-100: #0a0a0a;\n            --color-background-200: #000000;\n\n            /* Syntax Dark */\n            --color-syntax-comment: #a0a0a0;\n            --color-syntax-constant: #ededed;\n            --color-syntax-function: #52a9ff;\n            --color-syntax-keyword: #f76191;\n            --color-syntax-link: #0ac5b2;\n            --color-syntax-parameter: #f1a10d;\n            --color-syntax-punctuation: #ededed;\n            --color-syntax-string: #0ac5b2;\n            --color-syntax-string-expression: #0ac5b2;\n\n            /* Gray Scale Dark */\n            --color-gray-100: #1a1a1a;\n            --color-gray-200: #1f1f1f;\n            --color-gray-300: #292929;\n            --color-gray-400: #2e2e2e;\n            --color-gray-500: #454545;\n            --color-gray-600: #878787;\n            --color-gray-700: #8f8f8f;\n            --color-gray-800: #7d7d7d;\n            --color-gray-900: #a0a0a0;\n            --color-gray-1000: #ededed;\n\n            /* Gray Alpha Scale Dark */\n            --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n            --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n            --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n            --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n            --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n            --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n            --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n            --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n            --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n            --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n            /* Blue Scale Dark */\n            --color-blue-100: #0f1b2d;\n            --color-blue-200: #10243e;\n            --color-blue-300: #0f3058;\n            --color-blue-400: #0d3868;\n            --color-blue-500: #0a4481;\n            --color-blue-600: #0091ff;\n            --color-blue-700: #0070f3;\n            --color-blue-800: #0060d1;\n            --color-blue-900: #52a9ff;\n            --color-blue-1000: #eaf6ff;\n\n            /* Red Scale Dark */\n            --color-red-100: #2a1314;\n            --color-red-200: #3d1719;\n            --color-red-300: #551a1e;\n            --color-red-400: #671e22;\n            --color-red-500: #822025;\n            --color-red-600: #e5484d;\n            --color-red-700: #e5484d;\n            --color-red-800: #da3036;\n            --color-red-900: #ff6369;\n            --color-red-1000: #ffecee;\n\n            /* Amber Scale Dark */\n            --color-amber-100: #271700;\n            --color-amber-200: #341c00;\n            --color-amber-300: #4a2900;\n            --color-amber-400: #573300;\n            --color-amber-500: #693f05;\n            --color-amber-600: #e79c13;\n            --color-amber-700: #ffb224;\n            --color-amber-800: #ff990a;\n            --color-amber-900: #f1a10d;\n            --color-amber-1000: #fef3dd;\n\n            /* Green Scale Dark */\n            --color-green-100: #0b2211;\n            --color-green-200: #0f2c17;\n            --color-green-300: #11351b;\n            --color-green-400: #0c461b;\n            --color-green-500: #126427;\n            --color-green-600: #1a9338;\n            --color-green-700: #46a758;\n            --color-green-800: #388e4a;\n            --color-green-900: #63c174;\n            --color-green-1000: #e5fbeb;\n\n            /* Turbopack Dark - Temporary */\n            --color-turbopack-text-red: #ff6d92;\n            --color-turbopack-text-blue: #45b2ff;\n            --color-turbopack-border-red: #6e293b;\n            --color-turbopack-border-blue: #284f80;\n            --color-turbopack-background-red: #250d12;\n            --color-turbopack-background-blue: #0a1723;\n          }\n        }\n      "
+        "\n  /* Background Dark */\n  --color-background-100: #0a0a0a;\n  --color-background-200: #000000;\n\n  /* Syntax Dark */\n  --color-syntax-comment: #a0a0a0;\n  --color-syntax-constant: #ededed;\n  --color-syntax-function: #52a9ff;\n  --color-syntax-keyword: #f76191;\n  --color-syntax-link: #0ac5b2;\n  --color-syntax-parameter: #f1a10d;\n  --color-syntax-punctuation: #ededed;\n  --color-syntax-string: #0ac5b2;\n  --color-syntax-string-expression: #0ac5b2;\n\n  /* Gray Scale Dark */\n  --color-gray-100: #1a1a1a;\n  --color-gray-200: #1f1f1f;\n  --color-gray-300: #292929;\n  --color-gray-400: #2e2e2e;\n  --color-gray-500: #454545;\n  --color-gray-600: #878787;\n  --color-gray-700: #8f8f8f;\n  --color-gray-800: #7d7d7d;\n  --color-gray-900: #a0a0a0;\n  --color-gray-1000: #ededed;\n\n  /* Gray Alpha Scale Dark */\n  --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n  --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n  --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n  --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n  --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n  --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n  --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n  --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n  --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n  --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n  /* Blue Scale Dark */\n  --color-blue-100: #0f1b2d;\n  --color-blue-200: #10243e;\n  --color-blue-300: #0f3058;\n  --color-blue-400: #0d3868;\n  --color-blue-500: #0a4481;\n  --color-blue-600: #0091ff;\n  --color-blue-700: #0070f3;\n  --color-blue-800: #0060d1;\n  --color-blue-900: #52a9ff;\n  --color-blue-1000: #eaf6ff;\n\n  /* Red Scale Dark */\n  --color-red-100: #2a1314;\n  --color-red-200: #3d1719;\n  --color-red-300: #551a1e;\n  --color-red-400: #671e22;\n  --color-red-500: #822025;\n  --color-red-600: #e5484d;\n  --color-red-700: #e5484d;\n  --color-red-800: #da3036;\n  --color-red-900: #ff6369;\n  --color-red-1000: #ffecee;\n\n  /* Amber Scale Dark */\n  --color-amber-100: #271700;\n  --color-amber-200: #341c00;\n  --color-amber-300: #4a2900;\n  --color-amber-400: #573300;\n  --color-amber-500: #693f05;\n  --color-amber-600: #e79c13;\n  --color-amber-700: #ffb224;\n  --color-amber-800: #ff990a;\n  --color-amber-900: #f1a10d;\n  --color-amber-1000: #fef3dd;\n\n  /* Green Scale Dark */\n  --color-green-100: #0b2211;\n  --color-green-200: #0f2c17;\n  --color-green-300: #11351b;\n  --color-green-400: #0c461b;\n  --color-green-500: #126427;\n  --color-green-600: #1a9338;\n  --color-green-700: #46a758;\n  --color-green-800: #388e4a;\n  --color-green-900: #63c174;\n  --color-green-1000: #e5fbeb;\n\n  /* Turbopack Dark - Temporary */\n  --color-turbopack-text-red: #ff6d92;\n  --color-turbopack-text-blue: #45b2ff;\n  --color-turbopack-border-red: #6e293b;\n  --color-turbopack-border-blue: #284f80;\n  --color-turbopack-background-red: #250d12;\n  --color-turbopack-background-blue: #0a1723;\n"
     ]);
     _templateObject = function() {
         return data;
     };
     return data;
 }
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        "\n        :host {\n          ",
+        "\n          /* cyan: keyword */\n          --color-ansi-cyan: var(--color-syntax-keyword);\n          /* yellow: capitalized, jsxIdentifier, punctuation */\n          --color-ansi-yellow: var(--color-syntax-punctuation);\n          /* magenta: number, regex */\n          --color-ansi-magenta: var(--color-syntax-number);\n          /* green: string */\n          --color-ansi-green: var(--color-syntax-string);\n          /* gray (bright black): comment, gutter */\n          --color-ansi-bright-black: var(--color-syntax-comment);\n\n          /* Ansi - Temporary */\n          --color-ansi-selection: var(--color-gray-alpha-300);\n          --color-ansi-bg: var(--color-background-200);\n          --color-ansi-fg: var(--color-gray-1000);\n\n          --color-ansi-white: var(--color-gray-700);\n          --color-ansi-black: var(--color-gray-200);\n          --color-ansi-blue: var(--color-blue-700);\n          --color-ansi-red: var(--color-red-700);\n          --color-ansi-bright-white: var(--color-gray-1000);\n          --color-ansi-bright-blue: var(--color-blue-800);\n          --color-ansi-bright-cyan: var(--color-blue-800);\n          --color-ansi-bright-green: var(--color-green-800);\n          --color-ansi-bright-magenta: var(--color-blue-800);\n          --color-ansi-bright-red: var(--color-red-800);\n          --color-ansi-bright-yellow: var(--color-amber-900);\n\n          /* Background Light */\n          --color-background-100: #ffffff;\n          --color-background-200: #fafafa;\n\n          /* Syntax Light */\n          --color-syntax-comment: #666666;\n          --color-syntax-constant: #171717;\n          --color-syntax-function: #0068d6;\n          --color-syntax-keyword: #c01b5d;\n          --color-syntax-link: #067a6e;\n          --color-syntax-parameter: #ad4b00;\n          --color-syntax-punctuation: #171717;\n          --color-syntax-string: #067a6e;\n          --color-syntax-string-expression: #067a6e;\n\n          /* Gray Scale Light */\n          --color-gray-100: #f2f2f2;\n          --color-gray-200: #ebebeb;\n          --color-gray-300: #e6e6e6;\n          --color-gray-400: #eaeaea;\n          --color-gray-500: #c9c9c9;\n          --color-gray-600: #a8a8a8;\n          --color-gray-700: #8f8f8f;\n          --color-gray-800: #7d7d7d;\n          --color-gray-900: #666666;\n          --color-gray-1000: #171717;\n\n          /* Gray Alpha Scale Light */\n          --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n          --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n          --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n          --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n          --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n          --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n          --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n          --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n          --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n          --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n          /* Blue Scale Light */\n          --color-blue-100: #f0f7ff;\n          --color-blue-200: #edf6ff;\n          --color-blue-300: #e1f0ff;\n          --color-blue-400: #cde7ff;\n          --color-blue-500: #99ceff;\n          --color-blue-600: #52aeff;\n          --color-blue-700: #0070f3;\n          --color-blue-800: #0060d1;\n          --color-blue-900: #0067d6;\n          --color-blue-1000: #0025ad;\n\n          /* Red Scale Light */\n          --color-red-100: #fff0f0;\n          --color-red-200: #ffebeb;\n          --color-red-300: #ffe5e5;\n          --color-red-400: #fdd8d8;\n          --color-red-500: #f8baba;\n          --color-red-600: #f87274;\n          --color-red-700: #e5484d;\n          --color-red-800: #da3036;\n          --color-red-900: #ca2a30;\n          --color-red-1000: #381316;\n\n          /* Amber Scale Light */\n          --color-amber-100: #fff6e5;\n          --color-amber-200: #fff4d5;\n          --color-amber-300: #fef0cd;\n          --color-amber-400: #ffddbf;\n          --color-amber-500: #ffc96b;\n          --color-amber-600: #f5b047;\n          --color-amber-700: #ffb224;\n          --color-amber-800: #ff990a;\n          --color-amber-900: #a35200;\n          --color-amber-1000: #4e2009;\n\n          /* Green Scale Light */\n          --color-green-100: #effbef;\n          --color-green-200: #eafaea;\n          --color-green-300: #dcf6dc;\n          --color-green-400: #c8f1c9;\n          --color-green-500: #99e59f;\n          --color-green-600: #6cda76;\n          --color-green-700: #46a758;\n          --color-green-800: #388e4a;\n          --color-green-900: #297c3b;\n          --color-green-1000: #18311e;\n\n          /* Turbopack Light - Temporary */\n          --color-turbopack-text-red: #ff1e56;\n          --color-turbopack-text-blue: #0096ff;\n          --color-turbopack-border-red: #f0adbe;\n          --color-turbopack-border-blue: #adccea;\n          --color-turbopack-background-red: #fff7f9;\n          --color-turbopack-background-blue: #f6fbff;\n        }\n\n        :host(.dark) {\n          ",
+        "\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host(:not(.light)) {\n            ",
+        "\n          }\n        }\n      "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
 import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from '../../utils/css';
+const darkTheme = css(_templateObject());
 // TODO: Replace the existing colors in Base.tsx.
 export function Colors() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject(), // CAUTION: THIS IS A WORKAROUND!
+        children: css(_templateObject1(), // CAUTION: THIS IS A WORKAROUND!
         // For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.
         // x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54
         // So, we do a workaround mapping to change the color matching the theme.
         // For example, in @babel/code-frame, the `keyword` is mapped to ANSI "cyan".
         // We want the `keyword` to use the `syntax-keyword` color in the theme.
         // So, we map the "cyan" to the `syntax-keyword` in the theme.
-        '')
+        '', darkTheme, darkTheme)
     });
 }

package/dist/esm/client/components/react-dev-overlay/ui/styles/colors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/colors.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\n// TODO: Replace the existing colors in Base.tsx.\nexport function Colors() {\n return (\n <style>\n {css`\n :host {\n ${\n // CAUTION: THIS IS A WORKAROUND!\n // For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.\n // x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54\n // So, we do a workaround mapping to change the color matching the theme.\n\n // For example, in @babel/code-frame, the `keyword` is mapped to ANSI \"cyan\".\n // We want the `keyword` to use the `syntax-keyword` color in the theme.\n // So, we map the \"cyan\" to the `syntax-keyword` in the theme.\n ''\n }\n /* cyan: keyword /\n --color-ansi-cyan: var(--color-syntax-keyword);\n / yellow: capitalized, jsxIdentifier, punctuation /\n --color-ansi-yellow: var(--color-syntax-punctuation);\n / magenta: number, regex /\n --color-ansi-magenta: var(--color-syntax-number);\n / green: string /\n --color-ansi-green: var(--color-syntax-string);\n / gray (bright black): comment, gutter /\n --color-ansi-bright-black: var(--color-syntax-comment);\n\n / Ansi - Temporary /\n --color-ansi-selection: var(--color-gray-alpha-300);\n --color-ansi-bg: var(--color-background-200);\n --color-ansi-fg: var(--color-gray-1000);\n\n --color-ansi-white: var(--color-gray-700);\n --color-ansi-black: var(--color-gray-200);\n --color-ansi-blue: var(--color-blue-700);\n --color-ansi-red: var(--color-red-700);\n --color-ansi-bright-white: var(--color-gray-1000);\n --color-ansi-bright-blue: var(--color-blue-800);\n --color-ansi-bright-cyan: var(--color-blue-800);\n --color-ansi-bright-green: var(--color-green-800);\n --color-ansi-bright-magenta: var(--color-blue-800);\n --color-ansi-bright-red: var(--color-red-800);\n --color-ansi-bright-yellow: var(--color-amber-900);\n\n / Background Light /\n --color-background-100: #ffffff;\n --color-background-200: #fafafa;\n\n / Syntax Light /\n --color-syntax-comment: #666666;\n --color-syntax-constant: #171717;\n --color-syntax-function: #0068d6;\n --color-syntax-keyword: #c01b5d;\n --color-syntax-link: #067a6e;\n --color-syntax-parameter: #ad4b00;\n --color-syntax-punctuation: #171717;\n --color-syntax-string: #067a6e;\n --color-syntax-string-expression: #067a6e;\n\n / Gray Scale Light /\n --color-gray-100: #f2f2f2;\n --color-gray-200: #ebebeb;\n --color-gray-300: #e6e6e6;\n --color-gray-400: #eaeaea;\n --color-gray-500: #c9c9c9;\n --color-gray-600: #a8a8a8;\n --color-gray-700: #8f8f8f;\n --color-gray-800: #7d7d7d;\n --color-gray-900: #666666;\n --color-gray-1000: #171717;\n\n / Gray Alpha Scale Light /\n --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n / Blue Scale Light /\n --color-blue-100: #f0f7ff;\n --color-blue-200: #edf6ff;\n --color-blue-300: #e1f0ff;\n --color-blue-400: #cde7ff;\n --color-blue-500: #99ceff;\n --color-blue-600: #52aeff;\n --color-blue-700: #0070f3;\n --color-blue-800: #0060d1;\n --color-blue-900: #0067d6;\n --color-blue-1000: #0025ad;\n\n / Red Scale Light /\n --color-red-100: #fff0f0;\n --color-red-200: #ffebeb;\n --color-red-300: #ffe5e5;\n --color-red-400: #fdd8d8;\n --color-red-500: #f8baba;\n --color-red-600: #f87274;\n --color-red-700: #e5484d;\n --color-red-800: #da3036;\n --color-red-900: #ca2a30;\n --color-red-1000: #381316;\n\n / Amber Scale Light /\n --color-amber-100: #fff6e5;\n --color-amber-200: #fff4d5;\n --color-amber-300: #fef0cd;\n --color-amber-400: #ffddbf;\n --color-amber-500: #ffc96b;\n --color-amber-600: #f5b047;\n --color-amber-700: #ffb224;\n --color-amber-800: #ff990a;\n --color-amber-900: #a35200;\n --color-amber-1000: #4e2009;\n\n / Green Scale Light /\n --color-green-100: #effbef;\n --color-green-200: #eafaea;\n --color-green-300: #dcf6dc;\n --color-green-400: #c8f1c9;\n --color-green-500: #99e59f;\n --color-green-600: #6cda76;\n --color-green-700: #46a758;\n --color-green-800: #388e4a;\n --color-green-900: #297c3b;\n --color-green-1000: #18311e;\n\n / Turbopack Light - Temporary /\n --color-turbopack-text-red: #ff1e56;\n --color-turbopack-text-blue: #0096ff;\n --color-turbopack-border-red: #f0adbe;\n --color-turbopack-border-blue: #adccea;\n --color-turbopack-background-red: #fff7f9;\n --color-turbopack-background-blue: #f6fbff;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n / Background Dark /\n --color-background-100: #0a0a0a;\n --color-background-200: #000000;\n\n / Syntax Dark /\n --color-syntax-comment: #a0a0a0;\n --color-syntax-constant: #ededed;\n --color-syntax-function: #52a9ff;\n --color-syntax-keyword: #f76191;\n --color-syntax-link: #0ac5b2;\n --color-syntax-parameter: #f1a10d;\n --color-syntax-punctuation: #ededed;\n --color-syntax-string: #0ac5b2;\n --color-syntax-string-expression: #0ac5b2;\n\n / Gray Scale Dark /\n --color-gray-100: #1a1a1a;\n --color-gray-200: #1f1f1f;\n --color-gray-300: #292929;\n --color-gray-400: #2e2e2e;\n --color-gray-500: #454545;\n --color-gray-600: #878787;\n --color-gray-700: #8f8f8f;\n --color-gray-800: #7d7d7d;\n --color-gray-900: #a0a0a0;\n --color-gray-1000: #ededed;\n\n / Gray Alpha Scale Dark /\n --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n / Blue Scale Dark /\n --color-blue-100: #0f1b2d;\n --color-blue-200: #10243e;\n --color-blue-300: #0f3058;\n --color-blue-400: #0d3868;\n --color-blue-500: #0a4481;\n --color-blue-600: #0091ff;\n --color-blue-700: #0070f3;\n --color-blue-800: #0060d1;\n --color-blue-900: #52a9ff;\n --color-blue-1000: #eaf6ff;\n\n / Red Scale Dark /\n --color-red-100: #2a1314;\n --color-red-200: #3d1719;\n --color-red-300: #551a1e;\n --color-red-400: #671e22;\n --color-red-500: #822025;\n --color-red-600: #e5484d;\n --color-red-700: #e5484d;\n --color-red-800: #da3036;\n --color-red-900: #ff6369;\n --color-red-1000: #ffecee;\n\n / Amber Scale Dark /\n --color-amber-100: #271700;\n --color-amber-200: #341c00;\n --color-amber-300: #4a2900;\n --color-amber-400: #573300;\n --color-amber-500: #693f05;\n --color-amber-600: #e79c13;\n --color-amber-700: #ffb224;\n --color-amber-800: #ff990a;\n --color-amber-900: #f1a10d;\n --color-amber-1000: #fef3dd;\n\n / Green Scale Dark /\n --color-green-100: #0b2211;\n --color-green-200: #0f2c17;\n --color-green-300: #11351b;\n --color-green-400: #0c461b;\n --color-green-500: #126427;\n --color-green-600: #1a9338;\n --color-green-700: #46a758;\n --color-green-800: #388e4a;\n --color-green-900: #63c174;\n --color-green-1000: #e5fbeb;\n\n / Turbopack Dark - Temporary */\n --color-turbopack-text-red: #ff6d92;\n --color-turbopack-text-blue: #45b2ff;\n --color-turbopack-border-red: #6e293b;\n --color-turbopack-border-blue: #284f80;\n --color-turbopack-background-red: #250d12;\n --color-turbopack-background-blue: #0a1723;\n }\n }\n `}\n </style>\n )\n}\n"],"names":["css","Colors","style"],"mappings":";;;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,iDAAiD;AACjD,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF,uBAGK,iCAAiC;QACjC,+GAA+G;QAC/G,oIAAoI;QACpI,yEAAyE;QAEzE,6EAA6E;QAC7E,wEAAwE;QACxE,8DAA8D;QAC9D;;AAmOZ"}
1	+ {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/colors.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nconst darkTheme = css`\n /* Background Dark /\n --color-background-100: #0a0a0a;\n --color-background-200: #000000;\n\n / Syntax Dark /\n --color-syntax-comment: #a0a0a0;\n --color-syntax-constant: #ededed;\n --color-syntax-function: #52a9ff;\n --color-syntax-keyword: #f76191;\n --color-syntax-link: #0ac5b2;\n --color-syntax-parameter: #f1a10d;\n --color-syntax-punctuation: #ededed;\n --color-syntax-string: #0ac5b2;\n --color-syntax-string-expression: #0ac5b2;\n\n / Gray Scale Dark /\n --color-gray-100: #1a1a1a;\n --color-gray-200: #1f1f1f;\n --color-gray-300: #292929;\n --color-gray-400: #2e2e2e;\n --color-gray-500: #454545;\n --color-gray-600: #878787;\n --color-gray-700: #8f8f8f;\n --color-gray-800: #7d7d7d;\n --color-gray-900: #a0a0a0;\n --color-gray-1000: #ededed;\n\n / Gray Alpha Scale Dark /\n --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n / Blue Scale Dark /\n --color-blue-100: #0f1b2d;\n --color-blue-200: #10243e;\n --color-blue-300: #0f3058;\n --color-blue-400: #0d3868;\n --color-blue-500: #0a4481;\n --color-blue-600: #0091ff;\n --color-blue-700: #0070f3;\n --color-blue-800: #0060d1;\n --color-blue-900: #52a9ff;\n --color-blue-1000: #eaf6ff;\n\n / Red Scale Dark /\n --color-red-100: #2a1314;\n --color-red-200: #3d1719;\n --color-red-300: #551a1e;\n --color-red-400: #671e22;\n --color-red-500: #822025;\n --color-red-600: #e5484d;\n --color-red-700: #e5484d;\n --color-red-800: #da3036;\n --color-red-900: #ff6369;\n --color-red-1000: #ffecee;\n\n / Amber Scale Dark /\n --color-amber-100: #271700;\n --color-amber-200: #341c00;\n --color-amber-300: #4a2900;\n --color-amber-400: #573300;\n --color-amber-500: #693f05;\n --color-amber-600: #e79c13;\n --color-amber-700: #ffb224;\n --color-amber-800: #ff990a;\n --color-amber-900: #f1a10d;\n --color-amber-1000: #fef3dd;\n\n / Green Scale Dark /\n --color-green-100: #0b2211;\n --color-green-200: #0f2c17;\n --color-green-300: #11351b;\n --color-green-400: #0c461b;\n --color-green-500: #126427;\n --color-green-600: #1a9338;\n --color-green-700: #46a758;\n --color-green-800: #388e4a;\n --color-green-900: #63c174;\n --color-green-1000: #e5fbeb;\n\n / Turbopack Dark - Temporary /\n --color-turbopack-text-red: #ff6d92;\n --color-turbopack-text-blue: #45b2ff;\n --color-turbopack-border-red: #6e293b;\n --color-turbopack-border-blue: #284f80;\n --color-turbopack-background-red: #250d12;\n --color-turbopack-background-blue: #0a1723;\n`\n\n// TODO: Replace the existing colors in Base.tsx.\nexport function Colors() {\n return (\n <style>\n {css`\n :host {\n ${\n // CAUTION: THIS IS A WORKAROUND!\n // For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.\n // x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54\n // So, we do a workaround mapping to change the color matching the theme.\n\n // For example, in @babel/code-frame, the `keyword` is mapped to ANSI \"cyan\".\n // We want the `keyword` to use the `syntax-keyword` color in the theme.\n // So, we map the \"cyan\" to the `syntax-keyword` in the theme.\n ''\n }\n / cyan: keyword /\n --color-ansi-cyan: var(--color-syntax-keyword);\n / yellow: capitalized, jsxIdentifier, punctuation /\n --color-ansi-yellow: var(--color-syntax-punctuation);\n / magenta: number, regex /\n --color-ansi-magenta: var(--color-syntax-number);\n / green: string /\n --color-ansi-green: var(--color-syntax-string);\n / gray (bright black): comment, gutter /\n --color-ansi-bright-black: var(--color-syntax-comment);\n\n / Ansi - Temporary /\n --color-ansi-selection: var(--color-gray-alpha-300);\n --color-ansi-bg: var(--color-background-200);\n --color-ansi-fg: var(--color-gray-1000);\n\n --color-ansi-white: var(--color-gray-700);\n --color-ansi-black: var(--color-gray-200);\n --color-ansi-blue: var(--color-blue-700);\n --color-ansi-red: var(--color-red-700);\n --color-ansi-bright-white: var(--color-gray-1000);\n --color-ansi-bright-blue: var(--color-blue-800);\n --color-ansi-bright-cyan: var(--color-blue-800);\n --color-ansi-bright-green: var(--color-green-800);\n --color-ansi-bright-magenta: var(--color-blue-800);\n --color-ansi-bright-red: var(--color-red-800);\n --color-ansi-bright-yellow: var(--color-amber-900);\n\n / Background Light /\n --color-background-100: #ffffff;\n --color-background-200: #fafafa;\n\n / Syntax Light /\n --color-syntax-comment: #666666;\n --color-syntax-constant: #171717;\n --color-syntax-function: #0068d6;\n --color-syntax-keyword: #c01b5d;\n --color-syntax-link: #067a6e;\n --color-syntax-parameter: #ad4b00;\n --color-syntax-punctuation: #171717;\n --color-syntax-string: #067a6e;\n --color-syntax-string-expression: #067a6e;\n\n / Gray Scale Light /\n --color-gray-100: #f2f2f2;\n --color-gray-200: #ebebeb;\n --color-gray-300: #e6e6e6;\n --color-gray-400: #eaeaea;\n --color-gray-500: #c9c9c9;\n --color-gray-600: #a8a8a8;\n --color-gray-700: #8f8f8f;\n --color-gray-800: #7d7d7d;\n --color-gray-900: #666666;\n --color-gray-1000: #171717;\n\n / Gray Alpha Scale Light /\n --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n / Blue Scale Light /\n --color-blue-100: #f0f7ff;\n --color-blue-200: #edf6ff;\n --color-blue-300: #e1f0ff;\n --color-blue-400: #cde7ff;\n --color-blue-500: #99ceff;\n --color-blue-600: #52aeff;\n --color-blue-700: #0070f3;\n --color-blue-800: #0060d1;\n --color-blue-900: #0067d6;\n --color-blue-1000: #0025ad;\n\n / Red Scale Light /\n --color-red-100: #fff0f0;\n --color-red-200: #ffebeb;\n --color-red-300: #ffe5e5;\n --color-red-400: #fdd8d8;\n --color-red-500: #f8baba;\n --color-red-600: #f87274;\n --color-red-700: #e5484d;\n --color-red-800: #da3036;\n --color-red-900: #ca2a30;\n --color-red-1000: #381316;\n\n / Amber Scale Light /\n --color-amber-100: #fff6e5;\n --color-amber-200: #fff4d5;\n --color-amber-300: #fef0cd;\n --color-amber-400: #ffddbf;\n --color-amber-500: #ffc96b;\n --color-amber-600: #f5b047;\n --color-amber-700: #ffb224;\n --color-amber-800: #ff990a;\n --color-amber-900: #a35200;\n --color-amber-1000: #4e2009;\n\n / Green Scale Light /\n --color-green-100: #effbef;\n --color-green-200: #eafaea;\n --color-green-300: #dcf6dc;\n --color-green-400: #c8f1c9;\n --color-green-500: #99e59f;\n --color-green-600: #6cda76;\n --color-green-700: #46a758;\n --color-green-800: #388e4a;\n --color-green-900: #297c3b;\n --color-green-1000: #18311e;\n\n / Turbopack Light - Temporary */\n --color-turbopack-text-red: #ff1e56;\n --color-turbopack-text-blue: #0096ff;\n --color-turbopack-border-red: #f0adbe;\n --color-turbopack-border-blue: #adccea;\n --color-turbopack-background-red: #fff7f9;\n --color-turbopack-background-blue: #f6fbff;\n }\n\n :host(.dark) {\n ${darkTheme}\n }\n\n @media (prefers-color-scheme: dark) {\n :host(:not(.light)) {\n ${darkTheme}\n }\n }\n `}\n </style>\n )\n}\n"],"names":["css","darkTheme","Colors","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,MAAMC,YAAYD;AAiGlB,iDAAiD;AACjD,OAAO,SAASE;IACd,qBACE,KAACC;kBACEH,wBAGK,iCAAiC;QACjC,+GAA+G;QAC/G,oIAAoI;QACpI,yEAAyE;QAEzE,6EAA6E;QAC7E,wEAAwE;QACxE,8DAA8D;QAC9D,IA+HAC,WAKEA;;AAMd"}

package/dist/esm/client/components/react-dev-overlay/ui/styles/component-styles.js CHANGED Viewed

@@ -22,6 +22,7 @@ function _templateObject() {
         "\n        ",
         "\n        ",
         "\n        ",
+        "\n        ",
         "\n      "
     ]);
     _templateObject = function() {
@@ -52,9 +53,10 @@ import { ENVIRONMENT_NAME_LABEL_STYLES } from '../components/errors/environment-
 import { DEV_TOOLS_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info';
 import { DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info';
 import { DEV_TOOLS_INFO_ROUTE_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/route-info';
+import { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/user-preferences';
 export function ComponentStyles() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject(), COPY_BUTTON_STYLES, CALL_STACK_FRAME_STYLES, ENVIRONMENT_NAME_LABEL_STYLES, overlay, toast, dialog, errorLayout, footer, bottomStack, pagination, CODE_FRAME_STYLES, TERMINAL_STYLES, EDITOR_LINK_STYLES, buildErrorStyles, containerErrorStyles, containerRuntimeErrorStyles, versionStaleness, DEV_TOOLS_INDICATOR_STYLES, DEV_TOOLS_INFO_STYLES, DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES, DEV_TOOLS_INFO_ROUTE_INFO_STYLES)
+        children: css(_templateObject(), COPY_BUTTON_STYLES, CALL_STACK_FRAME_STYLES, ENVIRONMENT_NAME_LABEL_STYLES, overlay, toast, dialog, errorLayout, footer, bottomStack, pagination, CODE_FRAME_STYLES, TERMINAL_STYLES, EDITOR_LINK_STYLES, buildErrorStyles, containerErrorStyles, containerRuntimeErrorStyles, versionStaleness, DEV_TOOLS_INDICATOR_STYLES, DEV_TOOLS_INFO_STYLES, DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES, DEV_TOOLS_INFO_ROUTE_INFO_STYLES, DEV_TOOLS_INFO_USER_PREFERENCES_STYLES)
     });
 }

package/dist/esm/client/components/react-dev-overlay/ui/styles/component-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/component-styles.tsx"],"sourcesContent":["import { CODE_FRAME_STYLES } from '../components/code-frame/code-frame'\nimport { styles as dialog } from '../components/dialog'\nimport { styles as errorLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport { styles as bottomStack } from '../components/errors/error-overlay-bottom-stack'\nimport { styles as pagination } from '../components/errors/error-overlay-pagination/error-overlay-pagination'\nimport { styles as overlay } from '../components/overlay/styles'\nimport { styles as footer } from '../components/errors/error-overlay-footer/error-overlay-footer'\nimport { TERMINAL_STYLES } from '../components/terminal/terminal'\nimport { styles as toast } from '../components/toast'\nimport { styles as versionStaleness } from '../components/version-staleness-info/version-staleness-info'\nimport { styles as buildErrorStyles } from '../container/build-error'\nimport { styles as containerErrorStyles } from '../container/errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/runtime-error'\nimport { COPY_BUTTON_STYLES } from '../components/copy-button'\nimport { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-stack-frame'\nimport { DEV_TOOLS_INDICATOR_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { css } from '../../utils/css'\nimport { EDITOR_LINK_STYLES } from '../components/terminal/editor-link'\nimport { ENVIRONMENT_NAME_LABEL_STYLES } from '../components/errors/environment-name-label/environment-name-label'\nimport { DEV_TOOLS_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info'\nimport { DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info'\nimport { DEV_TOOLS_INFO_ROUTE_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/route-info'\n\nexport function ComponentStyles() {\n return (\n <style>\n {css`\n ${COPY_BUTTON_STYLES}\n ${CALL_STACK_FRAME_STYLES}\n ${ENVIRONMENT_NAME_LABEL_STYLES}\n ${overlay}\n ${toast}\n ${dialog}\n ${errorLayout}\n ${footer}\n ${bottomStack}\n ${pagination}\n ${CODE_FRAME_STYLES}\n ${TERMINAL_STYLES}\n ${EDITOR_LINK_STYLES}\n ${buildErrorStyles}\n ${containerErrorStyles}\n ${containerRuntimeErrorStyles}\n ${versionStaleness}\n ${DEV_TOOLS_INDICATOR_STYLES}\n ${DEV_TOOLS_INFO_STYLES}\n ${DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES}\n ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}\n `}\n </style>\n )\n}\n"],"names":["CODE_FRAME_STYLES","styles","dialog","errorLayout","bottomStack","pagination","overlay","footer","TERMINAL_STYLES","toast","versionStaleness","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","COPY_BUTTON_STYLES","CALL_STACK_FRAME_STYLES","DEV_TOOLS_INDICATOR_STYLES","css","EDITOR_LINK_STYLES","ENVIRONMENT_NAME_LABEL_STYLES","DEV_TOOLS_INFO_STYLES","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","DEV_TOOLS_INFO_ROUTE_INFO_STYLES","ComponentStyles","style"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA,SAASA,iBAAiB,QAAQ,sCAAqC;AACvE,SAASC,UAAUC,MAAM,QAAQ,uBAAsB;AACvD,SAASD,UAAUE,WAAW,QAAQ,iEAAgE;AACtG,SAASF,UAAUG,WAAW,QAAQ,kDAAiD;AACvF,SAASH,UAAUI,UAAU,QAAQ,yEAAwE;AAC7G,SAASJ,UAAUK,OAAO,QAAQ,+BAA8B;AAChE,SAASL,UAAUM,MAAM,QAAQ,iEAAgE;AACjG,SAASC,eAAe,QAAQ,kCAAiC;AACjE,SAASP,UAAUQ,KAAK,QAAQ,sBAAqB;AACrD,SAASR,UAAUS,gBAAgB,QAAQ,8DAA6D;AACxG,SAAST,UAAUU,gBAAgB,QAAQ,2BAA0B;AACrE,SAASV,UAAUW,oBAAoB,QAAQ,sBAAqB;AACpE,SAASX,UAAUY,2BAA2B,QAAQ,6BAA4B;AAClF,SAASC,kBAAkB,QAAQ,4BAA2B;AAC9D,SAASC,uBAAuB,QAAQ,kDAAiD;AACzF,SAASC,0BAA0B,QAAQ,+DAA8D;AACzG,SAASC,GAAG,QAAQ,kBAAiB;AACrC,SAASC,kBAAkB,QAAQ,qCAAoC;AACvE,SAASC,6BAA6B,QAAQ,qEAAoE;AAClH,SAASC,qBAAqB,QAAQ,yEAAwE;AAC9G,SAASC,oCAAoC,QAAQ,yEAAwE;AAC7H,SAASC,gCAAgC,QAAQ,qEAAoE;~~AAErH~~,OAAO,SAASC;IACd,qBACE,KAACC;~~kBACEP~~,uBACGH,oBACAC,yBACAI,+BACAb,SACAG,OACAP,QACAC,aACAI,QACAH,aACAC,YACAL,mBACAQ,iBACAU,oBACAP,kBACAC,sBACAC,6BACAH,kBACAM,4BACAI,uBACAC,sCACAC;;AAIV"}
1	+ {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/component-styles.tsx"],"sourcesContent":["import { CODE_FRAME_STYLES } from '../components/code-frame/code-frame'\nimport { styles as dialog } from '../components/dialog'\nimport { styles as errorLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport { styles as bottomStack } from '../components/errors/error-overlay-bottom-stack'\nimport { styles as pagination } from '../components/errors/error-overlay-pagination/error-overlay-pagination'\nimport { styles as overlay } from '../components/overlay/styles'\nimport { styles as footer } from '../components/errors/error-overlay-footer/error-overlay-footer'\nimport { TERMINAL_STYLES } from '../components/terminal/terminal'\nimport { styles as toast } from '../components/toast'\nimport { styles as versionStaleness } from '../components/version-staleness-info/version-staleness-info'\nimport { styles as buildErrorStyles } from '../container/build-error'\nimport { styles as containerErrorStyles } from '../container/errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/runtime-error'\nimport { COPY_BUTTON_STYLES } from '../components/copy-button'\nimport { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-stack-frame'\nimport { DEV_TOOLS_INDICATOR_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { css } from '../../utils/css'\nimport { EDITOR_LINK_STYLES } from '../components/terminal/editor-link'\nimport { ENVIRONMENT_NAME_LABEL_STYLES } from '../components/errors/environment-name-label/environment-name-label'\nimport { DEV_TOOLS_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info'\nimport { DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info'\nimport { DEV_TOOLS_INFO_ROUTE_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/route-info'\nimport { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/user-preferences'\n\nexport function ComponentStyles() {\n return (\n <style>\n {css`\n ${COPY_BUTTON_STYLES}\n ${CALL_STACK_FRAME_STYLES}\n ${ENVIRONMENT_NAME_LABEL_STYLES}\n ${overlay}\n ${toast}\n ${dialog}\n ${errorLayout}\n ${footer}\n ${bottomStack}\n ${pagination}\n ${CODE_FRAME_STYLES}\n ${TERMINAL_STYLES}\n ${EDITOR_LINK_STYLES}\n ${buildErrorStyles}\n ${containerErrorStyles}\n ${containerRuntimeErrorStyles}\n ${versionStaleness}\n ${DEV_TOOLS_INDICATOR_STYLES}\n ${DEV_TOOLS_INFO_STYLES}\n ${DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES}\n ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}\n ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}\n `}\n </style>\n )\n}\n"],"names":["CODE_FRAME_STYLES","styles","dialog","errorLayout","bottomStack","pagination","overlay","footer","TERMINAL_STYLES","toast","versionStaleness","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","COPY_BUTTON_STYLES","CALL_STACK_FRAME_STYLES","DEV_TOOLS_INDICATOR_STYLES","css","EDITOR_LINK_STYLES","ENVIRONMENT_NAME_LABEL_STYLES","DEV_TOOLS_INFO_STYLES","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","DEV_TOOLS_INFO_ROUTE_INFO_STYLES","DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","ComponentStyles","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,iBAAiB,QAAQ,sCAAqC;AACvE,SAASC,UAAUC,MAAM,QAAQ,uBAAsB;AACvD,SAASD,UAAUE,WAAW,QAAQ,iEAAgE;AACtG,SAASF,UAAUG,WAAW,QAAQ,kDAAiD;AACvF,SAASH,UAAUI,UAAU,QAAQ,yEAAwE;AAC7G,SAASJ,UAAUK,OAAO,QAAQ,+BAA8B;AAChE,SAASL,UAAUM,MAAM,QAAQ,iEAAgE;AACjG,SAASC,eAAe,QAAQ,kCAAiC;AACjE,SAASP,UAAUQ,KAAK,QAAQ,sBAAqB;AACrD,SAASR,UAAUS,gBAAgB,QAAQ,8DAA6D;AACxG,SAAST,UAAUU,gBAAgB,QAAQ,2BAA0B;AACrE,SAASV,UAAUW,oBAAoB,QAAQ,sBAAqB;AACpE,SAASX,UAAUY,2BAA2B,QAAQ,6BAA4B;AAClF,SAASC,kBAAkB,QAAQ,4BAA2B;AAC9D,SAASC,uBAAuB,QAAQ,kDAAiD;AACzF,SAASC,0BAA0B,QAAQ,+DAA8D;AACzG,SAASC,GAAG,QAAQ,kBAAiB;AACrC,SAASC,kBAAkB,QAAQ,qCAAoC;AACvE,SAASC,6BAA6B,QAAQ,qEAAoE;AAClH,SAASC,qBAAqB,QAAQ,yEAAwE;AAC9G,SAASC,oCAAoC,QAAQ,yEAAwE;AAC7H,SAASC,gCAAgC,QAAQ,qEAAoE;AACrH,SAASC,sCAAsC,QAAQ,2EAA0E;AAEjI,OAAO,SAASC;IACd,qBACE,KAACC;kBACER,uBACGH,oBACAC,yBACAI,+BACAb,SACAG,OACAP,QACAC,aACAI,QACAH,aACAC,YACAL,mBACAQ,iBACAU,oBACAP,kBACAC,sBACAC,6BACAH,kBACAM,4BACAI,uBACAC,sCACAC,kCACAC;;AAIV"}

package/dist/esm/client/form-shared.js ADDED Viewed

@@ -0,0 +1,103 @@
+export const DISALLOWED_FORM_PROPS = [
+    'method',
+    'encType',
+    'target'
+];
+export function createFormSubmitDestinationUrl(action, formElement) {
+    let targetUrl;
+    try {
+        // NOTE: It might be more correct to resolve URLs relative to `document.baseURI`,
+        // but we already do it relative to `location.href` elsewhere:
+        //  (see e.g. https://github.com/vercel/next.js/blob/bb0e6722f87ceb2d43015f5b8a413d0072f2badf/packages/next/src/client/components/app-router.tsx#L146)
+        // so it's better to stay consistent.
+        const base = window.location.href;
+        targetUrl = new URL(action, base);
+    } catch (err) {
+        throw Object.defineProperty(new Error('Cannot parse form action "' + action + '" as a URL', {
+            cause: err
+        }), "__NEXT_ERROR_CODE", {
+            value: "E152",
+            enumerable: false,
+            configurable: true
+        });
+    }
+    if (targetUrl.searchParams.size) {
+        // url-encoded HTML forms *overwrite* any search params in the `action` url:
+        //
+        //  "Let `query` be the result of running the application/x-www-form-urlencoded serializer [...]"
+        //  "Set parsed action's query component to `query`."
+        //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-mutate-action
+        //
+        // We need to match that.
+        // (note that all other parts of the URL, like `hash`, are preserved)
+        targetUrl.search = '';
+    }
+    const formData = new FormData(formElement);
+    for (let [name, value] of formData){
+        if (typeof value !== 'string') {
+            // For file inputs, the native browser behavior is to use the filename as the value instead:
+            //
+            //   "If entry's value is a File object, then let value be entry's value's name. Otherwise, let value be entry's value."
+            //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
+            //
+            if (process.env.NODE_ENV === 'development') {
+                console.warn("<Form> only supports file inputs if `action` is a function. File inputs cannot be used if `action` is a string, " + "because files cannot be encoded as search params.");
+            }
+            value = value.name;
+        }
+        targetUrl.searchParams.append(name, value);
+    }
+    return targetUrl;
+}
+export function checkFormActionUrl(action, source) {
+    const aPropName = source === 'action' ? "an `action`" : "a `formAction`";
+    let testUrl;
+    try {
+        testUrl = new URL(action, 'http://n');
+    } catch (err) {
+        console.error("<Form> received " + aPropName + ' that cannot be parsed as a URL: "' + action + '".');
+        return;
+    }
+    // url-encoded HTML forms ignore any queryparams in the `action` url. We need to match that.
+    if (testUrl.searchParams.size) {
+        console.warn("<Form> received " + aPropName + ' that contains search params: "' + action + '". This is not supported, and they will be ignored. ' + 'If you need to pass in additional search params, use an `<input type="hidden" />` instead.');
+    }
+}
+export const isSupportedFormEncType = (value)=>value === 'application/x-www-form-urlencoded';
+export const isSupportedFormMethod = (value)=>value === 'get';
+export const isSupportedFormTarget = (value)=>value === '_self';
+export function hasUnsupportedSubmitterAttributes(submitter) {
+    // A submitter can override `encType` for the form.
+    const formEncType = submitter.getAttribute('formEncType');
+    if (formEncType !== null && !isSupportedFormEncType(formEncType)) {
+        if (process.env.NODE_ENV === 'development') {
+            console.error("<Form>'s `encType` was set to an unsupported value via `formEncType=\"" + formEncType + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
+        }
+        return true;
+    }
+    // A submitter can override `method` for the form.
+    const formMethod = submitter.getAttribute('formMethod');
+    if (formMethod !== null && !isSupportedFormMethod(formMethod)) {
+        if (process.env.NODE_ENV === 'development') {
+            console.error("<Form>'s `method` was set to an unsupported value via `formMethod=\"" + formMethod + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
+        }
+        return true;
+    }
+    // A submitter can override `target` for the form.
+    const formTarget = submitter.getAttribute('formTarget');
+    if (formTarget !== null && !isSupportedFormTarget(formTarget)) {
+        if (process.env.NODE_ENV === 'development') {
+            console.error("<Form>'s `target` was set to an unsupported value via `formTarget=\"" + formTarget + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
+        }
+        return true;
+    }
+    return false;
+}
+export function hasReactClientActionAttributes(submitter) {
+    // CSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L482-L487
+    // SSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2401
+    const action = submitter.getAttribute('formAction');
+    return action && /\s*javascript:/i.test(action);
+}
+//# sourceMappingURL=form-shared.js.map

package/dist/esm/client/form-shared.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/client/form-shared.tsx"],"sourcesContent":["import type { HTMLProps } from 'react'\n\nexport const DISALLOWED_FORM_PROPS = ['method', 'encType', 'target'] as const\n\ntype HTMLFormProps = HTMLProps<HTMLFormElement>\ntype DisallowedFormProps = (typeof DISALLOWED_FORM_PROPS)[number]\n\ntype InternalFormProps = {\n /**\n * `action` can be either a `string` or a function.\n * - If `action` is a string, it will be interpreted as a path or URL to navigate to when the form is submitted.\n * The path will be prefetched when the form becomes visible.\n * - If `action` is a function, it will be called when the form is submitted. See the [React docs](https://react.dev/reference/react-dom/components/form#props) for more.\n */\n action: NonNullable<HTMLFormProps['action']>\n /**\n * Controls how the route specified by `action` is prefetched.\n * Any `<Form />` that is in the viewport (initially or through scroll) will be prefetched.\n * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.\n *\n * Options:\n * - `null` (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [`loading.js`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.\n * - `false`: This will not prefetch any data.\n *\n * In pages dir, prefetching is not supported, and passing this prop will emit a warning.\n *\n * @defaultValue `null`\n */\n prefetch?: false | null\n /**\n * Whether submitting the form should replace the current `history` state instead of adding a new url into the stack.\n * Only valid if `action` is a string.\n *\n * @defaultValue `false`\n */\n replace?: boolean\n /**\n * Override the default scroll behavior when navigating.\n * Only valid if `action` is a string.\n *\n * @defaultValue `true`\n */\n scroll?: boolean\n} & Omit<HTMLFormProps, 'action' | DisallowedFormProps>\n\n// `RouteInferType` is a stub here to avoid breaking `typedRoutes` when the type\n// isn't generated yet. It will be replaced when the webpack plugin runs.\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type FormProps<RouteInferType = any> = InternalFormProps\n\nexport function createFormSubmitDestinationUrl(\n action: string,\n formElement: HTMLFormElement\n) {\n let targetUrl: URL\n try {\n // NOTE: It might be more correct to resolve URLs relative to `document.baseURI`,\n // but we already do it relative to `location.href` elsewhere:\n // (see e.g. https://github.com/vercel/next.js/blob/bb0e6722f87ceb2d43015f5b8a413d0072f2badf/packages/next/src/client/components/app-router.tsx#L146)\n // so it's better to stay consistent.\n const base = window.location.href\n targetUrl = new URL(action, base)\n } catch (err) {\n throw new Error(`Cannot parse form action \"${action}\" as a URL`, {\n cause: err,\n })\n }\n if (targetUrl.searchParams.size) {\n // url-encoded HTML forms *overwrite* any search params in the `action` url:\n //\n // \"Let `query` be the result of running the application/x-www-form-urlencoded serializer [...]\"\n // \"Set parsed action's query component to `query`.\"\n // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-mutate-action\n //\n // We need to match that.\n // (note that all other parts of the URL, like `hash`, are preserved)\n targetUrl.search = ''\n }\n\n const formData = new FormData(formElement)\n\n for (let [name, value] of formData) {\n if (typeof value !== 'string') {\n // For file inputs, the native browser behavior is to use the filename as the value instead:\n //\n // \"If entry's value is a File object, then let value be entry's value's name. Otherwise, let value be entry's value.\"\n // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs\n //\n if (process.env.NODE_ENV === 'development') {\n console.warn(\n `<Form> only supports file inputs if \\`action\\` is a function. File inputs cannot be used if \\`action\\` is a string, ` +\n `because files cannot be encoded as search params.`\n )\n }\n value = value.name\n }\n\n targetUrl.searchParams.append(name, value)\n }\n return targetUrl\n}\n\nexport function checkFormActionUrl(\n action: string,\n source: 'action' | 'formAction'\n) {\n const aPropName = source === 'action' ? `an \\`action\\`` : `a \\`formAction\\``\n\n let testUrl: URL\n try {\n testUrl = new URL(action, 'http://n')\n } catch (err) {\n console.error(\n `<Form> received ${aPropName} that cannot be parsed as a URL: \"${action}\".`\n )\n return\n }\n\n // url-encoded HTML forms ignore any queryparams in the `action` url. We need to match that.\n if (testUrl.searchParams.size) {\n console.warn(\n `<Form> received ${aPropName} that contains search params: \"${action}\". This is not supported, and they will be ignored. ` +\n `If you need to pass in additional search params, use an \\`<input type=\"hidden\" />\\` instead.`\n )\n }\n}\n\nexport const isSupportedFormEncType = (value: string) =>\n value === 'application/x-www-form-urlencoded'\nexport const isSupportedFormMethod = (value: string) => value === 'get'\nexport const isSupportedFormTarget = (value: string) => value === '_self'\n\nexport function hasUnsupportedSubmitterAttributes(\n submitter: HTMLElement\n): boolean {\n // A submitter can override `encType` for the form.\n const formEncType = submitter.getAttribute('formEncType')\n if (formEncType !== null && !isSupportedFormEncType(formEncType)) {\n if (process.env.NODE_ENV === 'development') {\n console.error(\n `<Form>'s \\`encType\\` was set to an unsupported value via \\`formEncType=\"${formEncType}\"\\`. ` +\n `This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.`\n )\n }\n return true\n }\n\n // A submitter can override `method` for the form.\n const formMethod = submitter.getAttribute('formMethod')\n if (formMethod !== null && !isSupportedFormMethod(formMethod)) {\n if (process.env.NODE_ENV === 'development') {\n console.error(\n `<Form>'s \\`method\\` was set to an unsupported value via \\`formMethod=\"${formMethod}\"\\`. ` +\n `This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.`\n )\n }\n return true\n }\n\n // A submitter can override `target` for the form.\n const formTarget = submitter.getAttribute('formTarget')\n if (formTarget !== null && !isSupportedFormTarget(formTarget)) {\n if (process.env.NODE_ENV === 'development') {\n console.error(\n `<Form>'s \\`target\\` was set to an unsupported value via \\`formTarget=\"${formTarget}\"\\`. ` +\n `This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.`\n )\n }\n return true\n }\n\n return false\n}\n\nexport function hasReactClientActionAttributes(submitter: HTMLElement) {\n // CSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L482-L487\n // SSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2401\n const action = submitter.getAttribute('formAction')\n return action && /\\s*javascript:/i.test(action)\n}\n"],"names":["DISALLOWED_FORM_PROPS","createFormSubmitDestinationUrl","action","formElement","targetUrl","base","window","location","href","URL","err","Error","cause","searchParams","size","search","formData","FormData","name","value","process","env","NODE_ENV","console","warn","append","checkFormActionUrl","source","aPropName","testUrl","error","isSupportedFormEncType","isSupportedFormMethod","isSupportedFormTarget","hasUnsupportedSubmitterAttributes","submitter","formEncType","getAttribute","formMethod","formTarget","hasReactClientActionAttributes","test"],"mappings":"AAEA,OAAO,MAAMA,wBAAwB;IAAC;IAAU;IAAW;CAAS,CAAS;AAgD7E,OAAO,SAASC,+BACdC,MAAc,EACdC,WAA4B;IAE5B,IAAIC;IACJ,IAAI;QACF,iFAAiF;QACjF,8DAA8D;QAC9D,sJAAsJ;QACtJ,qCAAqC;QACrC,MAAMC,OAAOC,OAAOC,QAAQ,CAACC,IAAI;QACjCJ,YAAY,IAAIK,IAAIP,QAAQG;IAC9B,EAAE,OAAOK,KAAK;QACZ,MAAM,qBAEJ,CAFI,IAAIC,MAAM,AAAC,+BAA4BT,SAAO,cAAa;YAC/DU,OAAOF;QACT,IAFM,qBAAA;mBAAA;wBAAA;0BAAA;QAEL;IACH;IACA,IAAIN,UAAUS,YAAY,CAACC,IAAI,EAAE;QAC/B,4EAA4E;QAC5E,EAAE;QACF,iGAAiG;QACjG,qDAAqD;QACrD,iGAAiG;QACjG,EAAE;QACF,yBAAyB;QACzB,qEAAqE;QACrEV,UAAUW,MAAM,GAAG;IACrB;IAEA,MAAMC,WAAW,IAAIC,SAASd;IAE9B,KAAK,IAAI,CAACe,MAAMC,MAAM,IAAIH,SAAU;QAClC,IAAI,OAAOG,UAAU,UAAU;YAC7B,4FAA4F;YAC5F,EAAE;YACF,wHAAwH;YACxH,mIAAmI;YACnI,EAAE;YACF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1CC,QAAQC,IAAI,CACV,AAAC,qHACE;YAEP;YACAL,QAAQA,MAAMD,IAAI;QACpB;QAEAd,UAAUS,YAAY,CAACY,MAAM,CAACP,MAAMC;IACtC;IACA,OAAOf;AACT;AAEA,OAAO,SAASsB,mBACdxB,MAAc,EACdyB,MAA+B;IAE/B,MAAMC,YAAYD,WAAW,WAAY,gBAAkB;IAE3D,IAAIE;IACJ,IAAI;QACFA,UAAU,IAAIpB,IAAIP,QAAQ;IAC5B,EAAE,OAAOQ,KAAK;QACZa,QAAQO,KAAK,CACX,AAAC,qBAAkBF,YAAU,uCAAoC1B,SAAO;QAE1E;IACF;IAEA,4FAA4F;IAC5F,IAAI2B,QAAQhB,YAAY,CAACC,IAAI,EAAE;QAC7BS,QAAQC,IAAI,CACV,AAAC,qBAAkBI,YAAU,oCAAiC1B,SAAO,yDAClE;IAEP;AACF;AAEA,OAAO,MAAM6B,yBAAyB,CAACZ,QACrCA,UAAU,oCAAmC;AAC/C,OAAO,MAAMa,wBAAwB,CAACb,QAAkBA,UAAU,MAAK;AACvE,OAAO,MAAMc,wBAAwB,CAACd,QAAkBA,UAAU,QAAO;AAEzE,OAAO,SAASe,kCACdC,SAAsB;IAEtB,mDAAmD;IACnD,MAAMC,cAAcD,UAAUE,YAAY,CAAC;IAC3C,IAAID,gBAAgB,QAAQ,CAACL,uBAAuBK,cAAc;QAChE,IAAIhB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1CC,QAAQO,KAAK,CACX,AAAC,2EAA0EM,cAAY,SACpF;QAEP;QACA,OAAO;IACT;IAEA,kDAAkD;IAClD,MAAME,aAAaH,UAAUE,YAAY,CAAC;IAC1C,IAAIC,eAAe,QAAQ,CAACN,sBAAsBM,aAAa;QAC7D,IAAIlB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1CC,QAAQO,KAAK,CACX,AAAC,yEAAwEQ,aAAW,SACjF;QAEP;QACA,OAAO;IACT;IAEA,kDAAkD;IAClD,MAAMC,aAAaJ,UAAUE,YAAY,CAAC;IAC1C,IAAIE,eAAe,QAAQ,CAACN,sBAAsBM,aAAa;QAC7D,IAAInB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1CC,QAAQO,KAAK,CACX,AAAC,yEAAwES,aAAW,SACjF;QAEP;QACA,OAAO;IACT;IAEA,OAAO;AACT;AAEA,OAAO,SAASC,+BAA+BL,SAAsB;IACnE,6JAA6J;IAC7J,yJAAyJ;IACzJ,MAAMjC,SAASiC,UAAUE,YAAY,CAAC;IACtC,OAAOnC,UAAU,kBAAkBuC,IAAI,CAACvC;AAC1C"}

package/dist/esm/client/form.js CHANGED Viewed

@@ -1,94 +1,51 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useContext } from 'react';
+import { useContext, forwardRef } from 'react';
 import { addBasePath } from './add-base-path';
-import { useIntersection } from './use-intersection';
-import { useMergedRef } from './use-merged-ref';
-import { AppRouterContext } from '../shared/lib/app-router-context.shared-runtime';
-import { PrefetchKind } from './components/router-reducer/router-reducer-types';
 import { RouterContext } from '../shared/lib/router-context.shared-runtime';
-const DISALLOWED_FORM_PROPS = [
-    'method',
-    'encType',
-    'target'
-];
-export default function Form(param) {
-    let { replace, scroll, prefetch: prefetchProp, ref: externalRef, ...props } = param;
-    const router = useAppOrPagesRouter();
+import { checkFormActionUrl, createFormSubmitDestinationUrl, DISALLOWED_FORM_PROPS, hasReactClientActionAttributes, hasUnsupportedSubmitterAttributes } from './form-shared';
+const Form = /*#__PURE__*/ forwardRef(function FormComponent(param, ref) {
+    let { replace, scroll, prefetch: prefetchProp, ...props } = param;
+    const router = useContext(RouterContext);
     const actionProp = props.action;
     const isNavigatingForm = typeof actionProp === 'string';
     // Validate `action`
     if (process.env.NODE_ENV === 'development') {
         if (isNavigatingForm) {
-            checkActionUrl(actionProp, 'action');
+            checkFormActionUrl(actionProp, 'action');
         }
     }
     // Validate `prefetch`
     if (process.env.NODE_ENV === 'development') {
-        if (!(prefetchProp === undefined || prefetchProp === false || prefetchProp === null)) {
-            console.error('The `prefetch` prop of <Form> must be `false` or `null`');
-        }
         if (prefetchProp !== undefined) {
-            if (!isAppRouter(router)) {
-                console.error('Passing `prefetch` to a <Form> has no effect in the pages directory.');
-            } else if (!isNavigatingForm) {
-                console.error('Passing `prefetch` to a <Form> whose `action` is a function has no effect.');
-            }
+            console.error('Passing `prefetch` to a <Form> has no effect in the pages directory.');
         }
     }
-    const prefetch = prefetchProp === false || prefetchProp === null ? prefetchProp : null;
     // Validate `scroll` and `replace`
     if (process.env.NODE_ENV === 'development') {
         if (!isNavigatingForm && (replace !== undefined || scroll !== undefined)) {
-            console.error('Passing `replace` or `scroll` to a <Form> whose `action` is a function has no effect.\n' + 'See the relevant docs to learn how to control this behavior for navigations triggered from actions:\n' + '  `redirect()`       - https://nextjs.org/docs/app/api-reference/functions/redirect#parameters\n' + '  `router.replace()` - https://nextjs.org/docs/app/api-reference/functions/use-router#userouter\n');
+            console.error('Passing `replace` or `scroll` to a <Form> whose `action` is a function has no effect.\n' + 'See the relevant docs to learn how to control this behavior for navigations triggered from actions:\n' + '  `router.replace()` - https://nextjs.org/docs/pages/api-reference/functions/use-router#routerreplace\n');
         }
     }
     // Clean up any unsupported form props (and warn if present)
     for (const key of DISALLOWED_FORM_PROPS){
         if (key in props) {
             if (process.env.NODE_ENV === 'development') {
-                console.error("<Form> does not support changing `" + key + "`. " + (isNavigatingForm ? "If you'd like to use it to perform a mutation, consider making `action` a function instead.\n" + "Learn more: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations" : ''));
+                console.error("<Form> does not support changing `" + key + "`.");
             }
             delete props[key];
         }
     }
-    const isPrefetchEnabled = // there is no notion of instant loading states in pages dir, so prefetching is pointless
-    isAppRouter(router) && // if we don't have an action path, we can't preload anything anyway.
-    isNavigatingForm && prefetch === null;
-    const [setIntersectionRef, isVisible] = useIntersection({
-        rootMargin: '200px',
-        disabled: !isPrefetchEnabled
-    });
-    const ownRef = useMergedRef(setIntersectionRef, externalRef != null ? externalRef : null);
-    useEffect(()=>{
-        if (!isVisible || !isPrefetchEnabled) {
-            return;
-        }
-        try {
-            const prefetchKind = PrefetchKind.AUTO;
-            router.prefetch(actionProp, {
-                kind: prefetchKind
-            });
-        } catch (err) {
-            console.error(err);
-        }
-    }, [
-        isPrefetchEnabled,
-        isVisible,
-        actionProp,
-        prefetch,
-        router
-    ]);
     if (!isNavigatingForm) {
         return /*#__PURE__*/ _jsx("form", {
             ...props,
-            ref: ownRef
+            ref: ref
         });
     }
     const actionHref = addBasePath(actionProp);
     return /*#__PURE__*/ _jsx("form", {
         ...props,
-        ref: ownRef,
+        ref: ref,
         action: actionHref,
         onSubmit: (event)=>onFormSubmit(event, {
                 router,
@@ -98,7 +55,8 @@ export default function Form(param) {
                 onSubmit: props.onSubmit
             })
     });
-}
+});
+export default Form;
 function onFormSubmit(event, param) {
     let { actionHref, onSubmit, replace, scroll, router } = param;
     if (typeof onSubmit === 'function') {
@@ -109,18 +67,17 @@ function onFormSubmit(event, param) {
             return;
         }
     }
+    if (!router) {
+        // Form was somehow used outside of the router (but not in app/, the implementation is forked!).
+        // We can't perform a soft navigation, so let the native submit handling do its thing.
+        return;
+    }
     const formElement = event.currentTarget;
     const submitter = event.nativeEvent.submitter;
     let action = actionHref;
     if (submitter) {
-        if (process.env.NODE_ENV === 'development') {
-            // the way server actions are encoded (e.g. `formMethod="post")
-            // causes some unnecessary dev-mode warnings from `hasUnsupportedSubmitterAttributes`.
-            // we'd bail out anyway, but we just do it silently.
-            if (hasReactServerActionAttributes(submitter)) {
-                return;
-            }
-        }
+        // this is page-router-only, so we don't need to worry about false positives
+        // from the attributes that react adds for server actions.
         if (hasUnsupportedSubmitterAttributes(submitter)) {
             return;
         }
@@ -135,143 +92,28 @@ function onFormSubmit(event, param) {
         const submitterFormAction = submitter.getAttribute('formAction');
         if (submitterFormAction !== null) {
             if (process.env.NODE_ENV === 'development') {
-                checkActionUrl(submitterFormAction, 'formAction');
+                checkFormActionUrl(submitterFormAction, 'formAction');
             }
             action = submitterFormAction;
         }
     }
-    let targetUrl;
-    try {
-        // NOTE: It might be more correct to resolve URLs relative to `document.baseURI`,
-        // but we already do it relative to `location.href` elsewhere:
-        //  (see e.g. https://github.com/vercel/next.js/blob/bb0e6722f87ceb2d43015f5b8a413d0072f2badf/packages/next/src/client/components/app-router.tsx#L146)
-        // so it's better to stay consistent.
-        const base = window.location.href;
-        targetUrl = new URL(action, base);
-    } catch (err) {
-        throw Object.defineProperty(new Error('Cannot parse form action "' + action + '" as a URL', {
-            cause: err
-        }), "__NEXT_ERROR_CODE", {
-            value: "E152",
-            enumerable: false,
-            configurable: true
-        });
-    }
-    if (targetUrl.searchParams.size) {
-        // url-encoded HTML forms *overwrite* any search params in the `action` url:
-        //
-        //  "Let `query` be the result of running the application/x-www-form-urlencoded serializer [...]"
-        //  "Set parsed action's query component to `query`."
-        //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#submit-mutate-action
-        //
-        // We need to match that.
-        // (note that all other parts of the URL, like `hash`, are preserved)
-        targetUrl.search = '';
-    }
-    const formData = new FormData(formElement);
-    for (let [name, value] of formData){
-        if (typeof value !== 'string') {
-            // For file inputs, the native browser behavior is to use the filename as the value instead:
-            //
-            //   "If entry's value is a File object, then let value be entry's value's name. Otherwise, let value be entry's value."
-            //   https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
-            //
-            if (process.env.NODE_ENV === 'development') {
-                console.warn("<Form> only supports file inputs if `action` is a function. File inputs cannot be used if `action` is a string, " + "because files cannot be encoded as search params.");
-            }
-            value = value.name;
-        }
-        targetUrl.searchParams.append(name, value);
-    }
+    const targetUrl = createFormSubmitDestinationUrl(action, formElement);
     // Finally, no more reasons for bailing out.
     event.preventDefault();
     const method = replace ? 'replace' : 'push';
-    const targetHref = targetUrl.href;
-    if (isAppRouter(router)) {
-        router[method](targetHref, {
-            scroll
-        });
-    } else {
-        // TODO(form): Make this use a transition so that pending states work
-        //
-        // Unlike the app router, pages router doesn't use startTransition,
-        // and can't easily be wrapped in one because of implementation details
-        // (e.g. it doesn't use any react state)
-        // But it's important to have this wrapped in a transition because
-        // pending states from e.g. `useFormStatus` rely on that.
-        // So this needs some follow up work.
-        router[method](targetHref, undefined, {
-            scroll
-        });
-    }
-}
-function isAppRouter(router) {
-    return !('asPath' in router);
-}
-function useAppOrPagesRouter() {
-    const pagesRouter = useContext(RouterContext);
-    const appRouter = useContext(AppRouterContext);
-    if (pagesRouter) {
-        return pagesRouter;
-    } else {
-        // We're in the app directory if there is no pages router.
-        return appRouter;
-    }
-}
-function checkActionUrl(action, source) {
-    const aPropName = source === 'action' ? "an `action`" : "a `formAction`";
-    let testUrl;
-    try {
-        testUrl = new URL(action, 'http://n');
-    } catch (err) {
-        console.error("<Form> received " + aPropName + ' that cannot be parsed as a URL: "' + action + '".');
-        return;
-    }
-    // url-encoded HTML forms ignore any queryparams in the `action` url. We need to match that.
-    if (testUrl.searchParams.size) {
-        console.warn("<Form> received " + aPropName + ' that contains search params: "' + action + '". This is not supported, and they will be ignored. ' + 'If you need to pass in additional search params, use an `<input type="hidden" />` instead.');
-    }
-}
-const isSupportedEncType = (value)=>value === 'application/x-www-form-urlencoded';
-const isSupportedMethod = (value)=>value === 'get';
-const isSupportedTarget = (value)=>value === '_self';
-function hasUnsupportedSubmitterAttributes(submitter) {
-    // A submitter can override `encType` for the form.
-    const formEncType = submitter.getAttribute('formEncType');
-    if (formEncType !== null && !isSupportedEncType(formEncType)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error("<Form>'s `encType` was set to an unsupported value via `formEncType=\"" + formEncType + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
-        }
-        return true;
-    }
-    // A submitter can override `method` for the form.
-    const formMethod = submitter.getAttribute('formMethod');
-    if (formMethod !== null && !isSupportedMethod(formMethod)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error("<Form>'s `method` was set to an unsupported value via `formMethod=\"" + formMethod + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
-        }
-        return true;
-    }
-    // A submitter can override `target` for the form.
-    const formTarget = submitter.getAttribute('formTarget');
-    if (formTarget !== null && !isSupportedTarget(formTarget)) {
-        if (process.env.NODE_ENV === 'development') {
-            console.error("<Form>'s `target` was set to an unsupported value via `formTarget=\"" + formTarget + '"`. ' + "This will disable <Form>'s navigation functionality. If you need this, use a native <form> element instead.");
-        }
-        return true;
-    }
-    return false;
-}
-function hasReactServerActionAttributes(submitter) {
-    // https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-client/src/ReactFlightReplyClient.js#L931-L934
-    const name = submitter.getAttribute('name');
-    return name && (name.startsWith('$ACTION_ID_') || name.startsWith('$ACTION_REF_'));
-}
-function hasReactClientActionAttributes(submitter) {
-    // CSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L482-L487
-    // SSR: https://github.com/facebook/react/blob/942eb80381b96f8410eab1bef1c539bed1ab0eb1/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2401
-    const action = submitter.getAttribute('formAction');
-    return action && /\s*javascript:/i.test(action);
+    const targetHref = targetUrl.href // TODO: will pages router be happy about an absolute URL here?
+    ;
+    // TODO(form): Make this use a transition so that pending states work
+    //
+    // Unlike the app router, pages router doesn't use startTransition,
+    // and can't easily be wrapped in one because of implementation details
+    // (e.g. it doesn't use any react state)
+    // But it's important to have this wrapped in a transition because
+    // pending states from e.g. `useFormStatus` rely on that.
+    // So this needs some follow up work.
+    router[method](targetHref, undefined, {
+        scroll
+    });
 }
 //# sourceMappingURL=form.js.map