@payloadcms/richtext-slate 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/field/elements/link/LinkDrawer/index.js

@@ -1,58 +1,64 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, Form, FormSubmit, RenderFields, useConfig, useDocumentInfo, useEditDepth, useFieldProps, useHotkey, useTranslation } from '@payloadcms/ui';
-import { getFormState } from '@payloadcms/ui/shared';
+import { Drawer, EditDepthProvider, Form, FormSubmit, RenderFields, useDocumentInfo, useEditDepth, useHotkey, useServerFunctions, useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useRef } from 'react';
 import { linkFieldsSchemaPath } from '../shared.js';
 import './index.scss';
 const baseClass = 'rich-text-link-edit-modal';
-export const LinkDrawer = ({ drawerSlug, fields, handleModalSubmit, initialState })=>{
+export const LinkDrawer = ({ drawerSlug, fields, handleModalSubmit, initialState, schemaPath })=>{
     const { t } = useTranslation();
-    const { schemaPath } = useFieldProps();
     const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`;
-    const { id } = useDocumentInfo();
-    const { config } = useConfig();
+    const { id, collectionSlug, docPermissions, getDocPreferences, globalSlug } = useDocumentInfo();
+    const { getFormState } = useServerFunctions();
     const onChange = useCallback(async ({ formState: prevFormState })=>{
-        return await getFormState({
-            apiRoute: config.routes.api,
-            body: {
-                id,
-                formState: prevFormState,
-                operation: 'update',
-                schemaPath: fieldMapPath
-            },
-            serverURL: config.serverURL
+        const { state } = await getFormState({
+            id,
+            collectionSlug,
+            docPermissions,
+            docPreferences: await getDocPreferences(),
+            formState: prevFormState,
+            globalSlug,
+            operation: 'update',
+            schemaPath: fieldMapPath ?? ''
         });
+        return state;
     }, [
-        config.routes.api,
-        config.serverURL,
-        fieldMapPath,
-        id
+        getFormState,
+        id,
+        collectionSlug,
+        getDocPreferences,
+        docPermissions,
+        globalSlug,
+        fieldMapPath
     ]);
-    return /*#__PURE__*/ _jsx(Drawer, {
-        className: baseClass,
-        slug: drawerSlug,
-        title: t('fields:editLink'),
-        children: /*#__PURE__*/ _jsxs(Form, {
-            beforeSubmit: [
-                onChange
-            ],
-            disableValidationOnSubmit: true,
-            initialState: initialState,
-            onChange: [
-                onChange
-            ],
-            onSubmit: handleModalSubmit,
-            children: [
-                /*#__PURE__*/ _jsx(RenderFields, {
-                    fields: fields,
-                    forceRender: true,
-                    path: "",
-                    readOnly: false,
-                    schemaPath: ""
-                }),
-                /*#__PURE__*/ _jsx(LinkSubmit, {})
-            ]
+    return /*#__PURE__*/ _jsx(EditDepthProvider, {
+        children: /*#__PURE__*/ _jsx(Drawer, {
+            className: baseClass,
+            slug: drawerSlug,
+            title: t('fields:editLink'),
+            children: /*#__PURE__*/ _jsxs(Form, {
+                beforeSubmit: [
+                    onChange
+                ],
+                disableValidationOnSubmit: true,
+                initialState: initialState,
+                onChange: [
+                    onChange
+                ],
+                onSubmit: handleModalSubmit,
+                children: [
+                    /*#__PURE__*/ _jsx(RenderFields, {
+                        fields: fields,
+                        forceRender: true,
+                        parentIndexPath: "",
+                        parentPath: '',
+                        parentSchemaPath: "",
+                        permissions: docPermissions.fields,
+                        readOnly: false
+                    }),
+                    /*#__PURE__*/ _jsx(LinkSubmit, {})
+                ]
+            })
         })
     });
 };

package/dist/field/elements/link/LinkDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Drawer,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useConfig,\n  useDocumentInfo,\n  useEditDepth,\n  useFieldProps,\n  useHotkey,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React, { useCallback, useRef } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link-edit-modal'\n\nexport const LinkDrawer: React.FC<Props> = ({\n  drawerSlug,\n  fields,\n  handleModalSubmit,\n  initialState,\n}) => {\n  const { t } = useTranslation()\n  const { schemaPath } = useFieldProps()\n  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n  const { id } = useDocumentInfo()\n  const { config } = useConfig()\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      return await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: fieldMapPath,\n        },\n        serverURL: config.serverURL,\n      })\n    },\n\n    [config.routes.api, config.serverURL, fieldMapPath, id],\n  )\n\n  return (\n    <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>\n      <Form\n        beforeSubmit={[onChange]}\n        disableValidationOnSubmit\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={handleModalSubmit}\n      >\n        <RenderFields fields={fields} forceRender path=\"\" readOnly={false} schemaPath=\"\" />\n        <LinkSubmit />\n      </Form>\n    </Drawer>\n  )\n}\n\nconst LinkSubmit: React.FC = () => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLButtonElement>(null)\n  const editDepth = useEditDepth()\n\n  useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (ref?.current) {\n      ref.current.click()\n    }\n  })\n\n  return <FormSubmit ref={ref}>{t('general:submit')}</FormSubmit>\n}\n"],"names":["Drawer","Form","FormSubmit","RenderFields","useConfig","useDocumentInfo","useEditDepth","useFieldProps","useHotkey","useTranslation","getFormState","React","useCallback","useRef","linkFieldsSchemaPath","baseClass","LinkDrawer","drawerSlug","fields","handleModalSubmit","initialState","t","schemaPath","fieldMapPath","id","config","onChange","formState","prevFormState","apiRoute","routes","api","body","operation","serverURL","className","slug","title","beforeSubmit","disableValidationOnSubmit","onSubmit","forceRender","path","readOnly","LinkSubmit","ref","editDepth","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click"],"mappings":"AAAA;;AAIA,SACEA,MAAM,EACNC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,SAAS,EACTC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAIlD,SAASC,oBAAoB,QAAQ,eAAc;AACnD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAA8B,CAAC,EAC1CC,UAAU,EACVC,MAAM,EACNC,iBAAiB,EACjBC,YAAY,EACb;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IACd,MAAM,EAAEa,UAAU,EAAE,GAAGf;IACvB,MAAMgB,eAAe,CAAC,EAAED,WAAW,CAAC,EAAER,qBAAqB,CAAC;IAC5D,MAAM,EAAEU,EAAE,EAAE,GAAGnB;IACf,MAAM,EAAEoB,MAAM,EAAE,GAAGrB;IAEnB,MAAMsB,WAAqCd,YACzC,OAAO,EAAEe,WAAWC,aAAa,EAAE;QACjC,OAAO,MAAMlB,aAAa;YACxBmB,UAAUJ,OAAOK,MAAM,CAACC,GAAG;YAC3BC,MAAM;gBACJR;gBACAG,WAAWC;gBACXK,WAAW;gBACXX,YAAYC;YACd;YACAW,WAAWT,OAAOS,SAAS;QAC7B;IACF,GAEA;QAACT,OAAOK,MAAM,CAACC,GAAG;QAAEN,OAAOS,SAAS;QAAEX;QAAcC;KAAG;IAGzD,qBACE,KAACxB;QAAOmC,WAAWpB;QAAWqB,MAAMnB;QAAYoB,OAAOhB,EAAE;kBACvD,cAAA,MAACpB;YACCqC,cAAc;gBAACZ;aAAS;YACxBa,yBAAyB;YACzBnB,cAAcA;YACdM,UAAU;gBAACA;aAAS;YACpBc,UAAUrB;;8BAEV,KAAChB;oBAAae,QAAQA;oBAAQuB,WAAW;oBAACC,MAAK;oBAAGC,UAAU;oBAAOrB,YAAW;;8BAC9E,KAACsB;;;;AAIT,EAAC;AAED,MAAMA,aAAuB;IAC3B,MAAM,EAAEvB,CAAC,EAAE,GAAGZ;IACd,MAAMoC,MAAMhC,OAA0B;IACtC,MAAMiC,YAAYxC;IAElBE,UAAU;QAAEuC,YAAY;QAAMD;QAAWE,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3DA,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIN,KAAKO,SAAS;YAChBP,IAAIO,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBAAO,KAACnD;QAAW2C,KAAKA;kBAAMxB,EAAE;;AAClC"}
+{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Drawer,\n  EditDepthProvider,\n  Form,\n  FormSubmit,\n  RenderFields,\n  useDocumentInfo,\n  useEditDepth,\n  useHotkey,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useRef } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { linkFieldsSchemaPath } from '../shared.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-link-edit-modal'\n\nexport const LinkDrawer: React.FC<Props> = ({\n  drawerSlug,\n  fields,\n  handleModalSubmit,\n  initialState,\n  schemaPath,\n}) => {\n  const { t } = useTranslation()\n  const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`\n\n  const { id, collectionSlug, docPermissions, getDocPreferences, globalSlug } = useDocumentInfo()\n\n  const { getFormState } = useServerFunctions()\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions,\n        docPreferences: await getDocPreferences(),\n        formState: prevFormState,\n        globalSlug,\n        operation: 'update',\n        schemaPath: fieldMapPath ?? '',\n      })\n\n      return state\n    },\n\n    [getFormState, id, collectionSlug, getDocPreferences, docPermissions, globalSlug, fieldMapPath],\n  )\n\n  return (\n    <EditDepthProvider>\n      <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>\n        <Form\n          beforeSubmit={[onChange]}\n          disableValidationOnSubmit\n          initialState={initialState}\n          onChange={[onChange]}\n          onSubmit={handleModalSubmit}\n        >\n          <RenderFields\n            fields={fields}\n            forceRender\n            parentIndexPath=\"\"\n            parentPath={''}\n            parentSchemaPath=\"\"\n            permissions={docPermissions.fields}\n            readOnly={false}\n          />\n          <LinkSubmit />\n        </Form>\n      </Drawer>\n    </EditDepthProvider>\n  )\n}\n\nconst LinkSubmit: React.FC = () => {\n  const { t } = useTranslation()\n  const ref = useRef<HTMLButtonElement>(null)\n  const editDepth = useEditDepth()\n\n  useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n    e.preventDefault()\n    e.stopPropagation()\n    if (ref?.current) {\n      ref.current.click()\n    }\n  })\n\n  return <FormSubmit ref={ref}>{t('general:submit')}</FormSubmit>\n}\n"],"names":["Drawer","EditDepthProvider","Form","FormSubmit","RenderFields","useDocumentInfo","useEditDepth","useHotkey","useServerFunctions","useTranslation","React","useCallback","useRef","linkFieldsSchemaPath","baseClass","LinkDrawer","drawerSlug","fields","handleModalSubmit","initialState","schemaPath","t","fieldMapPath","id","collectionSlug","docPermissions","getDocPreferences","globalSlug","getFormState","onChange","formState","prevFormState","state","docPreferences","operation","className","slug","title","beforeSubmit","disableValidationOnSubmit","onSubmit","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly","LinkSubmit","ref","editDepth","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click"],"mappings":"AAAA;;AAIA,SACEA,MAAM,EACNC,iBAAiB,EACjBC,IAAI,EACJC,UAAU,EACVC,YAAY,EACZC,eAAe,EACfC,YAAY,EACZC,SAAS,EACTC,kBAAkB,EAClBC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAO;AAIlD,SAASC,oBAAoB,QAAQ,eAAc;AACnD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,aAA8B,CAAC,EAC1CC,UAAU,EACVC,MAAM,EACNC,iBAAiB,EACjBC,YAAY,EACZC,UAAU,EACX;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IACd,MAAMa,eAAe,CAAC,EAAEF,WAAW,CAAC,EAAEP,qBAAqB,CAAC;IAE5D,MAAM,EAAEU,EAAE,EAAEC,cAAc,EAAEC,cAAc,EAAEC,iBAAiB,EAAEC,UAAU,EAAE,GAAGtB;IAE9E,MAAM,EAAEuB,YAAY,EAAE,GAAGpB;IAEzB,MAAMqB,WAAqClB,YACzC,OAAO,EAAEmB,WAAWC,aAAa,EAAE;QACjC,MAAM,EAAEC,KAAK,EAAE,GAAG,MAAMJ,aAAa;YACnCL;YACAC;YACAC;YACAQ,gBAAgB,MAAMP;YACtBI,WAAWC;YACXJ;YACAO,WAAW;YACXd,YAAYE,gBAAgB;QAC9B;QAEA,OAAOU;IACT,GAEA;QAACJ;QAAcL;QAAIC;QAAgBE;QAAmBD;QAAgBE;QAAYL;KAAa;IAGjG,qBACE,KAACrB;kBACC,cAAA,KAACD;YAAOmC,WAAWrB;YAAWsB,MAAMpB;YAAYqB,OAAOhB,EAAE;sBACvD,cAAA,MAACnB;gBACCoC,cAAc;oBAACT;iBAAS;gBACxBU,yBAAyB;gBACzBpB,cAAcA;gBACdU,UAAU;oBAACA;iBAAS;gBACpBW,UAAUtB;;kCAEV,KAACd;wBACCa,QAAQA;wBACRwB,WAAW;wBACXC,iBAAgB;wBAChBC,YAAY;wBACZC,kBAAiB;wBACjBC,aAAapB,eAAeR,MAAM;wBAClC6B,UAAU;;kCAEZ,KAACC;;;;;AAKX,EAAC;AAED,MAAMA,aAAuB;IAC3B,MAAM,EAAE1B,CAAC,EAAE,GAAGZ;IACd,MAAMuC,MAAMpC,OAA0B;IACtC,MAAMqC,YAAY3C;IAElBC,UAAU;QAAE2C,YAAY;QAAMD;QAAWE,UAAU;YAAC;SAAI;IAAC,GAAG,CAACC;QAC3DA,EAAEC,cAAc;QAChBD,EAAEE,eAAe;QACjB,IAAIN,KAAKO,SAAS;YAChBP,IAAIO,OAAO,CAACC,KAAK;QACnB;IACF;IAEA,qBAAO,KAACrD;QAAW6C,KAAKA;kBAAM3B,EAAE;;AAClC"}

package/dist/field/elements/link/LinkDrawer/index.scss

@@ -1,49 +1,51 @@
 @import '../../../../scss/styles.scss';
 
-.rich-text-link-edit-modal {
-  &__template {
-    position: relative;
-    z-index: 1;
-    padding-top: base(1);
-    padding-bottom: base(2);
-  }
+@layer payload-default {
+  .rich-text-link-edit-modal {
+    &__template {
+      position: relative;
+      z-index: 1;
+      padding-top: base(1);
+      padding-bottom: base(2);
+    }
 
-  &__header {
-    width: 100%;
-    margin-bottom: $baseline;
-    display: flex;
-    justify-content: space-between;
-    margin-top: base(2.5);
-    margin-bottom: base(1);
+    &__header {
+      width: 100%;
+      margin-bottom: $baseline;
+      display: flex;
+      justify-content: space-between;
+      margin-top: base(2.5);
+      margin-bottom: base(1);
 
-    @include mid-break {
-      margin-top: base(1.5);
+      @include mid-break {
+        margin-top: base(1.5);
+      }
     }
-  }
 
-  &__header-text {
-    margin: 0;
-  }
+    &__header-text {
+      margin: 0;
+    }
 
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(1);
-    height: base(1);
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
 
-    svg {
-      width: base(2);
-      height: base(2);
-      position: relative;
-      inset-inline-start: base(-0.5);
-      top: base(-0.5);
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
 
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
       }
     }
   }

package/dist/field/elements/link/LinkDrawer/types.d.ts

@@ -5,5 +5,6 @@ export type Props = {
     readonly handleClose: () => void;
     readonly handleModalSubmit: (fields: FormState, data: Record<string, unknown>) => void;
     readonly initialState?: FormState;
+    readonly schemaPath: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/field/elements/link/LinkDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/LinkDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAErD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IACtF,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAClC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/link/LinkDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAErD,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAA;IAChC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IACtF,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA"}

package/dist/field/elements/link/LinkDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/types.ts"],"sourcesContent":["import type { ClientField, FormState } from 'payload'\n\nexport type Props = {\n  readonly drawerSlug: string\n  readonly fields: ClientField[]\n  readonly handleClose: () => void\n  readonly handleModalSubmit: (fields: FormState, data: Record<string, unknown>) => void\n  readonly initialState?: FormState\n}\n"],"names":[],"mappings":"AAEA,WAMC"}
+{"version":3,"sources":["../../../../../src/field/elements/link/LinkDrawer/types.ts"],"sourcesContent":["import type { ClientField, FormState } from 'payload'\n\nexport type Props = {\n  readonly drawerSlug: string\n  readonly fields: ClientField[]\n  readonly handleClose: () => void\n  readonly handleModalSubmit: (fields: FormState, data: Record<string, unknown>) => void\n  readonly initialState?: FormState\n  readonly schemaPath: string\n}\n"],"names":[],"mappings":"AAEA,WAOC"}

package/dist/field/elements/ol/index.scss

@@ -1,7 +1,9 @@
 @import '../../../scss/styles.scss';
 
-.rich-text-ol {
-  &[data-slate-node='element'] {
-    margin: base(0.625) 0;
+@layer payload-default {
+  .rich-text-ol {
+    &[data-slate-node='element'] {
+      margin: base(0.625) 0;
+    }
   }
 }

package/dist/field/elements/relationship/Button/index.scss

@@ -1,7 +1,9 @@
 @import '../../../../scss/styles.scss';
 
-.relationship-rich-text-button {
-  display: flex;
-  align-items: center;
-  height: 100%;
+@layer payload-default {
+  .relationship-rich-text-button {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
 }

package/dist/field/elements/relationship/Element/index.d.ts

@@ -1,10 +1,4 @@
-import type { FormFieldBase, MappedComponent } from 'payload';
 import React from 'react';
 import './index.scss';
-type Props = {
-    name: string;
-    richTextComponentMap: Map<string, MappedComponent>;
-} & FormFieldBase;
-export declare const RelationshipElement: (props: Props) => React.ReactNode;
-export {};
+export declare const RelationshipElement: (props: any) => React.ReactNode;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/elements/relationship/Element/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAW7D,OAAO,KAA4C,MAAM,OAAO,CAAA;AAQhE,OAAO,cAAc,CAAA;AAQrB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;CACnD,GAAG,aAAa,CAAA;AAoKjB,eAAO,MAAM,mBAAmB,UAAW,KAAK,KAAG,KAAK,CAAC,SAMxD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAQhE,OAAO,cAAc,CAAA;AA0KrB,eAAO,MAAM,mBAAmB,UAAW,GAAG,KAAG,KAAK,CAAC,SAMtD,CAAA"}

package/dist/field/elements/relationship/Element/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase, MappedComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  useConfig,\n  useDocumentDrawer,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { RelationshipElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\ntype Props = {\n  name: string\n  richTextComponentMap: Map<string, MappedComponent>\n} & FormFieldBase\n\nconst RelationshipElementComponent: React.FC<Props> = () => {\n  const {\n    attributes,\n    children,\n    element,\n    element: { relationTo, value },\n    fieldProps,\n  } = useElement<RelationshipElementType>()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const [enabledCollectionSlugs] = useState(() =>\n    collections\n      .filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship)\n      .map(({ slug }) => slug),\n  )\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const selected = useSelected()\n  const focused = useFocused()\n  const { i18n, t } = useTranslation()\n  const editor = useSlateStatic()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: relatedCollection.slug,\n          value: { id: doc.id },\n        },\n        { at: elementPath },\n      )\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeDrawer()\n      dispatchCacheBust()\n    },\n    [editor, element, relatedCollection, cacheBust, setParams, closeDrawer],\n  )\n\n  const swapRelationship = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: collectionSlug,\n          value: { id: docID },\n        },\n        { at: elementPath },\n      )\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeListDrawer()\n      dispatchCacheBust()\n    },\n    [closeListDrawer, editor, element, cacheBust, setParams, collections],\n  )\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data[relatedCollection?.admin?.useAsTitle || 'id']}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <ListDrawerToggler\n          className={`${baseClass}__list-drawer-toggler`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n        >\n          <Button\n            buttonStyle=\"icon-label\"\n            disabled={fieldProps?.field?.admin?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              // do nothing\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n        </ListDrawerToggler>\n        <Button\n          buttonStyle=\"icon-label\"\n          className={`${baseClass}__removeButton`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n          icon=\"x\"\n          onClick={(e) => {\n            e.preventDefault()\n            removeRelationship()\n          }}\n          round\n          tooltip={t('fields:removeRelationship')}\n        />\n      </div>\n      {value?.id && <DocumentDrawer onSave={updateRelationship} />}\n      <ListDrawer onSelect={swapRelationship} />\n      {children}\n    </div>\n  )\n}\n\nexport const RelationshipElement = (props: Props): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipElementComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","useConfig","useDocumentDrawer","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","baseClass","initialParams","depth","RelationshipElementComponent","attributes","children","element","relationTo","value","fieldProps","config","collections","routes","api","serverURL","enabledCollectionSlugs","filter","admin","enableRichTextRelationship","map","slug","relatedCollection","setRelatedCollection","find","coll","selected","focused","i18n","t","editor","cacheBust","dispatchCacheBust","state","data","setParams","id","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","collectionSlugs","selectedCollection","removeRelationship","elementPath","findPath","removeNodes","at","updateRelationship","doc","setNodes","type","text","swapRelationship","docID","div","className","Boolean","join","contentEditable","p","label","labels","singular","useAsTitle","disabled","field","readOnly","buttonStyle","el","icon","onClick","round","tooltip","e","preventDefault","onSave","onSelect","RelationshipElement","props"],"mappings":"AAAA;;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SACEC,MAAM,EACNC,SAAS,EACTC,iBAAiB,EACjBC,aAAa,EACbC,aAAa,EACbC,cAAc,QACT,iBAAgB;AACvB,OAAOC,SAASC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAO;AAChE,SAASC,UAAU,QAAQ,QAAO;AAClC,SAASC,WAAW,EAAEC,UAAU,EAAEC,WAAW,EAAEC,cAAc,QAAQ,cAAa;AAIlF,SAASC,UAAU,QAAQ,wCAAuC;AAClE,SAASC,6BAA6B,QAAQ,yCAAwC;AACtF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,gBAAgB;IACpBC,OAAO;AACT;AAOA,MAAMC,+BAAgD;IACpD,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,OAAO,EACPA,SAAS,EAAEC,UAAU,EAAEC,KAAK,EAAE,EAC9BC,UAAU,EACX,GAAGX;IAEJ,MAAM,EACJY,QAAQ,EACNC,WAAW,EACXC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,EACF,GAAG9B;IACJ,MAAM,CAAC+B,uBAAuB,GAAGvB,SAAS,IACxCmB,YACGK,MAAM,CAAC,CAAC,EAAEC,OAAO,EAAEC,0BAA0B,EAAE,EAAE,GAAKA,4BACtDC,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKA;IAEvB,MAAM,CAACC,mBAAmBC,qBAAqB,GAAG9B,SAAS,IACzDmB,YAAYY,IAAI,CAAC,CAACC,OAASA,KAAKJ,IAAI,KAAKb;IAG3C,MAAMkB,WAAW7B;IACjB,MAAM8B,UAAU/B;IAChB,MAAM,EAAEgC,IAAI,EAAEC,CAAC,EAAE,GAAGxC;IACpB,MAAMyC,SAAShC;IACf,MAAM,CAACiC,WAAWC,kBAAkB,GAAGxC,WAAW,CAACyC,QAAUA,QAAQ,GAAG;IACxE,MAAM,CAAC,EAAEC,IAAI,EAAE,EAAE,EAAEC,SAAS,EAAE,CAAC,GAAG/C,cAChC,CAAC,EAAE2B,UAAU,EAAED,IAAI,CAAC,EAAEQ,kBAAkBD,IAAI,CAAC,CAAC,EAAEZ,OAAO2B,GAAG,CAAC,EAC3D;QAAElC;IAAc;IAGlB,MAAM,CAACmC,gBAAgBC,uBAAuB,EAAEC,WAAW,EAAE,CAAC,GAAGrD,kBAAkB;QACjFkD,IAAI3B,OAAO2B;QACXI,gBAAgBlB,kBAAkBD,IAAI;IACxC;IAEA,MAAM,CAACoB,YAAYC,mBAAmB,EAAEH,aAAaI,eAAe,EAAE,CAAC,GAAGxD,cAAc;QACtFyD,iBAAiB5B;QACjB6B,oBAAoBvB,kBAAkBD,IAAI;IAC5C;IAEA,MAAMyB,qBAAqBvD,YAAY;QACrC,MAAMwD,cAAcpD,YAAYqD,QAAQ,CAAClB,QAAQvB;QAEjDb,WAAWuD,WAAW,CAACnB,QAAQ;YAAEoB,IAAIH;QAAY;IACnD,GAAG;QAACjB;QAAQvB;KAAQ;IAEpB,MAAM4C,qBAAqB7D,MAAMC,WAAW,CAC1C,CAAC,EAAE6D,GAAG,EAAE;QACN,MAAML,cAAcpD,YAAYqD,QAAQ,CAAClB,QAAQvB;QAEjDb,WAAW2D,QAAQ,CACjBvB,QACA;YACEwB,MAAM;YACNhD,UAAU;gBAAC;oBAAEiD,MAAM;gBAAI;aAAE;YACzB/C,YAAYc,kBAAkBD,IAAI;YAClCZ,OAAO;gBAAE2B,IAAIgB,IAAIhB,EAAE;YAAC;QACtB,GACA;YAAEc,IAAIH;QAAY;QAGpBZ,UAAU;YACR,GAAGjC,aAAa;YAChB6B;QACF;QAEAQ;QACAP;IACF,GACA;QAACF;QAAQvB;QAASe;QAAmBS;QAAWI;QAAWI;KAAY;IAGzE,MAAMiB,mBAAmBlE,MAAMC,WAAW,CACxC,CAAC,EAAEiD,cAAc,EAAEiB,KAAK,EAAE;QACxB,MAAMV,cAAcpD,YAAYqD,QAAQ,CAAClB,QAAQvB;QAEjDb,WAAW2D,QAAQ,CACjBvB,QACA;YACEwB,MAAM;YACNhD,UAAU;gBAAC;oBAAEiD,MAAM;gBAAI;aAAE;YACzB/C,YAAYgC;YACZ/B,OAAO;gBAAE2B,IAAIqB;YAAM;QACrB,GACA;YAAEP,IAAIH;QAAY;QAGpBxB,qBAAqBX,YAAYY,IAAI,CAAC,CAACC,OAASA,KAAKJ,IAAI,KAAKmB;QAE9DL,UAAU;YACR,GAAGjC,aAAa;YAChB6B;QACF;QAEAY;QACAX;IACF,GACA;QAACW;QAAiBb;QAAQvB;QAASwB;QAAWI;QAAWvB;KAAY;IAGvE,qBACE,MAAC8C;QACCC,WAAW;YAAC1D;YAAWyB,YAAYC,WAAW,CAAC,EAAE1B,UAAU,UAAU,CAAC;SAAC,CACpEgB,MAAM,CAAC2C,SACPC,IAAI,CAAC;QACRC,iBAAiB;QAChB,GAAGzD,UAAU;;0BAEd,MAACqD;gBAAIC,WAAW,CAAC,EAAE1D,UAAU,MAAM,CAAC;;kCAClC,KAAC8D;wBAAEJ,WAAW,CAAC,EAAE1D,UAAU,OAAO,CAAC;kCAChC4B,EAAE,4BAA4B;4BAC7BmC,OAAOjF,eAAeuC,kBAAkB2C,MAAM,CAACC,QAAQ,EAAEtC;wBAC3D;;kCAEF,KAACU;wBAAsBqB,WAAW,CAAC,EAAE1D,UAAU,oBAAoB,CAAC;kCAClE,cAAA,KAAC8D;4BAAEJ,WAAW,CAAC,EAAE1D,UAAU,OAAO,CAAC;sCAChCiC,IAAI,CAACZ,mBAAmBJ,OAAOiD,cAAc,KAAK;;;;;0BAIzD,MAACT;gBAAIC,WAAW,CAAC,EAAE1D,UAAU,SAAS,CAAC;;kCACrC,KAACyC;wBACCiB,WAAW,CAAC,EAAE1D,UAAU,qBAAqB,CAAC;wBAC9CmE,UAAU1D,YAAY2D,OAAOnD,OAAOoD;kCAEpC,cAAA,KAACtF;4BACCuF,aAAY;4BACZH,UAAU1D,YAAY2D,OAAOnD,OAAOoD;4BACpCE,IAAG;4BACHC,MAAK;4BACLC,SAAS;4BACP,aAAa;4BACf;4BACAC,KAAK;4BACLC,SAAS/C,EAAE;;;kCAGf,KAAC7C;wBACCuF,aAAY;wBACZZ,WAAW,CAAC,EAAE1D,UAAU,cAAc,CAAC;wBACvCmE,UAAU1D,YAAY2D,OAAOnD,OAAOoD;wBACpCG,MAAK;wBACLC,SAAS,CAACG;4BACRA,EAAEC,cAAc;4BAChBhC;wBACF;wBACA6B,KAAK;wBACLC,SAAS/C,EAAE;;;;YAGdpB,OAAO2B,oBAAM,KAACC;gBAAe0C,QAAQ5B;;0BACtC,KAACV;gBAAWuC,UAAUxB;;YACrBlD;;;AAGP;AAEA,OAAO,MAAM2E,sBAAsB,CAACC;IAClC,qBACE,KAAClF;QAA+B,GAAGkF,KAAK;kBACtC,cAAA,KAAC9E;YAA8B,GAAG8E,KAAK;;;AAG7C,EAAC"}
+{"version":3,"sources":["../../../../../src/field/elements/relationship/Element/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  useConfig,\n  useDocumentDrawer,\n  useListDrawer,\n  usePayloadAPI,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useReducer, useState } from 'react'\nimport { Transforms } from 'slate'\nimport { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'\n\nimport type { RelationshipElementType } from '../types.js'\n\nimport { useElement } from '../../../providers/ElementProvider.js'\nimport { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition.js'\nimport './index.scss'\n\nconst baseClass = 'rich-text-relationship'\n\nconst initialParams = {\n  depth: 0,\n}\n\nconst RelationshipElementComponent: React.FC = () => {\n  const {\n    attributes,\n    children,\n    element,\n    element: { relationTo, value },\n    fieldProps,\n  } = useElement<RelationshipElementType>()\n\n  const {\n    config: {\n      collections,\n      routes: { api },\n      serverURL,\n    },\n  } = useConfig()\n  const [enabledCollectionSlugs] = useState(() =>\n    collections\n      .filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship)\n      .map(({ slug }) => slug),\n  )\n  const [relatedCollection, setRelatedCollection] = useState(() =>\n    collections.find((coll) => coll.slug === relationTo),\n  )\n\n  const selected = useSelected()\n  const focused = useFocused()\n  const { i18n, t } = useTranslation()\n  const editor = useSlateStatic()\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)\n  const [{ data }, { setParams }] = usePayloadAPI(\n    `${serverURL}${api}/${relatedCollection.slug}/${value?.id}`,\n    { initialParams },\n  )\n\n  const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({\n    id: value?.id,\n    collectionSlug: relatedCollection.slug,\n  })\n\n  const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer }] = useListDrawer({\n    collectionSlugs: enabledCollectionSlugs,\n    selectedCollection: relatedCollection.slug,\n  })\n\n  const removeRelationship = useCallback(() => {\n    const elementPath = ReactEditor.findPath(editor, element)\n\n    Transforms.removeNodes(editor, { at: elementPath })\n  }, [editor, element])\n\n  const updateRelationship = React.useCallback(\n    ({ doc }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: relatedCollection.slug,\n          value: { id: doc.id },\n        },\n        { at: elementPath },\n      )\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeDrawer()\n      dispatchCacheBust()\n    },\n    [editor, element, relatedCollection, cacheBust, setParams, closeDrawer],\n  )\n\n  const swapRelationship = React.useCallback(\n    ({ collectionSlug, docID }) => {\n      const elementPath = ReactEditor.findPath(editor, element)\n\n      Transforms.setNodes(\n        editor,\n        {\n          type: 'relationship',\n          children: [{ text: ' ' }],\n          relationTo: collectionSlug,\n          value: { id: docID },\n        },\n        { at: elementPath },\n      )\n\n      setRelatedCollection(collections.find((coll) => coll.slug === collectionSlug))\n\n      setParams({\n        ...initialParams,\n        cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed\n      })\n\n      closeListDrawer()\n      dispatchCacheBust()\n    },\n    [closeListDrawer, editor, element, cacheBust, setParams, collections],\n  )\n\n  return (\n    <div\n      className={[baseClass, selected && focused && `${baseClass}--selected`]\n        .filter(Boolean)\n        .join(' ')}\n      contentEditable={false}\n      {...attributes}\n    >\n      <div className={`${baseClass}__wrap`}>\n        <p className={`${baseClass}__label`}>\n          {t('fields:labelRelationship', {\n            label: getTranslation(relatedCollection.labels.singular, i18n),\n          })}\n        </p>\n        <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>\n          <p className={`${baseClass}__title`}>\n            {data[relatedCollection?.admin?.useAsTitle || 'id']}\n          </p>\n        </DocumentDrawerToggler>\n      </div>\n      <div className={`${baseClass}__actions`}>\n        <ListDrawerToggler\n          className={`${baseClass}__list-drawer-toggler`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n        >\n          <Button\n            buttonStyle=\"icon-label\"\n            disabled={fieldProps?.field?.admin?.readOnly}\n            el=\"div\"\n            icon=\"swap\"\n            onClick={() => {\n              // do nothing\n            }}\n            round\n            tooltip={t('fields:swapRelationship')}\n          />\n        </ListDrawerToggler>\n        <Button\n          buttonStyle=\"icon-label\"\n          className={`${baseClass}__removeButton`}\n          disabled={fieldProps?.field?.admin?.readOnly}\n          icon=\"x\"\n          onClick={(e) => {\n            e.preventDefault()\n            removeRelationship()\n          }}\n          round\n          tooltip={t('fields:removeRelationship')}\n        />\n      </div>\n      {value?.id && <DocumentDrawer onSave={updateRelationship} />}\n      <ListDrawer onSelect={swapRelationship} />\n      {children}\n    </div>\n  )\n}\n\nexport const RelationshipElement = (props: any): React.ReactNode => {\n  return (\n    <EnabledRelationshipsCondition {...props}>\n      <RelationshipElementComponent {...props} />\n    </EnabledRelationshipsCondition>\n  )\n}\n"],"names":["getTranslation","Button","useConfig","useDocumentDrawer","useListDrawer","usePayloadAPI","useTranslation","React","useCallback","useReducer","useState","Transforms","ReactEditor","useFocused","useSelected","useSlateStatic","useElement","EnabledRelationshipsCondition","baseClass","initialParams","depth","RelationshipElementComponent","attributes","children","element","relationTo","value","fieldProps","config","collections","routes","api","serverURL","enabledCollectionSlugs","filter","admin","enableRichTextRelationship","map","slug","relatedCollection","setRelatedCollection","find","coll","selected","focused","i18n","t","editor","cacheBust","dispatchCacheBust","state","data","setParams","id","DocumentDrawer","DocumentDrawerToggler","closeDrawer","collectionSlug","ListDrawer","ListDrawerToggler","closeListDrawer","collectionSlugs","selectedCollection","removeRelationship","elementPath","findPath","removeNodes","at","updateRelationship","doc","setNodes","type","text","swapRelationship","docID","div","className","Boolean","join","contentEditable","p","label","labels","singular","useAsTitle","disabled","field","readOnly","buttonStyle","el","icon","onClick","round","tooltip","e","preventDefault","onSave","onSelect","RelationshipElement","props"],"mappings":"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"}

package/dist/field/elements/relationship/Element/index.scss

@@ -1,93 +1,95 @@
 @import '../../../../scss/styles.scss';
 
-.rich-text-relationship {
-  @extend %body;
-  @include shadow-sm;
-  padding: base(0.75);
-  display: flex;
-  align-items: center;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-elevation-100);
-  max-width: base(15);
-  font-family: var(--font-body);
-
-  &:hover {
-    border: 1px solid var(--theme-elevation-150);
-  }
-
-  &[data-slate-node='element'] {
-    margin: base(0.625) 0;
-  }
-
-  &__label {
-    margin-bottom: base(0.25);
-  }
-
-  &__title {
-    margin: 0;
-  }
+@layer payload-default {
+  .rich-text-relationship {
+    @extend %body;
+    @include shadow-sm;
+    padding: base(0.75);
+    display: flex;
+    align-items: center;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-elevation-100);
+    max-width: base(15);
+    font-family: var(--font-body);
 
-  &__label,
-  &__title {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    line-height: 1 !important;
-  }
+    &:hover {
+      border: 1px solid var(--theme-elevation-150);
+    }
 
-  &__title {
-    font-weight: bold;
-  }
+    &[data-slate-node='element'] {
+      margin: base(0.625) 0;
+    }
 
-  &__wrap {
-    flex-grow: 1;
-    overflow: hidden;
-  }
+    &__label {
+      margin-bottom: base(0.25);
+    }
 
-  &--selected {
-    box-shadow: $focus-box-shadow;
-    outline: none;
-  }
+    &__title {
+      margin: 0;
+    }
 
-  .rich-text-relationship__doc-drawer-toggler {
-    text-decoration: underline;
-    pointer-events: all;
-    line-height: inherit;
-  }
+    &__label,
+    &__title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 1 !important;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-left: base(0.5);
+    &__title {
+      font-weight: bold;
+    }
 
-    & > *:not(:last-child) {
-      margin-right: base(0.25);
+    &__wrap {
+      flex-grow: 1;
+      overflow: hidden;
     }
-  }
 
-  &__removeButton {
-    margin: 0;
+    &--selected {
+      box-shadow: $focus-box-shadow;
+      outline: none;
+    }
 
-    line {
-      stroke-width: $style-stroke-width-m;
+    .rich-text-relationship__doc-drawer-toggler {
+      text-decoration: underline;
+      pointer-events: all;
+      line-height: inherit;
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: base(0.5);
+
+      & > *:not(:last-child) {
+        margin-right: base(0.25);
+      }
     }
-  }
 
-  &__doc-drawer-toggler,
-  &__list-drawer-toggler {
-    & > * {
+    &__removeButton {
       margin: 0;
+
+      line {
+        stroke-width: $style-stroke-width-m;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
     }
 
-    &:disabled {
-      color: var(--theme-elevation-300);
-      pointer-events: none;
+    &__doc-drawer-toggler,
+    &__list-drawer-toggler {
+      & > * {
+        margin: 0;
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
     }
   }
 }

package/dist/field/elements/toggleList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggleList.d.ts","sourceRoot":"","sources":["../../../src/field/elements/toggleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmC,MAAM,OAAO,CAAA;AAQ/D,eAAO,MAAM,UAAU,WAAY,MAAM,UAAU,MAAM,KAAG,IAyF3D,CAAA"}
+{"version":3,"file":"toggleList.d.ts","sourceRoot":"","sources":["../../../src/field/elements/toggleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAmC,MAAM,OAAO,CAAA;AAQ/D,eAAO,MAAM,UAAU,WAAY,MAAM,UAAU,MAAM,KAAG,IA6F3D,CAAA"}

package/dist/field/elements/toggleList.js

@@ -6,8 +6,12 @@ import { listTypes } from './listTypes.js';
 import { unwrapList } from './unwrapList.js';
 export const toggleList = (editor, format)=>{
     let currentListFormat;
-    if (isListActive(editor, 'ol')) currentListFormat = 'ol';
-    if (isListActive(editor, 'ul')) currentListFormat = 'ul';
+    if (isListActive(editor, 'ol')) {
+        currentListFormat = 'ol';
+    }
+    if (isListActive(editor, 'ul')) {
+        currentListFormat = 'ul';
+    }
     // If the format is currently active,
     // remove the list
     if (currentListFormat === format) {

package/dist/field/elements/toggleList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/elements/toggleList.tsx"],"sourcesContent":["import { Editor, Element, Node, Text, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { getCommonBlock } from './getCommonBlock.js'\nimport { isListActive } from './isListActive.js'\nimport { listTypes } from './listTypes.js'\nimport { unwrapList } from './unwrapList.js'\n\nexport const toggleList = (editor: Editor, format: string): void => {\n  let currentListFormat: string\n\n  if (isListActive(editor, 'ol')) currentListFormat = 'ol'\n  if (isListActive(editor, 'ul')) currentListFormat = 'ul'\n\n  // If the format is currently active,\n  // remove the list\n  if (currentListFormat === format) {\n    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n    // If on an empty bullet, leave the above list alone\n    // and unwrap only the active bullet\n    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n      Transforms.unwrapNodes(editor, {\n        match: (n) => Element.isElement(n) && listTypes.includes(n.type),\n        mode: 'lowest',\n        split: true,\n      })\n\n      Transforms.setNodes(editor, { type: undefined })\n    } else {\n      // Otherwise, we need to unset li on all lis in the parent list\n      // and unwrap the parent list itself\n      const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format)\n      unwrapList(editor, listPath)\n    }\n\n    // Otherwise, if a list is active and we are changing it,\n    // change it\n  } else if (currentListFormat && currentListFormat !== format) {\n    Transforms.setNodes(\n      editor,\n      {\n        type: format,\n      },\n      {\n        match: (node) => Element.isElement(node) && listTypes.includes(node.type),\n        mode: 'lowest',\n      },\n    )\n    // Otherwise we can assume that we should just activate the list\n  } else {\n    Transforms.wrapNodes(editor, { type: format, children: [] })\n\n    const [, parentNodePath] = getCommonBlock(\n      editor,\n      (node) => Element.isElement(node) && node.type === format,\n    )\n\n    // Only set li on nodes that don't have type\n    Transforms.setNodes(\n      editor,\n      { type: 'li' },\n      {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type === 'undefined' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n        voids: true,\n      },\n    )\n\n    // Wrap nodes that do have a type with an li\n    // so as to not lose their existing formatting\n    const nodesToWrap = Array.from(\n      Editor.nodes(editor, {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type !== 'undefined' &&\n            node.type !== 'li' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n      }),\n    )\n\n    nodesToWrap.forEach(([, path]) => {\n      Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })\n    })\n  }\n\n  ReactEditor.focus(editor)\n}\n"],"names":["Editor","Element","Node","Text","Transforms","ReactEditor","getCommonBlock","isListActive","listTypes","unwrapList","toggleList","editor","format","currentListFormat","selectedLeaf","descendant","selection","anchor","path","isText","String","text","length","unwrapNodes","match","n","isElement","includes","type","mode","split","setNodes","undefined","listPath","node","wrapNodes","children","parentNodePath","voids","nodesToWrap","Array","from","nodes","forEach","at","focus"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,QAAO;AAC/D,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,YAAY,QAAQ,oBAAmB;AAChD,SAASC,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMC,aAAa,CAACC,QAAgBC;IACzC,IAAIC;IAEJ,IAAIN,aAAaI,QAAQ,OAAOE,oBAAoB;IACpD,IAAIN,aAAaI,QAAQ,OAAOE,oBAAoB;IAEpD,qCAAqC;IACrC,kBAAkB;IAClB,IAAIA,sBAAsBD,QAAQ;QAChC,MAAME,eAAeZ,KAAKa,UAAU,CAACJ,QAAQA,OAAOK,SAAS,CAACC,MAAM,CAACC,IAAI;QAEzE,oDAAoD;QACpD,oCAAoC;QACpC,IAAIf,KAAKgB,MAAM,CAACL,iBAAiBM,OAAON,aAAaO,IAAI,EAAEC,MAAM,KAAK,GAAG;YACvElB,WAAWmB,WAAW,CAACZ,QAAQ;gBAC7Ba,OAAO,CAACC,IAAMxB,QAAQyB,SAAS,CAACD,MAAMjB,UAAUmB,QAAQ,CAACF,EAAEG,IAAI;gBAC/DC,MAAM;gBACNC,OAAO;YACT;YAEA1B,WAAW2B,QAAQ,CAACpB,QAAQ;gBAAEiB,MAAMI;YAAU;QAChD,OAAO;YACL,+DAA+D;YAC/D,oCAAoC;YACpC,MAAM,GAAGC,SAAS,GAAG3B,eAAeK,QAAQ,CAACc,IAAMxB,QAAQyB,SAAS,CAACD,MAAMA,EAAEG,IAAI,KAAKhB;YACtFH,WAAWE,QAAQsB;QACrB;IAEA,yDAAyD;IACzD,YAAY;IACd,OAAO,IAAIpB,qBAAqBA,sBAAsBD,QAAQ;QAC5DR,WAAW2B,QAAQ,CACjBpB,QACA;YACEiB,MAAMhB;QACR,GACA;YACEY,OAAO,CAACU,OAASjC,QAAQyB,SAAS,CAACQ,SAAS1B,UAAUmB,QAAQ,CAACO,KAAKN,IAAI;YACxEC,MAAM;QACR;IAEF,gEAAgE;IAClE,OAAO;QACLzB,WAAW+B,SAAS,CAACxB,QAAQ;YAAEiB,MAAMhB;YAAQwB,UAAU,EAAE;QAAC;QAE1D,MAAM,GAAGC,eAAe,GAAG/B,eACzBK,QACA,CAACuB,OAASjC,QAAQyB,SAAS,CAACQ,SAASA,KAAKN,IAAI,KAAKhB;QAGrD,4CAA4C;QAC5CR,WAAW2B,QAAQ,CACjBpB,QACA;YAAEiB,MAAM;QAAK,GACb;YACEJ,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;YACAc,OAAO;QACT;QAGF,4CAA4C;QAC5C,8CAA8C;QAC9C,MAAMC,cAAcC,MAAMC,IAAI,CAC5BzC,OAAO0C,KAAK,CAAC/B,QAAQ;YACnBa,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBM,KAAKN,IAAI,KAAK,QACdV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;QACF;QAGFe,YAAYI,OAAO,CAAC,CAAC,GAAGzB,KAAK;YAC3Bd,WAAW+B,SAAS,CAACxB,QAAQ;gBAAEiB,MAAM;gBAAMQ,UAAU,EAAE;YAAC,GAAG;gBAAEQ,IAAI1B;YAAK;QACxE;IACF;IAEAb,YAAYwC,KAAK,CAAClC;AACpB,EAAC"}
+{"version":3,"sources":["../../../src/field/elements/toggleList.tsx"],"sourcesContent":["import { Editor, Element, Node, Text, Transforms } from 'slate'\nimport { ReactEditor } from 'slate-react'\n\nimport { getCommonBlock } from './getCommonBlock.js'\nimport { isListActive } from './isListActive.js'\nimport { listTypes } from './listTypes.js'\nimport { unwrapList } from './unwrapList.js'\n\nexport const toggleList = (editor: Editor, format: string): void => {\n  let currentListFormat: string\n\n  if (isListActive(editor, 'ol')) {\n    currentListFormat = 'ol'\n  }\n  if (isListActive(editor, 'ul')) {\n    currentListFormat = 'ul'\n  }\n\n  // If the format is currently active,\n  // remove the list\n  if (currentListFormat === format) {\n    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path)\n\n    // If on an empty bullet, leave the above list alone\n    // and unwrap only the active bullet\n    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {\n      Transforms.unwrapNodes(editor, {\n        match: (n) => Element.isElement(n) && listTypes.includes(n.type),\n        mode: 'lowest',\n        split: true,\n      })\n\n      Transforms.setNodes(editor, { type: undefined })\n    } else {\n      // Otherwise, we need to unset li on all lis in the parent list\n      // and unwrap the parent list itself\n      const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format)\n      unwrapList(editor, listPath)\n    }\n\n    // Otherwise, if a list is active and we are changing it,\n    // change it\n  } else if (currentListFormat && currentListFormat !== format) {\n    Transforms.setNodes(\n      editor,\n      {\n        type: format,\n      },\n      {\n        match: (node) => Element.isElement(node) && listTypes.includes(node.type),\n        mode: 'lowest',\n      },\n    )\n    // Otherwise we can assume that we should just activate the list\n  } else {\n    Transforms.wrapNodes(editor, { type: format, children: [] })\n\n    const [, parentNodePath] = getCommonBlock(\n      editor,\n      (node) => Element.isElement(node) && node.type === format,\n    )\n\n    // Only set li on nodes that don't have type\n    Transforms.setNodes(\n      editor,\n      { type: 'li' },\n      {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type === 'undefined' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n        voids: true,\n      },\n    )\n\n    // Wrap nodes that do have a type with an li\n    // so as to not lose their existing formatting\n    const nodesToWrap = Array.from(\n      Editor.nodes(editor, {\n        match: (node, path) => {\n          const match =\n            Element.isElement(node) &&\n            typeof node.type !== 'undefined' &&\n            node.type !== 'li' &&\n            path.length === parentNodePath.length + 1\n\n          return match\n        },\n      }),\n    )\n\n    nodesToWrap.forEach(([, path]) => {\n      Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })\n    })\n  }\n\n  ReactEditor.focus(editor)\n}\n"],"names":["Editor","Element","Node","Text","Transforms","ReactEditor","getCommonBlock","isListActive","listTypes","unwrapList","toggleList","editor","format","currentListFormat","selectedLeaf","descendant","selection","anchor","path","isText","String","text","length","unwrapNodes","match","n","isElement","includes","type","mode","split","setNodes","undefined","listPath","node","wrapNodes","children","parentNodePath","voids","nodesToWrap","Array","from","nodes","forEach","at","focus"],"mappings":"AAAA,SAASA,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,QAAO;AAC/D,SAASC,WAAW,QAAQ,cAAa;AAEzC,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,YAAY,QAAQ,oBAAmB;AAChD,SAASC,SAAS,QAAQ,iBAAgB;AAC1C,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMC,aAAa,CAACC,QAAgBC;IACzC,IAAIC;IAEJ,IAAIN,aAAaI,QAAQ,OAAO;QAC9BE,oBAAoB;IACtB;IACA,IAAIN,aAAaI,QAAQ,OAAO;QAC9BE,oBAAoB;IACtB;IAEA,qCAAqC;IACrC,kBAAkB;IAClB,IAAIA,sBAAsBD,QAAQ;QAChC,MAAME,eAAeZ,KAAKa,UAAU,CAACJ,QAAQA,OAAOK,SAAS,CAACC,MAAM,CAACC,IAAI;QAEzE,oDAAoD;QACpD,oCAAoC;QACpC,IAAIf,KAAKgB,MAAM,CAACL,iBAAiBM,OAAON,aAAaO,IAAI,EAAEC,MAAM,KAAK,GAAG;YACvElB,WAAWmB,WAAW,CAACZ,QAAQ;gBAC7Ba,OAAO,CAACC,IAAMxB,QAAQyB,SAAS,CAACD,MAAMjB,UAAUmB,QAAQ,CAACF,EAAEG,IAAI;gBAC/DC,MAAM;gBACNC,OAAO;YACT;YAEA1B,WAAW2B,QAAQ,CAACpB,QAAQ;gBAAEiB,MAAMI;YAAU;QAChD,OAAO;YACL,+DAA+D;YAC/D,oCAAoC;YACpC,MAAM,GAAGC,SAAS,GAAG3B,eAAeK,QAAQ,CAACc,IAAMxB,QAAQyB,SAAS,CAACD,MAAMA,EAAEG,IAAI,KAAKhB;YACtFH,WAAWE,QAAQsB;QACrB;IAEA,yDAAyD;IACzD,YAAY;IACd,OAAO,IAAIpB,qBAAqBA,sBAAsBD,QAAQ;QAC5DR,WAAW2B,QAAQ,CACjBpB,QACA;YACEiB,MAAMhB;QACR,GACA;YACEY,OAAO,CAACU,OAASjC,QAAQyB,SAAS,CAACQ,SAAS1B,UAAUmB,QAAQ,CAACO,KAAKN,IAAI;YACxEC,MAAM;QACR;IAEF,gEAAgE;IAClE,OAAO;QACLzB,WAAW+B,SAAS,CAACxB,QAAQ;YAAEiB,MAAMhB;YAAQwB,UAAU,EAAE;QAAC;QAE1D,MAAM,GAAGC,eAAe,GAAG/B,eACzBK,QACA,CAACuB,OAASjC,QAAQyB,SAAS,CAACQ,SAASA,KAAKN,IAAI,KAAKhB;QAGrD,4CAA4C;QAC5CR,WAAW2B,QAAQ,CACjBpB,QACA;YAAEiB,MAAM;QAAK,GACb;YACEJ,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;YACAc,OAAO;QACT;QAGF,4CAA4C;QAC5C,8CAA8C;QAC9C,MAAMC,cAAcC,MAAMC,IAAI,CAC5BzC,OAAO0C,KAAK,CAAC/B,QAAQ;YACnBa,OAAO,CAACU,MAAMhB;gBACZ,MAAMM,QACJvB,QAAQyB,SAAS,CAACQ,SAClB,OAAOA,KAAKN,IAAI,KAAK,eACrBM,KAAKN,IAAI,KAAK,QACdV,KAAKI,MAAM,KAAKe,eAAef,MAAM,GAAG;gBAE1C,OAAOE;YACT;QACF;QAGFe,YAAYI,OAAO,CAAC,CAAC,GAAGzB,KAAK;YAC3Bd,WAAW+B,SAAS,CAACxB,QAAQ;gBAAEiB,MAAM;gBAAMQ,UAAU,EAAE;YAAC,GAAG;gBAAEQ,IAAI1B;YAAK;QACxE;IACF;IAEAb,YAAYwC,KAAK,CAAClC;AACpB,EAAC"}

package/dist/field/elements/ul/index.scss

@@ -1,7 +1,9 @@
 @import '../../../scss/styles.scss';
 
-.rich-text-ul {
-  &[data-slate-node='element'] {
-    margin: base(0.625) 0;
+@layer payload-default {
+  .rich-text-ul {
+    &[data-slate-node='element'] {
+      margin: base(0.625) 0;
+    }
   }
 }

package/dist/field/elements/upload/Button/index.scss

@@ -1,7 +1,9 @@
 @import '../../../../scss/styles.scss';
 
-.upload-rich-text-button {
-  display: flex;
-  align-items: center;
-  height: 100%;
+@layer payload-default {
+  .upload-rich-text-button {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
 }

package/dist/field/elements/upload/Element/UploadDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiBrD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAA;IACnC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,sBAAsB,CAAA;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CA2GA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/field/elements/upload/Element/UploadDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiBrD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAI/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAIvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,iBAAiB,CAAA;IACnC,QAAQ,CAAC,UAAU,EAAE,qBAAqB,CAAA;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,sBAAsB,CAAA;IAClD,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CA6HA,CAAA"}