@tanstack/devtools-ui - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

dist/esm/components/button.js

@@ -1,23 +0,25 @@
-import { spread, mergeProps, insert, template } from "solid-js/web";
-import { splitProps } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { createMemo } from "solid-js";
 import clsx from "clsx";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/button.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<button>`);
 function Button(props) {
-  const styles = useStyles();
-  const [local, rest] = 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$();
-    spread(_el$, mergeProps(rest, {
-      "class": classes
-    }), false, true);
-    insert(_el$, () => local.children);
-    return _el$;
-  })();
+	const styles = useStyles();
+	const classes = createMemo(() => {
+		const variant = props.variant || "primary";
+		return clsx(styles().button.base, styles().button.variant(variant, props.outline, props.ghost), props.className);
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(props, { get ["class"]() {
+			return classes();
+		} }), false, true);
+		insert(_el$, () => props.children);
+		return _el$;
+	})();
 }
-export {
-  Button
-};
-//# sourceMappingURL=button.js.map
+//#endregion
+export { Button };
+
+//# sourceMappingURL=button.js.map

dist/esm/components/button.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"button.js","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;AACf,QAAM,CAACC,OAAOC,IAAI,IAAIC,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,WAAAF,MAAAG,WACcb,MAAI;AAAA,MAAA,SAASG;AAAAA,IAAAA,CAAO,GAAA,OAAA,IAAA;AAAAW,WAAAJ,MAAA,MAC7BX,MAAMgB,QAAQ;AAAA,WAAAL;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"button.js","names":["createMemo","clsx","useStyles","JSX","ButtonVariant","ButtonProps","ButtonHTMLAttributes","HTMLButtonElement","variant","outline","ghost","children","className","Button","props","styles","classes","button","base","_el$","_tmpl$","_$spread","_$mergeProps","class","_$insert"],"sources":["../../../src/components/button.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\n\n// types\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}\nexport function Button(props: ButtonProps) {\n  const styles = useStyles()\n\n  const classes = createMemo(() => {\n    const variant = props.variant || 'primary'\n    return clsx(\n      styles().button.base,\n      styles().button.variant(variant, props.outline, props.ghost),\n      props.className,\n    )\n  })\n\n  return (\n    <button {...props} class={classes()}>\n      {props.children}\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAqBA,SAAgBa,OAAOC,OAAoB;CACzC,MAAMC,SAASb,WAAW;CAE1B,MAAMc,UAAUhB,iBAAiB;EAC/B,MAAMQ,UAAUM,MAAMN,WAAW;AACjC,SAAOP,KACLc,QAAQ,CAACE,OAAOC,MAChBH,QAAQ,CAACE,OAAOT,QAAQA,SAASM,MAAML,SAASK,MAAMJ,MAAM,EAC5DI,MAAMF,UACP;GACD;AAEF,eAAA;EAAA,IAAAO,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WACcR,OAAK,EAAA,KAAA,WAAA;AAAA,UAASE,SAAS;KAAA,CAAA,EAAA,OAAA,KAAA;AAAAQ,SAAAL,YAChCL,MAAMH,SAAQ;AAAA,SAAAQ;KAAA"}

dist/esm/components/checkbox.js

@@ -1,55 +0,56 @@
-import { insert, memo, effect, className, template, delegateEvents } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { className, delegateEvents, effect, insert, memo, template } from "solid-js/web";
 import { createSignal } from "solid-js";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/checkbox.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><label><input type=checkbox><div>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`);
 function Checkbox(props) {
-  const styles = useStyles();
-  const [isChecked, setIsChecked] = 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;
-    insert(_el$4, (() => {
-      var _c$ = memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$5 = _tmpl$2();
-        insert(_el$5, () => props.label);
-        effect(() => className(_el$5, styles().checkboxLabel));
-        return _el$5;
-      })();
-    })(), null);
-    insert(_el$4, (() => {
-      var _c$2 = memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$6 = _tmpl$2();
-        insert(_el$6, () => props.description);
-        effect(() => className(_el$6, styles().checkboxDescription));
-        return _el$6;
-      })();
-    })(), null);
-    effect((_p$) => {
-      var _v$ = styles().checkboxContainer, _v$2 = styles().checkboxWrapper, _v$3 = styles().checkbox, _v$4 = styles().checkboxLabelContainer;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    effect(() => _el$3.checked = isChecked());
-    return _el$;
-  })();
+	const styles = useStyles();
+	const [isChecked, setIsChecked] = 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;
+		insert(_el$4, (() => {
+			var _c$ = memo(() => !!props.label);
+			return () => _c$() && (() => {
+				var _el$5 = _tmpl$2();
+				insert(_el$5, () => props.label);
+				effect(() => className(_el$5, styles().checkboxLabel));
+				return _el$5;
+			})();
+		})(), null);
+		insert(_el$4, (() => {
+			var _c$2 = memo(() => !!props.description);
+			return () => _c$2() && (() => {
+				var _el$6 = _tmpl$2();
+				insert(_el$6, () => props.description);
+				effect(() => className(_el$6, styles().checkboxDescription));
+				return _el$6;
+			})();
+		})(), null);
+		effect((_p$) => {
+			var _v$ = styles().checkboxContainer, _v$2 = styles().checkboxWrapper, _v$3 = styles().checkbox, _v$4 = styles().checkboxLabelContainer;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		effect(() => _el$3.checked = isChecked());
+		return _el$;
+	})();
 }
 delegateEvents(["input"]);
-export {
-  Checkbox
-};
-//# sourceMappingURL=checkbox.js.map
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

dist/esm/components/checkbox.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"checkbox.js","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;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,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,WAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,KAAA,MAAA,CAAA,CAGpBrB,MAAMsB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,eAAAI,OAAA,MACuCvB,MAAMsB,KAAK;AAAAG,eAAA,MAAAC,UAAAH,OAApCtB,OAAAA,EAAS0B,aAAa,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAA,IAAA;AAAAJ,WAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,KAAA,MAAA,CAAA,CACArB,MAAM6B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAN,QAAAA;AAAAL,eAAAW,OAAA,MAEI9B,MAAM6B,WAAW;AAAAJ,eAAA,MAAAC,UAAAI,OADP7B,OAAAA,EAAS8B,mBAAmB,CAAA;AAAA,eAAAD;AAAAA,MAAA,GAAA;AAAA,IAG1C,GAAA,GAAA,IAAA;AAAAL,WAAAO,CAAAA,QAAA;AAAA,UAAAC,MAhBKhC,OAAAA,EAASiC,mBAAiBC,OACtBlC,OAAAA,EAASmC,iBAAeC,OAI3BpC,OAAAA,EAASqC,UAAQC,OAGdtC,SAASuC;AAAsBP,cAAAD,IAAAxB,KAAAkB,UAAAf,MAAAqB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAS,KAAAf,UAAAb,OAAAmB,IAAAS,IAAAN,IAAA;AAAAE,eAAAL,IAAAU,KAAAhB,UAAAX,OAAAiB,IAAAU,IAAAL,IAAA;AAAAE,eAAAP,IAAAW,KAAAjB,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,iBAAAV,MAAAT,UAJhCH,UAAAA,CAAW;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAiB9B;AAACkC,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"checkbox.js","names":["createSignal","useStyles","CheckboxProps","label","checked","onChange","description","Checkbox","props","styles","isChecked","setIsChecked","handleChange","e","Event","target","HTMLInputElement","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","$$input","_$insert","_c$","_$memo","_el$5","_tmpl$2","_$effect","_$className","checkboxLabel","_c$2","_el$6","checkboxDescription","_p$","_v$","checkboxContainer","_v$2","checkboxWrapper","_v$3","checkbox","_v$4","checkboxLabelContainer","t","a","o","undefined","_$delegateEvents"],"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"],"mappings":";;;;;AAUA,SAAgBO,SAASC,OAAsB;CAC7C,MAAMC,SAASR,WAAW;CAC1B,MAAM,CAACS,WAAWC,gBAAgBX,aAAaQ,MAAMJ,WAAW,MAAM;CAEtE,MAAMQ,gBAAgBC,MAAa;EACjC,MAAMT,UAAWS,EAAEE,OAA4BX;AAC/CO,eAAaP,QAAQ;AACrBI,QAAMH,WAAWD,QAAQ;;AAG3B,eAAA;EAAA,IAAAa,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAF,QAAAG,UAOiBZ;AAAYa,SAAAH,cAAA;GAAA,IAAAI,MAAAC,WAAA,CAAA,CAGpBnB,MAAML,MAAK;AAAA,gBAAXuB,KAAA,WAAA;IAAA,IAAAE,QAAAC,SAAA;AAAAJ,WAAAG,aACuCpB,MAAML,MAAK;AAAA2B,iBAAAC,UAAAH,OAApCnB,QAAQ,CAACuB,cAAa,CAAA;AAAA,WAAAJ;OACpC;MAAA,EAAA,KAAA;AAAAH,SAAAH,cAAA;GAAA,IAAAW,OAAAN,WAAA,CAAA,CACAnB,MAAMF,YAAW;AAAA,gBAAjB2B,MAAA,WAAA;IAAA,IAAAC,QAAAL,SAAA;AAAAJ,WAAAS,aAEI1B,MAAMF,YAAW;AAAAwB,iBAAAC,UAAAG,OADPzB,QAAQ,CAAC0B,oBAAmB,CAAA;AAAA,WAAAD;OAG1C;MAAA,EAAA,KAAA;AAAAJ,UAAAM,QAAA;GAAA,IAAAC,MAhBK5B,QAAQ,CAAC6B,mBAAiBC,OACtB9B,QAAQ,CAAC+B,iBAAeC,OAI3BhC,QAAQ,CAACiC,UAAQC,OAGdlC,QAAQ,CAACmC;AAAsBP,WAAAD,IAAAvB,KAAAkB,UAAAd,MAAAmB,IAAAvB,IAAAwB,IAAA;AAAAE,YAAAH,IAAAS,KAAAd,UAAAZ,OAAAiB,IAAAS,IAAAN,KAAA;AAAAE,YAAAL,IAAAU,KAAAf,UAAAV,OAAAe,IAAAU,IAAAL,KAAA;AAAAE,YAAAP,IAAAW,KAAAhB,UAAAT,OAAAc,IAAAW,IAAAJ,KAAA;AAAA,UAAAP;KAAA;GAAAvB,GAAAmC,KAAAA;GAAAH,GAAAG,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;GAAA,CAAA;AAAAlB,eAAAT,MAAAjB,UAJhCM,WAAW,CAAA;AAAA,SAAAO;KAAA;;AAiB7BgC,eAAA,CAAA,QAAA,CAAA"}

dist/esm/components/header.js

@@ -1,53 +0,43 @@
-import { spread, mergeProps, insert, addEventListener, effect, className, template, delegateEvents } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { addEventListener, className, delegateEvents, effect, insert, mergeProps, spread, template } from "solid-js/web";
 import clsx from "clsx";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/header.tsx
 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 Header({ children, class: className, ...rest }) {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return clsx(styles().header.row, "tsqd-header", className);
+		} }, rest), false, true);
+		insert(_el$, children);
+		return _el$;
+	})();
 }
-function HeaderLogo({
-  children,
-  flavor,
-  onClick
-}) {
-  const styles = useStyles();
-  return (() => {
-    var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-    addEventListener(_el$3, "click", onClick, true);
-    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;
-  })();
+function HeaderLogo({ children, flavor, onClick }) {
+	const styles = useStyles();
+	return (() => {
+		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+		addEventListener(_el$3, "click", onClick, true);
+		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;
+	})();
 }
 delegateEvents(["click"]);
-export {
-  Header,
-  HeaderLogo
-};
-//# sourceMappingURL=header.js.map
+//#endregion
+export { Header, HeaderLogo };
+
+//# sourceMappingURL=header.js.map

dist/esm/components/header.js.map

@@ -1,1 +0,1 @@
-{"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  onClick,\n}: {\n  children: JSX.Element\n  flavor: {\n    light: string\n    dark: string\n  }\n  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>\n}) {\n  const styles = useStyles()\n  return (\n    <div class={styles().header.logoAndToggleContainer}>\n      <button class={clsx(styles().header.logo)} onClick={onClick}>\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","onClick","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$addEventListener","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","light","dark","e","_$className","t","a","o","undefined","_$delegateEvents"],"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;AAAAA,EACAC;AAQF,GAAG;AACD,QAAMZ,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAY,QAAAC,WAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAC,qBAAAL,OAAA,SAEwDH,SAAO,IAAA;AAAAH,WAAAS,OAKtDtB,QAAQ;AAAAyB,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MANHvB,OAAAA,EAASO,OAAOiB,wBAAsBC,OACjCnB,KAAKN,OAAAA,EAASO,OAAOmB,IAAI,GAACC,OAC1BrB,KAAKN,OAAAA,EAASO,OAAOqB,YAAY,GAACC,OAEtCvB,KAAKN,OAAAA,EAASO,OAAOuB,WAAWnB,OAAOoB,OAAOpB,OAAOqB,IAAI,CAAC;AAACT,cAAAD,IAAAW,KAAAC,UAAArB,OAAAS,IAAAW,IAAAV,GAAA;AAAAE,eAAAH,IAAAa,KAAAD,UAAAnB,OAAAO,IAAAa,IAAAV,IAAA;AAAAE,eAAAL,IAAAc,KAAAF,UAAAjB,OAAAK,IAAAc,IAAAT,IAAA;AAAAE,eAAAP,IAAAe,KAAAH,UAAAhB,OAAAI,IAAAe,IAAAR,IAAA;AAAA,aAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAK;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAzB;AAAAA,EAAA,GAAA;AAO5E;AAAC0B,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"header.js","names":["clsx","useStyles","JSX","Header","children","class","className","rest","IntrinsicElements","styles","_el$","_tmpl$","_$spread","_$mergeProps","header","row","_$insert","HeaderLogo","flavor","onClick","Element","light","dark","EventHandler","HTMLButtonElement","MouseEvent","_el$2","_tmpl$2","_el$3","firstChild","_el$4","_el$5","nextSibling","_$addEventListener","_$effect","_p$","_v$","logoAndToggleContainer","_v$2","logo","_v$3","tanstackLogo","_v$4","flavorLogo","e","_$className","t","a","o","undefined","_$delegateEvents"],"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  onClick,\n}: {\n  children: JSX.Element\n  flavor: {\n    light: string\n    dark: string\n  }\n  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>\n}) {\n  const styles = useStyles()\n  return (\n    <div class={styles().header.logoAndToggleContainer}>\n      <button class={clsx(styles().header.logo)} onClick={onClick}>\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"],"mappings":";;;;;AAIA,SAAgBG,OAAO,EACrBC,UACAC,OAAOC,WACP,GAAGC,QAC+B;CAClC,MAAME,SAASR,WAAW;AAC1B,eAAA;EAAA,IAAAS,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;AAAA,UAEWb,KAAKS,QAAQ,CAACK,OAAOC,KAAK,eAAeT,UAAU;KAAA,EACtDC,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAN,MAEPN,SAAQ;AAAA,SAAAM;KAAA;;AAKf,SAAgBO,WAAW,EACzBb,UACAc,QACAC,WAQC;CACD,MAAMV,SAASR,WAAW;AAC1B,eAAA;EAAA,IAAAyB,QAAAC,SAAA,EAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAC,mBAAAL,OAAA,SAEwDT,SAAO,KAAA;AAAAH,SAAAe,OAKtD3B,SAAQ;AAAA8B,UAAAC,QAAA;GAAA,IAAAC,MANH3B,QAAQ,CAACK,OAAOuB,wBAAsBC,OACjCtC,KAAKS,QAAQ,CAACK,OAAOyB,KAAK,EAAAC,OAC1BxC,KAAKS,QAAQ,CAACK,OAAO2B,aAAa,EAAAC,OAEtC1C,KAAKS,QAAQ,CAACK,OAAO6B,WAAWzB,OAAOG,OAAOH,OAAOI,KAAK,CAAC;AAAAc,WAAAD,IAAAS,KAAAC,UAAAnB,OAAAS,IAAAS,IAAAR,IAAA;AAAAE,YAAAH,IAAAW,KAAAD,UAAAjB,OAAAO,IAAAW,IAAAR,KAAA;AAAAE,YAAAL,IAAAY,KAAAF,UAAAf,OAAAK,IAAAY,IAAAP,KAAA;AAAAE,YAAAP,IAAAa,KAAAH,UAAAd,OAAAI,IAAAa,IAAAN,KAAA;AAAA,UAAAP;KAAA;GAAAS,GAAAK,KAAAA;GAAAH,GAAAG,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;GAAA,CAAA;AAAA,SAAAvB;KAAA;;AAO3EwB,eAAA,CAAA,QAAA,CAAA"}

dist/esm/components/icons.d.ts

@@ -0,1 +1,2 @@
+import { TanStackDevtoolsTheme } from './theme.js';
 export declare function Copier(): import("solid-js").JSX.Element;
@@ -21,4 +22,4 @@ export declare function List(): import("solid-js").JSX.Element;
 export declare function CopiedCopier(props: {
-    theme: 'light' | 'dark';
+    theme: TanStackDevtoolsTheme;
 }): import("solid-js").JSX.Element;
 export declare function ErrorCopier(): import("solid-js").JSX.Element;

dist/esm/components/icons.js

 import { effect, setAttribute, template } from "solid-js/web";
+//#region src/components/icons.tsx
 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 width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M16.5 9.39999L7.5 4.20999M12 17.5L12 3M21 16V7.99999C20.9996 7.64926 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.26999L13 2.26999C12.696 2.09446 12.3511 2.00204 12 2.00204C11.6489 2.00204 11.304 2.09446 11 2.26999L4 6.26999C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64926 3 7.99999V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$1 = /* @__PURE__ */ template(`<svg width=18 height=18 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.76489 14.1003 1.98232 16.07 2.85999M22 4L12 14.01L9 11.01"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$10 = /* @__PURE__ */ template(`<svg width=18 height=18 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>`), _tmpl$11 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$12 = /* @__PURE__ */ template(`<svg width=18 height=18 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$13 = /* @__PURE__ */ template(`<svg width=12 height=12 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M21 13V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H11M15 3H21M21 3V9M21 3L10 14"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$14 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path><path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$15 = /* @__PURE__ */ template(`<svg width=20 height=20 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`), _tmpl$16 = /* @__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$17 = /* @__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$18 = /* @__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$();
+	return _tmpl$();
 }
 function List() {
-  return _tmpl$2();
+	return _tmpl$2();
 }
 function PageSearch() {
-  return _tmpl$3();
+	return _tmpl$3();
 }
 function Cogs() {
-  return _tmpl$4();
+	return _tmpl$4();
 }
 function SettingsCog() {
-  return _tmpl$5();
+	return _tmpl$5();
 }
 function Keyboard() {
-  return _tmpl$6();
+	return _tmpl$6();
 }
 function GeoTag() {
-  return _tmpl$7();
+	return _tmpl$7();
 }
 function SocialBubble() {
-  return _tmpl$5();
+	return _tmpl$5();
 }
 function Link() {
-  return _tmpl$8();
+	return _tmpl$8();
 }
 function X() {
-  return _tmpl$9();
+	return _tmpl$9();
 }
 function PackageIcon() {
-  return _tmpl$0();
+	return _tmpl$0();
 }
 function CheckCircleIcon() {
-  return _tmpl$1();
+	return _tmpl$1();
 }
 function XCircleIcon() {
-  return _tmpl$10();
+	return _tmpl$10();
 }
 function ChevronDownIcon() {
-  return _tmpl$11();
+	return _tmpl$11();
 }
 function SearchIcon() {
-  return _tmpl$12();
+	return _tmpl$12();
 }
 function ExternalLinkIcon() {
-  return _tmpl$13();
+	return _tmpl$13();
 }
 function SettingsIcon() {
-  return _tmpl$14();
+	return _tmpl$14();
 }
 function CloseIcon() {
-  return _tmpl$15();
+	return _tmpl$15();
 }
 function PiP() {
-  return _tmpl$16();
+	return _tmpl$16();
 }
 function CopiedCopier(props) {
-  return (() => {
-    var _el$18 = _tmpl$17(), _el$19 = _el$18.firstChild;
-    effect(() => setAttribute(_el$19, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
-    return _el$18;
-  })();
+	return (() => {
+		var _el$18 = _tmpl$17(), _el$19 = _el$18.firstChild;
+		effect(() => setAttribute(_el$19, "stroke", props.theme === "dark" ? "#12B76A" : "#027A48"));
+		return _el$18;
+	})();
 }
 function ErrorCopier() {
-  return _tmpl$18();
+	return _tmpl$18();
 }
-export {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  CloseIcon,
-  Cogs,
-  CopiedCopier,
-  Copier,
-  ErrorCopier,
-  ExternalLinkIcon,
-  GeoTag,
-  Keyboard,
-  Link,
-  List,
-  PackageIcon,
-  PageSearch,
-  PiP,
-  SearchIcon,
-  SettingsCog,
-  SettingsIcon,
-  SocialBubble,
-  X,
-  XCircleIcon
-};
-//# sourceMappingURL=icons.js.map
+//#endregion
+export { CheckCircleIcon, ChevronDownIcon, CloseIcon, Cogs, CopiedCopier, Copier, ErrorCopier, ExternalLinkIcon, GeoTag, Keyboard, Link, List, PackageIcon, PageSearch, PiP, SearchIcon, SettingsCog, SettingsIcon, SocialBubble, X, XCircleIcon };
+
+//# sourceMappingURL=icons.js.map

dist/esm/components/icons.js.map

@@ -1,1 +0,1 @@
-{"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 PackageIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M16.5 9.39999L7.5 4.20999M12 17.5L12 3M21 16V7.99999C20.9996 7.64926 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.26999L13 2.26999C12.696 2.09446 12.3511 2.00204 12 2.00204C11.6489 2.00204 11.304 2.09446 11 2.26999L4 6.26999C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64926 3 7.99999V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function CheckCircleIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.76489 14.1003 1.98232 16.07 2.85999M22 4L12 14.01L9 11.01\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function XCircleIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\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 ChevronDownIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 9L12 15L18 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function SearchIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ExternalLinkIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M21 13V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H11M15 3H21M21 3V9M21 3L10 14\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function SettingsIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function CloseIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M18 6L6 18M6 6L18 18\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\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","PackageIcon","_tmpl$0","CheckCircleIcon","_tmpl$1","XCircleIcon","_tmpl$10","ChevronDownIcon","_tmpl$11","SearchIcon","_tmpl$12","ExternalLinkIcon","_tmpl$13","SettingsIcon","_tmpl$14","CloseIcon","_tmpl$15","PiP","_tmpl$16","CopiedCopier","props","_el$18","_tmpl$17","_el$19","firstChild","_$effect","_$setAttribute","theme","ErrorCopier","_tmpl$18"],"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,cAAc;AAC5B,SAAAC,QAAAA;AAiBF;AAEO,SAASC,kBAAkB;AAChC,SAAAC,QAAAA;AAiBF;AAEO,SAASC,cAAc;AAC5B,SAAAC,SAAAA;AAiBF;AAEO,SAASC,kBAAkB;AAChC,SAAAC,SAAAA;AAiBF;AAEO,SAASC,aAAa;AAC3B,SAAAC,SAAAA;AAiBF;AAEO,SAASC,mBAAmB;AACjC,SAAAC,SAAAA;AAiBF;AAEO,SAASC,eAAe;AAC7B,SAAAC,SAAAA;AAwBF;AAEO,SAASC,YAAY;AAC1B,SAAAC,SAAAA;AAiBF;AAEO,SAASC,MAAM;AACpB,SAAAC,SAAAA;AAmBF;AAEO,SAASC,aAAaC,OAAoC;AAC/D,UAAA,MAAA;AAAA,QAAAC,SAAAC,SAAAA,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;"}
+{"version":3,"file":"icons.js","names":["TanStackDevtoolsTheme","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","PackageIcon","_tmpl$0","CheckCircleIcon","_tmpl$1","XCircleIcon","_tmpl$10","ChevronDownIcon","_tmpl$11","SearchIcon","_tmpl$12","ExternalLinkIcon","_tmpl$13","SettingsIcon","_tmpl$14","CloseIcon","_tmpl$15","PiP","_tmpl$16","CopiedCopier","props","theme","_el$18","_tmpl$17","_el$19","firstChild","_$effect","_$setAttribute","ErrorCopier","_tmpl$18"],"sources":["../../../src/components/icons.tsx"],"sourcesContent":["// import { Show, createUniqueId } from 'solid-js'\n\nimport type { TanStackDevtoolsTheme } from './theme'\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 PackageIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M16.5 9.39999L7.5 4.20999M12 17.5L12 3M21 16V7.99999C20.9996 7.64926 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.26999L13 2.26999C12.696 2.09446 12.3511 2.00204 12 2.00204C11.6489 2.00204 11.304 2.09446 11 2.26999L4 6.26999C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64926 3 7.99999V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function CheckCircleIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.7088 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.76489 14.1003 1.98232 16.07 2.85999M22 4L12 14.01L9 11.01\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function XCircleIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\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 ChevronDownIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 9L12 15L18 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function SearchIcon() {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function ExternalLinkIcon() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M21 13V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H11M15 3H21M21 3V9M21 3L10 14\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function SettingsIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport function CloseIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M18 6L6 18M6 6L18 18\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\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: TanStackDevtoolsTheme }) {\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: TanStackDevtoolsTheme }) {\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"],"mappings":";;;AAgRA,SAAgBC,SAAS;AACvB,QAAAC,QAAA;;AAoBF,SAAgBC,OAAO;AACrB,QAAAC,SAAA;;AAmBF,SAAgBC,aAAa;AAC3B,QAAAC,SAAA;;AAqBF,SAAgBC,OAAO;AACrB,QAAAC,SAAA;;AA8BF,SAAgBC,cAAc;AAC5B,QAAAC,SAAA;;AAmBF,SAAgBC,WAAW;AACzB,QAAAC,SAAA;;AAyBF,SAAgBC,SAAS;AACvB,QAAAC,SAAA;;AAkBF,SAAgBC,eAAe;AAC7B,QAAAL,SAAA;;AAmBF,SAAgBM,OAAO;AACrB,QAAAC,SAAA;;AAwCF,SAAgBC,IAAI;AAClB,QAAAC,SAAA;;AAkBF,SAAgBC,cAAc;AAC5B,QAAAC,SAAA;;AAmBF,SAAgBC,kBAAkB;AAChC,QAAAC,SAAA;;AAmBF,SAAgBC,cAAc;AAC5B,QAAAC,UAAA;;AAmBF,SAAgBC,kBAAkB;AAChC,QAAAC,UAAA;;AAmBF,SAAgBC,aAAa;AAC3B,QAAAC,UAAA;;AAmBF,SAAgBC,mBAAmB;AACjC,QAAAC,UAAA;;AAmBF,SAAgBC,eAAe;AAC7B,QAAAC,UAAA;;AA0BF,SAAgBC,YAAY;AAC1B,QAAAC,UAAA;;AAmBF,SAAgBC,MAAM;AACpB,QAAAC,UAAA;;AAqBF,SAAgBC,aAAaC,OAAyC;AACpE,eAAA;EAAA,IAAAE,SAAAC,UAAA,EAAAC,SAAAF,OAAAG;AAAAC,eAAAC,aAAAH,QAAA,UAUcJ,MAAMC,UAAU,SAAS,YAAY,UAAS,CAAA;AAAA,SAAAC;KAAA;;AAS9D,SAAgBM,cAAc;AAC5B,QAAAC,UAAA"}

dist/esm/components/input.js

@@ -1,57 +0,58 @@
-import { insert, memo, effect, className, setAttribute, template, delegateEvents } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { className, delegateEvents, effect, insert, memo, setAttribute, template } from "solid-js/web";
 import { createSignal } from "solid-js";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/input.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div><input>`), _tmpl$2 = /* @__PURE__ */ template(`<label>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`);
 function Input(props) {
-  const styles = useStyles();
-  const [val, setVal] = 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;
-    insert(_el$2, (() => {
-      var _c$ = memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$4 = _tmpl$2();
-        insert(_el$4, () => props.label);
-        effect(() => className(_el$4, styles().inputLabel));
-        return _el$4;
-      })();
-    })(), _el$3);
-    insert(_el$2, (() => {
-      var _c$2 = memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$5 = _tmpl$3();
-        insert(_el$5, () => props.description);
-        effect(() => className(_el$5, styles().inputDescription));
-        return _el$5;
-      })();
-    })(), _el$3);
-    _el$3.$$input = handleChange;
-    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 && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$3, "type", _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
-      _v$5 !== _p$.i && 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
-    });
-    effect(() => _el$3.value = val());
-    return _el$;
-  })();
+	const styles = useStyles();
+	const [val, setVal] = 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;
+		insert(_el$2, (() => {
+			var _c$ = memo(() => !!props.label);
+			return () => _c$() && (() => {
+				var _el$4 = _tmpl$2();
+				insert(_el$4, () => props.label);
+				effect(() => className(_el$4, styles().inputLabel));
+				return _el$4;
+			})();
+		})(), _el$3);
+		insert(_el$2, (() => {
+			var _c$2 = memo(() => !!props.description);
+			return () => _c$2() && (() => {
+				var _el$5 = _tmpl$3();
+				insert(_el$5, () => props.description);
+				effect(() => className(_el$5, styles().inputDescription));
+				return _el$5;
+			})();
+		})(), _el$3);
+		_el$3.$$input = handleChange;
+		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 && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$3, "type", _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+			_v$5 !== _p$.i && 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
+		});
+		effect(() => _el$3.value = val());
+		return _el$;
+	})();
 }
 delegateEvents(["input"]);
-export {
-  Input
-};
-//# sourceMappingURL=input.js.map
+//#endregion
+export { Input };
+
+//# sourceMappingURL=input.js.map

dist/esm/components/input.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"input.js","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;AACf,QAAM,CAACC,KAAKC,MAAM,IAAIC,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,WAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,KAAA,MAAA,CAAA,CAGOnB,MAAMoB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,eAAAI,OAAA,MACqCrB,MAAMoB,KAAK;AAAAG,eAAA,MAAAC,UAAAH,OAAjCpB,OAAAA,EAASwB,UAAU,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAClC,GAAA,GAAAL,KAAA;AAAAC,WAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,KAAA,MAAA,CAAA,CACAnB,MAAM2B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA;AAAAZ,eAAAW,OAAA,MACuC5B,MAAM2B,WAAW;AAAAJ,eAAA,MAAAC,UAAAI,OAA7C3B,OAAAA,EAAS6B,gBAAgB,CAAA;AAAA,eAAAF;AAAAA,MAAA,GAAA;AAAA,IACpC,GAAA,GAAAZ,KAAA;AAAAA,UAAAe,UAMUxB;AAAYgB,WAAAS,CAAAA,QAAA;AAAA,UAAAC,MAbfhC,SAASiC,gBAAcC,OACrBlC,SAASmC,cAAYC,OAQvBrC,MAAMsC,QAAQ,QAAMC,OACnBtC,SAASuC,OAAKC,OAERzC,MAAM0C;AAAWT,cAAAD,IAAAxB,KAAAgB,UAAAZ,MAAAoB,IAAAxB,IAAAyB,GAAA;AAAAE,eAAAH,IAAAW,KAAAnB,UAAAV,OAAAkB,IAAAW,IAAAR,IAAA;AAAAE,eAAAL,IAAAY,KAAAC,aAAA7B,OAAA,QAAAgB,IAAAY,IAAAP,IAAA;AAAAE,eAAAP,IAAAc,KAAAtB,UAAAR,OAAAgB,IAAAc,IAAAP,IAAA;AAAAE,eAAAT,IAAAe,KAAAF,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,iBAAAP,MAAAV,QADvBH,IAAAA,CAAK;AAAA,WAAAS;AAAAA,EAAA,GAAA;AAOtB;AAACqC,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"input.js","names":["createSignal","useStyles","InputProps","label","type","value","placeholder","onChange","description","Input","props","styles","val","setVal","handleChange","e","Event","target","HTMLInputElement","prev","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_c$","_$memo","_el$4","_tmpl$2","_$effect","_$className","inputLabel","_c$2","_el$5","_tmpl$3","inputDescription","$$input","_p$","_v$","inputContainer","_v$2","inputWrapper","_v$3","_v$4","input","_v$5","t","a","_$setAttribute","o","i","undefined","_$delegateEvents"],"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"],"mappings":";;;;;AAYA,SAAgBS,MAAMC,OAAmB;CACvC,MAAMC,SAASV,WAAW;CAC1B,MAAM,CAACW,KAAKC,UAAUb,aAAaU,MAAML,SAAS,GAAG;CAErD,MAAMS,gBAAgBC,MAAa;EACjC,MAAMV,QAASU,EAAEE,OAA4BZ;AAC7CQ,UAAQM,SAAUA,SAASd,QAAQA,QAAQc,KAAM;AACjDT,QAAMH,WAAWF,MAAM;;AAGzB,eAAA;EAAA,IAAAe,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAE,SAAAH,cAAA;GAAA,IAAAI,MAAAC,WAAA,CAAA,CAGOjB,MAAMP,MAAK;AAAA,gBAAXuB,KAAA,WAAA;IAAA,IAAAE,QAAAC,SAAA;AAAAJ,WAAAG,aACqClB,MAAMP,MAAK;AAAA2B,iBAAAC,UAAAH,OAAjCjB,QAAQ,CAACqB,WAAU,CAAA;AAAA,WAAAJ;OAClC;MAAA,EAAAJ,MAAA;AAAAC,SAAAH,cAAA;GAAA,IAAAW,OAAAN,WAAA,CAAA,CACAjB,MAAMF,YAAW;AAAA,gBAAjByB,MAAA,WAAA;IAAA,IAAAC,QAAAC,SAAA;AAAAV,WAAAS,aACuCxB,MAAMF,YAAW;AAAAsB,iBAAAC,UAAAG,OAA7CvB,QAAQ,CAACyB,iBAAgB,CAAA;AAAA,WAAAF;OACpC;MAAA,EAAAV,MAAA;AAAAA,QAAAa,UAMUvB;AAAYgB,UAAAQ,QAAA;GAAA,IAAAC,MAbf5B,QAAQ,CAAC6B,gBAAcC,OACrB9B,QAAQ,CAAC+B,cAAYC,OAQvBjC,MAAMN,QAAQ,QAAMwC,OACnBjC,QAAQ,CAACkC,OAAKC,OAERpC,MAAMJ;AAAWiC,WAAAD,IAAAvB,KAAAgB,UAAAX,MAAAkB,IAAAvB,IAAAwB,IAAA;AAAAE,YAAAH,IAAAS,KAAAhB,UAAAT,OAAAgB,IAAAS,IAAAN,KAAA;AAAAE,YAAAL,IAAAU,KAAAC,aAAAzB,OAAA,QAAAc,IAAAU,IAAAL,KAAA;AAAAC,YAAAN,IAAAY,KAAAnB,UAAAP,OAAAc,IAAAY,IAAAN,KAAA;AAAAE,YAAAR,IAAAa,KAAAF,aAAAzB,OAAA,eAAAc,IAAAa,IAAAL,KAAA;AAAA,UAAAR;KAAA;GAAAvB,GAAAqC,KAAAA;GAAAL,GAAAK,KAAAA;GAAAJ,GAAAI,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;GAAA,CAAA;AAAAtB,eAAAN,MAAAnB,QADvBO,KAAK,CAAA;AAAA,SAAAQ;KAAA;;AAOrBiC,eAAA,CAAA,QAAA,CAAA"}

dist/esm/components/logo.js

@@ -1,95 +0,96 @@
-import { setAttribute, effect, template } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { effect, setAttribute, template } from "solid-js/web";
 import { createUniqueId } from "solid-js";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/logo.tsx
 var _tmpl$ = /* @__PURE__ */ 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 = createUniqueId();
-  const styles = 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;
-    setAttribute(_el$3, "id", `a-${id}`);
-    setAttribute(_el$4, "fill", `url(#a-${id})`);
-    setAttribute(_el$6, "id", `b-${id}`);
-    setAttribute(_el$7, "id", `c-${id}`);
-    setAttribute(_el$8, "filter", `url(#b-${id})`);
-    setAttribute(_el$9, "mask", `url(#c-${id})`);
-    setAttribute(_el$1, "id", `d-${id}`);
-    setAttribute(_el$10, "id", `e-${id}`);
-    setAttribute(_el$11, "filter", `url(#d-${id})`);
-    setAttribute(_el$12, "mask", `url(#e-${id})`);
-    setAttribute(_el$14, "id", `f-${id}`);
-    setAttribute(_el$15, "id", `g-${id}`);
-    setAttribute(_el$16, "filter", `url(#f-${id})`);
-    setAttribute(_el$17, "mask", `url(#g-${id})`);
-    setAttribute(_el$19, "id", `h-${id}`);
-    setAttribute(_el$20, "id", `i-${id}`);
-    setAttribute(_el$21, "filter", `url(#h-${id})`);
-    setAttribute(_el$22, "mask", `url(#i-${id})`);
-    setAttribute(_el$24, "id", `j-${id}`);
-    setAttribute(_el$25, "id", `k-${id}`);
-    setAttribute(_el$26, "filter", `url(#j-${id})`);
-    setAttribute(_el$27, "mask", `url(#k-${id})`);
-    setAttribute(_el$29, "id", `l-${id}`);
-    setAttribute(_el$30, "id", `m-${id}`);
-    setAttribute(_el$31, "filter", `url(#l-${id})`);
-    setAttribute(_el$32, "mask", `url(#m-${id})`);
-    setAttribute(_el$34, "id", `n-${id}`);
-    setAttribute(_el$35, "id", `o-${id}`);
-    setAttribute(_el$36, "filter", `url(#n-${id})`);
-    setAttribute(_el$37, "mask", `url(#o-${id})`);
-    setAttribute(_el$39, "id", `p-${id}`);
-    setAttribute(_el$40, "fill", `url(#p-${id})`);
-    setAttribute(_el$42, "id", `q-${id}`);
-    setAttribute(_el$43, "id", `r-${id}`);
-    setAttribute(_el$44, "filter", `url(#q-${id})`);
-    setAttribute(_el$45, "mask", `url(#r-${id})`);
-    setAttribute(_el$46, "id", `s-${id}`);
-    setAttribute(_el$47, "fill", `url(#s-${id})`);
-    setAttribute(_el$48, "id", `t-${id}`);
-    setAttribute(_el$49, "fill", `url(#t-${id})`);
-    setAttribute(_el$50, "id", `u-${id}`);
-    setAttribute(_el$51, "fill", `url(#u-${id})`);
-    setAttribute(_el$52, "id", `v-${id}`);
-    setAttribute(_el$53, "fill", `url(#v-${id})`);
-    setAttribute(_el$54, "id", `w-${id}`);
-    setAttribute(_el$55, "fill", `url(#w-${id})`);
-    setAttribute(_el$56, "id", `x-${id}`);
-    setAttribute(_el$57, "fill", `url(#x-${id})`);
-    setAttribute(_el$58, "id", `y-${id}`);
-    setAttribute(_el$59, "fill", `url(#y-${id})`);
-    setAttribute(_el$61, "id", `z-${id}`);
-    setAttribute(_el$62, "id", `A-${id}`);
-    setAttribute(_el$63, "filter", `url(#z-${id})`);
-    setAttribute(_el$64, "id", `B-${id}`);
-    setAttribute(_el$65, "fill", `url(#B-${id})`);
-    setAttribute(_el$65, "mask", `url(#A-${id})`);
-    setAttribute(_el$67, "id", `C-${id}`);
-    setAttribute(_el$68, "id", `D-${id}`);
-    setAttribute(_el$69, "filter", `url(#C-${id})`);
-    setAttribute(_el$70, "mask", `url(#D-${id})`);
-    setAttribute(_el$72, "id", `E-${id}`);
-    setAttribute(_el$73, "fill", `url(#E-${id})`);
-    setAttribute(_el$74, "id", `F-${id}`);
-    setAttribute(_el$75, "stroke", `url(#F-${id})`);
-    setAttribute(_el$76, "id", `G-${id}`);
-    setAttribute(_el$77, "stroke", `url(#G-${id})`);
-    setAttribute(_el$78, "id", `H-${id}`);
-    setAttribute(_el$79, "stroke", `url(#H-${id})`);
-    setAttribute(_el$80, "id", `I-${id}`);
-    setAttribute(_el$81, "stroke", `url(#I-${id})`);
-    setAttribute(_el$82, "id", `J-${id}`);
-    setAttribute(_el$83, "stroke", `url(#J-${id})`);
-    setAttribute(_el$84, "id", `K-${id}`);
-    setAttribute(_el$85, "stroke", `url(#K-${id})`);
-    setAttribute(_el$86, "id", `L-${id}`);
-    setAttribute(_el$87, "stroke", `url(#L-${id})`);
-    setAttribute(_el$88, "id", `M-${id}`);
-    setAttribute(_el$89, "stroke", `url(#M-${id})`);
-    effect(() => setAttribute(_el$, "class", styles().logo));
-    return _el$;
-  })();
+	const id = createUniqueId();
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$(), _el$3 = _el$.firstChild.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$39 = _el$37.firstChild.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$72 = _el$70.firstChild.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;
+		setAttribute(_el$3, "id", `a-${id}`);
+		setAttribute(_el$4, "fill", `url(#a-${id})`);
+		setAttribute(_el$6, "id", `b-${id}`);
+		setAttribute(_el$7, "id", `c-${id}`);
+		setAttribute(_el$8, "filter", `url(#b-${id})`);
+		setAttribute(_el$9, "mask", `url(#c-${id})`);
+		setAttribute(_el$1, "id", `d-${id}`);
+		setAttribute(_el$10, "id", `e-${id}`);
+		setAttribute(_el$11, "filter", `url(#d-${id})`);
+		setAttribute(_el$12, "mask", `url(#e-${id})`);
+		setAttribute(_el$14, "id", `f-${id}`);
+		setAttribute(_el$15, "id", `g-${id}`);
+		setAttribute(_el$16, "filter", `url(#f-${id})`);
+		setAttribute(_el$17, "mask", `url(#g-${id})`);
+		setAttribute(_el$19, "id", `h-${id}`);
+		setAttribute(_el$20, "id", `i-${id}`);
+		setAttribute(_el$21, "filter", `url(#h-${id})`);
+		setAttribute(_el$22, "mask", `url(#i-${id})`);
+		setAttribute(_el$24, "id", `j-${id}`);
+		setAttribute(_el$25, "id", `k-${id}`);
+		setAttribute(_el$26, "filter", `url(#j-${id})`);
+		setAttribute(_el$27, "mask", `url(#k-${id})`);
+		setAttribute(_el$29, "id", `l-${id}`);
+		setAttribute(_el$30, "id", `m-${id}`);
+		setAttribute(_el$31, "filter", `url(#l-${id})`);
+		setAttribute(_el$32, "mask", `url(#m-${id})`);
+		setAttribute(_el$34, "id", `n-${id}`);
+		setAttribute(_el$35, "id", `o-${id}`);
+		setAttribute(_el$36, "filter", `url(#n-${id})`);
+		setAttribute(_el$37, "mask", `url(#o-${id})`);
+		setAttribute(_el$39, "id", `p-${id}`);
+		setAttribute(_el$40, "fill", `url(#p-${id})`);
+		setAttribute(_el$42, "id", `q-${id}`);
+		setAttribute(_el$43, "id", `r-${id}`);
+		setAttribute(_el$44, "filter", `url(#q-${id})`);
+		setAttribute(_el$45, "mask", `url(#r-${id})`);
+		setAttribute(_el$46, "id", `s-${id}`);
+		setAttribute(_el$47, "fill", `url(#s-${id})`);
+		setAttribute(_el$48, "id", `t-${id}`);
+		setAttribute(_el$49, "fill", `url(#t-${id})`);
+		setAttribute(_el$50, "id", `u-${id}`);
+		setAttribute(_el$51, "fill", `url(#u-${id})`);
+		setAttribute(_el$52, "id", `v-${id}`);
+		setAttribute(_el$53, "fill", `url(#v-${id})`);
+		setAttribute(_el$54, "id", `w-${id}`);
+		setAttribute(_el$55, "fill", `url(#w-${id})`);
+		setAttribute(_el$56, "id", `x-${id}`);
+		setAttribute(_el$57, "fill", `url(#x-${id})`);
+		setAttribute(_el$58, "id", `y-${id}`);
+		setAttribute(_el$59, "fill", `url(#y-${id})`);
+		setAttribute(_el$61, "id", `z-${id}`);
+		setAttribute(_el$62, "id", `A-${id}`);
+		setAttribute(_el$63, "filter", `url(#z-${id})`);
+		setAttribute(_el$64, "id", `B-${id}`);
+		setAttribute(_el$65, "fill", `url(#B-${id})`);
+		setAttribute(_el$65, "mask", `url(#A-${id})`);
+		setAttribute(_el$67, "id", `C-${id}`);
+		setAttribute(_el$68, "id", `D-${id}`);
+		setAttribute(_el$69, "filter", `url(#C-${id})`);
+		setAttribute(_el$70, "mask", `url(#D-${id})`);
+		setAttribute(_el$72, "id", `E-${id}`);
+		setAttribute(_el$73, "fill", `url(#E-${id})`);
+		setAttribute(_el$74, "id", `F-${id}`);
+		setAttribute(_el$75, "stroke", `url(#F-${id})`);
+		setAttribute(_el$76, "id", `G-${id}`);
+		setAttribute(_el$77, "stroke", `url(#G-${id})`);
+		setAttribute(_el$78, "id", `H-${id}`);
+		setAttribute(_el$79, "stroke", `url(#H-${id})`);
+		setAttribute(_el$80, "id", `I-${id}`);
+		setAttribute(_el$81, "stroke", `url(#I-${id})`);
+		setAttribute(_el$82, "id", `J-${id}`);
+		setAttribute(_el$83, "stroke", `url(#J-${id})`);
+		setAttribute(_el$84, "id", `K-${id}`);
+		setAttribute(_el$85, "stroke", `url(#K-${id})`);
+		setAttribute(_el$86, "id", `L-${id}`);
+		setAttribute(_el$87, "stroke", `url(#L-${id})`);
+		setAttribute(_el$88, "id", `M-${id}`);
+		setAttribute(_el$89, "stroke", `url(#M-${id})`);
+		effect(() => setAttribute(_el$, "class", styles().logo));
+		return _el$;
+	})();
 }
-export {
-  TanStackLogo
-};
-//# sourceMappingURL=logo.js.map
+//#endregion
+export { TanStackLogo };
+
+//# sourceMappingURL=logo.js.map

dist/esm/components/logo.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"logo.js","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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"}
+{"version":3,"file":"logo.js","names":["createUniqueId","useStyles","TanStackLogo","id","styles","_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"],"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"],"mappings":"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"}

dist/esm/components/main-panel.js

@@ -1,22 +0,18 @@
-import { insert, effect, className, template } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { className, effect, insert, template } from "solid-js/web";
 import clsx from "clsx";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/main-panel.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-const MainPanel = ({
-  className: className$1,
-  children,
-  class: classStyles,
-  withPadding
-}) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, children);
-    effect(() => className(_el$, clsx(styles().mainPanel.panel(Boolean(withPadding)), className$1, classStyles)));
-    return _el$;
-  })();
+var MainPanel = ({ className: className$1, children, class: classStyles, withPadding }) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, children);
+		effect(() => className(_el$, clsx(styles().mainPanel.panel(Boolean(withPadding)), className$1, classStyles)));
+		return _el$;
+	})();
 };
-export {
-  MainPanel
-};
-//# sourceMappingURL=main-panel.js.map
+//#endregion
+export { MainPanel };
+
+//# sourceMappingURL=main-panel.js.map

dist/esm/components/main-panel.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"main-panel.js","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\n  return (\n    <div\n      class={clsx(\n        styles().mainPanel.panel(Boolean(withPadding)),\n        className,\n        classStyles,\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","Boolean"],"mappings":";;;;AAUO,MAAMA,YAAYA,CAAC;AAAA,EAAA,WACxBC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC;AACU,MAAM;AAChB,QAAMC,SAASC,UAAAA;AAEf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAQKN,QAAQ;AAAAS,WAAA,MAAAC,UAAAJ,MANFK,KACLP,SAASQ,UAAUC,MAAMC,QAAQX,WAAW,CAAC,GAC7CJ,aACAG,WACF,CAAC,CAAA;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAKP;"}
+{"version":3,"file":"main-panel.js","names":["clsx","useStyles","JSX","PanelProps","IntrinsicElements","children","className","withPadding","MainPanel","class","classStyles","styles","_el$","_tmpl$","_$insert","_$effect","_$className","mainPanel","panel","Boolean"],"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\n  return (\n    <div\n      class={clsx(\n        styles().mainPanel.panel(Boolean(withPadding)),\n        className,\n        classStyles,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAaQ,aAAa,EACxBF,WAAAA,aACAD,UACAI,OAAOC,aACPH,kBACgB;CAChB,MAAMI,SAASV,WAAW;AAE1B,eAAA;EAAA,IAAAW,OAAAC,QAAA;AAAAC,SAAAF,MAQKP,SAAQ;AAAAU,eAAAC,UAAAJ,MANFZ,KACLW,QAAQ,CAACM,UAAUC,MAAMC,QAAQZ,YAAY,CAAC,EAC9CD,aACAI,YACD,CAAA,CAAA;AAAA,SAAAE;KAAA"}

dist/esm/components/section.js

@@ -1,75 +0,53 @@
-import { spread, mergeProps, insert, template } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { insert, mergeProps, spread, template } from "solid-js/web";
 import clsx from "clsx";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/section.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<section>`), _tmpl$2 = /* @__PURE__ */ template(`<h3>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`), _tmpl$4 = /* @__PURE__ */ template(`<span>`);
-const Section = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.main, rest.class);
-      }
-    }, rest), false, true);
-    insert(_el$, children);
-    return _el$;
-  })();
+var Section = ({ children, ...rest }) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return clsx(styles().section.main, rest.class);
+		} }, rest), false, true);
+		insert(_el$, children);
+		return _el$;
+	})();
 };
-const SectionTitle = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$2 = _tmpl$2();
-    spread(_el$2, mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.title, rest.class);
-      }
-    }, rest), false, true);
-    insert(_el$2, children);
-    return _el$2;
-  })();
+var SectionTitle = ({ children, ...rest }) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return clsx(styles().section.title, rest.class);
+		} }, rest), false, true);
+		insert(_el$2, children);
+		return _el$2;
+	})();
 };
-const SectionDescription = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$3 = _tmpl$3();
-    spread(_el$3, mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.description, rest.class);
-      }
-    }, rest), false, true);
-    insert(_el$3, children);
-    return _el$3;
-  })();
+var SectionDescription = ({ children, ...rest }) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$3 = _tmpl$3();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return clsx(styles().section.description, rest.class);
+		} }, rest), false, true);
+		insert(_el$3, children);
+		return _el$3;
+	})();
 };
-const SectionIcon = ({
-  children,
-  ...rest
-}) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$4 = _tmpl$4();
-    spread(_el$4, mergeProps({
-      get ["class"]() {
-        return clsx(styles().section.icon, rest.class);
-      }
-    }, rest), false, true);
-    insert(_el$4, children);
-    return _el$4;
-  })();
+var SectionIcon = ({ children, ...rest }) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return clsx(styles().section.icon, rest.class);
+		} }, rest), false, true);
+		insert(_el$4, children);
+		return _el$4;
+	})();
 };
-export {
-  Section,
-  SectionDescription,
-  SectionIcon,
-  SectionTitle
-};
-//# sourceMappingURL=section.js.map
+//#endregion
+export { Section, SectionDescription, SectionIcon, SectionTitle };
+
+//# sourceMappingURL=section.js.map

dist/esm/components/section.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"section.js","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;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACkBC,KAAKN,OAAAA,EAASO,QAAQC,MAAMT,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,WAAAR,MAC9DJ,QAAQ;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAGf;AAEO,MAAMS,eAAeA,CAAC;AAAA,EAC3Bb;AAAAA,EACA,GAAGC;AACwB,MAAM;AACjC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAW,QAAAC,QAAAA;AAAAT,WAAAQ,OAAAP,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACaC,KAAKN,OAAAA,EAASO,QAAQO,OAAOf,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,WAAAE,OAC1Dd,QAAQ;AAAA,WAAAc;AAAAA,EAAA,GAAA;AAGf;AAEO,MAAMG,qBAAqBA,CAAC;AAAA,EACjCjB;AAAAA,EACA,GAAGC;AACuB,MAAM;AAChC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAe,QAAAC,QAAAA;AAAAb,WAAAY,OAAAX,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACYC,KAAKN,OAAAA,EAASO,QAAQW,aAAanB,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,WAAAM,OAC/DlB,QAAQ;AAAA,WAAAkB;AAAAA,EAAA,GAAA;AAGf;AAEO,MAAMG,cAAcA,CAAC;AAAA,EAC1BrB;AAAAA,EACA,GAAGC;AAC0B,MAAM;AACnC,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAmB,QAAAC,QAAAA;AAAAjB,WAAAgB,OAAAf,WAAA;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACeC,KAAKN,OAAAA,EAASO,QAAQe,MAAMvB,KAAKU,KAAK;AAAA,MAAC;AAAA,IAAA,GAAMV,IAAI,GAAA,OAAA,IAAA;AAAAW,WAAAU,OAC3DtB,QAAQ;AAAA,WAAAsB;AAAAA,EAAA,GAAA;AAGf;"}
+{"version":3,"file":"section.js","names":["clsx","useStyles","JSX","Section","children","rest","IntrinsicElements","styles","_el$","_tmpl$","_$spread","_$mergeProps","class","section","main","_$insert","SectionTitle","_el$2","_tmpl$2","title","SectionDescription","_el$3","_tmpl$3","description","SectionIcon","_el$4","_tmpl$4","icon"],"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"],"mappings":";;;;;AAIA,IAAaG,WAAW,EACtBC,UACA,GAAGC,WACmC;CACtC,MAAME,SAASN,WAAW;AAC1B,eAAA;EAAA,IAAAO,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;AAAA,UACkBX,KAAKO,QAAQ,CAACM,QAAQC,MAAMT,KAAKO,MAAM;KAAA,EAAMP,KAAI,EAAA,OAAA,KAAA;AAAAU,SAAAP,MAC9DJ,SAAQ;AAAA,SAAAI;KAAA;;AAKf,IAAaQ,gBAAgB,EAC3BZ,UACA,GAAGC,WAC8B;CACjC,MAAME,SAASN,WAAW;AAC1B,eAAA;EAAA,IAAAgB,QAAAC,SAAA;AAAAR,SAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;AAAA,UACaX,KAAKO,QAAQ,CAACM,QAAQM,OAAOd,KAAKO,MAAM;KAAA,EAAMP,KAAI,EAAA,OAAA,KAAA;AAAAU,SAAAE,OAC1Db,SAAQ;AAAA,SAAAa;KAAA;;AAKf,IAAaG,sBAAsB,EACjChB,UACA,GAAGC,WAC6B;CAChC,MAAME,SAASN,WAAW;AAC1B,eAAA;EAAA,IAAAoB,QAAAC,SAAA;AAAAZ,SAAAW,OAAAV,WAAA,EAAA,KAAA,WAAA;AAAA,UACYX,KAAKO,QAAQ,CAACM,QAAQU,aAAalB,KAAKO,MAAM;KAAA,EAAMP,KAAI,EAAA,OAAA,KAAA;AAAAU,SAAAM,OAC/DjB,SAAQ;AAAA,SAAAiB;KAAA;;AAKf,IAAaG,eAAe,EAC1BpB,UACA,GAAGC,WACgC;CACnC,MAAME,SAASN,WAAW;AAC1B,eAAA;EAAA,IAAAwB,QAAAC,SAAA;AAAAhB,SAAAe,OAAAd,WAAA,EAAA,KAAA,WAAA;AAAA,UACeX,KAAKO,QAAQ,CAACM,QAAQc,MAAMtB,KAAKO,MAAM;KAAA,EAAMP,KAAI,EAAA,OAAA,KAAA;AAAAU,SAAAU,OAC3DrB,SAAQ;AAAA,SAAAqB;KAAA"}

dist/esm/components/select.js

@@ -1,59 +0,60 @@
-import { insert, memo, effect, className, template, delegateEvents } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { className, delegateEvents, effect, insert, memo, template } from "solid-js/web";
 import { createSignal } from "solid-js";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/select.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div><select>`), _tmpl$2 = /* @__PURE__ */ template(`<label>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`), _tmpl$4 = /* @__PURE__ */ template(`<option>`);
 function Select(props) {
-  const styles = useStyles();
-  const [selected, setSelected] = 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;
-    insert(_el$2, (() => {
-      var _c$ = memo(() => !!props.label);
-      return () => _c$() && (() => {
-        var _el$4 = _tmpl$2();
-        insert(_el$4, () => props.label);
-        effect(() => className(_el$4, styles().selectLabel));
-        return _el$4;
-      })();
-    })(), _el$3);
-    insert(_el$2, (() => {
-      var _c$2 = memo(() => !!props.description);
-      return () => _c$2() && (() => {
-        var _el$5 = _tmpl$3();
-        insert(_el$5, () => props.description);
-        effect(() => className(_el$5, styles().selectDescription));
-        return _el$5;
-      })();
-    })(), _el$3);
-    _el$3.$$input = handleChange;
-    insert(_el$3, () => props.options.map((opt) => (() => {
-      var _el$6 = _tmpl$4();
-      insert(_el$6, () => opt.label);
-      effect(() => _el$6.value = opt.value);
-      return _el$6;
-    })()));
-    effect((_p$) => {
-      var _v$ = styles().selectContainer, _v$2 = styles().selectWrapper, _v$3 = styles().select;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    effect(() => _el$3.value = selected());
-    return _el$;
-  })();
+	const styles = useStyles();
+	const [selected, setSelected] = 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;
+		insert(_el$2, (() => {
+			var _c$ = memo(() => !!props.label);
+			return () => _c$() && (() => {
+				var _el$4 = _tmpl$2();
+				insert(_el$4, () => props.label);
+				effect(() => className(_el$4, styles().selectLabel));
+				return _el$4;
+			})();
+		})(), _el$3);
+		insert(_el$2, (() => {
+			var _c$2 = memo(() => !!props.description);
+			return () => _c$2() && (() => {
+				var _el$5 = _tmpl$3();
+				insert(_el$5, () => props.description);
+				effect(() => className(_el$5, styles().selectDescription));
+				return _el$5;
+			})();
+		})(), _el$3);
+		_el$3.$$input = handleChange;
+		insert(_el$3, () => props.options.map((opt) => (() => {
+			var _el$6 = _tmpl$4();
+			insert(_el$6, () => opt.label);
+			effect(() => _el$6.value = opt.value);
+			return _el$6;
+		})()));
+		effect((_p$) => {
+			var _v$ = styles().selectContainer, _v$2 = styles().selectWrapper, _v$3 = styles().select;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		effect(() => _el$3.value = selected());
+		return _el$;
+	})();
 }
 delegateEvents(["input"]);
-export {
-  Select
-};
-//# sourceMappingURL=select.js.map
+//#endregion
+export { Select };
+
+//# sourceMappingURL=select.js.map

dist/esm/components/select.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"select.js","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;AACf,QAAM,CAACC,UAAUC,WAAW,IAAIC,aAC9BL,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,WAAAH,QAAA,MAAA;AAAA,UAAAI,MAAAC,KAAA,MAAA,CAAA,CAGOpB,MAAMqB,KAAK;AAAA,aAAA,MAAXF,IAAAA,MAAA,MAAA;AAAA,YAAAG,QAAAC,QAAAA;AAAAL,eAAAI,OAAA,MACsCtB,MAAMqB,KAAK;AAAAG,eAAA,MAAAC,UAAAH,OAAlCrB,OAAAA,EAASyB,WAAW,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IACnC,GAAA,GAAAL,KAAA;AAAAC,WAAAH,QAAA,MAAA;AAAA,UAAAY,OAAAP,KAAA,MAAA,CAAA,CACApB,MAAM4B,WAAW;AAAA,aAAA,MAAjBD,KAAAA,MAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA;AAAAZ,eAAAW,OAAA,MACwC7B,MAAM4B,WAAW;AAAAJ,eAAA,MAAAC,UAAAI,OAA9C5B,OAAAA,EAAS8B,iBAAiB,CAAA;AAAA,eAAAF;AAAAA,MAAA,GAAA;AAAA,IACrC,GAAA,GAAAZ,KAAA;AAAAA,UAAAe,UAIUxB;AAAYU,WAAAD,OAAA,MAEpBjB,MAAMO,QAAQ0B,IAAKC,UAAG,MAAA;AAAA,UAAAC,QAAAC,QAAAA;AAAAlB,aAAAiB,OAAA,MACMD,IAAIb,KAAK;AAAAG,mBAAAW,MAAA7B,QAArB4B,IAAI5B,KAAK;AAAA,aAAA6B;AAAAA,IAAA,GAAA,CACzB,CAAC;AAAAX,WAAAa,CAAAA,QAAA;AAAA,UAAAC,MAfIrC,SAASsC,iBAAeC,OACtBvC,SAASwC,eAAaC,OAQvBzC,OAAAA,EAAS0C;AAAML,cAAAD,IAAA5B,KAAAgB,UAAAZ,MAAAwB,IAAA5B,IAAA6B,GAAA;AAAAE,eAAAH,IAAAO,KAAAnB,UAAAV,OAAAsB,IAAAO,IAAAJ,IAAA;AAAAE,eAAAL,IAAAQ,KAAApB,UAAAR,OAAAoB,IAAAQ,IAAAH,IAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAA5B,GAAAqC;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAAtB,iBAAAP,MAAAX,QACfH,SAAAA,CAAU;AAAA,WAAAU;AAAAA,EAAA,GAAA;AAU3B;AAACkC,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"select.js","names":["createSignal","useStyles","SelectOption","value","T","label","SelectProps","options","Array","onChange","description","Select","props","styles","selected","setSelected","handleChange","e","Event","target","HTMLSelectElement","prev","_el$","_tmpl$","_el$2","firstChild","_el$3","_$insert","_c$","_$memo","_el$4","_tmpl$2","_$effect","_$className","selectLabel","_c$2","_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"],"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"],"mappings":";;;;;AAgBA,SAAgBW,OAAkCC,OAAuB;CACvE,MAAMC,SAASZ,WAAW;CAC1B,MAAM,CAACa,UAAUC,eAAef,aAC9BY,MAAMT,SAASS,MAAML,QAAQ,IAAIJ,MAClC;CAED,MAAMa,gBAAgBC,MAAa;EACjC,MAAMd,QAASc,EAAEE,OAA6BhB;AAC9CY,eAAaM,SAAUA,SAASlB,QAAQA,QAAQkB,KAAM;AACtDT,QAAMH,WAAWN,MAAM;;AAGzB,eAAA;EAAA,IAAAmB,OAAAC,QAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC;AAAAE,SAAAH,cAAA;GAAA,IAAAI,MAAAC,WAAA,CAAA,CAGOjB,MAAMP,MAAK;AAAA,gBAAXuB,KAAA,WAAA;IAAA,IAAAE,QAAAC,SAAA;AAAAJ,WAAAG,aACsClB,MAAMP,MAAK;AAAA2B,iBAAAC,UAAAH,OAAlCjB,QAAQ,CAACqB,YAAW,CAAA;AAAA,WAAAJ;OACnC;MAAA,EAAAJ,MAAA;AAAAC,SAAAH,cAAA;GAAA,IAAAW,OAAAN,WAAA,CAAA,CACAjB,MAAMF,YAAW;AAAA,gBAAjByB,MAAA,WAAA;IAAA,IAAAC,QAAAC,SAAA;AAAAV,WAAAS,aACwCxB,MAAMF,YAAW;AAAAsB,iBAAAC,UAAAG,OAA9CvB,QAAQ,CAACyB,kBAAiB,CAAA;AAAA,WAAAF;OACrC;MAAA,EAAAV,MAAA;AAAAA,QAAAa,UAIUvB;AAAYW,SAAAD,aAEpBd,MAAML,QAAQiC,KAAKC,eAAG;GAAA,IAAAC,QAAAC,SAAA;AAAAhB,UAAAe,aACMD,IAAIpC,MAAK;AAAA2B,gBAAAU,MAAAvC,QAArBsC,IAAItC,MAAK;AAAA,UAAAuC;MACzB,CAAC,CAAA;AAAAV,UAAAY,QAAA;GAAA,IAAAC,MAfIhC,QAAQ,CAACiC,iBAAeC,OACtBlC,QAAQ,CAACmC,eAAaC,OAQvBpC,QAAQ,CAACqC;AAAML,WAAAD,IAAA3B,KAAAgB,UAAAX,MAAAsB,IAAA3B,IAAA4B,IAAA;AAAAE,YAAAH,IAAAO,KAAAlB,UAAAT,OAAAoB,IAAAO,IAAAJ,KAAA;AAAAE,YAAAL,IAAAQ,KAAAnB,UAAAP,OAAAkB,IAAAQ,IAAAH,KAAA;AAAA,UAAAL;KAAA;GAAA3B,GAAAoC,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;GAAA,CAAA;AAAArB,eAAAN,MAAAvB,QACfW,UAAU,CAAA;AAAA,SAAAQ;KAAA;;AAU1BgC,eAAA,CAAA,QAAA,CAAA"}

dist/esm/components/tag.js

@@ -1,40 +0,41 @@
-import { insert, createComponent, effect, className, memo, template } from "solid-js/web";
+import { useStyles } from "../styles/use-styles.js";
+import { className, createComponent, effect, insert, memo, template } from "solid-js/web";
 import { Show } from "solid-js";
-import { useStyles } from "../styles/use-styles.js";
+//#region src/components/tag.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<button><span></span><span>`);
-const Tag = (props) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    insert(_el$3, () => props.label);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return memo(() => !!props.count)() && props.count > 0;
-      },
-      get children() {
-        var _el$4 = _tmpl$();
-        insert(_el$4, () => props.count);
-        effect(() => className(_el$4, styles().tag.count));
-        return _el$4;
-      }
-    }), null);
-    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 && className(_el$, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    return _el$;
-  })();
+var Tag = (props) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		insert(_el$3, () => props.label);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return memo(() => !!props.count)() && props.count > 0;
+			},
+			get children() {
+				var _el$4 = _tmpl$();
+				insert(_el$4, () => props.count);
+				effect(() => className(_el$4, styles().tag.count));
+				return _el$4;
+			}
+		}), null);
+		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 && className(_el$, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
 };
-export {
-  Tag
-};
-//# sourceMappingURL=tag.js.map
+//#endregion
+export { Tag };
+
+//# sourceMappingURL=tag.js.map

dist/esm/components/tag.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"tag.js","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","_$memo","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;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,WAAAF,OAAA,MAGsCP,MAAMU,KAAK;AAAAD,WAAAN,MAAAQ,gBAE5CC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,KAAA,MAAA,CAAA,CAAAd,MAAMe,KAAK,OAAIf,MAAMe,QAAQ;AAAA,MAAC;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAC,OAAAA;AAAAT,eAAAQ,OAAA,MACNjB,MAAMe,KAAK;AAAAI,eAAA,MAAAC,UAAAH,OAAhChB,SAASoB,IAAIN,KAAK,CAAA;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA;AAAAE,WAAAG,CAAAA,QAAA;AAAA,UAAAC,MALjBvB,MAAMwB,UAAQC,OAASxB,SAASoB,IAAIK,MAAIC,OAC3C1B,SAASoB,IAAIO,IAAI5B,MAAM6B,KAAK,GAACC,OAC7B7B,SAASoB,IAAIX;AAAKa,cAAAD,IAAAS,MAAA5B,KAAAqB,WAAAF,IAAAS,IAAAR;AAAAE,eAAAH,IAAAU,KAAAZ,UAAAjB,MAAAmB,IAAAU,IAAAP,IAAA;AAAAE,eAAAL,IAAAW,KAAAb,UAAAf,OAAAiB,IAAAW,IAAAN,IAAA;AAAAG,eAAAR,IAAAY,KAAAd,UAAAb,OAAAe,IAAAY,IAAAJ,IAAA;AAAA,aAAAR;AAAAA,IAAA,GAAA;AAAA,MAAAS,GAAAI;AAAAA,MAAAH,GAAAG;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAhC;AAAAA,EAAA,GAAA;AAOrC;"}
+{"version":3,"file":"tag.js","names":["Show","useStyles","tokens","Tag","props","color","colors","label","count","disabled","styles","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$insert","_$createComponent","when","_$memo","children","_el$4","_tmpl$","_$effect","_$className","tag","_p$","_v$","_v$2","base","_v$3","dot","_v$4","e","t","a","o","undefined"],"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"],"mappings":";;;;;AAIA,IAAaG,OAAOC,UAKd;CACJ,MAAMM,SAAST,WAAW;AAC1B,eAAA;EAAA,IAAAU,OAAAC,SAAA,EAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,SAAAF,aAGsCX,MAAMG,MAAK;AAAAU,SAAAN,MAAAO,gBAE5ClB,MAAI;GAAA,IAACmB,OAAI;AAAA,WAAEC,WAAA,CAAA,CAAAhB,MAAMI,MAAK,EAAA,IAAIJ,MAAMI,QAAQ;;GAAC,IAAAa,WAAA;IAAA,IAAAC,QAAAC,QAAA;AAAAN,WAAAK,aACNlB,MAAMI,MAAK;AAAAgB,iBAAAC,UAAAH,OAAhCZ,QAAQ,CAACgB,IAAIlB,MAAK,CAAA;AAAA,WAAAc;;GAAA,CAAA,EAAA,KAAA;AAAAE,UAAAG,QAAA;GAAA,IAAAC,MALjBxB,MAAMK,UAAQoB,OAASnB,QAAQ,CAACgB,IAAII,MAAIC,OAC3CrB,QAAQ,CAACgB,IAAIM,IAAI5B,MAAMC,MAAM,EAAA4B,OAC7BvB,QAAQ,CAACgB,IAAInB;AAAKqB,WAAAD,IAAAO,MAAAvB,KAAAF,WAAAkB,IAAAO,IAAAN;AAAAC,YAAAF,IAAAQ,KAAAV,UAAAd,MAAAgB,IAAAQ,IAAAN,KAAA;AAAAE,YAAAJ,IAAAS,KAAAX,UAAAZ,OAAAc,IAAAS,IAAAL,KAAA;AAAAE,YAAAN,IAAAU,KAAAZ,UAAAV,OAAAY,IAAAU,IAAAJ,KAAA;AAAA,UAAAN;KAAA;GAAAO,GAAAI,KAAAA;GAAAH,GAAAG,KAAAA;GAAAF,GAAAE,KAAAA;GAAAD,GAAAC,KAAAA;GAAA,CAAA;AAAA,SAAA3B;KAAA"}

dist/esm/components/theme.d.ts

 import { Accessor, JSX } from 'solid-js';
-export type Theme = 'light' | 'dark';
+export type TanStackDevtoolsTheme = 'light' | 'dark';
 type ThemeContextValue = {
-    theme: Accessor<Theme>;
-    setTheme: (theme: Theme) => void;
+    theme: Accessor<TanStackDevtoolsTheme>;
+    setTheme: (theme: TanStackDevtoolsTheme) => void;
 };
 export declare const ThemeContextProvider: (props: {
     children: JSX.Element;
-    theme: Theme;
+    theme: TanStackDevtoolsTheme;
 }) => JSX.Element;
 export declare function useTheme(): ThemeContextValue;
 export {};

dist/esm/components/theme.js

 import { createComponent } from "solid-js/web";
-import { createContext, createSignal, createEffect, useContext } from "solid-js";
-const ThemeContext = createContext(void 0);
-const ThemeContextProvider = (props) => {
-  const [theme, setTheme] = createSignal(props.theme);
-  createEffect(() => {
-    setTheme(props.theme);
-  });
-  return createComponent(ThemeContext.Provider, {
-    value: {
-      theme,
-      setTheme
-    },
-    get children() {
-      return props.children;
-    }
-  });
+import { createContext, createEffect, createSignal, useContext } from "solid-js";
+//#region src/components/theme.tsx
+var ThemeContext = createContext(void 0);
+var ThemeContextProvider = (props) => {
+	const [theme, setTheme] = createSignal(props.theme);
+	createEffect(() => {
+		setTheme(props.theme);
+	});
+	return createComponent(ThemeContext.Provider, {
+		value: {
+			theme,
+			setTheme
+		},
+		get children() {
+			return props.children;
+		}
+	});
 };
 function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeContextProvider");
-  }
-  return context;
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeContextProvider");
+	return context;
 }
-export {
-  ThemeContextProvider,
-  useTheme
-};
-//# sourceMappingURL=theme.js.map
+//#endregion
+export { ThemeContextProvider, useTheme };
+
+//# sourceMappingURL=theme.js.map

dist/esm/components/theme.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/components/theme.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, useContext } from 'solid-js'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport type Theme = 'light' | 'dark'\n\ntype ThemeContextValue = {\n  theme: Accessor<Theme>\n  setTheme: (theme: Theme) => void\n}\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\nexport const ThemeContextProvider = (props: {\n  children: JSX.Element\n  theme: Theme\n}) => {\n  const [theme, setTheme] = createSignal<Theme>(props.theme)\n  createEffect(() => {\n    setTheme(props.theme)\n  })\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeContextProvider')\n  }\n\n  return context\n}\n"],"names":["ThemeContext","createContext","undefined","ThemeContextProvider","props","theme","setTheme","createSignal","createEffect","_$createComponent","Provider","value","children","useTheme","context","useContext","Error"],"mappings":";;AASA,MAAMA,eAAeC,cAA6CC,MAAS;AAEpE,MAAMC,uBAAuBA,CAACC,UAG/B;AACJ,QAAM,CAACC,OAAOC,QAAQ,IAAIC,aAAoBH,MAAMC,KAAK;AACzDG,eAAa,MAAM;AACjBF,aAASF,MAAMC,KAAK;AAAA,EACtB,CAAC;AACD,SAAAI,gBACGT,aAAaU,UAAQ;AAAA,IAACC,OAAO;AAAA,MAAEN;AAAAA,MAAOC;AAAAA,IAAAA;AAAAA,IAAU,IAAAM,WAAA;AAAA,aAC9CR,MAAMQ;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;AAEO,SAASC,WAAW;AACzB,QAAMC,UAAUC,WAAWf,YAAY;AACvC,MAAI,CAACc,SAAS;AACZ,UAAM,IAAIE,MAAM,qDAAqD;AAAA,EACvE;AAEA,SAAOF;AACT;"}
+{"version":3,"file":"theme.js","names":["createContext","createEffect","createSignal","useContext","Accessor","JSX","TanStackDevtoolsTheme","ThemeContextValue","theme","setTheme","ThemeContext","undefined","ThemeContextProvider","props","children","Element","_$createComponent","Provider","value","useTheme","context","Error"],"sources":["../../../src/components/theme.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, useContext } from 'solid-js'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport type TanStackDevtoolsTheme = 'light' | 'dark'\n\ntype ThemeContextValue = {\n  theme: Accessor<TanStackDevtoolsTheme>\n  setTheme: (theme: TanStackDevtoolsTheme) => void\n}\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\nexport const ThemeContextProvider = (props: {\n  children: JSX.Element\n  theme: TanStackDevtoolsTheme\n}) => {\n  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(props.theme)\n  createEffect(() => {\n    setTheme(props.theme)\n  })\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme }}>\n      {props.children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeContextProvider')\n  }\n\n  return context\n}\n"],"mappings":";;;AASA,IAAMU,eAAeV,cAA6CW,KAAAA,EAAU;AAE5E,IAAaC,wBAAwBC,UAG/B;CACJ,MAAM,CAACL,OAAOC,YAAYP,aAAoCW,MAAML,MAAM;AAC1EP,oBAAmB;AACjBQ,WAASI,MAAML,MAAM;GACrB;AACF,QAAAQ,gBACGN,aAAaO,UAAQ;EAACC,OAAO;GAAEV;GAAOC;GAAU;EAAA,IAAAK,WAAA;AAAA,UAC9CD,MAAMC;;EAAQ,CAAA;;AAKrB,SAAgBK,WAAW;CACzB,MAAMC,UAAUjB,WAAWO,aAAa;AACxC,KAAI,CAACU,QACH,OAAM,IAAIC,MAAM,sDAAsD;AAGxE,QAAOD"}

dist/esm/components/tree.js

@@ -1,521 +0,497 @@
-import { createComponent, insert, memo, effect, className, template, addEventListener, setAttribute, delegateEvents } from "solid-js/web";
-import { createSignal, Show, For, Switch, Match } from "solid-js";
+import { css, useStyles } from "../styles/use-styles.js";
+import { CopiedCopier, Copier, ErrorCopier } from "./icons.js";
+import { addEventListener, className, createComponent, delegateEvents, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { For, Match, Show, Switch, createSignal } from "solid-js";
 import clsx from "clsx";
 import dayjs from "dayjs";
-import { useStyles, css } from "../styles/use-styles.js";
-import { Copier, CopiedCopier, ErrorCopier } from "./icons.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(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<span>,`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>[]`), _tmpl$9 = /* @__PURE__ */ template(`<span>...`), _tmpl$0 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$1 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{}`), _tmpl$12 = /* @__PURE__ */ template(`<span><span>{</span><span>}`), _tmpl$13 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$14 = /* @__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>`);
+//#region src/components/tree.tsx
+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(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<span>,`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>[]`), _tmpl$9 = /* @__PURE__ */ template(`<span>...`), _tmpl$0 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$1 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>\{}`), _tmpl$12 = /* @__PURE__ */ template(`<span><span>\{</span><span>}`), _tmpl$13 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$14 = /* @__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>`);
 function JsonTree(props) {
-  return createComponent(JsonValue, {
-    isRoot: true,
-    get value() {
-      return props.value;
-    },
-    get copyable() {
-      return props.copyable;
-    },
-    depth: 0,
-    get defaultExpansionDepth() {
-      return props.defaultExpansionDepth ?? 1;
-    },
-    path: "",
-    get collapsePaths() {
-      return props.collapsePaths;
-    },
-    get config() {
-      return props.config;
-    }
-  });
+	return createComponent(JsonValue, {
+		isRoot: true,
+		get value() {
+			return props.value;
+		},
+		get copyable() {
+			return props.copyable;
+		},
+		depth: 0,
+		get defaultExpansionDepth() {
+			return props.defaultExpansionDepth ?? 1;
+		},
+		path: "",
+		get collapsePaths() {
+			return props.collapsePaths;
+		},
+		get config() {
+			return props.config;
+		}
+	});
 }
 function JsonValue(props) {
-  const styles = useStyles();
-  return (() => {
-    var _el$ = _tmpl$();
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!(props.keyName && typeof props.value !== "object" && !Array.isArray(props.value)));
-      return () => _c$() && (() => {
-        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
-        _el$5.nextSibling;
-        insert(_el$2, () => props.keyName, _el$5);
-        effect(() => className(_el$2, styles().tree.valueKey));
-        return _el$2;
-      })();
-    })(), null);
-    insert(_el$, () => {
-      if (typeof props.value === "string") {
-        return (() => {
-          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
-          _el$9.nextSibling;
-          insert(_el$6, () => props.value, _el$9);
-          effect(() => className(_el$6, styles().tree.valueString));
-          return _el$6;
-        })();
-      }
-      if (typeof props.value === "number") {
-        return (() => {
-          var _el$0 = _tmpl$();
-          insert(_el$0, () => props.value);
-          effect(() => className(_el$0, styles().tree.valueNumber));
-          return _el$0;
-        })();
-      }
-      if (typeof props.value === "boolean") {
-        return (() => {
-          var _el$1 = _tmpl$();
-          insert(_el$1, () => String(props.value));
-          effect(() => className(_el$1, styles().tree.valueBoolean));
-          return _el$1;
-        })();
-      }
-      if (props.value === null) {
-        return (() => {
-          var _el$10 = _tmpl$4();
-          effect(() => className(_el$10, styles().tree.valueNull));
-          return _el$10;
-        })();
-      }
-      if (props.value === void 0) {
-        return (() => {
-          var _el$11 = _tmpl$5();
-          effect(() => className(_el$11, styles().tree.valueNull));
-          return _el$11;
-        })();
-      }
-      if (typeof props.value === "function") {
-        return (() => {
-          var _el$12 = _tmpl$();
-          insert(_el$12, () => String(props.value));
-          effect(() => className(_el$12, styles().tree.valueFunction));
-          return _el$12;
-        })();
-      }
-      if (Array.isArray(props.value)) {
-        return createComponent(ArrayValue, {
-          get defaultExpansionDepth() {
-            return props.defaultExpansionDepth;
-          },
-          get depth() {
-            return props.depth;
-          },
-          get copyable() {
-            return props.copyable;
-          },
-          get keyName() {
-            return props.keyName;
-          },
-          get value() {
-            return props.value;
-          },
-          get collapsePaths() {
-            return props.collapsePaths;
-          },
-          get path() {
-            return props.path;
-          },
-          get config() {
-            return props.config;
-          }
-        });
-      }
-      if (typeof props.value === "object") {
-        return createComponent(ObjectValue, {
-          get defaultExpansionDepth() {
-            return props.defaultExpansionDepth;
-          },
-          get depth() {
-            return props.depth;
-          },
-          get copyable() {
-            return props.copyable;
-          },
-          get keyName() {
-            return props.keyName;
-          },
-          get value() {
-            return props.value;
-          },
-          get collapsePaths() {
-            return props.collapsePaths;
-          },
-          get path() {
-            return props.path;
-          },
-          get config() {
-            return props.config;
-          }
-        });
-      }
-      return _tmpl$();
-    }, null);
-    insert(_el$, (() => {
-      var _c$2 = memo(() => !!props.copyable);
-      return () => _c$2() && (() => {
-        var _el$14 = _tmpl$6();
-        insert(_el$14, createComponent(CopyButton, {
-          get value() {
-            return props.value;
-          }
-        }));
-        effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
-        return _el$14;
-      })();
-    })(), null);
-    insert(_el$, (() => {
-      var _c$3 = memo(() => !!(props.isLastKey || props.isRoot));
-      return () => _c$3() ? "" : _tmpl$7();
-    })(), null);
-    effect(() => className(_el$, styles().tree.valueContainer(props.isRoot ?? false)));
-    return _el$;
-  })();
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, (() => {
+			var _c$ = memo(() => !!(props.keyName && typeof props.value !== "object" && !Array.isArray(props.value)));
+			return () => _c$() && (() => {
+				var _el$2 = _tmpl$2(), _el$5 = _el$2.firstChild.nextSibling;
+				_el$5.nextSibling;
+				insert(_el$2, () => props.keyName, _el$5);
+				effect(() => className(_el$2, styles().tree.valueKey));
+				return _el$2;
+			})();
+		})(), null);
+		insert(_el$, () => {
+			if (typeof props.value === "string") return (() => {
+				var _el$6 = _tmpl$3(), _el$9 = _el$6.firstChild.nextSibling;
+				_el$9.nextSibling;
+				insert(_el$6, () => props.value, _el$9);
+				effect(() => className(_el$6, styles().tree.valueString));
+				return _el$6;
+			})();
+			if (typeof props.value === "number") return (() => {
+				var _el$0 = _tmpl$();
+				insert(_el$0, () => props.value);
+				effect(() => className(_el$0, styles().tree.valueNumber));
+				return _el$0;
+			})();
+			if (typeof props.value === "boolean") return (() => {
+				var _el$1 = _tmpl$();
+				insert(_el$1, () => String(props.value));
+				effect(() => className(_el$1, styles().tree.valueBoolean));
+				return _el$1;
+			})();
+			if (props.value === null) return (() => {
+				var _el$10 = _tmpl$4();
+				effect(() => className(_el$10, styles().tree.valueNull));
+				return _el$10;
+			})();
+			if (props.value === void 0) return (() => {
+				var _el$11 = _tmpl$5();
+				effect(() => className(_el$11, styles().tree.valueNull));
+				return _el$11;
+			})();
+			if (typeof props.value === "function") return (() => {
+				var _el$12 = _tmpl$();
+				insert(_el$12, () => String(props.value));
+				effect(() => className(_el$12, styles().tree.valueFunction));
+				return _el$12;
+			})();
+			if (Array.isArray(props.value)) return createComponent(ArrayValue, {
+				get defaultExpansionDepth() {
+					return props.defaultExpansionDepth;
+				},
+				get depth() {
+					return props.depth;
+				},
+				get copyable() {
+					return props.copyable;
+				},
+				get keyName() {
+					return props.keyName;
+				},
+				get value() {
+					return props.value;
+				},
+				get collapsePaths() {
+					return props.collapsePaths;
+				},
+				get path() {
+					return props.path;
+				},
+				get config() {
+					return props.config;
+				}
+			});
+			if (typeof props.value === "object") return createComponent(ObjectValue, {
+				get defaultExpansionDepth() {
+					return props.defaultExpansionDepth;
+				},
+				get depth() {
+					return props.depth;
+				},
+				get copyable() {
+					return props.copyable;
+				},
+				get keyName() {
+					return props.keyName;
+				},
+				get value() {
+					return props.value;
+				},
+				get collapsePaths() {
+					return props.collapsePaths;
+				},
+				get path() {
+					return props.path;
+				},
+				get config() {
+					return props.config;
+				}
+			});
+			return _tmpl$();
+		}, null);
+		insert(_el$, (() => {
+			var _c$2 = memo(() => !!props.copyable);
+			return () => _c$2() && (() => {
+				var _el$14 = _tmpl$6();
+				insert(_el$14, createComponent(CopyButton, { get value() {
+					return props.value;
+				} }));
+				effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
+				return _el$14;
+			})();
+		})(), null);
+		insert(_el$, (() => {
+			var _c$3 = memo(() => !!(props.isLastKey || props.isRoot));
+			return () => _c$3() ? "" : _tmpl$7();
+		})(), null);
+		effect(() => className(_el$, styles().tree.valueContainer(props.isRoot ?? false)));
+		return _el$;
+	})();
 }
-const ArrayValue = (props) => {
-  const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
-  if (props.value.length === 0) {
-    return (() => {
-      var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild;
-      insert(_el$16, (() => {
-        var _c$4 = memo(() => !!props.keyName);
-        return () => _c$4() && (() => {
-          var _el$18 = _tmpl$2(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
-          _el$21.nextSibling;
-          insert(_el$18, () => props.keyName, _el$21);
-          effect(() => className(_el$18, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-          return _el$18;
-        })();
-      })(), _el$17);
-      effect((_p$) => {
-        var _v$ = styles().tree.expanderContainer, _v$2 = styles().tree.valueBraces;
-        _v$ !== _p$.e && className(_el$16, _p$.e = _v$);
-        _v$2 !== _p$.t && className(_el$17, _p$.t = _v$2);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
-      return _el$16;
-    })();
-  }
-  return (() => {
-    var _el$22 = _tmpl$0(), _el$23 = _el$22.firstChild, _el$26 = _el$23.nextSibling;
-    insert(_el$22, createComponent(Expander, {
-      onClick: () => setExpanded(!expanded()),
-      get expanded() {
-        return expanded();
-      }
-    }), _el$23);
-    insert(_el$22, (() => {
-      var _c$5 = memo(() => !!props.keyName);
-      return () => _c$5() && (() => {
-        var _el$27 = _tmpl$1(), _el$28 = _el$27.firstChild, _el$33 = _el$28.nextSibling, _el$29 = _el$33.nextSibling, _el$31 = _el$29.nextSibling, _el$32 = _el$31.firstChild;
-        _el$27.$$click = (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-          setExpanded(!expanded());
-        };
-        insert(_el$27, () => props.keyName, _el$33);
-        insert(_el$31, () => props.value.length, _el$32);
-        effect((_p$) => {
-          var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
-          _v$6 !== _p$.e && className(_el$27, _p$.e = _v$6);
-          _v$7 !== _p$.t && className(_el$31, _p$.t = _v$7);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        return _el$27;
-      })();
-    })(), _el$23);
-    insert(_el$22, createComponent(Show, {
-      get when() {
-        return expanded();
-      },
-      get children() {
-        var _el$24 = _tmpl$();
-        insert(_el$24, createComponent(For, {
-          get each() {
-            return props.value;
-          },
-          children: (item, i) => {
-            const isLastKey = i() === props.value.length - 1;
-            return createComponent(JsonValue, {
-              get copyable() {
-                return props.copyable;
-              },
-              value: item,
-              isLastKey,
-              get defaultExpansionDepth() {
-                return props.defaultExpansionDepth;
-              },
-              get depth() {
-                return props.depth + 1;
-              },
-              get collapsePaths() {
-                return props.collapsePaths;
-              },
-              get path() {
-                return memo(() => !!props.path)() ? `${props.path}[${i()}]` : `[${i()}]`;
-              },
-              get config() {
-                return props.config;
-              }
-            });
-          }
-        }));
-        effect(() => className(_el$24, styles().tree.expandedLine(Boolean(props.keyName))));
-        return _el$24;
-      }
-    }), _el$26);
-    insert(_el$22, createComponent(Show, {
-      get when() {
-        return !expanded();
-      },
-      get children() {
-        var _el$25 = _tmpl$9();
-        _el$25.$$click = (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-          setExpanded(!expanded());
-        };
-        effect(() => className(_el$25, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$25;
-      }
-    }), _el$26);
-    effect((_p$) => {
-      var _v$3 = styles().tree.expanderContainer, _v$4 = styles().tree.valueBraces, _v$5 = styles().tree.valueBraces;
-      _v$3 !== _p$.e && className(_el$22, _p$.e = _v$3);
-      _v$4 !== _p$.t && className(_el$23, _p$.t = _v$4);
-      _v$5 !== _p$.a && className(_el$26, _p$.a = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$22;
-  })();
+var ArrayValue = (props) => {
+	const styles = useStyles();
+	const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
+	if (props.value.length === 0) return (() => {
+		var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild;
+		insert(_el$16, (() => {
+			var _c$4 = memo(() => !!props.keyName);
+			return () => _c$4() && (() => {
+				var _el$18 = _tmpl$2(), _el$21 = _el$18.firstChild.nextSibling;
+				_el$21.nextSibling;
+				insert(_el$18, () => props.keyName, _el$21);
+				effect(() => className(_el$18, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+				return _el$18;
+			})();
+		})(), _el$17);
+		effect((_p$) => {
+			var _v$ = styles().tree.expanderContainer, _v$2 = styles().tree.valueBraces;
+			_v$ !== _p$.e && className(_el$16, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$17, _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$16;
+	})();
+	return (() => {
+		var _el$22 = _tmpl$0(), _el$23 = _el$22.firstChild, _el$26 = _el$23.nextSibling;
+		insert(_el$22, createComponent(Expander, {
+			onClick: () => setExpanded(!expanded()),
+			get expanded() {
+				return expanded();
+			}
+		}), _el$23);
+		insert(_el$22, (() => {
+			var _c$5 = memo(() => !!props.keyName);
+			return () => _c$5() && (() => {
+				var _el$27 = _tmpl$1(), _el$33 = _el$27.firstChild.nextSibling, _el$31 = _el$33.nextSibling.nextSibling, _el$32 = _el$31.firstChild;
+				_el$27.$$click = (e) => {
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+					setExpanded(!expanded());
+				};
+				insert(_el$27, () => props.keyName, _el$33);
+				insert(_el$31, () => props.value.length, _el$32);
+				effect((_p$) => {
+					var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
+					_v$6 !== _p$.e && className(_el$27, _p$.e = _v$6);
+					_v$7 !== _p$.t && className(_el$31, _p$.t = _v$7);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$27;
+			})();
+		})(), _el$23);
+		insert(_el$22, createComponent(Show, {
+			get when() {
+				return expanded();
+			},
+			get children() {
+				var _el$24 = _tmpl$();
+				insert(_el$24, createComponent(For, {
+					get each() {
+						return props.value;
+					},
+					children: (item, i) => {
+						return createComponent(JsonValue, {
+							get copyable() {
+								return props.copyable;
+							},
+							value: item,
+							isLastKey: i() === props.value.length - 1,
+							get defaultExpansionDepth() {
+								return props.defaultExpansionDepth;
+							},
+							get depth() {
+								return props.depth + 1;
+							},
+							get collapsePaths() {
+								return props.collapsePaths;
+							},
+							get path() {
+								return memo(() => !!props.path)() ? `${props.path}[${i()}]` : `[${i()}]`;
+							},
+							get config() {
+								return props.config;
+							}
+						});
+					}
+				}));
+				effect(() => className(_el$24, styles().tree.expandedLine(Boolean(props.keyName))));
+				return _el$24;
+			}
+		}), _el$26);
+		insert(_el$22, createComponent(Show, {
+			get when() {
+				return !expanded();
+			},
+			get children() {
+				var _el$25 = _tmpl$9();
+				_el$25.$$click = (e) => {
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+					setExpanded(!expanded());
+				};
+				effect(() => className(_el$25, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+				return _el$25;
+			}
+		}), _el$26);
+		effect((_p$) => {
+			var _v$3 = styles().tree.expanderContainer, _v$4 = styles().tree.valueBraces, _v$5 = styles().tree.valueBraces;
+			_v$3 !== _p$.e && className(_el$22, _p$.e = _v$3);
+			_v$4 !== _p$.t && className(_el$23, _p$.t = _v$4);
+			_v$5 !== _p$.a && className(_el$26, _p$.a = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$22;
+	})();
 };
-const ObjectValue = (props) => {
-  const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
-  const keys = Object.keys(props.value);
-  const lastKeyName = keys[keys.length - 1];
-  if (props.value instanceof Date) {
-    return (() => {
-      var _el$34 = _tmpl$10(), _el$35 = _el$34.firstChild;
-      insert(_el$34, (() => {
-        var _c$6 = memo(() => !!props.keyName);
-        return () => _c$6() && (() => {
-          var _el$36 = _tmpl$2(), _el$37 = _el$36.firstChild, _el$39 = _el$37.nextSibling;
-          _el$39.nextSibling;
-          insert(_el$36, () => props.keyName, _el$39);
-          effect(() => className(_el$36, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-          return _el$36;
-        })();
-      })(), _el$35);
-      insert(_el$35, () => dayjs(props.value).format(props.config?.dateFormat ? props.config.dateFormat : "DDMMMYY"));
-      effect((_p$) => {
-        var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces;
-        _v$8 !== _p$.e && className(_el$34, _p$.e = _v$8);
-        _v$9 !== _p$.t && className(_el$35, _p$.t = _v$9);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
-      return _el$34;
-    })();
-  }
-  if (keys.length === 0) {
-    return (() => {
-      var _el$40 = _tmpl$11(), _el$41 = _el$40.firstChild;
-      insert(_el$40, (() => {
-        var _c$7 = memo(() => !!props.keyName);
-        return () => _c$7() && (() => {
-          var _el$42 = _tmpl$2(), _el$43 = _el$42.firstChild, _el$45 = _el$43.nextSibling;
-          _el$45.nextSibling;
-          insert(_el$42, () => props.keyName, _el$45);
-          effect(() => className(_el$42, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-          return _el$42;
-        })();
-      })(), _el$41);
-      effect((_p$) => {
-        var _v$0 = styles().tree.expanderContainer, _v$1 = styles().tree.valueBraces;
-        _v$0 !== _p$.e && className(_el$40, _p$.e = _v$0);
-        _v$1 !== _p$.t && className(_el$41, _p$.t = _v$1);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
-      return _el$40;
-    })();
-  }
-  return (() => {
-    var _el$46 = _tmpl$12(), _el$47 = _el$46.firstChild, _el$50 = _el$47.nextSibling;
-    insert(_el$46, (() => {
-      var _c$8 = memo(() => !!props.keyName);
-      return () => _c$8() && createComponent(Expander, {
-        onClick: () => setExpanded(!expanded()),
-        get expanded() {
-          return expanded();
-        }
-      });
-    })(), _el$47);
-    insert(_el$46, (() => {
-      var _c$9 = memo(() => !!props.keyName);
-      return () => _c$9() && (() => {
-        var _el$51 = _tmpl$1(), _el$52 = _el$51.firstChild, _el$57 = _el$52.nextSibling, _el$53 = _el$57.nextSibling, _el$55 = _el$53.nextSibling, _el$56 = _el$55.firstChild;
-        _el$51.$$click = (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-          setExpanded(!expanded());
-        };
-        insert(_el$51, () => props.keyName, _el$57);
-        insert(_el$55, () => keys.length, _el$56);
-        effect((_p$) => {
-          var _v$13 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$14 = styles().tree.info;
-          _v$13 !== _p$.e && className(_el$51, _p$.e = _v$13);
-          _v$14 !== _p$.t && className(_el$55, _p$.t = _v$14);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        return _el$51;
-      })();
-    })(), _el$47);
-    insert(_el$46, createComponent(Show, {
-      get when() {
-        return expanded();
-      },
-      get children() {
-        var _el$48 = _tmpl$();
-        insert(_el$48, createComponent(For, {
-          each: keys,
-          children: (k) => createComponent(JsonValue, {
-            get value() {
-              return props.value[k];
-            },
-            keyName: k,
-            isLastKey: lastKeyName === k,
-            get copyable() {
-              return props.copyable;
-            },
-            get defaultExpansionDepth() {
-              return props.defaultExpansionDepth;
-            },
-            get depth() {
-              return props.depth + 1;
-            },
-            get collapsePaths() {
-              return props.collapsePaths;
-            },
-            get path() {
-              return `${props.path}${props.path ? "." : ""}${k}`;
-            },
-            get config() {
-              return props.config;
-            }
-          })
-        }));
-        effect(() => className(_el$48, styles().tree.expandedLine(Boolean(props.keyName))));
-        return _el$48;
-      }
-    }), _el$50);
-    insert(_el$46, createComponent(Show, {
-      get when() {
-        return !expanded();
-      },
-      get children() {
-        var _el$49 = _tmpl$9();
-        _el$49.$$click = (e) => {
-          e.stopPropagation();
-          e.stopImmediatePropagation();
-          setExpanded(!expanded());
-        };
-        effect(() => className(_el$49, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$49;
-      }
-    }), _el$50);
-    effect((_p$) => {
-      var _v$10 = styles().tree.expanderContainer, _v$11 = styles().tree.valueBraces, _v$12 = styles().tree.valueBraces;
-      _v$10 !== _p$.e && className(_el$46, _p$.e = _v$10);
-      _v$11 !== _p$.t && className(_el$47, _p$.t = _v$11);
-      _v$12 !== _p$.a && className(_el$50, _p$.a = _v$12);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$46;
-  })();
+var ObjectValue = (props) => {
+	const styles = useStyles();
+	const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
+	const keys = Object.keys(props.value);
+	const lastKeyName = keys[keys.length - 1];
+	if (props.value instanceof Date) return (() => {
+		var _el$34 = _tmpl$10(), _el$35 = _el$34.firstChild;
+		insert(_el$34, (() => {
+			var _c$6 = memo(() => !!props.keyName);
+			return () => _c$6() && (() => {
+				var _el$36 = _tmpl$2(), _el$39 = _el$36.firstChild.nextSibling;
+				_el$39.nextSibling;
+				insert(_el$36, () => props.keyName, _el$39);
+				effect(() => className(_el$36, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+				return _el$36;
+			})();
+		})(), _el$35);
+		insert(_el$35, () => dayjs(props.value).format(props.config?.dateFormat ? props.config.dateFormat : "DDMMMYY"));
+		effect((_p$) => {
+			var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces;
+			_v$8 !== _p$.e && className(_el$34, _p$.e = _v$8);
+			_v$9 !== _p$.t && className(_el$35, _p$.t = _v$9);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$34;
+	})();
+	if (keys.length === 0) return (() => {
+		var _el$40 = _tmpl$11(), _el$41 = _el$40.firstChild;
+		insert(_el$40, (() => {
+			var _c$7 = memo(() => !!props.keyName);
+			return () => _c$7() && (() => {
+				var _el$42 = _tmpl$2(), _el$45 = _el$42.firstChild.nextSibling;
+				_el$45.nextSibling;
+				insert(_el$42, () => props.keyName, _el$45);
+				effect(() => className(_el$42, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+				return _el$42;
+			})();
+		})(), _el$41);
+		effect((_p$) => {
+			var _v$0 = styles().tree.expanderContainer, _v$1 = styles().tree.valueBraces;
+			_v$0 !== _p$.e && className(_el$40, _p$.e = _v$0);
+			_v$1 !== _p$.t && className(_el$41, _p$.t = _v$1);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$40;
+	})();
+	return (() => {
+		var _el$46 = _tmpl$12(), _el$47 = _el$46.firstChild, _el$50 = _el$47.nextSibling;
+		insert(_el$46, (() => {
+			var _c$8 = memo(() => !!props.keyName);
+			return () => _c$8() && createComponent(Expander, {
+				onClick: () => setExpanded(!expanded()),
+				get expanded() {
+					return expanded();
+				}
+			});
+		})(), _el$47);
+		insert(_el$46, (() => {
+			var _c$9 = memo(() => !!props.keyName);
+			return () => _c$9() && (() => {
+				var _el$51 = _tmpl$1(), _el$57 = _el$51.firstChild.nextSibling, _el$55 = _el$57.nextSibling.nextSibling, _el$56 = _el$55.firstChild;
+				_el$51.$$click = (e) => {
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+					setExpanded(!expanded());
+				};
+				insert(_el$51, () => props.keyName, _el$57);
+				insert(_el$55, () => keys.length, _el$56);
+				effect((_p$) => {
+					var _v$13 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$14 = styles().tree.info;
+					_v$13 !== _p$.e && className(_el$51, _p$.e = _v$13);
+					_v$14 !== _p$.t && className(_el$55, _p$.t = _v$14);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$51;
+			})();
+		})(), _el$47);
+		insert(_el$46, createComponent(Show, {
+			get when() {
+				return expanded();
+			},
+			get children() {
+				var _el$48 = _tmpl$();
+				insert(_el$48, createComponent(For, {
+					each: keys,
+					children: (k) => createComponent(JsonValue, {
+						get value() {
+							return props.value[k];
+						},
+						keyName: k,
+						isLastKey: lastKeyName === k,
+						get copyable() {
+							return props.copyable;
+						},
+						get defaultExpansionDepth() {
+							return props.defaultExpansionDepth;
+						},
+						get depth() {
+							return props.depth + 1;
+						},
+						get collapsePaths() {
+							return props.collapsePaths;
+						},
+						get path() {
+							return `${props.path}${props.path ? "." : ""}${k}`;
+						},
+						get config() {
+							return props.config;
+						}
+					})
+				}));
+				effect(() => className(_el$48, styles().tree.expandedLine(Boolean(props.keyName))));
+				return _el$48;
+			}
+		}), _el$50);
+		insert(_el$46, createComponent(Show, {
+			get when() {
+				return !expanded();
+			},
+			get children() {
+				var _el$49 = _tmpl$9();
+				_el$49.$$click = (e) => {
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+					setExpanded(!expanded());
+				};
+				effect(() => className(_el$49, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+				return _el$49;
+			}
+		}), _el$50);
+		effect((_p$) => {
+			var _v$10 = styles().tree.expanderContainer, _v$11 = styles().tree.valueBraces, _v$12 = styles().tree.valueBraces;
+			_v$10 !== _p$.e && className(_el$46, _p$.e = _v$10);
+			_v$11 !== _p$.t && className(_el$47, _p$.t = _v$11);
+			_v$12 !== _p$.a && className(_el$50, _p$.a = _v$12);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$46;
+	})();
 };
-const CopyButton = (props) => {
-  const styles = useStyles();
-  const [copyState, setCopyState] = createSignal("NoCopy");
-  return (() => {
-    var _el$58 = _tmpl$13();
-    addEventListener(_el$58, "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$58, 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$15 = styles().tree.actionButton, _v$16 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
-      _v$15 !== _p$.e && className(_el$58, _p$.e = _v$15);
-      _v$16 !== _p$.t && setAttribute(_el$58, "aria-label", _p$.t = _v$16);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$58;
-  })();
+var CopyButton = (props) => {
+	const styles = useStyles();
+	const [copyState, setCopyState] = createSignal("NoCopy");
+	return (() => {
+		var _el$58 = _tmpl$13();
+		addEventListener(_el$58, "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$58, 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$15 = styles().tree.actionButton, _v$16 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
+			_v$15 !== _p$.e && className(_el$58, _p$.e = _v$15);
+			_v$16 !== _p$.t && setAttribute(_el$58, "aria-label", _p$.t = _v$16);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$58;
+	})();
 };
-const Expander = (props) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$59 = _tmpl$14();
-    addEventListener(_el$59, "click", props.onClick, true);
-    effect(() => className(_el$59, clsx(styles().tree.expander, css`
+var Expander = (props) => {
+	const styles = useStyles();
+	return (() => {
+		var _el$59 = _tmpl$14();
+		addEventListener(_el$59, "click", props.onClick, true);
+		effect(() => className(_el$59, clsx(styles().tree.expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
@@ -527,9 +503,9 @@ `, props.expanded && css`
           `)));
-    return _el$59;
-  })();
+		return _el$59;
+	})();
 };
 delegateEvents(["click"]);
-export {
-  JsonTree
-};
-//# sourceMappingURL=tree.js.map
+//#endregion
+export { JsonTree };
+
+//# sourceMappingURL=tree.js.map

dist/esm/components/tree.js.map

@@ -1,1 +0,1 @@
-{"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 dayjs from 'dayjs'\n\n// css\nimport { css, useStyles } from '../styles/use-styles'\n\n// icons\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\n// utils\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n\n  config?: { dateFormat?: string }\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n      config={props.config}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n\n  config?: { dateFormat?: string }\n}) {\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>\n      {props.keyName &&\n        typeof props.value !== 'object' &&\n        !Array.isArray(props.value) && (\n          <span class={styles().tree.valueKey}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n      {(() => {\n        if (typeof props.value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>\n              &quot;{props.value}&quot;\n            </span>\n          )\n        }\n\n        if (typeof props.value === 'number') {\n          return <span class={styles().tree.valueNumber}>{props.value}</span>\n        }\n\n        if (typeof props.value === 'boolean') {\n          return (\n            <span class={styles().tree.valueBoolean}>\n              {String(props.value)}\n            </span>\n          )\n        }\n\n        if (props.value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n\n        if (props.value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n\n        if (typeof props.value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>\n              {String(props.value)}\n            </span>\n          )\n        }\n\n        if (Array.isArray(props.value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n              config={props.config}\n            />\n          )\n        }\n\n        if (typeof props.value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n              config={props.config}\n            />\n          )\n        }\n\n        return <span />\n      })()}\n      {props.copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={props.value} />\n        </div>\n      )}\n      {props.isLastKey || props.isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = (props: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n  config?: { dateFormat?: string }\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  if (props.value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{props.value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={props.value}>\n            {(item, i) => {\n              const isLastKey = i() === props.value.length - 1\n              return (\n                <JsonValue\n                  copyable={props.copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}\n                  config={props.config}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\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 = (props: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n  config?: { dateFormat?: string }\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  const keys = Object.keys(props.value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (props.value instanceof Date) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>\n          {dayjs(props.value).format(\n            props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',\n          )}\n        </span>\n      </span>\n    )\n  }\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {props.keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={props.value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={props.copyable}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={`${props.path}${props.path ? '.' : ''}${k}`}\n                  config={props.config}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\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\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\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; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\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"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","config","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","keyName","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","_c$2","_el$14","_tmpl$6","CopyButton","clsx","actions","_c$3","isLastKey","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_c$4","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_c$5","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","Date","_el$34","_tmpl$10","_el$35","_c$6","_el$36","_el$37","_el$39","dayjs","format","dateFormat","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_c$7","_el$42","_el$43","_el$45","_v$0","_v$1","_el$46","_tmpl$12","_el$47","_el$50","_c$8","_c$9","_el$51","_el$52","_el$57","_el$53","_el$55","_el$56","_v$13","_v$14","_el$48","k","_el$49","_v$10","_v$11","_v$12","copyState","setCopyState","_el$58","_tmpl$13","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$15","actionButton","_v$16","_$setAttribute","_el$59","_tmpl$14","expander","css","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"tree.js","names":["For","Match","Show","Switch","createSignal","clsx","dayjs","css","useStyles","CopiedCopier","Copier","ErrorCopier","CollapsiblePaths","JsonTree","TData","props","value","copyable","defaultExpansionDepth","collapsePaths","Array","TName","config","dateFormat","_$createComponent","JsonValue","isRoot","depth","path","keyName","isLastKey","styles","_el$","_tmpl$","_$insert","_c$","_$memo","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_el$4","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","_el$8","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_c$2","_el$14","_tmpl$6","CopyButton","actions","_c$3","_tmpl$7","valueContainer","expanded","setExpanded","includes","length","_el$16","_tmpl$8","_el$17","_c$4","_el$18","_el$19","_el$21","_el$20","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_c$5","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","when","children","_el$24","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","Record","keys","Object","lastKeyName","Date","_el$34","_tmpl$10","_el$35","_c$6","_el$36","_el$37","_el$39","_el$38","format","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_c$7","_el$42","_el$43","_el$45","_el$44","_v$0","_v$1","_el$46","_tmpl$12","_el$47","_el$50","_c$8","_c$9","_el$51","_el$52","_el$57","_el$53","_el$55","_el$56","_v$13","_v$14","_el$48","k","_el$49","_v$10","_v$11","_v$12","CopyState","copyState","setCopyState","_el$58","_tmpl$13","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","theme","_v$15","actionButton","_v$16","_$setAttribute","_el$59","_tmpl$14","expander","_$delegateEvents"],"sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport dayjs from 'dayjs'\n\n// css\nimport { css, useStyles } from '../styles/use-styles'\n\n// icons\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\n// utils\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n\n  config?: { dateFormat?: string }\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n      config={props.config}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n\n  config?: { dateFormat?: string }\n}) {\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>\n      {props.keyName &&\n        typeof props.value !== 'object' &&\n        !Array.isArray(props.value) && (\n          <span class={styles().tree.valueKey}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n      {(() => {\n        if (typeof props.value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>\n              &quot;{props.value}&quot;\n            </span>\n          )\n        }\n\n        if (typeof props.value === 'number') {\n          return <span class={styles().tree.valueNumber}>{props.value}</span>\n        }\n\n        if (typeof props.value === 'boolean') {\n          return (\n            <span class={styles().tree.valueBoolean}>\n              {String(props.value)}\n            </span>\n          )\n        }\n\n        if (props.value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n\n        if (props.value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n\n        if (typeof props.value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>\n              {String(props.value)}\n            </span>\n          )\n        }\n\n        if (Array.isArray(props.value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n              config={props.config}\n            />\n          )\n        }\n\n        if (typeof props.value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n              config={props.config}\n            />\n          )\n        }\n\n        return <span />\n      })()}\n      {props.copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={props.value} />\n        </div>\n      )}\n      {props.isLastKey || props.isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = (props: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n  config?: { dateFormat?: string }\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  if (props.value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{props.value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={props.value}>\n            {(item, i) => {\n              const isLastKey = i() === props.value.length - 1\n              return (\n                <JsonValue\n                  copyable={props.copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}\n                  config={props.config}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\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 = (props: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n  config?: { dateFormat?: string }\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  const keys = Object.keys(props.value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (props.value instanceof Date) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>\n          {dayjs(props.value).format(\n            props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',\n          )}\n        </span>\n      </span>\n    )\n  }\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {props.keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {props.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;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={props.value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={props.copyable}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={`${props.path}${props.path ? '.' : ''}${k}`}\n                  config={props.config}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\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\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\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; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\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"],"mappings":"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"}

dist/esm/icons.js

 import { CheckCircleIcon, ChevronDownIcon, CloseIcon, Cogs, CopiedCopier, Copier, ErrorCopier, ExternalLinkIcon, GeoTag, Keyboard, Link, List, PackageIcon, PageSearch, PiP, SearchIcon, SettingsCog, SettingsIcon, SocialBubble, X, XCircleIcon } from "./components/icons.js";
-export {
-  CheckCircleIcon,
-  ChevronDownIcon,
-  CloseIcon,
-  Cogs,
-  CopiedCopier,
-  Copier,
-  ErrorCopier,
-  ExternalLinkIcon,
-  GeoTag,
-  Keyboard,
-  Link,
-  List,
-  PackageIcon,
-  PageSearch,
-  PiP,
-  SearchIcon,
-  SettingsCog,
-  SettingsIcon,
-  SocialBubble,
-  X,
-  XCircleIcon
-};
-//# sourceMappingURL=icons.js.map
+export { CheckCircleIcon, ChevronDownIcon, CloseIcon, Cogs, CopiedCopier, Copier, ErrorCopier, ExternalLinkIcon, GeoTag, Keyboard, Link, List, PackageIcon, PageSearch, PiP, SearchIcon, SettingsCog, SettingsIcon, SocialBubble, X, XCircleIcon };

dist/esm/index.d.ts

@@ -12,2 +12,3 @@ export { Checkbox } from './components/checkbox.js';
 export { useTheme, ThemeContextProvider } from './components/theme.js';
+export type { TanStackDevtoolsTheme } from './components/theme.js';
 export { CheckCircleIcon, ChevronDownIcon, CloseIcon, ExternalLinkIcon, PackageIcon, SearchIcon, SettingsIcon, X, XCircleIcon, } from './icons.js';

dist/esm/index.js

@@ -0,1 +1,2 @@
+import { ThemeContextProvider, useTheme } from "./components/theme.js";
 import { Checkbox } from "./components/checkbox.js";
@@ -5,2 +6,3 @@ import { Input } from "./components/input.js";
 import { TanStackLogo } from "./components/logo.js";
+import { CheckCircleIcon, ChevronDownIcon, CloseIcon, ExternalLinkIcon, PackageIcon, SearchIcon, SettingsIcon, X, XCircleIcon } from "./components/icons.js";
 import { JsonTree } from "./components/tree.js";
@@ -12,31 +14,2 @@ import { Button } from "./components/button.js";
 import { Header, HeaderLogo } from "./components/header.js";
-import { ThemeContextProvider, useTheme } from "./components/theme.js";
-import { CheckCircleIcon, ChevronDownIcon, CloseIcon, ExternalLinkIcon, PackageIcon, SearchIcon, SettingsIcon, X, XCircleIcon } from "./components/icons.js";
-export {
-  Button,
-  CheckCircleIcon,
-  Checkbox,
-  ChevronDownIcon,
-  CloseIcon,
-  ExternalLinkIcon,
-  Header,
-  HeaderLogo,
-  Input,
-  JsonTree,
-  MainPanel,
-  PackageIcon,
-  SearchIcon,
-  Section,
-  SectionDescription,
-  SectionIcon,
-  SectionTitle,
-  Select,
-  SettingsIcon,
-  Tag,
-  TanStackLogo,
-  ThemeContextProvider,
-  X,
-  XCircleIcon,
-  useTheme
-};
-//# sourceMappingURL=index.js.map
+export { Button, CheckCircleIcon, Checkbox, ChevronDownIcon, CloseIcon, ExternalLinkIcon, Header, HeaderLogo, Input, JsonTree, MainPanel, PackageIcon, SearchIcon, Section, SectionDescription, SectionIcon, SectionTitle, Select, SettingsIcon, Tag, TanStackLogo, ThemeContextProvider, X, XCircleIcon, useTheme };

dist/esm/styles/tokens.js

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

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","names":[],"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"],"mappings":";AAAA,IAAa,SAAS;CACpB,QAAQ;EACN,SAAS;EACT,SAAS;EACT,aAAa;EACb,OAAO;EACP,OAAO;EACP,SAAS;GACP,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,UAAU;GACR,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,MAAM;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,KAAK;GACH,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,QAAQ;GACN,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,QAAQ;GACN,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACN;EACF;CACD,OAAO;EACL,KAAK;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,GAAG;EACJ;CACD,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACR;EACD,YAAY;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GACN,MAAM;GACN,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,UAAU;GACV,MAAM;GACN,WAAW;GACX,OAAO;GACR;EACD,YAAY;GACV,MAAM;GACN,MAAM;GACP;EACF;CACD,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR;CACD,QAAQ,EACN,QAAQ;EACN,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACP,EACF;CACD,MAAM;EACJ,GAAG;EACH,KAAM;EACN,IAAK;EACL,GAAG;EACH,KAAK;EACL,GAAG;EACH,KAAK;EACL,GAAG;EACH,KAAK;EACL,GAAG;EACH,KAAK;EACL,GAAG;EACH,KAAK;EACL,GAAG;EACH,KAAK;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,QAAQ;EACN,KAAK,IAAY,uBACf;EACF,KAAK,QAAgB,uBACnB,eAAe,MAAM,mBAAmB;EAC1C,KAAK,QAAgB,uBACnB,kBAAkB,MAAM,mBAAmB;EAC7C,KAAK,QAAgB,uBACnB,oBAAoB,MAAM,mBAAmB;EAC/C,KAAK,QAAgB,uBACnB,oBAAoB,MAAM,oBAAoB;EAChD,QAAQ,QAAgB,wBACtB,qBAAqB;EACvB,QAAQ,QAAgB,wBACtB,qBAAqB;EACvB,YAAY;EACb;CACD,UAAU;EACR,MAAM;EACN,MAAM;EACN,MAAM;EACN,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,SAAS;EACT,UAAU;EACV,OAAO;EACP,SAAS;EACV;CACF"}

dist/esm/styles/use-styles.js

@@ -1,57 +0,259 @@
-import * as goober from "goober";
-import { createSignal, createEffect } from "solid-js";
 import { useTheme } from "../components/theme.js";
 import { tokens } from "./tokens.js";
-const buttonVariantColors = {
-  primary: {
-    bg: tokens.colors.gray[900],
-    hover: tokens.colors.gray[800],
-    active: tokens.colors.gray[700],
-    text: "#fff",
-    border: tokens.colors.gray[900]
-  },
-  secondary: {
-    bg: tokens.colors.gray[100],
-    hover: tokens.colors.gray[200],
-    active: tokens.colors.gray[300],
-    text: tokens.colors.gray[900],
-    border: tokens.colors.gray[300]
-  },
-  info: {
-    bg: tokens.colors.blue[500],
-    hover: tokens.colors.blue[600],
-    active: tokens.colors.blue[700],
-    text: "#fff",
-    border: tokens.colors.blue[500]
-  },
-  warning: {
-    bg: tokens.colors.yellow[500],
-    hover: tokens.colors.yellow[600],
-    active: tokens.colors.yellow[700],
-    text: "#fff",
-    border: tokens.colors.yellow[500]
-  },
-  danger: {
-    bg: tokens.colors.red[500],
-    hover: tokens.colors.red[600],
-    active: tokens.colors.red[700],
-    text: "#fff",
-    border: tokens.colors.red[500]
-  },
-  success: {
-    bg: tokens.colors.green[500],
-    hover: tokens.colors.green[600],
-    active: tokens.colors.green[700],
-    text: "#fff",
-    border: tokens.colors.green[500]
-  }
+import { createEffect, createSignal } from "solid-js";
+import * as goober from "goober";
+//#region src/styles/use-styles.ts
+var buttonVariantColors = {
+	primary: {
+		bg: {
+			light: tokens.colors.gray[900],
+			dark: tokens.colors.gray[100]
+		},
+		hover: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		},
+		active: {
+			light: tokens.colors.gray[700],
+			dark: tokens.colors.gray[300]
+		},
+		text: {
+			light: "#fff",
+			dark: tokens.colors.gray[900]
+		},
+		border: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		},
+		outline: {
+			light: tokens.colors.gray[900],
+			dark: tokens.colors.gray[100]
+		},
+		outlineHover: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		}
+	},
+	secondary: {
+		bg: {
+			light: tokens.colors.gray[100],
+			dark: tokens.colors.gray[100]
+		},
+		hover: {
+			light: tokens.colors.gray[200],
+			dark: tokens.colors.gray[200]
+		},
+		active: {
+			light: tokens.colors.gray[300],
+			dark: tokens.colors.gray[300]
+		},
+		text: {
+			light: tokens.colors.gray[900],
+			dark: tokens.colors.gray[900]
+		},
+		border: {
+			light: tokens.colors.gray[300],
+			dark: tokens.colors.gray[300]
+		},
+		outline: {
+			light: tokens.colors.gray[700],
+			dark: tokens.colors.gray[300]
+		},
+		outlineHover: {
+			light: tokens.colors.gray[800],
+			dark: tokens.colors.gray[200]
+		}
+	},
+	info: {
+		bg: {
+			light: tokens.colors.blue[500],
+			dark: tokens.colors.blue[500]
+		},
+		hover: {
+			light: tokens.colors.blue[600],
+			dark: tokens.colors.blue[600]
+		},
+		active: {
+			light: tokens.colors.blue[700],
+			dark: tokens.colors.blue[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.blue[500],
+			dark: tokens.colors.blue[500]
+		},
+		outline: {
+			light: tokens.colors.blue[700],
+			dark: tokens.colors.blue[300]
+		},
+		outlineHover: {
+			light: tokens.colors.blue[600],
+			dark: tokens.colors.blue[200]
+		}
+	},
+	warning: {
+		bg: {
+			light: tokens.colors.yellow[500],
+			dark: tokens.colors.yellow[500]
+		},
+		hover: {
+			light: tokens.colors.yellow[600],
+			dark: tokens.colors.yellow[600]
+		},
+		active: {
+			light: tokens.colors.yellow[700],
+			dark: tokens.colors.yellow[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.yellow[500],
+			dark: tokens.colors.yellow[500]
+		},
+		outline: {
+			light: tokens.colors.yellow[700],
+			dark: tokens.colors.yellow[300]
+		},
+		outlineHover: {
+			light: tokens.colors.yellow[600],
+			dark: tokens.colors.yellow[200]
+		}
+	},
+	danger: {
+		bg: {
+			light: tokens.colors.red[500],
+			dark: tokens.colors.red[500]
+		},
+		hover: {
+			light: tokens.colors.red[600],
+			dark: tokens.colors.red[600]
+		},
+		active: {
+			light: tokens.colors.red[700],
+			dark: tokens.colors.red[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.red[500],
+			dark: tokens.colors.red[500]
+		},
+		outline: {
+			light: tokens.colors.red[700],
+			dark: tokens.colors.red[300]
+		},
+		outlineHover: {
+			light: tokens.colors.red[600],
+			dark: tokens.colors.red[200]
+		}
+	},
+	success: {
+		bg: {
+			light: tokens.colors.green[500],
+			dark: tokens.colors.green[500]
+		},
+		hover: {
+			light: tokens.colors.green[600],
+			dark: tokens.colors.green[600]
+		},
+		active: {
+			light: tokens.colors.green[700],
+			dark: tokens.colors.green[700]
+		},
+		text: {
+			light: "#fff",
+			dark: "#fff"
+		},
+		border: {
+			light: tokens.colors.green[500],
+			dark: tokens.colors.green[500]
+		},
+		outline: {
+			light: tokens.colors.green[700],
+			dark: tokens.colors.green[300]
+		},
+		outlineHover: {
+			light: tokens.colors.green[600],
+			dark: tokens.colors.green[200]
+		}
+	}
 };
-const css = goober.css;
-const stylesFactory = (theme = "dark") => {
-  const { colors, font, size, border } = tokens;
-  const { fontFamily } = font;
-  const t = (light, dark) => theme === "light" ? light : dark;
-  const wrapperSize = 320;
-  return {
-    logo: css`
+var css = goober.css;
+var stylesFactory = (theme) => {
+	const { colors, font, size, border } = tokens;
+	const { fontFamily } = font;
+	const t = (light, dark) => theme === "light" ? light : dark;
+	const buildButtonVariant = (variant) => {
+		const v = buttonVariantColors[variant];
+		const outlineColor = t(v.outline.light, v.outline.dark);
+		const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark);
+		const solidBg = t(v.bg.light, v.bg.dark);
+		const solidHover = t(v.hover.light, v.hover.dark);
+		const solidActive = t(v.active.light, v.active.dark);
+		const solidText = t(v.text.light, v.text.dark);
+		const solidBorder = t(v.border.light, v.border.dark);
+		return {
+			ghost: css`
+        background: transparent;
+        color: ${outlineColor};
+        border-color: transparent;
+        &:hover {
+          background: ${t(colors.gray[100], colors.darkGray[800])};
+          color: ${outlineHoverColor};
+        }
+        &:active {
+          background: ${t(colors.gray[200], colors.darkGray[700])};
+          color: ${outlineHoverColor};
+        }
+      `,
+			outline: css`
+        background: transparent;
+        color: ${outlineColor};
+        border-color: ${outlineColor};
+        &:hover {
+          background: ${t(colors.gray[50], colors.darkGray[800])};
+          color: ${outlineHoverColor};
+          border-color: ${outlineHoverColor};
+        }
+        &:active {
+          background: ${t(colors.gray[100], colors.darkGray[700])};
+          color: ${outlineHoverColor};
+          border-color: ${outlineHoverColor};
+        }
+      `,
+			solid: css`
+        background: ${solidBg};
+        color: ${solidText};
+        border-color: ${solidBorder};
+        &:hover {
+          background: ${solidHover};
+          border-color: ${solidHover};
+          box-shadow: ${t(tokens.shadow.xs("rgb(0 0 0 / 0.12)"), tokens.shadow.xs("rgb(0 0 0 / 0.5)"))};
+        }
+        &:active {
+          background: ${solidActive};
+          border-color: ${solidActive};
+          box-shadow: ${t(tokens.shadow.inner("rgb(0 0 0 / 0.2)"), tokens.shadow.inner("rgb(0 0 0 / 0.6)"))};
+        }
+      `
+		};
+	};
+	const buttonVariants = {
+		primary: buildButtonVariant("primary"),
+		secondary: buildButtonVariant("secondary"),
+		info: buildButtonVariant("info"),
+		warning: buildButtonVariant("warning"),
+		danger: buildButtonVariant("danger"),
+		success: buildButtonVariant("success")
+	};
+	const wrapperSize = 320;
+	return {
+		logo: css`
       cursor: pointer;
@@ -65,4 +267,4 @@ display: flex;
       font-family: ${fontFamily.sans};
-      gap: ${tokens.size[0.5]};
-      padding: 0px;
+      gap: ${tokens.size[.5]};
+      padding: 0;
       &:hover {
@@ -72,3 +274,3 @@ opacity: 0.7;
     `,
-    selectWrapper: css`
+		selectWrapper: css`
       width: 100%;
@@ -80,6 +282,6 @@ max-width: ${wrapperSize}px;
     `,
-    selectContainer: css`
+		selectContainer: css`
       width: 100%;
     `,
-    selectLabel: css`
+		selectLabel: css`
       font-size: 0.875rem;
@@ -90,3 +292,3 @@ font-weight: 500;
     `,
-    selectDescription: css`
+		selectDescription: css`
       font-size: 0.8rem;
@@ -98,3 +300,3 @@ color: ${t(colors.gray[500], colors.gray[400])};
     `,
-    select: css`
+		select: css`
       appearance: none;
@@ -127,3 +329,3 @@ width: 100%;
     `,
-    inputWrapper: css`
+		inputWrapper: css`
       width: 100%;
@@ -135,6 +337,6 @@ max-width: ${wrapperSize}px;
     `,
-    inputContainer: css`
+		inputContainer: css`
       width: 100%;
     `,
-    inputLabel: css`
+		inputLabel: css`
       font-size: 0.875rem;
@@ -145,3 +347,3 @@ font-weight: 500;
     `,
-    inputDescription: css`
+		inputDescription: css`
       font-size: 0.8rem;
@@ -153,3 +355,3 @@ color: ${t(colors.gray[500], colors.gray[400])};
     `,
-    input: css`
+		input: css`
       appearance: none;
@@ -181,3 +383,3 @@ box-sizing: border-box;
     `,
-    checkboxWrapper: css`
+		checkboxWrapper: css`
       display: flex;
@@ -196,6 +398,6 @@ align-items: flex-start;
     `,
-    checkboxContainer: css`
+		checkboxContainer: css`
       width: 100%;
     `,
-    checkboxLabelContainer: css`
+		checkboxLabelContainer: css`
       display: flex;
@@ -206,3 +408,3 @@ flex-direction: column;
     `,
-    checkbox: css`
+		checkbox: css`
       appearance: none;
@@ -239,3 +441,3 @@ width: 1.25rem;
     `,
-    checkboxLabel: css`
+		checkboxLabel: css`
       color: ${t(colors.gray[900], colors.gray[100])};
@@ -247,3 +449,3 @@ font-size: 0.875rem;
     `,
-    checkboxDescription: css`
+		checkboxDescription: css`
       color: ${t(colors.gray[500], colors.gray[400])};
@@ -254,4 +456,4 @@ font-size: 0.8rem;
     `,
-    button: {
-      base: css`
+		button: {
+			base: css`
         display: inline-flex;
@@ -275,58 +477,17 @@ align-items: center;
       `,
-      variant(variant, outline, ghost) {
-        const v = buttonVariantColors[variant];
-        if (ghost) {
-          return css`
-            background: transparent;
-            color: ${t(v.bg, v.bg)};
-            border-color: transparent;
-            &:hover {
-              background: ${t(colors.gray[100], colors.darkGray[800])};
-            }
-            &:active {
-              background: ${t(colors.gray[200], colors.darkGray[700])};
-            }
-          `;
-        }
-        if (outline) {
-          return css`
-            background: transparent;
-            color: ${t(v.bg, v.bg)};
-            border-color: ${t(v.bg, v.bg)};
-            &:hover {
-              background: ${t(colors.gray[50], colors.darkGray[800])};
-              border-color: ${t(v.hover, v.hover)};
-            }
-            &:active {
-              background: ${t(colors.gray[100], colors.darkGray[700])};
-              border-color: ${t(v.active, v.active)};
-            }
-          `;
-        }
-        return css`
-          background: ${t(v.bg, v.bg)};
-          color: ${t(v.text, v.text)};
-          border-color: ${t(v.border, v.border)};
-          &:hover {
-            background: ${t(v.hover, v.hover)};
-            border-color: ${t(v.hover, v.hover)};
-          }
-          &:active {
-            background: ${t(v.active, v.active)};
-            border-color: ${t(v.active, v.active)};
-          }
-        `;
-      }
-    },
-    tag: {
-      dot: (color) => css`
+			variant(variant, outline, ghost) {
+				const v = buttonVariants[variant];
+				if (ghost) return v.ghost;
+				if (outline) return v.outline;
+				return v.solid;
+			}
+		},
+		tag: {
+			dot: (color) => css`
         width: ${tokens.size[1.5]};
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
-        background-color: ${t(
-        tokens.colors[color][500],
-        tokens.colors[color][500]
-      )};
+        background-color: ${t(tokens.colors[color][500], tokens.colors[color][500])};
       `,
-      base: css`
+			base: css`
         display: flex;
@@ -352,6 +513,6 @@ gap: ${tokens.size[1.5]};
       `,
-      label: css`
+			label: css`
         font-size: ${font.size.xs};
       `,
-      count: css`
+			count: css`
         font-size: ${font.size.xs};
@@ -368,5 +529,5 @@ padding: 0 5px;
       `
-    },
-    tree: {
-      info: css`
+		},
+		tree: {
+			info: css`
         color: ${t(colors.gray[500], colors.gray[500])};
@@ -376,3 +537,3 @@ font-size: ${font.size.xs};
       `,
-      actionButton: css`
+			actionButton: css`
         background-color: transparent;
@@ -382,3 +543,3 @@ color: ${t(colors.gray[500], colors.gray[500])};
         display: inline-flex;
-        padding: 0px;
+        padding: 0;
         align-items: center;
@@ -402,6 +563,6 @@ justify-content: center;
       `,
-      expanderContainer: css`
+			expanderContainer: css`
         position: relative;
       `,
-      expander: css`
+			expander: css`
         position: absolute;
@@ -423,3 +584,3 @@ cursor: pointer;
       `,
-      expandedLine: (hasBorder) => css`
+			expandedLine: (hasBorder) => css`
         display: block;
@@ -430,3 +591,3 @@ padding-left: 0.75rem;
       `,
-      collapsible: css`
+			collapsible: css`
         cursor: pointer;
@@ -440,3 +601,3 @@ transition: all 0.2s ease;
       `,
-      actions: css`
+			actions: css`
         display: inline-flex;
@@ -451,28 +612,28 @@ margin-left: ${size[2]};
       `,
-      valueCollapsed: css`
+			valueCollapsed: css`
         color: ${t(colors.gray[500], colors.gray[400])};
       `,
-      valueFunction: css`
+			valueFunction: css`
         color: ${t(colors.cyan[500], colors.cyan[400])};
       `,
-      valueString: css`
+			valueString: css`
         color: ${t(colors.green[500], colors.green[400])};
       `,
-      valueNumber: css`
+			valueNumber: css`
         color: ${t(colors.yellow[500], colors.yellow[400])};
       `,
-      valueBoolean: css`
+			valueBoolean: css`
         color: ${t(colors.pink[500], colors.pink[400])};
       `,
-      valueNull: css`
+			valueNull: css`
         color: ${t(colors.gray[500], colors.gray[400])};
         font-style: italic;
       `,
-      valueKey: css`
+			valueKey: css`
         color: ${t(colors.blue[400], colors.blue[300])};
       `,
-      valueBraces: css`
+			valueBraces: css`
         color: ${colors.gray[500]};
       `,
-      valueContainer: (isRoot) => css`
+			valueContainer: (isRoot) => css`
         display: block;
@@ -489,5 +650,5 @@ margin-left: ${isRoot ? "0" : "1rem"};
       `
-    },
-    header: {
-      row: css`
+		},
+		header: {
+			row: css`
         display: flex;
@@ -501,3 +662,3 @@ justify-content: space-between;
       `,
-      logoAndToggleContainer: css`
+			logoAndToggleContainer: css`
         display: flex;
@@ -511,7 +672,7 @@ gap: ${tokens.size[3]};
           display: flex;
-          gap: ${size[0.5]};
+          gap: ${size[.5]};
           flex-direction: column;
         }
       `,
-      logo: css`
+			logo: css`
         cursor: pointer;
@@ -522,4 +683,4 @@ display: flex;
         border: none;
-        gap: ${tokens.size[0.5]};
-        padding: 0px;
+        gap: ${tokens.size[.5]};
+        padding: 0;
         &:hover {
@@ -534,3 +695,3 @@ opacity: 0.7;
       `,
-      tanstackLogo: css`
+			tanstackLogo: css`
         font-size: ${font.size.md};
@@ -542,3 +703,3 @@ font-weight: ${font.weight.bold};
       `,
-      flavorLogo: (flavorLight, flavorDark) => css`
+			flavorLogo: (flavorLight, flavorDark) => css`
         font-weight: ${font.weight.semibold};
@@ -553,5 +714,5 @@ font-size: ${font.size.xs};
       `
-    },
-    section: {
-      main: css`
+		},
+		section: {
+			main: css`
         margin-bottom: 1.5rem;
@@ -564,3 +725,3 @@ padding: 1rem;
       `,
-      title: css`
+			title: css`
         font-size: 1rem;
@@ -577,3 +738,3 @@ font-weight: 600;
       `,
-      icon: css`
+			icon: css`
         height: 18px;
@@ -587,3 +748,3 @@ width: 18px;
       `,
-      description: css`
+			description: css`
         color: ${t(colors.gray[500], colors.gray[400])};
@@ -595,5 +756,4 @@ font-size: 0.8rem;
       `
-    },
-    mainPanel: {
-      panel: (withPadding) => css`
+		},
+		mainPanel: { panel: (withPadding) => css`
         padding: ${withPadding ? tokens.size[3] : 0};
@@ -603,18 +763,16 @@ background: ${t(colors.gray[50], colors.darkGray[700])};
         height: 100%;
-      `
-    }
-  };
+      ` }
+	};
 };
 function useStyles() {
-  const { theme } = useTheme();
-  const [styles, setStyles] = createSignal(stylesFactory(theme()));
-  createEffect(() => {
-    setStyles(stylesFactory(theme()));
-  });
-  return styles;
+	const { theme } = useTheme();
+	const [styles, setStyles] = createSignal(stylesFactory(theme()));
+	createEffect(() => {
+		setStyles(stylesFactory(theme()));
+	});
+	return styles;
 }
-export {
-  css,
-  useStyles
-};
-//# sourceMappingURL=use-styles.js.map
+//#endregion
+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 { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.gray[900],\n    hover: tokens.colors.gray[800],\n    active: tokens.colors.gray[700],\n    text: '#fff',\n    border: tokens.colors.gray[900],\n  },\n  secondary: {\n    bg: tokens.colors.gray[100],\n    hover: tokens.colors.gray[200],\n    active: tokens.colors.gray[300],\n    text: tokens.colors.gray[900],\n    border: tokens.colors.gray[300],\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: Theme = 'dark') => {\n  const { colors, font, size, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  const wrapperSize = 320\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: ${wrapperSize}px;\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: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], 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.5rem 3rem 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      transition: all 0.15s 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: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.gray[400]};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\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: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      box-sizing: border-box;\n      width: 100%;\n      padding: 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.15s ease;\n\n      &::placeholder {\n        color: ${t(colors.gray[400], colors.gray[500])};\n      }\n\n      &:hover {\n        border-color: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\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.375rem;\n      border-radius: 0.375rem;\n      transition: background-color 0.15s ease;\n\n      &:hover {\n        background-color: ${t(colors.gray[50], colors.darkGray[900])};\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 ${t(colors.gray[300], colors.gray[700])};\n      border-radius: 0.25rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      display: grid;\n      place-items: center;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:checked {\n        background-color: ${t(colors.gray[900], colors.gray[100])};\n        border-color: ${t(colors.gray[900], colors.gray[100])};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid ${t('#fff', colors.gray[900])};\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${t(colors.gray[900], 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: ${t(colors.gray[500], 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.375rem;\n        padding: 0.375rem 0.75rem;\n        cursor: pointer;\n        transition:\n          background 0.15s,\n          color 0.15s,\n          border 0.15s,\n          box-shadow 0.15s;\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: ${t(v.bg, v.bg)};\n            border-color: transparent;\n            &:hover {\n              background: ${t(colors.gray[100], colors.darkGray[800])};\n            }\n            &:active {\n              background: ${t(colors.gray[200], colors.darkGray[700])};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: ${t(v.bg, v.bg)};\n            &:hover {\n              background: ${t(colors.gray[50], colors.darkGray[800])};\n              border-color: ${t(v.hover, v.hover)};\n            }\n            &:active {\n              background: ${t(colors.gray[100], colors.darkGray[700])};\n              border-color: ${t(v.active, v.active)};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${t(v.bg, v.bg)};\n          color: ${t(v.text, v.text)};\n          border-color: ${t(v.border, v.border)};\n          &:hover {\n            background: ${t(v.hover, v.hover)};\n            border-color: ${t(v.hover, v.hover)};\n          }\n          &:active {\n            background: ${t(v.active, v.active)};\n            border-color: ${t(v.active, 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: ${t(\n          tokens.colors[color][500],\n          tokens.colors[color][500],\n        )};\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 ${t(colors.blue[700], 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      `,\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 ${t(colors.blue[700], colors.blue[800])};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        cursor: pointer;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${t(colors.blue[400], 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      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder\n          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n          : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${t(colors.gray[100], 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: ${t(colors.gray[500], colors.gray[400])};\n      `,\n      valueFunction: css`\n        color: ${t(colors.cyan[500], colors.cyan[400])};\n      `,\n      valueString: css`\n        color: ${t(colors.green[500], colors.green[400])};\n      `,\n      valueNumber: css`\n        color: ${t(colors.yellow[500], colors.yellow[400])};\n      `,\n      valueBoolean: css`\n        color: ${t(colors.pink[500], colors.pink[400])};\n      `,\n      valueNull: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${t(colors.blue[400], 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[700], 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: 1.5rem;\n        padding: 1rem;\n        background-color: ${t(colors.gray[50], colors.darkGray[800])};\n        border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        border-radius: 0.5rem;\n        box-shadow: none;\n      `,\n      title: css`\n        font-size: 1rem;\n        font-weight: 600;\n        color: ${t(colors.gray[900], colors.gray[100])};\n        margin: 0 0 0.75rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 18px;\n        width: 18px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${t(colors.gray[700], colors.gray[400])};\n      `,\n      description: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-size: 0.8rem;\n        margin: 0 0 1rem 0;\n        line-height: 1.4;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: (withPadding: boolean) => css`\n        padding: ${withPadding ? tokens.size[3] : 0};\n        background: ${t(colors.gray[50], colors.darkGray[700])};\n        overflow-y: auto;\n        height: 100%;\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-styles.js","names":[],"sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\n\nimport type { TanStackDevtoolsTheme } from '../components/theme'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  {\n    bg: { light: string; dark: string }\n    hover: { light: string; dark: string }\n    active: { light: string; dark: string }\n    text: { light: string; dark: string }\n    border: { light: string; dark: string }\n    outline: { light: string; dark: string }\n    outlineHover: { light: string; dark: string }\n  }\n> = {\n  primary: {\n    bg: { light: tokens.colors.gray[900], dark: tokens.colors.gray[100] },\n    hover: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },\n    active: { light: tokens.colors.gray[700], dark: tokens.colors.gray[300] },\n    text: { light: '#fff', dark: tokens.colors.gray[900] },\n    border: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },\n    outline: {\n      light: tokens.colors.gray[900],\n      dark: tokens.colors.gray[100],\n    },\n    outlineHover: {\n      light: tokens.colors.gray[800],\n      dark: tokens.colors.gray[200],\n    },\n  },\n  secondary: {\n    bg: { light: tokens.colors.gray[100], dark: tokens.colors.gray[100] },\n    hover: { light: tokens.colors.gray[200], dark: tokens.colors.gray[200] },\n    active: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },\n    text: { light: tokens.colors.gray[900], dark: tokens.colors.gray[900] },\n    border: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },\n    outline: {\n      light: tokens.colors.gray[700],\n      dark: tokens.colors.gray[300],\n    },\n    outlineHover: {\n      light: tokens.colors.gray[800],\n      dark: tokens.colors.gray[200],\n    },\n  },\n  info: {\n    bg: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },\n    hover: { light: tokens.colors.blue[600], dark: tokens.colors.blue[600] },\n    active: { light: tokens.colors.blue[700], dark: tokens.colors.blue[700] },\n    text: { light: '#fff', dark: '#fff' },\n    border: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },\n    outline: {\n      light: tokens.colors.blue[700],\n      dark: tokens.colors.blue[300],\n    },\n    outlineHover: {\n      light: tokens.colors.blue[600],\n      dark: tokens.colors.blue[200],\n    },\n  },\n  warning: {\n    bg: { light: tokens.colors.yellow[500], dark: tokens.colors.yellow[500] },\n    hover: {\n      light: tokens.colors.yellow[600],\n      dark: tokens.colors.yellow[600],\n    },\n    active: {\n      light: tokens.colors.yellow[700],\n      dark: tokens.colors.yellow[700],\n    },\n    text: { light: '#fff', dark: '#fff' },\n    border: {\n      light: tokens.colors.yellow[500],\n      dark: tokens.colors.yellow[500],\n    },\n    outline: {\n      light: tokens.colors.yellow[700],\n      dark: tokens.colors.yellow[300],\n    },\n    outlineHover: {\n      light: tokens.colors.yellow[600],\n      dark: tokens.colors.yellow[200],\n    },\n  },\n  danger: {\n    bg: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },\n    hover: { light: tokens.colors.red[600], dark: tokens.colors.red[600] },\n    active: { light: tokens.colors.red[700], dark: tokens.colors.red[700] },\n    text: { light: '#fff', dark: '#fff' },\n    border: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },\n    outline: {\n      light: tokens.colors.red[700],\n      dark: tokens.colors.red[300],\n    },\n    outlineHover: {\n      light: tokens.colors.red[600],\n      dark: tokens.colors.red[200],\n    },\n  },\n  success: {\n    bg: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },\n    hover: { light: tokens.colors.green[600], dark: tokens.colors.green[600] },\n    active: { light: tokens.colors.green[700], dark: tokens.colors.green[700] },\n    text: { light: '#fff', dark: '#fff' },\n    border: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },\n    outline: {\n      light: tokens.colors.green[700],\n      dark: tokens.colors.green[300],\n    },\n    outlineHover: {\n      light: tokens.colors.green[600],\n      dark: tokens.colors.green[200],\n    },\n  },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: TanStackDevtoolsTheme) => {\n  const { colors, font, size, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n  const buildButtonVariant = (variant: ButtonVariant) => {\n    const v = buttonVariantColors[variant]\n    const outlineColor = t(v.outline.light, v.outline.dark)\n    const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark)\n    const solidBg = t(v.bg.light, v.bg.dark)\n    const solidHover = t(v.hover.light, v.hover.dark)\n    const solidActive = t(v.active.light, v.active.dark)\n    const solidText = t(v.text.light, v.text.dark)\n    const solidBorder = t(v.border.light, v.border.dark)\n\n    return {\n      ghost: css`\n        background: transparent;\n        color: ${outlineColor};\n        border-color: transparent;\n        &:hover {\n          background: ${t(colors.gray[100], colors.darkGray[800])};\n          color: ${outlineHoverColor};\n        }\n        &:active {\n          background: ${t(colors.gray[200], colors.darkGray[700])};\n          color: ${outlineHoverColor};\n        }\n      `,\n      outline: css`\n        background: transparent;\n        color: ${outlineColor};\n        border-color: ${outlineColor};\n        &:hover {\n          background: ${t(colors.gray[50], colors.darkGray[800])};\n          color: ${outlineHoverColor};\n          border-color: ${outlineHoverColor};\n        }\n        &:active {\n          background: ${t(colors.gray[100], colors.darkGray[700])};\n          color: ${outlineHoverColor};\n          border-color: ${outlineHoverColor};\n        }\n      `,\n      solid: css`\n        background: ${solidBg};\n        color: ${solidText};\n        border-color: ${solidBorder};\n        &:hover {\n          background: ${solidHover};\n          border-color: ${solidHover};\n          box-shadow: ${t(\n            tokens.shadow.xs('rgb(0 0 0 / 0.12)'),\n            tokens.shadow.xs('rgb(0 0 0 / 0.5)'),\n          )};\n        }\n        &:active {\n          background: ${solidActive};\n          border-color: ${solidActive};\n          box-shadow: ${t(\n            tokens.shadow.inner('rgb(0 0 0 / 0.2)'),\n            tokens.shadow.inner('rgb(0 0 0 / 0.6)'),\n          )};\n        }\n      `,\n    }\n  }\n  const buttonVariants: Record<\n    ButtonVariant,\n    { ghost: string; outline: string; solid: string }\n  > = {\n    primary: buildButtonVariant('primary'),\n    secondary: buildButtonVariant('secondary'),\n    info: buildButtonVariant('info'),\n    warning: buildButtonVariant('warning'),\n    danger: buildButtonVariant('danger'),\n    success: buildButtonVariant('success'),\n  }\n\n  const wrapperSize = 320\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: 0;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\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: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], 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.5rem 3rem 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      transition: all 0.15s 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: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.gray[400]};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\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: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      box-sizing: border-box;\n      width: 100%;\n      padding: 0.5rem 0.75rem;\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.15s ease;\n\n      &::placeholder {\n        color: ${t(colors.gray[400], colors.gray[500])};\n      }\n\n      &:hover {\n        border-color: ${t(colors.gray[300], colors.gray[700])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};\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.375rem;\n      border-radius: 0.375rem;\n      transition: background-color 0.15s ease;\n\n      &:hover {\n        background-color: ${t(colors.gray[50], colors.darkGray[900])};\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 ${t(colors.gray[300], colors.gray[700])};\n      border-radius: 0.25rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      display: grid;\n      place-items: center;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:checked {\n        background-color: ${t(colors.gray[900], colors.gray[100])};\n        border-color: ${t(colors.gray[900], colors.gray[100])};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid ${t('#fff', colors.gray[900])};\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${t(colors.gray[900], 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: ${t(colors.gray[500], 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.375rem;\n        padding: 0.375rem 0.75rem;\n        cursor: pointer;\n        transition:\n          background 0.15s,\n          color 0.15s,\n          border 0.15s,\n          box-shadow 0.15s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariants[variant]\n        if (ghost) {\n          return v.ghost\n        }\n        if (outline) {\n          return v.outline\n        }\n        return v.solid\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: ${t(\n          tokens.colors[color][500],\n          tokens.colors[color][500],\n        )};\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 ${t(colors.blue[700], 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      `,\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: 0;\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 ${t(colors.blue[700], colors.blue[800])};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        cursor: pointer;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${t(colors.blue[400], 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      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder\n          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n          : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${t(colors.gray[100], 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: ${t(colors.gray[500], colors.gray[400])};\n      `,\n      valueFunction: css`\n        color: ${t(colors.cyan[500], colors.cyan[400])};\n      `,\n      valueString: css`\n        color: ${t(colors.green[500], colors.green[400])};\n      `,\n      valueNumber: css`\n        color: ${t(colors.yellow[500], colors.yellow[400])};\n      `,\n      valueBoolean: css`\n        color: ${t(colors.pink[500], colors.pink[400])};\n      `,\n      valueNull: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${t(colors.blue[400], 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: 0;\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[700], 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: 1.5rem;\n        padding: 1rem;\n        background-color: ${t(colors.gray[50], colors.darkGray[800])};\n        border: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        border-radius: 0.5rem;\n        box-shadow: none;\n      `,\n      title: css`\n        font-size: 1rem;\n        font-weight: 600;\n        color: ${t(colors.gray[900], colors.gray[100])};\n        margin: 0 0 0.75rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 18px;\n        width: 18px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${t(colors.gray[700], colors.gray[400])};\n      `,\n      description: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-size: 0.8rem;\n        margin: 0 0 1rem 0;\n        line-height: 1.4;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: (withPadding: boolean) => css`\n        padding: ${withPadding ? tokens.size[3] : 0};\n        background: ${t(colors.gray[50], colors.darkGray[700])};\n        overflow-y: auto;\n        height: 100%;\n      `,\n    },\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"mappings":"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"}

package.json

 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
@@ -56,3 +56,3 @@ "author": "Tanner Linsley",
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "^2.11.11"
   },
@@ -59,0 +59,0 @@ "scripts": {

src/components/button.tsx

@@ -1,4 +0,6 @@
-import { splitProps } from 'solid-js'
+import { createMemo } from 'solid-js'
 import clsx from 'clsx'
 import { useStyles } from '../styles/use-styles'
+
+// types
 import type { JSX } from 'solid-js'
@@ -20,24 +22,19 @@
 }
-
 export function Button(props: ButtonProps) {
   const styles = useStyles()
-  const [local, rest] = 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,
-  )
 
+  const classes = createMemo(() => {
+    const variant = props.variant || 'primary'
+    return clsx(
+      styles().button.base,
+      styles().button.variant(variant, props.outline, props.ghost),
+      props.className,
+    )
+  })
+
   return (
-    <button {...rest} class={classes}>
-      {local.children}
+    <button {...props} class={classes()}>
+      {props.children}
     </button>
   )
 }

src/components/icons.tsx

 // import { Show, createUniqueId } from 'solid-js'
 
+import type { TanStackDevtoolsTheme } from './theme'
+
 /* export function Search() {
@@ -42,3 +44,3 @@ return (
 } */
-/* 
+/*
 export function ChevronDown() {
@@ -470,3 +472,3 @@ return (
 }
-/* 
+/*
 
@@ -701,3 +703,3 @@ export function Pencil() {
 
-export function CopiedCopier(props: { theme: 'light' | 'dark' }) {
+export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
   return (
@@ -741,3 +743,3 @@ <svg
 }
-/* 
+/*
 export function List() {
@@ -762,3 +764,3 @@ return (
 
-export function Check(props: { checked: boolean; theme: 'light' | 'dark' }) {
+export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme }) {
   return (
@@ -892,3 +894,3 @@ <>
 } */
-/* 
+/*
 export function TanstackLogo() {
@@ -895,0 +897,0 @@ const id = createUniqueId()

src/components/theme.tsx

 import { createContext, createEffect, createSignal, useContext } from 'solid-js'
 import type { Accessor, JSX } from 'solid-js'
 
-export type Theme = 'light' | 'dark'
+export type TanStackDevtoolsTheme = 'light' | 'dark'
 
 type ThemeContextValue = {
-  theme: Accessor<Theme>
-  setTheme: (theme: Theme) => void
+  theme: Accessor<TanStackDevtoolsTheme>
+  setTheme: (theme: TanStackDevtoolsTheme) => void
 }
@@ -14,5 +14,5 @@ const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
   children: JSX.Element
-  theme: Theme
+  theme: TanStackDevtoolsTheme
 }) => {
-  const [theme, setTheme] = createSignal<Theme>(props.theme)
+  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(props.theme)
   createEffect(() => {
@@ -19,0 +19,0 @@ setTheme(props.theme)

src/index.ts

@@ -17,2 +17,3 @@ export { Checkbox } from './components/checkbox'
 export { useTheme, ThemeContextProvider } from './components/theme'
+export type { TanStackDevtoolsTheme } from './components/theme'
 export {
@@ -19,0 +20,0 @@ CheckCircleIcon,

src/styles/use-styles.ts

@@ -5,54 +5,120 @@ import * as goober from 'goober'
 import { tokens } from './tokens'
+
+import type { TanStackDevtoolsTheme } from '../components/theme'
 import type { ButtonVariant } from '../components/button'
-import type { Theme } from '../components/theme'
 
 const buttonVariantColors: Record<
   ButtonVariant,
-  { bg: string; hover: string; active: string; text: string; border: string }
+  {
+    bg: { light: string; dark: string }
+    hover: { light: string; dark: string }
+    active: { light: string; dark: string }
+    text: { light: string; dark: string }
+    border: { light: string; dark: string }
+    outline: { light: string; dark: string }
+    outlineHover: { light: string; dark: string }
+  }
 > = {
   primary: {
-    bg: tokens.colors.gray[900],
-    hover: tokens.colors.gray[800],
-    active: tokens.colors.gray[700],
-    text: '#fff',
-    border: tokens.colors.gray[900],
+    bg: { light: tokens.colors.gray[900], dark: tokens.colors.gray[100] },
+    hover: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },
+    active: { light: tokens.colors.gray[700], dark: tokens.colors.gray[300] },
+    text: { light: '#fff', dark: tokens.colors.gray[900] },
+    border: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },
+    outline: {
+      light: tokens.colors.gray[900],
+      dark: tokens.colors.gray[100],
+    },
+    outlineHover: {
+      light: tokens.colors.gray[800],
+      dark: tokens.colors.gray[200],
+    },
   },
   secondary: {
-    bg: tokens.colors.gray[100],
-    hover: tokens.colors.gray[200],
-    active: tokens.colors.gray[300],
-    text: tokens.colors.gray[900],
-    border: tokens.colors.gray[300],
+    bg: { light: tokens.colors.gray[100], dark: tokens.colors.gray[100] },
+    hover: { light: tokens.colors.gray[200], dark: tokens.colors.gray[200] },
+    active: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },
+    text: { light: tokens.colors.gray[900], dark: tokens.colors.gray[900] },
+    border: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },
+    outline: {
+      light: tokens.colors.gray[700],
+      dark: tokens.colors.gray[300],
+    },
+    outlineHover: {
+      light: tokens.colors.gray[800],
+      dark: tokens.colors.gray[200],
+    },
   },
   info: {
-    bg: tokens.colors.blue[500],
-    hover: tokens.colors.blue[600],
-    active: tokens.colors.blue[700],
-    text: '#fff',
-    border: tokens.colors.blue[500],
+    bg: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },
+    hover: { light: tokens.colors.blue[600], dark: tokens.colors.blue[600] },
+    active: { light: tokens.colors.blue[700], dark: tokens.colors.blue[700] },
+    text: { light: '#fff', dark: '#fff' },
+    border: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },
+    outline: {
+      light: tokens.colors.blue[700],
+      dark: tokens.colors.blue[300],
+    },
+    outlineHover: {
+      light: tokens.colors.blue[600],
+      dark: tokens.colors.blue[200],
+    },
   },
   warning: {
-    bg: tokens.colors.yellow[500],
-    hover: tokens.colors.yellow[600],
-    active: tokens.colors.yellow[700],
-    text: '#fff',
-    border: tokens.colors.yellow[500],
+    bg: { light: tokens.colors.yellow[500], dark: tokens.colors.yellow[500] },
+    hover: {
+      light: tokens.colors.yellow[600],
+      dark: tokens.colors.yellow[600],
+    },
+    active: {
+      light: tokens.colors.yellow[700],
+      dark: tokens.colors.yellow[700],
+    },
+    text: { light: '#fff', dark: '#fff' },
+    border: {
+      light: tokens.colors.yellow[500],
+      dark: tokens.colors.yellow[500],
+    },
+    outline: {
+      light: tokens.colors.yellow[700],
+      dark: tokens.colors.yellow[300],
+    },
+    outlineHover: {
+      light: tokens.colors.yellow[600],
+      dark: tokens.colors.yellow[200],
+    },
   },
   danger: {
-    bg: tokens.colors.red[500],
-    hover: tokens.colors.red[600],
-    active: tokens.colors.red[700],
-    text: '#fff',
-    border: tokens.colors.red[500],
+    bg: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },
+    hover: { light: tokens.colors.red[600], dark: tokens.colors.red[600] },
+    active: { light: tokens.colors.red[700], dark: tokens.colors.red[700] },
+    text: { light: '#fff', dark: '#fff' },
+    border: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },
+    outline: {
+      light: tokens.colors.red[700],
+      dark: tokens.colors.red[300],
+    },
+    outlineHover: {
+      light: tokens.colors.red[600],
+      dark: tokens.colors.red[200],
+    },
   },
   success: {
-    bg: tokens.colors.green[500],
-    hover: tokens.colors.green[600],
-    active: tokens.colors.green[700],
-    text: '#fff',
-    border: tokens.colors.green[500],
+    bg: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },
+    hover: { light: tokens.colors.green[600], dark: tokens.colors.green[600] },
+    active: { light: tokens.colors.green[700], dark: tokens.colors.green[700] },
+    text: { light: '#fff', dark: '#fff' },
+    border: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },
+    outline: {
+      light: tokens.colors.green[700],
+      dark: tokens.colors.green[300],
+    },
+    outlineHover: {
+      light: tokens.colors.green[600],
+      dark: tokens.colors.green[200],
+    },
   },
 }
 export const css = goober.css
-const stylesFactory = (theme: Theme = 'dark') => {
+const stylesFactory = (theme: TanStackDevtoolsTheme) => {
   const { colors, font, size, border } = tokens
@@ -62,3 +128,76 @@ const { fontFamily } = font
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
+  const buildButtonVariant = (variant: ButtonVariant) => {
+    const v = buttonVariantColors[variant]
+    const outlineColor = t(v.outline.light, v.outline.dark)
+    const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark)
+    const solidBg = t(v.bg.light, v.bg.dark)
+    const solidHover = t(v.hover.light, v.hover.dark)
+    const solidActive = t(v.active.light, v.active.dark)
+    const solidText = t(v.text.light, v.text.dark)
+    const solidBorder = t(v.border.light, v.border.dark)
 
+    return {
+      ghost: css`
+        background: transparent;
+        color: ${outlineColor};
+        border-color: transparent;
+        &:hover {
+          background: ${t(colors.gray[100], colors.darkGray[800])};
+          color: ${outlineHoverColor};
+        }
+        &:active {
+          background: ${t(colors.gray[200], colors.darkGray[700])};
+          color: ${outlineHoverColor};
+        }
+      `,
+      outline: css`
+        background: transparent;
+        color: ${outlineColor};
+        border-color: ${outlineColor};
+        &:hover {
+          background: ${t(colors.gray[50], colors.darkGray[800])};
+          color: ${outlineHoverColor};
+          border-color: ${outlineHoverColor};
+        }
+        &:active {
+          background: ${t(colors.gray[100], colors.darkGray[700])};
+          color: ${outlineHoverColor};
+          border-color: ${outlineHoverColor};
+        }
+      `,
+      solid: css`
+        background: ${solidBg};
+        color: ${solidText};
+        border-color: ${solidBorder};
+        &:hover {
+          background: ${solidHover};
+          border-color: ${solidHover};
+          box-shadow: ${t(
+            tokens.shadow.xs('rgb(0 0 0 / 0.12)'),
+            tokens.shadow.xs('rgb(0 0 0 / 0.5)'),
+          )};
+        }
+        &:active {
+          background: ${solidActive};
+          border-color: ${solidActive};
+          box-shadow: ${t(
+            tokens.shadow.inner('rgb(0 0 0 / 0.2)'),
+            tokens.shadow.inner('rgb(0 0 0 / 0.6)'),
+          )};
+        }
+      `,
+    }
+  }
+  const buttonVariants: Record<
+    ButtonVariant,
+    { ghost: string; outline: string; solid: string }
+  > = {
+    primary: buildButtonVariant('primary'),
+    secondary: buildButtonVariant('secondary'),
+    info: buildButtonVariant('info'),
+    warning: buildButtonVariant('warning'),
+    danger: buildButtonVariant('danger'),
+    success: buildButtonVariant('success'),
+  }
+
   const wrapperSize = 320
@@ -77,3 +216,3 @@
       gap: ${tokens.size[0.5]};
-      padding: 0px;
+      padding: 0;
       &:hover {
@@ -274,45 +413,10 @@ opacity: 0.7;
       variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {
-        const v = buttonVariantColors[variant]
+        const v = buttonVariants[variant]
         if (ghost) {
-          return css`
-            background: transparent;
-            color: ${t(v.bg, v.bg)};
-            border-color: transparent;
-            &:hover {
-              background: ${t(colors.gray[100], colors.darkGray[800])};
-            }
-            &:active {
-              background: ${t(colors.gray[200], colors.darkGray[700])};
-            }
-          `
+          return v.ghost
         }
         if (outline) {
-          return css`
-            background: transparent;
-            color: ${t(v.bg, v.bg)};
-            border-color: ${t(v.bg, v.bg)};
-            &:hover {
-              background: ${t(colors.gray[50], colors.darkGray[800])};
-              border-color: ${t(v.hover, v.hover)};
-            }
-            &:active {
-              background: ${t(colors.gray[100], colors.darkGray[700])};
-              border-color: ${t(v.active, v.active)};
-            }
-          `
+          return v.outline
         }
-        // Default solid button
-        return css`
-          background: ${t(v.bg, v.bg)};
-          color: ${t(v.text, v.text)};
-          border-color: ${t(v.border, v.border)};
-          &:hover {
-            background: ${t(v.hover, v.hover)};
-            border-color: ${t(v.hover, v.hover)};
-          }
-          &:active {
-            background: ${t(v.active, v.active)};
-            border-color: ${t(v.active, v.active)};
-          }
-        `
+        return v.solid
       },
@@ -378,3 +482,3 @@ },
         display: inline-flex;
-        padding: 0px;
+        padding: 0;
         align-items: center;
@@ -513,3 +617,3 @@ justify-content: center;
         gap: ${tokens.size[0.5]};
-        padding: 0px;
+        padding: 0;
         &:hover {
@@ -516,0 +620,0 @@ opacity: 0.7;

dist/esm/icons.js.map

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

dist/esm/index.js.map

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

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

427225

1.86%

Lines of code

6955

3.25%

Worsened metrics

Number of package files

67

-2.9%

No dependency changes