@payloadcms/richtext-slate 3.0.0-beta.1 → 3.0.0-beta.100

package/dist/index.js

@@ -1,48 +1,157 @@
-import { withNullableJSONSchemaType } from 'payload/utilities';
-import { RichTextCell } from './cell/index.js';
+import { sanitizeFields, withNullableJSONSchemaType } from 'payload';
 import { richTextRelationshipPromise } from './data/richTextRelationshipPromise.js';
 import { richTextValidate } from './data/validation.js';
-import { RichTextField } from './field/index.js';
-import { getGenerateComponentMap } from './generateComponentMap.js';
+import { elements as elementTypes } from './field/elements/index.js';
+import { transformExtraFields } from './field/elements/link/utilities.js';
+import { defaultLeaves as leafTypes } from './field/leaves/index.js';
 import { getGenerateSchemaMap } from './generateSchemaMap.js';
 export function slateEditor(args) {
-    return {
-        CellComponent: RichTextCell,
-        FieldComponent: RichTextField,
-        generateComponentMap: getGenerateComponentMap(args),
-        generateSchemaMap: getGenerateSchemaMap(args),
-        outputSchema: ({ isRequired })=>{
-            return {
-                type: withNullableJSONSchemaType('array', isRequired),
-                items: {
-                    type: 'object'
+    return async ({ config })=>{
+        const validRelationships = config.collections.map((c)=>c.slug) || [];
+        if (!args.admin) {
+            args.admin = {};
+        }
+        if (!args.admin.link) {
+            args.admin.link = {};
+        }
+        if (!args.admin.link.fields) {
+            args.admin.link.fields = [];
+        }
+        args.admin.link.fields = await sanitizeFields({
+            config: config,
+            fields: transformExtraFields(args.admin?.link?.fields, config),
+            parentIsLocalized: false,
+            validRelationships
+        });
+        if (args?.admin?.upload?.collections) {
+            for (const collection of Object.keys(args.admin.upload.collections)){
+                if (args?.admin?.upload?.collections[collection]?.fields) {
+                    args.admin.upload.collections[collection].fields = await sanitizeFields({
+                        config: config,
+                        fields: args.admin?.upload?.collections[collection]?.fields,
+                        parentIsLocalized: false,
+                        validRelationships
+                    });
                 }
-            };
-        },
-        populationPromise ({ context, currentDepth, depth, field, findMany, flattenLocales, overrideAccess, populationPromises, req, showHiddenFields, siblingDoc }) {
-            if (field.admin?.elements?.includes('relationship') || field.admin?.elements?.includes('upload') || field.admin?.elements?.includes('link') || !field?.admin?.elements) {
-                return richTextRelationshipPromise({
-                    context,
-                    currentDepth,
-                    depth,
-                    field,
-                    findMany,
-                    flattenLocales,
-                    overrideAccess,
-                    populationPromises,
-                    req,
-                    showHiddenFields,
-                    siblingDoc
-                });
             }
-            return null;
-        },
-        validate: richTextValidate
+        }
+        return {
+            CellComponent: '@payloadcms/richtext-slate/client#RichTextCell',
+            FieldComponent: '@payloadcms/richtext-slate/client#RichTextField',
+            generateComponentMap: {
+                path: '@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap',
+                serverProps: args
+            },
+            generateImportMap: ({ addToImportMap })=>{
+                addToImportMap('@payloadcms/richtext-slate/client#RichTextCell');
+                addToImportMap('@payloadcms/richtext-slate/client#RichTextField');
+                addToImportMap('@payloadcms/richtext-slate/generateComponentMap#getGenerateComponentMap');
+                Object.values(leafTypes).forEach((leaf)=>{
+                    if (leaf.Button) {
+                        addToImportMap(leaf.Button);
+                    }
+                    if (leaf.Leaf) {
+                        addToImportMap(leaf.Leaf);
+                    }
+                    if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {
+                        addToImportMap(leaf.plugins);
+                    }
+                });
+                args?.admin?.leaves?.forEach((leaf)=>{
+                    if (typeof leaf === 'object') {
+                        if (leaf.Button) {
+                            addToImportMap(leaf.Button);
+                        }
+                        if (leaf.Leaf) {
+                            addToImportMap(leaf.Leaf);
+                        }
+                        if (Array.isArray(leaf.plugins) && leaf.plugins?.length) {
+                            addToImportMap(leaf.plugins);
+                        }
+                    }
+                });
+                Object.values(elementTypes).forEach((element)=>{
+                    if (element.Button) {
+                        addToImportMap(element.Button);
+                    }
+                    if (element.Element) {
+                        addToImportMap(element.Element);
+                    }
+                    if (Array.isArray(element.plugins) && element.plugins?.length) {
+                        addToImportMap(element.plugins);
+                    }
+                });
+                args?.admin?.elements?.forEach((element)=>{
+                    if (typeof element === 'object') {
+                        if (element.Button) {
+                            addToImportMap(element.Button);
+                        }
+                        if (element.Element) {
+                            addToImportMap(element.Element);
+                        }
+                        if (Array.isArray(element.plugins) && element.plugins?.length) {
+                            addToImportMap(element.plugins);
+                        }
+                    }
+                });
+            },
+            generateSchemaMap: getGenerateSchemaMap(args),
+            graphQLPopulationPromises ({ context, currentDepth, depth, draft, field, fieldPromises, findMany, flattenLocales, overrideAccess, populationPromises, req, showHiddenFields, siblingDoc }) {
+                if (field.admin?.elements?.includes('relationship') || field.admin?.elements?.includes('upload') || field.admin?.elements?.includes('link') || !field?.admin?.elements) {
+                    richTextRelationshipPromise({
+                        context,
+                        currentDepth,
+                        depth,
+                        draft,
+                        field,
+                        fieldPromises,
+                        findMany,
+                        flattenLocales,
+                        overrideAccess,
+                        populationPromises,
+                        req,
+                        showHiddenFields,
+                        siblingDoc
+                    });
+                }
+            },
+            hooks: {
+                afterRead: [
+                    ({ context: _context, currentDepth, depth, draft, field: _field, fieldPromises, findMany, flattenLocales, overrideAccess, populationPromises, req, showHiddenFields, siblingData })=>{
+                        const context = _context;
+                        const field = _field;
+                        if (field.admin?.elements?.includes('relationship') || field.admin?.elements?.includes('upload') || field.admin?.elements?.includes('link') || !field?.admin?.elements) {
+                            richTextRelationshipPromise({
+                                context,
+                                currentDepth,
+                                depth,
+                                draft,
+                                field,
+                                fieldPromises,
+                                findMany,
+                                flattenLocales,
+                                overrideAccess,
+                                populationPromises,
+                                req,
+                                showHiddenFields,
+                                siblingDoc: siblingData
+                            });
+                        }
+                    }
+                ]
+            },
+            outputSchema: ({ isRequired })=>{
+                return {
+                    type: withNullableJSONSchemaType('array', isRequired),
+                    items: {
+                        type: 'object'
+                    }
+                };
+            },
+            validate: richTextValidate
+        };
     };
 }
-export { ElementButton } from './field/elements/Button.js';
-export { toggleElement } from './field/elements/toggle.js';
-export { LeafButton } from './field/leaves/Button.js';
 export { nodeIsTextNode } from './types.js';
 
 //# sourceMappingURL=index.js.map

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":"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"}

package/dist/scss/app.scss

@@ -1,10 +1,9 @@
-@import 'fonts';
 @import 'styles';
-@import './toastify.scss';
+@import './toasts.scss';
 @import './colors.scss';
 
 :root {
-  --base-px: 25;
+  --base-px: 20;
   --base-body-size: 13;
   --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
 
@@ -20,9 +19,10 @@
   --theme-overlay: rgba(5, 5, 5, 0.5);
   --theme-baseline: #{$baseline-px};
   --theme-baseline-body-size: #{$baseline-body-size};
-  --font-body: 'Suisse Intl', system-ui;
-  --font-mono: monospace;
-  --font-serif: 'Merriweather', serif;
+  --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};
@@ -38,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --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);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
@@ -68,12 +68,6 @@ html {
   @extend %body;
   background: var(--theme-bg);
   -webkit-font-smoothing: antialiased;
-  opacity: 0;
-
-  &[data-theme='dark'],
-  &[data-theme='light'] {
-    opacity: initial;
-  }
 
   &[data-theme='dark'] {
     --theme-bg: var(--theme-elevation-0);
@@ -112,12 +106,12 @@ body {
 }
 
 ::selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 
 ::-moz-selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 
@@ -152,13 +146,13 @@ h6 {
 }
 
 p {
-  margin: 0 0 $baseline;
+  margin: 0;
 }
 
 ul,
 ol {
   padding-left: $baseline;
-  margin: 0 0 $baseline;
+  margin: 0;
 }
 
 :focus-visible {

package/dist/scss/colors.scss

@@ -21,85 +21,85 @@
   --color-base-950: rgb(7, 7, 7);
   --color-base-1000: rgb(0, 0, 0);
 
-  --color-success-50: rgb(247, 255, 251);
-  --color-success-100: rgb(240, 255, 247);
-  --color-success-150: rgb(232, 255, 243);
-  --color-success-200: rgb(224, 255, 239);
-  --color-success-250: rgb(217, 255, 235);
-  --color-success-300: rgb(209, 255, 230);
-  --color-success-350: rgb(201, 255, 226);
-  --color-success-400: rgb(193, 255, 222);
-  --color-success-450: rgb(186, 255, 218);
-  --color-success-500: rgb(178, 255, 214);
-  --color-success-550: rgb(160, 230, 193);
-  --color-success-600: rgb(142, 204, 171);
-  --color-success-650: rgb(125, 179, 150);
-  --color-success-700: rgb(107, 153, 128);
-  --color-success-750: rgb(89, 128, 107);
-  --color-success-800: rgb(71, 102, 86);
-  --color-success-850: rgb(53, 77, 64);
-  --color-success-900: rgb(36, 51, 43);
-  --color-success-950: rgb(18, 25, 21);
+  --color-success-50: rgb(237, 245, 249);
+  --color-success-100: rgb(218, 237, 248);
+  --color-success-150: rgb(188, 225, 248);
+  --color-success-200: rgb(156, 216, 253);
+  --color-success-250: rgb(125, 204, 248);
+  --color-success-300: rgb(97, 190, 241);
+  --color-success-350: rgb(65, 178, 236);
+  --color-success-400: rgb(36, 164, 223);
+  --color-success-450: rgb(18, 148, 204);
+  --color-success-500: rgb(21, 135, 186);
+  --color-success-550: rgb(12, 121, 168);
+  --color-success-600: rgb(11, 110, 153);
+  --color-success-650: rgb(11, 97, 135);
+  --color-success-700: rgb(17, 88, 121);
+  --color-success-750: rgb(17, 76, 105);
+  --color-success-800: rgb(18, 66, 90);
+  --color-success-850: rgb(18, 56, 76);
+  --color-success-900: rgb(19, 44, 58);
+  --color-success-950: rgb(22, 33, 39);
 
-  --color-warning-50: rgb(255, 255, 246);
-  --color-warning-100: rgb(255, 255, 237);
-  --color-warning-150: rgb(254, 255, 228);
-  --color-warning-200: rgb(254, 255, 219);
-  --color-warning-250: rgb(254, 255, 210);
-  --color-warning-300: rgb(254, 255, 200);
-  --color-warning-350: rgb(254, 255, 191);
-  --color-warning-400: rgb(253, 255, 182);
-  --color-warning-450: rgb(253, 255, 173);
-  --color-warning-500: rgb(253, 255, 164);
-  --color-warning-550: rgb(228, 230, 148);
-  --color-warning-600: rgb(202, 204, 131);
-  --color-warning-650: rgb(177, 179, 115);
-  --color-warning-700: rgb(152, 153, 98);
-  --color-warning-750: rgb(127, 128, 82);
-  --color-warning-800: rgb(101, 102, 66);
-  --color-warning-850: rgb(76, 77, 49);
-  --color-warning-900: rgb(51, 51, 33);
-  --color-warning-950: rgb(25, 25, 16);
+  --color-error-50: rgb(250, 241, 240);
+  --color-error-100: rgb(252, 229, 227);
+  --color-error-150: rgb(247, 208, 204);
+  --color-error-200: rgb(254, 193, 188);
+  --color-error-250: rgb(253, 177, 170);
+  --color-error-300: rgb(253, 154, 146);
+  --color-error-350: rgb(253, 131, 123);
+  --color-error-400: rgb(246, 109, 103);
+  --color-error-450: rgb(234, 90, 86);
+  --color-error-500: rgb(218, 75, 72);
+  --color-error-550: rgb(200, 62, 61);
+  --color-error-600: rgb(182, 54, 54);
+  --color-error-650: rgb(161, 47, 47);
+  --color-error-700: rgb(144, 44, 43);
+  --color-error-750: rgb(123, 41, 39);
+  --color-error-800: rgb(105, 39, 37);
+  --color-error-850: rgb(86, 36, 33);
+  --color-error-900: rgb(64, 32, 29);
+  --color-error-950: rgb(44, 26, 24);
 
-  --color-error-50: rgb(255, 241, 241);
-  --color-error-100: rgb(255, 226, 228);
-  --color-error-150: rgb(255, 212, 214);
-  --color-error-200: rgb(255, 197, 200);
-  --color-error-250: rgb(255, 183, 187);
-  --color-error-300: rgb(255, 169, 173);
-  --color-error-350: rgb(255, 154, 159);
-  --color-error-400: rgb(255, 140, 145);
-  --color-error-450: rgb(255, 125, 132);
-  --color-error-500: rgb(255, 111, 118);
-  --color-error-550: rgb(230, 100, 106);
-  --color-error-600: rgb(204, 89, 94);
-  --color-error-650: rgb(179, 78, 83);
-  --color-error-700: rgb(153, 67, 71);
-  --color-error-750: rgb(128, 56, 59);
-  --color-error-800: rgb(102, 44, 47);
-  --color-error-850: rgb(77, 33, 35);
-  --color-error-900: rgb(51, 22, 24);
-  --color-error-950: rgb(25, 11, 12);
+  --color-warning-50: rgb(249, 242, 237);
+  --color-warning-100: rgb(248, 232, 219);
+  --color-warning-150: rgb(243, 212, 186);
+  --color-warning-200: rgb(243, 200, 162);
+  --color-warning-250: rgb(240, 185, 136);
+  --color-warning-300: rgb(238, 166, 98);
+  --color-warning-350: rgb(234, 148, 58);
+  --color-warning-400: rgb(223, 132, 17);
+  --color-warning-450: rgb(204, 120, 15);
+  --color-warning-500: rgb(185, 108, 13);
+  --color-warning-550: rgb(167, 97, 10);
+  --color-warning-600: rgb(150, 87, 11);
+  --color-warning-650: rgb(134, 78, 11);
+  --color-warning-700: rgb(120, 70, 13);
+  --color-warning-750: rgb(105, 61, 13);
+  --color-warning-800: rgb(90, 55, 19);
+  --color-warning-850: rgb(73, 47, 21);
+  --color-warning-900: rgb(56, 38, 20);
+  --color-warning-950: rgb(38, 29, 21);
 
-  --color-blue-50: rgb(230, 247, 253);
-  --color-blue-100: rgb(204, 238, 252);
-  --color-blue-150: rgb(179, 230, 250);
-  --color-blue-200: rgb(153, 221, 249);
-  --color-blue-250: rgb(128, 213, 247);
-  --color-blue-300: rgb(102, 204, 245);
-  --color-blue-350: rgb(77, 196, 244);
-  --color-blue-400: rgb(51, 187, 242);
-  --color-blue-450: rgb(25, 179, 241);
-  --color-blue-500: rgb(0, 170, 239);
-  --color-blue-550: rgb(0, 153, 215);
-  --color-blue-600: rgb(0, 136, 191);
-  --color-blue-650: rgb(0, 119, 167);
-  --color-blue-700: rgb(0, 102, 143);
-  --color-blue-750: rgb(0, 85, 120);
-  --color-blue-800: rgb(0, 68, 96);
-  --color-blue-850: rgb(0, 51, 72);
-  --color-blue-900: rgb(0, 34, 48);
-  --color-blue-950: rgb(0, 17, 24);
+  --color-blue-50: rgb(237, 245, 249);
+  --color-blue-100: rgb(218, 237, 248);
+  --color-blue-150: rgb(188, 225, 248);
+  --color-blue-200: rgb(156, 216, 253);
+  --color-blue-250: rgb(125, 204, 248);
+  --color-blue-300: rgb(97, 190, 241);
+  --color-blue-350: rgb(65, 178, 236);
+  --color-blue-400: rgb(36, 164, 223);
+  --color-blue-450: rgb(18, 148, 204);
+  --color-blue-500: rgb(21, 135, 186);
+  --color-blue-550: rgb(12, 121, 168);
+  --color-blue-600: rgb(11, 110, 153);
+  --color-blue-650: rgb(11, 97, 135);
+  --color-blue-700: rgb(17, 88, 121);
+  --color-blue-750: rgb(17, 76, 105);
+  --color-blue-800: rgb(18, 66, 90);
+  --color-blue-850: rgb(18, 56, 76);
+  --color-blue-900: rgb(19, 44, 58);
+  --color-blue-950: rgb(22, 33, 39);
 
   --theme-border-color: var(--theme-elevation-150);
 

package/dist/scss/toastify.scss

@@ -1,4 +1,5 @@
 @import 'vars';
+@import 'queries';
 
 .Toastify {
   .Toastify__toast-container {

package/dist/scss/toasts.scss

@@ -0,0 +1,142 @@
+@import './styles.scss';
+
+.payload-toast-container {
+  padding: 0;
+  margin: 0;
+
+  .payload-toast-close-button {
+    position: absolute;
+    order: 3;
+    left: unset;
+    inset-inline-end: base(0.8);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--theme-elevation-600);
+    background: unset;
+    border: none;
+
+    svg {
+      width: base(0.8);
+      height: base(0.8);
+    }
+
+    &:hover {
+      color: var(--theme-elevation-250);
+      background: none;
+    }
+
+    [dir='RTL'] & {
+      right: unset;
+      left: 0.5rem;
+    }
+  }
+
+  .toast-title {
+    line-height: base(1);
+    margin-right: base(1);
+  }
+
+  .payload-toast-item {
+    padding: base(0.8);
+    color: var(--theme-elevation-800);
+    font-style: normal;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid var(--theme-border-color);
+    background: var(--theme-input-bg);
+    box-shadow:
+      0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+      0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+    .toast-content {
+      transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      width: 100%;
+    }
+
+    &[data-front='false'] {
+      .toast-content {
+        opacity: 0;
+      }
+    }
+
+    &[data-expanded='true'] {
+      .toast-content {
+        opacity: 1;
+      }
+    }
+
+    .toast-icon {
+      width: base(0.8);
+      height: base(0.8);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > * {
+        width: base(1.2);
+        height: base(1.2);
+      }
+    }
+
+    &.toast-warning {
+      color: var(--theme-warning-800);
+      border-color: var(--theme-warning-250);
+      background-color: var(--theme-warning-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-warning-600);
+
+        &:hover {
+          color: var(--theme-warning-250);
+        }
+      }
+    }
+
+    &.toast-error {
+      color: var(--theme-error-800);
+      border-color: var(--theme-error-250);
+      background-color: var(--theme-error-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-error-600);
+
+        &:hover {
+          color: var(--theme-error-250);
+        }
+      }
+    }
+
+    &.toast-success {
+      color: var(--theme-success-800);
+      border-color: var(--theme-success-250);
+      background-color: var(--theme-success-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-success-600);
+
+        &:hover {
+          color: var(--theme-success-250);
+        }
+      }
+    }
+
+    &.toast-info {
+      color: var(--theme-elevation-800);
+      border-color: var(--theme-elevation-250);
+      background-color: var(--theme-elevation-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-elevation-600);
+
+        &:hover {
+          color: var(--theme-elevation-250);
+        }
+      }
+    }
+  }
+}