@tanstack/router-devtools 1.16.6 → 1.17.1

package/src/tokens.ts

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

package/src/utils.ts

@@ -25,24 +25,25 @@ type StyledComponent<T> = T extends 'button'
         ? React.HTMLAttributes<HTMLElementTagNameMap[T]>
         : never
 
-export function getStatusColor(match: AnyRouteMatch, theme: Theme) {
-  return match.status === 'pending' || match.isFetching
-    ? theme.active
-    : match.status === 'error'
-      ? theme.danger
-      : match.status === 'success'
-        ? theme.success
-        : theme.gray
+export function getStatusColor(match: AnyRouteMatch) {
+  return match.status === 'success' && match.isFetching
+    ? 'blue'
+    : match.status === 'pending'
+      ? 'yellow'
+      : match.status === 'error'
+        ? 'red'
+        : match.status === 'success'
+          ? 'green'
+          : 'gray'
 }
 
 export function getRouteStatusColor(
   matches: AnyRouteMatch[],
   route: AnyRoute | AnyRootRoute,
-  theme: Theme,
 ) {
   const found = matches.find((d) => d.routeId === route.id)
-  if (!found) return theme.gray
-  return getStatusColor(found, theme)
+  if (!found) return 'gray'
+  return getStatusColor(found)
 }
 
 type Styles =

package/dist/cjs/styledComponents.cjs

@@ -1,93 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils = require("./utils.cjs");
-const Panel = utils.styled(
-  "div",
-  (_props, theme) => ({
-    fontSize: "clamp(12px, 1.5vw, 14px)",
-    fontFamily: `sans-serif`,
-    display: "flex",
-    backgroundColor: theme.background,
-    color: theme.foreground
-  }),
-  {
-    "(max-width: 700px)": {
-      flexDirection: "column"
-    },
-    "(max-width: 600px)": {
-      fontSize: ".9em"
-      // flexDirection: 'column',
-    }
-  }
-);
-const ActivePanel = utils.styled(
-  "div",
-  () => ({
-    flex: "1 1 500px",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    height: "100%"
-  }),
-  {
-    "(max-width: 700px)": (_props, theme) => ({
-      borderTop: `2px solid ${theme.gray}`
-    })
-  }
-);
-const Button = utils.styled("button", (props, theme) => ({
-  appearance: "none",
-  fontSize: ".9em",
-  fontWeight: "bold",
-  background: theme.gray,
-  border: "0",
-  borderRadius: ".3em",
-  color: "white",
-  padding: ".5em",
-  opacity: props.disabled ? ".5" : void 0,
-  cursor: "pointer"
-}));
-const Code = utils.styled("code", {
-  fontSize: ".9em"
-});
-utils.styled("input", (_props, theme) => ({
-  backgroundColor: theme.inputBackgroundColor,
-  border: 0,
-  borderRadius: ".2em",
-  color: theme.inputTextColor,
-  fontSize: ".9em",
-  lineHeight: `1.3`,
-  padding: ".3em .4em"
-}));
-utils.styled(
-  "select",
-  (_props, theme) => ({
-    display: `inline-block`,
-    fontSize: `.9em`,
-    fontFamily: `sans-serif`,
-    fontWeight: "normal",
-    lineHeight: `1.3`,
-    padding: `.3em 1.5em .3em .5em`,
-    height: "auto",
-    border: 0,
-    borderRadius: `.2em`,
-    appearance: `none`,
-    WebkitAppearance: "none",
-    backgroundColor: theme.inputBackgroundColor,
-    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
-    backgroundRepeat: `no-repeat`,
-    backgroundPosition: `right .55em center`,
-    backgroundSize: `.65em auto, 100%`,
-    color: theme.inputTextColor
-  }),
-  {
-    "(max-width: 500px)": {
-      display: "none"
-    }
-  }
-);
-exports.ActivePanel = ActivePanel;
-exports.Button = Button;
-exports.Code = Code;
-exports.Panel = Panel;
-//# sourceMappingURL=styledComponents.cjs.map

package/dist/cjs/styledComponents.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"styledComponents.cjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nexport const ActivePanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\n// export const QueryKeys = styled('span', {\n//   display: 'inline-block',\n//   fontSize: '0.9em',\n// })\n\n// export const QueryKey = styled('span', {\n//   display: 'inline-flex',\n//   alignItems: 'center',\n//   padding: '.2em .4em',\n//   fontWeight: 'bold',\n//   textShadow: '0 0 10px black',\n//   borderRadius: '.2em',\n// })\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n"],"names":["styled"],"mappings":";;;AAEO,MAAM,QAAQA,MAAA;AAAA,EACnB;AAAA,EACA,CAAC,QAAQ,WAAW;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB,MAAM;AAAA,IACvB,OAAO,MAAM;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,sBAAsB;AAAA,MACpB,eAAe;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,MACpB,UAAU;AAAA;AAAA,IAEZ;AAAA,EACF;AACF;AAEO,MAAM,cAAcA,MAAA;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV;AAAA,IACE,sBAAsB,CAAC,QAAQ,WAAW;AAAA,MACxC,WAAW,aAAa,MAAM,IAAI;AAAA,IAAA;AAAA,EAEtC;AACF;AAEO,MAAM,SAASA,MAAAA,OAAO,UAAU,CAAC,OAAO,WAAW;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM,WAAW,OAAO;AAAA,EACjC,QAAQ;AACV,EAAE;AAgBW,MAAA,OAAOA,aAAO,QAAQ;AAAA,EACjC,UAAU;AACZ,CAAC;AAEoBA,MAAAA,OAAO,SAAS,CAAC,QAAQ,WAAW;AAAA,EACvD,iBAAiB,MAAM;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO,MAAM;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,EAAE;AAEoBA,MAAA;AAAA,EACpB;AAAA,EACA,CAAC,QAAQ,WAAW;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO,MAAM;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;;;"}

package/dist/cjs/styledComponents.d.cts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ActivePanel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const Code: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/cjs/theme.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const defaultTheme = {
-  background: "#222222",
-  backgroundAlt: "#292929",
-  foreground: "white",
-  gray: "#444",
-  grayAlt: "#444",
-  inputBackgroundColor: "#fff",
-  inputTextColor: "#000",
-  success: "#80cb00",
-  danger: "#ff0085",
-  active: "#0099ff",
-  warning: "#ffb200"
-};
-const ThemeContext = React.createContext(defaultTheme);
-function ThemeProvider({ theme, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: theme, ...rest });
-}
-function useTheme() {
-  return React.useContext(ThemeContext);
-}
-exports.ThemeProvider = ThemeProvider;
-exports.defaultTheme = defaultTheme;
-exports.useTheme = useTheme;
-//# sourceMappingURL=theme.cjs.map

package/dist/cjs/theme.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.cjs","sources":["../../src/theme.tsx"],"sourcesContent":["import React from 'react'\n\nexport const defaultTheme = {\n  background: '#222222',\n  backgroundAlt: '#292929',\n  foreground: 'white',\n  gray: '#444',\n  grayAlt: '#444',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#80cb00',\n  danger: '#ff0085',\n  active: '#0099ff',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":[],"mappings":";;;;AAEO,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX;AAQA,MAAM,eAAe,MAAM,cAAc,YAAY;AAE9C,SAAS,cAAc,EAAE,OAAO,GAAG,QAAuB;AAC/D,wCAAQ,aAAa,UAAb,EAAsB,OAAO,OAAQ,GAAG,KAAM,CAAA;AACxD;AAEO,SAAS,WAAW;AAClB,SAAA,MAAM,WAAW,YAAY;AACtC;;;;"}

package/dist/cjs/useMediaQuery.cjs

@@ -1,27 +0,0 @@
-"use strict";
-const React = require("react");
-function useMediaQuery(query) {
-  const [isMatch, setIsMatch] = React.useState(() => {
-    if (typeof window !== "undefined") {
-      return window.matchMedia && window.matchMedia(query).matches;
-    }
-    return;
-  });
-  React.useEffect(() => {
-    if (typeof window !== "undefined") {
-      if (!window.matchMedia) {
-        return;
-      }
-      const matcher = window.matchMedia(query);
-      const onChange = ({ matches }) => setIsMatch(matches);
-      matcher.addListener(onChange);
-      return () => {
-        matcher.removeListener(onChange);
-      };
-    }
-    return;
-  }, [isMatch, query, setIsMatch]);
-  return isMatch;
-}
-module.exports = useMediaQuery;
-//# sourceMappingURL=useMediaQuery.cjs.map

package/dist/cjs/useMediaQuery.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMediaQuery.cjs","sources":["../../src/useMediaQuery.ts"],"sourcesContent":["import React from 'react'\n\nexport default function useMediaQuery(query: string): boolean | undefined {\n  // Keep track of the preference in state, start with the current match\n  const [isMatch, setIsMatch] = React.useState(() => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia && window.matchMedia(query).matches\n    }\n    return\n  })\n\n  // Watch for changes\n  React.useEffect(() => {\n    if (typeof window !== 'undefined') {\n      if (!window.matchMedia) {\n        return\n      }\n\n      // Create a matcher\n      const matcher = window.matchMedia(query)\n\n      // Create our handler\n      const onChange = ({ matches }: { matches: boolean }) =>\n        setIsMatch(matches)\n\n      // Listen for changes\n      matcher.addListener(onChange)\n\n      return () => {\n        // Stop listening for changes\n        matcher.removeListener(onChange)\n      }\n    }\n\n    return\n  }, [isMatch, query, setIsMatch])\n\n  return isMatch\n}\n"],"names":[],"mappings":";;AAEA,SAAwB,cAAc,OAAoC;AAExE,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,MAAM;AAC7C,QAAA,OAAO,WAAW,aAAa;AACjC,aAAO,OAAO,cAAc,OAAO,WAAW,KAAK,EAAE;AAAA,IACvD;AACA;AAAA,EAAA,CACD;AAGD,QAAM,UAAU,MAAM;AAChB,QAAA,OAAO,WAAW,aAAa;AAC7B,UAAA,CAAC,OAAO,YAAY;AACtB;AAAA,MACF;AAGM,YAAA,UAAU,OAAO,WAAW,KAAK;AAGvC,YAAM,WAAW,CAAC,EAAE,QAAQ,MAC1B,WAAW,OAAO;AAGpB,cAAQ,YAAY,QAAQ;AAE5B,aAAO,MAAM;AAEX,gBAAQ,eAAe,QAAQ;AAAA,MAAA;AAAA,IAEnC;AAEA;AAAA,EACC,GAAA,CAAC,SAAS,OAAO,UAAU,CAAC;AAExB,SAAA;AACT;;"}

package/dist/esm/styledComponents.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ActivePanel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const Code: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/esm/styledComponents.js

@@ -1,93 +0,0 @@
-import { styled } from "./utils.js";
-const Panel = styled(
-  "div",
-  (_props, theme) => ({
-    fontSize: "clamp(12px, 1.5vw, 14px)",
-    fontFamily: `sans-serif`,
-    display: "flex",
-    backgroundColor: theme.background,
-    color: theme.foreground
-  }),
-  {
-    "(max-width: 700px)": {
-      flexDirection: "column"
-    },
-    "(max-width: 600px)": {
-      fontSize: ".9em"
-      // flexDirection: 'column',
-    }
-  }
-);
-const ActivePanel = styled(
-  "div",
-  () => ({
-    flex: "1 1 500px",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    height: "100%"
-  }),
-  {
-    "(max-width: 700px)": (_props, theme) => ({
-      borderTop: `2px solid ${theme.gray}`
-    })
-  }
-);
-const Button = styled("button", (props, theme) => ({
-  appearance: "none",
-  fontSize: ".9em",
-  fontWeight: "bold",
-  background: theme.gray,
-  border: "0",
-  borderRadius: ".3em",
-  color: "white",
-  padding: ".5em",
-  opacity: props.disabled ? ".5" : void 0,
-  cursor: "pointer"
-}));
-const Code = styled("code", {
-  fontSize: ".9em"
-});
-styled("input", (_props, theme) => ({
-  backgroundColor: theme.inputBackgroundColor,
-  border: 0,
-  borderRadius: ".2em",
-  color: theme.inputTextColor,
-  fontSize: ".9em",
-  lineHeight: `1.3`,
-  padding: ".3em .4em"
-}));
-styled(
-  "select",
-  (_props, theme) => ({
-    display: `inline-block`,
-    fontSize: `.9em`,
-    fontFamily: `sans-serif`,
-    fontWeight: "normal",
-    lineHeight: `1.3`,
-    padding: `.3em 1.5em .3em .5em`,
-    height: "auto",
-    border: 0,
-    borderRadius: `.2em`,
-    appearance: `none`,
-    WebkitAppearance: "none",
-    backgroundColor: theme.inputBackgroundColor,
-    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
-    backgroundRepeat: `no-repeat`,
-    backgroundPosition: `right .55em center`,
-    backgroundSize: `.65em auto, 100%`,
-    color: theme.inputTextColor
-  }),
-  {
-    "(max-width: 500px)": {
-      display: "none"
-    }
-  }
-);
-export {
-  ActivePanel,
-  Button,
-  Code,
-  Panel
-};
-//# sourceMappingURL=styledComponents.js.map

package/dist/esm/styledComponents.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styledComponents.js","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nexport const ActivePanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\n// export const QueryKeys = styled('span', {\n//   display: 'inline-block',\n//   fontSize: '0.9em',\n// })\n\n// export const QueryKey = styled('span', {\n//   display: 'inline-flex',\n//   alignItems: 'center',\n//   padding: '.2em .4em',\n//   fontWeight: 'bold',\n//   textShadow: '0 0 10px black',\n//   borderRadius: '.2em',\n// })\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n"],"names":[],"mappings":";AAEO,MAAM,QAAQ;AAAA,EACnB;AAAA,EACA,CAAC,QAAQ,WAAW;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB,MAAM;AAAA,IACvB,OAAO,MAAM;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,sBAAsB;AAAA,MACpB,eAAe;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,MACpB,UAAU;AAAA;AAAA,IAEZ;AAAA,EACF;AACF;AAEO,MAAM,cAAc;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV;AAAA,IACE,sBAAsB,CAAC,QAAQ,WAAW;AAAA,MACxC,WAAW,aAAa,MAAM,IAAI;AAAA,IAAA;AAAA,EAEtC;AACF;AAEO,MAAM,SAAS,OAAO,UAAU,CAAC,OAAO,WAAW;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM,WAAW,OAAO;AAAA,EACjC,QAAQ;AACV,EAAE;AAgBW,MAAA,OAAO,OAAO,QAAQ;AAAA,EACjC,UAAU;AACZ,CAAC;AAEoB,OAAO,SAAS,CAAC,QAAQ,WAAW;AAAA,EACvD,iBAAiB,MAAM;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO,MAAM;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,EAAE;AAEoB;AAAA,EACpB;AAAA,EACA,CAAC,QAAQ,WAAW;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO,MAAM;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}

package/dist/esm/theme.js

@@ -1,28 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React__default from "react";
-const defaultTheme = {
-  background: "#222222",
-  backgroundAlt: "#292929",
-  foreground: "white",
-  gray: "#444",
-  grayAlt: "#444",
-  inputBackgroundColor: "#fff",
-  inputTextColor: "#000",
-  success: "#80cb00",
-  danger: "#ff0085",
-  active: "#0099ff",
-  warning: "#ffb200"
-};
-const ThemeContext = React__default.createContext(defaultTheme);
-function ThemeProvider({ theme, ...rest }) {
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, ...rest });
-}
-function useTheme() {
-  return React__default.useContext(ThemeContext);
-}
-export {
-  ThemeProvider,
-  defaultTheme,
-  useTheme
-};
-//# sourceMappingURL=theme.js.map

package/dist/esm/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sources":["../../src/theme.tsx"],"sourcesContent":["import React from 'react'\n\nexport const defaultTheme = {\n  background: '#222222',\n  backgroundAlt: '#292929',\n  foreground: 'white',\n  gray: '#444',\n  grayAlt: '#444',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#80cb00',\n  danger: '#ff0085',\n  active: '#0099ff',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":["React"],"mappings":";;AAEO,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX;AAQA,MAAM,eAAeA,eAAM,cAAc,YAAY;AAE9C,SAAS,cAAc,EAAE,OAAO,GAAG,QAAuB;AAC/D,6BAAQ,aAAa,UAAb,EAAsB,OAAO,OAAQ,GAAG,KAAM,CAAA;AACxD;AAEO,SAAS,WAAW;AAClB,SAAAA,eAAM,WAAW,YAAY;AACtC;"}