feat(ui): update API view to v4 design

packages/next/src/views/API/RenderJSON/index.css

@@ -0,0 +1,122 @@
+@layer payload-default {
+  .query-inspector {
+    --tab-width: var(--spacer-4);
+  }
+
+  .query-inspector__json-children {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      width: var(--stroke-width-small);
+      height: 100%;
+      border-left: var(--stroke-width-small) dashed var(--color-border);
+    }
+  }
+
+  .query-inspector__json-children--nested {
+    li {
+      padding-left: var(--spacer-2);
+    }
+  }
+
+  .query-inspector__row-line--nested {
+    .query-inspector__json-children {
+      padding-left: var(--tab-width);
+    }
+  }
+
+  .query-inspector__list-wrap {
+    position: relative;
+  }
+
+  .query-inspector__list-toggle {
+    all: unset;
+    text-align: left;
+    cursor: pointer;
+    border-radius: 0;
+    position: relative;
+    display: flex;
+    column-gap: var(--spacer-2-5);
+    row-gap: var(--spacer-2);
+    align-items: center;
+    background-color: var(--color-bg-secondary);
+    width: calc(100% + var(--spacer-2));
+    margin-left: calc(-1 * var(--spacer-2));
+    padding-left: var(--spacer-2);
+
+    &:not(.query-inspector__list-toggle--empty) {
+      margin-left: calc(var(--tab-width) * -1 - var(--spacer-2));
+      padding-left: calc(var(--tab-width) + var(--spacer-2));
+      width: calc(100% + var(--tab-width) + var(--spacer-2));
+    }
+
+    svg .stroke {
+      stroke: var(--color-icon-tertiary);
+    }
+
+    &:hover {
+      background-color: var(--color-bg-secondary-hover);
+    }
+  }
+
+  .query-inspector__list-toggle--empty {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .query-inspector__toggle-row-icon--open {
+    transform: rotate(0deg);
+  }
+
+  .query-inspector__toggle-row-icon--closed {
+    transform: rotate(-90deg);
+  }
+
+  .query-inspector__value-type--number {
+    .query-inspector__value {
+      color: var(--number-color);
+    }
+  }
+
+  .query-inspector__value-type--string {
+    .query-inspector__value {
+      color: var(--string-color);
+    }
+  }
+
+  .query-inspector__bracket {
+    position: relative;
+  }
+
+  .query-inspector__bracket--position-end {
+    left: var(--stroke-width-medium);
+    width: calc(100% - var(--spacer-1));
+  }
+
+  /* Top-level JSON structure specific rules */
+  .query-inspector__results {
+    & > .query-inspector__row-line--nested {
+      & > .query-inspector__list-toggle {
+        margin-left: calc(-1 * var(--spacer-2));
+        padding-left: var(--spacer-2);
+        width: calc(100% + var(--spacer-2));
+        column-gap: var(--spacer-1);
+
+        .query-inspector__toggle-row-icon {
+          margin-left: calc(var(--spacer-1) * -1);
+        }
+      }
+
+      & > .query-inspector__json-children {
+        padding-left: var(--spacer-3);
+      }
+
+      & > .query-inspector__bracket--nested > .query-inspector__bracket--position-end {
+        padding-left: var(--spacer-3);
+      }
+    }
+  }
+}

packages/next/src/views/API/RenderJSON/index.tsx

@@ -2,7 +2,7 @@
 import { ChevronIcon } from '@payloadcms/ui'
 import * as React from 'react'
 
-import './index.scss'
+import './index.css'
 
 const chars = {
   leftCurlyBracket: '\u007B',