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/client/components/react-dev-overlay/ui/icons/light-icon.js ADDED Viewed

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return LightIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+function LightIcon() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("g", {
+                clipPath: "url(#a)",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    fill: "currentColor",
+                    fillRule: "evenodd",
+                    d: "M8.75.75V0h-1.5v2h1.5V.75ZM3.26 4.32l-.53-.53-.354-.353-.53-.53 1.06-1.061.53.53.354.354.53.53-1.06 1.06Zm8.42-1.06.53-.53.353-.354.53-.53 1.061 1.06-.53.53-.354.354-.53.53-1.06-1.06ZM8 11.25a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5Zm0 1.5a4.75 4.75 0 1 0 0-9.5 4.75 4.75 0 0 0 0 9.5Zm6-5.5h2v1.5h-2v-1.5Zm-13.25 0H0v1.5h2v-1.5H.75Zm1.62 5.32-.53.53 1.06 1.06.53-.53.354-.353.53-.53-1.06-1.061-.53.53-.354.354Zm10.2 1.06.53.53 1.06-1.06-.53-.53-.354-.354-.53-.53-1.06 1.06.53.53.353.354ZM8.75 14v2h-1.5v-2h1.5Z",
+                    clipRule: "evenodd"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("defs", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("clipPath", {
+                    id: "a",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                        fill: "currentColor",
+                        d: "M0 0h16v16H0z"
+                    })
+                })
+            })
+        ]
+    });
+}
+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=light-icon.js.map

package/dist/client/components/react-dev-overlay/ui/icons/light-icon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/icons/light-icon.tsx"],"sourcesContent":["export default function LightIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <g clipPath=\"url(#a)\">\n <path\n fill=\"currentColor\"\n fillRule=\"evenodd\"\n d=\"M8.75.75V0h-1.5v2h1.5V.75ZM3.26 4.32l-.53-.53-.354-.353-.53-.53 1.06-1.061.53.53.354.354.53.53-1.06 1.06Zm8.42-1.06.53-.53.353-.354.53-.53 1.061 1.06-.53.53-.354.354-.53.53-1.06-1.06ZM8 11.25a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5Zm0 1.5a4.75 4.75 0 1 0 0-9.5 4.75 4.75 0 0 0 0 9.5Zm6-5.5h2v1.5h-2v-1.5Zm-13.25 0H0v1.5h2v-1.5H.75Zm1.62 5.32-.53.53 1.06 1.06.53-.53.354-.353.53-.53-1.06-1.061-.53.53-.354.354Zm10.2 1.06.53.53 1.06-1.06-.53-.53-.354-.354-.53-.53-1.06 1.06.53.53.353.354ZM8.75 14v2h-1.5v-2h1.5Z\"\n clipRule=\"evenodd\"\n />\n </g>\n <defs>\n <clipPath id=\"a\">\n <path fill=\"currentColor\" d=\"M0 0h16v16H0z\" />\n </clipPath>\n </defs>\n </svg>\n )\n}\n"],"names":["LightIcon","svg","xmlns","width","height","viewBox","fill","g","clipPath","path","fillRule","d","clipRule","defs","id"],"mappings":";;;;+BAAA;;;eAAwBA;;;;AAAT,SAASA;IACtB,qBACE,sBAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;;0BAEL,qBAACC;gBAAEC,UAAS;0BACV,cAAA,qBAACC;oBACCH,MAAK;oBACLI,UAAS;oBACTC,GAAE;oBACFC,UAAS;;;0BAGb,qBAACC;0BACC,cAAA,qBAACL;oBAASM,IAAG;8BACX,cAAA,qBAACL;wBAAKH,MAAK;wBAAeK,GAAE;;;;;;AAKtC"}

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

@@ -13,16 +13,28 @@ const _jsxruntime = require("react/jsx-runtime");
 const _css = require("../../utils/css");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n        :host {\n          /* \n            Although the style applied to the shadow host is isolated,\n            the element that attached the shadow host (i.e. \"nextjs-portal\")\n            is still affected by the parent's style (e.g. \"body\"). This may\n            occur style conflicts like \"display: flex\", with other children\n            elements therefore give the shadow host an absolute position.\n          */\n          position: absolute;\n\n          --color-font: #757575;\n          --color-backdrop: rgba(250, 250, 250, 0.8);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n            'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n            monospace;\n          --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n            'Source Sans Pro', sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --focus-color: var(--color-blue-800);\n          --focus-ring: 2px solid var(--focus-color);\n\n          --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n          --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n          --rounded-none: 0px;\n          --rounded-sm: 2px;\n          --rounded-md: 4px;\n          --rounded-md-2: 6px;\n          --rounded-lg: 8px;\n          --rounded-xl: 12px;\n          --rounded-2xl: 16px;\n          --rounded-3xl: 24px;\n          --rounded-4xl: 32px;\n          --rounded-full: 9999px;\n\n          /* \n            Suffix N of --size-N as px value when the base font size is 16px.\n            Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n          */\n          --size-1: 0.0625rem; /* 1px */\n          --size-2: 0.125rem; /* 2px */\n          --size-3: 0.1875rem; /* 3px */\n          --size-4: 0.25rem; /* ...and more */\n          --size-5: 0.3125rem;\n          --size-6: 0.375rem;\n          --size-7: 0.4375rem;\n          --size-8: 0.5rem;\n          --size-9: 0.5625rem;\n          --size-10: 0.625rem;\n          --size-11: 0.6875rem;\n          --size-12: 0.75rem;\n          --size-13: 0.8125rem;\n          --size-14: 0.875rem;\n          --size-15: 0.9375rem;\n          /* If the base font size of the dev overlay changes e.g. 18px, \n          just slide the window and make --size-18 as 1rem. */\n          --size-16: 1rem;\n          --size-17: 1.0625rem;\n          --size-18: 1.125rem;\n          --size-20: 1.25rem;\n          --size-22: 1.375rem;\n          --size-24: 1.5rem;\n          --size-26: 1.625rem;\n          --size-28: 1.75rem;\n          --size-30: 1.875rem;\n          --size-32: 2rem;\n          --size-34: 2.125rem;\n          --size-36: 2.25rem;\n          --size-38: 2.375rem;\n          --size-40: 2.5rem;\n          --size-42: 2.625rem;\n          --size-44: 2.75rem;\n          --size-46: 2.875rem;\n          --size-48: 3rem;\n\n          @media print {\n            display: none;\n          }\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-font: white;\n            --color-backdrop: rgb(0, 0, 0, 0.8);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-notes: #a9a9a9;\n          }\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: 8px;\n          font-weight: 500;\n          line-height: 1.5;\n        }\n\n        a {\n          color: var(--color-blue-900);\n          &:hover {\n            color: var(--color-blue-900);\n          }\n          &:focus {\n            outline: var(--focus-ring);\n          }\n        }\n      "
+        "\n  --color-font: white;\n  --color-backdrop: rgba(0, 0, 0, 0.8);\n  --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n  --color-title-color: #fafafa;\n  --color-stack-notes: #a9a9a9;\n"
     ]);
     _templateObject = function() {
         return data;
     };
     return data;
 }
+function _templateObject1() {
+    const data = _tagged_template_literal_loose._([
+        "\n        :host {\n          /* \n            Although the style applied to the shadow host is isolated,\n            the element that attached the shadow host (i.e. \"nextjs-portal\")\n            is still affected by the parent's style (e.g. \"body\"). This may\n            occur style conflicts like \"display: flex\", with other children\n            elements therefore give the shadow host an absolute position.\n          */\n          position: absolute;\n\n          --color-font: #757575;\n          --color-backdrop: rgba(250, 250, 250, 0.8);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n            'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n            monospace;\n          --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n            'Source Sans Pro', sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --focus-color: var(--color-blue-800);\n          --focus-ring: 2px solid var(--focus-color);\n\n          --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n          --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n          --rounded-none: 0px;\n          --rounded-sm: 2px;\n          --rounded-md: 4px;\n          --rounded-md-2: 6px;\n          --rounded-lg: 8px;\n          --rounded-xl: 12px;\n          --rounded-2xl: 16px;\n          --rounded-3xl: 24px;\n          --rounded-4xl: 32px;\n          --rounded-full: 9999px;\n\n          /* \n            Suffix N of --size-N as px value when the base font size is 16px.\n            Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n          */\n          --size-1: 0.0625rem; /* 1px */\n          --size-2: 0.125rem; /* 2px */\n          --size-3: 0.1875rem; /* 3px */\n          --size-4: 0.25rem; /* ...and more */\n          --size-5: 0.3125rem;\n          --size-6: 0.375rem;\n          --size-7: 0.4375rem;\n          --size-8: 0.5rem;\n          --size-9: 0.5625rem;\n          --size-10: 0.625rem;\n          --size-11: 0.6875rem;\n          --size-12: 0.75rem;\n          --size-13: 0.8125rem;\n          --size-14: 0.875rem;\n          --size-15: 0.9375rem;\n          /* If the base font size of the dev overlay changes e.g. 18px, \n          just slide the window and make --size-18 as 1rem. */\n          --size-16: 1rem;\n          --size-17: 1.0625rem;\n          --size-18: 1.125rem;\n          --size-20: 1.25rem;\n          --size-22: 1.375rem;\n          --size-24: 1.5rem;\n          --size-26: 1.625rem;\n          --size-28: 1.75rem;\n          --size-30: 1.875rem;\n          --size-32: 2rem;\n          --size-34: 2.125rem;\n          --size-36: 2.25rem;\n          --size-38: 2.375rem;\n          --size-40: 2.5rem;\n          --size-42: 2.625rem;\n          --size-44: 2.75rem;\n          --size-46: 2.875rem;\n          --size-48: 3rem;\n\n          @media print {\n            display: none;\n          }\n        }\n\n        :host(.dark) {\n          ",
+        "\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host(:not(.light)) {\n            ",
+        "\n          }\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: 8px;\n          font-weight: 500;\n          line-height: 1.5;\n        }\n\n        a {\n          color: var(--color-blue-900);\n          &:hover {\n            color: var(--color-blue-900);\n          }\n          &:focus {\n            outline: var(--focus-ring);\n          }\n        }\n      "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+const darkTheme = (0, _css.css)(_templateObject());
 function Base() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-        children: (0, _css.css)(_templateObject())
+        children: (0, _css.css)(_templateObject1(), darkTheme, darkTheme)
     });
 }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/base.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nexport function Base() {\n return (\n <style>\n {css`\n :host {\n /* \n Although the style applied to the shadow host is isolated,\n the element that attached the shadow host (i.e. \"nextjs-portal\")\n is still affected by the parent's style (e.g. \"body\"). This may\n occur style conflicts like \"display: flex\", with other children\n elements therefore give the shadow host an absolute position.\n /\n position: absolute;\n\n --color-font: #757575;\n --color-backdrop: rgba(250, 250, 250, 0.8);\n --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n --color-title-color: #1f1f1f;\n --color-stack-notes: #777;\n\n --color-accents-1: #808080;\n --color-accents-2: #222222;\n --color-accents-3: #404040;\n\n --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n 'Source Sans Pro', sans-serif;\n\n font-family: var(--font-stack-sans);\n\n / TODO: Remove replaced ones. /\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --shadow-none: 0 0 #0000;\n\n --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n 0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n 0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n --focus-color: var(--color-blue-800);\n --focus-ring: 2px solid var(--focus-color);\n\n --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n --rounded-none: 0px;\n --rounded-sm: 2px;\n --rounded-md: 4px;\n --rounded-md-2: 6px;\n --rounded-lg: 8px;\n --rounded-xl: 12px;\n --rounded-2xl: 16px;\n --rounded-3xl: 24px;\n --rounded-4xl: 32px;\n --rounded-full: 9999px;\n\n / \n Suffix N of --size-N as px value when the base font size is 16px.\n Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n /\n --size-1: 0.0625rem; / 1px /\n --size-2: 0.125rem; / 2px /\n --size-3: 0.1875rem; / 3px /\n --size-4: 0.25rem; / ...and more /\n --size-5: 0.3125rem;\n --size-6: 0.375rem;\n --size-7: 0.4375rem;\n --size-8: 0.5rem;\n --size-9: 0.5625rem;\n --size-10: 0.625rem;\n --size-11: 0.6875rem;\n --size-12: 0.75rem;\n --size-13: 0.8125rem;\n --size-14: 0.875rem;\n --size-15: 0.9375rem;\n / If the base font size of the dev overlay changes e.g. 18px, \n just slide the window and make --size-18 as 1rem. */\n --size-16: 1rem;\n --size-17: 1.0625rem;\n --size-18: 1.125rem;\n --size-20: 1.25rem;\n --size-22: 1.375rem;\n --size-24: 1.5rem;\n --size-26: 1.625rem;\n --size-28: 1.75rem;\n --size-30: 1.875rem;\n --size-32: 2rem;\n --size-34: 2.125rem;\n --size-36: 2.25rem;\n --size-38: 2.375rem;\n --size-40: 2.5rem;\n --size-42: 2.625rem;\n --size-44: 2.75rem;\n --size-46: 2.875rem;\n --size-48: 3rem;\n\n @media print {\n display: none;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n :host ~~{\n --color-font~~: ~~white;\n --color-backdrop: rgb~~(~~0, 0, 0, 0~~.8)~~;\n --color-border-shadow:~~ ~~rgba(255, 255, 255, 0.145);\n~~\n ~~--color-title-color: #fafafa;\~~n ~~--color-stack-notes: #a9a9a9;\n~~ }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 8px;\n font-weight: 500;\n line-height: 1.5;\n }\n\n a {\n color: var(--color-blue-900);\n &:hover {\n color: var(--color-blue-900);\n }\n &:focus {\n outline: var(--focus-ring);\n }\n }\n `}\n </style>\n )\n}\n"],"names":["Base","~~style~~","css"],"mappings":";;;;+~~BAEgBA~~;;;eAAAA;;;;;~~qBAFI;;;;;;;;;;AAEb~~,~~SAASA~~;IACd,qBACE,~~qBAACC~~;~~sBACEC~~,QAAG;;~~AAiJV~~"}
1	+ {"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/base.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nconst darkTheme = css`\n --color-font: white;\n --color-backdrop: rgba(0, 0, 0, 0.8);\n --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n --color-title-color: #fafafa;\n --color-stack-notes: #a9a9a9;\n`\n\nexport function Base() {\n return (\n <style>\n {css`\n :host {\n /* \n Although the style applied to the shadow host is isolated,\n the element that attached the shadow host (i.e. \"nextjs-portal\")\n is still affected by the parent's style (e.g. \"body\"). This may\n occur style conflicts like \"display: flex\", with other children\n elements therefore give the shadow host an absolute position.\n /\n position: absolute;\n\n --color-font: #757575;\n --color-backdrop: rgba(250, 250, 250, 0.8);\n --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n --color-title-color: #1f1f1f;\n --color-stack-notes: #777;\n\n --color-accents-1: #808080;\n --color-accents-2: #222222;\n --color-accents-3: #404040;\n\n --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n 'Source Sans Pro', sans-serif;\n\n font-family: var(--font-stack-sans);\n\n / TODO: Remove replaced ones. /\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --shadow-none: 0 0 #0000;\n\n --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n 0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n 0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n --focus-color: var(--color-blue-800);\n --focus-ring: 2px solid var(--focus-color);\n\n --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n --rounded-none: 0px;\n --rounded-sm: 2px;\n --rounded-md: 4px;\n --rounded-md-2: 6px;\n --rounded-lg: 8px;\n --rounded-xl: 12px;\n --rounded-2xl: 16px;\n --rounded-3xl: 24px;\n --rounded-4xl: 32px;\n --rounded-full: 9999px;\n\n / \n Suffix N of --size-N as px value when the base font size is 16px.\n Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n /\n --size-1: 0.0625rem; / 1px /\n --size-2: 0.125rem; / 2px /\n --size-3: 0.1875rem; / 3px /\n --size-4: 0.25rem; / ...and more /\n --size-5: 0.3125rem;\n --size-6: 0.375rem;\n --size-7: 0.4375rem;\n --size-8: 0.5rem;\n --size-9: 0.5625rem;\n --size-10: 0.625rem;\n --size-11: 0.6875rem;\n --size-12: 0.75rem;\n --size-13: 0.8125rem;\n --size-14: 0.875rem;\n --size-15: 0.9375rem;\n / If the base font size of the dev overlay changes e.g. 18px, \n just slide the window and make --size-18 as 1rem. */\n --size-16: 1rem;\n --size-17: 1.0625rem;\n --size-18: 1.125rem;\n --size-20: 1.25rem;\n --size-22: 1.375rem;\n --size-24: 1.5rem;\n --size-26: 1.625rem;\n --size-28: 1.75rem;\n --size-30: 1.875rem;\n --size-32: 2rem;\n --size-34: 2.125rem;\n --size-36: 2.25rem;\n --size-38: 2.375rem;\n --size-40: 2.5rem;\n --size-42: 2.625rem;\n --size-44: 2.75rem;\n --size-46: 2.875rem;\n --size-48: 3rem;\n\n @media print {\n display: none;\n }\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 h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 8px;\n font-weight: 500;\n line-height: 1.5;\n }\n\n a {\n color: var(--color-blue-900);\n &:hover {\n color: var(--color-blue-900);\n }\n &:focus {\n outline: var(--focus-ring);\n }\n }\n `}\n </style>\n )\n}\n"],"names":["Base","darkTheme","css","style"],"mappings":";;;;+BAWgBA;;;eAAAA;;;;;qBAXI;;;;;;;;;;;;;;;;;;;;;AAEpB,MAAMC,gBAAYC,QAAG;AASd,SAASF;IACd,qBACE,qBAACG;sBACED,QAAG,sBAgHED,WAKEA;;AA2Bd"}

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

@@ -13,24 +13,36 @@ const _jsxruntime = require("react/jsx-runtime");
 const _css = require("../../utils/css");
 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;
+}
+const darkTheme = (0, _css.css)(_templateObject());
 function Colors() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-        children: (0, _css.css)(_templateObject(), // CAUTION: THIS IS A WORKAROUND!
+        children: (0, _css.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/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":["Colors","style","css"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;;qBAHI;;;;;;;;;;;AAGb,SAASA;IACd,qBACE,qBAACC;sBACEC,QAAG,qBAGE,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":["Colors","darkTheme","css","style"],"mappings":";;;;+BAoGgBA;;;eAAAA;;;;;qBApGI;;;;;;;;;;;;;;;;;;;;;;AAEpB,MAAMC,gBAAYC,QAAG;AAkGd,SAASF;IACd,qBACE,qBAACG;sBACED,QAAG,sBAGE,iCAAiC;QACjC,+GAA+G;QAC/G,oIAAoI;QACpI,yEAAyE;QAEzE,6EAA6E;QAC7E,wEAAwE;QACxE,8DAA8D;QAC9D,IA+HAD,WAKEA;;AAMd"}

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

@@ -32,6 +32,7 @@ const _environmentnamelabel = require("../components/errors/environment-name-lab
 const _devtoolsinfo = require("../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info");
 const _turbopackinfo = require("../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info");
 const _routeinfo = require("../components/errors/dev-tools-indicator/dev-tools-info/route-info");
+const _userpreferences = require("../components/errors/dev-tools-indicator/dev-tools-info/user-preferences");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
         "\n        ",
@@ -55,6 +56,7 @@ function _templateObject() {
         "\n        ",
         "\n        ",
         "\n        ",
+        "\n        ",
         "\n      "
     ]);
     _templateObject = function() {
@@ -64,7 +66,7 @@ function _templateObject() {
 }
 function ComponentStyles() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-        children: (0, _css.css)(_templateObject(), _copybutton.COPY_BUTTON_STYLES, _callstackframe.CALL_STACK_FRAME_STYLES, _environmentnamelabel.ENVIRONMENT_NAME_LABEL_STYLES, _styles.styles, _toast.styles, _dialog.styles, _erroroverlaylayout.styles, _erroroverlayfooter.styles, _erroroverlaybottomstack.styles, _erroroverlaypagination.styles, _codeframe.CODE_FRAME_STYLES, _terminal.TERMINAL_STYLES, _editorlink.EDITOR_LINK_STYLES, _builderror.styles, _errors.styles, _runtimeerror.styles, _versionstalenessinfo.styles, _devtoolsindicator.DEV_TOOLS_INDICATOR_STYLES, _devtoolsinfo.DEV_TOOLS_INFO_STYLES, _turbopackinfo.DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES, _routeinfo.DEV_TOOLS_INFO_ROUTE_INFO_STYLES)
+        children: (0, _css.css)(_templateObject(), _copybutton.COPY_BUTTON_STYLES, _callstackframe.CALL_STACK_FRAME_STYLES, _environmentnamelabel.ENVIRONMENT_NAME_LABEL_STYLES, _styles.styles, _toast.styles, _dialog.styles, _erroroverlaylayout.styles, _erroroverlayfooter.styles, _erroroverlaybottomstack.styles, _erroroverlaypagination.styles, _codeframe.CODE_FRAME_STYLES, _terminal.TERMINAL_STYLES, _editorlink.EDITOR_LINK_STYLES, _builderror.styles, _errors.styles, _runtimeerror.styles, _versionstalenessinfo.styles, _devtoolsindicator.DEV_TOOLS_INDICATOR_STYLES, _devtoolsinfo.DEV_TOOLS_INFO_STYLES, _turbopackinfo.DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES, _routeinfo.DEV_TOOLS_INFO_ROUTE_INFO_STYLES, _userpreferences.DEV_TOOLS_INFO_USER_PREFERENCES_STYLES)
     });
 }

package/dist/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":["ComponentStyles","style","css","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"],"mappings":";;;;+~~BAuBgBA~~;;;eAAAA;;;;;~~2BAvBkB~~;wBACD;oCACK;yCACA;wCACD;wBACH;oCACD;0BACD;uBACA;sCACW;4BACA;wBACI;8BACO;4BACnB;gCACK;mCACG;qBACvB;4BACe;sCACW;8BACR;+BACe;2BACJ~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE1C~~,SAASA;IACd,qBACE,qBAACC;sBACEC,QAAG,qBACAC,8BAAkB,EAClBC,uCAAuB,EACvBC,mDAA6B,EAC7BC,cAAO,EACPC,aAAK,EACLC,cAAM,EACNC,0BAAW,EACXC,0BAAM,EACNC,+BAAW,EACXC,8BAAU,EACVC,4BAAiB,EACjBC,yBAAe,EACfC,8BAAkB,EAClBC,kBAAgB,EAChBC,cAAoB,EACpBC,oBAA2B,EAC3BC,4BAAgB,EAChBC,6CAA0B,EAC1BC,mCAAqB,EACrBC,mDAAoC,EACpCC,2CAAgC;;~~AAI1C~~"}
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":["ComponentStyles","style","css","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"],"mappings":";;;;+BAwBgBA;;;eAAAA;;;;;2BAxBkB;wBACD;oCACK;yCACA;wCACD;wBACH;oCACD;0BACD;uBACA;sCACW;4BACA;wBACI;8BACO;4BACnB;gCACK;mCACG;qBACvB;4BACe;sCACW;8BACR;+BACe;2BACJ;iCACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEhD,SAASA;IACd,qBACE,qBAACC;sBACEC,QAAG,qBACAC,8BAAkB,EAClBC,uCAAuB,EACvBC,mDAA6B,EAC7BC,cAAO,EACPC,aAAK,EACLC,cAAM,EACNC,0BAAW,EACXC,0BAAM,EACNC,+BAAW,EACXC,8BAAU,EACVC,4BAAiB,EACjBC,yBAAe,EACfC,8BAAkB,EAClBC,kBAAgB,EAChBC,cAAoB,EACpBC,oBAA2B,EAC3BC,4BAAgB,EAChBC,6CAA0B,EAC1BC,mCAAqB,EACrBC,mDAAoC,EACpCC,2CAAgC,EAChCC,uDAAsC;;AAIhD"}

package/dist/client/form-shared.d.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import type { HTMLProps } from 'react';
+export declare const DISALLOWED_FORM_PROPS: readonly ["method", "encType", "target"];
+type HTMLFormProps = HTMLProps<HTMLFormElement>;
+type DisallowedFormProps = (typeof DISALLOWED_FORM_PROPS)[number];
+type InternalFormProps = {
+    /**
+     * `action` can be either a `string` or a function.
+     * - If `action` is a string, it will be interpreted as a path or URL to navigate to when the form is submitted.
+     *   The path will be prefetched when the form becomes visible.
+     * - 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.
+     */
+    action: NonNullable<HTMLFormProps['action']>;
+    /**
+     * Controls how the route specified by `action` is prefetched.
+     * Any `<Form />` that is in the viewport (initially or through scroll) will be prefetched.
+     * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.
+     *
+     * Options:
+     * - `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.
+     * - `false`: This will not prefetch any data.
+     *
+     * In pages dir, prefetching is not supported, and passing this prop will emit a warning.
+     *
+     * @defaultValue `null`
+     */
+    prefetch?: false | null;
+    /**
+     * Whether submitting the form should replace the current `history` state instead of adding a new url into the stack.
+     * Only valid if `action` is a string.
+     *
+     * @defaultValue `false`
+     */
+    replace?: boolean;
+    /**
+     * Override the default scroll behavior when navigating.
+     * Only valid if `action` is a string.
+     *
+     * @defaultValue `true`
+     */
+    scroll?: boolean;
+} & Omit<HTMLFormProps, 'action' | DisallowedFormProps>;
+export type FormProps<RouteInferType = any> = InternalFormProps;
+export declare function createFormSubmitDestinationUrl(action: string, formElement: HTMLFormElement): URL;
+export declare function checkFormActionUrl(action: string, source: 'action' | 'formAction'): void;
+export declare const isSupportedFormEncType: (value: string) => value is "application/x-www-form-urlencoded";
+export declare const isSupportedFormMethod: (value: string) => value is "get";
+export declare const isSupportedFormTarget: (value: string) => value is "_self";
+export declare function hasUnsupportedSubmitterAttributes(submitter: HTMLElement): boolean;
+export declare function hasReactClientActionAttributes(submitter: HTMLElement): boolean | "" | null;
+export {};

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

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    DISALLOWED_FORM_PROPS: null,
+    checkFormActionUrl: null,
+    createFormSubmitDestinationUrl: null,
+    hasReactClientActionAttributes: null,
+    hasUnsupportedSubmitterAttributes: null,
+    isSupportedFormEncType: null,
+    isSupportedFormMethod: null,
+    isSupportedFormTarget: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DISALLOWED_FORM_PROPS: function() {
+        return DISALLOWED_FORM_PROPS;
+    },
+    checkFormActionUrl: function() {
+        return checkFormActionUrl;
+    },
+    createFormSubmitDestinationUrl: function() {
+        return createFormSubmitDestinationUrl;
+    },
+    hasReactClientActionAttributes: function() {
+        return hasReactClientActionAttributes;
+    },
+    hasUnsupportedSubmitterAttributes: function() {
+        return hasUnsupportedSubmitterAttributes;
+    },
+    isSupportedFormEncType: function() {
+        return isSupportedFormEncType;
+    },
+    isSupportedFormMethod: function() {
+        return isSupportedFormMethod;
+    },
+    isSupportedFormTarget: function() {
+        return isSupportedFormTarget;
+    }
+});
+const DISALLOWED_FORM_PROPS = [
+    'method',
+    'encType',
+    'target'
+];
+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;
+}
+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.');
+    }
+}
+const isSupportedFormEncType = (value)=>value === 'application/x-www-form-urlencoded';
+const isSupportedFormMethod = (value)=>value === 'get';
+const isSupportedFormTarget = (value)=>value === '_self';
+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;
+}
+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);
+}
+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=form-shared.js.map

package/dist/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","checkFormActionUrl","createFormSubmitDestinationUrl","hasReactClientActionAttributes","hasUnsupportedSubmitterAttributes","isSupportedFormEncType","isSupportedFormMethod","isSupportedFormTarget","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","source","aPropName","testUrl","error","submitter","formEncType","getAttribute","formMethod","formTarget","test"],"mappings":";;;;;;;;;;;;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IAoGGC,kBAAkB;eAAlBA;;IApDAC,8BAA8B;eAA9BA;;IA4HAC,8BAA8B;eAA9BA;;IA1CAC,iCAAiC;eAAjCA;;IALHC,sBAAsB;eAAtBA;;IAEAC,qBAAqB;eAArBA;;IACAC,qBAAqB;eAArBA;;;AAhIN,MAAMP,wBAAwB;IAAC;IAAU;IAAW;CAAS;AAgD7D,SAASE,+BACdM,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;AAEO,SAAST,mBACdO,MAAc,EACdwB,MAA+B;IAE/B,MAAMC,YAAYD,WAAW,WAAY,gBAAkB;IAE3D,IAAIE;IACJ,IAAI;QACFA,UAAU,IAAInB,IAAIP,QAAQ;IAC5B,EAAE,OAAOQ,KAAK;QACZa,QAAQM,KAAK,CACX,AAAC,qBAAkBF,YAAU,uCAAoCzB,SAAO;QAE1E;IACF;IAEA,4FAA4F;IAC5F,IAAI0B,QAAQf,YAAY,CAACC,IAAI,EAAE;QAC7BS,QAAQC,IAAI,CACV,AAAC,qBAAkBG,YAAU,oCAAiCzB,SAAO,yDAClE;IAEP;AACF;AAEO,MAAMH,yBAAyB,CAACoB,QACrCA,UAAU;AACL,MAAMnB,wBAAwB,CAACmB,QAAkBA,UAAU;AAC3D,MAAMlB,wBAAwB,CAACkB,QAAkBA,UAAU;AAE3D,SAASrB,kCACdgC,SAAsB;IAEtB,mDAAmD;IACnD,MAAMC,cAAcD,UAAUE,YAAY,CAAC;IAC3C,IAAID,gBAAgB,QAAQ,CAAChC,uBAAuBgC,cAAc;QAChE,IAAIX,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1CC,QAAQM,KAAK,CACX,AAAC,2EAA0EE,cAAY,SACpF;QAEP;QACA,OAAO;IACT;IAEA,kDAAkD;IAClD,MAAME,aAAaH,UAAUE,YAAY,CAAC;IAC1C,IAAIC,eAAe,QAAQ,CAACjC,sBAAsBiC,aAAa;QAC7D,IAAIb,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1CC,QAAQM,KAAK,CACX,AAAC,yEAAwEI,aAAW,SACjF;QAEP;QACA,OAAO;IACT;IAEA,kDAAkD;IAClD,MAAMC,aAAaJ,UAAUE,YAAY,CAAC;IAC1C,IAAIE,eAAe,QAAQ,CAACjC,sBAAsBiC,aAAa;QAC7D,IAAId,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1CC,QAAQM,KAAK,CACX,AAAC,yEAAwEK,aAAW,SACjF;QAEP;QACA,OAAO;IACT;IAEA,OAAO;AACT;AAEO,SAASrC,+BAA+BiC,SAAsB;IACnE,6JAA6J;IAC7J,yJAAyJ;IACzJ,MAAM5B,SAAS4B,UAAUE,YAAY,CAAC;IACtC,OAAO9B,UAAU,kBAAkBiC,IAAI,CAACjC;AAC1C"}

package/dist/client/form.d.ts CHANGED Viewed

@@ -1,44 +1,9 @@
-import { type HTMLProps } from 'react';
-declare const DISALLOWED_FORM_PROPS: readonly ["method", "encType", "target"];
-type HTMLFormProps = HTMLProps<HTMLFormElement>;
-type DisallowedFormProps = (typeof DISALLOWED_FORM_PROPS)[number];
-type InternalFormProps = {
-    /**
-     * `action` can be either a `string` or a function.
-     * - If `action` is a string, it will be interpreted as a path or URL to navigate to when the form is submitted.
-     *   The path will be prefetched when the form becomes visible.
-     * - 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.
-     */
-    action: NonNullable<HTMLFormProps['action']>;
-    /**
-     * Controls how the route specified by `action` is prefetched.
-     * Any `<Form />` that is in the viewport (initially or through scroll) will be prefetched.
-     * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.
-     *
-     * Options:
-     * - `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.
-     * - `false`: This will not prefetch any data.
-     *
-     * In pages dir, prefetching is not supported, and passing this prop will emit a warning.
-     *
-     * @defaultValue `null`
-     */
+import { type FormProps } from './form-shared';
+export type { FormProps };
+declare const Form: import("react").ForwardRefExoticComponent<Omit<{
+    action: NonNullable<string | ((formData: FormData) => void | Promise<void>) | undefined>;
     prefetch?: false | null;
-    /**
-     * Whether submitting the form should replace the current `history` state instead of adding a new url into the stack.
-     * Only valid if `action` is a string.
-     *
-     * @defaultValue `false`
-     */
     replace?: boolean;
-    /**
-     * Override the default scroll behavior when navigating.
-     * Only valid if `action` is a string.
-     *
-     * @defaultValue `true`
-     */
     scroll?: boolean;
-} & Omit<HTMLFormProps, 'action' | DisallowedFormProps>;
-export type FormProps<RouteInferType = any> = InternalFormProps;
-export default function Form({ replace, scroll, prefetch: prefetchProp, ref: externalRef, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
-export {};
+} & Omit<import("react").HTMLProps<HTMLFormElement>, "action" | "method" | "target" | "encType">, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
+export default Form;