@payloadcms/next 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/views/API/RenderJSON/index.scss

@@ -1,90 +1,92 @@
 @import '../../../scss/styles.scss';
 
-.query-inspector {
-  &__json-children {
-    position: relative;
+@layer payload-default {
+  .query-inspector {
+    &__json-children {
+      position: relative;
 
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 8px;
-      width: 1px;
-      height: 100%;
-      border-left: 1px dashed var(--theme-elevation-200);
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 8px;
+        width: 1px;
+        height: 100%;
+        border-left: 1px dashed var(--theme-elevation-200);
+      }
     }
-  }
 
-  &__list-wrap {
-    position: relative;
-  }
+    &__list-wrap {
+      position: relative;
+    }
 
-  &__list-toggle {
-    all: unset;
-    width: 100%;
-    text-align: left;
-    cursor: pointer;
-    border-radius: 3px;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    position: relative;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    left: -3px;
-    width: calc(100% + 3px);
+    &__list-toggle {
+      all: unset;
+      width: 100%;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 3px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      position: relative;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      left: -3px;
+      width: calc(100% + 3px);
 
-    svg {
-      margin-left: 5px;
-    }
+      svg {
+        margin-left: 5px;
+      }
 
-    svg .stroke {
-      stroke: var(--theme-elevation-400);
-    }
+      svg .stroke {
+        stroke: var(--theme-elevation-400);
+      }
 
-    &:hover {
-      background-color: var(--theme-elevation-100);
-    }
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
 
-    &--empty {
-      cursor: default;
-      pointer-events: none;
+      &--empty {
+        cursor: default;
+        pointer-events: none;
+      }
     }
-  }
 
-  &__toggle-row-icon {
-    &--open {
-      transform: rotate(0deg);
-    }
-    &--closed {
-      transform: rotate(-90deg);
+    &__toggle-row-icon {
+      &--open {
+        transform: rotate(0deg);
+      }
+      &--closed {
+        transform: rotate(-90deg);
+      }
     }
-  }
 
-  &__value-type {
-    &--number {
-      .query-inspector__value {
-        color: var(--number-color);
+    &__value-type {
+      &--number {
+        .query-inspector__value {
+          color: var(--number-color);
+        }
       }
-    }
 
-    &--string {
-      .query-inspector__value {
-        color: var(--string-color);
+      &--string {
+        .query-inspector__value {
+          color: var(--string-color);
+        }
       }
     }
-  }
 
-  &__row-line--nested {
-    margin-left: 25px;
-  }
+    &__row-line--nested {
+      margin-left: 25px;
+    }
 
-  &__bracket {
-    position: relative;
+    &__bracket {
+      position: relative;
 
-    &--position-end {
-      left: 5px;
-      width: calc(100% - 5px);
+      &--position-end {
+        left: 5px;
+        width: calc(100% - 5px);
+      }
     }
   }
 }

package/dist/views/API/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/API/index.client.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAuLjC,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/API/index.client.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAMrB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAoLjC,CAAA"}

package/dist/views/API/index.client.js

@@ -1,11 +1,10 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckboxField, CopyToClipboard, Form, Gutter, MinimizeMaximizeIcon, NumberField, SetViewActions, useConfig, useDocumentInfo, useLocale, useTranslation } from '@payloadcms/ui';
+import { CheckboxField, CopyToClipboard, Form, Gutter, MinimizeMaximizeIcon, NumberField, SetDocumentStepNav, useConfig, useDocumentInfo, useLocale, useTranslation } from '@payloadcms/ui';
 import { useSearchParams } from 'next/navigation.js';
 import * as React from 'react';
 import { toast } from 'sonner';
-import { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js';
 import { LocaleSelector } from './LocaleSelector/index.js';
 import { RenderJSON } from './RenderJSON/index.js';
 const baseClass = 'query-inspector';
@@ -34,10 +33,10 @@ export const APIViewClient = () => {
     },
     getEntityConfig
   } = useConfig();
-  const collectionClientConfig = getEntityConfig({
+  const collectionConfig = getEntityConfig({
     collectionSlug
   });
-  const globalClientConfig = getEntityConfig({
+  const globalConfig = getEntityConfig({
     globalSlug
   });
   const localeOptions = localization && localization.locales.map(locale => ({
@@ -46,12 +45,12 @@ export const APIViewClient = () => {
   }));
   let draftsEnabled = false;
   let docEndpoint = '';
-  if (collectionClientConfig) {
-    draftsEnabled = Boolean(collectionClientConfig.versions?.drafts);
+  if (collectionConfig) {
+    draftsEnabled = Boolean(collectionConfig.versions?.drafts);
     docEndpoint = `/${collectionSlug}/${id}`;
   }
-  if (globalClientConfig) {
-    draftsEnabled = Boolean(globalClientConfig.versions?.drafts);
+  if (globalConfig) {
+    draftsEnabled = Boolean(globalConfig.versions?.drafts);
     docEndpoint = `/globals/${globalSlug}`;
   }
   const [data, setData] = React.useState(initialData);
@@ -97,14 +96,12 @@ export const APIViewClient = () => {
     right: false,
     children: [/*#__PURE__*/_jsx(SetDocumentStepNav, {
       collectionSlug: collectionSlug,
-      globalLabel: globalClientConfig?.label,
+      globalLabel: globalConfig?.label,
       globalSlug: globalSlug,
       id: id,
-      pluralLabel: collectionClientConfig ? collectionClientConfig?.labels?.plural : undefined,
-      useAsTitle: collectionClientConfig ? collectionClientConfig?.admin?.useAsTitle : undefined,
+      pluralLabel: collectionConfig ? collectionConfig?.labels?.plural : undefined,
+      useAsTitle: collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined,
       view: "API"
-    }), /*#__PURE__*/_jsx(SetViewActions, {
-      actions: (collectionClientConfig || globalClientConfig)?.admin?.components?.views?.edit?.api?.actions
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__configuration`,
       children: [/*#__PURE__*/_jsxs("div", {
@@ -152,13 +149,15 @@ export const APIViewClient = () => {
                 name: 'draft',
                 label: t('version:draft')
               },
-              onChange: () => setDraft(!draft)
+              onChange: () => setDraft(!draft),
+              path: "draft"
             }), /*#__PURE__*/_jsx(CheckboxField, {
               field: {
                 name: 'authenticated',
                 label: t('authentication:authenticated')
               },
-              onChange: () => setAuthenticated(!authenticated)
+              onChange: () => setAuthenticated(!authenticated),
+              path: "authenticated"
             })]
           }), localeOptions && /*#__PURE__*/_jsx(LocaleSelector, {
             localeOptions: localeOptions,
@@ -173,7 +172,8 @@ export const APIViewClient = () => {
               max: 10,
               min: 0
             },
-            onChange: value => setDepth(value?.toString())
+            onChange: value => setDepth(value?.toString()),
+            path: "depth"
           })]
         })
       })]

package/dist/views/API/index.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["CheckboxField","CopyToClipboard","Form","Gutter","MinimizeMaximizeIcon","NumberField","SetViewActions","useConfig","useDocumentInfo","useLocale","useTranslation","useSearchParams","React","toast","SetDocumentStepNav","LocaleSelector","RenderJSON","baseClass","APIViewClient","id","collectionSlug","globalSlug","initialData","searchParams","i18n","t","code","config","localization","routes","api","apiRoute","serverURL","getEntityConfig","collectionClientConfig","globalClientConfig","localeOptions","locales","map","locale","label","value","draftsEnabled","docEndpoint","Boolean","versions","drafts","data","setData","useState","draft","setDraft","get","setLocale","depth","setDepth","authenticated","setAuthenticated","fullscreen","setFullscreen","params","URLSearchParams","String","toString","fetchURL","useEffect","fetchData","res","fetch","credentials","headers","language","method","json","error","console","_jsxs","className","filter","join","right","_jsx","globalLabel","pluralLabel","labels","plural","undefined","useAsTitle","admin","view","actions","components","views","edit","href","rel","target","initialState","initialValue","valid","Number","field","name","onChange","step","max","min","onClick","type","isMinimized","object"],"sources":["../../../src/views/API/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport {\n  CheckboxField,\n  CopyToClipboard,\n  Form,\n  Gutter,\n  MinimizeMaximizeIcon,\n  NumberField,\n  SetViewActions,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { useSearchParams } from 'next/navigation.js'\nimport * as React from 'react'\nimport { toast } from 'sonner'\n\nimport { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js'\nimport { LocaleSelector } from './LocaleSelector/index.js'\nimport { RenderJSON } from './RenderJSON/index.js'\nimport './index.scss'\n\nconst baseClass = 'query-inspector'\n\nexport const APIViewClient: React.FC = () => {\n  const { id, collectionSlug, globalSlug, initialData } = useDocumentInfo()\n\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const { code } = useLocale()\n\n  const {\n    config: {\n      localization,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionClientConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig\n  const globalClientConfig = getEntityConfig({ globalSlug }) as ClientGlobalConfig\n\n  const localeOptions =\n    localization &&\n    localization.locales.map((locale) => ({ label: locale.label, value: locale.code }))\n\n  let draftsEnabled: boolean = false\n  let docEndpoint: string = ''\n\n  if (collectionClientConfig) {\n    draftsEnabled = Boolean(collectionClientConfig.versions?.drafts)\n    docEndpoint = `/${collectionSlug}/${id}`\n  }\n\n  if (globalClientConfig) {\n    draftsEnabled = Boolean(globalClientConfig.versions?.drafts)\n    docEndpoint = `/globals/${globalSlug}`\n  }\n\n  const [data, setData] = React.useState<any>(initialData)\n  const [draft, setDraft] = React.useState<boolean>(searchParams.get('draft') === 'true')\n  const [locale, setLocale] = React.useState<string>(searchParams?.get('locale') || code)\n  const [depth, setDepth] = React.useState<string>(searchParams.get('depth') || '1')\n  const [authenticated, setAuthenticated] = React.useState<boolean>(true)\n  const [fullscreen, setFullscreen] = React.useState<boolean>(false)\n\n  const params = new URLSearchParams({\n    depth,\n    draft: String(draft),\n    locale,\n  }).toString()\n\n  const fetchURL = `${serverURL}${apiRoute}${docEndpoint}?${params}`\n\n  React.useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const res = await fetch(fetchURL, {\n          credentials: authenticated ? 'include' : 'omit',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n          method: 'GET',\n        })\n\n        try {\n          const json = await res.json()\n          setData(json)\n        } catch (error) {\n          toast.error('Error parsing response')\n          console.error(error) // eslint-disable-line no-console\n        }\n      } catch (error) {\n        toast.error('Error making request')\n        console.error(error) // eslint-disable-line no-console\n      }\n    }\n\n    void fetchData()\n  }, [i18n.language, fetchURL, authenticated])\n\n  return (\n    <Gutter\n      className={[baseClass, fullscreen && `${baseClass}--fullscreen`].filter(Boolean).join(' ')}\n      right={false}\n    >\n      <SetDocumentStepNav\n        collectionSlug={collectionSlug}\n        globalLabel={globalClientConfig?.label}\n        globalSlug={globalSlug}\n        id={id}\n        pluralLabel={collectionClientConfig ? collectionClientConfig?.labels?.plural : undefined}\n        useAsTitle={collectionClientConfig ? collectionClientConfig?.admin?.useAsTitle : undefined}\n        view=\"API\"\n      />\n      <SetViewActions\n        actions={\n          (collectionClientConfig || globalClientConfig)?.admin?.components?.views?.edit?.api\n            ?.actions\n        }\n      />\n      <div className={`${baseClass}__configuration`}>\n        <div className={`${baseClass}__api-url`}>\n          <span className={`${baseClass}__label`}>\n            API URL <CopyToClipboard value={fetchURL} />\n          </span>\n          <a href={fetchURL} rel=\"noopener noreferrer\" target=\"_blank\">\n            {fetchURL}\n          </a>\n        </div>\n        <Form\n          initialState={{\n            authenticated: {\n              initialValue: authenticated || false,\n              valid: true,\n              value: authenticated || false,\n            },\n            depth: {\n              initialValue: Number(depth || 0),\n              valid: true,\n              value: Number(depth || 0),\n            },\n            draft: {\n              initialValue: draft || false,\n              valid: true,\n              value: draft || false,\n            },\n            locale: {\n              initialValue: locale,\n              valid: true,\n              value: locale,\n            },\n          }}\n        >\n          <div className={`${baseClass}__form-fields`}>\n            <div className={`${baseClass}__filter-query-checkboxes`}>\n              {draftsEnabled && (\n                <CheckboxField\n                  field={{\n                    name: 'draft',\n                    label: t('version:draft'),\n                  }}\n                  onChange={() => setDraft(!draft)}\n                />\n              )}\n              <CheckboxField\n                field={{\n                  name: 'authenticated',\n                  label: t('authentication:authenticated'),\n                }}\n                onChange={() => setAuthenticated(!authenticated)}\n              />\n            </div>\n            {localeOptions && <LocaleSelector localeOptions={localeOptions} onChange={setLocale} />}\n            <NumberField\n              field={{\n                name: 'depth',\n                admin: {\n                  step: 1,\n                },\n                label: t('general:depth'),\n                max: 10,\n                min: 0,\n              }}\n              onChange={(value) => setDepth(value?.toString())}\n            />\n          </div>\n        </Form>\n      </div>\n      <div className={`${baseClass}__results-wrapper`}>\n        <div className={`${baseClass}__toggle-fullscreen-button-container`}>\n          <button\n            aria-label=\"toggle fullscreen\"\n            className={`${baseClass}__toggle-fullscreen-button`}\n            onClick={() => setFullscreen(!fullscreen)}\n            type=\"button\"\n          >\n            <MinimizeMaximizeIcon isMinimized={!fullscreen} />\n          </button>\n        </div>\n        <div className={`${baseClass}__results`}>\n          <RenderJSON object={data} />\n        </div>\n      </div>\n    </Gutter>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["CheckboxField","CopyToClipboard","Form","Gutter","MinimizeMaximizeIcon","NumberField","SetDocumentStepNav","useConfig","useDocumentInfo","useLocale","useTranslation","useSearchParams","React","toast","LocaleSelector","RenderJSON","baseClass","APIViewClient","id","collectionSlug","globalSlug","initialData","searchParams","i18n","t","code","config","localization","routes","api","apiRoute","serverURL","getEntityConfig","collectionConfig","globalConfig","localeOptions","locales","map","locale","label","value","draftsEnabled","docEndpoint","Boolean","versions","drafts","data","setData","useState","draft","setDraft","get","setLocale","depth","setDepth","authenticated","setAuthenticated","fullscreen","setFullscreen","params","URLSearchParams","String","toString","fetchURL","useEffect","fetchData","res","fetch","credentials","headers","language","method","json","error","console","_jsxs","className","filter","join","right","_jsx","globalLabel","pluralLabel","labels","plural","undefined","useAsTitle","admin","view","href","rel","target","initialState","initialValue","valid","Number","field","name","onChange","path","step","max","min","onClick","type","isMinimized","object"],"sources":["../../../src/views/API/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport {\n  CheckboxField,\n  CopyToClipboard,\n  Form,\n  Gutter,\n  MinimizeMaximizeIcon,\n  NumberField,\n  SetDocumentStepNav,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { useSearchParams } from 'next/navigation.js'\nimport * as React from 'react'\nimport { toast } from 'sonner'\n\nimport './index.scss'\nimport { LocaleSelector } from './LocaleSelector/index.js'\nimport { RenderJSON } from './RenderJSON/index.js'\n\nconst baseClass = 'query-inspector'\n\nexport const APIViewClient: React.FC = () => {\n  const { id, collectionSlug, globalSlug, initialData } = useDocumentInfo()\n\n  const searchParams = useSearchParams()\n  const { i18n, t } = useTranslation()\n  const { code } = useLocale()\n\n  const {\n    config: {\n      localization,\n      routes: { api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig\n  const globalConfig = getEntityConfig({ globalSlug }) as ClientGlobalConfig\n\n  const localeOptions =\n    localization &&\n    localization.locales.map((locale) => ({ label: locale.label, value: locale.code }))\n\n  let draftsEnabled: boolean = false\n  let docEndpoint: string = ''\n\n  if (collectionConfig) {\n    draftsEnabled = Boolean(collectionConfig.versions?.drafts)\n    docEndpoint = `/${collectionSlug}/${id}`\n  }\n\n  if (globalConfig) {\n    draftsEnabled = Boolean(globalConfig.versions?.drafts)\n    docEndpoint = `/globals/${globalSlug}`\n  }\n\n  const [data, setData] = React.useState<any>(initialData)\n  const [draft, setDraft] = React.useState<boolean>(searchParams.get('draft') === 'true')\n  const [locale, setLocale] = React.useState<string>(searchParams?.get('locale') || code)\n  const [depth, setDepth] = React.useState<string>(searchParams.get('depth') || '1')\n  const [authenticated, setAuthenticated] = React.useState<boolean>(true)\n  const [fullscreen, setFullscreen] = React.useState<boolean>(false)\n\n  const params = new URLSearchParams({\n    depth,\n    draft: String(draft),\n    locale,\n  }).toString()\n\n  const fetchURL = `${serverURL}${apiRoute}${docEndpoint}?${params}`\n\n  React.useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const res = await fetch(fetchURL, {\n          credentials: authenticated ? 'include' : 'omit',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n          method: 'GET',\n        })\n\n        try {\n          const json = await res.json()\n          setData(json)\n        } catch (error) {\n          toast.error('Error parsing response')\n          console.error(error) // eslint-disable-line no-console\n        }\n      } catch (error) {\n        toast.error('Error making request')\n        console.error(error) // eslint-disable-line no-console\n      }\n    }\n\n    void fetchData()\n  }, [i18n.language, fetchURL, authenticated])\n\n  return (\n    <Gutter\n      className={[baseClass, fullscreen && `${baseClass}--fullscreen`].filter(Boolean).join(' ')}\n      right={false}\n    >\n      <SetDocumentStepNav\n        collectionSlug={collectionSlug}\n        globalLabel={globalConfig?.label}\n        globalSlug={globalSlug}\n        id={id}\n        pluralLabel={collectionConfig ? collectionConfig?.labels?.plural : undefined}\n        useAsTitle={collectionConfig ? collectionConfig?.admin?.useAsTitle : undefined}\n        view=\"API\"\n      />\n      <div className={`${baseClass}__configuration`}>\n        <div className={`${baseClass}__api-url`}>\n          <span className={`${baseClass}__label`}>\n            API URL <CopyToClipboard value={fetchURL} />\n          </span>\n          <a href={fetchURL} rel=\"noopener noreferrer\" target=\"_blank\">\n            {fetchURL}\n          </a>\n        </div>\n        <Form\n          initialState={{\n            authenticated: {\n              initialValue: authenticated || false,\n              valid: true,\n              value: authenticated || false,\n            },\n            depth: {\n              initialValue: Number(depth || 0),\n              valid: true,\n              value: Number(depth || 0),\n            },\n            draft: {\n              initialValue: draft || false,\n              valid: true,\n              value: draft || false,\n            },\n            locale: {\n              initialValue: locale,\n              valid: true,\n              value: locale,\n            },\n          }}\n        >\n          <div className={`${baseClass}__form-fields`}>\n            <div className={`${baseClass}__filter-query-checkboxes`}>\n              {draftsEnabled && (\n                <CheckboxField\n                  field={{\n                    name: 'draft',\n                    label: t('version:draft'),\n                  }}\n                  onChange={() => setDraft(!draft)}\n                  path=\"draft\"\n                />\n              )}\n              <CheckboxField\n                field={{\n                  name: 'authenticated',\n                  label: t('authentication:authenticated'),\n                }}\n                onChange={() => setAuthenticated(!authenticated)}\n                path=\"authenticated\"\n              />\n            </div>\n            {localeOptions && <LocaleSelector localeOptions={localeOptions} onChange={setLocale} />}\n            <NumberField\n              field={{\n                name: 'depth',\n                admin: {\n                  step: 1,\n                },\n                label: t('general:depth'),\n                max: 10,\n                min: 0,\n              }}\n              onChange={(value) => setDepth(value?.toString())}\n              path=\"depth\"\n            />\n          </div>\n        </Form>\n      </div>\n      <div className={`${baseClass}__results-wrapper`}>\n        <div className={`${baseClass}__toggle-fullscreen-button-container`}>\n          <button\n            aria-label=\"toggle fullscreen\"\n            className={`${baseClass}__toggle-fullscreen-button`}\n            onClick={() => setFullscreen(!fullscreen)}\n            type=\"button\"\n          >\n            <MinimizeMaximizeIcon isMinimized={!fullscreen} />\n          </button>\n        </div>\n        <div className={`${baseClass}__results`}>\n          <RenderJSON object={data} />\n        </div>\n      </div>\n    </Gutter>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/API/index.scss

@@ -1,123 +1,125 @@
 @import '../../scss/styles.scss';
 
-.query-inspector {
-  --string-color: #11b102;
-  --number-color: #62c3f3;
-  display: flex;
-  gap: calc(var(--base) * 2);
-  align-items: flex-start;
-
-  ul {
-    padding-left: calc(var(--base) * 1);
-  }
+@layer payload-default {
+  .query-inspector {
+    --string-color: #11b102;
+    --number-color: #62c3f3;
+    display: flex;
+    gap: calc(var(--base) * 2);
+    align-items: flex-start;
 
-  &--fullscreen {
-    padding-left: 0;
-    .query-inspector__configuration {
-      display: none;
+    ul {
+      padding-left: calc(var(--base) * 1);
     }
-  }
 
-  &__configuration {
-    margin-top: calc(var(--base) * 2);
-    width: 60%;
-    position: sticky;
-    top: var(--base);
-  }
+    &--fullscreen {
+      padding-left: 0;
+      .query-inspector__configuration {
+        display: none;
+      }
+    }
 
-  &__api-url {
-    margin-bottom: calc(var(--base) * 1.5);
+    &__configuration {
+      margin-top: calc(var(--base) * 2);
+      width: 60%;
+      position: sticky;
+      top: var(--base);
+    }
 
-    a {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-decoration: none;
+    &__api-url {
+      margin-bottom: calc(var(--base) * 1.5);
 
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
+      a {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-decoration: none;
+
+        &:hover,
+        &:focus-visible {
+          text-decoration: underline;
+        }
       }
     }
-  }
 
-  &__form-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-  }
-
-  &__label {
-    color: var(--theme-elevation-400);
-  }
+    &__form-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+    }
 
-  &__filter-query-checkboxes {
-    display: flex;
-    gap: var(--base);
-  }
+    &__label {
+      color: var(--theme-elevation-400);
+    }
 
-  &__results-wrapper {
-    font-family: var(--font-mono);
-    width: 100%;
-    ul {
-      margin: 0;
+    &__filter-query-checkboxes {
+      display: flex;
+      gap: var(--base);
     }
-    li {
-      list-style: none;
+
+    &__results-wrapper {
+      font-family: var(--font-mono);
+      width: 100%;
+      ul {
+        margin: 0;
+      }
+      li {
+        list-style: none;
+      }
     }
-  }
 
-  &__toggle-fullscreen-button-container {
-    position: sticky;
-    top: 0;
-    z-index: 1;
+    &__toggle-fullscreen-button-container {
+      position: sticky;
+      top: 0;
+      z-index: 1;
 
-    @include mid-break {
-      display: none;
+      @include mid-break {
+        display: none;
+      }
     }
-  }
 
-  &__toggle-fullscreen-button {
-    position: absolute;
-    right: calc(var(--base) * 0.5);
-    top: calc(var(--base) * 0.5);
-    padding: calc(var(--base) * 0.25);
-    background-color: var(--theme-elevation-0);
-    cursor: pointer;
-    z-index: 1;
-    margin: 0;
-    border: 0;
-    border-radius: 3px;
-    color: var(--theme-elevation-300);
-    &:hover {
-      color: var(--theme-elevation-700);
+    &__toggle-fullscreen-button {
+      position: absolute;
+      right: calc(var(--base) * 0.5);
+      top: calc(var(--base) * 0.5);
+      padding: calc(var(--base) * 0.25);
+      background-color: var(--theme-elevation-0);
+      cursor: pointer;
+      z-index: 1;
+      margin: 0;
+      border: 0;
+      border-radius: 3px;
+      color: var(--theme-elevation-300);
+      &:hover {
+        color: var(--theme-elevation-700);
+      }
     }
-  }
 
-  &__results {
-    padding-top: calc(var(--base) * 0.5);
-    padding-left: calc(var(--base) * 0.5);
-    padding-bottom: calc(var(--base) * 0.5);
-    background-color: var(--theme-elevation-50);
-    overflow: auto;
-    min-height: 100vh;
-  }
-
-  @include mid-break {
-    flex-direction: column;
-    padding-left: 0;
+    &__results {
+      padding-top: calc(var(--base) * 0.5);
+      padding-left: calc(var(--base) * 0.5);
+      padding-bottom: calc(var(--base) * 0.5);
+      background-color: var(--theme-elevation-50);
+      overflow: auto;
+      min-height: 100vh;
+    }
 
-    .query-inspector__configuration {
-      position: relative;
-      width: 100%;
-      top: 0;
-      padding-inline-end: var(--gutter-h);
+    @include mid-break {
+      flex-direction: column;
+      padding-left: 0;
+
+      .query-inspector__configuration {
+        position: relative;
+        width: 100%;
+        top: 0;
+        padding-inline-end: var(--gutter-h);
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .query-inspector {
-    --number-color: #2e9cd3;
+  html[data-theme='light'] {
+    .query-inspector {
+      --number-color: #2e9cd3;
+    }
   }
 }

package/dist/views/Account/Settings/index.d.ts

@@ -1,10 +1,11 @@
 import type { I18n } from '@payloadcms/translations';
-import type { LanguageOptions } from 'payload';
+import type { Config, LanguageOptions } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const Settings: React.FC<{
     readonly className?: string;
     readonly i18n: I18n;
     readonly languageOptions: LanguageOptions;
+    readonly theme: Config['admin']['theme'];
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/views/Account/Settings/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Account/Settings/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAA;IACnB,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;CAC1C,CAaA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Account/Settings/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAGtD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAA;IACnB,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAA;CACzC,CAaA,CAAA"}

package/dist/views/Account/Settings/index.js

@@ -8,7 +8,8 @@ export const Settings = props => {
   const {
     className,
     i18n,
-    languageOptions
+    languageOptions,
+    theme
   } = props;
   return /*#__PURE__*/_jsxs("div", {
     className: [baseClass, className].filter(Boolean).join(' '),
@@ -17,13 +18,12 @@ export const Settings = props => {
     }), /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__language`,
       children: [/*#__PURE__*/_jsx(FieldLabel, {
-        field: null,
         htmlFor: "language-select",
         label: i18n.t('general:language')
       }), /*#__PURE__*/_jsx(LanguageSelector, {
         languageOptions: languageOptions
       })]
-    }), /*#__PURE__*/_jsx(ToggleTheme, {})]
+    }), theme === 'all' && /*#__PURE__*/_jsx(ToggleTheme, {})]
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/views/Account/Settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FieldLabel","React","ToggleTheme","LanguageSelector","baseClass","Settings","props","className","i18n","languageOptions","_jsxs","filter","Boolean","join","_jsx","t","field","htmlFor","label"],"sources":["../../../../src/views/Account/Settings/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type { LanguageOptions } from 'payload'\n\nimport { FieldLabel } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { ToggleTheme } from '../ToggleTheme/index.js'\nimport { LanguageSelector } from './LanguageSelector.js'\nimport './index.scss'\n\nconst baseClass = 'payload-settings'\n\nexport const Settings: React.FC<{\n  readonly className?: string\n  readonly i18n: I18n\n  readonly languageOptions: LanguageOptions\n}> = (props) => {\n  const { className, i18n, languageOptions } = props\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <h3>{i18n.t('general:payloadSettings')}</h3>\n      <div className={`${baseClass}__language`}>\n        <FieldLabel field={null} htmlFor=\"language-select\" label={i18n.t('general:language')} />\n        <LanguageSelector languageOptions={languageOptions} />\n      </div>\n      <ToggleTheme />\n    </div>\n  )\n}\n"],"mappings":";AAGA,SAASA,UAAU,QAAQ;AAC3B,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,gBAAgB,QAAQ;AAGjC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,QAAA,GAIPC,KAAA;EACJ,MAAM;IAAEC,SAAS;IAAEC,IAAI;IAAEC;EAAe,CAAE,GAAGH,KAAA;EAE7C,oBACEI,KAAA,CAAC;IAAIH,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACI,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BAC1DC,IAAA,CAAC;gBAAIN,IAAA,CAAKO,CAAC,CAAC;qBACZL,KAAA,CAAC;MAAIH,SAAA,EAAW,GAAGH,SAAA,YAAqB;8BACtCU,IAAA,CAACd,UAAA;QAAWgB,KAAA,EAAO;QAAMC,OAAA,EAAQ;QAAkBC,KAAA,EAAOV,IAAA,CAAKO,CAAC,CAAC;uBACjED,IAAA,CAACX,gBAAA;QAAiBM,eAAA,EAAiBA;;qBAErCK,IAAA,CAACZ,WAAA;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["FieldLabel","React","ToggleTheme","LanguageSelector","baseClass","Settings","props","className","i18n","languageOptions","theme","_jsxs","filter","Boolean","join","_jsx","t","htmlFor","label"],"sources":["../../../../src/views/Account/Settings/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type { Config, LanguageOptions } from 'payload'\n\nimport { FieldLabel } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { ToggleTheme } from '../ToggleTheme/index.js'\nimport './index.scss'\nimport { LanguageSelector } from './LanguageSelector.js'\n\nconst baseClass = 'payload-settings'\n\nexport const Settings: React.FC<{\n  readonly className?: string\n  readonly i18n: I18n\n  readonly languageOptions: LanguageOptions\n  readonly theme: Config['admin']['theme']\n}> = (props) => {\n  const { className, i18n, languageOptions, theme } = props\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')}>\n      <h3>{i18n.t('general:payloadSettings')}</h3>\n      <div className={`${baseClass}__language`}>\n        <FieldLabel htmlFor=\"language-select\" label={i18n.t('general:language')} />\n        <LanguageSelector languageOptions={languageOptions} />\n      </div>\n      {theme === 'all' && <ToggleTheme />}\n    </div>\n  )\n}\n"],"mappings":";AAGA,SAASA,UAAU,QAAQ;AAC3B,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAE5B,SAASC,gBAAgB,QAAQ;AAEjC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,QAAA,GAKPC,KAAA;EACJ,MAAM;IAAEC,SAAS;IAAEC,IAAI;IAAEC,eAAe;IAAEC;EAAK,CAAE,GAAGJ,KAAA;EAEpD,oBACEK,KAAA,CAAC;IAAIJ,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACK,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BAC1DC,IAAA,CAAC;gBAAIP,IAAA,CAAKQ,CAAC,CAAC;qBACZL,KAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGH,SAAA,YAAqB;8BACtCW,IAAA,CAACf,UAAA;QAAWiB,OAAA,EAAQ;QAAkBC,KAAA,EAAOV,IAAA,CAAKQ,CAAC,CAAC;uBACpDD,IAAA,CAACZ,gBAAA;QAAiBM,eAAA,EAAiBA;;QAEpCC,KAAA,KAAU,sBAASK,IAAA,CAACb,WAAA;;AAG3B","ignoreList":[]}