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

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: 2px 4px;\n    margin: 0;\n    font-size: var(--size-13);\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: var(--size-12);\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 8px;\n    top: 8px;\n    padding: 4px;\n    height: var(--size-24);\n    width: var(--size-24);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 16px;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","DevToolsInfo","title","learnMoreLink","article","className","p","code","div","CopyButton","actionLabel","successLabel","content","pre","span"],"mappings":";;;;;;;;;;;;;;;IAgHaA,oCAAoC;eAApCA;;IA7GGC,aAAa;eAAbA;;;;8BAHa;4BACF;AAEpB,SAASA,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,sBAACC,0BAAY;QACXC,OAAM;QACNC,eAAc;QACdL,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,sBAACI;gBAAQC,WAAU;;kCACjB,sBAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,sBAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,qBAACG;gBAAIH,WAAU;0BACb,cAAA,sBAACG;oBAAIH,WAAU;;sCACb,qBAACI,sBAAU;4BACTC,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTP,WAAU;;sCAEZ,qBAACQ;4BAAIR,WAAU;sCACb,cAAA,sBAACE;;kDACC,qBAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;;;kDAIzD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEO,MAAMV,uCAAwC"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-monospace);\n    padding: 2px 4px;\n    margin: 0;\n    font-size: var(--size-13);\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 8px;\n    top: 8px;\n    padding: 4px;\n    height: var(--size-24);\n    width: var(--size-24);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 16px;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","DevToolsInfo","title","learnMoreLink","article","className","p","code","div","CopyButton","actionLabel","successLabel","content","pre","span"],"mappings":";;;;;;;;;;;;;;;IAgHaA,oCAAoC;eAApCA;;IA7GGC,aAAa;eAAbA;;;;8BAHa;4BACF;AAEpB,SAASA,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,sBAACC,0BAAY;QACXC,OAAM;QACNC,eAAc;QACdL,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,sBAACI;gBAAQC,WAAU;;kCACjB,sBAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,sBAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,qBAACG;gBAAIH,WAAU;0BACb,cAAA,sBAACG;oBAAIH,WAAU;;sCACb,qBAACI,sBAAU;4BACTC,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTP,WAAU;;sCAEZ,qBAACQ;4BAAIR,WAAU;sCACb,cAAA,sBAACE;;kDACC,qBAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;;;kDAIzD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEO,MAAMV,uCAAwC"}

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.d.ts

@@ -0,0 +1,10 @@
+import type { DevToolsIndicatorPosition } from '../dev-tools-indicator';
+export declare function UserPreferences({ isOpen, setPosition, position, hide, ...props }: {
+    isOpen: boolean;
+    setPosition: (position: DevToolsIndicatorPosition) => void;
+    position: DevToolsIndicatorPosition;
+    hide: () => void;
+    style?: React.CSSProperties;
+    ref?: React.RefObject<HTMLElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES: string;

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.js

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    DEV_TOOLS_INFO_USER_PREFERENCES_STYLES: null,
+    UserPreferences: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEV_TOOLS_INFO_USER_PREFERENCES_STYLES: function() {
+        return DEV_TOOLS_INFO_USER_PREFERENCES_STYLES;
+    },
+    UserPreferences: function() {
+        return UserPreferences;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _devtoolsinfo = require("./dev-tools-info");
+const _css = require("../../../../../utils/css");
+const _eyeicon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/eye-icon"));
+const _shared = require("../../../../../shared");
+const _lighticon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/light-icon"));
+const _darkicon = /*#__PURE__*/ _interop_require_default._(require("../../../../icons/dark-icon"));
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\n  .preferences-container {\n    padding: 8px 6px;\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    .preferences-container {\n      width: 480px;\n    }\n  }\n\n  .preference-section:first-child {\n    padding-top: 0;\n  }\n\n  .preference-section {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--color-gray-400);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .preference-section:last-child {\n    border-bottom: none;\n  }\n\n  .preference-header {\n    margin-bottom: 0;\n    flex: 1;\n  }\n\n  .preference-header h2 {\n    font-size: var(--size-14);\n    font-weight: 500;\n    color: var(--color-gray-1000);\n    margin: 0;\n  }\n\n  .preference-description {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    margin: 0;\n  }\n\n  .preference-icon {\n    display: flex;\n    align-items: center;\n    width: 16px;\n    height: 16px;\n  }\n\n  .select-button,\n  .action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-lg);\n    font-weight: 400;\n    font-size: var(--size-14);\n    color: var(--color-gray-1000);\n    padding: 6px 8px;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .preference-control-select {\n    padding: 6px 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    border-radius: var(--rounded-lg);\n    border: 1px solid var(--color-gray-400);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus-within {\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n  }\n\n  .preference-control-select select {\n    font-size: var(--size-14);\n    font-weight: 400;\n    border: none;\n    padding: 0 6px 0 0;\n    border-radius: 0;\n    outline: none;\n  }\n\n  :global(.icon) {\n    width: 18px;\n    height: 18px;\n    color: #666;\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function getInitialPreference() {
+    if (typeof localStorage === 'undefined') {
+        return 'system';
+    }
+    const theme = localStorage.getItem(_shared.STORAGE_KEY_THEME);
+    return theme === 'dark' || theme === 'light' ? theme : 'system';
+}
+function UserPreferences(param) {
+    let { isOpen, setPosition, position, hide, ...props } = param;
+    // derive initial theme from system preference
+    const [theme, setTheme] = (0, _react.useState)(getInitialPreference());
+    const handleThemeChange = (e)=>{
+        const portal = document.querySelector('nextjs-portal');
+        if (!portal) return;
+        setTheme(e.target.value);
+        if (e.target.value === 'system') {
+            portal.classList.remove('dark');
+            portal.classList.remove('light');
+            localStorage.removeItem(_shared.STORAGE_KEY_THEME);
+            return;
+        }
+        if (e.target.value === 'dark') {
+            portal.classList.add('dark');
+            portal.classList.remove('light');
+            localStorage.setItem(_shared.STORAGE_KEY_THEME, 'dark');
+        } else {
+            portal.classList.remove('dark');
+            portal.classList.add('light');
+            localStorage.setItem(_shared.STORAGE_KEY_THEME, 'light');
+        }
+    };
+    function handlePositionChange(e) {
+        setPosition(e.target.value);
+        localStorage.setItem(_shared.STORAGE_KEY_POSITION, e.target.value);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_devtoolsinfo.DevToolsInfo, {
+        title: "Preferences",
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "preferences-container",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "preference-section",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "preference-header",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                                    children: "Theme"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                                    className: "preference-description",
+                                    children: "Select your theme preference."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "preference-control-select",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "preference-icon",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ThemeIcon, {
+                                        theme: theme
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
+                                    className: "select-button",
+                                    value: theme,
+                                    onChange: handleThemeChange,
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                            value: "system",
+                                            children: "System"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                            value: "light",
+                                            children: "Light"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                            value: "dark",
+                                            children: "Dark"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "preference-section",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "preference-header",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                                    children: "Position"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                                    className: "preference-description",
+                                    children: "Adjust the placement of your dev tools."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "preference-control-select",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
+                                className: "select-button",
+                                value: position,
+                                onChange: handlePositionChange,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                        value: "bottom-left",
+                                        children: "Bottom Left"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                        value: "bottom-right",
+                                        children: "Bottom Right"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                        value: "top-left",
+                                        children: "Top Left"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                        value: "top-right",
+                                        children: "Top Right"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "preference-section",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "preference-header",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                                    children: "Hide Dev Tools for this session"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                                    className: "preference-description",
+                                    children: "Hide Dev Tools until you restart your dev server, or 1 day."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "preference-control",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                                "data-hide-dev-tools": true,
+                                className: "action-button",
+                                onClick: hide,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "preference-icon",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_eyeicon.default, {})
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                        children: "Hide"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "preference-section",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "preference-header",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                                children: "Disable Dev Tools for this project"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                                className: "preference-description",
+                                children: [
+                                    "To disable this UI completely, set",
+                                    ' ',
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                                        className: "dev-tools-info-code",
+                                        children: "devIndicators: false"
+                                    }),
+                                    ' ',
+                                    "in your ",
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                                        className: "dev-tools-info-code",
+                                        children: "next.config"
+                                    }),
+                                    ' ',
+                                    "file."
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+function ThemeIcon(param) {
+    let { theme } = param;
+    const activeTheme = theme === 'system' ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : theme;
+    return activeTheme === 'dark' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_darkicon.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_lighticon.default, {});
+}
+const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = (0, _css.css)(_templateObject());
+
+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=user-preferences.js.map

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { DevToolsInfo } from './dev-tools-info'\nimport { css } from '../../../../../utils/css'\nimport type { DevToolsIndicatorPosition } from '../dev-tools-indicator'\nimport EyeIcon from '../../../../icons/eye-icon'\nimport { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'\nimport LightIcon from '../../../../icons/light-icon'\nimport DarkIcon from '../../../../icons/dark-icon'\n\nfunction getInitialPreference() {\n  if (typeof localStorage === 'undefined') {\n    return 'system'\n  }\n\n  const theme = localStorage.getItem(STORAGE_KEY_THEME)\n  return theme === 'dark' || theme === 'light' ? theme : 'system'\n}\n\nexport function UserPreferences({\n  isOpen,\n  setPosition,\n  position,\n  hide,\n  ...props\n}: {\n  isOpen: boolean\n  setPosition: (position: DevToolsIndicatorPosition) => void\n  position: DevToolsIndicatorPosition\n  hide: () => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  // derive initial theme from system preference\n  const [theme, setTheme] = useState(getInitialPreference())\n\n  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    const portal = document.querySelector('nextjs-portal')\n    if (!portal) return\n\n    setTheme(e.target.value)\n\n    if (e.target.value === 'system') {\n      portal.classList.remove('dark')\n      portal.classList.remove('light')\n      localStorage.removeItem(STORAGE_KEY_THEME)\n      return\n    }\n\n    if (e.target.value === 'dark') {\n      portal.classList.add('dark')\n      portal.classList.remove('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'dark')\n    } else {\n      portal.classList.remove('dark')\n      portal.classList.add('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'light')\n    }\n  }\n\n  function handlePositionChange(e: React.ChangeEvent<HTMLSelectElement>) {\n    setPosition(e.target.value as DevToolsIndicatorPosition)\n    localStorage.setItem(STORAGE_KEY_POSITION, e.target.value)\n  }\n\n  return (\n    <DevToolsInfo title=\"Preferences\" {...props}>\n      <div className=\"preferences-container\">\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <h2>Theme</h2>\n            <p className=\"preference-description\">\n              Select your theme preference.\n            </p>\n          </div>\n          <div className=\"preference-control-select\">\n            <div className=\"preference-icon\">\n              <ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />\n            </div>\n            <select\n              className=\"select-button\"\n              value={theme}\n              onChange={handleThemeChange}\n            >\n              <option value=\"system\">System</option>\n              <option value=\"light\">Light</option>\n              <option value=\"dark\">Dark</option>\n            </select>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <h2>Position</h2>\n            <p className=\"preference-description\">\n              Adjust the placement of your dev tools.\n            </p>\n          </div>\n          <div className=\"preference-control-select\">\n            <select\n              className=\"select-button\"\n              value={position}\n              onChange={handlePositionChange}\n            >\n              <option value=\"bottom-left\">Bottom Left</option>\n              <option value=\"bottom-right\">Bottom Right</option>\n              <option value=\"top-left\">Top Left</option>\n              <option value=\"top-right\">Top Right</option>\n            </select>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <h2>Hide Dev Tools for this session</h2>\n            <p className=\"preference-description\">\n              Hide Dev Tools until you restart your dev server, or 1 day.\n            </p>\n          </div>\n          <div className=\"preference-control\">\n            <button\n              data-hide-dev-tools\n              className=\"action-button\"\n              onClick={hide}\n            >\n              <div className=\"preference-icon\">\n                <EyeIcon />\n              </div>\n              <span>Hide</span>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <h2>Disable Dev Tools for this project</h2>\n            <p className=\"preference-description\">\n              To disable this UI completely, set{' '}\n              <code className=\"dev-tools-info-code\">devIndicators: false</code>{' '}\n              in your <code className=\"dev-tools-info-code\">next.config</code>{' '}\n              file.\n            </p>\n          </div>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nfunction ThemeIcon({ theme }: { theme: 'dark' | 'light' | 'system' }) {\n  const activeTheme =\n    theme === 'system'\n      ? window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n      : theme\n\n  return activeTheme === 'dark' ? <DarkIcon /> : <LightIcon />\n}\n\nexport const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`\n  .preferences-container {\n    padding: 8px 6px;\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    .preferences-container {\n      width: 480px;\n    }\n  }\n\n  .preference-section:first-child {\n    padding-top: 0;\n  }\n\n  .preference-section {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--color-gray-400);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .preference-section:last-child {\n    border-bottom: none;\n  }\n\n  .preference-header {\n    margin-bottom: 0;\n    flex: 1;\n  }\n\n  .preference-header h2 {\n    font-size: var(--size-14);\n    font-weight: 500;\n    color: var(--color-gray-1000);\n    margin: 0;\n  }\n\n  .preference-description {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    margin: 0;\n  }\n\n  .preference-icon {\n    display: flex;\n    align-items: center;\n    width: 16px;\n    height: 16px;\n  }\n\n  .select-button,\n  .action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-lg);\n    font-weight: 400;\n    font-size: var(--size-14);\n    color: var(--color-gray-1000);\n    padding: 6px 8px;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .preference-control-select {\n    padding: 6px 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    border-radius: var(--rounded-lg);\n    border: 1px solid var(--color-gray-400);\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n\n    &:focus-within {\n      outline: 5px auto -webkit-focus-ring-color;\n    }\n  }\n\n  .preference-control-select select {\n    font-size: var(--size-14);\n    font-weight: 400;\n    border: none;\n    padding: 0 6px 0 0;\n    border-radius: 0;\n    outline: none;\n  }\n\n  :global(.icon) {\n    width: 18px;\n    height: 18px;\n    color: #666;\n  }\n`\n"],"names":["DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","UserPreferences","getInitialPreference","localStorage","theme","getItem","STORAGE_KEY_THEME","isOpen","setPosition","position","hide","props","setTheme","useState","handleThemeChange","e","portal","document","querySelector","target","value","classList","remove","removeItem","add","setItem","handlePositionChange","STORAGE_KEY_POSITION","DevToolsInfo","title","div","className","h2","p","ThemeIcon","select","onChange","option","button","data-hide-dev-tools","onClick","EyeIcon","span","code","activeTheme","window","matchMedia","matches","DarkIcon","LightIcon","css"],"mappings":";;;;;;;;;;;;;;;IA+JaA,sCAAsC;eAAtCA;;IA7IGC,eAAe;eAAfA;;;;;;uBAlBS;8BACI;qBACT;kEAEA;wBACoC;oEAClC;mEACD;;;;;;;;;;AAErB,SAASC;IACP,IAAI,OAAOC,iBAAiB,aAAa;QACvC,OAAO;IACT;IAEA,MAAMC,QAAQD,aAAaE,OAAO,CAACC,yBAAiB;IACpD,OAAOF,UAAU,UAAUA,UAAU,UAAUA,QAAQ;AACzD;AAEO,SAASH,gBAAgB,KAa/B;IAb+B,IAAA,EAC9BM,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAQJ,GAb+B;IAc9B,8CAA8C;IAC9C,MAAM,CAACP,OAAOQ,SAAS,GAAGC,IAAAA,eAAQ,EAACX;IAEnC,MAAMY,oBAAoB,CAACC;QACzB,MAAMC,SAASC,SAASC,aAAa,CAAC;QACtC,IAAI,CAACF,QAAQ;QAEbJ,SAASG,EAAEI,MAAM,CAACC,KAAK;QAEvB,IAAIL,EAAEI,MAAM,CAACC,KAAK,KAAK,UAAU;YAC/BJ,OAAOK,SAAS,CAACC,MAAM,CAAC;YACxBN,OAAOK,SAAS,CAACC,MAAM,CAAC;YACxBnB,aAAaoB,UAAU,CAACjB,yBAAiB;YACzC;QACF;QAEA,IAAIS,EAAEI,MAAM,CAACC,KAAK,KAAK,QAAQ;YAC7BJ,OAAOK,SAAS,CAACG,GAAG,CAAC;YACrBR,OAAOK,SAAS,CAACC,MAAM,CAAC;YACxBnB,aAAasB,OAAO,CAACnB,yBAAiB,EAAE;QAC1C,OAAO;YACLU,OAAOK,SAAS,CAACC,MAAM,CAAC;YACxBN,OAAOK,SAAS,CAACG,GAAG,CAAC;YACrBrB,aAAasB,OAAO,CAACnB,yBAAiB,EAAE;QAC1C;IACF;IAEA,SAASoB,qBAAqBX,CAAuC;QACnEP,YAAYO,EAAEI,MAAM,CAACC,KAAK;QAC1BjB,aAAasB,OAAO,CAACE,4BAAoB,EAAEZ,EAAEI,MAAM,CAACC,KAAK;IAC3D;IAEA,qBACE,qBAACQ,0BAAY;QAACC,OAAM;QAAe,GAAGlB,KAAK;kBACzC,cAAA,sBAACmB;YAAIC,WAAU;;8BACb,sBAACD;oBAAIC,WAAU;;sCACb,sBAACD;4BAAIC,WAAU;;8CACb,qBAACC;8CAAG;;8CACJ,qBAACC;oCAAEF,WAAU;8CAAyB;;;;sCAIxC,sBAACD;4BAAIC,WAAU;;8CACb,qBAACD;oCAAIC,WAAU;8CACb,cAAA,qBAACG;wCAAU9B,OAAOA;;;8CAEpB,sBAAC+B;oCACCJ,WAAU;oCACVX,OAAOhB;oCACPgC,UAAUtB;;sDAEV,qBAACuB;4CAAOjB,OAAM;sDAAS;;sDACvB,qBAACiB;4CAAOjB,OAAM;sDAAQ;;sDACtB,qBAACiB;4CAAOjB,OAAM;sDAAO;;;;;;;;8BAK3B,sBAACU;oBAAIC,WAAU;;sCACb,sBAACD;4BAAIC,WAAU;;8CACb,qBAACC;8CAAG;;8CACJ,qBAACC;oCAAEF,WAAU;8CAAyB;;;;sCAIxC,qBAACD;4BAAIC,WAAU;sCACb,cAAA,sBAACI;gCACCJ,WAAU;gCACVX,OAAOX;gCACP2B,UAAUV;;kDAEV,qBAACW;wCAAOjB,OAAM;kDAAc;;kDAC5B,qBAACiB;wCAAOjB,OAAM;kDAAe;;kDAC7B,qBAACiB;wCAAOjB,OAAM;kDAAW;;kDACzB,qBAACiB;wCAAOjB,OAAM;kDAAY;;;;;;;8BAKhC,sBAACU;oBAAIC,WAAU;;sCACb,sBAACD;4BAAIC,WAAU;;8CACb,qBAACC;8CAAG;;8CACJ,qBAACC;oCAAEF,WAAU;8CAAyB;;;;sCAIxC,qBAACD;4BAAIC,WAAU;sCACb,cAAA,sBAACO;gCACCC,qBAAmB;gCACnBR,WAAU;gCACVS,SAAS9B;;kDAET,qBAACoB;wCAAIC,WAAU;kDACb,cAAA,qBAACU,gBAAO;;kDAEV,qBAACC;kDAAK;;;;;;;8BAKZ,qBAACZ;oBAAIC,WAAU;8BACb,cAAA,sBAACD;wBAAIC,WAAU;;0CACb,qBAACC;0CAAG;;0CACJ,sBAACC;gCAAEF,WAAU;;oCAAyB;oCACD;kDACnC,qBAACY;wCAAKZ,WAAU;kDAAsB;;oCAA4B;oCAAI;kDAC9D,qBAACY;wCAAKZ,WAAU;kDAAsB;;oCAAmB;oCAAI;;;;;;;;;AAQnF;AAEA,SAASG,UAAU,KAAiD;IAAjD,IAAA,EAAE9B,KAAK,EAA0C,GAAjD;IACjB,MAAMwC,cACJxC,UAAU,WACNyC,OAAOC,UAAU,CAAC,gCAAgCC,OAAO,GACvD,SACA,UACF3C;IAEN,OAAOwC,gBAAgB,uBAAS,qBAACI,iBAAQ,sBAAM,qBAACC,kBAAS;AAC3D;AAEO,MAAMjD,6CAAyCkD,QAAG"}

package/dist/client/components/react-dev-overlay/ui/components/shadow-portal.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "ShadowPortal", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactdom = require("react-dom");
+const _shared = require("../../shared");
 function ShadowPortal(param) {
     let { children } = param;
     let portalNode = _react.useRef(null);
@@ -19,6 +20,17 @@ function ShadowPortal(param) {
     _react.useLayoutEffect(()=>{
         const ownerDocument = document;
         portalNode.current = ownerDocument.createElement('nextjs-portal');
+        // load default color preference from localstorage
+        if (typeof localStorage !== 'undefined') {
+            const theme = localStorage.getItem(_shared.STORAGE_KEY_THEME);
+            if (theme === 'dark') {
+                portalNode.current.classList.add('dark');
+                portalNode.current.classList.remove('light');
+            } else if (theme === 'light') {
+                portalNode.current.classList.remove('dark');
+                portalNode.current.classList.add('light');
+            }
+        }
         shadowNode.current = portalNode.current.attachShadow({
             mode: 'open'
         });

package/dist/client/components/react-dev-overlay/ui/components/shadow-portal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/components/shadow-portal.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nexport function ShadowPortal({ children }: { children: React.ReactNode }) {\n  let portalNode = React.useRef<HTMLElement | null>(null)\n  let shadowNode = React.useRef<ShadowRoot | null>(null)\n  let [, forceUpdate] = React.useState<{} | undefined>()\n\n  React.useLayoutEffect(() => {\n    const ownerDocument = document\n    portalNode.current = ownerDocument.createElement('nextjs-portal')\n    shadowNode.current = portalNode.current.attachShadow({ mode: 'open' })\n    ownerDocument.body.appendChild(portalNode.current)\n    forceUpdate({})\n    return () => {\n      if (portalNode.current && portalNode.current.ownerDocument) {\n        portalNode.current.ownerDocument.body.removeChild(portalNode.current)\n      }\n    }\n  }, [])\n\n  return shadowNode.current\n    ? createPortal(children, shadowNode.current as any)\n    : null\n}\n"],"names":["ShadowPortal","children","portalNode","React","useRef","shadowNode","forceUpdate","useState","useLayoutEffect","ownerDocument","document","current","createElement","attachShadow","mode","body","appendChild","removeChild","createPortal"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;0BACM;AAEtB,SAASA,aAAa,KAA2C;IAA3C,IAAA,EAAEC,QAAQ,EAAiC,GAA3C;IAC3B,IAAIC,aAAaC,OAAMC,MAAM,CAAqB;IAClD,IAAIC,aAAaF,OAAMC,MAAM,CAAoB;IACjD,IAAI,GAAGE,YAAY,GAAGH,OAAMI,QAAQ;IAEpCJ,OAAMK,eAAe,CAAC;QACpB,MAAMC,gBAAgBC;QACtBR,WAAWS,OAAO,GAAGF,cAAcG,aAAa,CAAC;QACjDP,WAAWM,OAAO,GAAGT,WAAWS,OAAO,CAACE,YAAY,CAAC;YAAEC,MAAM;QAAO;QACpEL,cAAcM,IAAI,CAACC,WAAW,CAACd,WAAWS,OAAO;QACjDL,YAAY,CAAC;QACb,OAAO;YACL,IAAIJ,WAAWS,OAAO,IAAIT,WAAWS,OAAO,CAACF,aAAa,EAAE;gBAC1DP,WAAWS,OAAO,CAACF,aAAa,CAACM,IAAI,CAACE,WAAW,CAACf,WAAWS,OAAO;YACtE;QACF;IACF,GAAG,EAAE;IAEL,OAAON,WAAWM,OAAO,iBACrBO,IAAAA,sBAAY,EAACjB,UAAUI,WAAWM,OAAO,IACzC;AACN"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/components/shadow-portal.tsx"],"sourcesContent":["import * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { STORAGE_KEY_THEME } from '../../shared'\n\nexport function ShadowPortal({ children }: { children: React.ReactNode }) {\n  let portalNode = React.useRef<HTMLElement | null>(null)\n  let shadowNode = React.useRef<ShadowRoot | null>(null)\n  let [, forceUpdate] = React.useState<{} | undefined>()\n\n  React.useLayoutEffect(() => {\n    const ownerDocument = document\n    portalNode.current = ownerDocument.createElement('nextjs-portal')\n    // load default color preference from localstorage\n    if (typeof localStorage !== 'undefined') {\n      const theme = localStorage.getItem(STORAGE_KEY_THEME)\n      if (theme === 'dark') {\n        portalNode.current.classList.add('dark')\n        portalNode.current.classList.remove('light')\n      } else if (theme === 'light') {\n        portalNode.current.classList.remove('dark')\n        portalNode.current.classList.add('light')\n      }\n    }\n\n    shadowNode.current = portalNode.current.attachShadow({ mode: 'open' })\n    ownerDocument.body.appendChild(portalNode.current)\n    forceUpdate({})\n    return () => {\n      if (portalNode.current && portalNode.current.ownerDocument) {\n        portalNode.current.ownerDocument.body.removeChild(portalNode.current)\n      }\n    }\n  }, [])\n\n  return shadowNode.current\n    ? createPortal(children, shadowNode.current as any)\n    : null\n}\n"],"names":["ShadowPortal","children","portalNode","React","useRef","shadowNode","forceUpdate","useState","useLayoutEffect","ownerDocument","document","current","createElement","localStorage","theme","getItem","STORAGE_KEY_THEME","classList","add","remove","attachShadow","mode","body","appendChild","removeChild","createPortal"],"mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;0BACM;wBACK;AAE3B,SAASA,aAAa,KAA2C;IAA3C,IAAA,EAAEC,QAAQ,EAAiC,GAA3C;IAC3B,IAAIC,aAAaC,OAAMC,MAAM,CAAqB;IAClD,IAAIC,aAAaF,OAAMC,MAAM,CAAoB;IACjD,IAAI,GAAGE,YAAY,GAAGH,OAAMI,QAAQ;IAEpCJ,OAAMK,eAAe,CAAC;QACpB,MAAMC,gBAAgBC;QACtBR,WAAWS,OAAO,GAAGF,cAAcG,aAAa,CAAC;QACjD,kDAAkD;QAClD,IAAI,OAAOC,iBAAiB,aAAa;YACvC,MAAMC,QAAQD,aAAaE,OAAO,CAACC,yBAAiB;YACpD,IAAIF,UAAU,QAAQ;gBACpBZ,WAAWS,OAAO,CAACM,SAAS,CAACC,GAAG,CAAC;gBACjChB,WAAWS,OAAO,CAACM,SAAS,CAACE,MAAM,CAAC;YACtC,OAAO,IAAIL,UAAU,SAAS;gBAC5BZ,WAAWS,OAAO,CAACM,SAAS,CAACE,MAAM,CAAC;gBACpCjB,WAAWS,OAAO,CAACM,SAAS,CAACC,GAAG,CAAC;YACnC;QACF;QAEAb,WAAWM,OAAO,GAAGT,WAAWS,OAAO,CAACS,YAAY,CAAC;YAAEC,MAAM;QAAO;QACpEZ,cAAca,IAAI,CAACC,WAAW,CAACrB,WAAWS,OAAO;QACjDL,YAAY,CAAC;QACb,OAAO;YACL,IAAIJ,WAAWS,OAAO,IAAIT,WAAWS,OAAO,CAACF,aAAa,EAAE;gBAC1DP,WAAWS,OAAO,CAACF,aAAa,CAACa,IAAI,CAACE,WAAW,CAACtB,WAAWS,OAAO;YACtE;QACF;IACF,GAAG,EAAE;IAEL,OAAON,WAAWM,OAAO,iBACrBc,IAAAA,sBAAY,EAACxB,UAAUI,WAAWM,OAAO,IACzC;AACN"}

package/dist/client/components/react-dev-overlay/ui/icons/dark-icon.d.ts

@@ -0,0 +1 @@
+export default function DarkIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/ui/icons/dark-icon.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return DarkIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+function DarkIcon() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        "data-testid": "geist-icon",
+        height: "16",
+        strokeLinejoin: "round",
+        viewBox: "0 0 16 16",
+        width: "16",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M1.5 8.00005C1.5 5.53089 2.99198 3.40932 5.12349 2.48889C4.88136 3.19858 4.75 3.95936 4.75 4.7501C4.75 8.61609 7.88401 11.7501 11.75 11.7501C11.8995 11.7501 12.048 11.7454 12.1953 11.7361C11.0955 13.1164 9.40047 14.0001 7.5 14.0001C4.18629 14.0001 1.5 11.3138 1.5 8.00005ZM6.41706 0.577759C2.78784 1.1031 0 4.22536 0 8.00005C0 12.1422 3.35786 15.5001 7.5 15.5001C10.5798 15.5001 13.2244 13.6438 14.3792 10.9921L13.4588 9.9797C12.9218 10.155 12.3478 10.2501 11.75 10.2501C8.71243 10.2501 6.25 7.78767 6.25 4.7501C6.25 3.63431 6.58146 2.59823 7.15111 1.73217L6.41706 0.577759ZM13.25 1V1.75V2.75L14.25 2.75H15V4.25H14.25H13.25V5.25V6H11.75V5.25V4.25H10.75L10 4.25V2.75H10.75L11.75 2.75V1.75V1H13.25Z",
+            fill: "currentColor"
+        })
+    });
+}
+
+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=dark-icon.js.map

package/dist/client/components/react-dev-overlay/ui/icons/dark-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/icons/dark-icon.tsx"],"sourcesContent":["export default function DarkIcon() {\n  return (\n    <svg\n      data-testid=\"geist-icon\"\n      height=\"16\"\n      strokeLinejoin=\"round\"\n      viewBox=\"0 0 16 16\"\n      width=\"16\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.5 8.00005C1.5 5.53089 2.99198 3.40932 5.12349 2.48889C4.88136 3.19858 4.75 3.95936 4.75 4.7501C4.75 8.61609 7.88401 11.7501 11.75 11.7501C11.8995 11.7501 12.048 11.7454 12.1953 11.7361C11.0955 13.1164 9.40047 14.0001 7.5 14.0001C4.18629 14.0001 1.5 11.3138 1.5 8.00005ZM6.41706 0.577759C2.78784 1.1031 0 4.22536 0 8.00005C0 12.1422 3.35786 15.5001 7.5 15.5001C10.5798 15.5001 13.2244 13.6438 14.3792 10.9921L13.4588 9.9797C12.9218 10.155 12.3478 10.2501 11.75 10.2501C8.71243 10.2501 6.25 7.78767 6.25 4.7501C6.25 3.63431 6.58146 2.59823 7.15111 1.73217L6.41706 0.577759ZM13.25 1V1.75V2.75L14.25 2.75H15V4.25H14.25H13.25V5.25V6H11.75V5.25V4.25H10.75L10 4.25V2.75H10.75L11.75 2.75V1.75V1H13.25Z\"\n        fill=\"currentColor\"\n      ></path>\n    </svg>\n  )\n}\n"],"names":["DarkIcon","svg","data-testid","height","strokeLinejoin","viewBox","width","path","fillRule","clipRule","d","fill"],"mappings":";;;;+BAAA;;;eAAwBA;;;;AAAT,SAASA;IACtB,qBACE,qBAACC;QACCC,eAAY;QACZC,QAAO;QACPC,gBAAe;QACfC,SAAQ;QACRC,OAAM;kBAEN,cAAA,qBAACC;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFC,MAAK;;;AAIb"}

package/dist/client/components/react-dev-overlay/ui/icons/external.d.ts

@@ -1 +1,2 @@
 export declare function ExternalIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SourceMappingErrorIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/ui/icons/external.js

@@ -2,10 +2,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "ExternalIcon", {
-    enumerable: true,
-    get: function() {
+0 && (module.exports = {
+    ExternalIcon: null,
+    SourceMappingErrorIcon: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ExternalIcon: function() {
         return ExternalIcon;
+    },
+    SourceMappingErrorIcon: function() {
+        return SourceMappingErrorIcon;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,6 +37,22 @@ function ExternalIcon(props) {
         })
     });
 }
+function SourceMappingErrorIcon(props) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "16",
+        strokeLinejoin: "round",
+        viewBox: "-4 -4 24 24",
+        width: "16",
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.55846 2H7.44148L1.88975 13.5H14.1102L8.55846 2ZM9.90929 1.34788C9.65902 0.829456 9.13413 0.5 8.55846 0.5H7.44148C6.86581 0.5 6.34092 0.829454 6.09065 1.34787L0.192608 13.5653C-0.127943 14.2293 0.355835 15 1.09316 15H14.9068C15.6441 15 16.1279 14.2293 15.8073 13.5653L9.90929 1.34788ZM8.74997 4.75V5.5V8V8.75H7.24997V8V5.5V4.75H8.74997ZM7.99997 12C8.55226 12 8.99997 11.5523 8.99997 11C8.99997 10.4477 8.55226 10 7.99997 10C7.44769 10 6.99997 10.4477 6.99997 11C6.99997 11.5523 7.44769 12 7.99997 12Z",
+            fill: "currentColor"
+        })
+    });
+}
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/icons/external.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/icons/external.tsx"],"sourcesContent":["export function ExternalIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        fill=\"currentColor\"\n        d=\"M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z\"\n      />\n    </svg>\n  )\n}\n"],"names":["ExternalIcon","props","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d"],"mappings":";;;;+BAAgBA;;;eAAAA;;;;AAAT,SAASA,aAAaC,KAAoC;IAC/D,qBACE,qBAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACJ,GAAGN,KAAK;kBAET,cAAA,qBAACO;YACCC,UAAS;YACTC,UAAS;YACTH,MAAK;YACLI,GAAE;;;AAIV"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/icons/external.tsx"],"sourcesContent":["export function ExternalIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        fill=\"currentColor\"\n        d=\"M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z\"\n      />\n    </svg>\n  )\n}\n\nexport function SourceMappingErrorIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"16\"\n      strokeLinejoin=\"round\"\n      viewBox=\"-4 -4 24 24\"\n      width=\"16\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.55846 2H7.44148L1.88975 13.5H14.1102L8.55846 2ZM9.90929 1.34788C9.65902 0.829456 9.13413 0.5 8.55846 0.5H7.44148C6.86581 0.5 6.34092 0.829454 6.09065 1.34787L0.192608 13.5653C-0.127943 14.2293 0.355835 15 1.09316 15H14.9068C15.6441 15 16.1279 14.2293 15.8073 13.5653L9.90929 1.34788ZM8.74997 4.75V5.5V8V8.75H7.24997V8V5.5V4.75H8.74997ZM7.99997 12C8.55226 12 8.99997 11.5523 8.99997 11C8.99997 10.4477 8.55226 10 7.99997 10C7.44769 10 6.99997 10.4477 6.99997 11C6.99997 11.5523 7.44769 12 7.99997 12Z\"\n        fill=\"currentColor\"\n      ></path>\n    </svg>\n  )\n}\n"],"names":["ExternalIcon","SourceMappingErrorIcon","props","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","strokeLinejoin"],"mappings":";;;;;;;;;;;;;;;IAAgBA,YAAY;eAAZA;;IAoBAC,sBAAsB;eAAtBA;;;;AApBT,SAASD,aAAaE,KAAoC;IAC/D,qBACE,qBAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACJ,GAAGN,KAAK;kBAET,cAAA,qBAACO;YACCC,UAAS;YACTC,UAAS;YACTH,MAAK;YACLI,GAAE;;;AAIV;AAEO,SAASX,uBAAuBC,KAAoC;IACzE,qBACE,qBAACC;QACCC,OAAM;QACNE,QAAO;QACPO,gBAAe;QACfN,SAAQ;QACRF,OAAM;QACL,GAAGH,KAAK;kBAET,cAAA,qBAACO;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFJ,MAAK;;;AAIb"}

package/dist/client/components/react-dev-overlay/ui/icons/eye-icon.d.ts

@@ -0,0 +1 @@
+export default function EyeIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/ui/icons/eye-icon.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return EyeIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+function EyeIcon() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        fill: "none",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "m.191 2.063.56.498 13.5 12 .561.498.997-1.121-.56-.498-1.81-1.608 2.88-3.342v-.98l-3.204-3.72C10.645.923 6.365.686 3.594 3.08L1.748 1.44 1.188.94.19 2.063ZM14.761 8l-2.442 2.836-1.65-1.466a3.001 3.001 0 0 0-4.342-3.86l-1.6-1.422a5.253 5.253 0 0 1 7.251.682L14.76 8ZM7.526 6.576l1.942 1.727a1.499 1.499 0 0 0-1.942-1.727Zm-7.845.935 1.722-2 1.137.979L1.24 8l2.782 3.23A5.25 5.25 0 0 0 9.9 12.703l.54 1.4a6.751 6.751 0 0 1-7.555-1.892L-.318 8.49v-.98Z",
+            clipRule: "evenodd"
+        })
+    });
+}
+
+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=eye-icon.js.map

package/dist/client/components/react-dev-overlay/ui/icons/eye-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/icons/eye-icon.tsx"],"sourcesContent":["export default function EyeIcon() {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\">\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        d=\"m.191 2.063.56.498 13.5 12 .561.498.997-1.121-.56-.498-1.81-1.608 2.88-3.342v-.98l-3.204-3.72C10.645.923 6.365.686 3.594 3.08L1.748 1.44 1.188.94.19 2.063ZM14.761 8l-2.442 2.836-1.65-1.466a3.001 3.001 0 0 0-4.342-3.86l-1.6-1.422a5.253 5.253 0 0 1 7.251.682L14.76 8ZM7.526 6.576l1.942 1.727a1.499 1.499 0 0 0-1.942-1.727Zm-7.845.935 1.722-2 1.137.979L1.24 8l2.782 3.23A5.25 5.25 0 0 0 9.9 12.703l.54 1.4a6.751 6.751 0 0 1-7.555-1.892L-.318 8.49v-.98Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\n"],"names":["EyeIcon","svg","xmlns","width","height","fill","path","fillRule","d","clipRule"],"mappings":";;;;+BAAA;;;eAAwBA;;;;AAAT,SAASA;IACtB,qBACE,qBAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,MAAK;kBAClE,cAAA,qBAACC;YACCD,MAAK;YACLE,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}

package/dist/client/components/react-dev-overlay/ui/icons/gear-icon.d.ts

@@ -0,0 +1 @@
+export default function GearIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/ui/icons/gear-icon.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return GearIcon;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+function GearIcon() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            fill: "currentColor",
+            fillRule: "evenodd",
+            d: "m9.7 3.736.045-.236h.51l.044.236a2.024 2.024 0 0 0 1.334 1.536c.19.066.375.143.554.23.618.301 1.398.29 2.03-.143l.199-.136.36.361-.135.199a2.024 2.024 0 0 0-.143 2.03c.087.179.164.364.23.554.224.65.783 1.192 1.536 1.334l.236.044v.51l-.236.044a2.024 2.024 0 0 0-1.536 1.334 4.95 4.95 0 0 1-.23.554 2.024 2.024 0 0 0 .143 2.03l.136.199-.361.36-.199-.135a2.024 2.024 0 0 0-2.03-.143c-.179.087-.364.164-.554.23a2.024 2.024 0 0 0-1.334 1.536l-.044.236h-.51l-.044-.236a2.024 2.024 0 0 0-1.334-1.536 4.952 4.952 0 0 1-.554-.23 2.024 2.024 0 0 0-2.03.143l-.199.136-.36-.361.135-.199a2.024 2.024 0 0 0 .143-2.03 4.958 4.958 0 0 1-.23-.554 2.024 2.024 0 0 0-1.536-1.334l-.236-.044v-.51l.236-.044a2.024 2.024 0 0 0 1.536-1.334 4.96 4.96 0 0 1 .23-.554 2.024 2.024 0 0 0-.143-2.03l-.136-.199.361-.36.199.135a2.024 2.024 0 0 0 2.03.143c.179-.087.364-.164.554-.23a2.024 2.024 0 0 0 1.334-1.536ZM8.5 2h3l.274 1.46c.034.185.17.333.348.394.248.086.49.186.722.3.17.082.37.074.526-.033l1.226-.839 2.122 2.122-.84 1.226a.524.524 0 0 0-.032.526c.114.233.214.474.3.722.061.177.21.314.394.348L18 8.5v3l-1.46.274a.524.524 0 0 0-.394.348 6.47 6.47 0 0 1-.3.722.524.524 0 0 0 .033.526l.839 1.226-2.122 2.122-1.226-.84a.524.524 0 0 0-.526-.032 6.477 6.477 0 0 1-.722.3.524.524 0 0 0-.348.394L11.5 18h-3l-.274-1.46a.524.524 0 0 0-.348-.394 6.477 6.477 0 0 1-.722-.3.524.524 0 0 0-.526.033l-1.226.839-2.122-2.122.84-1.226a.524.524 0 0 0 .032-.526 6.453 6.453 0 0 1-.3-.722.524.524 0 0 0-.394-.348L2 11.5v-3l1.46-.274a.524.524 0 0 0 .394-.348c.086-.248.186-.49.3-.722a.524.524 0 0 0-.033-.526l-.839-1.226 2.122-2.122 1.226.84a.524.524 0 0 0 .526.032 6.46 6.46 0 0 1 .722-.3.524.524 0 0 0 .348-.394L8.5 2Zm3 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm1.5 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z",
+            clipRule: "evenodd"
+        })
+    });
+}
+
+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=gear-icon.js.map

package/dist/client/components/react-dev-overlay/ui/icons/gear-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/icons/gear-icon.tsx"],"sourcesContent":["export default function GearIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        d=\"m9.7 3.736.045-.236h.51l.044.236a2.024 2.024 0 0 0 1.334 1.536c.19.066.375.143.554.23.618.301 1.398.29 2.03-.143l.199-.136.36.361-.135.199a2.024 2.024 0 0 0-.143 2.03c.087.179.164.364.23.554.224.65.783 1.192 1.536 1.334l.236.044v.51l-.236.044a2.024 2.024 0 0 0-1.536 1.334 4.95 4.95 0 0 1-.23.554 2.024 2.024 0 0 0 .143 2.03l.136.199-.361.36-.199-.135a2.024 2.024 0 0 0-2.03-.143c-.179.087-.364.164-.554.23a2.024 2.024 0 0 0-1.334 1.536l-.044.236h-.51l-.044-.236a2.024 2.024 0 0 0-1.334-1.536 4.952 4.952 0 0 1-.554-.23 2.024 2.024 0 0 0-2.03.143l-.199.136-.36-.361.135-.199a2.024 2.024 0 0 0 .143-2.03 4.958 4.958 0 0 1-.23-.554 2.024 2.024 0 0 0-1.536-1.334l-.236-.044v-.51l.236-.044a2.024 2.024 0 0 0 1.536-1.334 4.96 4.96 0 0 1 .23-.554 2.024 2.024 0 0 0-.143-2.03l-.136-.199.361-.36.199.135a2.024 2.024 0 0 0 2.03.143c.179-.087.364-.164.554-.23a2.024 2.024 0 0 0 1.334-1.536ZM8.5 2h3l.274 1.46c.034.185.17.333.348.394.248.086.49.186.722.3.17.082.37.074.526-.033l1.226-.839 2.122 2.122-.84 1.226a.524.524 0 0 0-.032.526c.114.233.214.474.3.722.061.177.21.314.394.348L18 8.5v3l-1.46.274a.524.524 0 0 0-.394.348 6.47 6.47 0 0 1-.3.722.524.524 0 0 0 .033.526l.839 1.226-2.122 2.122-1.226-.84a.524.524 0 0 0-.526-.032 6.477 6.477 0 0 1-.722.3.524.524 0 0 0-.348.394L11.5 18h-3l-.274-1.46a.524.524 0 0 0-.348-.394 6.477 6.477 0 0 1-.722-.3.524.524 0 0 0-.526.033l-1.226.839-2.122-2.122.84-1.226a.524.524 0 0 0 .032-.526 6.453 6.453 0 0 1-.3-.722.524.524 0 0 0-.394-.348L2 11.5v-3l1.46-.274a.524.524 0 0 0 .394-.348c.086-.248.186-.49.3-.722a.524.524 0 0 0-.033-.526l-.839-1.226 2.122-2.122 1.226.84a.524.524 0 0 0 .526.032 6.46 6.46 0 0 1 .722-.3.524.524 0 0 0 .348-.394L8.5 2Zm3 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm1.5 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\n"],"names":["GearIcon","svg","xmlns","width","height","viewBox","fill","path","fillRule","d","clipRule"],"mappings":";;;;+BAAA;;;eAAwBA;;;;AAAT,SAASA;IACtB,qBACE,qBAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;kBAEL,cAAA,qBAACC;YACCD,MAAK;YACLE,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}

package/dist/client/components/react-dev-overlay/ui/icons/light-icon.d.ts

@@ -0,0 +1 @@
+export default function LightIcon(): import("react/jsx-runtime").JSX.Element;