@sanity/vision 6.3.0-next.39 → 6.3.0-next.41

package/lib/_chunks-es/SanityVision.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useTranslation, useKeyValueStore, useClient, useCurrentUser, useDateTimeFormat, ContextMenuButton, UserAvatar, Translate, usePerspective, useDataset, useScheduledDraftsEnabled, useActiveReleases, useWorkspace, sortReleases, isCardinalityOneRelease, getReleaseIdFromReleaseDocumentId } from "sanity";
-import { Spinner, rem, useTheme, Flex, Card, Label, Box, Text, Tooltip, Stack, useToast, TextInput, MenuButton, Menu, MenuItem, Code, Badge, Button, Dialog, Tab, TabList, Hotkeys, useClickOutsideEvent, Popover, Inline, Grid, Select, Container, Heading } from "@sanity/ui";
+import { Spinner, rem, useTheme, Flex, Box, Label, Card, useTheme_v2, Text, Tooltip, useToast, Stack, TextInput, MenuButton, Menu, MenuItem, Code, Badge, Button, Dialog, Tab, TabList, Hotkeys, useClickOutsideEvent, Popover, Inline, Grid, Select, Container, Heading } from "@sanity/ui";
 import { useState, useEffect, forwardRef, useRef, useImperativeHandle, Fragment, useEffectEvent, Component } from "react";
 import { SplitPane } from "@rexxars/react-split-pane";
 import { ErrorOutlineIcon, UsersIcon, UnpublishIcon, TrashIcon, LockIcon, AddIcon, SearchIcon, StopIcon, PlayIcon, HelpCircleIcon, CopyIcon, LinkIcon, DocumentSheetIcon, ChevronLeftIcon, ChevronRightIcon } from "@sanity/icons";
@@ -14,9 +14,9 @@ import { highlightSelectionMatches } from "@codemirror/search";
 import { lineNumbers, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, drawSelection, keymap, EditorView } from "@codemirror/view";
 import { groq } from "@sanity/lezer-groq";
 import CodeMirror, { EditorSelection } from "@uiw/react-codemirror";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { tags } from "@lezer/highlight";
 import { hues } from "@sanity/color";
-import { styled, css } from "styled-components";
 import { visionLocaleNamespace } from "./index.js";
 import debounce from "lodash-es/debounce.js";
 import JSON5 from "json5";
@@ -151,16 +151,32 @@ function createHighlight(theme) {
     color: c2.fg
   }]);
 }
-const EditorRoot = styled.div.withConfig({
-  displayName: "EditorRoot",
-  componentId: "sc-1e01cjn-0"
-})`width:100%;box-sizing:border-box;height:100%;overflow:hidden;overflow:clip;position:relative;display:flex;& .cm-theme{width:100%;}& .cm-editor{height:100%;font-size:16px;line-height:21px;}& .cm-line{padding-left:${({
-  theme
-}) => rem(theme.sanity.space[3])};}& .cm-content{border-right-width:${({
-  theme
-}) => rem(theme.sanity.space[4])} !important;padding-top:${({
-  theme
-}) => rem(theme.sanity.space[5])};}`, VisionCodeMirror = forwardRef((props, ref) => {
+var contentBorderRightWidthVar = "var(--_116kdfx1)", contentPaddingTopVar = "var(--_116kdfx2)", editorRoot = "_116kdfx3", linePaddingLeftVar = "var(--_116kdfx0)";
+function EditorRoot(t0) {
+  const $ = c(13), {
+    children
+  } = t0, {
+    sanity
+  } = useTheme();
+  let t1;
+  $[0] !== sanity.space[3] ? (t1 = rem(sanity.space[3]), $[0] = sanity.space[3], $[1] = t1) : t1 = $[1];
+  const t2 = `${t1}`;
+  let t3;
+  $[2] !== sanity.space[4] ? (t3 = rem(sanity.space[4]), $[2] = sanity.space[4], $[3] = t3) : t3 = $[3];
+  const t4 = `${t3}`;
+  let t5;
+  $[4] !== sanity.space[5] ? (t5 = rem(sanity.space[5]), $[4] = sanity.space[5], $[5] = t5) : t5 = $[5];
+  const t6 = `${t5}`;
+  let t7;
+  $[6] !== t2 || $[7] !== t4 || $[8] !== t6 ? (t7 = assignInlineVars({
+    [linePaddingLeftVar]: t2,
+    [contentBorderRightWidthVar]: t4,
+    [contentPaddingTopVar]: t6
+  }), $[6] = t2, $[7] = t4, $[8] = t6, $[9] = t7) : t7 = $[9];
+  let t8;
+  return $[10] !== children || $[11] !== t7 ? (t8 = /* @__PURE__ */ jsx("div", { className: editorRoot, style: t7, children }), $[10] = children, $[11] = t7, $[12] = t8) : t8 = $[12], t8;
+}
+const VisionCodeMirror = forwardRef((props, ref) => {
   const $ = c(8), [initialValue] = useState(props.initialValue), sanityTheme = useTheme(), theme = useCodemirrorTheme(sanityTheme), codeMirrorRef = useRef(null);
   let t0;
   $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = (newContent) => {
@@ -305,79 +321,123 @@ function tryParseParams(val, t) {
 ${err.message.replace("JSON5:", "")}`, err;
   }
 }
-const Root = styled(Flex).withConfig({
-  displayName: "Root",
-  componentId: "sc-r315za-0"
-})`.sidebarPanes .Pane{overflow-y:auto;overflow-x:hidden;}& .Resizer{background:var(--card-border-color);opacity:1;z-index:1;box-sizing:border-box;background-clip:padding-box;border:solid transparent;}& .Resizer:hover{border-color:var(--card-shadow-ambient-color);}& .Resizer.horizontal{height:11px;margin:-5px 0;border-width:5px 0;cursor:row-resize;width:100%;z-index:4;}& .Resizer.vertical{width:11px;margin:0 -5px;border-width:0 5px;cursor:col-resize;z-index:2;}.Resizer.disabled{cursor:not-allowed;}.Resizer.disabled:hover{border-color:transparent;}`;
-Root.displayName = "Root";
-const Header = styled(Card).withConfig({
-  displayName: "Header",
-  componentId: "sc-r315za-1"
-})`position:relative;flex-shrink:0;z-index:6;background:var(--card-bg-color);overflow:visible;border-bottom:1px solid var(--card-border-color);`, StyledLabel = styled(Label).withConfig({
-  displayName: "StyledLabel",
-  componentId: "sc-r315za-2"
-})`flex:1;`, SplitpaneContainer = styled(Box).withConfig({
-  displayName: "SplitpaneContainer",
-  componentId: "sc-r315za-3"
-})`position:relative;min-height:0;z-index:1;`, QueryCopyLink = styled.a.withConfig({
-  displayName: "QueryCopyLink",
-  componentId: "sc-r315za-4"
-})`cursor:pointer;margin-right:auto;`, InputBackgroundContainer = styled(Box).withConfig({
-  displayName: "InputBackgroundContainer",
-  componentId: "sc-r315za-5"
-})`position:absolute;top:1rem;left:0;padding:0;margin:0;z-index:10;right:0;${StyledLabel}{user-select:none;}`, InputBackgroundContainerLeft = styled(InputBackgroundContainer).withConfig({
-  displayName: "InputBackgroundContainerLeft",
-  componentId: "sc-r315za-6"
-})`left:33px;`, InputContainer = styled(Card).withConfig({
-  displayName: "InputContainer",
-  componentId: "sc-r315za-7"
-})`width:100%;height:100%;position:relative;flex-direction:column;`, ResultOuterContainer = styled(Flex).withConfig({
-  displayName: "ResultOuterContainer",
-  componentId: "sc-r315za-8"
-})`height:100%;`, ResultInnerContainer = styled(Box).withConfig({
-  displayName: "ResultInnerContainer",
-  componentId: "sc-r315za-9"
-})`position:relative;`, ResultContainer = styled(Card).withConfig({
-  displayName: "ResultContainer",
-  componentId: "sc-r315za-10"
-})`height:100%;width:100%;position:absolute;max-width:100%;${({
-  $isInvalid
-}) => $isInvalid && css`
-      &:after {
-        background-color: var(--card-bg-color);
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-      }
-    `}`, Result = styled(Box).withConfig({
-  displayName: "Result",
-  componentId: "sc-r315za-11"
-})`position:relative;width:100%;height:100%;z-index:20;`, ResultFooter = styled(Flex).withConfig({
-  displayName: "ResultFooter",
-  componentId: "sc-r315za-12"
-})`border-top:1px solid var(--card-border-color);flex-wrap:wrap;`, TimingsCard = styled(Card).withConfig({
-  displayName: "TimingsCard",
-  componentId: "sc-r315za-13"
-})`position:relative;`, TimingsTextContainer = styled(Flex).withConfig({
-  displayName: "TimingsTextContainer",
-  componentId: "sc-r315za-14"
-})`height:100%;min-height:${({
-  theme
-}) => rem(theme.sanity.space[3] * 2 + theme.sanity.fonts.text.sizes[2].lineHeight - theme.sanity.fonts.text.sizes[2].ascenderHeight - theme.sanity.fonts.text.sizes[2].descenderHeight)};`, DownloadsCard = styled(Card).withConfig({
-  displayName: "DownloadsCard",
-  componentId: "sc-r315za-15"
-})`position:relative;`, SaveResultLabel = styled(Text).withConfig({
-  displayName: "SaveResultLabel",
-  componentId: "sc-r315za-16"
-})`transform:initial;&:before,&:after{content:none;}> span{display:flex !important;flex-wrap:wrap;gap:${({
-  theme
-}) => rem(theme.sanity.space[3])};align-items:center;}`, ControlsContainer = styled(Box).withConfig({
-  displayName: "ControlsContainer",
-  componentId: "sc-r315za-17"
-})`border-top:1px solid var(--card-border-color);`, defaultValue$1 = `{
+var controlsContainer = "ior2o0k", downloadsCard = "ior2o0h", header = "ior2o01", inputBackgroundContainer = "ior2o05", inputBackgroundContainerLeft = "ior2o06", inputContainer = "ior2o07", queryCopyLink = "ior2o04", result = "ior2o0c", resultContainer = "ior2o0a", resultContainerInvalid = "ior2o0b", resultFooter = "ior2o0d", resultInnerContainer = "ior2o09", resultOuterContainer = "ior2o08", root = "ior2o00", saveResultLabel = "ior2o0j", saveResultSpanGapVar = "var(--ior2o0i)", splitpaneContainer = "ior2o03", styledLabel = "ior2o02", timingsCard = "ior2o0e", timingsTextContainer = "ior2o0g", timingsTextMinHeightVar = "var(--ior2o0f)";
+const Root = forwardRef(function(props, ref) {
+  const $ = c(3);
+  let t0;
+  return $[0] !== props || $[1] !== ref ? (t0 = /* @__PURE__ */ jsx(Flex, { ...props, ref, className: root }), $[0] = props, $[1] = ref, $[2] = t0) : t0 = $[2], t0;
+});
+function Header(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Card, { ...props, className: header }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function StyledLabel(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Label, { ...props, className: styledLabel }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function SplitpaneContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: splitpaneContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function QueryCopyLink(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx("a", { ...props, className: queryCopyLink }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function InputBackgroundContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: inputBackgroundContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function InputBackgroundContainerLeft(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: `${inputBackgroundContainer} ${inputBackgroundContainerLeft}` }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function InputContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Card, { ...props, className: inputContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function ResultOuterContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Flex, { ...props, className: resultOuterContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function ResultInnerContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: resultInnerContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function ResultContainer(t0) {
+  const $ = c(6);
+  let isInvalid, props;
+  $[0] !== t0 ? ({
+    isInvalid,
+    ...props
+  } = t0, $[0] = t0, $[1] = isInvalid, $[2] = props) : (isInvalid = $[1], props = $[2]);
+  const t1 = isInvalid ? `${resultContainer} ${resultContainerInvalid}` : resultContainer;
+  let t2;
+  return $[3] !== props || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(Card, { ...props, className: t1 }), $[3] = props, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
+}
+function Result(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: result }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function ResultFooter(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Flex, { ...props, className: resultFooter }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function TimingsCard(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Card, { ...props, className: timingsCard }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function TimingsTextContainer(props) {
+  const $ = c(7), {
+    space,
+    font
+  } = useTheme_v2(), textSize = font.text.sizes[2], t0 = space[3] * 2 + textSize.lineHeight - textSize.ascenderHeight - textSize.descenderHeight;
+  let t1;
+  $[0] !== t0 ? (t1 = rem(t0), $[0] = t0, $[1] = t1) : t1 = $[1];
+  const t2 = `${t1}`;
+  let t3;
+  $[2] !== t2 ? (t3 = assignInlineVars({
+    [timingsTextMinHeightVar]: t2
+  }), $[2] = t2, $[3] = t3) : t3 = $[3];
+  let t4;
+  return $[4] !== props || $[5] !== t3 ? (t4 = /* @__PURE__ */ jsx(Flex, { ...props, className: timingsTextContainer, style: t3 }), $[4] = props, $[5] = t3, $[6] = t4) : t4 = $[6], t4;
+}
+function DownloadsCard(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Card, { ...props, className: downloadsCard }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function SaveResultLabel(props) {
+  const $ = c(7), {
+    space
+  } = useTheme_v2();
+  let t0;
+  $[0] !== space[3] ? (t0 = rem(space[3]), $[0] = space[3], $[1] = t0) : t0 = $[1];
+  const t1 = `${t0}`;
+  let t2;
+  $[2] !== t1 ? (t2 = assignInlineVars({
+    [saveResultSpanGapVar]: t1
+  }), $[2] = t1, $[3] = t2) : t2 = $[3];
+  let t3;
+  return $[4] !== props || $[5] !== t2 ? (t3 = /* @__PURE__ */ jsx(Text, { ...props, className: saveResultLabel, style: t2 }), $[4] = props, $[5] = t2, $[6] = t3) : t3 = $[6], t3;
+}
+function ControlsContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: controlsContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+const defaultValue$1 = `{
   
 }`;
 function ParamsEditor(props) {
@@ -633,15 +693,17 @@ function _temp2$4(a, b) {
 function _temp$5(data) {
   return data || defaultValue;
 }
-const FixedHeader = styled(Stack).withConfig({
-  displayName: "FixedHeader",
-  componentId: "sc-14q7beb-0"
-})`position:sticky;top:0;background:${({
-  theme
-}) => theme.sanity.color.base.bg};z-index:1;`, ScrollContainer = styled(Box).withConfig({
-  displayName: "ScrollContainer",
-  componentId: "sc-14q7beb-1"
-})`height:auto;width:100%;min-width:0;overflow:visible;`;
+var fixedHeader = "_15lckbo0", scrollContainer = "_15lckbo1";
+function FixedHeader(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Stack, { ...props, className: fixedHeader }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function ScrollContainer(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: scrollContainer }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
 function QueryRecall(t0) {
   const $ = c(130), {
     url,
@@ -1165,18 +1227,26 @@ function VisionGuiControls(t0) {
   let t15;
   return $[26] !== hasValidParams || $[27] !== t14 || $[28] !== t2 ? (t15 = /* @__PURE__ */ jsx(ControlsContainer, { children: /* @__PURE__ */ jsx(Card, { padding: 3, paddingX: 3, children: /* @__PURE__ */ jsx(Tooltip, { content: t2, placement: "top", disabled: hasValidParams, portal: !0, children: t14 }) }) }), $[26] = hasValidParams, $[27] = t14, $[28] = t2, $[29] = t15) : t15 = $[29], t15;
 }
-const PerspectivePopoverContent = styled(Box).withConfig({
-  displayName: "PerspectivePopoverContent",
-  componentId: "sc-ls0jfp-0"
-})`max-width:240px;`, PerspectivePopoverLink = styled.a.withConfig({
-  displayName: "PerspectivePopoverLink",
-  componentId: "sc-ls0jfp-1"
-})`cursor:pointer;margin-right:auto;`, Dot = styled.div.withConfig({
-  displayName: "Dot",
-  componentId: "sc-y1ykk8-0"
-})`width:4px;height:4px;border-radius:3px;box-shadow:0 0 0 1px var(--card-bg-color);background-color:${({
-  $tone
-}) => `var(--card-badge-${$tone}-dot-color)`};`;
+var dot = "_1i6jn8t2", perspectivePopoverContent = "_1i6jn8t0", perspectivePopoverLink = "_1i6jn8t1";
+function PerspectivePopoverContent(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Box, { ...props, className: perspectivePopoverContent }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function PerspectivePopoverLink(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx("a", { ...props, className: perspectivePopoverLink }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
+function Dot(t0) {
+  const $ = c(2), {
+    tone
+  } = t0, t1 = `var(--card-badge-${tone}-dot-color)`;
+  let t2;
+  return $[0] !== t1 ? (t2 = /* @__PURE__ */ jsx("div", { className: dot, style: {
+    backgroundColor: t1
+  } }), $[0] = t1, $[1] = t2) : t2 = $[1], t2;
+}
 function PerspectivePopover() {
   const $ = c(39), [open, setOpen] = useState(!1), buttonRef = useRef(null), popoverRef = useRef(null);
   let t0;
@@ -1210,7 +1280,7 @@ function PerspectivePopover() {
   let t12;
   $[22] !== t ? (t12 = t("settings.perspectives.action.docs-link"), $[22] = t, $[23] = t12) : t12 = $[23];
   let t13;
-  $[24] !== t12 ? (t13 = /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs(PerspectivePopoverLink, { href: "https://www.sanity.io/docs/perspectives", target: "_blank", children: [
+  $[24] !== t12 ? (t13 = /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs(PerspectivePopoverLink, { href: "https://www.sanity.io/docs/perspectives", target: "_blank", rel: "noopener noreferrer", children: [
     t12,
     " \u2192"
   ] }) }) }), $[24] = t12, $[25] = t13) : t13 = $[25];
@@ -1223,7 +1293,7 @@ function PerspectivePopover() {
     t13
   ] }) }), $[26] = t10, $[27] = t11, $[28] = t13, $[29] = t4, $[30] = t6, $[31] = t14) : t14 = $[31];
   let t15;
-  $[32] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx(Dot, { $tone: "primary" }), $[32] = t15) : t15 = $[32];
+  $[32] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx(Dot, { tone: "primary" }), $[32] = t15) : t15 = $[32];
   let t16;
   $[33] !== open ? (t16 = /* @__PURE__ */ jsx(Button, { icon: HelpCircleIcon, mode: "bleed", padding: 2, paddingRight: 1, tone: "primary", fontSize: 1, ref: buttonRef, onClick: handleClick, selected: open, children: t15 }), $[33] = open, $[34] = t16) : t16 = $[34];
   let t17;
@@ -1355,7 +1425,9 @@ function VisionGuiHeader(t0) {
     /* @__PURE__ */ jsx(Card, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxs(StyledLabel, { children: [
       t("query.url"),
       "\xA0",
-      /* @__PURE__ */ jsxs(QueryCopyLink, { onClick: handleCopyUrl, children: [
+      /* @__PURE__ */ jsxs(QueryCopyLink, { href: url, onClick: (event) => {
+        event.preventDefault(), handleCopyUrl();
+      }, children: [
         "[",
         t("action.copy-url-to-clipboard"),
         "]"
@@ -1399,12 +1471,13 @@ function getMemoizedBlobUrlResolver(mimeType, stringEncoder) {
     };
   })();
 }
-const getJsonBlobUrl = getMemoizedBlobUrlResolver("application/json", (input) => JSON.stringify(input, null, 2)), getCsvBlobUrl = getMemoizedBlobUrlResolver("text/csv", (input) => json2csv(Array.isArray(input) ? input : [input]).trim()), ErrorCode = styled(Code).withConfig({
-  displayName: "ErrorCode",
-  componentId: "sc-14lyn64-0"
-})`color:${({
-  theme
-}) => theme.sanity.color.muted.critical.enabled.fg};`;
+const getJsonBlobUrl = getMemoizedBlobUrlResolver("application/json", (input) => JSON.stringify(input, null, 2)), getCsvBlobUrl = getMemoizedBlobUrlResolver("text/csv", (input) => json2csv(Array.isArray(input) ? input : [input]).trim());
+var errorCode = "vgszcp0";
+function ErrorCode(props) {
+  const $ = c(2);
+  let t0;
+  return $[0] !== props ? (t0 = /* @__PURE__ */ jsx(Code, { ...props, className: errorCode }), $[0] = props, $[1] = t0) : t0 = $[1], t0;
+}
 function QueryErrorDetails(t0) {
   const $ = c(20), {
     error
@@ -1484,145 +1557,48 @@ function QueryErrorDialog(props) {
     t1
   ] }), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
 }
-const ResultViewWrapper = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "ResultViewWrapper",
-  componentId: "sc-nbqtaq-0"
-})(({
-  theme
-}) => {
-  const {
-    color,
-    fonts,
-    space
-  } = theme.sanity;
-  return css`
-    & .json-inspector,
-    & .json-inspector .json-inspector__selection {
-      font-family: ${fonts.code.family};
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
-      color: var(--card-code-fg-color);
-    }
-
-    & .json-inspector .json-inspector__leaf {
-      padding-left: ${rem(space[4])};
-    }
-
-    & .json-inspector .json-inspector__leaf.json-inspector__leaf_root {
-      padding-top: ${rem(space[0])};
-      padding-left: 0;
-    }
-
-    & .json-inspector > .json-inspector__leaf_root > .json-inspector__line > .json-inspector__key {
-      display: none;
-    }
-
-    & .json-inspector .json-inspector__line {
-      display: block;
-      position: relative;
-      cursor: default;
-    }
-
-    & .json-inspector .json-inspector__line::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -200px;
-      right: -50px;
-      bottom: 0;
-      z-index: -1;
-      pointer-events: none;
-    }
-
-    & .json-inspector .json-inspector__line:hover::after {
-      background: var(--card-code-bg-color);
-    }
-
-    & .json-inspector .json-inspector__leaf_composite > .json-inspector__line {
-      cursor: pointer;
-    }
-
-    & .json-inspector .json-inspector__leaf_composite > .json-inspector__line::before {
-      content: '▸ ';
-      margin-left: calc(0px - ${rem(space[4])});
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
-    }
-
-    &
-      .json-inspector
-      .json-inspector__leaf_expanded.json-inspector__leaf_composite
-      > .json-inspector__line::before {
-      content: '▾ ';
-      font-size: ${fonts.code.sizes[2].fontSize}px;
-      line-height: ${fonts.code.sizes[2].lineHeight}px;
-    }
-
-    & .json-inspector .json-inspector__radio,
-    & .json-inspector .json-inspector__flatpath {
-      display: none;
-    }
-
-    & .json-inspector .json-inspector__value {
-      margin-left: ${rem(space[4] / 2)};
-    }
-
-    &
-      .json-inspector
-      > .json-inspector__leaf_root
-      > .json-inspector__line
-      > .json-inspector__key
-      + .json-inspector__value {
-      margin: 0;
-    }
-
-    & .json-inspector .json-inspector__key {
-      color: ${color.syntax.property};
-    }
-
-    & .json-inspector .json-inspector__value_helper,
-    & .json-inspector .json-inspector__value_null {
-      color: ${color.syntax.constant};
-    }
-
-    & .json-inspector .json-inspector__not-found {
-      padding-top: ${rem(space[2])};
-    }
-
-    & .json-inspector .json-inspector__value_string {
-      color: ${color.syntax.string};
-      word-break: break-word;
-    }
-
-    & .json-inspector .json-inspector__value_boolean {
-      color: ${color.syntax.boolean};
-    }
-
-    & .json-inspector .json-inspector__value_number {
-      color: ${color.syntax.number};
-    }
-
-    & .json-inspector .json-inspector__show-original {
-      display: inline-block;
-      padding: 0 6px;
-      cursor: pointer;
-    }
-
-    & .json-inspector .json-inspector__show-original:hover {
-      color: inherit;
-    }
-
-    & .json-inspector .json-inspector__show-original::before {
-      content: '↔';
-    }
-
-    & .json-inspector .json-inspector__show-original:hover::after {
-      content: ' expand';
-    }
-  `;
-}), lru = new LRU({
+var codeFamilyVar = "var(--_1rvgeh0)", codeFontSizeVar = "var(--_1rvgeh1)", codeLineHeightVar = "var(--_1rvgeh2)", resultViewWrapper = "_1rvgehc", space0Var = "var(--_1rvgeh3)", space2Var = "var(--_1rvgeh4)", space4HalfVar = "var(--_1rvgeh6)", space4Var = "var(--_1rvgeh5)", syntaxBooleanVar = "var(--_1rvgeha)", syntaxConstantVar = "var(--_1rvgeh8)", syntaxNumberVar = "var(--_1rvgehb)", syntaxPropertyVar = "var(--_1rvgeh7)", syntaxStringVar = "var(--_1rvgeh9)";
+const lru = new LRU({
   maxSize: 5e4
 });
+function ResultViewWrapper(t0) {
+  const $ = c(24), {
+    children
+  } = t0, {
+    color,
+    font,
+    space
+  } = useTheme_v2(), codeSize = font.code.sizes[2], t1 = font.code.family, t2 = `${codeSize.fontSize}px`, t3 = `${codeSize.lineHeight}px`;
+  let t4;
+  $[0] !== space[0] ? (t4 = rem(space[0]), $[0] = space[0], $[1] = t4) : t4 = $[1];
+  const t5 = `${t4}`;
+  let t6;
+  $[2] !== space[2] ? (t6 = rem(space[2]), $[2] = space[2], $[3] = t6) : t6 = $[3];
+  const t7 = `${t6}`;
+  let t8;
+  $[4] !== space[4] ? (t8 = rem(space[4]), $[4] = space[4], $[5] = t8) : t8 = $[5];
+  const t9 = `${t8}`, t10 = space[4] / 2;
+  let t11;
+  $[6] !== t10 ? (t11 = rem(t10), $[6] = t10, $[7] = t11) : t11 = $[7];
+  const t12 = `${t11}`;
+  let t13;
+  $[8] !== color.syntax.boolean || $[9] !== color.syntax.constant || $[10] !== color.syntax.number || $[11] !== color.syntax.property || $[12] !== color.syntax.string || $[13] !== font.code.family || $[14] !== t12 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== t9 ? (t13 = assignInlineVars({
+    [codeFamilyVar]: t1,
+    [codeFontSizeVar]: t2,
+    [codeLineHeightVar]: t3,
+    [space0Var]: t5,
+    [space2Var]: t7,
+    [space4Var]: t9,
+    [space4HalfVar]: t12,
+    [syntaxPropertyVar]: color.syntax.property,
+    [syntaxConstantVar]: color.syntax.constant,
+    [syntaxStringVar]: color.syntax.string,
+    [syntaxBooleanVar]: color.syntax.boolean,
+    [syntaxNumberVar]: color.syntax.number
+  }), $[8] = color.syntax.boolean, $[9] = color.syntax.constant, $[10] = color.syntax.number, $[11] = color.syntax.property, $[12] = color.syntax.string, $[13] = font.code.family, $[14] = t12, $[15] = t2, $[16] = t3, $[17] = t5, $[18] = t7, $[19] = t9, $[20] = t13) : t13 = $[20];
+  let t14;
+  return $[21] !== children || $[22] !== t13 ? (t14 = /* @__PURE__ */ jsx("div", { className: resultViewWrapper, style: t13, children }), $[21] = children, $[22] = t13, $[23] = t14) : t14 = $[23], t14;
+}
 function ResultView(props) {
   const $ = c(7), {
     data,
@@ -1738,7 +1714,7 @@ function VisionGuiResult(t0) {
     t12
   ] }), $[29] = t12, $[30] = t7, $[31] = t13) : t13 = $[31];
   let t14;
-  $[32] !== t13 || $[33] !== t4 || $[34] !== t5 ? (t14 = /* @__PURE__ */ jsx(ResultInnerContainer, { flex: 1, children: /* @__PURE__ */ jsx(ResultContainer, { flex: 1, overflow: "hidden", tone: t4, $isInvalid: t5, children: t13 }) }), $[32] = t13, $[33] = t4, $[34] = t5, $[35] = t14) : t14 = $[35];
+  $[32] !== t13 || $[33] !== t4 || $[34] !== t5 ? (t14 = /* @__PURE__ */ jsx(ResultInnerContainer, { flex: 1, children: /* @__PURE__ */ jsx(ResultContainer, { flex: 1, overflow: "hidden", tone: t4, isInvalid: t5, children: t13 }) }), $[32] = t13, $[33] = t4, $[34] = t5, $[35] = t14) : t14 = $[35];
   const t15 = compactFooter ? "flex-start" : "space-between", t16 = compactFooter ? "stretch" : void 0;
   let t17;
   $[36] !== compactFooter ? (t17 = compactFooter ? "column" : ["column", "column", "row"], $[36] = compactFooter, $[37] = t17) : t17 = $[37];
@@ -2224,7 +2200,7 @@ function useDatasets(t0) {
     let t2;
     if ($[2] !== client.observable.datasets || $[3] !== configDatasets) {
       let t3;
-      $[5] !== configDatasets ? (t3 = (result) => typeof configDatasets == "function" ? configDatasets(result).map(_temp) : result.map(_temp2), $[5] = configDatasets, $[6] = t3) : t3 = $[6], t2 = client.observable.datasets.list().pipe(map$1(t3), catchError(_temp3)), $[2] = client.observable.datasets, $[3] = configDatasets, $[4] = t2;
+      $[5] !== configDatasets ? (t3 = (result2) => typeof configDatasets == "function" ? configDatasets(result2).map(_temp) : result2.map(_temp2), $[5] = configDatasets, $[6] = t3) : t3 = $[6], t2 = client.observable.datasets.list().pipe(map$1(t3), catchError(_temp3)), $[2] = client.observable.datasets, $[3] = configDatasets, $[4] = t2;
     } else
       t2 = $[4];
     t1 = t2;