@tanstack/router-devtools 1.16.6 → 1.17.1

package/dist/esm/Explorer.js

@@ -1,53 +1,30 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { styled, displayValue } from "./utils.js";
-const Entry = styled("div", {
-  fontFamily: "Menlo, monospace",
-  fontSize: ".7rem",
-  lineHeight: "1.7",
-  outline: "none",
-  wordBreak: "break-word"
-});
-const Label = styled("span", {
-  color: "white"
-});
-const LabelButton = styled("button", {
-  cursor: "pointer",
-  color: "white"
-});
-const ExpandButton = styled("button", {
-  cursor: "pointer",
-  color: "inherit",
-  font: "inherit",
-  outline: "inherit",
-  background: "transparent",
-  border: "none",
-  padding: 0
-});
-const Value = styled("span", (_props, theme) => ({
-  color: theme.danger
-}));
-const SubEntries = styled("div", {
-  marginLeft: ".1em",
-  paddingLeft: "1em",
-  borderLeft: "2px solid rgba(0,0,0,.15)"
-});
-const Info = styled("span", {
-  color: "grey",
-  fontSize: ".7em"
-});
-const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsx(
-  "span",
+import { clsx } from "clsx";
+import { tokens } from "./tokens.js";
+import { displayValue } from "./utils.js";
+import { css } from "goober";
+const Expander = ({ expanded, style = {} }) => /* @__PURE__ */ jsx("span", { className: getStyles().expander, children: /* @__PURE__ */ jsx(
+  "svg",
   {
-    style: {
-      display: "inline-block",
-      transition: "all .1s ease",
-      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ""}`,
-      ...style
-    },
-    children: "▶"
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: clsx(getStyles().expanderIcon(expanded)),
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        d: "M9 18l6-6-6-6"
+      }
+    )
   }
-);
+) });
 function chunkArray(array, size) {
   if (size < 1)
     return [];
@@ -76,39 +53,48 @@ const DefaultRenderer = ({
   const refreshValueSnapshot = () => {
     setValueSnapshot(value());
   };
-  return /* @__PURE__ */ jsx(Entry, { children: subEntryPages.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(ExpandButton, { onClick: () => toggleExpanded(), children: [
-      /* @__PURE__ */ jsx(Expander, { expanded }),
-      " ",
-      label,
-      " ",
-      /* @__PURE__ */ jsxs(Info, { children: [
-        String(type).toLowerCase() === "iterable" ? "(Iterable) " : "",
-        subEntries.length,
-        " ",
-        subEntries.length > 1 ? `items` : `item`
-      ] })
-    ] }),
-    expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsx(SubEntries, { children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsx(SubEntries, { children: subEntryPages.map((entries, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Entry, { children: [
-      /* @__PURE__ */ jsxs(
-        LabelButton,
-        {
-          onClick: () => setExpandedPages(
-            (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Expander, { expanded }),
-            " [",
-            index * pageSize,
-            " ...",
+  return /* @__PURE__ */ jsx("div", { className: getStyles().entry, children: subEntryPages.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: getStyles().expandButton,
+        onClick: () => toggleExpanded(),
+        children: [
+          /* @__PURE__ */ jsx(Expander, { expanded }),
+          label,
+          /* @__PURE__ */ jsxs("span", { className: getStyles().info, children: [
+            String(type).toLowerCase() === "iterable" ? "(Iterable) " : "",
+            subEntries.length,
             " ",
-            index * pageSize + pageSize - 1,
-            "]"
-          ]
-        }
-      ),
-      expandedPages.includes(index) ? /* @__PURE__ */ jsx(SubEntries, { children: entries.map((entry) => handleEntry(entry)) }) : null
-    ] }) }, index)) }) : null
+            subEntries.length > 1 ? `items` : `item`
+          ] })
+        ]
+      }
+    ),
+    expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsx("div", { className: getStyles().subEntries, children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsx("div", { className: getStyles().subEntries, children: subEntryPages.map((entries, index) => {
+      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: getStyles().entry, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: clsx(getStyles().labelButton, "labelButton"),
+            onClick: () => setExpandedPages(
+              (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Expander, { expanded: expandedPages.includes(index) }),
+              " ",
+              "[",
+              index * pageSize,
+              " ...",
+              " ",
+              index * pageSize + pageSize - 1,
+              "]"
+            ]
+          }
+        ),
+        expandedPages.includes(index) ? /* @__PURE__ */ jsx("div", { className: getStyles().subEntries, children: entries.map((entry) => handleEntry(entry)) }) : null
+      ] }) }, index);
+    }) }) : null
   ] }) : type === "function" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Explorer,
     {
@@ -117,13 +103,9 @@ const DefaultRenderer = ({
         "button",
         {
           onClick: refreshValueSnapshot,
-          style: {
-            appearance: "none",
-            border: "0",
-            background: "transparent"
-          },
+          className: getStyles().refreshValueBtn,
           children: [
-            /* @__PURE__ */ jsx(Label, { children: label }),
+            /* @__PURE__ */ jsx("span", { children: label }),
             " 🔄",
             " "
           ]
@@ -133,12 +115,12 @@ const DefaultRenderer = ({
       defaultExpanded: {}
     }
   ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Label, { children: [
+    /* @__PURE__ */ jsxs("span", { children: [
       label,
       ":"
     ] }),
     " ",
-    /* @__PURE__ */ jsx(Value, { children: displayValue(value) })
+    /* @__PURE__ */ jsx("span", { className: getStyles().value, children: displayValue(value) })
   ] }) });
 };
 function isIterable(x) {
@@ -213,16 +195,94 @@ function Explorer({
     ...rest
   });
 }
+const stylesFactory = () => {
+  const { colors, font, size, alpha, shadow, border } = tokens;
+  const { fontFamily, lineHeight, size: fontSize } = font;
+  return {
+    entry: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      line-height: ${lineHeight.sm};
+      outline: none;
+      word-break: break-word;
+    `,
+    labelButton: css`
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      outline: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+    `,
+    expander: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: ${size[3]};
+      height: ${size[3]};
+      padding-left: 3px;
+      box-sizing: content-box;
+    `,
+    expanderIcon: (expanded) => {
+      if (expanded) {
+        return css`
+          transform: rotate(90deg);
+          transition: transform 0.1s ease;
+        `;
+      }
+      return css`
+        transform: rotate(0deg);
+        transition: transform 0.1s ease;
+      `;
+    },
+    expandButton: css`
+      display: flex;
+      gap: ${size[1]};
+      align-items: center;
+      cursor: pointer;
+      color: inherit;
+      font: inherit;
+      outline: inherit;
+      background: transparent;
+      border: none;
+      padding: 0;
+    `,
+    value: css`
+      color: ${colors.purple[400]};
+    `,
+    subEntries: css`
+      margin-left: ${size[2]};
+      padding-left: ${size[2]};
+      border-left: 2px solid ${colors.darkGray[400]};
+    `,
+    info: css`
+      color: ${colors.gray[500]};
+      font-size: ${fontSize["2xs"]};
+      padding-left: ${size[1]};
+    `,
+    refreshValueBtn: css`
+      appearance: none;
+      border: 0;
+      cursor: pointer;
+      background: transparent;
+      color: inherit;
+      padding: 0;
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+    `
+  };
+};
+let _styles = null;
+function getStyles() {
+  if (_styles)
+    return _styles;
+  _styles = stylesFactory();
+  return _styles;
+}
 export {
   DefaultRenderer,
-  Entry,
-  ExpandButton,
   Expander,
-  Info,
-  Label,
-  LabelButton,
-  SubEntries,
-  Value,
   chunkArray,
   Explorer as default
 };

package/dist/esm/Explorer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { displayValue, styled } from './utils'\n\nexport const Entry = styled('div', {\n  fontFamily: 'Menlo, monospace',\n  fontSize: '.7rem',\n  lineHeight: '1.7',\n  outline: 'none',\n  wordBreak: 'break-word',\n})\n\nexport const Label = styled('span', {\n  color: 'white',\n})\n\nexport const LabelButton = styled('button', {\n  cursor: 'pointer',\n  color: 'white',\n})\n\nexport const ExpandButton = styled('button', {\n  cursor: 'pointer',\n  color: 'inherit',\n  font: 'inherit',\n  outline: 'inherit',\n  background: 'transparent',\n  border: 'none',\n  padding: 0,\n})\n\nexport const Value = styled('span', (_props, theme) => ({\n  color: theme.danger,\n}))\n\nexport const SubEntries = styled('div', {\n  marginLeft: '.1em',\n  paddingLeft: '1em',\n  borderLeft: '2px solid rgba(0,0,0,.15)',\n})\n\nexport const Info = styled('span', {\n  color: 'grey',\n  fontSize: '.7em',\n})\n\ntype ExpanderProps = {\n  expanded: boolean\n  style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n  <span\n    style={{\n      display: 'inline-block',\n      transition: 'all .1s ease',\n      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,\n      ...style,\n    }}\n  >\n    ▶\n  </span>\n)\n\ntype Entry = {\n  label: string\n}\n\ntype RendererProps = {\n  handleEntry: HandleEntryFn\n  label?: React.ReactNode\n  value: unknown\n  subEntries: Entry[]\n  subEntryPages: Entry[][]\n  type: string\n  expanded: boolean\n  toggleExpanded: () => void\n  pageSize: number\n  renderer?: Renderer\n  filterSubEntries?: (subEntries: Property[]) => Property[]\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: T[], size: number): T[][] {\n  if (size < 1) return []\n  let i = 0\n  const result: T[][] = []\n  while (i < array.length) {\n    result.push(array.slice(i, i + size))\n    i = i + size\n  }\n  return result\n}\n\ntype Renderer = (props: RendererProps) => JSX.Element\n\nexport const DefaultRenderer: Renderer = ({\n  handleEntry,\n  label,\n  value,\n  subEntries = [],\n  subEntryPages = [],\n  type,\n  expanded = false,\n  toggleExpanded,\n  pageSize,\n  renderer,\n}) => {\n  const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n  const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n\n  const refreshValueSnapshot = () => {\n    setValueSnapshot((value as () => any)())\n  }\n\n  return (\n    <Entry>\n      {subEntryPages.length ? (\n        <>\n          <ExpandButton onClick={() => toggleExpanded()}>\n            <Expander expanded={expanded} /> {label}{' '}\n            <Info>\n              {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n              {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n            </Info>\n          </ExpandButton>\n          {expanded ? (\n            subEntryPages.length === 1 ? (\n              <SubEntries>\n                {subEntries.map((entry, index) => handleEntry(entry))}\n              </SubEntries>\n            ) : (\n              <SubEntries>\n                {subEntryPages.map((entries, index) => (\n                  <div key={index}>\n                    <Entry>\n                      <LabelButton\n                        onClick={() =>\n                          setExpandedPages((old) =>\n                            old.includes(index)\n                              ? old.filter((d) => d !== index)\n                              : [...old, index],\n                          )\n                        }\n                      >\n                        <Expander expanded={expanded} /> [{index * pageSize} ...{' '}\n                        {index * pageSize + pageSize - 1}]\n                      </LabelButton>\n                      {expandedPages.includes(index) ? (\n                        <SubEntries>\n                          {entries.map((entry) => handleEntry(entry))}\n                        </SubEntries>\n                      ) : null}\n                    </Entry>\n                  </div>\n                ))}\n              </SubEntries>\n            )\n          ) : null}\n        </>\n      ) : type === 'function' ? (\n        <>\n          <Explorer\n            renderer={renderer}\n            label={\n              <button\n                onClick={refreshValueSnapshot}\n                style={{\n                  appearance: 'none',\n                  border: '0',\n                  background: 'transparent',\n                }}\n              >\n                <Label>{label}</Label> 🔄{' '}\n              </button>\n            }\n            value={valueSnapshot}\n            defaultExpanded={{}}\n          />\n        </>\n      ) : (\n        <>\n          <Label>{label}:</Label> <Value>{displayValue(value)}</Value>\n        </>\n      )}\n    </Entry>\n  )\n}\n\ntype HandleEntryFn = (entry: Entry) => JSX.Element\n\ntype ExplorerProps = Partial<RendererProps> & {\n  renderer?: Renderer\n  defaultExpanded?: true | Record<string, boolean>\n}\n\ntype Property = {\n  defaultExpanded?: boolean | Record<string, boolean>\n  label: string\n  value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n  return Symbol.iterator in x\n}\n\nexport default function Explorer({\n  value,\n  defaultExpanded,\n  renderer = DefaultRenderer,\n  pageSize = 100,\n  filterSubEntries,\n  ...rest\n}: ExplorerProps) {\n  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n  let type: string = typeof value\n  let subEntries: Property[] = []\n\n  const makeProperty = (sub: { label: string; value: unknown }): Property => {\n    const subDefaultExpanded =\n      defaultExpanded === true\n        ? { [sub.label]: true }\n        : defaultExpanded?.[sub.label]\n    return {\n      ...sub,\n      defaultExpanded: subDefaultExpanded,\n    }\n  }\n\n  if (Array.isArray(value)) {\n    type = 'array'\n    subEntries = value.map((d, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: d,\n      }),\n    )\n  } else if (\n    value !== null &&\n    typeof value === 'object' &&\n    isIterable(value) &&\n    typeof value[Symbol.iterator] === 'function'\n  ) {\n    type = 'Iterable'\n    subEntries = Array.from(value, (val, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: val,\n      }),\n    )\n  } else if (typeof value === 'object' && value !== null) {\n    type = 'object'\n    subEntries = Object.entries(value).map(([key, val]) =>\n      makeProperty({\n        label: key,\n        value: val,\n      }),\n    )\n  }\n\n  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\n\n  const subEntryPages = chunkArray(subEntries, pageSize)\n\n  return renderer({\n    handleEntry: (entry) => (\n      <Explorer\n        key={entry.label}\n        value={value}\n        renderer={renderer}\n        filterSubEntries={filterSubEntries}\n        {...rest}\n        {...entry}\n      />\n    ),\n    type,\n    subEntries,\n    subEntryPages,\n    value,\n    expanded,\n    toggleExpanded,\n    pageSize,\n    ...rest,\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Explorer.js","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { clsx as cx } from 'clsx'\nimport { tokens } from './tokens'\nimport { displayValue, styled } from './utils'\nimport { css } from 'goober'\n\ntype ExpanderProps = {\n  expanded: boolean\n  style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => (\n  <span className={getStyles().expander}>\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      className={cx(getStyles().expanderIcon(expanded))}\n    >\n      <path\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        d=\"M9 18l6-6-6-6\"\n      ></path>\n    </svg>\n  </span>\n)\n\ntype Entry = {\n  label: string\n}\n\ntype RendererProps = {\n  handleEntry: HandleEntryFn\n  label?: React.ReactNode\n  value: unknown\n  subEntries: Entry[]\n  subEntryPages: Entry[][]\n  type: string\n  expanded: boolean\n  toggleExpanded: () => void\n  pageSize: number\n  renderer?: Renderer\n  filterSubEntries?: (subEntries: Property[]) => Property[]\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: T[], size: number): T[][] {\n  if (size < 1) return []\n  let i = 0\n  const result: T[][] = []\n  while (i < array.length) {\n    result.push(array.slice(i, i + size))\n    i = i + size\n  }\n  return result\n}\n\ntype Renderer = (props: RendererProps) => JSX.Element\n\nexport const DefaultRenderer: Renderer = ({\n  handleEntry,\n  label,\n  value,\n  subEntries = [],\n  subEntryPages = [],\n  type,\n  expanded = false,\n  toggleExpanded,\n  pageSize,\n  renderer,\n}) => {\n  const [expandedPages, setExpandedPages] = React.useState<number[]>([])\n  const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n\n  const refreshValueSnapshot = () => {\n    setValueSnapshot((value as () => any)())\n  }\n\n  return (\n    <div className={getStyles().entry}>\n      {subEntryPages.length ? (\n        <>\n          <button\n            className={getStyles().expandButton}\n            onClick={() => toggleExpanded()}\n          >\n            <Expander expanded={expanded} />\n            {label}\n            <span className={getStyles().info}>\n              {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n              {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n            </span>\n          </button>\n          {expanded ? (\n            subEntryPages.length === 1 ? (\n              <div className={getStyles().subEntries}>\n                {subEntries.map((entry, index) => handleEntry(entry))}\n              </div>\n            ) : (\n              <div className={getStyles().subEntries}>\n                {subEntryPages.map((entries, index) => {\n                  return (\n                    <div key={index}>\n                      <div className={getStyles().entry}>\n                        <button\n                          className={cx(getStyles().labelButton, 'labelButton')}\n                          onClick={() =>\n                            setExpandedPages((old) =>\n                              old.includes(index)\n                                ? old.filter((d) => d !== index)\n                                : [...old, index],\n                            )\n                          }\n                        >\n                          <Expander expanded={expandedPages.includes(index)} />{' '}\n                          [{index * pageSize} ...{' '}\n                          {index * pageSize + pageSize - 1}]\n                        </button>\n                        {expandedPages.includes(index) ? (\n                          <div className={getStyles().subEntries}>\n                            {entries.map((entry) => handleEntry(entry))}\n                          </div>\n                        ) : null}\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            )\n          ) : null}\n        </>\n      ) : type === 'function' ? (\n        <>\n          <Explorer\n            renderer={renderer}\n            label={\n              <button\n                onClick={refreshValueSnapshot}\n                className={getStyles().refreshValueBtn}\n              >\n                <span>{label}</span> 🔄{' '}\n              </button>\n            }\n            value={valueSnapshot}\n            defaultExpanded={{}}\n          />\n        </>\n      ) : (\n        <>\n          <span>{label}:</span>{' '}\n          <span className={getStyles().value}>{displayValue(value)}</span>\n        </>\n      )}\n    </div>\n  )\n}\n\ntype HandleEntryFn = (entry: Entry) => JSX.Element\n\ntype ExplorerProps = Partial<RendererProps> & {\n  renderer?: Renderer\n  defaultExpanded?: true | Record<string, boolean>\n}\n\ntype Property = {\n  defaultExpanded?: boolean | Record<string, boolean>\n  label: string\n  value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n  return Symbol.iterator in x\n}\n\nexport default function Explorer({\n  value,\n  defaultExpanded,\n  renderer = DefaultRenderer,\n  pageSize = 100,\n  filterSubEntries,\n  ...rest\n}: ExplorerProps) {\n  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n  let type: string = typeof value\n  let subEntries: Property[] = []\n\n  const makeProperty = (sub: { label: string; value: unknown }): Property => {\n    const subDefaultExpanded =\n      defaultExpanded === true\n        ? { [sub.label]: true }\n        : defaultExpanded?.[sub.label]\n    return {\n      ...sub,\n      defaultExpanded: subDefaultExpanded,\n    }\n  }\n\n  if (Array.isArray(value)) {\n    type = 'array'\n    subEntries = value.map((d, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: d,\n      }),\n    )\n  } else if (\n    value !== null &&\n    typeof value === 'object' &&\n    isIterable(value) &&\n    typeof value[Symbol.iterator] === 'function'\n  ) {\n    type = 'Iterable'\n    subEntries = Array.from(value, (val, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: val,\n      }),\n    )\n  } else if (typeof value === 'object' && value !== null) {\n    type = 'object'\n    subEntries = Object.entries(value).map(([key, val]) =>\n      makeProperty({\n        label: key,\n        value: val,\n      }),\n    )\n  }\n\n  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\n\n  const subEntryPages = chunkArray(subEntries, pageSize)\n\n  return renderer({\n    handleEntry: (entry) => (\n      <Explorer\n        key={entry.label}\n        value={value}\n        renderer={renderer}\n        filterSubEntries={filterSubEntries}\n        {...rest}\n        {...entry}\n      />\n    ),\n    type,\n    subEntries,\n    subEntryPages,\n    value,\n    expanded,\n    toggleExpanded,\n    pageSize,\n    ...rest,\n  })\n}\n\nconst stylesFactory = () => {\n  const { colors, font, size, alpha, shadow, border } = tokens\n  const { fontFamily, lineHeight, size: fontSize } = font\n\n  return {\n    entry: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      line-height: ${lineHeight.sm};\n      outline: none;\n      word-break: break-word;\n    `,\n    labelButton: css`\n      cursor: pointer;\n      color: inherit;\n      font: inherit;\n      outline: inherit;\n      background: transparent;\n      border: none;\n      padding: 0;\n    `,\n    expander: css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: ${size[3]};\n      height: ${size[3]};\n      padding-left: 3px;\n      box-sizing: content-box;\n    `,\n    expanderIcon: (expanded: boolean) => {\n      if (expanded) {\n        return css`\n          transform: rotate(90deg);\n          transition: transform 0.1s ease;\n        `\n      }\n      return css`\n        transform: rotate(0deg);\n        transition: transform 0.1s ease;\n      `\n    },\n    expandButton: css`\n      display: flex;\n      gap: ${size[1]};\n      align-items: center;\n      cursor: pointer;\n      color: inherit;\n      font: inherit;\n      outline: inherit;\n      background: transparent;\n      border: none;\n      padding: 0;\n    `,\n    value: css`\n      color: ${colors.purple[400]};\n    `,\n    subEntries: css`\n      margin-left: ${size[2]};\n      padding-left: ${size[2]};\n      border-left: 2px solid ${colors.darkGray[400]};\n    `,\n    info: css`\n      color: ${colors.gray[500]};\n      font-size: ${fontSize['2xs']};\n      padding-left: ${size[1]};\n    `,\n    refreshValueBtn: css`\n      appearance: none;\n      border: 0;\n      cursor: pointer;\n      background: transparent;\n      color: inherit;\n      padding: 0;\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n    `,\n  }\n}\n\nlet _styles: ReturnType<typeof stylesFactory> | null = null\n\nfunction getStyles() {\n  if (_styles) return _styles\n  _styles = stylesFactory()\n\n  return _styles\n}\n"],"names":["cx"],"mappings":"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"}