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

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

@@ -0,0 +1,225 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+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;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DevToolsInfo } from './dev-tools-info';
+import { css } from '../../../../../utils/css';
+import EyeIcon from '../../../../icons/eye-icon';
+import { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared';
+import LightIcon from '../../../../icons/light-icon';
+import DarkIcon from '../../../../icons/dark-icon';
+function getInitialPreference() {
+    if (typeof localStorage === 'undefined') {
+        return 'system';
+    }
+    const theme = localStorage.getItem(STORAGE_KEY_THEME);
+    return theme === 'dark' || theme === 'light' ? theme : 'system';
+}
+export function UserPreferences(param) {
+    let { isOpen, setPosition, position, hide, ...props } = param;
+    // derive initial theme from system preference
+    const [theme, setTheme] = 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(STORAGE_KEY_THEME);
+            return;
+        }
+        if (e.target.value === 'dark') {
+            portal.classList.add('dark');
+            portal.classList.remove('light');
+            localStorage.setItem(STORAGE_KEY_THEME, 'dark');
+        } else {
+            portal.classList.remove('dark');
+            portal.classList.add('light');
+            localStorage.setItem(STORAGE_KEY_THEME, 'light');
+        }
+    };
+    function handlePositionChange(e) {
+        setPosition(e.target.value);
+        localStorage.setItem(STORAGE_KEY_POSITION, e.target.value);
+    }
+    return /*#__PURE__*/ _jsx(DevToolsInfo, {
+        title: "Preferences",
+        ...props,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "preferences-container",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "preference-section",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "preference-header",
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: "Theme"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "preference-description",
+                                    children: "Select your theme preference."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "preference-control-select",
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "preference-icon",
+                                    children: /*#__PURE__*/ _jsx(ThemeIcon, {
+                                        theme: theme
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs("select", {
+                                    className: "select-button",
+                                    value: theme,
+                                    onChange: handleThemeChange,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("option", {
+                                            value: "system",
+                                            children: "System"
+                                        }),
+                                        /*#__PURE__*/ _jsx("option", {
+                                            value: "light",
+                                            children: "Light"
+                                        }),
+                                        /*#__PURE__*/ _jsx("option", {
+                                            value: "dark",
+                                            children: "Dark"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "preference-section",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "preference-header",
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: "Position"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "preference-description",
+                                    children: "Adjust the placement of your dev tools."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "preference-control-select",
+                            children: /*#__PURE__*/ _jsxs("select", {
+                                className: "select-button",
+                                value: position,
+                                onChange: handlePositionChange,
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "bottom-left",
+                                        children: "Bottom Left"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "bottom-right",
+                                        children: "Bottom Right"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "top-left",
+                                        children: "Top Left"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "top-right",
+                                        children: "Top Right"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "preference-section",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "preference-header",
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: "Hide Dev Tools for this session"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: "preference-description",
+                                    children: "Hide Dev Tools until you restart your dev server, or 1 day."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "preference-control",
+                            children: /*#__PURE__*/ _jsxs("button", {
+                                "data-hide-dev-tools": true,
+                                className: "action-button",
+                                onClick: hide,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "preference-icon",
+                                        children: /*#__PURE__*/ _jsx(EyeIcon, {})
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: "Hide"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "preference-section",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "preference-header",
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                children: "Disable Dev Tools for this project"
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                className: "preference-description",
+                                children: [
+                                    "To disable this UI completely, set",
+                                    ' ',
+                                    /*#__PURE__*/ _jsx("code", {
+                                        className: "dev-tools-info-code",
+                                        children: "devIndicators: false"
+                                    }),
+                                    ' ',
+                                    "in your ",
+                                    /*#__PURE__*/ _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__*/ _jsx(DarkIcon, {}) : /*#__PURE__*/ _jsx(LightIcon, {});
+}
+export const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css(_templateObject());
+
+//# sourceMappingURL=user-preferences.js.map

package/dist/esm/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":["useState","DevToolsInfo","css","EyeIcon","STORAGE_KEY_POSITION","STORAGE_KEY_THEME","LightIcon","DarkIcon","getInitialPreference","localStorage","theme","getItem","UserPreferences","isOpen","setPosition","position","hide","props","setTheme","handleThemeChange","e","portal","document","querySelector","target","value","classList","remove","removeItem","add","setItem","handlePositionChange","title","div","className","h2","p","ThemeIcon","select","onChange","option","button","data-hide-dev-tools","onClick","span","code","activeTheme","window","matchMedia","matches","DEV_TOOLS_INFO_USER_PREFERENCES_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQ,QAAQ,QAAO;AAChC,SAASC,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,GAAG,QAAQ,2BAA0B;AAE9C,OAAOC,aAAa,6BAA4B;AAChD,SAASC,oBAAoB,EAAEC,iBAAiB,QAAQ,wBAAuB;AAC/E,OAAOC,eAAe,+BAA8B;AACpD,OAAOC,cAAc,8BAA6B;AAElD,SAASC;IACP,IAAI,OAAOC,iBAAiB,aAAa;QACvC,OAAO;IACT;IAEA,MAAMC,QAAQD,aAAaE,OAAO,CAACN;IACnC,OAAOK,UAAU,UAAUA,UAAU,UAAUA,QAAQ;AACzD;AAEA,OAAO,SAASE,gBAAgB,KAa/B;IAb+B,IAAA,EAC9BC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,IAAI,EACJ,GAAGC,OAQJ,GAb+B;IAc9B,8CAA8C;IAC9C,MAAM,CAACP,OAAOQ,SAAS,GAAGlB,SAASQ;IAEnC,MAAMW,oBAAoB,CAACC;QACzB,MAAMC,SAASC,SAASC,aAAa,CAAC;QACtC,IAAI,CAACF,QAAQ;QAEbH,SAASE,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;YACxBlB,aAAamB,UAAU,CAACvB;YACxB;QACF;QAEA,IAAIe,EAAEI,MAAM,CAACC,KAAK,KAAK,QAAQ;YAC7BJ,OAAOK,SAAS,CAACG,GAAG,CAAC;YACrBR,OAAOK,SAAS,CAACC,MAAM,CAAC;YACxBlB,aAAaqB,OAAO,CAACzB,mBAAmB;QAC1C,OAAO;YACLgB,OAAOK,SAAS,CAACC,MAAM,CAAC;YACxBN,OAAOK,SAAS,CAACG,GAAG,CAAC;YACrBpB,aAAaqB,OAAO,CAACzB,mBAAmB;QAC1C;IACF;IAEA,SAAS0B,qBAAqBX,CAAuC;QACnEN,YAAYM,EAAEI,MAAM,CAACC,KAAK;QAC1BhB,aAAaqB,OAAO,CAAC1B,sBAAsBgB,EAAEI,MAAM,CAACC,KAAK;IAC3D;IAEA,qBACE,KAACxB;QAAa+B,OAAM;QAAe,GAAGf,KAAK;kBACzC,cAAA,MAACgB;YAAIC,WAAU;;8BACb,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACC;8CAAG;;8CACJ,KAACC;oCAAEF,WAAU;8CAAyB;;;;sCAIxC,MAACD;4BAAIC,WAAU;;8CACb,KAACD;oCAAIC,WAAU;8CACb,cAAA,KAACG;wCAAU3B,OAAOA;;;8CAEpB,MAAC4B;oCACCJ,WAAU;oCACVT,OAAOf;oCACP6B,UAAUpB;;sDAEV,KAACqB;4CAAOf,OAAM;sDAAS;;sDACvB,KAACe;4CAAOf,OAAM;sDAAQ;;sDACtB,KAACe;4CAAOf,OAAM;sDAAO;;;;;;;;8BAK3B,MAACQ;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACC;8CAAG;;8CACJ,KAACC;oCAAEF,WAAU;8CAAyB;;;;sCAIxC,KAACD;4BAAIC,WAAU;sCACb,cAAA,MAACI;gCACCJ,WAAU;gCACVT,OAAOV;gCACPwB,UAAUR;;kDAEV,KAACS;wCAAOf,OAAM;kDAAc;;kDAC5B,KAACe;wCAAOf,OAAM;kDAAe;;kDAC7B,KAACe;wCAAOf,OAAM;kDAAW;;kDACzB,KAACe;wCAAOf,OAAM;kDAAY;;;;;;;8BAKhC,MAACQ;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACC;8CAAG;;8CACJ,KAACC;oCAAEF,WAAU;8CAAyB;;;;sCAIxC,KAACD;4BAAIC,WAAU;sCACb,cAAA,MAACO;gCACCC,qBAAmB;gCACnBR,WAAU;gCACVS,SAAS3B;;kDAET,KAACiB;wCAAIC,WAAU;kDACb,cAAA,KAAC/B;;kDAEH,KAACyC;kDAAK;;;;;;;8BAKZ,KAACX;oBAAIC,WAAU;8BACb,cAAA,MAACD;wBAAIC,WAAU;;0CACb,KAACC;0CAAG;;0CACJ,MAACC;gCAAEF,WAAU;;oCAAyB;oCACD;kDACnC,KAACW;wCAAKX,WAAU;kDAAsB;;oCAA4B;oCAAI;kDAC9D,KAACW;wCAAKX,WAAU;kDAAsB;;oCAAmB;oCAAI;;;;;;;;;AAQnF;AAEA,SAASG,UAAU,KAAiD;IAAjD,IAAA,EAAE3B,KAAK,EAA0C,GAAjD;IACjB,MAAMoC,cACJpC,UAAU,WACNqC,OAAOC,UAAU,CAAC,gCAAgCC,OAAO,GACvD,SACA,UACFvC;IAEN,OAAOoC,gBAAgB,uBAAS,KAACvC,8BAAc,KAACD;AAClD;AAEA,OAAO,MAAM4C,yCAAyChD,uBAuGrD"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import { STORAGE_KEY_THEME } from '../../shared';
 export function ShadowPortal(param) {
     let { children } = param;
     let portalNode = React.useRef(null);
@@ -8,6 +9,17 @@ export 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(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/esm/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":["React","createPortal","ShadowPortal","children","portalNode","useRef","shadowNode","forceUpdate","useState","useLayoutEffect","ownerDocument","document","current","createElement","attachShadow","mode","body","appendChild","removeChild"],"mappings":"AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,YAAY,QAAQ,YAAW;AAExC,OAAO,SAASC,aAAa,KAA2C;IAA3C,IAAA,EAAEC,QAAQ,EAAiC,GAA3C;IAC3B,IAAIC,aAAaJ,MAAMK,MAAM,CAAqB;IAClD,IAAIC,aAAaN,MAAMK,MAAM,CAAoB;IACjD,IAAI,GAAGE,YAAY,GAAGP,MAAMQ,QAAQ;IAEpCR,MAAMS,eAAe,CAAC;QACpB,MAAMC,gBAAgBC;QACtBP,WAAWQ,OAAO,GAAGF,cAAcG,aAAa,CAAC;QACjDP,WAAWM,OAAO,GAAGR,WAAWQ,OAAO,CAACE,YAAY,CAAC;YAAEC,MAAM;QAAO;QACpEL,cAAcM,IAAI,CAACC,WAAW,CAACb,WAAWQ,OAAO;QACjDL,YAAY,CAAC;QACb,OAAO;YACL,IAAIH,WAAWQ,OAAO,IAAIR,WAAWQ,OAAO,CAACF,aAAa,EAAE;gBAC1DN,WAAWQ,OAAO,CAACF,aAAa,CAACM,IAAI,CAACE,WAAW,CAACd,WAAWQ,OAAO;YACtE;QACF;IACF,GAAG,EAAE;IAEL,OAAON,WAAWM,OAAO,iBACrBX,aAAaE,UAAUG,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":["React","createPortal","STORAGE_KEY_THEME","ShadowPortal","children","portalNode","useRef","shadowNode","forceUpdate","useState","useLayoutEffect","ownerDocument","document","current","createElement","localStorage","theme","getItem","classList","add","remove","attachShadow","mode","body","appendChild","removeChild"],"mappings":"AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,YAAY,QAAQ,YAAW;AACxC,SAASC,iBAAiB,QAAQ,eAAc;AAEhD,OAAO,SAASC,aAAa,KAA2C;IAA3C,IAAA,EAAEC,QAAQ,EAAiC,GAA3C;IAC3B,IAAIC,aAAaL,MAAMM,MAAM,CAAqB;IAClD,IAAIC,aAAaP,MAAMM,MAAM,CAAoB;IACjD,IAAI,GAAGE,YAAY,GAAGR,MAAMS,QAAQ;IAEpCT,MAAMU,eAAe,CAAC;QACpB,MAAMC,gBAAgBC;QACtBP,WAAWQ,OAAO,GAAGF,cAAcG,aAAa,CAAC;QACjD,kDAAkD;QAClD,IAAI,OAAOC,iBAAiB,aAAa;YACvC,MAAMC,QAAQD,aAAaE,OAAO,CAACf;YACnC,IAAIc,UAAU,QAAQ;gBACpBX,WAAWQ,OAAO,CAACK,SAAS,CAACC,GAAG,CAAC;gBACjCd,WAAWQ,OAAO,CAACK,SAAS,CAACE,MAAM,CAAC;YACtC,OAAO,IAAIJ,UAAU,SAAS;gBAC5BX,WAAWQ,OAAO,CAACK,SAAS,CAACE,MAAM,CAAC;gBACpCf,WAAWQ,OAAO,CAACK,SAAS,CAACC,GAAG,CAAC;YACnC;QACF;QAEAZ,WAAWM,OAAO,GAAGR,WAAWQ,OAAO,CAACQ,YAAY,CAAC;YAAEC,MAAM;QAAO;QACpEX,cAAcY,IAAI,CAACC,WAAW,CAACnB,WAAWQ,OAAO;QACjDL,YAAY,CAAC;QACb,OAAO;YACL,IAAIH,WAAWQ,OAAO,IAAIR,WAAWQ,OAAO,CAACF,aAAa,EAAE;gBAC1DN,WAAWQ,OAAO,CAACF,aAAa,CAACY,IAAI,CAACE,WAAW,CAACpB,WAAWQ,OAAO;YACtE;QACF;IACF,GAAG,EAAE;IAEL,OAAON,WAAWM,OAAO,iBACrBZ,aAAaG,UAAUG,WAAWM,OAAO,IACzC;AACN"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DarkIcon() {
+    return /*#__PURE__*/ _jsx("svg", {
+        "data-testid": "geist-icon",
+        height: "16",
+        strokeLinejoin: "round",
+        viewBox: "0 0 16 16",
+        width: "16",
+        children: /*#__PURE__*/ _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"
+        })
+    });
+}
+
+//# sourceMappingURL=dark-icon.js.map

package/dist/esm/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":";AAAA,eAAe,SAASA;IACtB,qBACE,KAACC;QACCC,eAAY;QACZC,QAAO;QACPC,gBAAe;QACfC,SAAQ;QACRC,OAAM;kBAEN,cAAA,KAACC;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFC,MAAK;;;AAIb"}

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

@@ -15,5 +15,21 @@ export function ExternalIcon(props) {
         })
     });
 }
+export function SourceMappingErrorIcon(props) {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "16",
+        strokeLinejoin: "round",
+        viewBox: "-4 -4 24 24",
+        width: "16",
+        ...props,
+        children: /*#__PURE__*/ _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"
+        })
+    });
+}
 
 //# sourceMappingURL=external.js.map

package/dist/esm/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":";AAAA,OAAO,SAASA,aAAaC,KAAoC;IAC/D,qBACE,KAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACJ,GAAGN,KAAK;kBAET,cAAA,KAACO;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","props","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","SourceMappingErrorIcon","strokeLinejoin"],"mappings":";AAAA,OAAO,SAASA,aAAaC,KAAoC;IAC/D,qBACE,KAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACJ,GAAGN,KAAK;kBAET,cAAA,KAACO;YACCC,UAAS;YACTC,UAAS;YACTH,MAAK;YACLI,GAAE;;;AAIV;AAEA,OAAO,SAASC,uBAAuBX,KAAoC;IACzE,qBACE,KAACC;QACCC,OAAM;QACNE,QAAO;QACPQ,gBAAe;QACfP,SAAQ;QACRF,OAAM;QACL,GAAGH,KAAK;kBAET,cAAA,KAACO;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFJ,MAAK;;;AAIb"}

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function EyeIcon() {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        fill: "none",
+        children: /*#__PURE__*/ _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"
+        })
+    });
+}
+
+//# sourceMappingURL=eye-icon.js.map

package/dist/esm/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":";AAAA,eAAe,SAASA;IACtB,qBACE,KAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,MAAK;kBAClE,cAAA,KAACC;YACCD,MAAK;YACLE,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function GearIcon() {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 20 20",
+        fill: "none",
+        children: /*#__PURE__*/ _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"
+        })
+    });
+}
+
+//# sourceMappingURL=gear-icon.js.map

package/dist/esm/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":";AAAA,eAAe,SAASA;IACtB,qBACE,KAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;kBAEL,cAAA,KAACC;YACCD,MAAK;YACLE,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function LightIcon() {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        children: [
+            /*#__PURE__*/ _jsx("g", {
+                clipPath: "url(#a)",
+                children: /*#__PURE__*/ _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__*/ _jsx("defs", {
+                children: /*#__PURE__*/ _jsx("clipPath", {
+                    id: "a",
+                    children: /*#__PURE__*/ _jsx("path", {
+                        fill: "currentColor",
+                        d: "M0 0h16v16H0z"
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=light-icon.js.map

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

@@ -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":";AAAA,eAAe,SAASA;IACtB,qBACE,MAACC;QACCC,OAAM;QACNC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;;0BAEL,KAACC;gBAAEC,UAAS;0BACV,cAAA,KAACC;oBACCH,MAAK;oBACLI,UAAS;oBACTC,GAAE;oBACFC,UAAS;;;0BAGb,KAACC;0BACC,cAAA,KAACL;oBAASM,IAAG;8BACX,cAAA,KAACL;wBAAKH,MAAK;wBAAeK,GAAE;;;;;;AAKtC"}

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

@@ -1,18 +1,30 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n        :host {\n          /* \n            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;
+}
 import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from '../../utils/css';
+const darkTheme = css(_templateObject());
 export function Base() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject())
+        children: css(_templateObject1(), darkTheme, darkTheme)
     });
 }
 

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

@@ -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":["css","Base","style"],"mappings":";;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF;;AAiJP"}
+{"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":["css","darkTheme","Base","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,MAAMC,YAAYD;AASlB,OAAO,SAASE;IACd,qBACE,KAACC;kBACEH,wBAgHKC,WAKEA;;AA2Bd"}