payload 1.3.4 → 1.4.0

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.js

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useModal } from '@faceless-ui/modal';
+import React, { useCallback, useReducer, useState } from 'react';
 import { Transforms } from 'slate';
 import { ReactEditor, useSlateStatic, useFocused, useSelected } from 'slate-react';
 import { useTranslation } from 'react-i18next';
@@ -8,69 +7,95 @@ import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
 import FileGraphic from '../../../../../../graphics/File';
 import useThumbnail from '../../../../../../../hooks/useThumbnail';
 import Button from '../../../../../../elements/Button';
-import { SwapUploadModal } from './SwapUploadModal';
-import { EditModal } from './EditModal';
 import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+import { useDocumentDrawer } from '../../../../../../elements/DocumentDrawer';
+import { useListDrawer } from '../../../../../../elements/ListDrawer';
 import './index.scss';
 const baseClass = 'rich-text-upload';
 const initialParams = {
     depth: 0,
 };
-const Element = ({ attributes, children, element, path, fieldProps }) => {
-    var _a, _b, _c, _d;
-    const { relationTo, value } = element;
-    const { toggleModal } = useModal();
+const Element = ({ attributes, children, element }) => {
+    var _a, _b, _c;
+    const { relationTo, value, fieldProps, } = element;
     const { collections, serverURL, routes: { api } } = useConfig();
-    const [modalToRender, setModalToRender] = useState(undefined);
-    const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
     const { t, i18n } = useTranslation('fields');
+    const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0);
+    const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
+    const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer, },] = useListDrawer({
+        uploads: true,
+        selectedCollection: relatedCollection.slug,
+    });
+    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer, },] = useDocumentDrawer({
+        collectionSlug: relatedCollection.slug,
+        id: value === null || value === void 0 ? void 0 : value.id,
+    });
     const editor = useSlateStatic();
     const selected = useSelected();
     const focused = useFocused();
-    const modalSlug = `${path}-edit-upload-${modalToRender}`;
     // Get the referenced document
-    const [{ data: upload }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
-    const thumbnailSRC = useThumbnail(relatedCollection, upload);
+    const [{ data }, { setParams }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
+    const thumbnailSRC = useThumbnail(relatedCollection, data);
     const removeUpload = useCallback(() => {
         const elementPath = ReactEditor.findPath(editor, element);
         Transforms.removeNodes(editor, { at: elementPath });
     }, [editor, element]);
-    const closeModal = useCallback(() => {
-        toggleModal(modalSlug);
-        setModalToRender(null);
-    }, [toggleModal, modalSlug]);
-    useEffect(() => {
-        if (modalToRender) {
-            toggleModal(modalSlug);
-        }
-    }, [modalToRender, toggleModal, modalSlug]);
-    const fieldSchema = (_d = (_c = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.upload) === null || _b === void 0 ? void 0 : _b.collections) === null || _c === void 0 ? void 0 : _c[relatedCollection.slug]) === null || _d === void 0 ? void 0 : _d.fields;
+    const updateUpload = useCallback((json) => {
+        const { doc } = json;
+        const newNode = {
+            fields: doc,
+        };
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.setNodes(editor, newNode, { at: elementPath });
+        // setRelatedCollection(collections.find((coll) => coll.slug === collectionConfig.slug));
+        setParams({
+            ...initialParams,
+            cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed
+        });
+        dispatchCacheBust();
+        closeDrawer();
+    }, [editor, element, setParams, cacheBust, closeDrawer]);
+    const swapUpload = React.useCallback(({ docID, collectionConfig }) => {
+        const newNode = {
+            type: 'upload',
+            value: { id: docID },
+            relationTo: collectionConfig.slug,
+            children: [
+                { text: ' ' },
+            ],
+        };
+        const elementPath = ReactEditor.findPath(editor, element);
+        setRelatedCollection(collections.find((coll) => coll.slug === collectionConfig.slug));
+        Transforms.setNodes(editor, newNode, { at: elementPath });
+        dispatchCacheBust();
+        closeListDrawer();
+    }, [closeListDrawer, editor, element, collections]);
     return (React.createElement("div", { className: [
             baseClass,
             (selected && focused) && `${baseClass}--selected`,
         ].filter(Boolean).join(' '), contentEditable: false, ...attributes },
         React.createElement("div", { className: `${baseClass}__card` },
             React.createElement("div", { className: `${baseClass}__topRow` },
-                React.createElement("div", { className: `${baseClass}__thumbnail` }, thumbnailSRC ? (React.createElement("img", { src: thumbnailSRC, alt: upload === null || upload === void 0 ? void 0 : upload.filename })) : (React.createElement(FileGraphic, null))),
+                React.createElement("div", { className: `${baseClass}__thumbnail` }, thumbnailSRC ? (React.createElement("img", { src: thumbnailSRC, alt: data === null || data === void 0 ? void 0 : data.filename })) : (React.createElement(FileGraphic, null))),
                 React.createElement("div", { className: `${baseClass}__topRowRightPanel` },
                     React.createElement("div", { className: `${baseClass}__collectionLabel` }, getTranslation(relatedCollection.labels.singular, i18n)),
                     React.createElement("div", { className: `${baseClass}__actions` },
-                        fieldSchema && (React.createElement(Button, { icon: "edit", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
-                                e.preventDefault();
-                                setModalToRender('edit');
-                            }, tooltip: t('general:edit') })),
-                        React.createElement(Button, { icon: "swap", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
-                                e.preventDefault();
-                                setModalToRender('swap');
-                            }, tooltip: t('swapUpload') }),
+                        (value === null || value === void 0 ? void 0 : value.id) && (React.createElement(DocumentDrawerToggler, { className: `${baseClass}__toggler` },
+                            React.createElement(Button, { icon: "edit", round: true, buttonStyle: "icon-label", el: "div", className: `${baseClass}__actionButton`, onClick: (e) => {
+                                    e.preventDefault();
+                                }, tooltip: t('general:editLabel', { label: relatedCollection.labels.singular }), disabled: (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.readOnly }))),
+                        React.createElement(ListDrawerToggler, null,
+                            React.createElement(Button, { icon: "swap", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: () => {
+                                    // do nothing
+                                }, el: "div", tooltip: t('swapUpload'), disabled: (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _b === void 0 ? void 0 : _b.readOnly })),
                         React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
                                 e.preventDefault();
                                 removeUpload();
-                            }, tooltip: t('removeUpload') })))),
+                            }, tooltip: t('removeUpload'), disabled: (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _c === void 0 ? void 0 : _c.readOnly })))),
             React.createElement("div", { className: `${baseClass}__bottomRow` },
-                React.createElement("strong", null, upload === null || upload === void 0 ? void 0 : upload.filename))),
+                React.createElement("strong", null, data === null || data === void 0 ? void 0 : data.filename))),
         children,
-        modalToRender === 'swap' && (React.createElement(SwapUploadModal, { slug: modalSlug, element: element, closeModal: closeModal, setRelatedCollectionConfig: setRelatedCollection, relatedCollectionConfig: relatedCollection })),
-        (modalToRender === 'edit' && fieldSchema) && (React.createElement(EditModal, { slug: modalSlug, closeModal: closeModal, relatedCollectionConfig: relatedCollection, fieldSchema: fieldSchema, element: element }))));
+        (value === null || value === void 0 ? void 0 : value.id) && (React.createElement(DocumentDrawer, { onSave: updateUpload })),
+        React.createElement(ListDrawer, { onSelect: swapUpload })));
 };
 export default Element;

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss

@@ -51,7 +51,7 @@
     flex-grow: 1;
     display: flex;
     align-items: center;
-    padding: base(.75) base(1);
+    padding: base(.75);
     justify-content: space-between;
     max-width: calc(100% - #{base(3.25)});
   }
@@ -60,19 +60,35 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    margin-left: base(0.5);
+
+    & > *:not(:last-child) {
+      margin-right: base(.25);
+    }
   }
 
   &__actionButton {
     margin: 0;
-    margin-right: base(.5);
     border-radius: 0;
+    flex-shrink: 0;
 
     line {
       stroke-width: $style-stroke-width-m;
     }
 
-    &:last-child {
-      margin-right: 0;
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  &__toggler {
+    background: transparent;
+    border: none;
+    padding: 0;
+    &:focus,
+    &:focus-within {
+      outline: none;
     }
   }
 

package/dist/admin/components/forms/field-types/RichText/elements/upload/index.d.ts

@@ -3,13 +3,12 @@ declare const _default: {
     Button: import("react").FC<{
         path: string;
     }>;
-    Element: ({ attributes, children, element, path, fieldProps }: {
-        attributes: any;
-        children: any;
+    Element: import("react").FC<{
+        attributes: import("react").HTMLAttributes<HTMLDivElement>;
+        children: import("react").ReactNode;
         element: any;
-        path: any;
-        fieldProps: any;
-    }) => JSX.Element;
+        fieldProps: import("../../types").Props;
+    }>;
     plugins: ((incomingEditor: any) => any)[];
 };
 export default _default;

package/dist/admin/components/forms/field-types/RichText/index.scss

@@ -150,10 +150,18 @@
     }
   }
 
+  &__drawerIsOpen {
+    top: base(1);
+  }
+
   @include mid-break {
     &__toolbar {
       top: base(3);
     }
+
+    &__drawerIsOpen {
+      top: base(1);
+    }
   }
 }
 

package/dist/admin/components/forms/field-types/RichText/types.d.ts

@@ -1,4 +1,13 @@
 import { RichTextField } from '../../../../../fields/config/types';
-export type Props = Omit<RichTextField, 'type'> & {
+export declare type Props = Omit<RichTextField, 'type'> & {
     path?: string;
 };
+export declare type TextNode = {
+    text: string;
+    [x: string]: unknown;
+};
+export declare type ElementNode = {
+    type?: string;
+    children: (TextNode | ElementNode)[];
+};
+export declare function nodeIsTextNode(node: TextNode | ElementNode): node is TextNode;

package/dist/admin/components/forms/field-types/RichText/types.js

@@ -1 +1,3 @@
-export {};
+export function nodeIsTextNode(node) {
+    return 'text' in node;
+}

package/dist/admin/components/forms/field-types/Row/types.d.ts

@@ -1,7 +1,7 @@
 import { RowField } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
 import { FieldPermissions } from '../../../../../auth/types';
-export type Props = Omit<RowField, 'type'> & {
+export declare type Props = Omit<RowField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;

package/dist/admin/components/forms/field-types/Select/Input.d.ts

@@ -3,7 +3,7 @@ import { OptionObject, SelectField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import { Option } from '../../../elements/ReactSelect/types';
 import './index.scss';
-export type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
+export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Select/types.d.ts

@@ -1,4 +1,4 @@
 import { SelectField } from '../../../../../fields/config/types';
-export type Props = Omit<SelectField, 'type'> & {
+export declare type Props = Omit<SelectField, 'type'> & {
     path?: string;
 };

package/dist/admin/components/forms/field-types/Tabs/index.js

@@ -28,7 +28,7 @@ const TabsField = (props) => {
             setActiveTabIndex(initialIndex || 0);
         };
         getInitialPref();
-    }, [path, indexPath]);
+    }, [path, indexPath, getPreference, preferencesKey, tabsPrefKey]);
     const handleTabChange = useCallback(async (incomingTabIndex) => {
         var _a, _b;
         setActiveTabIndex(incomingTabIndex);
@@ -49,11 +49,11 @@ const TabsField = (props) => {
                     [tabsPrefKey]: {
                         ...(_b = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _b === void 0 ? void 0 : _b[tabsPrefKey],
                         tabIndex: incomingTabIndex,
-                    }
+                    },
                 },
-            }
+            },
         });
-    }, [indexPath, preferencesKey, getPreference, setPreference, path]);
+    }, [preferencesKey, getPreference, setPreference, path, tabsPrefKey]);
     const activeTabConfig = tabs[activeTabIndex];
     return (React.createElement("div", { className: [
             className,
@@ -72,8 +72,8 @@ const TabsField = (props) => {
                 }))),
             React.createElement("div", { className: `${baseClass}__content-wrap` }, activeTabConfig && (React.createElement("div", { className: [
                     `${baseClass}__tab`,
-                    `${baseClass}__tab-${toKebabCase(activeTabConfig.label)}`,
-                ].join(' ') },
+                    activeTabConfig.label && `${baseClass}__tab-${toKebabCase(getTranslation(activeTabConfig.label, i18n))}`,
+                ].filter(Boolean).join(' ') },
                 React.createElement(FieldDescription, { className: `${baseClass}__description`, description: activeTabConfig.description }),
                 React.createElement(RenderFields, { key: String(activeTabConfig.label), forceRender: true, readOnly: readOnly, permissions: tabHasName(activeTabConfig) ? permissions[activeTabConfig.name].fields : permissions, fieldTypes: fieldTypes, fieldSchema: activeTabConfig.fields.map((field) => ({
                         ...field,

package/dist/admin/components/forms/field-types/Tabs/types.d.ts

@@ -1,7 +1,7 @@
 import { TabsField } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
 import { FieldPermissions } from '../../../../../auth/types';
-export type Props = Omit<TabsField, 'type'> & {
+export declare type Props = Omit<TabsField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;

package/dist/admin/components/forms/field-types/Text/Input.d.ts

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { TextField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import './index.scss';
-export type TextInputProps = Omit<TextField, 'type'> & {
+export declare type TextInputProps = Omit<TextField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Text/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextField } from '../../../../../fields/config/types';
-export type Props = Omit<TextField, 'type'> & {
+export declare type Props = Omit<TextField, 'type'> & {
     path?: string;
     inputRef?: React.MutableRefObject<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;

package/dist/admin/components/forms/field-types/Textarea/Input.d.ts

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { TextareaField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import './index.scss';
-export type TextAreaInputProps = Omit<TextareaField, 'type'> & {
+export declare type TextAreaInputProps = Omit<TextareaField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Textarea/types.d.ts

@@ -1,4 +1,4 @@
 import { TextareaField } from '../../../../../fields/config/types';
-export type Props = Omit<TextareaField, 'type'> & {
+export declare type Props = Omit<TextareaField, 'type'> & {
     path?: string;
 };

package/dist/admin/components/forms/field-types/Upload/Input.d.ts

@@ -4,7 +4,7 @@ import { Description } from '../../FieldDescription/types';
 import { FieldTypes } from '..';
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
 import './index.scss';
-export type UploadInputProps = Omit<UploadField, 'type'> & {
+export declare type UploadInputProps = Omit<UploadField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Upload/Input.js

@@ -1,27 +1,27 @@
-import React, { useEffect, useState } from 'react';
-import { useModal } from '@faceless-ui/modal';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from '../../../elements/Button';
 import Label from '../../Label';
 import Error from '../../Error';
 import FileDetails from '../../../elements/FileDetails';
 import FieldDescription from '../../FieldDescription';
-import AddModal from './Add';
-import SelectExistingModal from './SelectExisting';
-import { useEditDepth, EditDepthContext } from '../../../utilities/EditDepth';
 import { getTranslation } from '../../../../../utilities/getTranslation';
+import { useDocumentDrawer } from '../../../elements/DocumentDrawer';
+import { useListDrawer } from '../../../elements/ListDrawer';
+import Button from '../../../elements/Button';
 import './index.scss';
 const baseClass = 'upload';
 const UploadInput = (props) => {
-    const { path, required, readOnly, style, className, width, description, label, relationTo, fieldTypes, value, onChange, showError, serverURL = 'http://localhost:3000', api = '/api', collection, errorMessage, filterOptions, } = props;
-    const { toggleModal, modalState } = useModal();
+    const { path, required, readOnly, style, className, width, description, label, relationTo, value, onChange, showError, serverURL = 'http://localhost:3000', api = '/api', collection, errorMessage, } = props;
     const { t, i18n } = useTranslation('fields');
-    const editDepth = useEditDepth();
-    const addModalSlug = `${path}-add-depth-${editDepth}`;
-    const selectExistingModalSlug = `${path}-select-existing-depth-${editDepth}`;
     const [file, setFile] = useState(undefined);
     const [missingFile, setMissingFile] = useState(false);
-    const [modalToRender, setModalToRender] = useState();
+    const [collectionSlugs] = useState([collection === null || collection === void 0 ? void 0 : collection.slug]);
+    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer, },] = useDocumentDrawer({
+        collectionSlug: collectionSlugs[0],
+    });
+    const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer, },] = useListDrawer({
+        collectionSlugs,
+    });
     const classes = [
         'field-type',
         baseClass,
@@ -59,12 +59,18 @@ const UploadInput = (props) => {
         serverURL,
         i18n,
     ]);
-    useEffect(() => {
-        var _a, _b;
-        if (!((_a = modalState[addModalSlug]) === null || _a === void 0 ? void 0 : _a.isOpen) && !((_b = modalState[selectExistingModalSlug]) === null || _b === void 0 ? void 0 : _b.isOpen)) {
-            setModalToRender(undefined);
-        }
-    }, [modalState, addModalSlug, selectExistingModalSlug]);
+    const onSave = useCallback((args) => {
+        setMissingFile(false);
+        onChange(args.doc);
+        closeDrawer();
+    }, [onChange, closeDrawer]);
+    const onSelect = useCallback((args) => {
+        setMissingFile(false);
+        onChange({
+            id: args.docID,
+        });
+        closeListDrawer();
+    }, [onChange, closeListDrawer]);
     return (React.createElement("div", { className: classes, style: {
             ...style,
             width,
@@ -76,32 +82,13 @@ const UploadInput = (props) => {
                     onChange(null);
                 } })),
             (!file || missingFile) && (React.createElement("div", { className: `${baseClass}__wrap` },
-                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
-                        toggleModal(addModalSlug);
-                        setModalToRender(addModalSlug);
-                    } }, t('uploadNewLabel', { label: getTranslation(collection.labels.singular, i18n) })),
-                React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
-                        toggleModal(selectExistingModalSlug);
-                        setModalToRender(selectExistingModalSlug);
-                    } }, t('chooseFromExisting')))),
-            React.createElement(EditDepthContext.Provider, { value: editDepth + 1 },
-                modalToRender === addModalSlug && (React.createElement(AddModal, { ...{
-                        collection,
-                        slug: addModalSlug,
-                        fieldTypes,
-                        setValue: (e) => {
-                            setMissingFile(false);
-                            onChange(e);
-                        },
-                    } })),
-                modalToRender === selectExistingModalSlug && (React.createElement(SelectExistingModal, { ...{
-                        collection,
-                        slug: selectExistingModalSlug,
-                        setValue: onChange,
-                        addModalSlug,
-                        filterOptions,
-                        path,
-                    } }))),
-            React.createElement(FieldDescription, { value: file, description: description })))));
+                React.createElement("div", { className: `${baseClass}__buttons` },
+                    React.createElement(DocumentDrawerToggler, { className: `${baseClass}__toggler` },
+                        React.createElement(Button, { buttonStyle: "secondary", el: "div" }, t('uploadNewLabel', { label: getTranslation(collection.labels.singular, i18n) }))),
+                    React.createElement(ListDrawerToggler, { className: `${baseClass}__toggler` },
+                        React.createElement(Button, { buttonStyle: "secondary", el: "div" }, t('chooseFromExisting')))))),
+            React.createElement(FieldDescription, { value: file, description: description }))),
+        React.createElement(DocumentDrawer, { onSave: onSave }),
+        React.createElement(ListDrawer, { onSelect: onSelect })));
 };
 export default UploadInput;

package/dist/admin/components/forms/field-types/Upload/index.scss

@@ -5,26 +5,38 @@
   margin-bottom: $baseline;
 
   &__wrap {
-    display: flex;
-    padding: base(1.5) base(1.5) $baseline;
     background: var(--theme-elevation-50);
+    padding: base(1);
+  }
+
+  &__buttons {
+    margin: base(-0.25);
+    width: calc(100% + #{base(0.5)});
     flex-wrap: wrap;
+    display: flex;
+    align-items: center;
 
     .btn {
-      margin: 0 $baseline base(.5) 0;
-      min-width: base(7);
+      margin: 0
     }
   }
 
+  &__toggler {
+    margin: base(0.25);
+    min-width: base(7);
+  }
+
   @include mid-break {
     &__wrap {
+      padding: base(0.75);
+    }
+
+    &__buttons {
       display: block;
-      padding: $baseline $baseline base(.5);
+    }
 
-      .btn {
-        width: 100%;
-        min-width: initial;
-      }
+    &__toggler {
+      width: calc(100% - #{base(0.5)});
     }
   }
-}
+}

package/dist/admin/components/forms/field-types/Upload/types.d.ts

@@ -1,6 +1,6 @@
 import { UploadField } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
-export type Props = Omit<UploadField, 'type'> & {
+export declare type Props = Omit<UploadField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
 };

package/dist/admin/components/forms/field-types/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type FieldTypes = {
+export declare type FieldTypes = {
     code: React.ComponentType<any>;
     email: React.ComponentType<any>;
     hidden: React.ComponentType<any>;

package/dist/admin/components/forms/field-types/rowReducer.d.ts

@@ -1,9 +1,9 @@
-export type Row = {
+export declare type Row = {
     id: string;
     collapsed?: boolean;
     blockType?: string;
 };
-type SET_ALL = {
+declare type SET_ALL = {
     type: 'SET_ALL';
     data: {
         id?: string;
@@ -13,29 +13,29 @@ type SET_ALL = {
     blockType?: string;
     initCollapsed?: boolean;
 };
-type SET_COLLAPSE = {
+declare type SET_COLLAPSE = {
     type: 'SET_COLLAPSE';
     id: string;
     collapsed: boolean;
 };
-type SET_ALL_COLLAPSED = {
+declare type SET_ALL_COLLAPSED = {
     type: 'SET_ALL_COLLAPSED';
     collapse: boolean;
 };
-type ADD = {
+declare type ADD = {
     type: 'ADD';
     rowIndex: number;
     blockType?: string;
 };
-type REMOVE = {
+declare type REMOVE = {
     type: 'REMOVE';
     rowIndex: number;
 };
-type MOVE = {
+declare type MOVE = {
     type: 'MOVE';
     moveFromIndex: number;
     moveToIndex: number;
 };
-type Action = SET_ALL | SET_COLLAPSE | SET_ALL_COLLAPSED | ADD | REMOVE | MOVE;
+declare type Action = SET_ALL | SET_COLLAPSE | SET_ALL_COLLAPSED | ADD | REMOVE | MOVE;
 declare const reducer: (currentState: Row[], action: Action) => Row[];
 export default reducer;

package/dist/admin/components/forms/useField/types.d.ts

@@ -1,11 +1,11 @@
 import { Condition, Validate } from '../../../../fields/config/types';
-export type Options = {
+export declare type Options = {
     path: string;
     validate?: Validate;
     disableFormData?: boolean;
     condition?: Condition;
 };
-export type FieldType<T> = {
+export declare type FieldType<T> = {
     value: T;
     errorMessage?: string;
     showError: boolean;

package/dist/admin/components/modals/StayLoggedIn/types.d.ts

@@ -1,3 +1,3 @@
-export type Props = {
+export declare type Props = {
     refreshCookie: () => void;
 };

package/dist/admin/components/templates/Default/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type Props = {
+export declare type Props = {
     className?: string;
     children?: React.ReactNode;
 };

package/dist/admin/components/templates/Minimal/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type Props = {
+export declare type Props = {
     className?: string;
     width?: 'normal' | 'wide';
     style?: React.CSSProperties;

package/dist/admin/components/utilities/Auth/index.d.ts

@@ -4,6 +4,6 @@ import { AuthContext } from './types';
 export declare const AuthProvider: React.FC<{
     children: React.ReactNode;
 }>;
-type UseAuth<T = User> = () => AuthContext<T>;
+declare type UseAuth<T = User> = () => AuthContext<T>;
 export declare const useAuth: UseAuth;
 export {};