@tanstack/devtools-ui - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/esm/components/header.d.ts

+import { JSX } from 'solid-js/jsx-runtime';
+export declare function Header({ children, class: className, ...rest }: JSX.IntrinsicElements['header']): JSX.Element;
+export declare function HeaderLogo({ children, flavor, }: {
+    children: JSX.Element;
+    flavor: {
+        light: string;
+        dark: string;
+    };
+}): JSX.Element;

dist/esm/components/header.js

+import { template, spread, mergeProps, insert, effect, className } from "solid-js/web";
+import clsx from "clsx";
+import { useStyles } from "../styles/use-styles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<header>`), _tmpl$2 = /* @__PURE__ */ template(`<div><button><span>TANSTACK</span><span>`);
+function Header({
+  children,
+  class: className2,
+  ...rest
+}) {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return clsx(styles().header.row, "tsqd-header", className2);
+      }
+    }, rest), false, true);
+    insert(_el$, children);
+    return _el$;
+  })();
+}
+function HeaderLogo({
+  children,
+  flavor
+}) {
+  const styles = useStyles();
+  return (() => {
+    var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    insert(_el$5, children);
+    effect((_p$) => {
+      var _v$ = styles().header.logoAndToggleContainer, _v$2 = clsx(styles().header.logo), _v$3 = clsx(styles().header.tanstackLogo), _v$4 = clsx(styles().header.flavorLogo(flavor.light, flavor.dark));
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$2;
+  })();
+}
+export {
+  Header,
+  HeaderLogo
+};
+//# sourceMappingURL=header.js.map

dist/esm/components/header.js.map

+{"version":3,"file":"header.js","sources":["../../../src/components/header.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport function Header({\n  children,\n  class: className,\n  ...rest\n}: JSX.IntrinsicElements['header']) {\n  const styles = useStyles()\n  return (\n    <header\n      class={clsx(styles().header.row, 'tsqd-header', className)}\n      {...rest}\n    >\n      {children}\n    </header>\n  )\n}\n\nexport function HeaderLogo({\n  children,\n  flavor,\n}: {\n  children: JSX.Element\n  flavor: {\n    light: string\n    dark: string\n  }\n}) {\n  const styles = useStyles()\n  return (\n    <div class={styles().header.logoAndToggleContainer}>\n      <button class={clsx(styles().header.logo)}>\n        <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>\n        <span\n          class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}\n        >\n          {children}\n        </span>\n      </button>\n    </div>\n  )\n}\n"],"names":["Header","children","class","className","rest","styles","useStyles","_el$","_tmpl$","_$spread","_$mergeProps","clsx","header","row","_$insert","HeaderLogo","flavor","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","light","dark","e","_$className","t","a","o","undefined"],"mappings":";;;;AAIO,SAASA,OAAO;AAAA,EACrBC;AAAAA,EACAC,OAAOC;AAAAA,EACP,GAAGC;AAC4B,GAAG;AAClC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eAEWC,KAAKN,OAAAA,EAASO,OAAOC,KAAK,eAAeV,UAAS;AAAA,MAAC;AAAA,IAAA,GACtDC,IAAI,GAAA,OAAA,IAAA;AAAAU,WAAAP,MAEPN,QAAQ;AAAA,WAAAM;AAAAA,EAAA,GAAA;AAGf;AAEO,SAASQ,WAAW;AAAA,EACzBd;AAAAA,EACAe;AAOF,GAAG;AACD,QAAMX,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAW,QAAAC,WAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAT,WAAAQ,OAOSrB,QAAQ;AAAAuB,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANHrB,OAAAA,EAASO,OAAOe,wBAAsBC,OACjCjB,KAAKN,OAAAA,EAASO,OAAOiB,IAAI,GAACC,OAC1BnB,KAAKN,OAAAA,EAASO,OAAOmB,YAAY,GAACC,OAEtCrB,KAAKN,OAAAA,EAASO,OAAOqB,WAAWjB,OAAOkB,OAAOlB,OAAOmB,IAAI,CAAC;AAACT,cAAAD,IAAAW,KAAAC,UAAApB,OAAAQ,IAAAW,IAAAV,GAAA;AAAAE,eAAAH,IAAAa,KAAAD,UAAAlB,OAAAM,IAAAa,IAAAV,IAAA;AAAAE,eAAAL,IAAAc,KAAAF,UAAAhB,OAAAI,IAAAc,IAAAT,IAAA;AAAAE,eAAAP,IAAAe,KAAAH,UAAAf,OAAAG,IAAAe,IAAAR,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAO5E;"}

dist/esm/components/icons.d.ts

+export declare function Copier(): import("solid-js").JSX.Element;
+export declare function List(): import("solid-js").JSX.Element;
+export declare function PageSearch(): import("solid-js").JSX.Element;
+export declare function Cogs(): import("solid-js").JSX.Element;
+export declare function SettingsCog(): import("solid-js").JSX.Element;
+export declare function Keyboard(): import("solid-js").JSX.Element;
+export declare function GeoTag(): import("solid-js").JSX.Element;
+export declare function SocialBubble(): import("solid-js").JSX.Element;
+export declare function Link(): import("solid-js").JSX.Element;
+export declare function X(): import("solid-js").JSX.Element;
+export declare function PiP(): import("solid-js").JSX.Element;
+export declare function CopiedCopier(props: {
+    theme: 'light' | 'dark';
+}): import("solid-js").JSX.Element;
+export declare function ErrorCopier(): import("solid-js").JSX.Element;

dist/esm/components/icons.js

+import { template, effect, setAttribute } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path class=copier d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z"stroke-width=2 stroke-linecap=round stroke-linejoin=round stroke=currentColor>`), _tmpl$2 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-file-search2-icon lucide-file-search-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><circle cx=11.5 cy=14.5 r=2.5></circle><path d="M13.3 16.3 15 18">`), _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93">`), _tmpl$5 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m10 9-3 3 3 3"></path><path d="m14 15 3-3-3-3"></path><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">`), _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2>`), _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx=12 cy=10 r=3>`), _tmpl$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12>`), _tmpl$9 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">`), _tmpl$0 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 10h6V4"></path><path d="m2 4 6 6"></path><path d="M21 10V7a2 2 0 0 0-2-2h-7"></path><path d="M3 14v2a2 2 0 0 0 2 2h3"></path><rect x=12 y=14 width=10 height=7 rx=1>`), _tmpl$1 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$10 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"stroke=#F04438 stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
+function Copier() {
+  return _tmpl$();
+}
+function List() {
+  return _tmpl$2();
+}
+function PageSearch() {
+  return _tmpl$3();
+}
+function Cogs() {
+  return _tmpl$4();
+}
+function SettingsCog() {
+  return _tmpl$5();
+}
+function Keyboard() {
+  return _tmpl$6();
+}
+function GeoTag() {
+  return _tmpl$7();
+}
+function SocialBubble() {
+  return _tmpl$5();
+}
+function Link() {
+  return _tmpl$8();
+}
+function X() {
+  return _tmpl$9();
+}
+function PiP() {
+  return _tmpl$0();
+}
+function CopiedCopier(props) {
+  return (() => {
+    var _el$10 = _tmpl$1(), _el$11 = _el$10.firstChild;
+    effect(() => setAttribute(_el$11, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
+    return _el$10;
+  })();
+}
+function ErrorCopier() {
+  return _tmpl$10();
+}
+export {
+  Cogs,
+  CopiedCopier,
+  Copier,
+  ErrorCopier,
+  GeoTag,
+  Keyboard,
+  Link,
+  List,
+  PageSearch,
+  PiP,
+  SettingsCog,
+  SocialBubble,
+  X
+};
+//# sourceMappingURL=icons.js.map

dist/esm/components/icons.js.map

+{"version":3,"file":"icons.js","sources":["../../../src/components/icons.tsx"],"sourcesContent":["// import { Show, createUniqueId } from 'solid-js'\n\n/* export function Search() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function Trash() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n} */\n/* \nexport function ChevronDown() {\n  return (\n    <svg\n      width=\"10\"\n      height=\"6\"\n      viewBox=\"0 0 10 6\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M1 1L5 5L9 1\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ArrowUp() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ArrowDown() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ArrowLeft() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        transform: 'rotate(90deg)',\n      }}\n    >\n      <path\n        d=\"M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ArrowRight() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        transform: 'rotate(-90deg)',\n      }}\n    >\n      <path\n        d=\"M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.66667\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function Sun() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      height=\"12\"\n      width=\"12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  )\n}\n\nexport function Moon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      height=\"12\"\n      width=\"12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  )\n}\n\nexport function Monitor() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      height=\"12\"\n      width=\"12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  )\n}\n\nexport function Wifi() {\n  return (\n    <svg\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      stroke-width=\"0\"\n      viewBox=\"0 0 24 24\"\n      height=\"1em\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n      <path d=\"M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z\"></path>\n    </svg>\n  )\n}\n\nexport function Offline() {\n  return (\n    <svg\n      stroke-width=\"0\"\n      viewBox=\"0 0 24 24\"\n      height=\"1em\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill=\"none\"\n        d=\"M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z\"\n      ></path>\n      <path d=\"M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z\"></path>\n    </svg>\n  )\n} */\n\n/* export function Settings() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n} */\n\nexport function Copier() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        class=\"copier\"\n        d=\"M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nexport function List() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M8 6h10\" />\n      <path d=\"M6 12h9\" />\n      <path d=\"M11 18h7\" />\n    </svg>\n  )\n}\n\nexport function PageSearch() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lucide lucide-file-search2-icon lucide-file-search-2\"\n    >\n      <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n      <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n      <circle cx=\"11.5\" cy=\"14.5\" r=\"2.5\" />\n      <path d=\"M13.3 16.3 15 18\" />\n    </svg>\n  )\n}\n\nexport function Cogs() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n      <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n      <path d=\"M12 2v2\" />\n      <path d=\"M12 22v-2\" />\n      <path d=\"m17 20.66-1-1.73\" />\n      <path d=\"M11 10.27 7 3.34\" />\n      <path d=\"m20.66 17-1.73-1\" />\n      <path d=\"m3.34 7 1.73 1\" />\n      <path d=\"M14 12h8\" />\n      <path d=\"M2 12h2\" />\n      <path d=\"m20.66 7-1.73 1\" />\n      <path d=\"m3.34 17 1.73-1\" />\n      <path d=\"m17 3.34-1 1.73\" />\n      <path d=\"m11 13.73-4 6.93\" />\n    </svg>\n  )\n}\n\nexport function SettingsCog() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"m10 9-3 3 3 3\" />\n      <path d=\"m14 15 3-3-3-3\" />\n      <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n    </svg>\n  )\n}\n\nexport function Keyboard() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M10 8h.01\" />\n      <path d=\"M12 12h.01\" />\n      <path d=\"M14 8h.01\" />\n      <path d=\"M16 12h.01\" />\n      <path d=\"M18 8h.01\" />\n      <path d=\"M6 8h.01\" />\n      <path d=\"M7 16h10\" />\n      <path d=\"M8 12h.01\" />\n      <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n    </svg>\n  )\n}\n\nexport function GeoTag() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" />\n      <circle cx=\"12\" cy=\"10\" r=\"3\" />\n    </svg>\n  )\n}\n\nexport function SocialBubble() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"m10 9-3 3 3 3\" />\n      <path d=\"m14 15 3-3-3-3\" />\n      <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n    </svg>\n  )\n}\n\nexport function Link() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n      <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n      <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n    </svg>\n  )\n}\n/* \n\nexport function Pencil() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M2.5 21.4998L8.04927 19.3655C8.40421 19.229 8.58168 19.1607 8.74772 19.0716C8.8952 18.9924 9.0358 18.901 9.16804 18.7984C9.31692 18.6829 9.45137 18.5484 9.72028 18.2795L21 6.99982C22.1046 5.89525 22.1046 4.10438 21 2.99981C19.8955 1.89525 18.1046 1.89524 17 2.99981L5.72028 14.2795C5.45138 14.5484 5.31692 14.6829 5.20139 14.8318C5.09877 14.964 5.0074 15.1046 4.92823 15.2521C4.83911 15.4181 4.77085 15.5956 4.63433 15.9506L2.5 21.4998ZM2.5 21.4998L4.55812 16.1488C4.7054 15.7659 4.77903 15.5744 4.90534 15.4867C5.01572 15.4101 5.1523 15.3811 5.2843 15.4063C5.43533 15.4351 5.58038 15.5802 5.87048 15.8703L8.12957 18.1294C8.41967 18.4195 8.56472 18.5645 8.59356 18.7155C8.61877 18.8475 8.58979 18.9841 8.51314 19.0945C8.42545 19.2208 8.23399 19.2944 7.85107 19.4417L2.5 21.4998Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n} */\n\nexport function X() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  )\n}\n\nexport function PiP() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M2 10h6V4\" />\n      <path d=\"m2 4 6 6\" />\n      <path d=\"M21 10V7a2 2 0 0 0-2-2h-7\" />\n      <path d=\"M3 14v2a2 2 0 0 0 2 2h3\" />\n      <rect x=\"12\" y=\"14\" width=\"10\" height=\"7\" rx=\"1\" />\n    </svg>\n  )\n}\n\nexport function CopiedCopier(props: { theme: 'light' | 'dark' }) {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z\"\n        stroke={props.theme === 'dark' ? '#12B76A' : '#027A48'}\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ErrorCopier() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z\"\n        stroke=\"#F04438\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n/* \nexport function List() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <rect class=\"list\" width=\"20\" height=\"20\" y=\"2\" x=\"2\" rx=\"2\" />\n      <line class=\"list-item\" y1=\"7\" y2=\"7\" x1=\"6\" x2=\"18\" />\n      <line class=\"list-item\" y2=\"12\" y1=\"12\" x1=\"6\" x2=\"18\" />\n      <line class=\"list-item\" y1=\"17\" y2=\"17\" x1=\"6\" x2=\"18\" />\n    </svg>\n  )\n}\n\nexport function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {\n  return (\n    <>\n      <Show when={props.checked}>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z\"\n            stroke={props.theme === 'dark' ? '#9B8AFB' : '#6938EF'}\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </Show>\n      <Show when={!props.checked}>\n        <svg\n          viewBox=\"0 0 24 24\"\n          height=\"20\"\n          width=\"20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z\"\n            stroke={props.theme === 'dark' ? '#9B8AFB' : '#6938EF'}\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          ></path>\n        </svg>\n      </Show>\n    </>\n  )\n}\n\nexport function CheckCircle() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function LoadingCircle() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        from=\"0\"\n        to=\"360\"\n        dur=\"2s\"\n        repeatCount=\"indefinite\"\n      />\n    </svg>\n  )\n}\n\nexport function XCircle() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function PauseCircle() {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9.5 15V9M14.5 15V9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n} */\n/* \nexport function TanstackLogo() {\n  const id = createUniqueId()\n  return (\n    <svg version=\"1.0\" viewBox=\"0 0 633 633\">\n      <linearGradient\n        id={`a-${id}`}\n        x1=\"-666.45\"\n        x2=\"-666.45\"\n        y1=\"163.28\"\n        y2=\"163.99\"\n        gradientTransform=\"matrix(633 0 0 633 422177 -103358)\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stop-color=\"#6BDAFF\" offset=\"0\" />\n        <stop stop-color=\"#F9FFB5\" offset=\".32\" />\n        <stop stop-color=\"#FFA770\" offset=\".71\" />\n        <stop stop-color=\"#FF7373\" offset=\"1\" />\n      </linearGradient>\n      <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill={`url(#a-${id})`} />\n\n      <defs>\n        <filter\n          id={`am-${id}`}\n          x=\"-137.5\"\n          y=\"412\"\n          width=\"454\"\n          height=\"396.9\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`b-${id}`}\n        x=\"-137.5\"\n        y=\"412\"\n        width=\"454\"\n        height=\"396.9\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#am-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#b-${id})`}>\n        <ellipse\n          cx=\"89.5\"\n          cy=\"610.5\"\n          rx=\"214.5\"\n          ry=\"186\"\n          fill=\"#015064\"\n          stroke=\"#00CFE2\"\n          stroke-width=\"25\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`ah-${id}`}\n          x=\"316.5\"\n          y=\"412\"\n          width=\"454\"\n          height=\"396.9\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`k-${id}`}\n        x=\"316.5\"\n        y=\"412\"\n        width=\"454\"\n        height=\"396.9\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#ah-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#k-${id})`}>\n        <ellipse\n          cx=\"543.5\"\n          cy=\"610.5\"\n          rx=\"214.5\"\n          ry=\"186\"\n          fill=\"#015064\"\n          stroke=\"#00CFE2\"\n          stroke-width=\"25\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`ae-${id}`}\n          x=\"-137.5\"\n          y=\"450\"\n          width=\"454\"\n          height=\"396.9\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`j-${id}`}\n        x=\"-137.5\"\n        y=\"450\"\n        width=\"454\"\n        height=\"396.9\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#ae-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#j-${id})`}>\n        <ellipse\n          cx=\"89.5\"\n          cy=\"648.5\"\n          rx=\"214.5\"\n          ry=\"186\"\n          fill=\"#015064\"\n          stroke=\"#00A8B8\"\n          stroke-width=\"25\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`ai-${id}`}\n          x=\"316.5\"\n          y=\"450\"\n          width=\"454\"\n          height=\"396.9\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`i-${id}`}\n        x=\"316.5\"\n        y=\"450\"\n        width=\"454\"\n        height=\"396.9\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#ai-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#i-${id})`}>\n        <ellipse\n          cx=\"543.5\"\n          cy=\"648.5\"\n          rx=\"214.5\"\n          ry=\"186\"\n          fill=\"#015064\"\n          stroke=\"#00A8B8\"\n          stroke-width=\"25\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`aj-${id}`}\n          x=\"-137.5\"\n          y=\"486\"\n          width=\"454\"\n          height=\"396.9\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`h-${id}`}\n        x=\"-137.5\"\n        y=\"486\"\n        width=\"454\"\n        height=\"396.9\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#aj-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#h-${id})`}>\n        <ellipse\n          cx=\"89.5\"\n          cy=\"684.5\"\n          rx=\"214.5\"\n          ry=\"186\"\n          fill=\"#015064\"\n          stroke=\"#007782\"\n          stroke-width=\"25\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`ag-${id}`}\n          x=\"316.5\"\n          y=\"486\"\n          width=\"454\"\n          height=\"396.9\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`g-${id}`}\n        x=\"316.5\"\n        y=\"486\"\n        width=\"454\"\n        height=\"396.9\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#ag-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#g-${id})`}>\n        <ellipse\n          cx=\"543.5\"\n          cy=\"684.5\"\n          rx=\"214.5\"\n          ry=\"186\"\n          fill=\"#015064\"\n          stroke=\"#007782\"\n          stroke-width=\"25\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`af-${id}`}\n          x=\"272.2\"\n          y=\"308\"\n          width=\"176.9\"\n          height=\"129.3\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`f-${id}`}\n        x=\"272.2\"\n        y=\"308\"\n        width=\"176.9\"\n        height=\"129.3\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#af-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#f-${id})`}>\n        <line\n          x1=\"436\"\n          x2=\"431\"\n          y1=\"403.2\"\n          y2=\"431.8\"\n          fill=\"none\"\n          stroke=\"#000\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"11\"\n        />\n\n        <line\n          x1=\"291\"\n          x2=\"280\"\n          y1=\"341.5\"\n          y2=\"403.5\"\n          fill=\"none\"\n          stroke=\"#000\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"11\"\n        />\n\n        <line\n          x1=\"332.9\"\n          x2=\"328.6\"\n          y1=\"384.1\"\n          y2=\"411.2\"\n          fill=\"none\"\n          stroke=\"#000\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"11\"\n        />\n\n        <linearGradient\n          id={`m-${id}`}\n          x1=\"-670.75\"\n          x2=\"-671.59\"\n          y1=\"164.4\"\n          y2=\"164.49\"\n          gradientTransform=\"matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#EE2700\" offset=\"0\" />\n          <stop stop-color=\"#FF008E\" offset=\"1\" />\n        </linearGradient>\n\n        <path\n          d=\"m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z\"\n          clip-rule=\"evenodd\"\n          fill={`url(#m-${id})`}\n          fill-rule=\"evenodd\"\n        />\n\n        <line\n          x1=\"428.2\"\n          x2=\"429.1\"\n          y1=\"384.5\"\n          y2=\"378\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"7\"\n        />\n\n        <line\n          x1=\"395.2\"\n          x2=\"396.1\"\n          y1=\"379.5\"\n          y2=\"373\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"7\"\n        />\n\n        <line\n          x1=\"362.2\"\n          x2=\"363.1\"\n          y1=\"373.5\"\n          y2=\"367.4\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"7\"\n        />\n\n        <line\n          x1=\"324.2\"\n          x2=\"328.4\"\n          y1=\"351.3\"\n          y2=\"347.4\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"7\"\n        />\n\n        <line\n          x1=\"303.2\"\n          x2=\"307.4\"\n          y1=\"331.3\"\n          y2=\"327.4\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"7\"\n        />\n      </g>\n      <defs>\n        <filter\n          id={`ak-${id}`}\n          x=\"73.2\"\n          y=\"113.8\"\n          width=\"280.6\"\n          height=\"317.4\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`e-${id}`}\n        x=\"73.2\"\n        y=\"113.8\"\n        width=\"280.6\"\n        height=\"317.4\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#ak-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#e-${id})`}>\n        <linearGradient\n          id={`n-${id}`}\n          x1=\"-672.16\"\n          x2=\"-672.16\"\n          y1=\"165.03\"\n          y2=\"166.03\"\n          gradientTransform=\"matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#A17500\" offset=\"0\" />\n          <stop stop-color=\"#5D2100\" offset=\"1\" />\n        </linearGradient>\n\n        <path\n          d=\"m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6\"\n          clip-rule=\"evenodd\"\n          fill={`url(#n-${id})`}\n          fill-rule=\"evenodd\"\n        />\n        <g stroke=\"#2F8A00\">\n          <linearGradient\n            id={`r-${id}`}\n            x1=\"-660.23\"\n            x2=\"-660.23\"\n            y1=\"166.72\"\n            y2=\"167.72\"\n            gradientTransform=\"matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#2F8A00\" offset=\"0\" />\n            <stop stop-color=\"#90FF57\" offset=\"1\" />\n          </linearGradient>\n\n          <path\n            d=\"m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z\"\n            clip-rule=\"evenodd\"\n            fill={`url(#r-${id})`}\n            fill-rule=\"evenodd\"\n            stroke-width=\"13\"\n          />\n\n          <linearGradient\n            id={`s-${id}`}\n            x1=\"-661.36\"\n            x2=\"-661.36\"\n            y1=\"164.18\"\n            y2=\"165.18\"\n            gradientTransform=\"matrix(110 5.7648 -6.3599 121.35 73933 -15933)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#2F8A00\" offset=\"0\" />\n            <stop stop-color=\"#90FF57\" offset=\"1\" />\n          </linearGradient>\n\n          <path\n            d=\"m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z\"\n            clip-rule=\"evenodd\"\n            fill={`url(#s-${id})`}\n            fill-rule=\"evenodd\"\n            stroke-width=\"13\"\n          />\n\n          <linearGradient\n            id={`q-${id}`}\n            x1=\"-656.79\"\n            x2=\"-656.79\"\n            y1=\"165.15\"\n            y2=\"166.15\"\n            gradientTransform=\"matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#2F8A00\" offset=\"0\" />\n            <stop stop-color=\"#90FF57\" offset=\"1\" />\n          </linearGradient>\n\n          <path\n            d=\"m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z\"\n            clip-rule=\"evenodd\"\n            fill={`url(#q-${id})`}\n            fill-rule=\"evenodd\"\n            stroke-width=\"13\"\n          />\n\n          <linearGradient\n            id={`p-${id}`}\n            x1=\"-663.07\"\n            x2=\"-663.07\"\n            y1=\"165.44\"\n            y2=\"166.44\"\n            gradientTransform=\"matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#2F8A00\" offset=\"0\" />\n            <stop stop-color=\"#90FF57\" offset=\"1\" />\n          </linearGradient>\n\n          <path\n            d=\"m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z\"\n            clip-rule=\"evenodd\"\n            fill={`url(#p-${id})`}\n            fill-rule=\"evenodd\"\n            stroke-width=\"13\"\n          />\n\n          <linearGradient\n            id={`o-${id}`}\n            x1=\"-662.57\"\n            x2=\"-662.57\"\n            y1=\"164.44\"\n            y2=\"165.44\"\n            gradientTransform=\"matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#2F8A00\" offset=\"0\" />\n            <stop stop-color=\"#90FF57\" offset=\"1\" />\n          </linearGradient>\n\n          <path\n            d=\"m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z\"\n            clip-rule=\"evenodd\"\n            fill={`url(#o-${id})`}\n            fill-rule=\"evenodd\"\n            stroke-width=\"13\"\n          />\n\n          <linearGradient\n            id={`l-${id}`}\n            x1=\"-656.43\"\n            x2=\"-656.43\"\n            y1=\"163.86\"\n            y2=\"164.86\"\n            gradientTransform=\"matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stop-color=\"#2F8A00\" offset=\"0\" />\n            <stop stop-color=\"#90FF57\" offset=\"1\" />\n          </linearGradient>\n\n          <path\n            d=\"m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z\"\n            clip-rule=\"evenodd\"\n            fill={`url(#l-${id})`}\n            fill-rule=\"evenodd\"\n            stroke-width=\"13\"\n          />\n          <path\n            d=\"m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-width=\"8\"\n          />\n          <path\n            d=\"m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-width=\"8\"\n          />\n          <path\n            d=\"m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-width=\"8\"\n          />\n          <path\n            d=\"m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32\"\n            fill=\"none\"\n            stroke-linecap=\"round\"\n            stroke-width=\"8\"\n          />\n        </g>\n      </g>\n      <defs>\n        <filter\n          id={`al-${id}`}\n          x=\"50.5\"\n          y=\"399\"\n          width=\"532\"\n          height=\"633\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`d-${id}`}\n        x=\"50.5\"\n        y=\"399\"\n        width=\"532\"\n        height=\"633\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#al-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#d-${id})`}>\n        <linearGradient\n          id={`u-${id}`}\n          x1=\"-666.06\"\n          x2=\"-666.23\"\n          y1=\"163.36\"\n          y2=\"163.75\"\n          gradientTransform=\"matrix(532 0 0 633 354760 -102959)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFF400\" offset=\"0\" />\n          <stop stop-color=\"#3C8700\" offset=\"1\" />\n        </linearGradient>\n\n        <ellipse\n          cx=\"316.5\"\n          cy=\"715.5\"\n          rx=\"266\"\n          ry=\"316.5\"\n          fill={`url(#u-${id})`}\n        />\n      </g>\n      <defs>\n        <filter\n          id={`ad-${id}`}\n          x=\"391\"\n          y=\"-24\"\n          width=\"288\"\n          height=\"283\"\n          filterUnits=\"userSpaceOnUse\"\n        >\n          <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0\" />\n        </filter>\n      </defs>\n\n      <mask\n        id={`c-${id}`}\n        x=\"391\"\n        y=\"-24\"\n        width=\"288\"\n        height=\"283\"\n        maskUnits=\"userSpaceOnUse\"\n      >\n        <g filter={`url(#ad-${id})`}>\n          <circle cx=\"316.5\" cy=\"316.5\" r=\"316.5\" fill=\"#fff\" />\n        </g>\n      </mask>\n      <g mask={`url(#c-${id})`}>\n        <linearGradient\n          id={`t-${id}`}\n          x1=\"-664.56\"\n          x2=\"-664.56\"\n          y1=\"163.79\"\n          y2=\"164.79\"\n          gradientTransform=\"matrix(227 0 0 227 151421 -37204)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFDF00\" offset=\"0\" />\n          <stop stop-color=\"#FF9D00\" offset=\"1\" />\n        </linearGradient>\n        <circle cx=\"565.5\" cy=\"89.5\" r=\"113.5\" fill={`url(#t-${id})`} />\n\n        <linearGradient\n          id={`v-${id}`}\n          x1=\"-644.5\"\n          x2=\"-645.77\"\n          y1=\"342\"\n          y2=\"342\"\n          gradientTransform=\"matrix(30 0 0 1 19770 -253)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"427\"\n          x2=\"397\"\n          y1=\"89\"\n          y2=\"89\"\n          fill=\"none\"\n          stroke={`url(#v-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`aa-${id}`}\n          x1=\"-641.56\"\n          x2=\"-642.83\"\n          y1=\"196.02\"\n          y2=\"196.07\"\n          gradientTransform=\"matrix(26.5 0 0 5.5 17439 -1025.5)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"430.5\"\n          x2=\"404\"\n          y1=\"55.5\"\n          y2=\"50\"\n          fill=\"none\"\n          stroke={`url(#aa-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`w-${id}`}\n          x1=\"-643.73\"\n          x2=\"-645\"\n          y1=\"185.83\"\n          y2=\"185.9\"\n          gradientTransform=\"matrix(29 0 0 8 19107 -1361)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"431\"\n          x2=\"402\"\n          y1=\"122\"\n          y2=\"130\"\n          fill=\"none\"\n          stroke={`url(#w-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`ac-${id}`}\n          x1=\"-638.94\"\n          x2=\"-640.22\"\n          y1=\"177.09\"\n          y2=\"177.39\"\n          gradientTransform=\"matrix(24 0 0 13 15783 -2145)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"442\"\n          x2=\"418\"\n          y1=\"153\"\n          y2=\"166\"\n          fill=\"none\"\n          stroke={`url(#ac-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`ab-${id}`}\n          x1=\"-633.42\"\n          x2=\"-634.7\"\n          y1=\"172.41\"\n          y2=\"173.31\"\n          gradientTransform=\"matrix(20 0 0 19 13137 -3096)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"464\"\n          x2=\"444\"\n          y1=\"180\"\n          y2=\"199\"\n          fill=\"none\"\n          stroke={`url(#ab-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`y-${id}`}\n          x1=\"-619.05\"\n          x2=\"-619.52\"\n          y1=\"170.82\"\n          y2=\"171.82\"\n          gradientTransform=\"matrix(13.83 0 0 22.85 9050 -3703.4)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"491.4\"\n          x2=\"477.5\"\n          y1=\"203\"\n          y2=\"225.9\"\n          fill=\"none\"\n          stroke={`url(#y-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`x-${id}`}\n          x1=\"-578.5\"\n          x2=\"-578.63\"\n          y1=\"170.31\"\n          y2=\"171.31\"\n          gradientTransform=\"matrix(7.5 0 0 24.5 4860 -3953)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"524.5\"\n          x2=\"517\"\n          y1=\"219.5\"\n          y2=\"244\"\n          fill=\"none\"\n          stroke={`url(#x-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n\n        <linearGradient\n          id={`z-${id}`}\n          x1=\"666.5\"\n          x2=\"666.5\"\n          y1=\"170.31\"\n          y2=\"171.31\"\n          gradientTransform=\"matrix(.5 0 0 24.5 231.5 -3944)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stop-color=\"#FFA400\" offset=\"0\" />\n          <stop stop-color=\"#FF5E00\" offset=\"1\" />\n        </linearGradient>\n\n        <line\n          x1=\"564.5\"\n          x2=\"565\"\n          y1=\"228.5\"\n          y2=\"253\"\n          fill=\"none\"\n          stroke={`url(#z-${id})`}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"bevel\"\n          stroke-width=\"12\"\n        />\n      </g>\n    </svg>\n  )\n}\n */\n"],"names":["Copier","_tmpl$","List","_tmpl$2","PageSearch","_tmpl$3","Cogs","_tmpl$4","SettingsCog","_tmpl$5","Keyboard","_tmpl$6","GeoTag","_tmpl$7","SocialBubble","Link","_tmpl$8","X","_tmpl$9","PiP","_tmpl$0","CopiedCopier","props","_el$10","_tmpl$1","_el$11","firstChild","_$effect","_$setAttribute","theme","ErrorCopier","_tmpl$10"],"mappings":";;AA8QO,SAASA,SAAS;AACvB,SAAAC,OAAAA;AAkBF;AAEO,SAASC,OAAO;AACrB,SAAAC,QAAAA;AAiBF;AAEO,SAASC,aAAa;AAC3B,SAAAC,QAAAA;AAmBF;AAEO,SAASC,OAAO;AACrB,SAAAC,QAAAA;AA4BF;AAEO,SAASC,cAAc;AAC5B,SAAAC,QAAAA;AAiBF;AAEO,SAASC,WAAW;AACzB,SAAAC,QAAAA;AAuBF;AAEO,SAASC,SAAS;AACvB,SAAAC,QAAAA;AAgBF;AAEO,SAASC,eAAe;AAC7B,SAAAL,QAAAA;AAiBF;AAEO,SAASM,OAAO;AACrB,SAAAC,QAAAA;AAiBF;AAuBO,SAASC,IAAI;AAClB,SAAAC,QAAAA;AAgBF;AAEO,SAASC,MAAM;AACpB,SAAAC,QAAAA;AAmBF;AAEO,SAASC,aAAaC,OAAoC;AAC/D,UAAA,MAAA;AAAA,QAAAC,SAAAC,QAAAA,GAAAC,SAAAF,OAAAG;AAAAC,WAAA,MAAAC,aAAAH,QAAA,UAUcH,MAAMO,UAAU,SAAS,YAAY,SAAS,CAAA;AAAA,WAAAN;AAAAA,EAAA,GAAA;AAO9D;AAEO,SAASO,cAAc;AAC5B,SAAAC,SAAAA;AAiBF;"}

dist/esm/icons.d.ts

+export * from './components/icons.js';

dist/esm/icons.js

+import { Cogs, CopiedCopier, Copier, ErrorCopier, GeoTag, Keyboard, Link, List, PageSearch, PiP, SettingsCog, SocialBubble, X } from "./components/icons.js";
+export {
+  Cogs,
+  CopiedCopier,
+  Copier,
+  ErrorCopier,
+  GeoTag,
+  Keyboard,
+  Link,
+  List,
+  PageSearch,
+  PiP,
+  SettingsCog,
+  SocialBubble,
+  X
+};
+//# sourceMappingURL=icons.js.map

dist/esm/icons.js.map

+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

src/components/header.tsx

+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+export function Header({
+  children,
+  class: className,
+  ...rest
+}: JSX.IntrinsicElements['header']) {
+  const styles = useStyles()
+  return (
+    <header
+      class={clsx(styles().header.row, 'tsqd-header', className)}
+      {...rest}
+    >
+      {children}
+    </header>
+  )
+}
+
+export function HeaderLogo({
+  children,
+  flavor,
+}: {
+  children: JSX.Element
+  flavor: {
+    light: string
+    dark: string
+  }
+}) {
+  const styles = useStyles()
+  return (
+    <div class={styles().header.logoAndToggleContainer}>
+      <button class={clsx(styles().header.logo)}>
+        <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>
+        <span
+          class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}
+        >
+          {children}
+        </span>
+      </button>
+    </div>
+  )
+}

src/components/icons.tsx

+// import { Show, createUniqueId } from 'solid-js'
+
+/* export function Search() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function Trash() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+} */
+/* 
+export function ChevronDown() {
+  return (
+    <svg
+      width="10"
+      height="6"
+      viewBox="0 0 10 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1L5 5L9 1"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ArrowUp() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ArrowDown() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ArrowLeft() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        transform: 'rotate(90deg)',
+      }}
+    >
+      <path
+        d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ArrowRight() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        transform: 'rotate(-90deg)',
+      }}
+    >
+      <path
+        d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
+        stroke="currentColor"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function Sun() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      height="12"
+      width="12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </svg>
+  )
+}
+
+export function Moon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      height="12"
+      width="12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </svg>
+  )
+}
+
+export function Monitor() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      height="12"
+      width="12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </svg>
+  )
+}
+
+export function Wifi() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      stroke-width="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z"></path>
+    </svg>
+  )
+}
+
+export function Offline() {
+  return (
+    <svg
+      stroke-width="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="none"
+        d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z"
+      ></path>
+      <path d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 00-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 005 13v.01L6.99 15a7.042 7.042 0 014.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 00-6 0z"></path>
+    </svg>
+  )
+} */
+
+/* export function Settings() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+} */
+
+export function Copier() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class="copier"
+        d="M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  )
+}
+
+export function List() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M8 6h10" />
+      <path d="M6 12h9" />
+      <path d="M11 18h7" />
+    </svg>
+  )
+}
+
+export function PageSearch() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-file-search2-icon lucide-file-search-2"
+    >
+      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+      <circle cx="11.5" cy="14.5" r="2.5" />
+      <path d="M13.3 16.3 15 18" />
+    </svg>
+  )
+}
+
+export function Cogs() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+      <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+      <path d="M12 2v2" />
+      <path d="M12 22v-2" />
+      <path d="m17 20.66-1-1.73" />
+      <path d="M11 10.27 7 3.34" />
+      <path d="m20.66 17-1.73-1" />
+      <path d="m3.34 7 1.73 1" />
+      <path d="M14 12h8" />
+      <path d="M2 12h2" />
+      <path d="m20.66 7-1.73 1" />
+      <path d="m3.34 17 1.73-1" />
+      <path d="m17 3.34-1 1.73" />
+      <path d="m11 13.73-4 6.93" />
+    </svg>
+  )
+}
+
+export function SettingsCog() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m10 9-3 3 3 3" />
+      <path d="m14 15 3-3-3-3" />
+      <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+    </svg>
+  )
+}
+
+export function Keyboard() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M10 8h.01" />
+      <path d="M12 12h.01" />
+      <path d="M14 8h.01" />
+      <path d="M16 12h.01" />
+      <path d="M18 8h.01" />
+      <path d="M6 8h.01" />
+      <path d="M7 16h10" />
+      <path d="M8 12h.01" />
+      <rect width="20" height="16" x="2" y="4" rx="2" />
+    </svg>
+  )
+}
+
+export function GeoTag() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  )
+}
+
+export function SocialBubble() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m10 9-3 3 3 3" />
+      <path d="m14 15 3-3-3-3" />
+      <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+    </svg>
+  )
+}
+
+export function Link() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+      <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+      <line x1="8" x2="16" y1="12" y2="12" />
+    </svg>
+  )
+}
+/* 
+
+export function Pencil() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.5 21.4998L8.04927 19.3655C8.40421 19.229 8.58168 19.1607 8.74772 19.0716C8.8952 18.9924 9.0358 18.901 9.16804 18.7984C9.31692 18.6829 9.45137 18.5484 9.72028 18.2795L21 6.99982C22.1046 5.89525 22.1046 4.10438 21 2.99981C19.8955 1.89525 18.1046 1.89524 17 2.99981L5.72028 14.2795C5.45138 14.5484 5.31692 14.6829 5.20139 14.8318C5.09877 14.964 5.0074 15.1046 4.92823 15.2521C4.83911 15.4181 4.77085 15.5956 4.63433 15.9506L2.5 21.4998ZM2.5 21.4998L4.55812 16.1488C4.7054 15.7659 4.77903 15.5744 4.90534 15.4867C5.01572 15.4101 5.1523 15.3811 5.2843 15.4063C5.43533 15.4351 5.58038 15.5802 5.87048 15.8703L8.12957 18.1294C8.41967 18.4195 8.56472 18.5645 8.59356 18.7155C8.61877 18.8475 8.58979 18.9841 8.51314 19.0945C8.42545 19.2208 8.23399 19.2944 7.85107 19.4417L2.5 21.4998Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+} */
+
+export function X() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  )
+}
+
+export function PiP() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M2 10h6V4" />
+      <path d="m2 4 6 6" />
+      <path d="M21 10V7a2 2 0 0 0-2-2h-7" />
+      <path d="M3 14v2a2 2 0 0 0 2 2h3" />
+      <rect x="12" y="14" width="10" height="7" rx="1" />
+    </svg>
+  )
+}
+
+export function CopiedCopier(props: { theme: 'light' | 'dark' }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
+        stroke={props.theme === 'dark' ? '#12B76A' : '#027A48'}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function ErrorCopier() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
+        stroke="#F04438"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+/* 
+export function List() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect class="list" width="20" height="20" y="2" x="2" rx="2" />
+      <line class="list-item" y1="7" y2="7" x1="6" x2="18" />
+      <line class="list-item" y2="12" y1="12" x1="6" x2="18" />
+      <line class="list-item" y1="17" y2="17" x1="6" x2="18" />
+    </svg>
+  )
+}
+
+export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
+  return (
+    <>
+      <Show when={props.checked}>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
+            stroke={props.theme === 'dark' ? '#9B8AFB' : '#6938EF'}
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </Show>
+      <Show when={!props.checked}>
+        <svg
+          viewBox="0 0 24 24"
+          height="20"
+          width="20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z"
+            stroke={props.theme === 'dark' ? '#9B8AFB' : '#6938EF'}
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </Show>
+    </>
+  )
+}
+
+export function CheckCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function LoadingCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0"
+        to="360"
+        dur="2s"
+        repeatCount="indefinite"
+      />
+    </svg>
+  )
+}
+
+export function XCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export function PauseCircle() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.5 15V9M14.5 15V9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+} */
+/* 
+export function TanstackLogo() {
+  const id = createUniqueId()
+  return (
+    <svg version="1.0" viewBox="0 0 633 633">
+      <linearGradient
+        id={`a-${id}`}
+        x1="-666.45"
+        x2="-666.45"
+        y1="163.28"
+        y2="163.99"
+        gradientTransform="matrix(633 0 0 633 422177 -103358)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#6BDAFF" offset="0" />
+        <stop stop-color="#F9FFB5" offset=".32" />
+        <stop stop-color="#FFA770" offset=".71" />
+        <stop stop-color="#FF7373" offset="1" />
+      </linearGradient>
+      <circle cx="316.5" cy="316.5" r="316.5" fill={`url(#a-${id})`} />
+
+      <defs>
+        <filter
+          id={`am-${id}`}
+          x="-137.5"
+          y="412"
+          width="454"
+          height="396.9"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`b-${id}`}
+        x="-137.5"
+        y="412"
+        width="454"
+        height="396.9"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#am-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#b-${id})`}>
+        <ellipse
+          cx="89.5"
+          cy="610.5"
+          rx="214.5"
+          ry="186"
+          fill="#015064"
+          stroke="#00CFE2"
+          stroke-width="25"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`ah-${id}`}
+          x="316.5"
+          y="412"
+          width="454"
+          height="396.9"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`k-${id}`}
+        x="316.5"
+        y="412"
+        width="454"
+        height="396.9"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#ah-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#k-${id})`}>
+        <ellipse
+          cx="543.5"
+          cy="610.5"
+          rx="214.5"
+          ry="186"
+          fill="#015064"
+          stroke="#00CFE2"
+          stroke-width="25"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`ae-${id}`}
+          x="-137.5"
+          y="450"
+          width="454"
+          height="396.9"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`j-${id}`}
+        x="-137.5"
+        y="450"
+        width="454"
+        height="396.9"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#ae-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#j-${id})`}>
+        <ellipse
+          cx="89.5"
+          cy="648.5"
+          rx="214.5"
+          ry="186"
+          fill="#015064"
+          stroke="#00A8B8"
+          stroke-width="25"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`ai-${id}`}
+          x="316.5"
+          y="450"
+          width="454"
+          height="396.9"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`i-${id}`}
+        x="316.5"
+        y="450"
+        width="454"
+        height="396.9"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#ai-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#i-${id})`}>
+        <ellipse
+          cx="543.5"
+          cy="648.5"
+          rx="214.5"
+          ry="186"
+          fill="#015064"
+          stroke="#00A8B8"
+          stroke-width="25"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`aj-${id}`}
+          x="-137.5"
+          y="486"
+          width="454"
+          height="396.9"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`h-${id}`}
+        x="-137.5"
+        y="486"
+        width="454"
+        height="396.9"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#aj-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#h-${id})`}>
+        <ellipse
+          cx="89.5"
+          cy="684.5"
+          rx="214.5"
+          ry="186"
+          fill="#015064"
+          stroke="#007782"
+          stroke-width="25"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`ag-${id}`}
+          x="316.5"
+          y="486"
+          width="454"
+          height="396.9"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`g-${id}`}
+        x="316.5"
+        y="486"
+        width="454"
+        height="396.9"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#ag-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#g-${id})`}>
+        <ellipse
+          cx="543.5"
+          cy="684.5"
+          rx="214.5"
+          ry="186"
+          fill="#015064"
+          stroke="#007782"
+          stroke-width="25"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`af-${id}`}
+          x="272.2"
+          y="308"
+          width="176.9"
+          height="129.3"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`f-${id}`}
+        x="272.2"
+        y="308"
+        width="176.9"
+        height="129.3"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#af-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#f-${id})`}>
+        <line
+          x1="436"
+          x2="431"
+          y1="403.2"
+          y2="431.8"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="11"
+        />
+
+        <line
+          x1="291"
+          x2="280"
+          y1="341.5"
+          y2="403.5"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="11"
+        />
+
+        <line
+          x1="332.9"
+          x2="328.6"
+          y1="384.1"
+          y2="411.2"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="11"
+        />
+
+        <linearGradient
+          id={`m-${id}`}
+          x1="-670.75"
+          x2="-671.59"
+          y1="164.4"
+          y2="164.49"
+          gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#EE2700" offset="0" />
+          <stop stop-color="#FF008E" offset="1" />
+        </linearGradient>
+
+        <path
+          d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z"
+          clip-rule="evenodd"
+          fill={`url(#m-${id})`}
+          fill-rule="evenodd"
+        />
+
+        <line
+          x1="428.2"
+          x2="429.1"
+          y1="384.5"
+          y2="378"
+          fill="none"
+          stroke="#fff"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="7"
+        />
+
+        <line
+          x1="395.2"
+          x2="396.1"
+          y1="379.5"
+          y2="373"
+          fill="none"
+          stroke="#fff"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="7"
+        />
+
+        <line
+          x1="362.2"
+          x2="363.1"
+          y1="373.5"
+          y2="367.4"
+          fill="none"
+          stroke="#fff"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="7"
+        />
+
+        <line
+          x1="324.2"
+          x2="328.4"
+          y1="351.3"
+          y2="347.4"
+          fill="none"
+          stroke="#fff"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="7"
+        />
+
+        <line
+          x1="303.2"
+          x2="307.4"
+          y1="331.3"
+          y2="327.4"
+          fill="none"
+          stroke="#fff"
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="7"
+        />
+      </g>
+      <defs>
+        <filter
+          id={`ak-${id}`}
+          x="73.2"
+          y="113.8"
+          width="280.6"
+          height="317.4"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`e-${id}`}
+        x="73.2"
+        y="113.8"
+        width="280.6"
+        height="317.4"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#ak-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#e-${id})`}>
+        <linearGradient
+          id={`n-${id}`}
+          x1="-672.16"
+          x2="-672.16"
+          y1="165.03"
+          y2="166.03"
+          gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#A17500" offset="0" />
+          <stop stop-color="#5D2100" offset="1" />
+        </linearGradient>
+
+        <path
+          d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6"
+          clip-rule="evenodd"
+          fill={`url(#n-${id})`}
+          fill-rule="evenodd"
+        />
+        <g stroke="#2F8A00">
+          <linearGradient
+            id={`r-${id}`}
+            x1="-660.23"
+            x2="-660.23"
+            y1="166.72"
+            y2="167.72"
+            gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#2F8A00" offset="0" />
+            <stop stop-color="#90FF57" offset="1" />
+          </linearGradient>
+
+          <path
+            d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"
+            clip-rule="evenodd"
+            fill={`url(#r-${id})`}
+            fill-rule="evenodd"
+            stroke-width="13"
+          />
+
+          <linearGradient
+            id={`s-${id}`}
+            x1="-661.36"
+            x2="-661.36"
+            y1="164.18"
+            y2="165.18"
+            gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#2F8A00" offset="0" />
+            <stop stop-color="#90FF57" offset="1" />
+          </linearGradient>
+
+          <path
+            d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z"
+            clip-rule="evenodd"
+            fill={`url(#s-${id})`}
+            fill-rule="evenodd"
+            stroke-width="13"
+          />
+
+          <linearGradient
+            id={`q-${id}`}
+            x1="-656.79"
+            x2="-656.79"
+            y1="165.15"
+            y2="166.15"
+            gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#2F8A00" offset="0" />
+            <stop stop-color="#90FF57" offset="1" />
+          </linearGradient>
+
+          <path
+            d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z"
+            clip-rule="evenodd"
+            fill={`url(#q-${id})`}
+            fill-rule="evenodd"
+            stroke-width="13"
+          />
+
+          <linearGradient
+            id={`p-${id}`}
+            x1="-663.07"
+            x2="-663.07"
+            y1="165.44"
+            y2="166.44"
+            gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#2F8A00" offset="0" />
+            <stop stop-color="#90FF57" offset="1" />
+          </linearGradient>
+
+          <path
+            d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"
+            clip-rule="evenodd"
+            fill={`url(#p-${id})`}
+            fill-rule="evenodd"
+            stroke-width="13"
+          />
+
+          <linearGradient
+            id={`o-${id}`}
+            x1="-662.57"
+            x2="-662.57"
+            y1="164.44"
+            y2="165.44"
+            gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#2F8A00" offset="0" />
+            <stop stop-color="#90FF57" offset="1" />
+          </linearGradient>
+
+          <path
+            d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z"
+            clip-rule="evenodd"
+            fill={`url(#o-${id})`}
+            fill-rule="evenodd"
+            stroke-width="13"
+          />
+
+          <linearGradient
+            id={`l-${id}`}
+            x1="-656.43"
+            x2="-656.43"
+            y1="163.86"
+            y2="164.86"
+            gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#2F8A00" offset="0" />
+            <stop stop-color="#90FF57" offset="1" />
+          </linearGradient>
+
+          <path
+            d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z"
+            clip-rule="evenodd"
+            fill={`url(#l-${id})`}
+            fill-rule="evenodd"
+            stroke-width="13"
+          />
+          <path
+            d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1"
+            fill="none"
+            stroke-linecap="round"
+            stroke-width="8"
+          />
+          <path
+            d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8"
+            fill="none"
+            stroke-linecap="round"
+            stroke-width="8"
+          />
+          <path
+            d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9"
+            fill="none"
+            stroke-linecap="round"
+            stroke-width="8"
+          />
+          <path
+            d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32"
+            fill="none"
+            stroke-linecap="round"
+            stroke-width="8"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id={`al-${id}`}
+          x="50.5"
+          y="399"
+          width="532"
+          height="633"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`d-${id}`}
+        x="50.5"
+        y="399"
+        width="532"
+        height="633"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#al-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#d-${id})`}>
+        <linearGradient
+          id={`u-${id}`}
+          x1="-666.06"
+          x2="-666.23"
+          y1="163.36"
+          y2="163.75"
+          gradientTransform="matrix(532 0 0 633 354760 -102959)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFF400" offset="0" />
+          <stop stop-color="#3C8700" offset="1" />
+        </linearGradient>
+
+        <ellipse
+          cx="316.5"
+          cy="715.5"
+          rx="266"
+          ry="316.5"
+          fill={`url(#u-${id})`}
+        />
+      </g>
+      <defs>
+        <filter
+          id={`ad-${id}`}
+          x="391"
+          y="-24"
+          width="288"
+          height="283"
+          filterUnits="userSpaceOnUse"
+        >
+          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        </filter>
+      </defs>
+
+      <mask
+        id={`c-${id}`}
+        x="391"
+        y="-24"
+        width="288"
+        height="283"
+        maskUnits="userSpaceOnUse"
+      >
+        <g filter={`url(#ad-${id})`}>
+          <circle cx="316.5" cy="316.5" r="316.5" fill="#fff" />
+        </g>
+      </mask>
+      <g mask={`url(#c-${id})`}>
+        <linearGradient
+          id={`t-${id}`}
+          x1="-664.56"
+          x2="-664.56"
+          y1="163.79"
+          y2="164.79"
+          gradientTransform="matrix(227 0 0 227 151421 -37204)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFDF00" offset="0" />
+          <stop stop-color="#FF9D00" offset="1" />
+        </linearGradient>
+        <circle cx="565.5" cy="89.5" r="113.5" fill={`url(#t-${id})`} />
+
+        <linearGradient
+          id={`v-${id}`}
+          x1="-644.5"
+          x2="-645.77"
+          y1="342"
+          y2="342"
+          gradientTransform="matrix(30 0 0 1 19770 -253)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="427"
+          x2="397"
+          y1="89"
+          y2="89"
+          fill="none"
+          stroke={`url(#v-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`aa-${id}`}
+          x1="-641.56"
+          x2="-642.83"
+          y1="196.02"
+          y2="196.07"
+          gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="430.5"
+          x2="404"
+          y1="55.5"
+          y2="50"
+          fill="none"
+          stroke={`url(#aa-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`w-${id}`}
+          x1="-643.73"
+          x2="-645"
+          y1="185.83"
+          y2="185.9"
+          gradientTransform="matrix(29 0 0 8 19107 -1361)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="431"
+          x2="402"
+          y1="122"
+          y2="130"
+          fill="none"
+          stroke={`url(#w-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`ac-${id}`}
+          x1="-638.94"
+          x2="-640.22"
+          y1="177.09"
+          y2="177.39"
+          gradientTransform="matrix(24 0 0 13 15783 -2145)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="442"
+          x2="418"
+          y1="153"
+          y2="166"
+          fill="none"
+          stroke={`url(#ac-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`ab-${id}`}
+          x1="-633.42"
+          x2="-634.7"
+          y1="172.41"
+          y2="173.31"
+          gradientTransform="matrix(20 0 0 19 13137 -3096)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="464"
+          x2="444"
+          y1="180"
+          y2="199"
+          fill="none"
+          stroke={`url(#ab-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`y-${id}`}
+          x1="-619.05"
+          x2="-619.52"
+          y1="170.82"
+          y2="171.82"
+          gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="491.4"
+          x2="477.5"
+          y1="203"
+          y2="225.9"
+          fill="none"
+          stroke={`url(#y-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`x-${id}`}
+          x1="-578.5"
+          x2="-578.63"
+          y1="170.31"
+          y2="171.31"
+          gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="524.5"
+          x2="517"
+          y1="219.5"
+          y2="244"
+          fill="none"
+          stroke={`url(#x-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+
+        <linearGradient
+          id={`z-${id}`}
+          x1="666.5"
+          x2="666.5"
+          y1="170.31"
+          y2="171.31"
+          gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FFA400" offset="0" />
+          <stop stop-color="#FF5E00" offset="1" />
+        </linearGradient>
+
+        <line
+          x1="564.5"
+          x2="565"
+          y1="228.5"
+          y2="253"
+          fill="none"
+          stroke={`url(#z-${id})`}
+          stroke-linecap="round"
+          stroke-linejoin="bevel"
+          stroke-width="12"
+        />
+      </g>
+    </svg>
+  )
+}
+ */

src/icons.ts

+export * from './components/icons'

dist/esm/components/tree.d.ts

 export declare function JsonTree(props: {
     value: any;
+    copyable?: boolean;
 }): import("solid-js").JSX.Element;

dist/esm/components/tree.js

@@ -1,6 +0,7 @@
-import { createComponent, template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
-import { createSignal, Show, For } from "solid-js";
+import { createComponent, template, insert, memo, effect, className, addEventListener, setAttribute, delegateEvents } from "solid-js/web";
+import { createSignal, Show, For, Switch, Match } from "solid-js";
 import clsx from "clsx";
-import { useStyles } from "../styles/use-styles.js";
-var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$3 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$4 = /* @__PURE__ */ template(`<span>null`), _tmpl$5 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$6 = /* @__PURE__ */ template(`<span>,`), _tmpl$7 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>{</span><span>}`);
+import { useStyles, css } from "../styles/use-styles.js";
+import { Copier, CopiedCopier, ErrorCopier } from "./icons.js";
+var _tmpl$ = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$2 = /* @__PURE__ */ template(`<span><svg width=16 height=16 viewBox="0 0 16 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 12L10 8L6 4"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$3 = /* @__PURE__ */ template(`<span>`), _tmpl$4 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$5 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$6 = /* @__PURE__ */ template(`<span>null`), _tmpl$7 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9 = /* @__PURE__ */ template(`<span>,`), _tmpl$0 = /* @__PURE__ */ template(`<span>...`), _tmpl$1 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$10 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{</span><span>}`);
 function JsonTree(props) {
@@ -11,5 +12,81 @@ return createComponent(JsonValue, {
       return props.value;
+    },
+    get copyable() {
+      return props.copyable;
     }
   });
 }
+const CopyButton = (props) => {
+  const styles = useStyles();
+  const [copyState, setCopyState] = createSignal("NoCopy");
+  return (() => {
+    var _el$ = _tmpl$();
+    addEventListener(_el$, "click", copyState() === "NoCopy" ? () => {
+      navigator.clipboard.writeText(JSON.stringify(props.value, null, 2)).then(() => {
+        setCopyState("SuccessCopy");
+        setTimeout(() => {
+          setCopyState("NoCopy");
+        }, 1500);
+      }, (err) => {
+        console.error("Failed to copy: ", err);
+        setCopyState("ErrorCopy");
+        setTimeout(() => {
+          setCopyState("NoCopy");
+        }, 1500);
+      });
+    } : void 0, true);
+    insert(_el$, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return copyState() === "NoCopy";
+          },
+          get children() {
+            return createComponent(Copier, {});
+          }
+        }), createComponent(Match, {
+          get when() {
+            return copyState() === "SuccessCopy";
+          },
+          get children() {
+            return createComponent(CopiedCopier, {
+              theme: "dark"
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return copyState() === "ErrorCopy";
+          },
+          get children() {
+            return createComponent(ErrorCopier, {});
+          }
+        })];
+      }
+    }));
+    effect((_p$) => {
+      var _v$ = styles().tree.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+const Expander = (props) => {
+  const styles = useStyles();
+  return (() => {
+    var _el$2 = _tmpl$2();
+    effect(() => className(_el$2, clsx(styles().tree.expander, css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `, props.expanded && css`
+            & svg {
+              top: -1px;
+            }
+          `)));
+    return _el$2;
+  })();
+};
 function JsonValue(props) {
@@ -20,25 +97,26 @@ const {
     isRoot = false,
-    isLastKey
+    isLastKey,
+    copyable
   } = props;
   const styles = useStyles();
   return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, (() => {
+    var _el$3 = _tmpl$3();
+    insert(_el$3, (() => {
       var _c$ = memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
       return () => _c$() && (() => {
-        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
-        _el$5.nextSibling;
-        insert(_el$2, keyName, _el$5);
-        effect(() => className(_el$2, styles().tree.valueKey));
-        return _el$2;
+        var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$7 = _el$5.nextSibling;
+        _el$7.nextSibling;
+        insert(_el$4, keyName, _el$7);
+        effect(() => className(_el$4, styles().tree.valueKey));
+        return _el$4;
       })();
     })(), null);
-    insert(_el$, () => {
+    insert(_el$3, () => {
       if (typeof value === "string") {
         return (() => {
-          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
-          _el$9.nextSibling;
-          insert(_el$6, value, _el$9);
-          effect(() => className(_el$6, styles().tree.valueString));
-          return _el$6;
+          var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
+          _el$1.nextSibling;
+          insert(_el$8, value, _el$1);
+          effect(() => className(_el$8, styles().tree.valueString));
+          return _el$8;
         })();
@@ -48,6 +126,6 @@ }
         return (() => {
-          var _el$0 = _tmpl$();
-          insert(_el$0, value);
-          effect(() => className(_el$0, styles().tree.valueNumber));
-          return _el$0;
+          var _el$10 = _tmpl$3();
+          insert(_el$10, value);
+          effect(() => className(_el$10, styles().tree.valueNumber));
+          return _el$10;
         })();
@@ -57,6 +135,6 @@ }
         return (() => {
-          var _el$1 = _tmpl$();
-          insert(_el$1, () => String(value));
-          effect(() => className(_el$1, styles().tree.valueBoolean));
-          return _el$1;
+          var _el$11 = _tmpl$3();
+          insert(_el$11, () => String(value));
+          effect(() => className(_el$11, styles().tree.valueBoolean));
+          return _el$11;
         })();
@@ -66,5 +144,5 @@ }
         return (() => {
-          var _el$10 = _tmpl$4();
-          effect(() => className(_el$10, styles().tree.valueNull));
-          return _el$10;
+          var _el$12 = _tmpl$6();
+          effect(() => className(_el$12, styles().tree.valueNull));
+          return _el$12;
         })();
@@ -74,5 +152,5 @@ }
         return (() => {
-          var _el$11 = _tmpl$5();
-          effect(() => className(_el$11, styles().tree.valueNull));
-          return _el$11;
+          var _el$13 = _tmpl$7();
+          effect(() => className(_el$13, styles().tree.valueNull));
+          return _el$13;
         })();
@@ -82,6 +160,6 @@ }
         return (() => {
-          var _el$12 = _tmpl$();
-          insert(_el$12, () => String(value));
-          effect(() => className(_el$12, styles().tree.valueFunction));
-          return _el$12;
+          var _el$14 = _tmpl$3();
+          insert(_el$14, () => String(value));
+          effect(() => className(_el$14, styles().tree.valueFunction));
+          return _el$14;
         })();
@@ -91,2 +169,3 @@ }
         return createComponent(ArrayValue, {
+          copyable,
           keyName,
@@ -98,2 +177,3 @@ value
         return createComponent(ObjectValue, {
+          copyable,
           keyName,
@@ -103,7 +183,15 @@ value
       }
-      return _tmpl$();
+      return _tmpl$3();
     }, null);
-    insert(_el$, isLastKey || isRoot ? "" : _tmpl$6(), null);
-    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
-    return _el$;
+    insert(_el$3, copyable && (() => {
+      var _el$16 = _tmpl$8();
+      insert(_el$16, createComponent(CopyButton, {
+        value
+      }));
+      effect(() => className(_el$16, clsx(styles().tree.actions, "actions")));
+      return _el$16;
+    })(), null);
+    insert(_el$3, isLastKey || isRoot ? "" : _tmpl$9(), null);
+    effect(() => className(_el$3, styles().tree.valueContainer(isRoot)));
+    return _el$3;
   })();
@@ -113,3 +201,4 @@ }
   value,
-  keyName
+  keyName,
+  copyable
 }) => {
@@ -119,7 +208,11 @@ const styles = useStyles();
   return (() => {
-    var _el$15 = _tmpl$7(), _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling;
-    insert(_el$15, keyName && (() => {
-      var _el$19 = _tmpl$2(), _el$20 = _el$19.firstChild, _el$22 = _el$20.nextSibling;
-      _el$22.nextSibling;
-      _el$19.$$click = (e) => {
+    var _el$18 = _tmpl$1(), _el$19 = _el$18.firstChild, _el$22 = _el$19.nextSibling;
+    insert(_el$18, createComponent(Expander, {
+      get expanded() {
+        return expanded();
+      }
+    }), _el$19);
+    insert(_el$18, keyName && (() => {
+      var _el$23 = _tmpl$10(), _el$24 = _el$23.firstChild, _el$29 = _el$24.nextSibling, _el$25 = _el$29.nextSibling, _el$27 = _el$25.nextSibling, _el$28 = _el$27.firstChild;
+      _el$23.$$click = (e) => {
         e.stopPropagation();
@@ -129,7 +222,16 @@ e.stopImmediatePropagation();
       };
-      insert(_el$19, keyName, _el$22);
-      effect(() => className(_el$19, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-      return _el$19;
-    })(), _el$16);
-    insert(_el$15, createComponent(Show, {
+      insert(_el$23, keyName, _el$29);
+      insert(_el$27, () => value.length, _el$28);
+      effect((_p$) => {
+        var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
+        _v$6 !== _p$.e && className(_el$23, _p$.e = _v$6);
+        _v$7 !== _p$.t && className(_el$27, _p$.t = _v$7);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$23;
+    })(), _el$19);
+    insert(_el$18, createComponent(Show, {
       get when() {
@@ -139,3 +241,4 @@ return expanded();
       get children() {
-        return createComponent(For, {
+        var _el$20 = _tmpl$3();
+        insert(_el$20, createComponent(For, {
           each: value,
@@ -145,2 +248,3 @@ children: (item, i) => {
             return createComponent(JsonValue, {
+              copyable,
               value: item,
@@ -150,6 +254,8 @@ isLastKey
           }
-        });
+        }));
+        effect(() => className(_el$20, styles().tree.expandedLine(Boolean(keyName))));
+        return _el$20;
       }
-    }), _el$18);
-    insert(_el$15, createComponent(Show, {
+    }), _el$22);
+    insert(_el$18, createComponent(Show, {
       get when() {
@@ -159,4 +265,4 @@ return !expanded();
       get children() {
-        var _el$17 = _tmpl$();
-        _el$17.$$click = (e) => {
+        var _el$21 = _tmpl$0();
+        _el$21.$$click = (e) => {
           e.stopPropagation();
@@ -166,17 +272,18 @@ e.stopImmediatePropagation();
         };
-        insert(_el$17, () => `... ${value.length} more`);
-        effect(() => className(_el$17, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$17;
+        effect(() => className(_el$21, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$21;
       }
-    }), _el$18);
+    }), _el$22);
     effect((_p$) => {
-      var _v$ = styles().tree.valueBraces, _v$2 = styles().tree.valueBraces;
-      _v$ !== _p$.e && className(_el$16, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$18, _p$.t = _v$2);
+      var _v$3 = styles().tree.expanderContainer, _v$4 = styles().tree.valueBraces, _v$5 = styles().tree.valueBraces;
+      _v$3 !== _p$.e && className(_el$18, _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$19, _p$.t = _v$4);
+      _v$5 !== _p$.a && className(_el$22, _p$.a = _v$5);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
-    return _el$15;
+    return _el$18;
   })();
@@ -186,3 +293,4 @@ };
   value,
-  keyName
+  keyName,
+  copyable
 }) => {
@@ -194,7 +302,11 @@ const styles = useStyles();
   return (() => {
-    var _el$23 = _tmpl$8(), _el$24 = _el$23.firstChild, _el$26 = _el$24.nextSibling;
-    insert(_el$23, keyName && (() => {
-      var _el$27 = _tmpl$2(), _el$28 = _el$27.firstChild, _el$30 = _el$28.nextSibling;
-      _el$30.nextSibling;
-      _el$27.$$click = (e) => {
+    var _el$30 = _tmpl$11(), _el$31 = _el$30.firstChild, _el$34 = _el$31.nextSibling;
+    insert(_el$30, keyName && createComponent(Expander, {
+      get expanded() {
+        return expanded();
+      }
+    }), _el$31);
+    insert(_el$30, keyName && (() => {
+      var _el$35 = _tmpl$10(), _el$36 = _el$35.firstChild, _el$41 = _el$36.nextSibling, _el$37 = _el$41.nextSibling, _el$39 = _el$37.nextSibling, _el$40 = _el$39.firstChild;
+      _el$35.$$click = (e) => {
         e.stopPropagation();
@@ -204,7 +316,16 @@ e.stopImmediatePropagation();
       };
-      insert(_el$27, keyName, _el$30);
-      effect(() => className(_el$27, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-      return _el$27;
-    })(), _el$24);
-    insert(_el$23, createComponent(Show, {
+      insert(_el$35, keyName, _el$41);
+      insert(_el$39, () => keys.length, _el$40);
+      effect((_p$) => {
+        var _v$1 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$10 = styles().tree.info;
+        _v$1 !== _p$.e && className(_el$35, _p$.e = _v$1);
+        _v$10 !== _p$.t && className(_el$39, _p$.t = _v$10);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$35;
+    })(), _el$31);
+    insert(_el$30, createComponent(Show, {
       get when() {
@@ -214,3 +335,4 @@ return expanded();
       get children() {
-        return createComponent(For, {
+        var _el$32 = _tmpl$3();
+        insert(_el$32, createComponent(For, {
           each: keys,
@@ -222,8 +344,11 @@ children: (k) => createComponent(JsonValue, {
             keyName: k,
-            isLastKey: lastKeyName === k
+            isLastKey: lastKeyName === k,
+            copyable
           })
-        });
+        }));
+        effect(() => className(_el$32, styles().tree.expandedLine(Boolean(keyName))));
+        return _el$32;
       }
-    }), _el$26);
-    insert(_el$23, createComponent(Show, {
+    }), _el$34);
+    insert(_el$30, createComponent(Show, {
       get when() {
@@ -233,4 +358,4 @@ return !expanded();
       get children() {
-        var _el$25 = _tmpl$();
-        _el$25.$$click = (e) => {
+        var _el$33 = _tmpl$0();
+        _el$33.$$click = (e) => {
           e.stopPropagation();
@@ -240,17 +365,18 @@ e.stopImmediatePropagation();
         };
-        insert(_el$25, () => `... ${keys.length} more`);
-        effect(() => className(_el$25, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$25;
+        effect(() => className(_el$33, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$33;
       }
-    }), _el$26);
+    }), _el$34);
     effect((_p$) => {
-      var _v$3 = styles().tree.valueBraces, _v$4 = styles().tree.valueBraces;
-      _v$3 !== _p$.e && className(_el$24, _p$.e = _v$3);
-      _v$4 !== _p$.t && className(_el$26, _p$.t = _v$4);
+      var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces, _v$0 = styles().tree.valueBraces;
+      _v$8 !== _p$.e && className(_el$30, _p$.e = _v$8);
+      _v$9 !== _p$.t && className(_el$31, _p$.t = _v$9);
+      _v$0 !== _p$.a && className(_el$34, _p$.a = _v$0);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
-    return _el$23;
+    return _el$30;
   })();
@@ -257,0 +383,0 @@ };

dist/esm/components/tree.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Show, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\n\nexport function JsonTree(props: { value: any }) {\n  return <JsonValue isRoot value={props.value} />\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return <ArrayValue keyName={keyName} value={value} />\n        }\n        if (typeof value === 'object') {\n          return <ObjectValue keyName={keyName} value={value} />\n        }\n        return <span />\n      })()}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n}: {\n  value: Array<any>\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span>\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <For each={value}>\n          {(item, i) => {\n            const isLastKey = i() === value.length - 1\n            return (\n              <>\n                <JsonValue value={item} isLastKey={isLastKey} />\n              </>\n            )\n          }}\n        </For>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`... ${value.length} more`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n}: {\n  value: Record<string, any>\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  return (\n    <span>\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <For each={keys}>\n          {(k) => (\n            <>\n              <JsonValue\n                value={value[k]}\n                keyName={k}\n                isLastKey={lastKeyName === k}\n              />\n            </>\n          )}\n        </For>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`... ${keys.length} more`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_tmpl$6","valueContainer","expanded","setExpanded","createSignal","_el$15","_tmpl$7","_el$16","_el$18","_el$19","_el$20","_el$22","$$click","e","stopPropagation","stopImmediatePropagation","clsx","collapsible","Show","when","children","For","each","item","i","length","_el$17","_p$","_v$","valueBraces","_v$2","t","keys","Object","lastKeyName","_el$23","_tmpl$8","_el$24","_el$26","_el$27","_el$28","_el$30","k","_el$25","_v$3","_v$4","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\nexport function JsonTree(props: { value: any; copyable?: boolean }) {\n  return <JsonValue isRoot value={props.value} copyable={props.copyable} />\n}\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean }) => {\n  const styles = useStyles()\n  return (\n    <span\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey, copyable } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <ArrayValue copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        return <span />\n      })()}\n      {copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={value} />\n        </div>\n      )}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n  copyable,\n}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander expanded={expanded()} />\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{value.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={value}>\n            {(item, i) => {\n              const isLastKey = i() === value.length - 1\n              return (\n                <JsonValue\n                  copyable={copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n  copyable,\n}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {keyName && <Expander expanded={expanded()} />}\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={copyable}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","CopyButton","styles","useStyles","copyState","setCopyState","createSignal","_el$","_tmpl$","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","undefined","_$insert","Switch","children","Match","when","Copier","CopiedCopier","theme","ErrorCopier","_$effect","_p$","_v$","tree","actionButton","_v$2","e","_$className","t","_$setAttribute","Expander","_el$2","_tmpl$2","clsx","expander","css","expanded","keyName","isLastKey","_el$3","_tmpl$3","_c$","_$memo","Array","isArray","_el$4","_tmpl$4","_el$5","firstChild","_el$7","nextSibling","valueKey","_el$8","_tmpl$5","_el$9","_el$1","valueString","_el$10","valueNumber","_el$11","String","valueBoolean","_el$12","_tmpl$6","valueNull","_el$13","_tmpl$7","_el$14","valueFunction","ArrayValue","ObjectValue","_el$16","_tmpl$8","actions","_tmpl$9","valueContainer","setExpanded","_el$18","_tmpl$1","_el$19","_el$22","_el$23","_tmpl$10","_el$24","_el$29","_el$25","_el$27","_el$28","$$click","stopPropagation","stopImmediatePropagation","length","_v$6","collapsible","_v$7","info","Show","_el$20","For","each","item","i","expandedLine","Boolean","_el$21","_tmpl$0","_v$3","expanderContainer","_v$4","valueBraces","_v$5","a","keys","Object","lastKeyName","_el$30","_tmpl$11","_el$31","_el$34","_el$35","_el$36","_el$41","_el$37","_el$39","_el$40","_v$1","_v$10","_el$32","k","_el$33","_v$8","_v$9","_v$0","_$delegateEvents"],"mappings":"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"}

dist/esm/index.d.ts

@@ -10,1 +10,2 @@ export { Checkbox } from './components/checkbox.js';
 export { Section, SectionTitle, SectionDescription, SectionIcon, } from './components/section.js';
+export { Header, HeaderLogo } from './components/header.js';

dist/esm/index.js

@@ -10,5 +10,8 @@ import { Checkbox } from "./components/checkbox.js";
 import { Section, SectionDescription, SectionIcon, SectionTitle } from "./components/section.js";
+import { Header, HeaderLogo } from "./components/header.js";
 export {
   Button,
   Checkbox,
+  Header,
+  HeaderLogo,
   Input,
@@ -15,0 +18,0 @@ JsonTree,

dist/esm/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

dist/esm/styles/tokens.js

@@ -155,6 +155,12 @@ const tokens = {
       xs: "calc(var(--tsrd-font-size) * 0.75)",
-      sm: "calc(var(--tsrd-font-size) * 0.875)"
+      sm: "calc(var(--tsrd-font-size) * 0.875)",
+      md: "var(--tsrd-font-size)"
     },
+    lineHeight: {
+      xs: "calc(var(--tsrd-font-size) * 1)"
+    },
     weight: {
-      medium: "500"
+      medium: "500",
+      semibold: "600",
+      bold: "700"
     },
@@ -168,2 +174,3 @@ fontFamily: {
     radius: {
+      xs: "calc(var(--tsrd-font-size) * 0.125)",
       sm: "calc(var(--tsrd-font-size) * 0.25)",
@@ -177,2 +184,5 @@ full: "9999px"
     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)",
     4: "calc(var(--tsrd-font-size) * 1)",
@@ -179,0 +189,0 @@ 4.5: "calc(var(--tsrd-font-size) * 1.125)",

dist/esm/styles/tokens.js.map

@@ -1,1 +0,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":"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"}
+{"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,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,KAAK;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EACP;AAAA,EAEF,OAAO;AAAA,IASL,IAAI;AAAA,EAGN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAWN;AAAA,IACA,YAAY;AAAA,MAGV,IAAI;AAAA,IAaN;AAAA,IACA,QAAQ;AAAA,MAKN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,IAGR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MAEN,IAAI;AAAA,MACJ,IAAI;AAAA,MAMJ,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAGJ,KAAK;AAAA,IACL,GAAG;AAAA,IACH,KAAK;AAAA,IACL,GAAG;AAAA,IACH,KAAK;AAAA,IACL,GAAG;AAAA,IAEH,GAAG;AAAA,IACH,KAAK;AAAA,IAIL,KAAK;AAAA,IAML,IAAI;AAAA,EAkBN;AAiCF;"}

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

 import { tokens } from './tokens.js';
 import { ButtonVariant } from '../components/button.js';
+import * as goober from 'goober';
+export declare const css: typeof goober.css;
 export declare function useStyles(): import('solid-js').Accessor<{
@@ -32,3 +34,9 @@ logo: string;
     tree: {
+        info: string;
+        actionButton: string;
+        expanderContainer: string;
+        expander: string;
+        expandedLine: (hasBorder: boolean) => string;
         collapsible: string;
+        actions: string;
         valueCollapsed: string;
@@ -44,2 +52,9 @@ valueFunction: string;
     };
+    header: {
+        row: string;
+        logoAndToggleContainer: string;
+        logo: string;
+        tanstackLogo: string;
+        flavorLogo: (flavorLight: string, flavorDark: string) => string;
+    };
     section: {
@@ -46,0 +61,0 @@ main: string;

dist/esm/styles/use-styles.js

@@ -48,6 +48,6 @@ import * as goober from "goober";
 };
+const css = goober.css;
 const stylesFactory = (theme = "dark") => {
-  const { colors, font, size, alpha } = tokens;
+  const { colors, font, size, alpha, border } = tokens;
   const { fontFamily } = font;
-  const css = goober.css;
   const t = (light, dark) => theme === "light" ? light : dark;
@@ -348,2 +348,58 @@ return {
     tree: {
+      info: css`
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${font.size.xs};
+        margin-right: ${size[1]};
+        /* outline: 1px solid ${colors.yellow[400]}; */
+      `,
+      actionButton: css`
+        background-color: transparent;
+        color: ${t(colors.gray[500], colors.gray[500])};
+        border: none;
+        display: inline-flex;
+        padding: 0px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        width: ${size[3]};
+        height: ${size[3]};
+        position: relative;
+        z-index: 1;
+
+        &:hover svg {
+          color: ${t(colors.gray[600], colors.gray[400])};
+        }
+
+        &:focus-visible {
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+          outline-offset: 2px;
+        }
+      `,
+      expanderContainer: css`
+        position: relative;
+      `,
+      expander: css`
+        position: absolute;
+        left: -16px;
+        top: 3px;
+        & path {
+          stroke: ${colors.blue[300]};
+        }
+        & svg {
+          width: ${size[3]};
+          height: ${size[3]};
+        }
+
+        display: inline-flex;
+        align-items: center;
+        transition: all 0.1s ease;
+        /* outline: 1px solid ${colors.blue[400]}; */
+      `,
+      expandedLine: (hasBorder) => css`
+        display: block;
+        padding-left: 0.75rem;
+        margin-left: -0.7rem;
+        ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ""}
+      `,
       collapsible: css`
@@ -358,2 +414,12 @@ cursor: pointer;
       `,
+      actions: css`
+        display: inline-flex;
+        margin-left: ${size[2]};
+        gap: ${size[2]};
+        align-items: center;
+        & svg {
+          height: 12px;
+          width: 12px;
+        }
+      `,
       valueCollapsed: css`
@@ -387,4 +453,70 @@ color: ${colors.gray[400]};
         margin-left: ${isRoot ? "0" : "1rem"};
+
+        &:not(:hover) .actions {
+          display: none;
+        }
+
+        &:hover .actions {
+          display: inline-flex;
+        }
       `
     },
+    header: {
+      row: css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: ${tokens.size[2]} ${tokens.size[2.5]};
+        gap: ${tokens.size[2.5]};
+        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;
+        align-items: center;
+      `,
+      logoAndToggleContainer: css`
+        display: flex;
+        gap: ${tokens.size[3]};
+        align-items: center;
+        & > button {
+          padding: 0;
+          background: transparent;
+          border: none;
+          display: flex;
+          gap: ${size[0.5]};
+          flex-direction: column;
+        }
+      `,
+      logo: css`
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        background-color: transparent;
+        border: none;
+        gap: ${tokens.size[0.5]};
+        padding: 0px;
+        &:hover {
+          opacity: 0.7;
+        }
+        &:focus-visible {
+          outline-offset: 4px;
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+        }
+      `,
+      tanstackLogo: css`
+        font-size: ${font.size.md};
+        font-weight: ${font.weight.bold};
+        line-height: ${font.lineHeight.xs};
+        white-space: nowrap;
+        color: ${t(colors.gray[600], colors.gray[300])};
+      `,
+      flavorLogo: (flavorLight, flavorDark) => css`
+        font-weight: ${font.weight.semibold};
+        font-size: ${font.size.xs};
+        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});
+        background-clip: text;
+        -webkit-background-clip: text;
+        line-height: 1;
+        -webkit-text-fill-color: transparent;
+        white-space: nowrap;
+      `
+    },
     section: {
@@ -446,4 +578,5 @@ main: css`
 export {
+  css,
   useStyles
 };
 //# sourceMappingURL=use-styles.js.map

dist/esm/styles/use-styles.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.purple[500],\n    hover: tokens.colors.purple[600],\n    active: tokens.colors.purple[700],\n    text: '#fff',\n    border: tokens.colors.purple[500],\n  },\n  secondary: {\n    bg: tokens.colors.gray[800],\n    hover: tokens.colors.gray[700],\n    active: tokens.colors.gray[600],\n    text: tokens.colors.gray[100],\n    border: tokens.colors.gray[700],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nconst stylesFactory = (theme: 'light' | 'dark' = 'dark') => {\n  const { colors, font, size, alpha } = tokens\n  const { fontFamily } = font\n  const css = goober.css\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${colors.gray[500]};\n      }\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${colors.darkGray[800]};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${colors.gray[700]};\n      border-radius: 0.375rem;\n      background-color: ${colors.darkGray[800]};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${colors.purple[400]};\n      }\n\n      &:checked {\n        background-color: ${colors.purple[500]};\n        border-color: ${colors.purple[500]};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${colors.gray[100]};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.2rem;\n        padding: 0.2rem 0.6rem;\n        cursor: pointer;\n        transition:\n          background 0.2s,\n          color 0.2s,\n          border 0.2s,\n          box-shadow 0.2s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: transparent;\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: ${v.bg};\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n              border-color: ${v.hover};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n              border-color: ${v.active};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${v.bg};\n          color: ${v.text};\n          border-color: ${v.border};\n          &:hover {\n            background: ${v.hover};\n            border-color: ${v.hover};\n          }\n          &:active {\n            background: ${v.active};\n            border-color: ${v.active};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${tokens.colors[color][500]};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${colors.darkGray[700]};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      valueCollapsed: css`\n        color: ${colors.gray[400]};\n      `,\n      valueFunction: css`\n        color: ${colors.cyan[400]};\n      `,\n      valueString: css`\n        color: ${colors.green[400]};\n      `,\n      valueNumber: css`\n        color: ${colors.yellow[400]};\n      `,\n      valueBoolean: css`\n        color: ${colors.pink[400]};\n      `,\n      valueNull: css`\n        color: ${colors.gray[400]};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${colors.blue[300]};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 2rem;\n        padding: 1.5rem;\n        background-color: ${colors.darkGray[800]};\n        border: 1px solid ${colors.gray[700]};\n        border-radius: 0.75rem;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      `,\n      title: css`\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: ${colors.gray[100]};\n        margin: 0 0 1rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${colors.gray[700]};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 20px;\n        width: 20px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${colors.purple[400]};\n      `,\n      description: css`\n        color: ${colors.gray[400]};\n        font-size: 0.875rem;\n        margin: 0 0 1.5rem 0;\n        line-height: 1.5;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: css`\n        padding: 0;\n        background: ${colors.darkGray[700]};\n        overflow-y: auto;\n        height: 100%;\n      `,\n      withPadding: css`\n        padding: ${tokens.size[4]};\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.purple[500],\n    hover: tokens.colors.purple[600],\n    active: tokens.colors.purple[700],\n    text: '#fff',\n    border: tokens.colors.purple[500],\n  },\n  secondary: {\n    bg: tokens.colors.gray[800],\n    hover: tokens.colors.gray[700],\n    active: tokens.colors.gray[600],\n    text: tokens.colors.gray[100],\n    border: tokens.colors.gray[700],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: 'light' | 'dark' = 'dark') => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${colors.gray[500]};\n      }\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${colors.darkGray[800]};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${colors.gray[700]};\n      border-radius: 0.375rem;\n      background-color: ${colors.darkGray[800]};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${colors.purple[400]};\n      }\n\n      &:checked {\n        background-color: ${colors.purple[500]};\n        border-color: ${colors.purple[500]};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${colors.gray[100]};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.2rem;\n        padding: 0.2rem 0.6rem;\n        cursor: pointer;\n        transition:\n          background 0.2s,\n          color 0.2s,\n          border 0.2s,\n          box-shadow 0.2s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: transparent;\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: ${v.bg};\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n              border-color: ${v.hover};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n              border-color: ${v.active};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${v.bg};\n          color: ${v.text};\n          border-color: ${v.border};\n          &:hover {\n            background: ${v.hover};\n            border-color: ${v.hover};\n          }\n          &:active {\n            background: ${v.active};\n            border-color: ${v.active};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${tokens.colors[color][500]};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      info: css`\n        color: ${t(colors.gray[500], colors.gray[500])};\n        font-size: ${font.size.xs};\n        margin-right: ${size[1]};\n        /* outline: 1px solid ${colors.yellow[400]}; */\n      `,\n      actionButton: css`\n        background-color: transparent;\n        color: ${t(colors.gray[500], colors.gray[500])};\n        border: none;\n        display: inline-flex;\n        padding: 0px;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        width: ${size[3]};\n        height: ${size[3]};\n        position: relative;\n        z-index: 1;\n\n        &:hover svg {\n          color: ${t(colors.gray[600], colors.gray[400])};\n        }\n\n        &:focus-visible {\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${colors.blue[800]};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${colors.blue[300]};\n        }\n        & svg {\n          width: ${size[3]};\n          height: ${size[3]};\n        }\n\n        display: inline-flex;\n        align-items: center;\n        transition: all 0.1s ease;\n        /* outline: 1px solid ${colors.blue[400]}; */\n      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${colors.darkGray[700]};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      actions: css`\n        display: inline-flex;\n        margin-left: ${size[2]};\n        gap: ${size[2]};\n        align-items: center;\n        & svg {\n          height: 12px;\n          width: 12px;\n        }\n      `,\n      valueCollapsed: css`\n        color: ${colors.gray[400]};\n      `,\n      valueFunction: css`\n        color: ${colors.cyan[400]};\n      `,\n      valueString: css`\n        color: ${colors.green[400]};\n      `,\n      valueNumber: css`\n        color: ${colors.yellow[400]};\n      `,\n      valueBoolean: css`\n        color: ${colors.pink[400]};\n      `,\n      valueNull: css`\n        color: ${colors.gray[400]};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${colors.blue[300]};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n\n        &:not(:hover) .actions {\n          display: none;\n        }\n\n        &:hover .actions {\n          display: inline-flex;\n        }\n      `,\n    },\n    header: {\n      row: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: ${tokens.size[2]} ${tokens.size[2.5]};\n        gap: ${tokens.size[2.5]};\n        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n        align-items: center;\n      `,\n      logoAndToggleContainer: css`\n        display: flex;\n        gap: ${tokens.size[3]};\n        align-items: center;\n        & > button {\n          padding: 0;\n          background: transparent;\n          border: none;\n          display: flex;\n          gap: ${size[0.5]};\n          flex-direction: column;\n        }\n      `,\n      logo: css`\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        background-color: transparent;\n        border: none;\n        gap: ${tokens.size[0.5]};\n        padding: 0px;\n        &:hover {\n          opacity: 0.7;\n        }\n        &:focus-visible {\n          outline-offset: 4px;\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      tanstackLogo: css`\n        font-size: ${font.size.md};\n        font-weight: ${font.weight.bold};\n        line-height: ${font.lineHeight.xs};\n        white-space: nowrap;\n        color: ${t(colors.gray[600], colors.gray[300])};\n      `,\n      flavorLogo: (flavorLight: string, flavorDark: string) => css`\n        font-weight: ${font.weight.semibold};\n        font-size: ${font.size.xs};\n        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n        background-clip: text;\n        -webkit-background-clip: text;\n        line-height: 1;\n        -webkit-text-fill-color: transparent;\n        white-space: nowrap;\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 2rem;\n        padding: 1.5rem;\n        background-color: ${colors.darkGray[800]};\n        border: 1px solid ${colors.gray[700]};\n        border-radius: 0.75rem;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      `,\n      title: css`\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: ${colors.gray[100]};\n        margin: 0 0 1rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${colors.gray[700]};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 20px;\n        width: 20px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${colors.purple[400]};\n      `,\n      description: css`\n        color: ${colors.gray[400]};\n        font-size: 0.875rem;\n        margin: 0 0 1.5rem 0;\n        line-height: 1.5;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: css`\n        padding: 0;\n        background: ${colors.darkGray[700]};\n        overflow-y: auto;\n        height: 100%;\n      `,\n      withPadding: css`\n        padding: ${tokens.size[4]};\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}

package.json

 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
@@ -22,3 +22,2 @@ "author": "Tanner Linsley",
   "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",
@@ -30,8 +29,10 @@ "exports": {
         "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
       }
     },
+    "./icons": {
+      "import": {
+        "types": "./dist/esm/icons.d.ts",
+        "default": "./dist/esm/icons.js"
+      }
+    },
     "./package.json": "./package.json"
@@ -38,0 +39,0 @@ },

src/components/tree.tsx

@@ -1,9 +0,100 @@
-import { For, Show, createSignal } from 'solid-js'
+import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import clsx from 'clsx'
-import { useStyles } from '../styles/use-styles'
+import { css, useStyles } from '../styles/use-styles'
+import { CopiedCopier, Copier, ErrorCopier } from './icons'
 
-export function JsonTree(props: { value: any }) {
-  return <JsonValue isRoot value={props.value} />
+export function JsonTree(props: { value: any; copyable?: boolean }) {
+  return <JsonValue isRoot value={props.value} copyable={props.copyable} />
 }
+type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
 
+const CopyButton = (props: { value: unknown }) => {
+  const styles = useStyles()
+  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
+
+  return (
+    <button
+      class={styles().tree.actionButton}
+      title="Copy object to clipboard"
+      aria-label={`${
+        copyState() === 'NoCopy'
+          ? 'Copy object to clipboard'
+          : copyState() === 'SuccessCopy'
+            ? 'Object copied to clipboard'
+            : 'Error copying object to clipboard'
+      }`}
+      onClick={
+        copyState() === 'NoCopy'
+          ? () => {
+              navigator.clipboard
+                .writeText(JSON.stringify(props.value, null, 2))
+                .then(
+                  () => {
+                    setCopyState('SuccessCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                  (err) => {
+                    console.error('Failed to copy: ', err)
+                    setCopyState('ErrorCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                )
+            }
+          : undefined
+      }
+    >
+      <Switch>
+        <Match when={copyState() === 'NoCopy'}>
+          <Copier />
+        </Match>
+        <Match when={copyState() === 'SuccessCopy'}>
+          <CopiedCopier theme={'dark'} />
+        </Match>
+        <Match when={copyState() === 'ErrorCopy'}>
+          <ErrorCopier />
+        </Match>
+      </Switch>
+    </button>
+  )
+}
+
+const Expander = (props: { expanded: boolean }) => {
+  const styles = useStyles()
+  return (
+    <span
+      class={clsx(
+        styles().tree.expander,
+        css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `,
+        props.expanded &&
+          css`
+            & svg {
+              top: -1px;
+            }
+          `,
+      )}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12L10 8L6 4"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  )
+}
+
 function JsonValue(props: {
@@ -14,4 +105,5 @@ value: any
   isLastKey?: boolean
+  copyable?: boolean
 }) {
-  const { value, keyName, isRoot = false, isLastKey } = props
+  const { value, keyName, isRoot = false, isLastKey, copyable } = props
   const styles = useStyles()
@@ -48,9 +140,18 @@
         if (Array.isArray(value)) {
-          return <ArrayValue keyName={keyName} value={value} />
+          return (
+            <ArrayValue copyable={copyable} keyName={keyName} value={value} />
+          )
         }
         if (typeof value === 'object') {
-          return <ObjectValue keyName={keyName} value={value} />
+          return (
+            <ObjectValue copyable={copyable} keyName={keyName} value={value} />
+          )
         }
         return <span />
       })()}
+      {copyable && (
+        <div class={clsx(styles().tree.actions, 'actions')}>
+          <CopyButton value={value} />
+        </div>
+      )}
       {isLastKey || isRoot ? '' : <span>,</span>}
@@ -64,4 +165,6 @@ </span>
   keyName,
+  copyable,
 }: {
   value: Array<any>
+  copyable?: boolean
   keyName?: string
@@ -72,3 +175,4 @@ }) => {
   return (
-    <span>
+    <span class={styles().tree.expanderContainer}>
+      <Expander expanded={expanded()} />
       {keyName && (
@@ -84,2 +188,3 @@ <span
           &quot;{keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{value.length} items</span>
         </span>
@@ -89,12 +194,16 @@ )}
       <Show when={expanded()}>
-        <For each={value}>
-          {(item, i) => {
-            const isLastKey = i() === value.length - 1
-            return (
-              <>
-                <JsonValue value={item} isLastKey={isLastKey} />
-              </>
-            )
-          }}
-        </For>
+        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+          <For each={value}>
+            {(item, i) => {
+              const isLastKey = i() === value.length - 1
+              return (
+                <JsonValue
+                  copyable={copyable}
+                  value={item}
+                  isLastKey={isLastKey}
+                />
+              )
+            }}
+          </For>
+        </span>
       </Show>
@@ -110,3 +219,3 @@ <Show when={!expanded()}>
         >
-          {`... ${value.length} more`}
+          {`...`}
         </span>
@@ -122,5 +231,7 @@ </Show>
   keyName,
+  copyable,
 }: {
   value: Record<string, any>
   keyName?: string
+  copyable?: boolean
 }) => {
@@ -133,3 +244,4 @@ const styles = useStyles()
   return (
-    <span>
+    <span class={styles().tree.expanderContainer}>
+      {keyName && <Expander expanded={expanded()} />}
       {keyName && (
@@ -145,2 +257,3 @@ <span
           &quot;{keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{keys.length} items</span>
         </span>
@@ -150,13 +263,16 @@ )}
       <Show when={expanded()}>
-        <For each={keys}>
-          {(k) => (
-            <>
-              <JsonValue
-                value={value[k]}
-                keyName={k}
-                isLastKey={lastKeyName === k}
-              />
-            </>
-          )}
-        </For>
+        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+          <For each={keys}>
+            {(k) => (
+              <>
+                <JsonValue
+                  value={value[k]}
+                  keyName={k}
+                  isLastKey={lastKeyName === k}
+                  copyable={copyable}
+                />
+              </>
+            )}
+          </For>
+        </span>
       </Show>
@@ -172,3 +288,3 @@ <Show when={!expanded()}>
         >
-          {`... ${keys.length} more`}
+          {`...`}
         </span>
@@ -175,0 +291,0 @@ </Show>

src/index.ts

@@ -15,1 +15,2 @@ export { Checkbox } from './components/checkbox'
 } from './components/section'
+export { Header, HeaderLogo } from './components/header'

src/styles/use-styles.ts

@@ -53,6 +53,7 @@ import * as goober from 'goober'
 }
+export const css = goober.css
 const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
-  const { colors, font, size, alpha } = tokens
+  const { colors, font, size, alpha, border } = tokens
   const { fontFamily } = font
-  const css = goober.css
+
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
@@ -356,2 +357,58 @@
     tree: {
+      info: css`
+        color: ${t(colors.gray[500], colors.gray[500])};
+        font-size: ${font.size.xs};
+        margin-right: ${size[1]};
+        /* outline: 1px solid ${colors.yellow[400]}; */
+      `,
+      actionButton: css`
+        background-color: transparent;
+        color: ${t(colors.gray[500], colors.gray[500])};
+        border: none;
+        display: inline-flex;
+        padding: 0px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        width: ${size[3]};
+        height: ${size[3]};
+        position: relative;
+        z-index: 1;
+
+        &:hover svg {
+          color: ${t(colors.gray[600], colors.gray[400])};
+        }
+
+        &:focus-visible {
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+          outline-offset: 2px;
+        }
+      `,
+      expanderContainer: css`
+        position: relative;
+      `,
+      expander: css`
+        position: absolute;
+        left: -16px;
+        top: 3px;
+        & path {
+          stroke: ${colors.blue[300]};
+        }
+        & svg {
+          width: ${size[3]};
+          height: ${size[3]};
+        }
+
+        display: inline-flex;
+        align-items: center;
+        transition: all 0.1s ease;
+        /* outline: 1px solid ${colors.blue[400]}; */
+      `,
+      expandedLine: (hasBorder: boolean) => css`
+        display: block;
+        padding-left: 0.75rem;
+        margin-left: -0.7rem;
+        ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ''}
+      `,
       collapsible: css`
@@ -366,2 +423,12 @@ cursor: pointer;
       `,
+      actions: css`
+        display: inline-flex;
+        margin-left: ${size[2]};
+        gap: ${size[2]};
+        align-items: center;
+        & svg {
+          height: 12px;
+          width: 12px;
+        }
+      `,
       valueCollapsed: css`
@@ -395,4 +462,70 @@ color: ${colors.gray[400]};
         margin-left: ${isRoot ? '0' : '1rem'};
+
+        &:not(:hover) .actions {
+          display: none;
+        }
+
+        &:hover .actions {
+          display: inline-flex;
+        }
       `,
     },
+    header: {
+      row: css`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: ${tokens.size[2]} ${tokens.size[2.5]};
+        gap: ${tokens.size[2.5]};
+        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;
+        align-items: center;
+      `,
+      logoAndToggleContainer: css`
+        display: flex;
+        gap: ${tokens.size[3]};
+        align-items: center;
+        & > button {
+          padding: 0;
+          background: transparent;
+          border: none;
+          display: flex;
+          gap: ${size[0.5]};
+          flex-direction: column;
+        }
+      `,
+      logo: css`
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        background-color: transparent;
+        border: none;
+        gap: ${tokens.size[0.5]};
+        padding: 0px;
+        &:hover {
+          opacity: 0.7;
+        }
+        &:focus-visible {
+          outline-offset: 4px;
+          border-radius: ${border.radius.xs};
+          outline: 2px solid ${colors.blue[800]};
+        }
+      `,
+      tanstackLogo: css`
+        font-size: ${font.size.md};
+        font-weight: ${font.weight.bold};
+        line-height: ${font.lineHeight.xs};
+        white-space: nowrap;
+        color: ${t(colors.gray[600], colors.gray[300])};
+      `,
+      flavorLogo: (flavorLight: string, flavorDark: string) => css`
+        font-weight: ${font.weight.semibold};
+        font-size: ${font.size.xs};
+        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});
+        background-clip: text;
+        -webkit-background-clip: text;
+        line-height: 1;
+        -webkit-text-fill-color: transparent;
+        white-space: nowrap;
+      `,
+    },
     section: {
@@ -399,0 +532,0 @@ main: css`

dist/cjs/components/button.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const clsx = require("clsx");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<button>`);
-function Button(props) {
-  const styles = useStyles.useStyles();
-  const [local, rest] = solidJs.splitProps(props, ["variant", "outline", "ghost", "children", "className"]);
-  const variant = local.variant || "primary";
-  const classes = clsx(styles().button.base, styles().button.variant(variant, local.outline, local.ghost), local.className);
-  return (() => {
-    var _el$ = _tmpl$();
-    web.spread(_el$, web.mergeProps(rest, {
-      "class": classes
-    }), false, true);
-    web.insert(_el$, () => local.children);
-    return _el$;
-  })();
-}
-exports.Button = Button;
-//# sourceMappingURL=button.cjs.map

dist/cjs/components/button.cjs.map

-{"version":3,"file":"button.cjs","sources":["../../../src/components/button.tsx"],"sourcesContent":["import { splitProps } from 'solid-js'\nimport clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js'\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'success'\n  | 'info'\n  | 'warning'\ntype ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: ButtonVariant\n  outline?: boolean\n  ghost?: boolean\n  children?: any\n  className?: string\n}\n\nexport function Button(props: ButtonProps) {\n  const styles = useStyles()\n  const [local, rest] = splitProps(props, [\n    'variant',\n    'outline',\n    'ghost',\n    'children',\n    'className',\n  ])\n  const variant = local.variant || 'primary'\n  const classes = clsx(\n    styles().button.base,\n    styles().button.variant(variant, local.outline, local.ghost),\n    local.className,\n  )\n\n  return (\n    <button {...rest} class={classes}>\n      {local.children}\n    </button>\n  )\n}\n"],"names":["Button","props","styles","useStyles","local","rest","splitProps","variant","classes","clsx","button","base","outline","ghost","className","_el$","_tmpl$","_$spread","_$mergeProps","_$insert","children"],"mappings":";;;;;;;AAoBO,SAASA,OAAOC,OAAoB;AACzC,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM,CAACC,OAAOC,IAAI,IAAIC,QAAAA,WAAWL,OAAO,CACtC,WACA,WACA,SACA,YACA,WAAW,CACZ;AACD,QAAMM,UAAUH,MAAMG,WAAW;AACjC,QAAMC,UAAUC,KACdP,OAAAA,EAASQ,OAAOC,MAChBT,SAASQ,OAAOH,QAAQA,SAASH,MAAMQ,SAASR,MAAMS,KAAK,GAC3DT,MAAMU,SACR;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,eAAAF,MAAAG,IAAAA,WACcb,MAAI;AAAA,MAAA,SAASG;AAAAA,IAAAA,CAAO,GAAA,OAAA,IAAA;AAAAW,QAAAA,OAAAJ,MAAA,MAC7BX,MAAMgB,QAAQ;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAGrB;;"}

dist/cjs/components/button.d.cts

-import { JSX } from 'solid-js';
-export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'info' | 'warning';
-type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: ButtonVariant;
-    outline?: boolean;
-    ghost?: boolean;
-    children?: any;
-    className?: string;
-};
-export declare function Button(props: ButtonProps): JSX.Element;
-export {};

dist/cjs/components/checkbox.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><label><input type=checkbox><div>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span>`);
-function Checkbox(props) {
-  const styles = useStyles.useStyles();
-  const [isChecked, setIsChecked] = solidJs.createSignal(props.checked || false);
-  const handleChange = (e) => {
-    const checked = e.target.checked;
-    setIsChecked(checked);
-    props.onChange?.(checked);
-  };
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
-    _el$3.$$input = handleChange;
-    web.insert(_el$4, (() => {
-      var _c$ = web.memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$5 = _tmpl$2();
-        web.insert(_el$5, () => props.label);
-        web.effect(() => web.className(_el$5, styles().checkboxLabel));
-        return _el$5;
-      })();
-    })(), null);
-    web.insert(_el$4, (() => {
-      var _c$2 = web.memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$6 = _tmpl$2();
-        web.insert(_el$6, () => props.description);
-        web.effect(() => web.className(_el$6, styles().checkboxDescription));
-        return _el$6;
-      })();
-    })(), null);
-    web.effect((_p$) => {
-      var _v$ = styles().checkboxContainer, _v$2 = styles().checkboxWrapper, _v$3 = styles().checkbox, _v$4 = styles().checkboxLabelContainer;
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && web.className(_el$4, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    web.effect(() => _el$3.checked = isChecked());
-    return _el$;
-  })();
-}
-web.delegateEvents(["input"]);
-exports.Checkbox = Checkbox;
-//# sourceMappingURL=checkbox.cjs.map

dist/cjs/components/checkbox.cjs.map

-{"version":3,"file":"checkbox.cjs","sources":["../../../src/components/checkbox.tsx"],"sourcesContent":["import { createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ninterface CheckboxProps {\n  label?: string\n  checked?: boolean\n  onChange?: (checked: boolean) => void\n  description?: string\n}\n\nexport function Checkbox(props: CheckboxProps) {\n  const styles = useStyles()\n  const [isChecked, setIsChecked] = createSignal(props.checked || false)\n\n  const handleChange = (e: Event) => {\n    const checked = (e.target as HTMLInputElement).checked\n    setIsChecked(checked)\n    props.onChange?.(checked)\n  }\n\n  return (\n    <div class={styles().checkboxContainer}>\n      <label class={styles().checkboxWrapper}>\n        <input\n          type=\"checkbox\"\n          checked={isChecked()}\n          class={styles().checkbox}\n          onInput={handleChange}\n        />\n        <div class={styles().checkboxLabelContainer}>\n          {props.label && (\n            <span class={styles().checkboxLabel}>{props.label}</span>\n          )}\n          {props.description && (\n            <span class={styles().checkboxDescription}>\n              {props.description}\n            </span>\n          )}\n        </div>\n      </label>\n    </div>\n  )\n}\n"],"names":["Checkbox","props","styles","useStyles","isChecked","setIsChecked","createSignal","checked","handleChange","e","target","onChange","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","$$input","_$insert","_c$","_$memo","label","_el$5","_tmpl$2","_$effect","_$className","checkboxLabel","_c$2","description","_el$6","checkboxDescription","_p$","_v$","checkboxContainer","_v$2","checkboxWrapper","_v$3","checkbox","_v$4","checkboxLabelContainer","t","a","o","undefined","_$delegateEvents"],"mappings":";;;;;;AAUO,SAASA,SAASC,OAAsB;AAC7C,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,QAAAA,aAAaL,MAAMM,WAAW,KAAK;AAErE,QAAMC,eAAeA,CAACC,MAAa;AACjC,UAAMF,UAAWE,EAAEC,OAA4BH;AAC/CF,iBAAaE,OAAO;AACpBN,UAAMU,WAAWJ,OAAO;AAAA,EAC1B;AAEA,UAAA,MAAA;AAAA,QAAAK,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAF,UAAAG,UAOiBX;AAAYY,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,IAAAA,KAAA,MAAA,CAAA,CAGpBrB,MAAMsB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,YAAAA,OAAAI,OAAA,MACuCvB,MAAMsB,KAAK;AAAAG,YAAAA,OAAA,MAAAC,IAAAA,UAAAH,OAApCtB,OAAAA,EAAS0B,aAAa,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAA,IAAA;AAAAJ,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,IAAAA,KAAA,MAAA,CAAA,CACArB,MAAM6B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAN,QAAAA;AAAAL,YAAAA,OAAAW,OAAA,MAEI9B,MAAM6B,WAAW;AAAAJ,YAAAA,OAAA,MAAAC,IAAAA,UAAAI,OADP7B,OAAAA,EAAS8B,mBAAmB,CAAA;AAAA,eAAAD;AAAAA,MAAA,GAAA;AAAA,IAG1C,GAAA,GAAA,IAAA;AAAAL,QAAAA,OAAAO,CAAAA,QAAA;AAAA,UAAAC,MAhBKhC,OAAAA,EAASiC,mBAAiBC,OACtBlC,OAAAA,EAASmC,iBAAeC,OAI3BpC,OAAAA,EAASqC,UAAQC,OAGdtC,SAASuC;AAAsBP,cAAAD,IAAAxB,KAAAkB,IAAAA,UAAAf,MAAAqB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAS,KAAAf,IAAAA,UAAAb,OAAAmB,IAAAS,IAAAN,IAAA;AAAAE,eAAAL,IAAAU,KAAAhB,IAAAA,UAAAX,OAAAiB,IAAAU,IAAAL,IAAA;AAAAE,eAAAP,IAAAW,KAAAjB,IAAAA,UAAAV,OAAAgB,IAAAW,IAAAJ,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAxB,GAAAoC;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAnB,QAAAA,aAAAV,MAAAT,UAJhCH,UAAAA,CAAW;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAiB9B;AAACkC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

dist/cjs/components/checkbox.d.cts

-interface CheckboxProps {
-    label?: string;
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    description?: string;
-}
-export declare function Checkbox(props: CheckboxProps): import("solid-js").JSX.Element;
-export {};

dist/cjs/components/input.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><div><input>`), _tmpl$2 = /* @__PURE__ */ web.template(`<label>`), _tmpl$3 = /* @__PURE__ */ web.template(`<p>`);
-function Input(props) {
-  const styles = useStyles.useStyles();
-  const [val, setVal] = solidJs.createSignal(props.value || "");
-  const handleChange = (e) => {
-    const value = e.target.value;
-    setVal((prev) => prev !== value ? value : prev);
-    props.onChange?.(value);
-  };
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-    web.insert(_el$2, (() => {
-      var _c$ = web.memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$4 = _tmpl$2();
-        web.insert(_el$4, () => props.label);
-        web.effect(() => web.className(_el$4, styles().inputLabel));
-        return _el$4;
-      })();
-    })(), _el$3);
-    web.insert(_el$2, (() => {
-      var _c$2 = web.memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$5 = _tmpl$3();
-        web.insert(_el$5, () => props.description);
-        web.effect(() => web.className(_el$5, styles().inputDescription));
-        return _el$5;
-      })();
-    })(), _el$3);
-    _el$3.$$input = handleChange;
-    web.effect((_p$) => {
-      var _v$ = styles().inputContainer, _v$2 = styles().inputWrapper, _v$3 = props.type || "text", _v$4 = styles().input, _v$5 = props.placeholder;
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.setAttribute(_el$3, "type", _p$.a = _v$3);
-      _v$4 !== _p$.o && web.className(_el$3, _p$.o = _v$4);
-      _v$5 !== _p$.i && web.setAttribute(_el$3, "placeholder", _p$.i = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    });
-    web.effect(() => _el$3.value = val());
-    return _el$;
-  })();
-}
-web.delegateEvents(["input"]);
-exports.Input = Input;
-//# sourceMappingURL=input.cjs.map

dist/cjs/components/input.cjs.map

-{"version":3,"file":"input.cjs","sources":["../../../src/components/input.tsx"],"sourcesContent":["import { createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ninterface InputProps {\n  label?: string\n  type?: 'text' | 'number' | 'password' | 'email'\n  value?: string\n  placeholder?: string\n  onChange?: (value: string) => void\n  description?: string\n}\n\nexport function Input(props: InputProps) {\n  const styles = useStyles()\n  const [val, setVal] = createSignal(props.value || '')\n\n  const handleChange = (e: Event) => {\n    const value = (e.target as HTMLInputElement).value\n    setVal((prev) => (prev !== value ? value : prev))\n    props.onChange?.(value)\n  }\n\n  return (\n    <div class={styles().inputContainer}>\n      <div class={styles().inputWrapper}>\n        {props.label && (\n          <label class={styles().inputLabel}>{props.label}</label>\n        )}\n        {props.description && (\n          <p class={styles().inputDescription}>{props.description}</p>\n        )}\n        <input\n          type={props.type || 'text'}\n          class={styles().input}\n          value={val()}\n          placeholder={props.placeholder}\n          onInput={handleChange}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["Input","props","styles","useStyles","val","setVal","createSignal","value","handleChange","e","target","prev","onChange","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_c$","_$memo","label","_el$4","_tmpl$2","_$effect","_$className","inputLabel","_c$2","description","_el$5","_tmpl$3","inputDescription","$$input","_p$","_v$","inputContainer","_v$2","inputWrapper","_v$3","type","_v$4","input","_v$5","placeholder","t","a","_$setAttribute","o","i","undefined","_$delegateEvents"],"mappings":";;;;;;AAYO,SAASA,MAAMC,OAAmB;AACvC,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM,CAACC,KAAKC,MAAM,IAAIC,QAAAA,aAAaL,MAAMM,SAAS,EAAE;AAEpD,QAAMC,eAAeA,CAACC,MAAa;AACjC,UAAMF,QAASE,EAAEC,OAA4BH;AAC7CF,WAAQM,CAAAA,SAAUA,SAASJ,QAAQA,QAAQI,IAAK;AAChDV,UAAMW,WAAWL,KAAK;AAAA,EACxB;AAEA,UAAA,MAAA;AAAA,QAAAM,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAE,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,IAAAA,KAAA,MAAA,CAAA,CAGOnB,MAAMoB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,YAAAA,OAAAI,OAAA,MACqCrB,MAAMoB,KAAK;AAAAG,YAAAA,OAAA,MAAAC,IAAAA,UAAAH,OAAjCpB,OAAAA,EAASwB,UAAU,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAClC,GAAA,GAAAL,KAAA;AAAAC,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,IAAAA,KAAA,MAAA,CAAA,CACAnB,MAAM2B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA;AAAAZ,YAAAA,OAAAW,OAAA,MACuC5B,MAAM2B,WAAW;AAAAJ,YAAAA,OAAA,MAAAC,IAAAA,UAAAI,OAA7C3B,OAAAA,EAAS6B,gBAAgB,CAAA;AAAA,eAAAF;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAAZ,KAAA;AAAAA,UAAAe,UAMUxB;AAAYgB,QAAAA,OAAAS,CAAAA,QAAA;AAAA,UAAAC,MAbfhC,SAASiC,gBAAcC,OACrBlC,SAASmC,cAAYC,OAQvBrC,MAAMsC,QAAQ,QAAMC,OACnBtC,SAASuC,OAAKC,OAERzC,MAAM0C;AAAWT,cAAAD,IAAAxB,KAAAgB,IAAAA,UAAAZ,MAAAoB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAW,KAAAnB,IAAAA,UAAAV,OAAAkB,IAAAW,IAAAR,IAAA;AAAAE,eAAAL,IAAAY,KAAAC,IAAAA,aAAA7B,OAAA,QAAAgB,IAAAY,IAAAP,IAAA;AAAAE,eAAAP,IAAAc,KAAAtB,IAAAA,UAAAR,OAAAgB,IAAAc,IAAAP,IAAA;AAAAE,eAAAT,IAAAe,KAAAF,IAAAA,aAAA7B,OAAA,eAAAgB,IAAAe,IAAAN,IAAA;AAAA,aAAAT;AAAAA,IAAA,GAAA;AAAA,MAAAxB,GAAAwC;AAAAA,MAAAL,GAAAK;AAAAA,MAAAJ,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAzB,QAAAA,aAAAP,MAAAV,QADvBH,IAAAA,CAAK;AAAA,WAAAS;AAAAA,EAAA,GAAA;AAOtB;AAACqC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

dist/cjs/components/input.d.cts

-interface InputProps {
-    label?: string;
-    type?: 'text' | 'number' | 'password' | 'email';
-    value?: string;
-    placeholder?: string;
-    onChange?: (value: string) => void;
-    description?: string;
-}
-export declare function Input(props: InputProps): import("solid-js").JSX.Element;
-export {};

dist/cjs/components/logo.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 634 633"viewBox="0 0 634 633"><g transform=translate(1)><linearGradient x1=-641.486 x2=-641.486 y1=856.648 y2=855.931 gradientTransform="matrix(633 0 0 -633 406377 542258)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#6bdaff></stop><stop offset=0.319 stop-color=#f9ffb5></stop><stop offset=0.706 stop-color=#ffa770></stop><stop offset=1 stop-color=#ff7373></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5 fill-rule=evenodd clip-rule=evenodd></circle><defs><filter width=454 height=396.9 x=-137.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=412 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=412 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=610.5 fill=#015064 fill-rule=evenodd stroke=#00CFE2 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=450 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=450 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=648.5 fill=#015064 fill-rule=evenodd stroke=#00A8B8 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=-137.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=-137.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=89.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=454 height=396.9 x=316.5 y=486 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=454 height=396.9 x=316.5 y=486 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><ellipse cx=543.5 cy=684.5 fill=#015064 fill-rule=evenodd stroke=#007782 stroke-width=25 clip-rule=evenodd rx=214.5 ry=186></ellipse><defs><filter width=176.9 height=129.3 x=272.2 y=308 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=176.9 height=129.3 x=272.2 y=308 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><path fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11 d="M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1"></path><linearGradient x1=-645.656 x2=-646.499 y1=854.878 y2=854.788 gradientTransform="matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ee2700></stop><stop offset=1 stop-color=#ff008e></stop></linearGradient><path fill-rule=evenodd d="M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd></path><path fill=#D8D8D8 fill-rule=evenodd stroke=#FFF stroke-linecap=round stroke-linejoin=bevel stroke-width=7 d="M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9"clip-rule=evenodd></path></g><defs><filter width=280.6 height=317.4 x=73.2 y=113.9 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=280.6 height=317.4 x=73.2 y=113.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><linearGradient x1=-646.8 x2=-646.8 y1=854.844 y2=853.844 gradientTransform="matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#a17500></stop><stop offset=1 stop-color=#5d2100></stop></linearGradient><path fill-rule=evenodd d="M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6"clip-rule=evenodd></path><linearGradient x1=-635.467 x2=-635.467 y1=852.115 y2=851.115 gradientTransform="matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd></path><linearGradient x1=-636.573 x2=-636.573 y1=855.444 y2=854.444 gradientTransform="matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z"clip-rule=evenodd></path><linearGradient x1=-632.145 x2=-632.145 y1=854.174 y2=853.174 gradientTransform="matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z"clip-rule=evenodd></path><linearGradient x1=-638.224 x2=-638.224 y1=853.801 y2=852.801 gradientTransform="matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd></path><linearGradient x1=-637.723 x2=-637.723 y1=855.103 y2=854.103 gradientTransform="matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z"clip-rule=evenodd></path><linearGradient x1=-631.79 x2=-631.79 y1=855.872 y2=854.872 gradientTransform="matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#2f8a00></stop><stop offset=1 stop-color=#90ff57></stop></linearGradient><path fill-rule=evenodd stroke=#2F8A00 stroke-width=13 d="M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z"clip-rule=evenodd></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1"></path><path fill=none stroke=#2F8A00 stroke-linecap=round stroke-width=8 d="M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32"></path></g><defs><filter width=532 height=633 x=50.5 y=399 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=532 height=633 x=50.5 y=399 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><linearGradient x1=-641.104 x2=-641.278 y1=856.577 y2=856.183 gradientTransform="matrix(532 0 0 -633 341484.5 542657)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#fff400></stop><stop offset=1 stop-color=#3c8700></stop></linearGradient><ellipse cx=316.5 cy=715.5 fill-rule=evenodd clip-rule=evenodd rx=266 ry=316.5></ellipse><defs><filter width=288 height=283 x=391 y=-24 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></feColorMatrix></filter></defs><mask width=288 height=283 x=391 y=-24 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#FFF fill-rule=evenodd clip-rule=evenodd></circle></g></mask><g><g transform="translate(397 -24)"><linearGradient x1=-1036.672 x2=-1036.672 y1=880.018 y2=879.018 gradientTransform="matrix(227 0 0 -227 235493 199764)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffdf00></stop><stop offset=1 stop-color=#ff9d00></stop></linearGradient><circle cx=168.5 cy=113.5 r=113.5 fill-rule=evenodd clip-rule=evenodd></circle><linearGradient x1=-1017.329 x2=-1018.602 y1=658.003 y2=657.998 gradientTransform="matrix(30 0 0 -1 30558 771)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M30 113H0"></path><linearGradient x1=-1014.501 x2=-1015.774 y1=839.985 y2=839.935 gradientTransform="matrix(26.5 0 0 -5.5 26925 4696.5)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M33.5 79.5L7 74"></path><linearGradient x1=-1016.59 x2=-1017.862 y1=852.671 y2=852.595 gradientTransform="matrix(29 0 0 -8 29523 6971)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M34 146l-29 8"></path><linearGradient x1=-1011.984 x2=-1013.257 y1=863.523 y2=863.229 gradientTransform="matrix(24 0 0 -13 24339 11407)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M45 177l-24 13"></path><linearGradient x1=-1006.673 x2=-1007.946 y1=869.279 y2=868.376 gradientTransform="matrix(20 0 0 -19 20205 16720)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M67 204l-20 19"></path><linearGradient x1=-992.85 x2=-993.317 y1=871.258 y2=870.258 gradientTransform="matrix(13.8339 0 0 -22.8467 13825.796 20131.938)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M94.4 227l-13.8 22.8"></path><linearGradient x1=-953.835 x2=-953.965 y1=871.9 y2=870.9 gradientTransform="matrix(7.5 0 0 -24.5 7278 21605)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M127.5 243.5L120 268"></path><linearGradient x1=244.504 x2=244.496 y1=871.898 y2=870.898 gradientTransform="matrix(.5 0 0 -24.5 45.5 21614)"gradientUnits=userSpaceOnUse><stop offset=0 stop-color=#ffa400></stop><stop offset=1 stop-color=#ff5e00></stop></linearGradient><path fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12 d="M167.5 252.5l.5 24.5">`);
-function TanStackLogo() {
-  const id = solidJs.createUniqueId();
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$10.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$13.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$23.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$25.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$37.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.nextSibling, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.nextSibling, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling, _el$60 = _el$45.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling;
-    web.setAttribute(_el$3, "id", `a-${id}`);
-    web.setAttribute(_el$4, "fill", `url(#a-${id})`);
-    web.setAttribute(_el$6, "id", `b-${id}`);
-    web.setAttribute(_el$7, "id", `c-${id}`);
-    web.setAttribute(_el$8, "filter", `url(#b-${id})`);
-    web.setAttribute(_el$9, "mask", `url(#c-${id})`);
-    web.setAttribute(_el$1, "id", `d-${id}`);
-    web.setAttribute(_el$10, "id", `e-${id}`);
-    web.setAttribute(_el$11, "filter", `url(#d-${id})`);
-    web.setAttribute(_el$12, "mask", `url(#e-${id})`);
-    web.setAttribute(_el$14, "id", `f-${id}`);
-    web.setAttribute(_el$15, "id", `g-${id}`);
-    web.setAttribute(_el$16, "filter", `url(#f-${id})`);
-    web.setAttribute(_el$17, "mask", `url(#g-${id})`);
-    web.setAttribute(_el$19, "id", `h-${id}`);
-    web.setAttribute(_el$20, "id", `i-${id}`);
-    web.setAttribute(_el$21, "filter", `url(#h-${id})`);
-    web.setAttribute(_el$22, "mask", `url(#i-${id})`);
-    web.setAttribute(_el$24, "id", `j-${id}`);
-    web.setAttribute(_el$25, "id", `k-${id}`);
-    web.setAttribute(_el$26, "filter", `url(#j-${id})`);
-    web.setAttribute(_el$27, "mask", `url(#k-${id})`);
-    web.setAttribute(_el$29, "id", `l-${id}`);
-    web.setAttribute(_el$30, "id", `m-${id}`);
-    web.setAttribute(_el$31, "filter", `url(#l-${id})`);
-    web.setAttribute(_el$32, "mask", `url(#m-${id})`);
-    web.setAttribute(_el$34, "id", `n-${id}`);
-    web.setAttribute(_el$35, "id", `o-${id}`);
-    web.setAttribute(_el$36, "filter", `url(#n-${id})`);
-    web.setAttribute(_el$37, "mask", `url(#o-${id})`);
-    web.setAttribute(_el$39, "id", `p-${id}`);
-    web.setAttribute(_el$40, "fill", `url(#p-${id})`);
-    web.setAttribute(_el$42, "id", `q-${id}`);
-    web.setAttribute(_el$43, "id", `r-${id}`);
-    web.setAttribute(_el$44, "filter", `url(#q-${id})`);
-    web.setAttribute(_el$45, "mask", `url(#r-${id})`);
-    web.setAttribute(_el$46, "id", `s-${id}`);
-    web.setAttribute(_el$47, "fill", `url(#s-${id})`);
-    web.setAttribute(_el$48, "id", `t-${id}`);
-    web.setAttribute(_el$49, "fill", `url(#t-${id})`);
-    web.setAttribute(_el$50, "id", `u-${id}`);
-    web.setAttribute(_el$51, "fill", `url(#u-${id})`);
-    web.setAttribute(_el$52, "id", `v-${id}`);
-    web.setAttribute(_el$53, "fill", `url(#v-${id})`);
-    web.setAttribute(_el$54, "id", `w-${id}`);
-    web.setAttribute(_el$55, "fill", `url(#w-${id})`);
-    web.setAttribute(_el$56, "id", `x-${id}`);
-    web.setAttribute(_el$57, "fill", `url(#x-${id})`);
-    web.setAttribute(_el$58, "id", `y-${id}`);
-    web.setAttribute(_el$59, "fill", `url(#y-${id})`);
-    web.setAttribute(_el$61, "id", `z-${id}`);
-    web.setAttribute(_el$62, "id", `A-${id}`);
-    web.setAttribute(_el$63, "filter", `url(#z-${id})`);
-    web.setAttribute(_el$64, "id", `B-${id}`);
-    web.setAttribute(_el$65, "fill", `url(#B-${id})`);
-    web.setAttribute(_el$65, "mask", `url(#A-${id})`);
-    web.setAttribute(_el$67, "id", `C-${id}`);
-    web.setAttribute(_el$68, "id", `D-${id}`);
-    web.setAttribute(_el$69, "filter", `url(#C-${id})`);
-    web.setAttribute(_el$70, "mask", `url(#D-${id})`);
-    web.setAttribute(_el$72, "id", `E-${id}`);
-    web.setAttribute(_el$73, "fill", `url(#E-${id})`);
-    web.setAttribute(_el$74, "id", `F-${id}`);
-    web.setAttribute(_el$75, "stroke", `url(#F-${id})`);
-    web.setAttribute(_el$76, "id", `G-${id}`);
-    web.setAttribute(_el$77, "stroke", `url(#G-${id})`);
-    web.setAttribute(_el$78, "id", `H-${id}`);
-    web.setAttribute(_el$79, "stroke", `url(#H-${id})`);
-    web.setAttribute(_el$80, "id", `I-${id}`);
-    web.setAttribute(_el$81, "stroke", `url(#I-${id})`);
-    web.setAttribute(_el$82, "id", `J-${id}`);
-    web.setAttribute(_el$83, "stroke", `url(#J-${id})`);
-    web.setAttribute(_el$84, "id", `K-${id}`);
-    web.setAttribute(_el$85, "stroke", `url(#K-${id})`);
-    web.setAttribute(_el$86, "id", `L-${id}`);
-    web.setAttribute(_el$87, "stroke", `url(#L-${id})`);
-    web.setAttribute(_el$88, "id", `M-${id}`);
-    web.setAttribute(_el$89, "stroke", `url(#M-${id})`);
-    web.effect(() => web.setAttribute(_el$, "class", styles().logo));
-    return _el$;
-  })();
-}
-exports.TanStackLogo = TanStackLogo;
-//# sourceMappingURL=logo.cjs.map

dist/cjs/components/logo.cjs.map

-{"version":3,"file":"logo.cjs","sources":["../../../src/components/logo.tsx"],"sourcesContent":["import { createUniqueId } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\nexport function TanStackLogo() {\n  const id = createUniqueId()\n  const styles = useStyles()\n  return (\n    <svg\n      class={styles().logo}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      enable-background=\"new 0 0 634 633\"\n      viewBox=\"0 0 634 633\"\n    >\n      <g transform=\"translate(1)\">\n        <linearGradient\n          id={`a-${id}`}\n          x1=\"-641.486\"\n          x2=\"-641.486\"\n          y1=\"856.648\"\n          y2=\"855.931\"\n          gradientTransform=\"matrix(633 0 0 -633 406377 542258)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop offset=\"0\" stop-color=\"#6bdaff\"></stop>\n          <stop offset=\"0.319\" stop-color=\"#f9ffb5\"></stop>\n          <stop offset=\"0.706\" stop-color=\"#ffa770\"></stop>\n          <stop offset=\"1\" stop-color=\"#ff7373\"></stop>\n        </linearGradient>\n        <circle\n          cx=\"316.5\"\n          cy=\"316.5\"\n          r=\"316.5\"\n          fill={`url(#a-${id})`}\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n        ></circle>\n        <defs>\n          <filter\n            id={`b-${id}`}\n            width=\"454\"\n            height=\"396.9\"\n            x=\"-137.5\"\n            y=\"412\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`c-${id}`}\n          width=\"454\"\n          height=\"396.9\"\n          x=\"-137.5\"\n          y=\"412\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#b-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <ellipse\n          cx=\"89.5\"\n          cy=\"610.5\"\n          fill=\"#015064\"\n          fill-rule=\"evenodd\"\n          stroke=\"#00CFE2\"\n          stroke-width=\"25\"\n          clip-rule=\"evenodd\"\n          mask={`url(#c-${id})`}\n          rx=\"214.5\"\n          ry=\"186\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`d-${id}`}\n            width=\"454\"\n            height=\"396.9\"\n            x=\"316.5\"\n            y=\"412\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`e-${id}`}\n          width=\"454\"\n          height=\"396.9\"\n          x=\"316.5\"\n          y=\"412\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#d-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <ellipse\n          cx=\"543.5\"\n          cy=\"610.5\"\n          fill=\"#015064\"\n          fill-rule=\"evenodd\"\n          stroke=\"#00CFE2\"\n          stroke-width=\"25\"\n          clip-rule=\"evenodd\"\n          mask={`url(#e-${id})`}\n          rx=\"214.5\"\n          ry=\"186\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`f-${id}`}\n            width=\"454\"\n            height=\"396.9\"\n            x=\"-137.5\"\n            y=\"450\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`g-${id}`}\n          width=\"454\"\n          height=\"396.9\"\n          x=\"-137.5\"\n          y=\"450\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#f-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <ellipse\n          cx=\"89.5\"\n          cy=\"648.5\"\n          fill=\"#015064\"\n          fill-rule=\"evenodd\"\n          stroke=\"#00A8B8\"\n          stroke-width=\"25\"\n          clip-rule=\"evenodd\"\n          mask={`url(#g-${id})`}\n          rx=\"214.5\"\n          ry=\"186\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`h-${id}`}\n            width=\"454\"\n            height=\"396.9\"\n            x=\"316.5\"\n            y=\"450\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`i-${id}`}\n          width=\"454\"\n          height=\"396.9\"\n          x=\"316.5\"\n          y=\"450\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#h-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <ellipse\n          cx=\"543.5\"\n          cy=\"648.5\"\n          fill=\"#015064\"\n          fill-rule=\"evenodd\"\n          stroke=\"#00A8B8\"\n          stroke-width=\"25\"\n          clip-rule=\"evenodd\"\n          mask={`url(#i-${id})`}\n          rx=\"214.5\"\n          ry=\"186\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`j-${id}`}\n            width=\"454\"\n            height=\"396.9\"\n            x=\"-137.5\"\n            y=\"486\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`k-${id}`}\n          width=\"454\"\n          height=\"396.9\"\n          x=\"-137.5\"\n          y=\"486\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#j-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <ellipse\n          cx=\"89.5\"\n          cy=\"684.5\"\n          fill=\"#015064\"\n          fill-rule=\"evenodd\"\n          stroke=\"#007782\"\n          stroke-width=\"25\"\n          clip-rule=\"evenodd\"\n          mask={`url(#k-${id})`}\n          rx=\"214.5\"\n          ry=\"186\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`l-${id}`}\n            width=\"454\"\n            height=\"396.9\"\n            x=\"316.5\"\n            y=\"486\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`m-${id}`}\n          width=\"454\"\n          height=\"396.9\"\n          x=\"316.5\"\n          y=\"486\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#l-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <ellipse\n          cx=\"543.5\"\n          cy=\"684.5\"\n          fill=\"#015064\"\n          fill-rule=\"evenodd\"\n          stroke=\"#007782\"\n          stroke-width=\"25\"\n          clip-rule=\"evenodd\"\n          mask={`url(#m-${id})`}\n          rx=\"214.5\"\n          ry=\"186\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`n-${id}`}\n            width=\"176.9\"\n            height=\"129.3\"\n            x=\"272.2\"\n            y=\"308\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`o-${id}`}\n          width=\"176.9\"\n          height=\"129.3\"\n          x=\"272.2\"\n          y=\"308\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#n-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <g mask={`url(#o-${id})`}>\n          <path\n            fill=\"none\"\n            stroke=\"#000\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"bevel\"\n            stroke-width=\"11\"\n            d=\"M436 403.2l-5 28.6m-140-90.3l-10.9 62m52.8-19.4l-4.3 27.1\"\n          ></path>\n          <linearGradient\n            id={`p-${id}`}\n            x1=\"-645.656\"\n            x2=\"-646.499\"\n            y1=\"854.878\"\n            y2=\"854.788\"\n            gradientTransform=\"matrix(-184.159 -32.4722 11.4608 -64.9973 -128419.844 34938.836)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#ee2700\"></stop>\n            <stop offset=\"1\" stop-color=\"#ff008e\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#p-${id})`}\n            fill-rule=\"evenodd\"\n            d=\"M344.1 363l97.7 17.2c5.8 2.1 8.2 6.2 7.1 12.1-1 5.9-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1.8-12.8 3.7-3.7 8.3-4.4 13.7-2.1l55.2 53.6z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <path\n            fill=\"#D8D8D8\"\n            fill-rule=\"evenodd\"\n            stroke=\"#FFF\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"bevel\"\n            stroke-width=\"7\"\n            d=\"M428.3 384.5l.9-6.5m-33.9 1.5l.9-6.5m-34 .5l.9-6.1m-38.9-16.1l4.2-3.9m-25.2-16.1l4.2-3.9\"\n            clip-rule=\"evenodd\"\n          ></path>\n        </g>\n        <defs>\n          <filter\n            id={`q-${id}`}\n            width=\"280.6\"\n            height=\"317.4\"\n            x=\"73.2\"\n            y=\"113.9\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`r-${id}`}\n          width=\"280.6\"\n          height=\"317.4\"\n          x=\"73.2\"\n          y=\"113.9\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#q-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <g mask={`url(#r-${id})`}>\n          <linearGradient\n            id={`s-${id}`}\n            x1=\"-646.8\"\n            x2=\"-646.8\"\n            y1=\"854.844\"\n            y2=\"853.844\"\n            gradientTransform=\"matrix(-100.1751 48.8587 -97.9753 -200.879 19124.773 203538.61)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#a17500\"></stop>\n            <stop offset=\"1\" stop-color=\"#5d2100\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#s-${id})`}\n            fill-rule=\"evenodd\"\n            d=\"M192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.2-2.9 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6-3.4-18.7-10.8-51.8-22.2-99.6l-25.3 4.6\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <linearGradient\n            id={`t-${id}`}\n            x1=\"-635.467\"\n            x2=\"-635.467\"\n            y1=\"852.115\"\n            y2=\"851.115\"\n            gradientTransform=\"matrix(92.6873 4.8575 2.0257 -38.6535 57323.695 36176.047)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n            <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#t-${id})`}\n            fill-rule=\"evenodd\"\n            stroke=\"#2F8A00\"\n            stroke-width=\"13\"\n            d=\"M195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <linearGradient\n            id={`u-${id}`}\n            x1=\"-636.573\"\n            x2=\"-636.573\"\n            y1=\"855.444\"\n            y2=\"854.444\"\n            gradientTransform=\"matrix(109.9945 5.7646 6.3597 -121.3507 64719.133 107659.336)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n            <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#u-${id})`}\n            fill-rule=\"evenodd\"\n            stroke=\"#2F8A00\"\n            stroke-width=\"13\"\n            d=\"M194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.3 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20 49.6-53.1 49.6-53.1z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <linearGradient\n            id={`v-${id}`}\n            x1=\"-632.145\"\n            x2=\"-632.145\"\n            y1=\"854.174\"\n            y2=\"853.174\"\n            gradientTransform=\"matrix(62.9558 3.2994 3.5021 -66.8246 37035.367 59284.227)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n            <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#v-${id})`}\n            fill-rule=\"evenodd\"\n            stroke=\"#2F8A00\"\n            stroke-width=\"13\"\n            d=\"M195 183.9c-.8-21.9 6-38 20.6-48.2 14.6-10.2 29.8-15.3 45.5-15.3-6.1 21.4-14.5 35.8-25.2 43.4-10.7 7.5-24.4 14.2-40.9 20.1z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <linearGradient\n            id={`w-${id}`}\n            x1=\"-638.224\"\n            x2=\"-638.224\"\n            y1=\"853.801\"\n            y2=\"852.801\"\n            gradientTransform=\"matrix(152.4666 7.9904 3.0934 -59.0251 94939.86 55646.855)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n            <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#w-${id})`}\n            fill-rule=\"evenodd\"\n            stroke=\"#2F8A00\"\n            stroke-width=\"13\"\n            d=\"M194.9 184.5c31.9-30 64.1-39.7 96.7-29 32.6 10.7 50.8 30.4 54.6 59.1-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <linearGradient\n            id={`x-${id}`}\n            x1=\"-637.723\"\n            x2=\"-637.723\"\n            y1=\"855.103\"\n            y2=\"854.103\"\n            gradientTransform=\"matrix(136.467 7.1519 5.2165 -99.5377 82830.875 89859.578)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n            <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#x-${id})`}\n            fill-rule=\"evenodd\"\n            stroke=\"#2F8A00\"\n            stroke-width=\"13\"\n            d=\"M194.9 184.5c35.8-7.6 65.6-.2 89.2 22 23.6 22.2 37.7 49 42.3 80.3-39.8-9.7-68.3-23.8-85.5-42.4-17.2-18.5-32.5-38.5-46-59.9z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <linearGradient\n            id={`y-${id}`}\n            x1=\"-631.79\"\n            x2=\"-631.79\"\n            y1=\"855.872\"\n            y2=\"854.872\"\n            gradientTransform=\"matrix(60.8683 3.19 8.7771 -167.4773 31110.818 145537.61)\"\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0\" stop-color=\"#2f8a00\"></stop>\n            <stop offset=\"1\" stop-color=\"#90ff57\"></stop>\n          </linearGradient>\n          <path\n            fill={`url(#y-${id})`}\n            fill-rule=\"evenodd\"\n            stroke=\"#2F8A00\"\n            stroke-width=\"13\"\n            d=\"M194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6-6.5 29.9-3.6 63.1 8.7 99.6 27.4-40.3 43.2-69.6 47.4-88 4.2-18.3 5.5-44.1 4-77.2z\"\n            clip-rule=\"evenodd\"\n          ></path>\n          <path\n            fill=\"none\"\n            stroke=\"#2F8A00\"\n            stroke-linecap=\"round\"\n            stroke-width=\"8\"\n            d=\"M196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4-5.7 18-9.4 33-11.1 45.1\"\n          ></path>\n          <path\n            fill=\"none\"\n            stroke=\"#2F8A00\"\n            stroke-linecap=\"round\"\n            stroke-width=\"8\"\n            d=\"M194.8 185.7c-24.4 1.7-43.8 9-58.1 21.8-14.3 12.8-24.7 25.4-31.3 37.8m99.1-68.9c29.7-6.7 52-8.4 67-5 15 3.4 26.9 8.7 35.8 15.9m-110.8-5.9c20.3 9.9 38.2 20.5 53.9 31.9 15.7 11.4 27.4 22.1 35.1 32\"\n          ></path>\n        </g>\n        <defs>\n          <filter\n            id={`z-${id}`}\n            width=\"532\"\n            height=\"633\"\n            x=\"50.5\"\n            y=\"399\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`A-${id}`}\n          width=\"532\"\n          height=\"633\"\n          x=\"50.5\"\n          y=\"399\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#z-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <linearGradient\n          id={`B-${id}`}\n          x1=\"-641.104\"\n          x2=\"-641.278\"\n          y1=\"856.577\"\n          y2=\"856.183\"\n          gradientTransform=\"matrix(532 0 0 -633 341484.5 542657)\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop offset=\"0\" stop-color=\"#fff400\"></stop>\n          <stop offset=\"1\" stop-color=\"#3c8700\"></stop>\n        </linearGradient>\n        <ellipse\n          cx=\"316.5\"\n          cy=\"715.5\"\n          fill={`url(#B-${id})`}\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          mask={`url(#A-${id})`}\n          rx=\"266\"\n          ry=\"316.5\"\n        ></ellipse>\n        <defs>\n          <filter\n            id={`C-${id}`}\n            width=\"288\"\n            height=\"283\"\n            x=\"391\"\n            y=\"-24\"\n            filterUnits=\"userSpaceOnUse\"\n          >\n            <feColorMatrix values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\"></feColorMatrix>\n          </filter>\n        </defs>\n        <mask\n          id={`D-${id}`}\n          width=\"288\"\n          height=\"283\"\n          x=\"391\"\n          y=\"-24\"\n          maskUnits=\"userSpaceOnUse\"\n        >\n          <g filter={`url(#C-${id})`}>\n            <circle\n              cx=\"316.5\"\n              cy=\"316.5\"\n              r=\"316.5\"\n              fill=\"#FFF\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n          </g>\n        </mask>\n        <g mask={`url(#D-${id})`}>\n          <g transform=\"translate(397 -24)\">\n            <linearGradient\n              id={`E-${id}`}\n              x1=\"-1036.672\"\n              x2=\"-1036.672\"\n              y1=\"880.018\"\n              y2=\"879.018\"\n              gradientTransform=\"matrix(227 0 0 -227 235493 199764)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffdf00\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff9d00\"></stop>\n            </linearGradient>\n            <circle\n              cx=\"168.5\"\n              cy=\"113.5\"\n              r=\"113.5\"\n              fill={`url(#E-${id})`}\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            ></circle>\n            <linearGradient\n              id={`F-${id}`}\n              x1=\"-1017.329\"\n              x2=\"-1018.602\"\n              y1=\"658.003\"\n              y2=\"657.998\"\n              gradientTransform=\"matrix(30 0 0 -1 30558 771)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#F-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M30 113H0\"\n            ></path>\n            <linearGradient\n              id={`G-${id}`}\n              x1=\"-1014.501\"\n              x2=\"-1015.774\"\n              y1=\"839.985\"\n              y2=\"839.935\"\n              gradientTransform=\"matrix(26.5 0 0 -5.5 26925 4696.5)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#G-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M33.5 79.5L7 74\"\n            ></path>\n            <linearGradient\n              id={`H-${id}`}\n              x1=\"-1016.59\"\n              x2=\"-1017.862\"\n              y1=\"852.671\"\n              y2=\"852.595\"\n              gradientTransform=\"matrix(29 0 0 -8 29523 6971)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#H-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M34 146l-29 8\"\n            ></path>\n            <linearGradient\n              id={`I-${id}`}\n              x1=\"-1011.984\"\n              x2=\"-1013.257\"\n              y1=\"863.523\"\n              y2=\"863.229\"\n              gradientTransform=\"matrix(24 0 0 -13 24339 11407)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#I-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M45 177l-24 13\"\n            ></path>\n            <linearGradient\n              id={`J-${id}`}\n              x1=\"-1006.673\"\n              x2=\"-1007.946\"\n              y1=\"869.279\"\n              y2=\"868.376\"\n              gradientTransform=\"matrix(20 0 0 -19 20205 16720)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#J-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M67 204l-20 19\"\n            ></path>\n            <linearGradient\n              id={`K-${id}`}\n              x1=\"-992.85\"\n              x2=\"-993.317\"\n              y1=\"871.258\"\n              y2=\"870.258\"\n              gradientTransform=\"matrix(13.8339 0 0 -22.8467 13825.796 20131.938)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#K-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M94.4 227l-13.8 22.8\"\n            ></path>\n            <linearGradient\n              id={`L-${id}`}\n              x1=\"-953.835\"\n              x2=\"-953.965\"\n              y1=\"871.9\"\n              y2=\"870.9\"\n              gradientTransform=\"matrix(7.5 0 0 -24.5 7278 21605)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#L-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M127.5 243.5L120 268\"\n            ></path>\n            <linearGradient\n              id={`M-${id}`}\n              x1=\"244.504\"\n              x2=\"244.496\"\n              y1=\"871.898\"\n              y2=\"870.898\"\n              gradientTransform=\"matrix(.5 0 0 -24.5 45.5 21614)\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop offset=\"0\" stop-color=\"#ffa400\"></stop>\n              <stop offset=\"1\" stop-color=\"#ff5e00\"></stop>\n            </linearGradient>\n            <path\n              fill=\"none\"\n              stroke={`url(#M-${id})`}\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"bevel\"\n              stroke-width=\"12\"\n              d=\"M167.5 252.5l.5 24.5\"\n            ></path>\n          </g>\n        </g>\n      </g>\n    </svg>\n  )\n}\n"],"names":["TanStackLogo","id","createUniqueId","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$7","_el$8","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_el$24","_el$25","_el$26","_el$27","_el$28","_el$29","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$40","_el$41","_el$42","_el$43","_el$44","_el$45","_el$46","_el$47","_el$48","_el$49","_el$50","_el$51","_el$52","_el$53","_el$54","_el$55","_el$56","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$67","_el$68","_el$69","_el$70","_el$71","_el$72","_el$73","_el$74","_el$75","_el$76","_el$77","_el$78","_el$79","_el$80","_el$81","_el$82","_el$83","_el$84","_el$85","_el$86","_el$87","_el$88","_el$89","_$setAttribute","_$effect","logo"],"mappings":"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"}

dist/cjs/components/logo.d.cts

-export declare function TanStackLogo(): import("solid-js").JSX.Element;

dist/cjs/components/main-panel.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const clsx = require("clsx");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div>`);
-const MainPanel = ({
-  className,
-  children,
-  class: classStyles,
-  withPadding
-}) => {
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$ = _tmpl$();
-    web.insert(_el$, children);
-    web.effect(() => web.className(_el$, clsx(styles().mainPanel.panel, className, classStyles, {
-      [styles().mainPanel.withPadding]: withPadding
-    })));
-    return _el$;
-  })();
-};
-exports.MainPanel = MainPanel;
-//# sourceMappingURL=main-panel.cjs.map

dist/cjs/components/main-panel.cjs.map

-{"version":3,"file":"main-panel.cjs","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\ntype PanelProps = JSX.IntrinsicElements['div'] & {\n  children?: any\n  className?: string\n  withPadding?: boolean\n}\n\nexport const MainPanel = ({\n  className,\n  children,\n  class: classStyles,\n  withPadding,\n}: PanelProps) => {\n  const styles = useStyles()\n  return (\n    <div\n      class={clsx(styles().mainPanel.panel, className, classStyles, {\n        [styles().mainPanel.withPadding]: withPadding,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["MainPanel","className","children","class","classStyles","withPadding","styles","useStyles","_el$","_tmpl$","_$insert","_$effect","_$className","clsx","mainPanel","panel"],"mappings":";;;;;;AAUO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC;AACU,MAAM;AAChB,QAAMC,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAAA,OAAAF,MAMKN,QAAQ;AAAAS,qBAAAC,cAAAJ,MAJFK,KAAKP,SAASQ,UAAUC,OAAOd,WAAWG,aAAa;AAAA,MAC5D,CAACE,OAAAA,EAASQ,UAAUT,WAAW,GAAGA;AAAAA,IAAAA,CACnC,CAAC,CAAA;AAAA,WAAAG;AAAAA,EAAA,GAAA;AAKR;;"}

dist/cjs/components/main-panel.d.cts

-import { JSX } from 'solid-js/jsx-runtime';
-type PanelProps = JSX.IntrinsicElements['div'] & {
-    children?: any;
-    className?: string;
-    withPadding?: boolean;
-};
-export declare const MainPanel: ({ className, children, class: classStyles, withPadding, }: PanelProps) => JSX.Element;
-export {};

dist/cjs/components/section.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const clsx = require("clsx");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<section>`), _tmpl$2 = /* @__PURE__ */ web.template(`<h3>`), _tmpl$3 = /* @__PURE__ */ web.template(`<p>`), _tmpl$4 = /* @__PURE__ */ web.template(`<span>`);
-const Section = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$ = _tmpl$();
-    web.spread(_el$, web.mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.main, rest.class);
-      }
-    }, rest), false, true);
-    web.insert(_el$, children);
-    return _el$;
-  })();
-};
-const SectionTitle = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$2 = _tmpl$2();
-    web.spread(_el$2, web.mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.title, rest.class);
-      }
-    }, rest), false, true);
-    web.insert(_el$2, children);
-    return _el$2;
-  })();
-};
-const SectionDescription = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$3 = _tmpl$3();
-    web.spread(_el$3, web.mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.description, rest.class);
-      }
-    }, rest), false, true);
-    web.insert(_el$3, children);
-    return _el$3;
-  })();
-};
-const SectionIcon = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$4 = _tmpl$4();
-    web.spread(_el$4, web.mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.icon, rest.class);
-      }
-    }, rest), false, true);
-    web.insert(_el$4, children);
-    return _el$4;
-  })();
-};
-exports.Section = Section;
-exports.SectionDescription = SectionDescription;
-exports.SectionIcon = SectionIcon;
-exports.SectionTitle = SectionTitle;
-//# sourceMappingURL=section.cjs.map

dist/cjs/components/section.cjs.map

-{"version":3,"file":"section.cjs","sources":["../../../src/components/section.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport const Section = ({\n  children,\n  ...rest\n}: JSX.IntrinsicElements['section']) => {\n  const styles = useStyles()\n  return (\n    <section class={clsx(styles().section.main, rest.class)} {...rest}>\n      {children}\n    </section>\n  )\n}\n\nexport const SectionTitle = ({\n  children,\n  ...rest\n}: JSX.IntrinsicElements['h3']) => {\n  const styles = useStyles()\n  return (\n    <h3 class={clsx(styles().section.title, rest.class)} {...rest}>\n      {children}\n    </h3>\n  )\n}\n\nexport const SectionDescription = ({\n  children,\n  ...rest\n}: JSX.IntrinsicElements['p']) => {\n  const styles = useStyles()\n  return (\n    <p class={clsx(styles().section.description, rest.class)} {...rest}>\n      {children}\n    </p>\n  )\n}\n\nexport const SectionIcon = ({\n  children,\n  ...rest\n}: JSX.IntrinsicElements['span']) => {\n  const styles = useStyles()\n  return (\n    <span class={clsx(styles().section.icon, rest.class)} {...rest}>\n      {children}\n    </span>\n  )\n}\n"],"names":["Section","children","rest","styles","useStyles","_el$","_tmpl$","_$spread","_$mergeProps","clsx","section","main","class","_$insert","SectionTitle","_el$2","_tmpl$2","title","SectionDescription","_el$3","_tmpl$3","description","SectionIcon","_el$4","_tmpl$4","icon"],"mappings":";;;;;;AAIO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACA,GAAGC;AAC6B,MAAM;AACtC,QAAMC,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,QAAAA,OAAAF,MAAAG,eAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACkBC,KAAKN,OAAAA,EAASO,QAAQC,MAAMT,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,QAAAA,OAAAR,MAC9DJ,QAAQ;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAGf;AAEO,MAAMS,eAAeA,CAAC;AAAA,EAC3Bb;AAAAA,EACA,GAAGC;AACwB,MAAM;AACjC,QAAMC,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAW,QAAAC,QAAAA;AAAAT,QAAAA,OAAAQ,OAAAP,eAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACaC,KAAKN,OAAAA,EAASO,QAAQO,OAAOf,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,QAAAA,OAAAE,OAC1Dd,QAAQ;AAAA,WAAAc;AAAAA,EAAA,GAAA;AAGf;AAEO,MAAMG,qBAAqBA,CAAC;AAAA,EACjCjB;AAAAA,EACA,GAAGC;AACuB,MAAM;AAChC,QAAMC,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAe,QAAAC,QAAAA;AAAAb,QAAAA,OAAAY,OAAAX,eAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACYC,KAAKN,OAAAA,EAASO,QAAQW,aAAanB,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,QAAAA,OAAAM,OAC/DlB,QAAQ;AAAA,WAAAkB;AAAAA,EAAA,GAAA;AAGf;AAEO,MAAMG,cAAcA,CAAC;AAAA,EAC1BrB;AAAAA,EACA,GAAGC;AAC0B,MAAM;AACnC,QAAMC,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAmB,QAAAC,QAAAA;AAAAjB,QAAAA,OAAAgB,OAAAf,eAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACeC,KAAKN,OAAAA,EAASO,QAAQe,MAAMvB,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,QAAAA,OAAAU,OAC3DtB,QAAQ;AAAA,WAAAsB;AAAAA,EAAA,GAAA;AAGf;;;;;"}

dist/cjs/components/section.d.cts

-import { JSX } from 'solid-js/jsx-runtime';
-export declare const Section: ({ children, ...rest }: JSX.IntrinsicElements["section"]) => JSX.Element;
-export declare const SectionTitle: ({ children, ...rest }: JSX.IntrinsicElements["h3"]) => JSX.Element;
-export declare const SectionDescription: ({ children, ...rest }: JSX.IntrinsicElements["p"]) => JSX.Element;
-export declare const SectionIcon: ({ children, ...rest }: JSX.IntrinsicElements["span"]) => JSX.Element;

dist/cjs/components/select.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div><div><select>`), _tmpl$2 = /* @__PURE__ */ web.template(`<label>`), _tmpl$3 = /* @__PURE__ */ web.template(`<p>`), _tmpl$4 = /* @__PURE__ */ web.template(`<option>`);
-function Select(props) {
-  const styles = useStyles.useStyles();
-  const [selected, setSelected] = solidJs.createSignal(props.value || props.options[0]?.value);
-  const handleChange = (e) => {
-    const value = e.target.value;
-    setSelected((prev) => prev !== value ? value : prev);
-    props.onChange?.(value);
-  };
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-    web.insert(_el$2, (() => {
-      var _c$ = web.memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$4 = _tmpl$2();
-        web.insert(_el$4, () => props.label);
-        web.effect(() => web.className(_el$4, styles().selectLabel));
-        return _el$4;
-      })();
-    })(), _el$3);
-    web.insert(_el$2, (() => {
-      var _c$2 = web.memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$5 = _tmpl$3();
-        web.insert(_el$5, () => props.description);
-        web.effect(() => web.className(_el$5, styles().selectDescription));
-        return _el$5;
-      })();
-    })(), _el$3);
-    _el$3.$$input = handleChange;
-    web.insert(_el$3, () => props.options.map((opt) => (() => {
-      var _el$6 = _tmpl$4();
-      web.insert(_el$6, () => opt.label);
-      web.effect(() => _el$6.value = opt.value);
-      return _el$6;
-    })()));
-    web.effect((_p$) => {
-      var _v$ = styles().selectContainer, _v$2 = styles().selectWrapper, _v$3 = styles().select;
-      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    web.effect(() => _el$3.value = selected());
-    return _el$;
-  })();
-}
-web.delegateEvents(["input"]);
-exports.Select = Select;
-//# sourceMappingURL=select.cjs.map

dist/cjs/components/select.cjs.map

-{"version":3,"file":"select.cjs","sources":["../../../src/components/select.tsx"],"sourcesContent":["import { createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\n\ninterface SelectOption<T extends string | number> {\n  value: T\n  label: string\n}\n\ninterface SelectProps<T extends string | number> {\n  label?: string\n  options: Array<SelectOption<T>>\n  value?: T\n  onChange?: (value: T) => void\n  description?: string\n}\n\nexport function Select<T extends string | number>(props: SelectProps<T>) {\n  const styles = useStyles()\n  const [selected, setSelected] = createSignal(\n    props.value || props.options[0]?.value,\n  )\n\n  const handleChange = (e: Event) => {\n    const value = (e.target as HTMLSelectElement).value as T\n    setSelected((prev) => (prev !== value ? value : prev))\n    props.onChange?.(value)\n  }\n\n  return (\n    <div class={styles().selectContainer}>\n      <div class={styles().selectWrapper}>\n        {props.label && (\n          <label class={styles().selectLabel}>{props.label}</label>\n        )}\n        {props.description && (\n          <p class={styles().selectDescription}>{props.description}</p>\n        )}\n        <select\n          class={styles().select}\n          value={selected()}\n          onInput={handleChange}\n        >\n          {props.options.map((opt) => (\n            <option value={opt.value}>{opt.label}</option>\n          ))}\n        </select>\n      </div>\n    </div>\n  )\n}\n"],"names":["Select","props","styles","useStyles","selected","setSelected","createSignal","value","options","handleChange","e","target","prev","onChange","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_c$","_$memo","label","_el$4","_tmpl$2","_$effect","_$className","selectLabel","_c$2","description","_el$5","_tmpl$3","selectDescription","$$input","map","opt","_el$6","_tmpl$4","_p$","_v$","selectContainer","_v$2","selectWrapper","_v$3","select","t","a","undefined","_$delegateEvents"],"mappings":";;;;;;AAgBO,SAASA,OAAkCC,OAAuB;AACvE,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM,CAACC,UAAUC,WAAW,IAAIC,qBAC9BL,MAAMM,SAASN,MAAMO,QAAQ,CAAC,GAAGD,KACnC;AAEA,QAAME,eAAeA,CAACC,MAAa;AACjC,UAAMH,QAASG,EAAEC,OAA6BJ;AAC9CF,gBAAaO,CAAAA,SAAUA,SAASL,QAAQA,QAAQK,IAAK;AACrDX,UAAMY,WAAWN,KAAK;AAAA,EACxB;AAEA,UAAA,MAAA;AAAA,QAAAO,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAE,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,IAAAA,KAAA,MAAA,CAAA,CAGOpB,MAAMqB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,YAAAA,OAAAI,OAAA,MACsCtB,MAAMqB,KAAK;AAAAG,YAAAA,OAAA,MAAAC,IAAAA,UAAAH,OAAlCrB,OAAAA,EAASyB,WAAW,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACnC,GAAA,GAAAL,KAAA;AAAAC,QAAAA,OAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,IAAAA,KAAA,MAAA,CAAA,CACApB,MAAM4B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA;AAAAZ,YAAAA,OAAAW,OAAA,MACwC7B,MAAM4B,WAAW;AAAAJ,YAAAA,OAAA,MAAAC,IAAAA,UAAAI,OAA9C5B,OAAAA,EAAS8B,iBAAiB,CAAA;AAAA,eAAAF;AAAAA,MAAA,GAAA;AAAA,IACrC,GAAA,GAAAZ,KAAA;AAAAA,UAAAe,UAIUxB;AAAYU,QAAAA,OAAAD,OAAA,MAEpBjB,MAAMO,QAAQ0B,IAAKC,UAAG,MAAA;AAAA,UAAAC,QAAAC,QAAAA;AAAAlB,UAAAA,OAAAiB,OAAA,MACMD,IAAIb,KAAK;AAAAG,UAAAA,aAAAW,MAAA7B,QAArB4B,IAAI5B,KAAK;AAAA,aAAA6B;AAAAA,IAAA,GAAA,CACzB,CAAC;AAAAX,QAAAA,OAAAa,CAAAA,QAAA;AAAA,UAAAC,MAfIrC,SAASsC,iBAAeC,OACtBvC,SAASwC,eAAaC,OAQvBzC,OAAAA,EAAS0C;AAAML,cAAAD,IAAA5B,KAAAgB,IAAAA,UAAAZ,MAAAwB,IAAA5B,IAAA6B,GAAA;AAAAE,eAAAH,IAAAO,KAAAnB,IAAAA,UAAAV,OAAAsB,IAAAO,IAAAJ,IAAA;AAAAE,eAAAL,IAAAQ,KAAApB,IAAAA,UAAAR,OAAAoB,IAAAQ,IAAAH,IAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAA5B,GAAAqC;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAtB,QAAAA,aAAAP,MAAAX,QACfH,SAAAA,CAAU;AAAA,WAAAU;AAAAA,EAAA,GAAA;AAU3B;AAACkC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

dist/cjs/components/select.d.cts

-interface SelectOption<T extends string | number> {
-    value: T;
-    label: string;
-}
-interface SelectProps<T extends string | number> {
-    label?: string;
-    options: Array<SelectOption<T>>;
-    value?: T;
-    onChange?: (value: T) => void;
-    description?: string;
-}
-export declare function Select<T extends string | number>(props: SelectProps<T>): import("solid-js").JSX.Element;
-export {};

dist/cjs/components/tag.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<span>`), _tmpl$2 = /* @__PURE__ */ web.template(`<button><span></span><span>`);
-const Tag = (props) => {
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    web.insert(_el$3, () => props.label);
-    web.insert(_el$, web.createComponent(solidJs.Show, {
-      get when() {
-        return props.count && props.count > 0;
-      },
-      get children() {
-        var _el$4 = _tmpl$();
-        web.insert(_el$4, () => props.count);
-        web.effect(() => web.className(_el$4, styles().tag.count));
-        return _el$4;
-      }
-    }), null);
-    web.effect((_p$) => {
-      var _v$ = props.disabled, _v$2 = styles().tag.base, _v$3 = styles().tag.dot(props.color), _v$4 = styles().tag.label;
-      _v$ !== _p$.e && (_el$.disabled = _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$, _p$.t = _v$2);
-      _v$3 !== _p$.a && web.className(_el$2, _p$.a = _v$3);
-      _v$4 !== _p$.o && web.className(_el$3, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    return _el$;
-  })();
-};
-exports.Tag = Tag;
-//# sourceMappingURL=tag.cjs.map

dist/cjs/components/tag.cjs.map

-{"version":3,"file":"tag.cjs","sources":["../../../src/components/tag.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport type { tokens } from '../styles/tokens'\n\nexport const Tag = (props: {\n  color: keyof typeof tokens.colors\n  label: string\n  count?: number\n  disabled?: boolean\n}) => {\n  const styles = useStyles()\n  return (\n    <button disabled={props.disabled} class={styles().tag.base}>\n      <span class={styles().tag.dot(props.color)} />\n      <span class={styles().tag.label}>{props.label}</span>\n\n      <Show when={props.count && props.count > 0}>\n        <span class={styles().tag.count}>{props.count}</span>\n      </Show>\n    </button>\n  )\n}\n"],"names":["Tag","props","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$insert","label","_$createComponent","Show","when","count","children","_el$4","_tmpl$","_$effect","_$className","tag","_p$","_v$","disabled","_v$2","base","_v$3","dot","color","_v$4","e","t","a","o","undefined"],"mappings":";;;;;;AAIO,MAAMA,MAAMA,CAACC,UAKd;AACJ,QAAMC,SAASC,UAAAA,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,QAAAA,OAAAF,OAAA,MAGsCP,MAAMU,KAAK;AAAAD,eAAAN,MAAAQ,IAAAA,gBAE5CC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,MAAMc,SAASd,MAAMc,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAC,OAAAA;AAAAR,YAAAA,OAAAO,OAAA,MACNhB,MAAMc,KAAK;AAAAI,YAAAA,OAAA,MAAAC,IAAAA,UAAAH,OAAhCf,SAASmB,IAAIN,KAAK,CAAA;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAE,QAAAA,OAAAG,CAAAA,QAAA;AAAA,UAAAC,MALjBtB,MAAMuB,UAAQC,OAASvB,SAASmB,IAAIK,MAAIC,OAC3CzB,SAASmB,IAAIO,IAAI3B,MAAM4B,KAAK,GAACC,OAC7B5B,SAASmB,IAAIV;AAAKY,cAAAD,IAAAS,MAAA3B,KAAAoB,WAAAF,IAAAS,IAAAR;AAAAE,eAAAH,IAAAU,KAAAZ,IAAAA,UAAAhB,MAAAkB,IAAAU,IAAAP,IAAA;AAAAE,eAAAL,IAAAW,KAAAb,IAAAA,UAAAd,OAAAgB,IAAAW,IAAAN,IAAA;AAAAG,eAAAR,IAAAY,KAAAd,IAAAA,UAAAZ,OAAAc,IAAAY,IAAAJ,IAAA;AAAA,aAAAR;AAAAA,IAAA,GAAA;AAAA,MAAAS,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA/B;AAAAA,EAAA,GAAA;AAOrC;;"}

dist/cjs/components/tag.d.cts

-import { tokens } from '../styles/tokens.cjs';
-export declare const Tag: (props: {
-    color: keyof typeof tokens.colors;
-    label: string;
-    count?: number;
-    disabled?: boolean;
-}) => import("solid-js").JSX.Element;

dist/cjs/components/tree.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const web = require("solid-js/web");
-const solidJs = require("solid-js");
-const clsx = require("clsx");
-const useStyles = require("../styles/use-styles.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<span>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span>&quot;<!>&quot;: `), _tmpl$3 = /* @__PURE__ */ web.template(`<span>&quot;<!>&quot;`), _tmpl$4 = /* @__PURE__ */ web.template(`<span>null`), _tmpl$5 = /* @__PURE__ */ web.template(`<span>undefined`), _tmpl$6 = /* @__PURE__ */ web.template(`<span>,`), _tmpl$7 = /* @__PURE__ */ web.template(`<span><span>[</span><span>]`), _tmpl$8 = /* @__PURE__ */ web.template(`<span><span>{</span><span>}`);
-function JsonTree(props) {
-  return web.createComponent(JsonValue, {
-    isRoot: true,
-    get value() {
-      return props.value;
-    }
-  });
-}
-function JsonValue(props) {
-  const {
-    value,
-    keyName,
-    isRoot = false,
-    isLastKey
-  } = props;
-  const styles = useStyles.useStyles();
-  return (() => {
-    var _el$ = _tmpl$();
-    web.insert(_el$, (() => {
-      var _c$ = web.memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
-      return () => _c$() && (() => {
-        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
-        _el$5.nextSibling;
-        web.insert(_el$2, keyName, _el$5);
-        web.effect(() => web.className(_el$2, styles().tree.valueKey));
-        return _el$2;
-      })();
-    })(), null);
-    web.insert(_el$, () => {
-      if (typeof value === "string") {
-        return (() => {
-          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
-          _el$9.nextSibling;
-          web.insert(_el$6, value, _el$9);
-          web.effect(() => web.className(_el$6, styles().tree.valueString));
-          return _el$6;
-        })();
-      }
-      if (typeof value === "number") {
-        return (() => {
-          var _el$0 = _tmpl$();
-          web.insert(_el$0, value);
-          web.effect(() => web.className(_el$0, styles().tree.valueNumber));
-          return _el$0;
-        })();
-      }
-      if (typeof value === "boolean") {
-        return (() => {
-          var _el$1 = _tmpl$();
-          web.insert(_el$1, () => String(value));
-          web.effect(() => web.className(_el$1, styles().tree.valueBoolean));
-          return _el$1;
-        })();
-      }
-      if (value === null) {
-        return (() => {
-          var _el$10 = _tmpl$4();
-          web.effect(() => web.className(_el$10, styles().tree.valueNull));
-          return _el$10;
-        })();
-      }
-      if (value === void 0) {
-        return (() => {
-          var _el$11 = _tmpl$5();
-          web.effect(() => web.className(_el$11, styles().tree.valueNull));
-          return _el$11;
-        })();
-      }
-      if (typeof value === "function") {
-        return (() => {
-          var _el$12 = _tmpl$();
-          web.insert(_el$12, () => String(value));
-          web.effect(() => web.className(_el$12, styles().tree.valueFunction));
-          return _el$12;
-        })();
-      }
-      if (Array.isArray(value)) {
-        return web.createComponent(ArrayValue, {
-          keyName,
-          value
-        });
-      }
-      if (typeof value === "object") {
-        return web.createComponent(ObjectValue, {
-          keyName,
-          value
-        });
-      }
-      return _tmpl$();
-    }, null);
-    web.insert(_el$, isLastKey || isRoot ? "" : _tmpl$6(), null);
-    web.effect(() => web.className(_el$, styles().tree.valueContainer(isRoot)));
-    return _el$;
-  })();
-}
-const ArrayValue = ({
-  value,
-  keyName
-}) => {
-  const styles = useStyles.useStyles();
-  const [expanded, setExpanded] = solidJs.createSignal(true);
-  return (() => {
-    var _el$15 = _tmpl$7(), _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling;
-    web.insert(_el$15, keyName && (() => {
-      var _el$19 = _tmpl$2(), _el$20 = _el$19.firstChild, _el$22 = _el$20.nextSibling;
-      _el$22.nextSibling;
-      _el$19.$$click = (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        setExpanded(!expanded());
-      };
-      web.insert(_el$19, keyName, _el$22);
-      web.effect(() => web.className(_el$19, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-      return _el$19;
-    })(), _el$16);
-    web.insert(_el$15, web.createComponent(solidJs.Show, {
-      get when() {
-        return expanded();
-      },
-      get children() {
-        return web.createComponent(solidJs.For, {
-          each: value,
-          children: (item, i) => {
-            const isLastKey = i() === value.length - 1;
-            return web.createComponent(JsonValue, {
-              value: item,
-              isLastKey
-            });
-          }
-        });
-      }
-    }), _el$18);
-    web.insert(_el$15, web.createComponent(solidJs.Show, {
-      get when() {
-        return !expanded();
-      },
-      get children() {
-        var _el$17 = _tmpl$();
-        _el$17.$$click = (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-          setExpanded(!expanded());
-        };
-        web.insert(_el$17, () => `... ${value.length} more`);
-        web.effect(() => web.className(_el$17, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$17;
-      }
-    }), _el$18);
-    web.effect((_p$) => {
-      var _v$ = styles().tree.valueBraces, _v$2 = styles().tree.valueBraces;
-      _v$ !== _p$.e && web.className(_el$16, _p$.e = _v$);
-      _v$2 !== _p$.t && web.className(_el$18, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$15;
-  })();
-};
-const ObjectValue = ({
-  value,
-  keyName
-}) => {
-  const styles = useStyles.useStyles();
-  const [expanded, setExpanded] = solidJs.createSignal(true);
-  const keys = Object.keys(value);
-  const lastKeyName = keys[keys.length - 1];
-  return (() => {
-    var _el$23 = _tmpl$8(), _el$24 = _el$23.firstChild, _el$26 = _el$24.nextSibling;
-    web.insert(_el$23, keyName && (() => {
-      var _el$27 = _tmpl$2(), _el$28 = _el$27.firstChild, _el$30 = _el$28.nextSibling;
-      _el$30.nextSibling;
-      _el$27.$$click = (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        setExpanded(!expanded());
-      };
-      web.insert(_el$27, keyName, _el$30);
-      web.effect(() => web.className(_el$27, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-      return _el$27;
-    })(), _el$24);
-    web.insert(_el$23, web.createComponent(solidJs.Show, {
-      get when() {
-        return expanded();
-      },
-      get children() {
-        return web.createComponent(solidJs.For, {
-          each: keys,
-          children: (k) => web.createComponent(JsonValue, {
-            get value() {
-              return value[k];
-            },
-            keyName: k,
-            isLastKey: lastKeyName === k
-          })
-        });
-      }
-    }), _el$26);
-    web.insert(_el$23, web.createComponent(solidJs.Show, {
-      get when() {
-        return !expanded();
-      },
-      get children() {
-        var _el$25 = _tmpl$();
-        _el$25.$$click = (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-          setExpanded(!expanded());
-        };
-        web.insert(_el$25, () => `... ${keys.length} more`);
-        web.effect(() => web.className(_el$25, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$25;
-      }
-    }), _el$26);
-    web.effect((_p$) => {
-      var _v$3 = styles().tree.valueBraces, _v$4 = styles().tree.valueBraces;
-      _v$3 !== _p$.e && web.className(_el$24, _p$.e = _v$3);
-      _v$4 !== _p$.t && web.className(_el$26, _p$.t = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$23;
-  })();
-};
-web.delegateEvents(["click"]);
-exports.JsonTree = JsonTree;
-//# sourceMappingURL=tree.cjs.map

dist/cjs/components/tree.cjs.map

-{"version":3,"file":"tree.cjs","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Show, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\n\nexport function JsonTree(props: { value: any }) {\n  return <JsonValue isRoot value={props.value} />\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return <ArrayValue keyName={keyName} value={value} />\n        }\n        if (typeof value === 'object') {\n          return <ObjectValue keyName={keyName} value={value} />\n        }\n        return <span />\n      })()}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n}: {\n  value: Array<any>\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span>\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <For each={value}>\n          {(item, i) => {\n            const isLastKey = i() === value.length - 1\n            return (\n              <>\n                <JsonValue value={item} isLastKey={isLastKey} />\n              </>\n            )\n          }}\n        </For>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`... ${value.length} more`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n}: {\n  value: Record<string, any>\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  return (\n    <span>\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <For each={keys}>\n          {(k) => (\n            <>\n              <JsonValue\n                value={value[k]}\n                keyName={k}\n                isLastKey={lastKeyName === k}\n              />\n            </>\n          )}\n        </For>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`... ${keys.length} more`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_tmpl$6","valueContainer","expanded","setExpanded","createSignal","_el$15","_tmpl$7","_el$16","_el$18","_el$19","_el$20","_el$22","$$click","e","stopPropagation","stopImmediatePropagation","clsx","collapsible","Show","when","children","For","each","item","i","length","_el$17","_p$","_v$","valueBraces","_v$2","t","keys","Object","lastKeyName","_el$23","_tmpl$8","_el$24","_el$26","_el$27","_el$28","_el$30","k","_el$25","_v$3","_v$4","_$delegateEvents"],"mappings":"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"}

dist/cjs/components/tree.d.cts

-export declare function JsonTree(props: {
-    value: any;
-}): import("solid-js").JSX.Element;

dist/cjs/index.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const checkbox = require("./components/checkbox.cjs");
-const input = require("./components/input.cjs");
-const select = require("./components/select.cjs");
-const logo = require("./components/logo.cjs");
-const tree = require("./components/tree.cjs");
-const button = require("./components/button.cjs");
-const tag = require("./components/tag.cjs");
-const mainPanel = require("./components/main-panel.cjs");
-const section = require("./components/section.cjs");
-exports.Checkbox = checkbox.Checkbox;
-exports.Input = input.Input;
-exports.Select = select.Select;
-exports.TanStackLogo = logo.TanStackLogo;
-exports.JsonTree = tree.JsonTree;
-exports.Button = button.Button;
-exports.Tag = tag.Tag;
-exports.MainPanel = mainPanel.MainPanel;
-exports.Section = section.Section;
-exports.SectionDescription = section.SectionDescription;
-exports.SectionIcon = section.SectionIcon;
-exports.SectionTitle = section.SectionTitle;
-//# sourceMappingURL=index.cjs.map

dist/cjs/index.cjs.map

-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

dist/cjs/index.d.cts

-export { Checkbox } from './components/checkbox.cjs';
-export { Input } from './components/input.cjs';
-export { Select } from './components/select.cjs';
-export { TanStackLogo } from './components/logo.cjs';
-export { JsonTree } from './components/tree.cjs';
-export { Button } from './components/button.cjs';
-export { Tag } from './components/tag.cjs';
-export { MainPanel } from './components/main-panel.cjs';
-export { Section, SectionTitle, SectionDescription, SectionIcon, } from './components/section.cjs';

dist/cjs/styles/tokens.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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: {
-    20: "33"
-  },
-  font: {
-    size: {
-      xs: "calc(var(--tsrd-font-size) * 0.75)",
-      sm: "calc(var(--tsrd-font-size) * 0.875)"
-    },
-    weight: {
-      medium: "500"
-    },
-    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`
-    }
-  },
-  border: {
-    radius: {
-      sm: "calc(var(--tsrd-font-size) * 0.25)",
-      full: "9999px"
-    }
-  },
-  size: {
-    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)",
-    4: "calc(var(--tsrd-font-size) * 1)",
-    4.5: "calc(var(--tsrd-font-size) * 1.125)",
-    6.5: "calc(var(--tsrd-font-size) * 1.625)",
-    12: "calc(var(--tsrd-font-size) * 3)"
-  }
-};
-exports.tokens = tokens;
-//# sourceMappingURL=tokens.cjs.map

dist/cjs/styles/tokens.cjs.map

-{"version":3,"file":"tokens.cjs","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":"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"}

dist/cjs/styles/tokens.d.cts

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

dist/cjs/styles/use-styles.cjs

-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const goober = require("goober");
-const solidJs = require("solid-js");
-const tokens = require("./tokens.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
-const buttonVariantColors = {
-  primary: {
-    bg: tokens.tokens.colors.purple[500],
-    hover: tokens.tokens.colors.purple[600],
-    active: tokens.tokens.colors.purple[700],
-    text: "#fff",
-    border: tokens.tokens.colors.purple[500]
-  },
-  secondary: {
-    bg: tokens.tokens.colors.gray[800],
-    hover: tokens.tokens.colors.gray[700],
-    active: tokens.tokens.colors.gray[600],
-    text: tokens.tokens.colors.gray[100],
-    border: tokens.tokens.colors.gray[700]
-  },
-  info: {
-    bg: tokens.tokens.colors.blue[500],
-    hover: tokens.tokens.colors.blue[600],
-    active: tokens.tokens.colors.blue[700],
-    text: "#fff",
-    border: tokens.tokens.colors.blue[500]
-  },
-  warning: {
-    bg: tokens.tokens.colors.yellow[500],
-    hover: tokens.tokens.colors.yellow[600],
-    active: tokens.tokens.colors.yellow[700],
-    text: "#fff",
-    border: tokens.tokens.colors.yellow[500]
-  },
-  danger: {
-    bg: tokens.tokens.colors.red[500],
-    hover: tokens.tokens.colors.red[600],
-    active: tokens.tokens.colors.red[700],
-    text: "#fff",
-    border: tokens.tokens.colors.red[500]
-  },
-  success: {
-    bg: tokens.tokens.colors.green[500],
-    hover: tokens.tokens.colors.green[600],
-    active: tokens.tokens.colors.green[700],
-    text: "#fff",
-    border: tokens.tokens.colors.green[500]
-  }
-};
-const stylesFactory = (theme = "dark") => {
-  const { colors, font, size, alpha } = tokens.tokens;
-  const { fontFamily } = font;
-  const css = goober__namespace.css;
-  const t = (light, dark) => theme === "light" ? light : dark;
-  return {
-    logo: css`
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      background-color: transparent;
-      border: none;
-      width: ${size[12]};
-      height: ${size[12]};
-      font-family: ${fontFamily.sans};
-      gap: ${tokens.tokens.size[0.5]};
-      padding: 0px;
-      &:hover {
-        opacity: 0.7;
-      }
-    `,
-    selectWrapper: css`
-      width: 100%;
-      max-width: 300px;
-      display: flex;
-      flex-direction: column;
-      gap: 0.375rem;
-    `,
-    selectContainer: css`
-      width: 100%;
-    `,
-    selectLabel: css`
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${colors.gray[100]};
-      text-align: left;
-    `,
-    selectDescription: css`
-      font-size: 0.8rem;
-      color: ${colors.gray[400]};
-      margin: 0;
-      line-height: 1.3;
-      text-align: left;
-    `,
-    select: css`
-      appearance: none;
-      width: 100%;
-      padding: 0.75rem 3rem 0.75rem 0.75rem;
-      border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
-      font-size: 0.875rem;
-      transition: all 0.2s ease;
-      cursor: pointer;
-
-      /* Custom arrow */
-      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-      background-repeat: no-repeat;
-      background-position: right 0.75rem center;
-      background-size: 1.25rem;
-
-      &:hover {
-        border-color: ${colors.gray[600]};
-      }
-
-      &:focus {
-        outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
-      }
-    `,
-    inputWrapper: css`
-      width: 100%;
-      max-width: 300px;
-      display: flex;
-      flex-direction: column;
-      gap: 0.375rem;
-    `,
-    inputContainer: css`
-      width: 100%;
-    `,
-    inputLabel: css`
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${colors.gray[100]};
-      text-align: left;
-    `,
-    inputDescription: css`
-      font-size: 0.8rem;
-      color: ${colors.gray[400]};
-      margin: 0;
-      line-height: 1.3;
-      text-align: left;
-    `,
-    input: css`
-      appearance: none;
-      width: 100%;
-      padding: 0.75rem;
-      border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
-      font-size: 0.875rem;
-      font-family: ${fontFamily.mono};
-      transition: all 0.2s ease;
-
-      &::placeholder {
-        color: ${colors.gray[500]};
-      }
-
-      &:hover {
-        border-color: ${colors.gray[600]};
-      }
-
-      &:focus {
-        outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
-      }
-    `,
-    checkboxWrapper: css`
-      display: flex;
-      align-items: flex-start;
-      gap: 0.75rem;
-      cursor: pointer;
-      user-select: none;
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background-color: ${colors.darkGray[800]};
-      }
-    `,
-    checkboxContainer: css`
-      width: 100%;
-    `,
-    checkboxLabelContainer: css`
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-      flex: 1;
-    `,
-    checkbox: css`
-      appearance: none;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 2px solid ${colors.gray[700]};
-      border-radius: 0.375rem;
-      background-color: ${colors.darkGray[800]};
-      display: grid;
-      place-items: center;
-      transition: all 0.2s ease;
-      flex-shrink: 0;
-      margin-top: 0.125rem;
-
-      &:hover {
-        border-color: ${colors.purple[400]};
-      }
-
-      &:checked {
-        background-color: ${colors.purple[500]};
-        border-color: ${colors.purple[500]};
-      }
-
-      &:checked::after {
-        content: '';
-        width: 0.4rem;
-        height: 0.6rem;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-        margin-top: -3px;
-      }
-    `,
-    checkboxLabel: css`
-      color: ${colors.gray[100]};
-      font-size: 0.875rem;
-      font-weight: 500;
-      line-height: 1.4;
-      text-align: left;
-    `,
-    checkboxDescription: css`
-      color: ${colors.gray[400]};
-      font-size: 0.8rem;
-      line-height: 1.3;
-      text-align: left;
-    `,
-    button: {
-      base: css`
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        font-family: ${tokens.tokens.font.fontFamily.sans};
-        font-size: 0.8rem;
-        font-weight: 500;
-        border-radius: 0.2rem;
-        padding: 0.2rem 0.6rem;
-        cursor: pointer;
-        transition:
-          background 0.2s,
-          color 0.2s,
-          border 0.2s,
-          box-shadow 0.2s;
-        outline: none;
-        border-width: 1px;
-        border-style: solid;
-      `,
-      variant(variant, outline, ghost) {
-        const v = buttonVariantColors[variant];
-        if (ghost) {
-          return css`
-            background: transparent;
-            color: ${v.bg};
-            border-color: transparent;
-            &:hover {
-              background: ${tokens.tokens.colors.purple[100]};
-            }
-            &:active {
-              background: ${tokens.tokens.colors.purple[200]};
-            }
-          `;
-        }
-        if (outline) {
-          return css`
-            background: transparent;
-            color: ${v.bg};
-            border-color: ${v.bg};
-            &:hover {
-              background: ${tokens.tokens.colors.purple[100]};
-              border-color: ${v.hover};
-            }
-            &:active {
-              background: ${tokens.tokens.colors.purple[200]};
-              border-color: ${v.active};
-            }
-          `;
-        }
-        return css`
-          background: ${v.bg};
-          color: ${v.text};
-          border-color: ${v.border};
-          &:hover {
-            background: ${v.hover};
-            border-color: ${v.hover};
-          }
-          &:active {
-            background: ${v.active};
-            border-color: ${v.active};
-          }
-        `;
-      }
-    },
-    tag: {
-      dot: (color) => css`
-        width: ${tokens.tokens.size[1.5]};
-        height: ${tokens.tokens.size[1.5]};
-        border-radius: ${tokens.tokens.border.radius.full};
-        background-color: ${tokens.tokens.colors[color][500]};
-      `,
-      base: css`
-        display: flex;
-        gap: ${tokens.tokens.size[1.5]};
-        box-sizing: border-box;
-        height: ${tokens.tokens.size[6.5]};
-        background: ${t(colors.gray[50], colors.darkGray[500])};
-        color: ${t(colors.gray[700], colors.gray[300])};
-        border-radius: ${tokens.tokens.border.radius.sm};
-        font-size: ${font.size.sm};
-        padding: ${tokens.tokens.size[1]};
-        padding-left: ${tokens.tokens.size[1.5]};
-        align-items: center;
-        font-weight: ${font.weight.medium};
-        border: ${t("1px solid " + colors.gray[300], "1px solid transparent")};
-        user-select: none;
-        position: relative;
-        &:focus-visible {
-          outline-offset: 2px;
-          outline: 2px solid ${colors.blue[800]};
-        }
-      `,
-      label: css`
-        font-size: ${font.size.xs};
-      `,
-      count: css`
-        font-size: ${font.size.xs};
-        padding: 0 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: ${t(colors.gray[500], colors.gray[400])};
-        background-color: ${t(colors.gray[200], colors.darkGray[300])};
-        border-radius: 2px;
-        font-variant-numeric: tabular-nums;
-        height: ${tokens.tokens.size[4.5]};
-      `
-    },
-    tree: {
-      collapsible: css`
-        cursor: pointer;
-        transition: all 0.2s ease;
-        &:hover {
-          background-color: ${colors.darkGray[700]};
-          border-radius: ${tokens.tokens.border.radius.sm};
-          padding: 0 ${tokens.tokens.size[1]};
-        }
-      `,
-      valueCollapsed: css`
-        color: ${colors.gray[400]};
-      `,
-      valueFunction: css`
-        color: ${colors.cyan[400]};
-      `,
-      valueString: css`
-        color: ${colors.green[400]};
-      `,
-      valueNumber: css`
-        color: ${colors.yellow[400]};
-      `,
-      valueBoolean: css`
-        color: ${colors.pink[400]};
-      `,
-      valueNull: css`
-        color: ${colors.gray[400]};
-        font-style: italic;
-      `,
-      valueKey: css`
-        color: ${colors.blue[300]};
-      `,
-      valueBraces: css`
-        color: ${colors.gray[500]};
-      `,
-      valueContainer: (isRoot) => css`
-        display: block;
-        margin-left: ${isRoot ? "0" : "1rem"};
-      `
-    },
-    section: {
-      main: css`
-        margin-bottom: 2rem;
-        padding: 1.5rem;
-        background-color: ${colors.darkGray[800]};
-        border: 1px solid ${colors.gray[700]};
-        border-radius: 0.75rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      `,
-      title: css`
-        font-size: 1.125rem;
-        font-weight: 600;
-        color: ${colors.gray[100]};
-        margin: 0 0 1rem 0;
-        padding-bottom: 0.5rem;
-        border-bottom: 1px solid ${colors.gray[700]};
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        text-align: left;
-      `,
-      icon: css`
-        height: 20px;
-        width: 20px;
-        & > svg {
-          height: 100%;
-          width: 100%;
-        }
-        color: ${colors.purple[400]};
-      `,
-      description: css`
-        color: ${colors.gray[400]};
-        font-size: 0.875rem;
-        margin: 0 0 1.5rem 0;
-        line-height: 1.5;
-        text-align: left;
-      `
-    },
-    mainPanel: {
-      panel: css`
-        padding: 0;
-        background: ${colors.darkGray[700]};
-        overflow-y: auto;
-        height: 100%;
-      `,
-      withPadding: css`
-        padding: ${tokens.tokens.size[4]};
-      `
-    }
-  };
-};
-function useStyles() {
-  const [_styles] = solidJs.createSignal(stylesFactory());
-  return _styles;
-}
-exports.useStyles = useStyles;
-//# sourceMappingURL=use-styles.cjs.map

dist/cjs/styles/use-styles.cjs.map

-{"version":3,"file":"use-styles.cjs","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.purple[500],\n    hover: tokens.colors.purple[600],\n    active: tokens.colors.purple[700],\n    text: '#fff',\n    border: tokens.colors.purple[500],\n  },\n  secondary: {\n    bg: tokens.colors.gray[800],\n    hover: tokens.colors.gray[700],\n    active: tokens.colors.gray[600],\n    text: tokens.colors.gray[100],\n    border: tokens.colors.gray[700],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nconst stylesFactory = (theme: 'light' | 'dark' = 'dark') => {\n  const { colors, font, size, alpha } = tokens\n  const { fontFamily } = font\n  const css = goober.css\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${colors.gray[100]};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${colors.gray[400]};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${colors.darkGray[800]};\n      color: ${colors.gray[100]};\n      border: 1px solid ${colors.gray[700]};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${colors.gray[500]};\n      }\n\n      &:hover {\n        border-color: ${colors.gray[600]};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${colors.darkGray[800]};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${colors.gray[700]};\n      border-radius: 0.375rem;\n      background-color: ${colors.darkGray[800]};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${colors.purple[400]};\n      }\n\n      &:checked {\n        background-color: ${colors.purple[500]};\n        border-color: ${colors.purple[500]};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${colors.gray[100]};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.2rem;\n        padding: 0.2rem 0.6rem;\n        cursor: pointer;\n        transition:\n          background 0.2s,\n          color 0.2s,\n          border 0.2s,\n          box-shadow 0.2s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: transparent;\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${v.bg};\n            border-color: ${v.bg};\n            &:hover {\n              background: ${tokens.colors.purple[100]};\n              border-color: ${v.hover};\n            }\n            &:active {\n              background: ${tokens.colors.purple[200]};\n              border-color: ${v.active};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${v.bg};\n          color: ${v.text};\n          border-color: ${v.border};\n          &:hover {\n            background: ${v.hover};\n            border-color: ${v.hover};\n          }\n          &:active {\n            background: ${v.active};\n            border-color: ${v.active};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${tokens.colors[color][500]};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${colors.darkGray[700]};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      valueCollapsed: css`\n        color: ${colors.gray[400]};\n      `,\n      valueFunction: css`\n        color: ${colors.cyan[400]};\n      `,\n      valueString: css`\n        color: ${colors.green[400]};\n      `,\n      valueNumber: css`\n        color: ${colors.yellow[400]};\n      `,\n      valueBoolean: css`\n        color: ${colors.pink[400]};\n      `,\n      valueNull: css`\n        color: ${colors.gray[400]};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${colors.blue[300]};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 2rem;\n        padding: 1.5rem;\n        background-color: ${colors.darkGray[800]};\n        border: 1px solid ${colors.gray[700]};\n        border-radius: 0.75rem;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      `,\n      title: css`\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: ${colors.gray[100]};\n        margin: 0 0 1rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${colors.gray[700]};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 20px;\n        width: 20px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${colors.purple[400]};\n      `,\n      description: css`\n        color: ${colors.gray[400]};\n        font-size: 0.875rem;\n        margin: 0 0 1.5rem 0;\n        line-height: 1.5;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: css`\n        padding: 0;\n        background: ${colors.darkGray[700]};\n        overflow-y: auto;\n        height: 100%;\n      `,\n      withPadding: css`\n        padding: ${tokens.size[4]};\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":["tokens","goober","createSignal"],"mappings":"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"}

dist/cjs/styles/use-styles.d.cts

-import { tokens } from './tokens.cjs';
-import { ButtonVariant } from '../components/button.cjs';
-export declare function useStyles(): import('solid-js').Accessor<{
-    logo: string;
-    selectWrapper: string;
-    selectContainer: string;
-    selectLabel: string;
-    selectDescription: string;
-    select: string;
-    inputWrapper: string;
-    inputContainer: string;
-    inputLabel: string;
-    inputDescription: string;
-    input: string;
-    checkboxWrapper: string;
-    checkboxContainer: string;
-    checkboxLabelContainer: string;
-    checkbox: string;
-    checkboxLabel: string;
-    checkboxDescription: string;
-    button: {
-        base: string;
-        variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean): string;
-    };
-    tag: {
-        dot: (color: keyof typeof tokens.colors) => string;
-        base: string;
-        label: string;
-        count: string;
-    };
-    tree: {
-        collapsible: string;
-        valueCollapsed: string;
-        valueFunction: string;
-        valueString: string;
-        valueNumber: string;
-        valueBoolean: string;
-        valueNull: string;
-        valueKey: string;
-        valueBraces: string;
-        valueContainer: (isRoot: boolean) => string;
-    };
-    section: {
-        main: string;
-        title: string;
-        icon: string;
-        description: string;
-    };
-    mainPanel: {
-        panel: string;
-        withPadding: string;
-    };
-}>;

No alert changes

Improved metrics

Lines of code

6041

17.16%

Number of low supply chain risk alerts

2

-33.33%

Worsened metrics

Total package byte prevSize

361342

-7.65%

Number of package files

63

-27.59%

No dependency changes