@tanstack/devtools 0.6.3 → 0.6.5

package/dist/esm/context/devtools-context.d.ts

@@ -27,7 +27,7 @@ export interface TanStackDevtoolsPlugin {
      *   }
      * ```
      */
-    name: string | ((el: HTMLHeadingElement) => void);
+    name: string | ((el: HTMLHeadingElement, theme: DevtoolsStore['settings']['theme']) => void);
     /**
      * Unique identifier for the plugin.
      * If not provided, it will be generated based on the name.
@@ -46,7 +46,7 @@ export interface TanStackDevtoolsPlugin {
      *   }
      * ```
      */
-    render: (el: HTMLDivElement) => void;
+    render: (el: HTMLDivElement, theme: DevtoolsStore['settings']['theme']) => void;
 }
 export declare const DevtoolsContext: import('solid-js').Context<{
     store: DevtoolsStore;

package/dist/esm/context/devtools-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     // If a string, it will be used as the plugin name\n   *     name: \"Your Plugin\",\n   *     render: () => {}\n   *   }\n   * ```\n   * or\n   *\n   * ```ts\n   *   {\n   *     // If a function, it will be called with the mount element\n   *     name: (el) => {\n   *       el.innerText = \"Your Plugin Name\"\n   *       // Your name logic here\n   *     },\n   *     render: () => {}\n   *   }\n   * ```\n   */\n  name: string | ((el: HTMLHeadingElement) => void)\n  /**\n   * Unique identifier for the plugin.\n   * If not provided, it will be generated based on the name.\n   */\n  id?: string\n  /**\n   * Render the plugin UI by using the provided element. This function will be called\n   * when the plugin tab is clicked and expected to be mounted.\n   * @param el The mount element for the plugin.\n   * @returns void\n   *\n   * Example:\n   * ```ts\n   *   render: (el) => {\n   *     el.innerHTML = \"<h1>Your Plugin</h1>\"\n   *   }\n   * ```\n   */\n  render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<TanStackDevtoolsPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n  // if set by user, return the plugin id\n  if (plugin.id) {\n    return plugin.id\n  }\n  if (typeof plugin.name === 'string') {\n    // if name is a string, use it to generate an id\n    return `${plugin.name.toLowerCase().replace(' ', '-')}-${index}`\n  }\n  // Name is JSX? return the index as a string\n  return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n  config?: TanStackDevtoolsConfig,\n  plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins:\n      plugins?.map((plugin, i) => {\n        const id = generatePluginId(plugin, i)\n        return {\n          ...plugin,\n          id,\n        }\n      }) || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;AA6DO,MAAMA,kBAAkBC,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,eAAeC,0BAA0B;AAChE,QAAMC,WAAWC,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAO,GAAGH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG,CAAC,IAAIJ,KAAK;AAAA,EAChE;AAEA,SAAOA,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,eAAegB,uBAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,OAAOC,QAAQ,IAAIC,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,KAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,qBAAe/B,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,qBAAehB,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;"}
+{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     // If a string, it will be used as the plugin name\n   *     name: \"Your Plugin\",\n   *     render: () => {}\n   *   }\n   * ```\n   * or\n   *\n   * ```ts\n   *   {\n   *     // If a function, it will be called with the mount element\n   *     name: (el) => {\n   *       el.innerText = \"Your Plugin Name\"\n   *       // Your name logic here\n   *     },\n   *     render: () => {}\n   *   }\n   * ```\n   */\n  name:\n    | string\n    | ((\n        el: HTMLHeadingElement,\n        theme: DevtoolsStore['settings']['theme'],\n      ) => void)\n  /**\n   * Unique identifier for the plugin.\n   * If not provided, it will be generated based on the name.\n   */\n  id?: string\n  /**\n   * Render the plugin UI by using the provided element. This function will be called\n   * when the plugin tab is clicked and expected to be mounted.\n   * @param el The mount element for the plugin.\n   * @returns void\n   *\n   * Example:\n   * ```ts\n   *   render: (el) => {\n   *     el.innerHTML = \"<h1>Your Plugin</h1>\"\n   *   }\n   * ```\n   */\n  render: (\n    el: HTMLDivElement,\n    theme: DevtoolsStore['settings']['theme'],\n  ) => void\n}\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<TanStackDevtoolsPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n  // if set by user, return the plugin id\n  if (plugin.id) {\n    return plugin.id\n  }\n  if (typeof plugin.name === 'string') {\n    // if name is a string, use it to generate an id\n    return `${plugin.name.toLowerCase().replace(' ', '-')}-${index}`\n  }\n  // Name is JSX? return the index as a string\n  return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n  config?: TanStackDevtoolsConfig,\n  plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins:\n      plugins?.map((plugin, i) => {\n        const id = generatePluginId(plugin, i)\n        return {\n          ...plugin,\n          id,\n        }\n      }) || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;AAqEO,MAAMA,kBAAkBC,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,eAAeC,0BAA0B;AAChE,QAAMC,WAAWC,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAO,GAAGH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG,CAAC,IAAIJ,KAAK;AAAA,EAChE;AAEA,SAAOA,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,eAAegB,uBAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,OAAOC,QAAQ,IAAIC,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,KAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,qBAAe/B,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,qBAAehB,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;"}

package/dist/esm/context/devtools-store.d.ts

@@ -41,6 +41,11 @@ export type DevtoolsStore = {
          * @default "tanstack-devtools"
          */
         urlFlag: string;
+        /**
+         * The theme of the dev tools
+         * @default "dark"
+         */
+        theme: 'light' | 'dark';
     };
     state: {
         activeTab: TabName;

package/dist/esm/context/devtools-store.js

@@ -12,7 +12,8 @@ const initialState = {
     panelLocation: "bottom",
     openHotkey: ["Shift", "A"],
     requireUrlFlag: false,
-    urlFlag: "tanstack-devtools"
+    urlFlag: "tanstack-devtools",
+    theme: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   },
   state: {
     activeTab: "plugins",

package/dist/esm/context/devtools-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools-store.js","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { TanStackDevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\nexport const keyboardModifiers: Array<ModifierKey> = [\n  'Alt',\n  'Control',\n  'Meta',\n  'Shift',\n]\n\ntype TriggerPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'middle-left'\n  | 'middle-right'\n\nexport type DevtoolsStore = {\n  settings: {\n    /**\n     * Whether the dev tools should be open by default\n     * @default false\n     */\n    defaultOpen: boolean\n    /**\n     * Whether the dev tools trigger should be hidden until the user hovers over it\n     * @default false\n     */\n    hideUntilHover: boolean\n    /**\n     * The position of the trigger button\n     * @default \"bottom-right\"\n     */\n    position: TriggerPosition\n\n    /**\n     * The location of the panel once it is open\n     * @default \"bottom\"\n     */\n    panelLocation: 'top' | 'bottom'\n    /**\n     * The hotkey to open the dev tools\n     * @default \"shift+a\"\n     */\n    openHotkey: Array<KeyboardKey>\n    /**\n     * Whether to require the URL flag to open the dev tools\n     * @default false\n     */\n    requireUrlFlag: boolean\n    /**\n     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)\n     * @default \"tanstack-devtools\"\n     */\n    urlFlag: string\n  }\n  state: {\n    activeTab: TabName\n    height: number\n    activePlugin?: string | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport const initialState: DevtoolsStore = {\n  settings: {\n    defaultOpen: false,\n    hideUntilHover: false,\n    position: 'bottom-right',\n    panelLocation: 'bottom',\n    openHotkey: ['Shift', 'A'],\n    requireUrlFlag: false,\n    urlFlag: 'tanstack-devtools',\n  },\n  state: {\n    activeTab: 'plugins',\n    height: 400,\n    activePlugin: undefined,\n    persistOpen: false,\n  },\n}\n"],"names":[],"mappings":"AAKO,MAAM,oBAAwC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA0DO,MAAM,eAA8B;AAAA,EACzC,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,IACf,YAAY,CAAC,SAAS,GAAG;AAAA,IACzB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"devtools-store.js","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { TanStackDevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\nexport const keyboardModifiers: Array<ModifierKey> = [\n  'Alt',\n  'Control',\n  'Meta',\n  'Shift',\n]\n\ntype TriggerPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'middle-left'\n  | 'middle-right'\n\nexport type DevtoolsStore = {\n  settings: {\n    /**\n     * Whether the dev tools should be open by default\n     * @default false\n     */\n    defaultOpen: boolean\n    /**\n     * Whether the dev tools trigger should be hidden until the user hovers over it\n     * @default false\n     */\n    hideUntilHover: boolean\n    /**\n     * The position of the trigger button\n     * @default \"bottom-right\"\n     */\n    position: TriggerPosition\n\n    /**\n     * The location of the panel once it is open\n     * @default \"bottom\"\n     */\n    panelLocation: 'top' | 'bottom'\n    /**\n     * The hotkey to open the dev tools\n     * @default \"shift+a\"\n     */\n    openHotkey: Array<KeyboardKey>\n    /**\n     * Whether to require the URL flag to open the dev tools\n     * @default false\n     */\n    requireUrlFlag: boolean\n    /**\n     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)\n     * @default \"tanstack-devtools\"\n     */\n    urlFlag: string\n    /**\n     * The theme of the dev tools\n     * @default \"dark\"\n     */\n    theme: 'light' | 'dark'\n  }\n  state: {\n    activeTab: TabName\n    height: number\n    activePlugin?: string | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport const initialState: DevtoolsStore = {\n  settings: {\n    defaultOpen: false,\n    hideUntilHover: false,\n    position: 'bottom-right',\n    panelLocation: 'bottom',\n    openHotkey: ['Shift', 'A'],\n    requireUrlFlag: false,\n    urlFlag: 'tanstack-devtools',\n    theme: window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light',\n  },\n  state: {\n    activeTab: 'plugins',\n    height: 400,\n    activePlugin: undefined,\n    persistOpen: false,\n  },\n}\n"],"names":[],"mappings":"AAKO,MAAM,oBAAwC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA+DO,MAAM,eAA8B;AAAA,EACzC,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,IACf,YAAY,CAAC,SAAS,GAAG;AAAA,IACzB,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO,OAAO,WAAW,8BAA8B,EAAE,UACrD,SACA;AAAA,EAAA;AAAA,EAEN,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;"}

package/dist/esm/context/use-devtools-context.d.ts

@@ -1,4 +1,8 @@
 import { DevtoolsStore } from './devtools-store.js';
+export declare function useTheme(): {
+    theme: import('solid-js').Accessor<"light" | "dark">;
+    setTheme: (theme: DevtoolsStore["settings"]["theme"]) => void;
+};
 export declare const usePlugins: () => {
     plugins: import('solid-js').Accessor<import('./devtools-context.jsx').TanStackDevtoolsPlugin[] | undefined>;
     setActivePlugin: (pluginId: string) => void;
@@ -23,6 +27,7 @@ export declare const useDevtoolsSettings: () => {
         openHotkey: Array<(string & {}) | ("Alt" | "Control" | "Meta" | "Shift")>;
         requireUrlFlag: boolean;
         urlFlag: string;
+        theme: "light" | "dark";
     }>;
 };
 export declare const usePersistOpen: () => {

package/dist/esm/context/use-devtools-context.js

@@ -10,6 +10,14 @@ const useDevtoolsContext = () => {
   }
   return context;
 };
+function useTheme() {
+  const { settings, setSettings } = useDevtoolsSettings();
+  const theme = createMemo(() => settings().theme);
+  return {
+    theme,
+    setTheme: (theme2) => setSettings({ theme: theme2 })
+  };
+}
 const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext();
   const { setForceExpand } = useDrawContext();
@@ -82,6 +90,7 @@ export {
   useDevtoolsState,
   useHeight,
   usePersistOpen,
-  usePlugins
+  usePlugins,
+  useTheme
 };
 //# sourceMappingURL=use-devtools-context.js.map

package/dist/esm/context/use-devtools-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-devtools-context.js","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createEffect, createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\nimport { useDrawContext } from './draw-context.jsx'\n\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const { setForceExpand } = useDrawContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  createEffect(() => {\n    if (activePlugin() == null) {\n      setForceExpand(false)\n    } else {\n      setForceExpand(true)\n    }\n  })\n\n  const setActivePlugin = (pluginId: string) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: pluginId,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,EAAE,eAAA,IAAmB,eAAA;AAE3B,QAAM,UAAU,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAe,WAAW,MAAM,MAAM,MAAM,YAAY;AAE9D,eAAa,MAAM;AACjB,QAAI,aAAA,KAAkB,MAAM;AAC1B,qBAAe,KAAK;AAAA,IACtB,OAAO;AACL,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,SAAS,iBAAiB,aAAA;AACrC;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,QAAQ,WAAW,MAAM,MAAM,KAAK;AAC1C,QAAM,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACA,SAAO,EAAE,OAAO,SAAA;AAClB;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,WAAW,WAAW,MAAM,MAAM,QAAQ;AAEhD,QAAM,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,aAAa,SAAA;AACxB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,cAAc,WAAW,MAAM,MAAA,EAAQ,WAAW;AAExD,QAAM,iBAAiB,CAAC,UAAmB;AACzC,aAAS,EAAE,aAAa,OAAO;AAAA,EACjC;AAEA,SAAO,EAAE,aAAa,eAAA;AACxB;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,SAAS,WAAW,MAAM,MAAA,EAAQ,MAAM;AAE9C,QAAM,YAAY,CAAC,cAAsB;AACvC,aAAS,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEA,SAAO,EAAE,QAAQ,UAAA;AACnB;"}
+{"version":3,"file":"use-devtools-context.js","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createEffect, createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\nimport { useDrawContext } from './draw-context.jsx'\n\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport function useTheme() {\n  const { settings, setSettings } = useDevtoolsSettings()\n  const theme = createMemo(() => settings().theme)\n  return {\n    theme,\n    setTheme: (theme: DevtoolsStore['settings']['theme']) =>\n      setSettings({ theme }),\n  }\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const { setForceExpand } = useDrawContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  createEffect(() => {\n    if (activePlugin() == null) {\n      setForceExpand(false)\n    } else {\n      setForceExpand(true)\n    }\n  })\n\n  const setActivePlugin = (pluginId: string) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: pluginId,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":["theme"],"mappings":";;;AAUA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,SAAS,WAAW;AACzB,QAAM,EAAE,UAAU,YAAA,IAAgB,oBAAA;AAClC,QAAM,QAAQ,WAAW,MAAM,SAAA,EAAW,KAAK;AAC/C,SAAO;AAAA,IACL;AAAA,IACA,UAAU,CAACA,WACT,YAAY,EAAE,OAAAA,QAAO;AAAA,EAAA;AAE3B;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,EAAE,eAAA,IAAmB,eAAA;AAE3B,QAAM,UAAU,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAe,WAAW,MAAM,MAAM,MAAM,YAAY;AAE9D,eAAa,MAAM;AACjB,QAAI,aAAA,KAAkB,MAAM;AAC1B,qBAAe,KAAK;AAAA,IACtB,OAAO;AACL,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,SAAS,iBAAiB,aAAA;AACrC;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,QAAQ,WAAW,MAAM,MAAM,KAAK;AAC1C,QAAM,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACA,SAAO,EAAE,OAAO,SAAA;AAClB;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,WAAW,WAAW,MAAM,MAAM,QAAQ;AAEhD,QAAM,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,aAAa,SAAA;AACxB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,cAAc,WAAW,MAAM,MAAA,EAAQ,WAAW;AAExD,QAAM,iBAAiB,CAAC,UAAmB;AACzC,aAAS,EAAE,aAAa,OAAO;AAAA,EACjC;AAEA,SAAO,EAAE,aAAa,eAAA;AACxB;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,SAAS,WAAW,MAAM,MAAA,EAAQ,MAAM;AAE9C,QAAM,YAAY,CAAC,cAAsB;AACvC,aAAS,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEA,SAAO,EAAE,QAAQ,UAAA;AACnB;"}

package/dist/esm/devtools.js

@@ -1,7 +1,8 @@
 import { createComponent, Portal, template, use, setAttribute, insert, memo } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show } from "solid-js";
 import { createShortcut } from "@solid-primitives/keyboard";
-import { useDevtoolsSettings, useHeight, usePersistOpen } from "./context/use-devtools-context.js";
+import { ThemeContextProvider } from "@tanstack/devtools-ui";
+import { useDevtoolsSettings, useHeight, usePersistOpen, useTheme } from "./context/use-devtools-context.js";
 import { useDisableTabbing } from "./hooks/use-disable-tabbing.js";
 import { TANSTACK_DEVTOOLS } from "./utils/storage.js";
 import { Trigger } from "./components/trigger.js";
@@ -136,7 +137,7 @@ function DevTools() {
         if (dataSource) {
           e.preventDefault();
           e.stopPropagation();
-          fetch(`http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`).catch(() => {
+          fetch(`__TSD_HOST__://localhost:__TSD_PORT__/__tsd/open-source?source=${encodeURIComponent(dataSource)}`).catch(() => {
           });
         }
       }
@@ -146,40 +147,50 @@ function DevTools() {
       window.removeEventListener("click", openSourceHandler);
     });
   });
-  return createComponent(Portal, {
-    get mount() {
-      return (pip().pipWindow ?? window).document.body;
+  const {
+    theme
+  } = useTheme();
+  return createComponent(ThemeContextProvider, {
+    get theme() {
+      return theme();
     },
     get children() {
-      var _el$ = _tmpl$();
-      use(setRootEl, _el$);
-      setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return memo(() => pip().pipWindow !== null)() ? true : memo(() => !!settings().requireUrlFlag)() ? window.location.search.includes(settings().urlFlag) : true;
+      return createComponent(Portal, {
+        get mount() {
+          return (pip().pipWindow ?? window).document.body;
         },
         get children() {
-          return [createComponent(Trigger, {
-            isOpen,
-            setIsOpen: toggleOpen
-          }), createComponent(MainPanel, {
-            isResizing,
-            isOpen,
+          var _el$ = _tmpl$();
+          use(setRootEl, _el$);
+          setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return memo(() => pip().pipWindow !== null)() ? true : memo(() => !!settings().requireUrlFlag)() ? window.location.search.includes(settings().urlFlag) : true;
+            },
             get children() {
-              return createComponent(ContentPanel, {
-                ref: (ref) => panelRef = ref,
-                handleDragStart: (e) => handleDragStart(panelRef, e),
+              return [createComponent(Trigger, {
+                isOpen,
+                setIsOpen: toggleOpen
+              }), createComponent(MainPanel, {
+                isResizing,
+                isOpen,
                 get children() {
-                  return [createComponent(Tabs, {
-                    toggleOpen
-                  }), createComponent(TabContent, {})];
+                  return createComponent(ContentPanel, {
+                    ref: (ref) => panelRef = ref,
+                    handleDragStart: (e) => handleDragStart(panelRef, e),
+                    get children() {
+                      return [createComponent(Tabs, {
+                        toggleOpen
+                      }), createComponent(TabContent, {})];
+                    }
+                  });
                 }
-              });
+              })];
             }
-          })];
+          }));
+          return _el$;
         }
-      }));
-      return _el$;
+      });
     }
   });
 }

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, onCleanup } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport { Portal } from 'solid-js/web'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\nimport { keyboardModifiers } from './context/devtools-store'\nimport { getAllPermutations } from './utils/sanitize'\nimport { usePiPWindow } from './context/pip-context'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  const pip = usePiPWindow()\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    if (pip().pipWindow) {\n      return\n    }\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        // const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              // prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        ;(pip().pipWindow ?? window).addEventListener('resize', run)\n\n        return () => {\n          ;(pip().pipWindow ?? window).removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              // prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    // we create all combinations of modifiers\n    const modifiers = settings().openHotkey.filter((key) =>\n      keyboardModifiers.includes(key as any),\n    )\n    const nonModifiers = settings().openHotkey.filter(\n      (key) => !keyboardModifiers.includes(key as any),\n    )\n\n    const allModifierCombinations = getAllPermutations(modifiers)\n\n    for (const combination of allModifierCombinations) {\n      const permutation = [...combination, ...nonModifiers]\n      createShortcut(permutation, () => {\n        toggleOpen()\n      })\n    }\n  })\n\n  createEffect(() => {\n    // this will only work with the Vite plugin\n    const openSourceHandler = (e: Event) => {\n      const isShiftHeld = (e as KeyboardEvent).shiftKey\n      const isCtrlHeld =\n        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey\n      if (!isShiftHeld || !isCtrlHeld) return\n\n      if (e.target instanceof HTMLElement) {\n        const dataSource = e.target.getAttribute('data-tsd-source')\n        window.getSelection()?.removeAllRanges()\n        if (dataSource) {\n          e.preventDefault()\n          e.stopPropagation()\n          fetch(\n            `http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`,\n          ).catch(() => {})\n        }\n      }\n    }\n    window.addEventListener('click', openSourceHandler)\n    onCleanup(() => {\n      window.removeEventListener('click', openSourceHandler)\n    })\n  })\n\n  return (\n    <Portal mount={(pip().pipWindow ?? window).document.body}>\n      <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n        <Show\n          when={\n            pip().pipWindow !== null\n              ? true\n              : settings().requireUrlFlag\n                ? window.location.search.includes(settings().urlFlag)\n                : true\n          }\n        >\n          <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n          <MainPanel isResizing={isResizing} isOpen={isOpen}>\n            <ContentPanel\n              ref={(ref) => (panelRef = ref)}\n              handleDragStart={(e) => handleDragStart(panelRef, e)}\n            >\n              <Tabs toggleOpen={toggleOpen} />\n              <TabContent />\n            </ContentPanel>\n          </MainPanel>\n        </Show>\n      </div>\n    </Portal>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","pip","usePiPWindow","panelRef","undefined","isResizing","setIsResizing","toggleOpen","pipWindow","open","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","modifiers","openHotkey","filter","keyboardModifiers","includes","nonModifiers","allModifierCombinations","getAllPermutations","combination","permutation","createShortcut","openSourceHandler","isShiftHeld","shiftKey","isCtrlHeld","ctrlKey","metaKey","target","HTMLElement","dataSource","getAttribute","getSelection","removeAllRanges","preventDefault","stopPropagation","fetch","catch","onCleanup","_$createComponent","Portal","mount","body","children","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAwBA,WAAW;AACjC,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAcC,UAAAA;AACtB,QAAM;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,EAAAA,IAAmBC,eAAAA;AACxC,QAAM,CAACC,QAAQC,SAAS,IAAIC,aAAAA;AAC5B,QAAM,CAACC,QAAQC,SAAS,IAAIF,aAC1BT,WAAWY,eAAeR,aAC5B;AACA,QAAMS,MAAMC,aAAAA;AACZ,MAAIC,WAAuCC;AAC3C,QAAM,CAACC,YAAYC,aAAa,IAAIT,aAAa,KAAK;AACtD,QAAMU,aAAaA,MAAM;AACvB,QAAIN,IAAAA,EAAMO,WAAW;AACnB;AAAA,IACF;AACA,UAAMC,OAAOX,OAAAA;AACbC,cAAU,CAACU,IAAI;AACfhB,mBAAe,CAACgB,IAAI;AAAA,EACtB;AAEA,QAAMC,kBAAkBA,CACtBC,cACAC,eACG;AACH,QAAIA,WAAWC,WAAW,EAAG;AAC7B,QAAI,CAACF,aAAc;AACnBL,kBAAc,IAAI;AAElB,UAAMQ,WAAW;AAAA,MACfC,gBAAgBJ,aAAaK,sBAAAA,EAAwBC;AAAAA,MACrDC,OAAON,WAAWM;AAAAA,IAAAA;AAGpB,UAAMC,MAAMA,CAACC,cAA0B;AACrC,YAAMC,QAAQP,SAASI,QAAQE,UAAUF;AACzC,YAAMI,YACJlC,WAAWmC,kBAAkB,WACzBT,SAASC,iBAAiBM,QAC1BP,SAASC,iBAAiBM;AAEhC/B,gBAAUgC,SAAS;AAEnB,UAAIA,YAAY,IAAI;AAClBvB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACLA,kBAAU,IAAI;AAAA,MAChB;AAAA,IACF;AAEA,UAAMyB,QAAQA,MAAM;AAClBlB,oBAAc,KAAK;AACnBmB,eAASC,oBAAoB,aAAaP,GAAG;AAC7CM,eAASC,oBAAoB,WAAWF,KAAK;AAAA,IAC/C;AAEAC,aAASE,iBAAiB,aAAaR,GAAG;AAC1CM,aAASE,iBAAiB,WAAWH,KAAK;AAAA,EAC5C;AAGAI,eAAa,MAAM;AACjB,QAAI9B,UAAU;AACZ,YAAM+B,gBAAgBlC,OAAAA,GAAUmC,eAAeC,MAAMC;AAErD,YAAMb,MAAMA,MAAM;AAChB,YAAI,CAAChB,SAAU;AAEf,YAAIR,OAAAA,GAAUmC,eAAe;AAC3BlC,oBAAWqC,CAAAA,SAAS;AAClB,gBAAIA,MAAMH,cAAe;AAGzB,mBAAOG;AAAAA,UACT,CAAC;AAAA,QACH;AAAA,MACF;AAEAd,UAAAA;AAEA,UAAI,OAAOe,WAAW,aAAa;AAChC,SAACjC,MAAMO,aAAa0B,QAAQP,iBAAiB,UAAUR,GAAG;AAE3D,eAAO,MAAM;AACV,WAAClB,MAAMO,aAAa0B,QAAQR,oBAAoB,UAAUP,GAAG;AAC9D,cAAIxB,OAAAA,GAAUmC,iBAAiB,OAAOD,kBAAkB,UAAU;AAChEjC,sBAAWqC,CAAAA,SAAS;AAElB,qBAAOA;AAAAA,YACT,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AAEL,UAAItC,OAAAA,GAAUmC,eAAe;AAC3BlC,kBAAWqC,CAAAA,SAAS;AAClB,cAAIA,MAAMH,eAAe;AACvBG,iBAAKH,cAAcK,gBAAgB,OAAO;AAAA,UAC5C;AACA,iBAAOF;AAAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AACA;AAAA,EACF,CAAC;AAEDL,eAAa,MAAM;AACjBM,WAAOP,iBAAiB,WAAYS,CAAAA,MAAM;AACxC,UAAIA,EAAEC,QAAQ,YAAYvC,OAAAA,GAAU;AAClCS,mBAAAA;AAAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD+B,oBAAkBxC,MAAM;AACxB8B,eAAa,MAAM;AACjB,QAAIjC,UAAU;AACZ,YAAM4C,KAAK5C,OAAAA;AACX,YAAM6C,WAAWC,iBAAiBF,EAAG,EAAEC;AACvCD,UAAIR,MAAMW,YAAY,oBAAoBF,QAAQ;AAAA,IACpD;AAAA,EACF,CAAC;AACDZ,eAAa,MAAM;AAEjB,UAAMe,YAAYvD,WAAWwD,WAAWC,OAAQR,CAAAA,QAC9CS,kBAAkBC,SAASV,GAAU,CACvC;AACA,UAAMW,eAAe5D,WAAWwD,WAAWC,OACxCR,SAAQ,CAACS,kBAAkBC,SAASV,GAAU,CACjD;AAEA,UAAMY,0BAA0BC,mBAAmBP,SAAS;AAE5D,eAAWQ,eAAeF,yBAAyB;AACjD,YAAMG,cAAc,CAAC,GAAGD,aAAa,GAAGH,YAAY;AACpDK,qBAAeD,aAAa,MAAM;AAChC7C,mBAAAA;AAAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAEDqB,eAAa,MAAM;AAEjB,UAAM0B,oBAAoBA,CAAClB,MAAa;AACtC,YAAMmB,cAAenB,EAAoBoB;AACzC,YAAMC,aACHrB,EAAoBsB,WAAYtB,EAAoBuB;AACvD,UAAI,CAACJ,eAAe,CAACE,WAAY;AAEjC,UAAIrB,EAAEwB,kBAAkBC,aAAa;AACnC,cAAMC,aAAa1B,EAAEwB,OAAOG,aAAa,iBAAiB;AAC1D7B,eAAO8B,aAAAA,GAAgBC,gBAAAA;AACvB,YAAIH,YAAY;AACd1B,YAAE8B,eAAAA;AACF9B,YAAE+B,gBAAAA;AACFC,gBACE,0DAA0DN,UAAU,EACtE,EAAEO,MAAM,MAAM;AAAA,UAAC,CAAC;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AACAnC,WAAOP,iBAAiB,SAAS2B,iBAAiB;AAClDgB,cAAU,MAAM;AACdpC,aAAOR,oBAAoB,SAAS4B,iBAAiB;AAAA,IACvD,CAAC;AAAA,EACH,CAAC;AAED,SAAAiB,gBACGC,QAAM;AAAA,IAAA,IAACC,QAAK;AAAA,cAAGxE,IAAAA,EAAMO,aAAa0B,QAAQT,SAASiD;AAAAA,IAAI;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,OAAAA;AAAAC,UAC5ClF,WAASgF,IAAA;AAAAG,mBAAAH,MAAA,eAAeI,iBAAiB;AAAAC,aAAAL,MAAAL,gBAChDW,MAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBACFC,KAAA,MAAAnF,IAAAA,EAAMO,cAAc,IAAI,MACpB,OACA4E,KAAA,MAAA,CAAA,CAAAhG,SAAAA,EAAWiG,cAAc,MACvBnD,OAAOoD,SAASC,OAAOxC,SAAS3D,SAAAA,EAAWoG,OAAO,IAClD;AAAA,QAAI;AAAA,QAAA,IAAAb,WAAA;AAAA,iBAAA,CAAAJ,gBAGXkB,SAAO;AAAA,YAAC3F;AAAAA,YAAgBC,WAAWQ;AAAAA,UAAAA,CAAU,GAAAgE,gBAC7CmB,WAAS;AAAA,YAACrF;AAAAA,YAAwBP;AAAAA,YAAc,IAAA6E,WAAA;AAAA,qBAAAJ,gBAC9CoB,cAAY;AAAA,gBAAAC,KACLA,SAASzF,WAAWyF;AAAAA,gBAC1BlF,iBAAkB0B,CAAAA,MAAM1B,gBAAgBP,UAAUiC,CAAC;AAAA,gBAAC,IAAAuC,WAAA;AAAA,yBAAA,CAAAJ,gBAEnDsB,MAAI;AAAA,oBAACtF;AAAAA,kBAAAA,CAAsB,GAAAgE,gBAC3BuB,YAAU,CAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,aAAAlB;AAAAA,IAAA;AAAA,EAAA,CAAA;AAOzB;"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, onCleanup } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport { Portal } from 'solid-js/web'\nimport { ThemeContextProvider } from '@tanstack/devtools-ui'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n  useTheme,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\nimport { keyboardModifiers } from './context/devtools-store'\nimport { getAllPermutations } from './utils/sanitize'\nimport { usePiPWindow } from './context/pip-context'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  const pip = usePiPWindow()\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    if (pip().pipWindow) {\n      return\n    }\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        // const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              // prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        ;(pip().pipWindow ?? window).addEventListener('resize', run)\n\n        return () => {\n          ;(pip().pipWindow ?? window).removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              // prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    // we create all combinations of modifiers\n    const modifiers = settings().openHotkey.filter((key) =>\n      keyboardModifiers.includes(key as any),\n    )\n    const nonModifiers = settings().openHotkey.filter(\n      (key) => !keyboardModifiers.includes(key as any),\n    )\n\n    const allModifierCombinations = getAllPermutations(modifiers)\n\n    for (const combination of allModifierCombinations) {\n      const permutation = [...combination, ...nonModifiers]\n      createShortcut(permutation, () => {\n        toggleOpen()\n      })\n    }\n  })\n\n  createEffect(() => {\n    // this will only work with the Vite plugin\n    const openSourceHandler = (e: Event) => {\n      const isShiftHeld = (e as KeyboardEvent).shiftKey\n      const isCtrlHeld =\n        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey\n      if (!isShiftHeld || !isCtrlHeld) return\n\n      if (e.target instanceof HTMLElement) {\n        const dataSource = e.target.getAttribute('data-tsd-source')\n        window.getSelection()?.removeAllRanges()\n        if (dataSource) {\n          e.preventDefault()\n          e.stopPropagation()\n          fetch(\n            `__TSD_HOST__://localhost:__TSD_PORT__/__tsd/open-source?source=${encodeURIComponent(dataSource)}`,\n          ).catch(() => {})\n        }\n      }\n    }\n    window.addEventListener('click', openSourceHandler)\n    onCleanup(() => {\n      window.removeEventListener('click', openSourceHandler)\n    })\n  })\n  const { theme } = useTheme()\n\n  return (\n    <ThemeContextProvider theme={theme()}>\n      <Portal mount={(pip().pipWindow ?? window).document.body}>\n        <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n          <Show\n            when={\n              pip().pipWindow !== null\n                ? true\n                : settings().requireUrlFlag\n                  ? window.location.search.includes(settings().urlFlag)\n                  : true\n            }\n          >\n            <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n            <MainPanel isResizing={isResizing} isOpen={isOpen}>\n              <ContentPanel\n                ref={(ref) => (panelRef = ref)}\n                handleDragStart={(e) => handleDragStart(panelRef, e)}\n              >\n                <Tabs toggleOpen={toggleOpen} />\n                <TabContent />\n              </ContentPanel>\n            </MainPanel>\n          </Show>\n        </div>\n      </Portal>\n    </ThemeContextProvider>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","pip","usePiPWindow","panelRef","undefined","isResizing","setIsResizing","toggleOpen","pipWindow","open","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","modifiers","openHotkey","filter","keyboardModifiers","includes","nonModifiers","allModifierCombinations","getAllPermutations","combination","permutation","createShortcut","openSourceHandler","isShiftHeld","shiftKey","isCtrlHeld","ctrlKey","metaKey","target","HTMLElement","dataSource","getAttribute","getSelection","removeAllRanges","preventDefault","stopPropagation","fetch","encodeURIComponent","catch","onCleanup","theme","useTheme","_$createComponent","ThemeContextProvider","children","Portal","mount","body","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}

package/dist/esm/styles/tokens.js

@@ -1,5 +1,6 @@
 const tokens = {
   colors: {
+    white: "#ffffff",
     darkGray: {
       700: "#191c24",
       800: "#111318",
@@ -7,28 +8,35 @@ const tokens = {
     },
     gray: {
       100: "#f2f4f7",
+      200: "#eaecf0",
       300: "#d0d5dd",
       500: "#667085",
-      700: "#344054"
+      700: "#344054",
+      800: "#1d2939",
+      900: "#101828"
     },
     blue: {
+      700: "#175CD3",
       800: "#1849A9"
     },
     green: {
-      500: "#12B76A"
+      500: "#12B76A",
+      700: "#027A48"
     },
     red: {
+      100: "#fee2e2",
       400: "#f87171",
-      500: "#ef4444"
+      500: "#ef4444",
+      700: "#b91c1c"
     },
     purple: {
+      200: "#D9D6FE",
       400: "#9B8AFB",
-      500: "#7A5AF8"
+      500: "#7A5AF8",
+      600: "#6938EF",
+      700: "#5925DC"
     }
   },
-  alpha: {
-    90: "e5"
-  },
   font: {
     size: {
       xs: "calc(var(--tsrd-font-size) * 0.75)",

package/dist/esm/styles/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MAEL,KAAK;AAAA,MAEL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,IAKP;AAAA,IACA,KAAK;AAAA,MAKH,KAAK;AAAA,MACL,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,EAUN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,IAER;AAAA,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}
+{"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAKN,OAAO;AAAA,IAaP,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MAEJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MAEL,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MASJ,KAAK;AAAA,MACL,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,MAEL,KAAK;AAAA,IAGP;AAAA,IACA,KAAK;AAAA,MAEH,KAAK;AAAA,MAGL,KAAK;AAAA,MACL,KAAK;AAAA,MAEL,KAAK;AAAA,IAIP;AAAA,IAcA,QAAQ;AAAA,MAIN,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAGP;AAAA,EAwCF;AAAA,EAcA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,IAER;AAAA,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}

package/dist/esm/styles/use-styles.d.ts

@@ -28,11 +28,10 @@ export declare function useStyles(): Accessor<{
     tab: string;
     tabContent: string;
     pluginsTabPanel: string;
-    pluginsTabDraw: string;
+    pluginsTabDraw: (isExpanded: boolean) => string;
     pluginsTabDrawExpanded: string;
     pluginsTabDrawTransition: (mSeconds: number) => string;
-    pluginsTabSidebar: string;
-    pluginsTabSidebarExpanded: string;
+    pluginsTabSidebar: (isExpanded: boolean) => string;
     pluginsTabSidebarTransition: (mSeconds: number) => string;
     pluginName: string;
     pluginsTabContent: string;