@sanity/vision 5.8.0-next.52 → 5.8.0-next.53

package/lib/_chunks-es/SanityVision.js

@@ -149,41 +149,16 @@ function createHighlight(theme) {
     color: c2.fg
   }]);
 }
-const EditorRoot = styled.div`
-  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: ${({
+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: ${({
+}) => rem(theme.sanity.space[3])};}& .cm-content{border-right-width:${({
   theme
-}) => rem(theme.sanity.space[4])} !important;
-    padding-top: ${({
+}) => rem(theme.sanity.space[4])} !important;padding-top:${({
   theme
-}) => rem(theme.sanity.space[5])};
-  }
-`, VisionCodeMirror = forwardRef((props, ref) => {
+}) => rem(theme.sanity.space[5])};}`, VisionCodeMirror = forwardRef((props, ref) => {
   const $ = c(7), [initialValue] = useState(props.initialValue), sanityTheme = useTheme(), theme = useCodemirrorTheme(sanityTheme), codeMirrorRef = useRef(null);
   let t0;
   $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = (newContent) => {
@@ -328,91 +303,42 @@ function tryParseParams(val, t) {
 ${err.message.replace("JSON5:", "")}`, err;
   }
 }
-const Root = styled(Flex)`
-  .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; /* To prevent the resizer from being hidden behind CodeMirror scroll area */
-  }
-
-  .Resizer.disabled {
-    cursor: not-allowed;
-  }
-
-  .Resizer.disabled:hover {
-    border-color: transparent;
-  }
-`;
+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)`
-  border-bottom: 1px solid var(--card-border-color);
-`, StyledLabel = styled(Label)`
-  flex: 1;
-`, SplitpaneContainer = styled(Box)`
-  position: relative;
-`, QueryCopyLink = styled.a`
-  cursor: pointer;
-  margin-right: auto;
-`, InputBackgroundContainer = styled(Box)`
-  position: absolute;
-  top: 1rem;
-  left: 0;
-  padding: 0;
-  margin: 0;
-  z-index: 10;
-  right: 0;
-
-  ${StyledLabel} {
-    user-select: none;
-  }
-`, InputBackgroundContainerLeft = styled(InputBackgroundContainer)`
-  // This is so its aligned with the gutters of CodeMirror
-  left: 33px;
-`, InputContainer = styled(Card)`
-  width: 100%;
-  height: 100%;
-  position: relative;
-  flex-direction: column;
-`, ResultOuterContainer = styled(Flex)`
-  height: 100%;
-`, ResultInnerContainer = styled(Box)`
-  position: relative;
-`, ResultContainer = styled(Card)`
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  max-width: 100%;
-
-  ${({
+const Header = styled(Card).withConfig({
+  displayName: "Header",
+  componentId: "sc-r315za-1"
+})`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;`, 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 {
@@ -424,44 +350,37 @@ const Header = styled(Card)`
         left: 0;
         width: 100%;
       }
-    `}
-`, Result = styled(Box)`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 20;
-`, ResultFooter = styled(Flex)`
-  border-top: 1px solid var(--card-border-color);
-`, TimingsCard = styled(Card)`
-  position: relative;
-`;
-styled(Box)`
-  width: 100%;
-  height: 100%;
-`;
-const TimingsTextContainer = styled(Flex)`
-  height: 100%;
-  min-height: ${({
+    `}`, 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);`, TimingsCard = styled(Card).withConfig({
+  displayName: "TimingsCard",
+  componentId: "sc-r315za-13"
+})`position:relative;`;
+styled(Box).withConfig({
+  displayName: "TimingsContainer",
+  componentId: "sc-r315za-14"
+})`width:100%;height:100%;`;
+const TimingsTextContainer = styled(Flex).withConfig({
+  displayName: "TimingsTextContainer",
+  componentId: "sc-r315za-15"
+})`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)`
-  position: relative;
-`, SaveResultLabel = styled(Text)`
-  transform: initial;
-  &:before,
-  &:after {
-    content: none;
-  }
-  > span {
-    display: flex !important;
-    gap: ${({
+}) => 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-16"
+})`position:relative;`, SaveResultLabel = styled(Text).withConfig({
+  displayName: "SaveResultLabel",
+  componentId: "sc-r315za-17"
+})`transform:initial;&:before,&:after{content:none;}> span{display:flex !important;gap:${({
   theme
-}) => rem(theme.sanity.space[3])};
-    align-items: center;
-  }
-`, ControlsContainer = styled(Box)`
-  border-top: 1px solid var(--card-border-color);
-`, defaultValue$1 = `{
+}) => rem(theme.sanity.space[3])};align-items:center;}`, ControlsContainer = styled(Box).withConfig({
+  displayName: "ControlsContainer",
+  componentId: "sc-r315za-18"
+})`border-top:1px solid var(--card-border-color);`, defaultValue$1 = `{
   
 }`;
 function ParamsEditor(props) {
@@ -601,33 +520,17 @@ function useSavedQueries() {
 function _temp$5(data) {
   return data || defaultValue;
 }
-const FixedHeader = styled(Stack)`
-  position: sticky;
-  top: 0;
-  background: ${({
+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)`
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({
+}) => theme.sanity.color.base.bg};z-index:1;`, ScrollContainer = styled(Box).withConfig({
+  displayName: "ScrollContainer",
+  componentId: "sc-14q7beb-1"
+})`height:100%;overflow-y:auto;overflow-x:hidden;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background:${({
   theme
-}) => theme.sanity.color.base.border};
-    border-radius: 4px;
-  }
-`;
+}) => theme.sanity.color.base.border};border-radius:4px;}`;
 function QueryRecall(t0) {
   const $ = c(80), {
     url,
@@ -937,21 +840,18 @@ 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)`
-  /* This limits the width of the popover content */
-  max-width: 240px;
-`, PerspectivePopoverLink = styled.a`
-  cursor: pointer;
-  margin-right: auto;
-`, Dot = styled.div`
-  width: 4px;
-  height: 4px;
-  border-radius: 3px;
-  box-shadow: 0 0 0 1px var(--card-bg-color);
-  background-color: ${({
+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(--card-badge-${$tone}-dot-color)`};`;
 function PerspectivePopover() {
   const $ = c(39), [open, setOpen] = useState(!1), buttonRef = useRef(null), popoverRef = useRef(null);
   let t0;
@@ -1168,11 +1068,12 @@ 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)`
-  color: ${({
+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};
-`;
+}) => theme.sanity.color.muted.critical.enabled.fg};`;
 function QueryErrorDetails(t0) {
   const $ = c(20), {
     error
@@ -1252,7 +1153,10 @@ function QueryErrorDialog(props) {
     t1
   ] }), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
 }
-const ResultViewWrapper = styled.div(({
+const ResultViewWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ResultViewWrapper",
+  componentId: "sc-nbqtaq-0"
+})(({
   theme
 }) => {
   const {