@tanstack/devtools 0.0.0 → 0.1.0

package/dist/esm/components/logo.js.map

@@ -1 +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$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","_el$90","_el$91","_$setAttribute","_$effect","logo"],"mappings":"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"}
+{"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$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","_el$90","_el$91","_$setAttribute","_$effect","logo"],"mappings":";;;;AAGO,SAASA,eAAe;AAC7B,QAAMC,KAAKC,eAAAA;AACX,QAAMC,SAASC,UAAAA;AACf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAC,aAAAE,QAAAD,MAAAJ,YAAAM,QAAAF,MAAAD,aAAAI,QAAAD,MAAAN,YAAAQ,QAAAF,MAAAH,aAAAM,SAAAD,MAAAL,aAAAO,SAAAD,OAAAT,YAAAW,SAAAF,OAAAN,aAAAS,SAAAD,OAAAX,YAAAa,SAAAF,OAAAR,aAAAW,SAAAD,OAAAV,aAAAY,SAAAD,OAAAd,YAAAgB,SAAAF,OAAAX,aAAAc,SAAAD,OAAAhB,YAAAkB,SAAAF,OAAAb,aAAAgB,SAAAD,OAAAf,aAAAiB,SAAAD,OAAAnB,YAAAqB,SAAAF,OAAAhB,aAAAmB,SAAAD,OAAArB,YAAAuB,SAAAF,OAAAlB,aAAAqB,SAAAD,OAAApB,aAAAsB,SAAAD,OAAAxB,YAAA0B,SAAAF,OAAArB,aAAAwB,SAAAD,OAAA1B,YAAA4B,SAAAF,OAAAvB,aAAA0B,SAAAD,OAAAzB,aAAA2B,SAAAD,OAAA7B,YAAA+B,SAAAF,OAAA1B,aAAA6B,SAAAD,OAAA/B,YAAAiC,SAAAF,OAAA5B,aAAA+B,SAAAD,OAAA9B,aAAAgC,SAAAD,OAAAlC,YAAAoC,SAAAF,OAAA/B,aAAAkC,SAAAD,OAAApC,YAAAsC,SAAAF,OAAAjC,aAAAoC,SAAAD,OAAAtC,YAAAwC,SAAAD,OAAApC,aAAAsC,SAAAD,OAAArC,aAAAuC,SAAAJ,OAAAnC,aAAAwC,SAAAD,OAAA1C,YAAA4C,SAAAF,OAAAvC,aAAA0C,SAAAD,OAAA5C,YAAA8C,SAAAF,OAAAzC,aAAA4C,SAAAD,OAAA9C,YAAAgD,SAAAD,OAAA5C,aAAA8C,SAAAD,OAAA7C,aAAA+C,SAAAD,OAAA9C,aAAAgD,SAAAD,OAAA/C,aAAAiD,SAAAD,OAAAhD,aAAAkD,SAAAD,OAAAjD,aAAAmD,SAAAD,OAAAlD,aAAAoD,SAAAD,OAAAnD,aAAAqD,SAAAD,OAAApD,aAAAsD,SAAAD,OAAArD,aAAAuD,SAAAD,OAAAtD,aAAAwD,SAAAD,OAAAvD,aAAAyD,SAAAD,OAAAxD,aAAA0D,SAAAf,OAAA3C,aAAA2D,SAAAD,OAAA7D,YAAA+D,SAAAF,OAAA1D,aAAA6D,SAAAD,OAAA/D,YAAAiE,SAAAF,OAAA5D,aAAA+D,SAAAD,OAAA9D,aAAAgE,SAAAD,OAAA/D,aAAAiE,SAAAD,OAAAnE,YAAAqE,SAAAF,OAAAhE,aAAAmE,SAAAD,OAAArE,YAAAuE,SAAAF,OAAAlE,aAAAqE,SAAAD,OAAAvE,YAAAyE,SAAAD,OAAAxE,YAAA0E,SAAAD,OAAAtE,aAAAwE,SAAAD,OAAAvE,aAAAyE,SAAAD,OAAAxE,aAAA0E,SAAAD,OAAAzE,aAAA2E,SAAAD,OAAA1E,aAAA4E,SAAAD,OAAA3E,aAAA6E,SAAAD,OAAA5E,aAAA8E,SAAAD,OAAA7E,aAAA+E,SAAAD,OAAA9E,aAAAgF,SAAAD,OAAA/E,aAAAiF,SAAAD,OAAAhF,aAAAkF,SAAAD,OAAAjF,aAAAmF,SAAAD,OAAAlF,aAAAoF,SAAAD,OAAAnF,aAAAqF,SAAAD,OAAApF,aAAAsF,SAAAD,OAAArF,aAAAuF,SAAAD,OAAAtF;AAAAwF,iBAAA1F,OAAA,MASY,KAAKR,EAAE,EAAE;AAAAkG,iBAAAzF,OAAA,QAiBP,UAAUT,EAAE,GAAG;AAAAkG,iBAAAtF,OAAA,MAMf,KAAKZ,EAAE,EAAE;AAAAkG,iBAAArF,OAAA,MAWX,KAAKb,EAAE,EAAE;AAAAkG,iBAAApF,OAAA,UAOF,UAAUd,EAAE,GAAG;AAAAkG,iBAAAnF,OAAA,QAmBpB,UAAUf,EAAE,GAAG;AAAAkG,iBAAAjF,QAAA,MAMf,KAAKjB,EAAE,EAAE;AAAAkG,iBAAAhF,QAAA,MAWX,KAAKlB,EAAE,EAAE;AAAAkG,iBAAA/E,QAAA,UAOF,UAAUnB,EAAE,GAAG;AAAAkG,iBAAA9E,QAAA,QAmBpB,UAAUpB,EAAE,GAAG;AAAAkG,iBAAA5E,QAAA,MAMf,KAAKtB,EAAE,EAAE;AAAAkG,iBAAA3E,QAAA,MAWX,KAAKvB,EAAE,EAAE;AAAAkG,iBAAA1E,QAAA,UAOF,UAAUxB,EAAE,GAAG;AAAAkG,iBAAAzE,QAAA,QAmBpB,UAAUzB,EAAE,GAAG;AAAAkG,iBAAAvE,QAAA,MAMf,KAAK3B,EAAE,EAAE;AAAAkG,iBAAAtE,QAAA,MAWX,KAAK5B,EAAE,EAAE;AAAAkG,iBAAArE,QAAA,UAOF,UAAU7B,EAAE,GAAG;AAAAkG,iBAAApE,QAAA,QAmBpB,UAAU9B,EAAE,GAAG;AAAAkG,iBAAAlE,QAAA,MAMf,KAAKhC,EAAE,EAAE;AAAAkG,iBAAAjE,QAAA,MAWX,KAAKjC,EAAE,EAAE;AAAAkG,iBAAAhE,QAAA,UAOF,UAAUlC,EAAE,GAAG;AAAAkG,iBAAA/D,QAAA,QAmBpB,UAAUnC,EAAE,GAAG;AAAAkG,iBAAA7D,QAAA,MAMf,KAAKrC,EAAE,EAAE;AAAAkG,iBAAA5D,QAAA,MAWX,KAAKtC,EAAE,EAAE;AAAAkG,iBAAA3D,QAAA,UAOF,UAAUvC,EAAE,GAAG;AAAAkG,iBAAA1D,QAAA,QAmBpB,UAAUxC,EAAE,GAAG;AAAAkG,iBAAAxD,QAAA,MAMf,KAAK1C,EAAE,EAAE;AAAAkG,iBAAAvD,QAAA,MAWX,KAAK3C,EAAE,EAAE;AAAAkG,iBAAAtD,QAAA,UAOF,UAAU5C,EAAE,GAAG;AAAAkG,iBAAArD,QAAA,QAWnB,UAAU7C,EAAE,GAAG;AAAAkG,iBAAAnD,QAAA,MAUhB,KAAK/C,EAAE,EAAE;AAAAkG,iBAAAlD,QAAA,QAYP,UAAUhD,EAAE,GAAG;AAAAkG,iBAAAhD,QAAA,MAkBjB,KAAKlD,EAAE,EAAE;AAAAkG,iBAAA/C,QAAA,MAWX,KAAKnD,EAAE,EAAE;AAAAkG,iBAAA9C,QAAA,UAOF,UAAUpD,EAAE,GAAG;AAAAkG,iBAAA7C,QAAA,QAWnB,UAAUrD,EAAE,GAAG;AAAAkG,iBAAA5C,QAAA,MAEhB,KAAKtD,EAAE,EAAE;AAAAkG,iBAAA3C,QAAA,QAYP,UAAUvD,EAAE,GAAG;AAAAkG,iBAAA1C,QAAA,MAMjB,KAAKxD,EAAE,EAAE;AAAAkG,iBAAAzC,QAAA,QAYP,UAAUzD,EAAE,GAAG;AAAAkG,iBAAAxC,QAAA,MAQjB,KAAK1D,EAAE,EAAE;AAAAkG,iBAAAvC,QAAA,QAYP,UAAU3D,EAAE,GAAG;AAAAkG,iBAAAtC,QAAA,MAQjB,KAAK5D,EAAE,EAAE;AAAAkG,iBAAArC,QAAA,QAYP,UAAU7D,EAAE,GAAG;AAAAkG,iBAAApC,QAAA,MAQjB,KAAK9D,EAAE,EAAE;AAAAkG,iBAAAnC,QAAA,QAYP,UAAU/D,EAAE,GAAG;AAAAkG,iBAAAlC,QAAA,MAQjB,KAAKhE,EAAE,EAAE;AAAAkG,iBAAAjC,QAAA,QAYP,UAAUjE,EAAE,GAAG;AAAAkG,iBAAAhC,QAAA,MAQjB,KAAKlE,EAAE,EAAE;AAAAkG,iBAAA/B,QAAA,QAYP,UAAUnE,EAAE,GAAG;AAAAkG,iBAAA7B,QAAA,MAwBjB,KAAKrE,EAAE,EAAE;AAAAkG,iBAAA5B,QAAA,MAWX,KAAKtE,EAAE,EAAE;AAAAkG,iBAAA3B,QAAA,UAOF,UAAUvE,EAAE,GAAG;AAAAkG,iBAAA1B,QAAA,MAYtB,KAAKxE,EAAE,EAAE;AAAAkG,iBAAAzB,QAAA,QAcP,UAAUzE,EAAE,GAAG;AAAAkG,iBAAAzB,QAAA,QAGf,UAAUzE,EAAE,GAAG;AAAAkG,iBAAAvB,QAAA,MAMf,KAAK3E,EAAE,EAAE;AAAAkG,iBAAAtB,QAAA,MAWX,KAAK5E,EAAE,EAAE;AAAAkG,iBAAArB,QAAA,UAOF,UAAU7E,EAAE,GAAG;AAAAkG,iBAAApB,QAAA,QAWnB,UAAU9E,EAAE,GAAG;AAAAkG,iBAAAlB,QAAA,MAGd,KAAKhF,EAAE,EAAE;AAAAkG,iBAAAjB,QAAA,QAeP,UAAUjF,EAAE,GAAG;AAAAkG,iBAAAhB,QAAA,MAKjB,KAAKlF,EAAE,EAAE;AAAAkG,iBAAAf,QAAA,UAaL,UAAUnF,EAAE,GAAG;AAAAkG,iBAAAd,QAAA,MAOnB,KAAKpF,EAAE,EAAE;AAAAkG,iBAAAb,QAAA,UAaL,UAAUrF,EAAE,GAAG;AAAAkG,iBAAAZ,QAAA,MAOnB,KAAKtF,EAAE,EAAE;AAAAkG,iBAAAX,QAAA,UAaL,UAAUvF,EAAE,GAAG;AAAAkG,iBAAAV,QAAA,MAOnB,KAAKxF,EAAE,EAAE;AAAAkG,iBAAAT,QAAA,UAaL,UAAUzF,EAAE,GAAG;AAAAkG,iBAAAR,QAAA,MAOnB,KAAK1F,EAAE,EAAE;AAAAkG,iBAAAP,QAAA,UAaL,UAAU3F,EAAE,GAAG;AAAAkG,iBAAAN,QAAA,MAOnB,KAAK5F,EAAE,EAAE;AAAAkG,iBAAAL,QAAA,UAaL,UAAU7F,EAAE,GAAG;AAAAkG,iBAAAJ,QAAA,MAOnB,KAAK9F,EAAE,EAAE;AAAAkG,iBAAAH,QAAA,UAaL,UAAU/F,EAAE,GAAG;AAAAkG,iBAAAF,QAAA,MAOnB,KAAKhG,EAAE,EAAE;AAAAkG,iBAAAD,QAAA,UAaL,UAAUjG,EAAE,GAAG;AAAAmG,WAAA,MAAAD,aAAA9F,eAhyBxBF,OAAAA,EAASkG,IAAI,CAAA;AAAA,WAAAhG;AAAAA,EAAA,GAAA;AA2yB1B;"}

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

@@ -1,6 +1,6 @@
 import { template, setAttribute, insert, effect, className } from "solid-js/web";
 import clsx from "clsx";
-import { useHeight } from "../context/use-devtools-context.js";
+import { useHeight, useDevtoolsSettings } from "../context/use-devtools-context.js";
 import { useStyles } from "../styles/use-styles.js";
 import { TANSTACK_DEVTOOLS } from "../utils/storage.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
@@ -9,12 +9,15 @@ const MainPanel = (props) => {
   const {
     height
   } = useHeight();
+  const {
+    settings
+  } = useDevtoolsSettings();
   return (() => {
     var _el$ = _tmpl$();
     setAttribute(_el$, "id", TANSTACK_DEVTOOLS);
     insert(_el$, () => props.children);
     effect((_p$) => {
-      var _v$ = height() + "px", _v$2 = clsx(styles().devtoolsPanelContainer, styles().devtoolsPanelContainerAnimation(props.isOpen(), height()), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
+      var _v$ = height() + "px", _v$2 = clsx(styles().devtoolsPanelContainer(settings().panelLocation), styles().devtoolsPanelContainerAnimation(props.isOpen(), height()), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
       _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("height", _v$) : _el$.style.removeProperty("height"));
       _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
       return _p$;

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

@@ -1 +1 @@
-{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { JSX } from 'solid-js/jsx-runtime'\nimport type { Accessor } from 'solid-js'\n\nexport const MainPanel = (props: {\n  isOpen: Accessor<boolean>\n  children: JSX.Element\n  isResizing: Accessor<boolean>\n}) => {\n  const styles = useStyles()\n  const { height } = useHeight()\n  return (\n    <div\n      id={TANSTACK_DEVTOOLS}\n      style={{\n        height: height() + 'px',\n      }}\n      class={clsx(\n        styles().devtoolsPanelContainer,\n        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n        styles().devtoolsPanelContainerVisibility(props.isOpen()),\n        styles().devtoolsPanelContainerResizing(props.isResizing),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","_el$","_tmpl$","TANSTACK_DEVTOOLS","children","_$effect","_p$","_v$","_v$2","clsx","devtoolsPanelContainer","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;AAOaA,MAAAA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAU;AACnB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,UAAU;AAC7B,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAAD,iBAAAA,MAAA,MAEQE,iBAAiB;AAAAF,WAAAA,MAWpBL,MAAAA,MAAMQ,QAAQ;AAAAC,WAAAC,CAAA,QAAA;AAAA,UAAAC,MATLR,WAAW,MAAIS,OAElBC,KACLZ,OAAO,EAAEa,wBACTb,SAASc,gCAAgCf,MAAMgB,UAAUb,OAAQ,CAAA,GACjEF,SAASgB,iCAAiCjB,MAAMgB,QAAQ,GACxDf,OAAO,EAAEiB,+BAA+BlB,MAAMmB,UAAU,CAC1D;AAACR,cAAAD,IAAAU,OAAAV,IAAAU,IAAAT,QAAA,OAAAN,KAAAgB,MAAAC,YAAAX,UAAAA,GAAA,IAAAN,KAAAgB,MAAAE,eAAA,QAAA;AAAAX,eAAAF,IAAAc,KAAAC,UAAApB,MAAAK,IAAAc,IAAAZ,IAAA;AAAAF,aAAAA;AAAAA,IAAAA,GAAA;AAAA,MAAAU,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAArB,WAAAA;AAAAA,EAAAA,GAAA;AAKP;"}
+{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport type { JSX } from 'solid-js/jsx-runtime'\nimport type { Accessor } from 'solid-js'\n\nexport const MainPanel = (props: {\n  isOpen: Accessor<boolean>\n  children: JSX.Element\n  isResizing: Accessor<boolean>\n}) => {\n  const styles = useStyles()\n  const { height } = useHeight()\n  const { settings } = useDevtoolsSettings()\n  return (\n    <div\n      id={TANSTACK_DEVTOOLS}\n      style={{\n        height: height() + 'px',\n      }}\n      class={clsx(\n        styles().devtoolsPanelContainer(settings().panelLocation),\n        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n        styles().devtoolsPanelContainerVisibility(props.isOpen()),\n        styles().devtoolsPanelContainerResizing(props.isResizing),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","children","_$effect","_p$","_v$","_v$2","clsx","devtoolsPanelContainer","panelLocation","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;AAOO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,UAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,iBAAAF,MAAA,MAEQG,iBAAiB;AAAAC,WAAAJ,MAAA,MAWpBP,MAAMY,QAAQ;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MATLZ,OAAAA,IAAW,MAAIa,OAElBC,KACLhB,SAASiB,uBAAuBb,WAAWc,aAAa,GACxDlB,OAAAA,EAASmB,gCAAgCpB,MAAMqB,OAAAA,GAAUlB,OAAAA,CAAQ,GACjEF,OAAAA,EAASqB,iCAAiCtB,MAAMqB,OAAAA,CAAQ,GACxDpB,OAAAA,EAASsB,+BAA+BvB,MAAMwB,UAAU,CAC1D;AAACT,cAAAD,IAAAW,OAAAX,IAAAW,IAAAV,QAAA,OAAAR,KAAAmB,MAAAC,YAAA,UAAAZ,GAAA,IAAAR,KAAAmB,MAAAE,eAAA,QAAA;AAAAZ,eAAAF,IAAAe,KAAAC,UAAAvB,MAAAO,IAAAe,IAAAb,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAW,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAxB;AAAAA,EAAA,GAAA;AAKP;"}

package/dist/esm/components/select.d.ts

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

package/dist/esm/components/select.js

@@ -0,0 +1,59 @@
+import { template, insert, memo, effect, className, delegateEvents } from "solid-js/web";
+import { createSignal } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+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$;
+  })();
+}
+delegateEvents(["input"]);
+export {
+  Select
+};
+//# sourceMappingURL=select.js.map

package/dist/esm/components/select.js.map

@@ -0,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;"}

package/dist/esm/components/tab-content.js

@@ -5,15 +5,13 @@ import { tabs } from "../tabs/index.js";
 import { useStyles } from "../styles/use-styles.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 const TabContent = () => {
-  var _a;
   const {
     state
   } = useDevtoolsState();
   const styles = useStyles();
-  const [component, setComponent] = createSignal(((_a = tabs.find((t) => t.id === state().activeTab)) == null ? void 0 : _a.component()) || null);
+  const [component, setComponent] = createSignal(tabs.find((t) => t.id === state().activeTab)?.component() || null);
   createEffect(() => {
-    var _a2;
-    setComponent(((_a2 = tabs.find((t) => t.id === state().activeTab)) == null ? void 0 : _a2.component()) || null);
+    setComponent(tabs.find((t) => t.id === state().activeTab)?.component() || null);
   });
   return (() => {
     var _el$ = _tmpl$();

package/dist/esm/components/tab-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-content.js","sources":["../../../src/components/tab-content.tsx"],"sourcesContent":["import { createEffect, createSignal } from 'solid-js'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js'\n\nexport const TabContent = () => {\n  const { state } = useDevtoolsState()\n  const styles = useStyles()\n  const [component, setComponent] = createSignal<JSX.Element | null>(\n    tabs.find((t) => t.id === state().activeTab)?.component() || null,\n  )\n  createEffect(() => {\n    setComponent(\n      tabs.find((t) => t.id === state().activeTab)?.component() || null,\n    )\n  })\n\n  return <div class={styles().tabContent}>{component()}</div>\n}\n"],"names":["TabContent","state","useDevtoolsState","styles","useStyles","component","setComponent","createSignal","tabs","find","t","id","activeTab","createEffect","_el$","_tmpl$","_$insert","_$effect","_$className","tabContent"],"mappings":";;;;;;AAMO,MAAMA,aAAaA,MAAM;;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAUC,iBAAiB;AACnC,QAAMC,SAASC,UAAU;AACzB,QAAM,CAACC,WAAWC,YAAY,IAAIC,eAChCC,UAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,MAAQW,EAAAA,SAAS,MAA3CJ,mBAA8CH,gBAAe,IAC/D;AACAQ,eAAa,MAAM;;AAEfL,mBAAAA,MAAAA,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,MAAM,EAAEW,SAAS,MAA3CJ,gBAAAA,IAA8CH,gBAAe,IAC/D;AAAA,EAAA,CACD;AAED,UAAA,MAAA;AAAA,QAAAS,OAAAC,OAAA;AAAAC,WAAAF,MAAyCT,SAAS;AAAAY,WAAA,MAAAC,UAAAJ,MAA/BX,OAAO,EAAEgB,UAAU,CAAA;AAAAL,WAAAA;AAAAA,EAAAA,GAAA;AACxC;"}
+{"version":3,"file":"tab-content.js","sources":["../../../src/components/tab-content.tsx"],"sourcesContent":["import { createEffect, createSignal } from 'solid-js'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js'\n\nexport const TabContent = () => {\n  const { state } = useDevtoolsState()\n  const styles = useStyles()\n  const [component, setComponent] = createSignal<JSX.Element | null>(\n    tabs.find((t) => t.id === state().activeTab)?.component() || null,\n  )\n  createEffect(() => {\n    setComponent(\n      tabs.find((t) => t.id === state().activeTab)?.component() || null,\n    )\n  })\n\n  return <div class={styles().tabContent}>{component()}</div>\n}\n"],"names":["TabContent","state","useDevtoolsState","styles","useStyles","component","setComponent","createSignal","tabs","find","t","id","activeTab","createEffect","_el$","_tmpl$","_$insert","_$effect","_$className","tabContent"],"mappings":";;;;;;AAMO,MAAMA,aAAaA,MAAM;AAC9B,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAUC,iBAAAA;AAClB,QAAMC,SAASC,UAAAA;AACf,QAAM,CAACC,WAAWC,YAAY,IAAIC,aAChCC,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,QAAQW,SAAS,GAAGP,UAAAA,KAAe,IAC/D;AACAQ,eAAa,MAAM;AACjBP,iBACEE,KAAKC,KAAMC,CAAAA,MAAMA,EAAEC,OAAOV,MAAAA,EAAQW,SAAS,GAAGP,UAAAA,KAAe,IAC/D;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAAS,OAAAC,OAAAA;AAAAC,WAAAF,MAAyCT,SAAS;AAAAY,WAAA,MAAAC,UAAAJ,MAA/BX,OAAAA,EAASgB,UAAU,CAAA;AAAA,WAAAL;AAAAA,EAAA,GAAA;AACxC;"}

package/dist/esm/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      <button\n        type=\"button\"\n        class={clsx(styles().tab, 'close')}\n        onClick={() => props.toggleOpen()}\n      >\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      </button>\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","_el$","_tmpl$","_el$2","firstChild","_$createComponent","For","each","tabs","children","tab","_el$3","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","toggleOpen","_p$","_v$","tabContainer","_v$2","e","t","undefined","_$delegateEvents"],"mappings":";;;;;;;AAUaA,MAAAA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAU;AACnB,QAAA;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,MAAaC,iBAAiB;AAE7C,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAH,WAAAA,MAAAI,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAA;AAAAC,cAAAA,UAGQ,MAAMd,SAAS;AAAA,UAAEe,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACJ,eAAAA,OAG7CD,MAAAA,IAAIM,IAAI;AAAAC,eAAAC,MAAAA,UAAAP,OAFFQ,KAAKvB,SAASc,KAAK;AAAA,UAAEU,QAAQtB,MAAAA,EAAQgB,cAAcJ,IAAIK;AAAAA,QAAI,CAAA,CAAC,CAAA;AAAAJ,eAAAA;AAAAA,MAAA,GAAA;AAAA,IAItE,CAAA,GAAAR,KAAA;AAAAU,UAAAA,UAKQ,MAAMlB,MAAM0B,WAAW;AAACJ,WAAAK,CAAA,QAAA;AAAAC,UAAAA,MAfzB3B,OAAS4B,EAAAA,cAAYC,OActBN,KAAKvB,OAAAA,EAASc,KAAK,OAAO;AAACa,cAAAD,IAAAI,KAAAR,UAAAjB,MAAAqB,IAAAI,IAAAH,GAAA;AAAAE,eAAAH,IAAAK,KAAAT,UAAAf,OAAAmB,IAAAK,IAAAF,IAAA;AAAAH,aAAAA;AAAAA,IAAAA,GAAA;AAAA,MAAAI,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA3B,WAAAA;AAAAA,EAAAA,GAAA;AAoB1C;AAAC4B,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      <button\n        type=\"button\"\n        class={clsx(styles().tab, 'close')}\n        onClick={() => props.toggleOpen()}\n      >\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      </button>\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","_el$","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","tabs","children","tab","_el$3","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","toggleOpen","_p$","_v$","tabContainer","_v$2","e","t","undefined","_$delegateEvents"],"mappings":";;;;;;;AAUO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAE5B,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAC,WAAAJ,MAAAK,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,UAGQ,MAAMf,SAAS;AAAA,UAAEgB,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACX,eAAAO,OAAA,MAG7CD,IAAIM,IAAI;AAAAC,eAAA,MAAAC,UAAAP,OAFFQ,KAAKxB,OAAAA,EAASe,KAAK;AAAA,UAAEU,QAAQvB,MAAAA,EAAQiB,cAAcJ,IAAIK;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAItE,GAAAT,KAAA;AAAAA,UAAAW,UAKQ,MAAMnB,MAAM2B,WAAAA;AAAYJ,WAAAK,CAAAA,QAAA;AAAA,UAAAC,MAfzB5B,SAAS6B,cAAYC,OActBN,KAAKxB,OAAAA,EAASe,KAAK,OAAO;AAACa,cAAAD,IAAAI,KAAAR,UAAAlB,MAAAsB,IAAAI,IAAAH,GAAA;AAAAE,eAAAH,IAAAK,KAAAT,UAAAhB,OAAAoB,IAAAK,IAAAF,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA5B;AAAAA,EAAA,GAAA;AAoB1C;AAAC6B,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/components/trigger.js

@@ -14,7 +14,7 @@ const Trigger = ({
   } = useDevtoolsSettings();
   const styles = useStyles();
   const buttonStyle = createMemo(() => {
-    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen()));
+    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
   });
   return (() => {
     var _el$ = _tmpl$();

package/dist/esm/components/trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","sources":["../../../src/components/trigger.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TanStackLogo } from './logo'\nimport type { Accessor } from 'solid-js'\n\nexport const Trigger = ({\n  isOpen,\n  setIsOpen,\n}: {\n  isOpen: Accessor<boolean>\n  setIsOpen: (isOpen: boolean) => void\n}) => {\n  const { settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const buttonStyle = createMemo(() => {\n    return clsx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(settings().position),\n      styles().mainCloseBtnAnimation(isOpen()),\n    )\n  })\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Open TanStack Devtools\"\n      class={buttonStyle()}\n      onClick={() => setIsOpen(!isOpen())}\n    >\n      <TanStackLogo />\n    </button>\n  )\n}\n"],"names":["Trigger","isOpen","setIsOpen","settings","useDevtoolsSettings","styles","useStyles","buttonStyle","createMemo","clsx","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","_el$","_tmpl$","$$click","_$insert","_$createComponent","TanStackLogo","_$effect","_$className","_$delegateEvents"],"mappings":";;;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAIF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAaC,oBAAoB;AACzC,QAAMC,SAASC,UAAU;AACnBC,QAAAA,cAAcC,WAAW,MAAM;AACnC,WAAOC,KACLJ,OAAO,EAAEK,cACTL,SAASM,qBAAqBR,SAAAA,EAAWS,QAAQ,GACjDP,OAAO,EAAEQ,sBAAsBZ,OAAQ,CAAA,CACzC;AAAA,EAAA,CACD;AACD,UAAA,MAAA;AAAA,QAAAa,OAAAC,OAAA;AAAAD,SAAAE,UAKa,MAAMd,UAAU,CAACD,QAAQ;AAACgB,WAAAH,MAAAI,gBAElCC,cAAY,CAAA,CAAA,CAAA;AAAAC,iBAAAC,UAAAP,MAHNP,YAAa,CAAA,CAAA;AAAAO,WAAAA;AAAAA,EAAAA,GAAA;AAM1B;AAACQ,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"trigger.js","sources":["../../../src/components/trigger.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TanStackLogo } from './logo'\nimport type { Accessor } from 'solid-js'\n\nexport const Trigger = ({\n  isOpen,\n  setIsOpen,\n}: {\n  isOpen: Accessor<boolean>\n  setIsOpen: (isOpen: boolean) => void\n}) => {\n  const { settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const buttonStyle = createMemo(() => {\n    return clsx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(settings().position),\n      styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover),\n    )\n  })\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Open TanStack Devtools\"\n      class={buttonStyle()}\n      onClick={() => setIsOpen(!isOpen())}\n    >\n      <TanStackLogo />\n    </button>\n  )\n}\n"],"names":["Trigger","isOpen","setIsOpen","settings","useDevtoolsSettings","styles","useStyles","buttonStyle","createMemo","clsx","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","hideUntilHover","_el$","_tmpl$","$$click","_$insert","_$createComponent","TanStackLogo","_$effect","_$className","_$delegateEvents"],"mappings":";;;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAIF,MAAM;AACJ,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,QAAMC,SAASC,UAAAA;AACf,QAAMC,cAAcC,WAAW,MAAM;AACnC,WAAOC,KACLJ,SAASK,cACTL,OAAAA,EAASM,qBAAqBR,SAAAA,EAAWS,QAAQ,GACjDP,OAAAA,EAASQ,sBAAsBZ,OAAAA,GAAUE,SAAAA,EAAWW,cAAc,CACpE;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAD,SAAAE,UAKa,MAAMf,UAAU,CAACD,QAAQ;AAACiB,WAAAH,MAAAI,gBAElCC,cAAY,CAAA,CAAA,CAAA;AAAAC,iBAAAC,UAAAP,MAHNR,YAAAA,CAAa,CAAA;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAM1B;AAACQ,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PLUGIN_CONTAINER_ID = "plugin-container";
+export declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";

package/dist/esm/constants.js

@@ -0,0 +1,7 @@
+const PLUGIN_CONTAINER_ID = "plugin-container";
+const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
+export {
+  PLUGIN_CONTAINER_ID,
+  PLUGIN_TITLE_CONTAINER_ID
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/constants.ts"],"sourcesContent":["export const PLUGIN_CONTAINER_ID = 'plugin-container'\nexport const PLUGIN_TITLE_CONTAINER_ID = 'plugin-title-container'\n"],"names":[],"mappings":"AAAO,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;"}

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

@@ -1,9 +1,9 @@
 import { DevtoolsStore } from './devtools-store.js';
 import { Setter } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
-export interface DevtoolsPlugin {
+export interface TanStackDevtoolsPlugin {
     name: string | ((el: HTMLHeadingElement) => void);
-    id: string;
+    id?: string;
     render: (el: HTMLDivElement) => void;
 }
 export declare const DevtoolsContext: import('solid-js').Context<{
@@ -12,9 +12,9 @@ export declare const DevtoolsContext: import('solid-js').Context<{
 } | undefined>;
 interface ContextProps {
     children: JSX.Element;
-    plugins?: Array<DevtoolsPlugin>;
-    config?: DevtoolsSettings;
+    plugins?: Array<TanStackDevtoolsPlugin>;
+    config?: TanStackDevtoolsConfig;
 }
-export type DevtoolsSettings = DevtoolsStore['settings'];
+export type TanStackDevtoolsConfig = DevtoolsStore['settings'];
 export declare const DevtoolsProvider: (props: ContextProps) => JSX.Element;
 export {};

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

@@ -12,12 +12,27 @@ const getSettings = () => {
     ...settings
   };
 };
+const generatePluginId = (plugin, index) => {
+  if (plugin.id) {
+    return plugin.id;
+  }
+  if (typeof plugin.name === "string") {
+    return plugin.name.toLowerCase().replace(" ", "-");
+  }
+  return index.toString();
+};
 const getExistingStateFromStorage = (config, plugins) => {
   const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE);
   const settings = getSettings();
   const state = {
     ...initialState,
-    plugins: plugins || [],
+    plugins: plugins?.map((plugin, i) => {
+      const id = generatePluginId(plugin, i);
+      return {
+        ...plugin,
+        id
+      };
+    }) || [],
     state: {
       ...initialState.state,
       ...existingState ? JSON.parse(existingState) : {}

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

@@ -1 +1 @@
-{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { Setter } from 'solid-js'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport interface DevtoolsPlugin {\n  name: string | ((el: HTMLHeadingElement) => void)\n  id: string\n  render: (el: HTMLDivElement) => void\n}\n\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<DevtoolsPlugin>\n  config?: DevtoolsSettings\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst getExistingStateFromStorage = (\n  config?: DevtoolsSettings,\n  plugins?: Array<DevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins: plugins || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type DevtoolsSettings = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;AAoBO,MAAMA,kBAAkBC,cAG5B;AAQH,MAAMC,cAAcA,MAAM;AAClBC,QAAAA,iBAAiBC,eAAeC,0BAA0B;AAC1DC,QAAAA,WAAWC,aAAwCJ,cAAc;AAChE,SAAA;AAAA,IACL,GAAGG;AAAAA,EACL;AACF;AAEA,MAAME,8BAA8BA,CAClCC,QACAC,YACG;AACGC,QAAAA,gBAAgBP,eAAeQ,uBAAuB;AAC5D,QAAMN,WAAWJ,YAAY;AAE7B,QAAMW,QAAuB;AAAA,IAC3B,GAAGC;AAAAA,IACHJ,SAASA,WAAW,CAAE;AAAA,IACtBG,OAAO;AAAA,MACL,GAAGC,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBI,KAAKC,MAAML,aAAa,IAAI,CAAA;AAAA,IAClD;AAAA,IACAL,UAAU;AAAA,MACR,GAAGQ,aAAaR;AAAAA,MAChB,GAAGG;AAAAA,MACH,GAAGH;AAAAA,IAAAA;AAAAA,EAEP;AACOO,SAAAA;AACT;AAIaI,MAAAA,mBAAmBA,CAACC,UAAwB;AACjD,QAAA,CAACC,OAAOC,QAAQ,IAAIC,YACxBb,4BAA4BU,MAAMT,QAAQS,MAAMR,OAAO,CACzD;AAEA,QAAMY,QAAQ;AAAA,IACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACGC,YAAAA,WAAWD,QAAQJ,KAAK;AACxB,YAAA;AAAA,QAAEb;AAAAA,QAAUO,OAAOY;AAAAA,MAAAA,IAAkBD;AAE3CE,qBAAerB,4BAA4BU,KAAKY,UAAUrB,QAAQ,CAAC;AAEnEoB,qBAAed,yBAAyBG,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAU,UAAA;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IAAA;AAAA,EAEN;AAEAK,SAAAA,gBACG7B,gBAAgB8B,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAAA;AAAAA,EAAQ,CAAA;AAGrB;"}
+{"version":3,"file":"devtools-context.js","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { Setter } from 'solid-js'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport interface TanStackDevtoolsPlugin {\n  name: string | ((el: HTMLHeadingElement) => void)\n  id?: string\n  render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<TanStackDevtoolsPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n  // if set by user, return the plugin id\n  if (plugin.id) {\n    return plugin.id\n  }\n  if (typeof plugin.name === 'string') {\n    // if name is a string, use it to generate an id\n    return plugin.name.toLowerCase().replace(' ', '-')\n  }\n  // Name is JSX? return the index as a string\n  return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n  config?: TanStackDevtoolsConfig,\n  plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins:\n      plugins?.map((plugin, i) => {\n        const id = generatePluginId(plugin, i)\n        return {\n          ...plugin,\n          id,\n        }\n      }) || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;AAmBO,MAAMA,kBAAkBC,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,eAAeC,0BAA0B;AAChE,QAAMC,WAAWC,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAOH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG;AAAA,EACnD;AAEA,SAAOJ,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,eAAegB,uBAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,OAAOC,QAAQ,IAAIC,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,KAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,qBAAe/B,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,qBAAehB,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;"}

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

@@ -1,5 +1,5 @@
 import { TabName } from '../tabs.js';
-import { DevtoolsPlugin } from './devtools-context.js';
+import { TanStackDevtoolsPlugin } from './devtools-context.js';
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
 type KeyboardKey = ModifierKey | (string & {});
 type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
@@ -44,10 +44,10 @@ export type DevtoolsStore = {
     state: {
         activeTab: TabName;
         height: number;
-        activePlugin?: DevtoolsPlugin | undefined;
+        activePlugin?: string | undefined;
         persistOpen: boolean;
     };
-    plugins?: Array<DevtoolsPlugin>;
+    plugins?: Array<TanStackDevtoolsPlugin>;
 };
 export declare const initialState: DevtoolsStore;
 export {};

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

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

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

@@ -1,15 +1,14 @@
-import { DevtoolsPlugin } from './devtools-context.jsx';
 import { DevtoolsStore } from './devtools-store.js';
 export declare const usePlugins: () => {
-    plugins: import('solid-js').Accessor<DevtoolsPlugin[] | undefined>;
-    setActivePlugin: (plugin: DevtoolsPlugin) => void;
-    activePlugin: import('solid-js').Accessor<DevtoolsPlugin | undefined>;
+    plugins: import('solid-js').Accessor<import('./devtools-context.jsx').TanStackDevtoolsPlugin[] | undefined>;
+    setActivePlugin: (pluginId: string) => void;
+    activePlugin: import('solid-js').Accessor<string | undefined>;
 };
 export declare const useDevtoolsState: () => {
     state: import('solid-js').Accessor<{
         activeTab: import('../tabs/index.jsx').TabName;
         height: number;
-        activePlugin?: DevtoolsPlugin | undefined;
+        activePlugin?: string | undefined;
         persistOpen: boolean;
     }>;
     setState: (newState: Partial<DevtoolsStore["state"]>) => void;

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

@@ -13,12 +13,12 @@ const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext();
   const plugins = createMemo(() => store.plugins);
   const activePlugin = createMemo(() => store.state.activePlugin);
-  const setActivePlugin = (plugin) => {
+  const setActivePlugin = (pluginId) => {
     setStore((prev) => ({
       ...prev,
       state: {
         ...prev.state,
-        activePlugin: plugin
+        activePlugin: pluginId
       }
     }));
   };