@payloadcms/richtext-slate 3.0.0-beta.12 → 3.0.0-beta.121

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import type { RichTextAdapter } from 'payload/types'\n\nimport { withNullableJSONSchemaType } from 'payload/utilities'\n\nimport type { AdapterArguments } from './types.js'\n\nimport { RichTextCell } from './cell/index.js'\nimport { richTextRelationshipPromise } from './data/richTextRelationshipPromise.js'\nimport { richTextValidate } from './data/validation.js'\nimport { RichTextField } from './field/index.js'\nimport { getGenerateComponentMap } from './generateComponentMap.js'\nimport { getGenerateSchemaMap } from './generateSchemaMap.js'\n\nexport function slateEditor(args: AdapterArguments): RichTextAdapter<any[], AdapterArguments, any> {\n  return {\n    CellComponent: RichTextCell,\n    FieldComponent: RichTextField,\n    generateComponentMap: getGenerateComponentMap(args),\n    generateSchemaMap: getGenerateSchemaMap(args),\n    outputSchema: ({ isRequired }) => {\n      return {\n        type: withNullableJSONSchemaType('array', isRequired),\n        items: {\n          type: 'object',\n        },\n      }\n    },\n    populationPromise({\n      context,\n      currentDepth,\n      depth,\n      field,\n      findMany,\n      flattenLocales,\n      overrideAccess,\n      populationPromises,\n      req,\n      showHiddenFields,\n      siblingDoc,\n    }) {\n      if (\n        field.admin?.elements?.includes('relationship') ||\n        field.admin?.elements?.includes('upload') ||\n        field.admin?.elements?.includes('link') ||\n        !field?.admin?.elements\n      ) {\n        return richTextRelationshipPromise({\n          context,\n          currentDepth,\n          depth,\n          field,\n          findMany,\n          flattenLocales,\n          overrideAccess,\n          populationPromises,\n          req,\n          showHiddenFields,\n          siblingDoc,\n        })\n      }\n      return null\n    },\n    validate: richTextValidate,\n  }\n}\n\nexport { ElementButton } from './field/elements/Button.js'\n\nexport { toggleElement } from './field/elements/toggle.js'\nexport { LeafButton } from './field/leaves/Button.js'\nexport type {\n  AdapterArguments,\n  ElementNode,\n  FieldProps,\n  RichTextCustomElement,\n  RichTextCustomLeaf,\n  RichTextElement,\n  RichTextLeaf,\n  TextNode,\n} from './types.js'\n\nexport { nodeIsTextNode } from './types.js'\n"],"names":["withNullableJSONSchemaType","RichTextCell","richTextRelationshipPromise","richTextValidate","RichTextField","getGenerateComponentMap","getGenerateSchemaMap","slateEditor","args","CellComponent","FieldComponent","generateComponentMap","generateSchemaMap","outputSchema","isRequired","type","items","populationPromise","context","currentDepth","depth","field","findMany","flattenLocales","overrideAccess","populationPromises","req","showHiddenFields","siblingDoc","admin","elements","includes","validate","ElementButton","toggleElement","LeafButton","nodeIsTextNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,0BAA0B,QAAQ,oBAAmB;AAI9D,SAASC,YAAY,QAAQ,kBAAiB;AAC9C,SAASC,2BAA2B,QAAQ,wCAAuC;AACnF,SAASC,gBAAgB,QAAQ,uBAAsB;AACvD,SAASC,aAAa,QAAQ,mBAAkB;AAChD,SAASC,uBAAuB,QAAQ,4BAA2B;AACnE,SAASC,oBAAoB,QAAQ,yBAAwB;AAE7D,OAAO,SAASC,YAAYC,IAAsB;IAChD,OAAO;QACLC,eAAeR;QACfS,gBAAgBN;QAChBO,sBAAsBN,wBAAwBG;QAC9CI,mBAAmBN,qBAAqBE;QACxCK,cAAc,CAAC,EAAEC,UAAU,EAAE;YAC3B,OAAO;gBACLC,MAAMf,2BAA2B,SAASc;gBAC1CE,OAAO;oBACLD,MAAM;gBACR;YACF;QACF;QACAE,mBAAkB,EAChBC,OAAO,EACPC,YAAY,EACZC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,kBAAkB,EAClBC,GAAG,EACHC,gBAAgB,EAChBC,UAAU,EACX;YACC,IACEP,MAAMQ,KAAK,EAAEC,UAAUC,SAAS,mBAChCV,MAAMQ,KAAK,EAAEC,UAAUC,SAAS,aAChCV,MAAMQ,KAAK,EAAEC,UAAUC,SAAS,WAChC,CAACV,OAAOQ,OAAOC,UACf;gBACA,OAAO5B,4BAA4B;oBACjCgB;oBACAC;oBACAC;oBACAC;oBACAC;oBACAC;oBACAC;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;YACF;YACA,OAAO;QACT;QACAI,UAAU7B;IACZ;AACF;AAEA,SAAS8B,aAAa,QAAQ,6BAA4B;AAE1D,SAASC,aAAa,QAAQ,6BAA4B;AAC1D,SAASC,UAAU,QAAQ,2BAA0B;AAYrD,SAASC,cAAc,QAAQ,aAAY"}
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import type { Config, RichTextAdapterProvider } from 'payload'\n\nimport { sanitizeFields, withNullableJSONSchemaType } from 'payload'\n\nimport type { AdapterArguments } from './types.js'\n\nimport { richTextRelationshipPromise } from './data/richTextRelationshipPromise.js'\nimport { richTextValidate } from './data/validation.js'\nimport { elements as elementTypes } from './field/elements/index.js'\nimport { transformExtraFields } from './field/elements/link/utilities.js'\nimport { defaultLeaves as leafTypes } from './field/leaves/index.js'\nimport { getGenerateSchemaMap } from './generateSchemaMap.js'\n\nexport function slateEditor(\n  args: AdapterArguments,\n): RichTextAdapterProvider<any[], AdapterArguments, any> {\n  return async ({ config }) => {\n    const validRelationships = config.collections.map((c) => c.slug) || []\n\n    if (!args.admin) {\n      args.admin = {}\n    }\n    if (!args.admin.link) {\n      args.admin.link = {}\n    }\n    if (!args.admin.link.fields) {\n      args.admin.link.fields = []\n    }\n    args.admin.link.fields = await sanitizeFields({\n      config: config as unknown as Config,\n      fields: transformExtraFields(args.admin?.link?.fields, config),\n      parentIsLocalized: false,\n      validRelationships,\n    })\n\n    if (args?.admin?.upload?.collections) {\n      for (const collection of Object.keys(args.admin.upload.collections)) {\n        if (args?.admin?.upload?.collections[collection]?.fields) {\n          args.admin.upload.collections[collection].fields = await sanitizeFields({\n            config: config as unknown as Config,\n            fields: args.admin?.upload?.collections[collection]?.fields,\n            parentIsLocalized: false,\n            validRelationships,\n          })\n        }\n      }\n    }\n\n    return {\n      CellComponent: '@payloadcms/richtext-slate/client#RichTextCell',\n      FieldComponent: '@payloadcms/richtext-slate/client#RichTextField',\n      generateComponentMap: {\n        path: '@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap',\n        serverProps: args,\n      },\n      generateImportMap: ({ addToImportMap }) => {\n        addToImportMap('@payloadcms/richtext-slate/client#RichTextCell')\n        addToImportMap('@payloadcms/richtext-slate/client#RichTextField')\n        addToImportMap('@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap')\n        Object.values(leafTypes).forEach((leaf) => {\n          if (leaf.Button) {\n            addToImportMap(leaf.Button)\n          }\n          if (leaf.Leaf) {\n            addToImportMap(leaf.Leaf)\n          }\n          if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {\n            addToImportMap(leaf.plugins)\n          }\n        })\n        args?.admin?.leaves?.forEach((leaf) => {\n          if (typeof leaf === 'object') {\n            if (leaf.Button) {\n              addToImportMap(leaf.Button)\n            }\n            if (leaf.Leaf) {\n              addToImportMap(leaf.Leaf)\n            }\n            if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {\n              addToImportMap(leaf.plugins)\n            }\n          }\n        })\n\n        Object.values(elementTypes).forEach((element) => {\n          if (element.Button) {\n            addToImportMap(element.Button)\n          }\n          if (element.Element) {\n            addToImportMap(element.Element)\n          }\n          if (Array.isArray(element.plugins) && element.plugins?.length) {\n            addToImportMap(element.plugins)\n          }\n        })\n\n        args?.admin?.elements?.forEach((element) => {\n          if (typeof element === 'object') {\n            if (element.Button) {\n              addToImportMap(element.Button)\n            }\n            if (element.Element) {\n              addToImportMap(element.Element)\n            }\n            if (Array.isArray(element.plugins) && element.plugins?.length) {\n              addToImportMap(element.plugins)\n            }\n          }\n        })\n      },\n      generateSchemaMap: getGenerateSchemaMap(args),\n      graphQLPopulationPromises({\n        context,\n        currentDepth,\n        depth,\n        draft,\n        field,\n        fieldPromises,\n        findMany,\n        flattenLocales,\n        overrideAccess,\n        populationPromises,\n        req,\n        showHiddenFields,\n        siblingDoc,\n      }) {\n        if (\n          field.admin?.elements?.includes('relationship') ||\n          field.admin?.elements?.includes('upload') ||\n          field.admin?.elements?.includes('link') ||\n          !field?.admin?.elements\n        ) {\n          richTextRelationshipPromise({\n            context,\n            currentDepth,\n            depth,\n            draft,\n            field,\n            fieldPromises,\n            findMany,\n            flattenLocales,\n            overrideAccess,\n            populationPromises,\n            req,\n            showHiddenFields,\n            siblingDoc,\n          })\n        }\n      },\n      hooks: {\n        afterRead: [\n          ({\n            context: _context,\n            currentDepth,\n            depth,\n            draft,\n            field: _field,\n            fieldPromises,\n            findMany,\n            flattenLocales,\n            overrideAccess,\n            populationPromises,\n            req,\n            showHiddenFields,\n            siblingData,\n          }) => {\n            const context: any = _context\n            const field = _field as any\n            if (\n              field.admin?.elements?.includes('relationship') ||\n              field.admin?.elements?.includes('upload') ||\n              field.admin?.elements?.includes('link') ||\n              !field?.admin?.elements\n            ) {\n              richTextRelationshipPromise({\n                context,\n                currentDepth,\n                depth,\n                draft,\n                field,\n                fieldPromises,\n                findMany,\n                flattenLocales,\n                overrideAccess,\n                populationPromises,\n                req,\n                showHiddenFields,\n                siblingDoc: siblingData,\n              })\n            }\n          },\n        ],\n      },\n      outputSchema: ({ isRequired }) => {\n        return {\n          type: withNullableJSONSchemaType('array', isRequired),\n          items: {\n            type: 'object',\n          },\n        }\n      },\n      validate: richTextValidate,\n    }\n  }\n}\n\nexport type {\n  AdapterArguments,\n  ElementNode,\n  RichTextCustomElement,\n  RichTextCustomLeaf,\n  RichTextElement,\n  RichTextLeaf,\n  RichTextPlugin,\n  RichTextPluginComponent,\n  SlateFieldProps,\n  TextNode,\n} from './types.js'\n\nexport { nodeIsTextNode } from './types.js'\n"],"names":["sanitizeFields","withNullableJSONSchemaType","richTextRelationshipPromise","richTextValidate","elements","elementTypes","transformExtraFields","defaultLeaves","leafTypes","getGenerateSchemaMap","slateEditor","args","config","validRelationships","collections","map","c","slug","admin","link","fields","parentIsLocalized","upload","collection","Object","keys","CellComponent","FieldComponent","generateComponentMap","path","serverProps","generateImportMap","addToImportMap","values","forEach","leaf","Button","Leaf","Array","isArray","plugins","length","leaves","element","Element","generateSchemaMap","graphQLPopulationPromises","context","currentDepth","depth","draft","field","fieldPromises","findMany","flattenLocales","overrideAccess","populationPromises","req","showHiddenFields","siblingDoc","includes","hooks","afterRead","_context","_field","siblingData","outputSchema","isRequired","type","items","validate","nodeIsTextNode"],"mappings":"AAEA,SAASA,cAAc,EAAEC,0BAA0B,QAAQ,UAAS;AAIpE,SAASC,2BAA2B,QAAQ,wCAAuC;AACnF,SAASC,gBAAgB,QAAQ,uBAAsB;AACvD,SAASC,YAAYC,YAAY,QAAQ,4BAA2B;AACpE,SAASC,oBAAoB,QAAQ,qCAAoC;AACzE,SAASC,iBAAiBC,SAAS,QAAQ,0BAAyB;AACpE,SAASC,oBAAoB,QAAQ,yBAAwB;AAE7D,OAAO,SAASC,YACdC,IAAsB;IAEtB,OAAO,OAAO,EAAEC,MAAM,EAAE;QACtB,MAAMC,qBAAqBD,OAAOE,WAAW,CAACC,GAAG,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAK,EAAE;QAEtE,IAAI,CAACN,KAAKO,KAAK,EAAE;YACfP,KAAKO,KAAK,GAAG,CAAC;QAChB;QACA,IAAI,CAACP,KAAKO,KAAK,CAACC,IAAI,EAAE;YACpBR,KAAKO,KAAK,CAACC,IAAI,GAAG,CAAC;QACrB;QACA,IAAI,CAACR,KAAKO,KAAK,CAACC,IAAI,CAACC,MAAM,EAAE;YAC3BT,KAAKO,KAAK,CAACC,IAAI,CAACC,MAAM,GAAG,EAAE;QAC7B;QACAT,KAAKO,KAAK,CAACC,IAAI,CAACC,MAAM,GAAG,MAAMpB,eAAe;YAC5CY,QAAQA;YACRQ,QAAQd,qBAAqBK,KAAKO,KAAK,EAAEC,MAAMC,QAAQR;YACvDS,mBAAmB;YACnBR;QACF;QAEA,IAAIF,MAAMO,OAAOI,QAAQR,aAAa;YACpC,KAAK,MAAMS,cAAcC,OAAOC,IAAI,CAACd,KAAKO,KAAK,CAACI,MAAM,CAACR,WAAW,EAAG;gBACnE,IAAIH,MAAMO,OAAOI,QAAQR,WAAW,CAACS,WAAW,EAAEH,QAAQ;oBACxDT,KAAKO,KAAK,CAACI,MAAM,CAACR,WAAW,CAACS,WAAW,CAACH,MAAM,GAAG,MAAMpB,eAAe;wBACtEY,QAAQA;wBACRQ,QAAQT,KAAKO,KAAK,EAAEI,QAAQR,WAAW,CAACS,WAAW,EAAEH;wBACrDC,mBAAmB;wBACnBR;oBACF;gBACF;YACF;QACF;QAEA,OAAO;YACLa,eAAe;YACfC,gBAAgB;YAChBC,sBAAsB;gBACpBC,MAAM;gBACNC,aAAanB;YACf;YACAoB,mBAAmB,CAAC,EAAEC,cAAc,EAAE;gBACpCA,eAAe;gBACfA,eAAe;gBACfA,eAAe;gBACfR,OAAOS,MAAM,CAACzB,WAAW0B,OAAO,CAAC,CAACC;oBAChC,IAAIA,KAAKC,MAAM,EAAE;wBACfJ,eAAeG,KAAKC,MAAM;oBAC5B;oBACA,IAAID,KAAKE,IAAI,EAAE;wBACbL,eAAeG,KAAKE,IAAI;oBAC1B;oBACA,IAAIC,MAAMC,OAAO,CAACJ,KAAKK,OAAO,KAAKL,KAAKK,OAAO,EAAEC,QAAQ;wBACvDT,eAAeG,KAAKK,OAAO;oBAC7B;gBACF;gBACA7B,MAAMO,OAAOwB,QAAQR,QAAQ,CAACC;oBAC5B,IAAI,OAAOA,SAAS,UAAU;wBAC5B,IAAIA,KAAKC,MAAM,EAAE;4BACfJ,eAAeG,KAAKC,MAAM;wBAC5B;wBACA,IAAID,KAAKE,IAAI,EAAE;4BACbL,eAAeG,KAAKE,IAAI;wBAC1B;wBACA,IAAIC,MAAMC,OAAO,CAACJ,KAAKK,OAAO,KAAKL,KAAKK,OAAO,EAAEC,QAAQ;4BACvDT,eAAeG,KAAKK,OAAO;wBAC7B;oBACF;gBACF;gBAEAhB,OAAOS,MAAM,CAAC5B,cAAc6B,OAAO,CAAC,CAACS;oBACnC,IAAIA,QAAQP,MAAM,EAAE;wBAClBJ,eAAeW,QAAQP,MAAM;oBAC/B;oBACA,IAAIO,QAAQC,OAAO,EAAE;wBACnBZ,eAAeW,QAAQC,OAAO;oBAChC;oBACA,IAAIN,MAAMC,OAAO,CAACI,QAAQH,OAAO,KAAKG,QAAQH,OAAO,EAAEC,QAAQ;wBAC7DT,eAAeW,QAAQH,OAAO;oBAChC;gBACF;gBAEA7B,MAAMO,OAAOd,UAAU8B,QAAQ,CAACS;oBAC9B,IAAI,OAAOA,YAAY,UAAU;wBAC/B,IAAIA,QAAQP,MAAM,EAAE;4BAClBJ,eAAeW,QAAQP,MAAM;wBAC/B;wBACA,IAAIO,QAAQC,OAAO,EAAE;4BACnBZ,eAAeW,QAAQC,OAAO;wBAChC;wBACA,IAAIN,MAAMC,OAAO,CAACI,QAAQH,OAAO,KAAKG,QAAQH,OAAO,EAAEC,QAAQ;4BAC7DT,eAAeW,QAAQH,OAAO;wBAChC;oBACF;gBACF;YACF;YACAK,mBAAmBpC,qBAAqBE;YACxCmC,2BAA0B,EACxBC,OAAO,EACPC,YAAY,EACZC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,kBAAkB,EAClBC,GAAG,EACHC,gBAAgB,EAChBC,UAAU,EACX;gBACC,IACER,MAAMjC,KAAK,EAAEd,UAAUwD,SAAS,mBAChCT,MAAMjC,KAAK,EAAEd,UAAUwD,SAAS,aAChCT,MAAMjC,KAAK,EAAEd,UAAUwD,SAAS,WAChC,CAACT,OAAOjC,OAAOd,UACf;oBACAF,4BAA4B;wBAC1B6C;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;wBACAC;oBACF;gBACF;YACF;YACAE,OAAO;gBACLC,WAAW;oBACT,CAAC,EACCf,SAASgB,QAAQ,EACjBf,YAAY,EACZC,KAAK,EACLC,KAAK,EACLC,OAAOa,MAAM,EACbZ,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,cAAc,EACdC,kBAAkB,EAClBC,GAAG,EACHC,gBAAgB,EAChBO,WAAW,EACZ;wBACC,MAAMlB,UAAegB;wBACrB,MAAMZ,QAAQa;wBACd,IACEb,MAAMjC,KAAK,EAAEd,UAAUwD,SAAS,mBAChCT,MAAMjC,KAAK,EAAEd,UAAUwD,SAAS,aAChCT,MAAMjC,KAAK,EAAEd,UAAUwD,SAAS,WAChC,CAACT,OAAOjC,OAAOd,UACf;4BACAF,4BAA4B;gCAC1B6C;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC,YAAYM;4BACd;wBACF;oBACF;iBACD;YACH;YACAC,cAAc,CAAC,EAAEC,UAAU,EAAE;gBAC3B,OAAO;oBACLC,MAAMnE,2BAA2B,SAASkE;oBAC1CE,OAAO;wBACLD,MAAM;oBACR;gBACF;YACF;YACAE,UAAUnE;QACZ;IACF;AACF;AAeA,SAASoE,cAAc,QAAQ,aAAY"}

package/dist/scss/app.scss

@@ -1,208 +1,204 @@
 @import 'styles';
-@import './toastify.scss';
+@import './toasts.scss';
 @import './colors.scss';
+@layer payload-default {
+  :root {
+    --base-px: 20;
+    --base-body-size: 13;
+    --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
+
+    --breakpoint-xs-width: #{$breakpoint-xs-width};
+    --breakpoint-s-width: #{$breakpoint-s-width};
+    --breakpoint-m-width: #{$breakpoint-m-width};
+    --breakpoint-l-width: #{$breakpoint-l-width};
+    --scrollbar-width: 17px;
 
-:root {
-  --base-px: 25;
-  --base-body-size: 13;
-  --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
-
-  --breakpoint-xs-width: #{$breakpoint-xs-width};
-  --breakpoint-s-width: #{$breakpoint-s-width};
-  --breakpoint-m-width: #{$breakpoint-m-width};
-  --breakpoint-l-width: #{$breakpoint-l-width};
-  --scrollbar-width: 17px;
-
-  --theme-bg: var(--theme-elevation-0);
-  --theme-input-bg: var(--theme-elevation-0);
-  --theme-text: var(--theme-elevation-800);
-  --theme-overlay: rgba(5, 5, 5, 0.5);
-  --theme-baseline: #{$baseline-px};
-  --theme-baseline-body-size: #{$baseline-body-size};
-  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --font-mono: monospace;
-
-  --style-radius-s: #{$style-radius-s};
-  --style-radius-m: #{$style-radius-m};
-  --style-radius-l: #{$style-radius-l};
-
-  --z-popup: 10;
-  --z-nav: 20;
-  --z-modal: 30;
-  --z-status: 40;
-
-  --accessibility-outline: 2px solid var(--theme-text);
-  --accessibility-outline-offset: 2px;
-
-  --gutter-h: #{base(3)};
-  --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
-  --nav-width: 275px;
-  --nav-trans-time: 150ms;
-
-  @include mid-break {
-    --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
-    --doc-controls-height: calc(var(--base) * 2.5);
-  }
-
-  @include small-break {
-    --gutter-h: #{base(0.5)};
-    --spacing-view-bottom: calc(var(--base) * 2);
-    --nav-width: 100vw;
-  }
-}
-
-/////////////////////////////
-// GLOBAL STYLES
-/////////////////////////////
+    --theme-bg: var(--theme-elevation-0);
+    --theme-input-bg: var(--theme-elevation-0);
+    --theme-text: var(--theme-elevation-800);
+    --theme-overlay: rgba(5, 5, 5, 0.5);
+    --theme-baseline: #{$baseline-px};
+    --theme-baseline-body-size: #{$baseline-body-size};
+    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      sans-serif;
+    --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
+    --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --style-radius-s: #{$style-radius-s};
+    --style-radius-m: #{$style-radius-m};
+    --style-radius-l: #{$style-radius-l};
+
+    --z-popup: 10;
+    --z-nav: 20;
+    --z-modal: 30;
+    --z-status: 40;
+
+    --accessibility-outline: 2px solid var(--theme-text);
+    --accessibility-outline-offset: 2px;
+
+    --gutter-h: #{base(3)};
+    --spacing-view-bottom: var(--gutter-h);
+    --doc-controls-height: calc(var(--base) * 2.8);
+    --app-header-height: calc(var(--base) * 2.8);
+    --nav-width: 275px;
+    --nav-trans-time: 150ms;
+
+    @include mid-break {
+      --gutter-h: #{base(2)};
+      --app-header-height: calc(var(--base) * 2.4);
+      --doc-controls-height: calc(var(--base) * 2.4);
+    }
 
-* {
-  box-sizing: border-box;
-}
+    @include small-break {
+      --gutter-h: #{base(0.8)};
+      --spacing-view-bottom: calc(var(--base) * 2);
+      --nav-width: 100vw;
+    }
+  }
 
-html {
-  @extend %body;
-  background: var(--theme-bg);
-  -webkit-font-smoothing: antialiased;
-  opacity: 0;
+  /////////////////////////////
+  // GLOBAL STYLES
+  /////////////////////////////
 
-  &[data-theme='dark'],
-  &[data-theme='light'] {
-    opacity: initial;
+  * {
+    box-sizing: border-box;
   }
 
-  &[data-theme='dark'] {
-    --theme-bg: var(--theme-elevation-0);
-    --theme-text: var(--theme-elevation-1000);
-    --theme-input-bg: var(--theme-elevation-50);
-    --theme-overlay: rgba(5, 5, 5, 0.75);
-    color-scheme: dark;
-
-    ::selection {
-      color: var(--color-base-1000);
+  html {
+    @extend %body;
+    background: var(--theme-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[data-theme='dark'] {
+      --theme-bg: var(--theme-elevation-0);
+      --theme-text: var(--theme-elevation-1000);
+      --theme-input-bg: var(--theme-elevation-50);
+      --theme-overlay: rgba(5, 5, 5, 0.75);
+      color-scheme: dark;
+
+      ::selection {
+        color: var(--color-base-1000);
+      }
+
+      ::-moz-selection {
+        color: var(--color-base-1000);
+      }
     }
 
-    ::-moz-selection {
-      color: var(--color-base-1000);
+    @include mid-break {
+      font-size: 12px;
     }
   }
 
-  @include mid-break {
-    font-size: 12px;
+  html,
+  body,
+  #app {
+    height: 100%;
   }
-}
 
-html,
-body,
-#app {
-  height: 100%;
-}
+  body {
+    font-family: var(--font-body);
+    font-weight: 400;
+    color: var(--theme-text);
+    margin: 0;
+    // this is for the nav to be able to push the document over
+    overflow-x: hidden;
+  }
 
-body {
-  font-family: var(--font-body);
-  font-weight: 400;
-  color: var(--theme-text);
-  margin: 0;
-  // this is for the nav to be able to push the document over
-  overflow-x: hidden;
-}
+  ::selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-::selection {
-  background: var(--theme-success-500);
-  color: var(--theme-base-800);
-}
+  ::-moz-selection {
+    background: var(--color-success-250);
+    color: var(--theme-base-800);
+  }
 
-::-moz-selection {
-  background: var(--theme-success-500);
-  color: var(--theme-base-800);
-}
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
 
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
+  h1 {
+    @extend %h1;
+  }
 
-h1 {
-  @extend %h1;
-}
+  h2 {
+    @extend %h2;
+  }
 
-h2 {
-  @extend %h2;
-}
+  h3 {
+    @extend %h3;
+  }
 
-h3 {
-  @extend %h3;
-}
+  h4 {
+    @extend %h4;
+  }
 
-h4 {
-  @extend %h4;
-}
+  h5 {
+    @extend %h5;
+  }
 
-h5 {
-  @extend %h5;
-}
+  h6 {
+    @extend %h6;
+  }
 
-h6 {
-  @extend %h6;
-}
+  p {
+    margin: 0;
+  }
 
-p {
-  margin: 0 0 $baseline;
-}
+  ul,
+  ol {
+    padding-left: $baseline;
+    margin: 0;
+  }
 
-ul,
-ol {
-  padding-left: $baseline;
-  margin: 0 0 $baseline;
-}
+  :focus-visible {
+    outline: var(--accessibility-outline);
+  }
 
-:focus-visible {
-  outline: var(--accessibility-outline);
-}
+  a {
+    color: currentColor;
 
-a {
-  color: currentColor;
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+      outline: none;
+    }
 
-  &:focus {
-    &:not(:focus-visible) {
-      opacity: 0.8;
+    &:active {
+      opacity: 0.7;
+      outline: none;
     }
-    outline: none;
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  svg {
+    vertical-align: middle;
   }
-}
 
-svg {
-  vertical-align: middle;
-}
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
 
-dialog {
-  width: 100%;
-  border: 0;
-  padding: 0;
-  color: currentColor;
-}
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
 
-.payload__modal-item {
-  min-height: 100%;
-  background: transparent;
-}
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
 
-.payload__modal-container--enterDone {
-  overflow: auto;
-}
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
 
-.payload__modal-item--enter,
-.payload__modal-item--enterDone {
-  z-index: var(--z-modal);
+  // @import '~payload-user-css'; TODO: re-enable this
 }
-
-// @import '~payload-user-css'; TODO: re-enable this