payload 1.2.4 → 1.2.5

package/dist/admin/components/elements/DuplicateDocument/index.js

@@ -1,134 +1,134 @@
-import React, { useCallback, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { useTranslation } from 'react-i18next';
-import { useConfig } from '../../utilities/Config';
-import Button from '../Button';
-import { requests } from '../../../api';
-import { useForm, useFormModified } from '../../forms/Form/context';
-import MinimalTemplate from '../../templates/Minimal';
-import { getTranslation } from '../../../../utilities/getTranslation';
-import './index.scss';
-const baseClass = 'duplicate';
-const Duplicate = ({ slug, collection, id }) => {
-    const { push } = useHistory();
-    const modified = useFormModified();
-    const { toggleModal } = useModal();
-    const { setModified } = useForm();
-    const { serverURL, routes: { api }, localization } = useConfig();
-    const { routes: { admin } } = useConfig();
-    const [hasClicked, setHasClicked] = useState(false);
-    const { t, i18n } = useTranslation('general');
-    const modalSlug = `duplicate-${id}`;
-    const handleClick = useCallback(async (override = false) => {
-        setHasClicked(true);
-        if (modified && !override) {
-            toggleModal(modalSlug);
-            return;
-        }
-        const create = async (locale = '') => {
-            var _a;
-            const response = await requests.get(`${serverURL}${api}/${slug}/${id}`, {
-                params: {
-                    locale,
-                    depth: 0,
-                },
-                headers: {
-                    'Accept-Language': i18n.language,
-                },
-            });
-            let data = await response.json();
-            if (typeof ((_a = collection.admin.hooks) === null || _a === void 0 ? void 0 : _a.beforeDuplicate) === 'function') {
-                data = await collection.admin.hooks.beforeDuplicate({
-                    data,
-                    locale,
-                });
-            }
-            const result = await requests.post(`${serverURL}${api}/${slug}`, {
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Accept-Language': i18n.language,
-                },
-                body: JSON.stringify(data),
-            });
-            const json = await result.json();
-            if (result.status === 201) {
-                return json.doc.id;
-            }
-            json.errors.forEach((error) => toast.error(error.message));
-            return null;
-        };
-        let duplicateID;
-        if (localization) {
-            duplicateID = await create(localization.defaultLocale);
-            let abort = false;
-            localization.locales
-                .filter((locale) => locale !== localization.defaultLocale)
-                .forEach(async (locale) => {
-                var _a;
-                if (!abort) {
-                    const res = await requests.get(`${serverURL}${api}/${slug}/${id}`, {
-                        params: {
-                            locale,
-                            depth: 0,
-                        },
-                        headers: {
-                            'Accept-Language': i18n.language,
-                        },
-                    });
-                    let localizedDoc = await res.json();
-                    if (typeof ((_a = collection.admin.hooks) === null || _a === void 0 ? void 0 : _a.beforeDuplicate) === 'function') {
-                        localizedDoc = await collection.admin.hooks.beforeDuplicate({
-                            data: localizedDoc,
-                            locale,
-                        });
-                    }
-                    const patchResult = await requests.patch(`${serverURL}${api}/${slug}/${duplicateID}?locale=${locale}`, {
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Accept-Language': i18n.language,
-                        },
-                        body: JSON.stringify(localizedDoc),
-                    });
-                    if (patchResult.status > 400) {
-                        abort = true;
-                        const json = await patchResult.json();
-                        json.errors.forEach((error) => toast.error(error.message));
-                    }
-                }
-            });
-            if (abort) {
-                // delete the duplicate doc to prevent incomplete
-                await requests.delete(`${serverURL}${api}/${slug}/${id}`, {
-                    headers: {
-                        'Accept-Language': i18n.language,
-                    },
-                });
-            }
-        }
-        else {
-            duplicateID = await create();
-        }
-        toast.success(t('successfullyDuplicated', { label: getTranslation(collection.labels.singular, i18n) }), { autoClose: 3000 });
-        setModified(false);
-        setTimeout(() => {
-            push({
-                pathname: `${admin}/collections/${slug}/${duplicateID}`,
-            });
-        }, 10);
-    }, [modified, localization, t, i18n, collection, setModified, toggleModal, modalSlug, serverURL, api, slug, id, push, admin]);
-    const confirm = useCallback(async () => {
-        setHasClicked(false);
-        await handleClick(true);
-    }, [handleClick]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { id: "action-duplicate", buttonStyle: "none", className: baseClass, onClick: () => handleClick(false) }, t('duplicate')),
-        modified && hasClicked && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
-            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
-                React.createElement("h1", null, t('confirmDuplication')),
-                React.createElement("p", null, t('unsavedChangesDuplicate')),
-                React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: () => toggleModal(modalSlug) }, t('cancel')),
-                React.createElement(Button, { onClick: confirm, id: "confirm-duplicate" }, t('duplicateWithoutSaving')))))));
-};
-export default Duplicate;
+import React, { useCallback, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '../../utilities/Config';
+import Button from '../Button';
+import { requests } from '../../../api';
+import { useForm, useFormModified } from '../../forms/Form/context';
+import MinimalTemplate from '../../templates/Minimal';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import './index.scss';
+const baseClass = 'duplicate';
+const Duplicate = ({ slug, collection, id }) => {
+    const { push } = useHistory();
+    const modified = useFormModified();
+    const { toggleModal } = useModal();
+    const { setModified } = useForm();
+    const { serverURL, routes: { api }, localization } = useConfig();
+    const { routes: { admin } } = useConfig();
+    const [hasClicked, setHasClicked] = useState(false);
+    const { t, i18n } = useTranslation('general');
+    const modalSlug = `duplicate-${id}`;
+    const handleClick = useCallback(async (override = false) => {
+        setHasClicked(true);
+        if (modified && !override) {
+            toggleModal(modalSlug);
+            return;
+        }
+        const create = async (locale = '') => {
+            var _a;
+            const response = await requests.get(`${serverURL}${api}/${slug}/${id}`, {
+                params: {
+                    locale,
+                    depth: 0,
+                },
+                headers: {
+                    'Accept-Language': i18n.language,
+                },
+            });
+            let data = await response.json();
+            if (typeof ((_a = collection.admin.hooks) === null || _a === void 0 ? void 0 : _a.beforeDuplicate) === 'function') {
+                data = await collection.admin.hooks.beforeDuplicate({
+                    data,
+                    locale,
+                });
+            }
+            const result = await requests.post(`${serverURL}${api}/${slug}`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept-Language': i18n.language,
+                },
+                body: JSON.stringify(data),
+            });
+            const json = await result.json();
+            if (result.status === 201) {
+                return json.doc.id;
+            }
+            json.errors.forEach((error) => toast.error(error.message));
+            return null;
+        };
+        let duplicateID;
+        if (localization) {
+            duplicateID = await create(localization.defaultLocale);
+            let abort = false;
+            localization.locales
+                .filter((locale) => locale !== localization.defaultLocale)
+                .forEach(async (locale) => {
+                var _a;
+                if (!abort) {
+                    const res = await requests.get(`${serverURL}${api}/${slug}/${id}`, {
+                        params: {
+                            locale,
+                            depth: 0,
+                        },
+                        headers: {
+                            'Accept-Language': i18n.language,
+                        },
+                    });
+                    let localizedDoc = await res.json();
+                    if (typeof ((_a = collection.admin.hooks) === null || _a === void 0 ? void 0 : _a.beforeDuplicate) === 'function') {
+                        localizedDoc = await collection.admin.hooks.beforeDuplicate({
+                            data: localizedDoc,
+                            locale,
+                        });
+                    }
+                    const patchResult = await requests.patch(`${serverURL}${api}/${slug}/${duplicateID}?locale=${locale}`, {
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Accept-Language': i18n.language,
+                        },
+                        body: JSON.stringify(localizedDoc),
+                    });
+                    if (patchResult.status > 400) {
+                        abort = true;
+                        const json = await patchResult.json();
+                        json.errors.forEach((error) => toast.error(error.message));
+                    }
+                }
+            });
+            if (abort) {
+                // delete the duplicate doc to prevent incomplete
+                await requests.delete(`${serverURL}${api}/${slug}/${id}`, {
+                    headers: {
+                        'Accept-Language': i18n.language,
+                    },
+                });
+            }
+        }
+        else {
+            duplicateID = await create();
+        }
+        toast.success(t('successfullyDuplicated', { label: getTranslation(collection.labels.singular, i18n) }), { autoClose: 3000 });
+        setModified(false);
+        setTimeout(() => {
+            push({
+                pathname: `${admin}/collections/${slug}/${duplicateID}`,
+            });
+        }, 10);
+    }, [modified, localization, t, i18n, collection, setModified, toggleModal, modalSlug, serverURL, api, slug, id, push, admin]);
+    const confirm = useCallback(async () => {
+        setHasClicked(false);
+        await handleClick(true);
+    }, [handleClick]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { id: "action-duplicate", buttonStyle: "none", className: baseClass, onClick: () => handleClick(false) }, t('duplicate')),
+        modified && hasClicked && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
+            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
+                React.createElement("h1", null, t('confirmDuplication')),
+                React.createElement("p", null, t('unsavedChangesDuplicate')),
+                React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: () => toggleModal(modalSlug) }, t('cancel')),
+                React.createElement(Button, { onClick: confirm, id: "confirm-duplicate" }, t('duplicateWithoutSaving')))))));
+};
+export default Duplicate;

package/dist/admin/components/elements/DuplicateDocument/types.d.ts

@@ -1,6 +1,6 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
-    slug: string;
-    collection: SanitizedCollectionConfig;
-    id: string;
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type Props = {
+    slug: string;
+    collection: SanitizedCollectionConfig;
+    id: string;
+};

package/dist/admin/components/elements/DuplicateDocument/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/elements/Eyebrow/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Eyebrow: React.FC<Props>;
-export default Eyebrow;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Eyebrow: React.FC<Props>;
+export default Eyebrow;

package/dist/admin/components/elements/Eyebrow/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import StepNav from '../StepNav';
-import { Gutter } from '../Gutter';
-import './index.scss';
-const baseClass = 'eyebrow';
-const Eyebrow = ({ actions }) => (React.createElement("div", { className: baseClass },
-    React.createElement(Gutter, { className: `${baseClass}__wrap` },
-        React.createElement(StepNav, null),
-        actions)));
-export default Eyebrow;
+import React from 'react';
+import StepNav from '../StepNav';
+import { Gutter } from '../Gutter';
+import './index.scss';
+const baseClass = 'eyebrow';
+const Eyebrow = ({ actions }) => (React.createElement("div", { className: baseClass },
+    React.createElement(Gutter, { className: `${baseClass}__wrap` },
+        React.createElement(StepNav, null),
+        actions)));
+export default Eyebrow;

package/dist/admin/components/elements/Eyebrow/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare type Props = {
-    actions?: React.ReactNode;
-};
+/// <reference types="react" />
+export declare type Props = {
+    actions?: React.ReactNode;
+};

package/dist/admin/components/elements/Eyebrow/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/elements/FileDetails/Meta/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const Meta: React.FC<Props>;
-export default Meta;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Meta: React.FC<Props>;
+export default Meta;

package/dist/admin/components/elements/FileDetails/Meta/index.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import { useConfig } from '../../../utilities/Config';
-import CopyToClipboard from '../../CopyToClipboard';
-import formatFilesize from '../../../../../uploads/formatFilesize';
-import './index.scss';
-const baseClass = 'file-meta';
-const Meta = (props) => {
-    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
-    const { serverURL } = useConfig();
-    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("div", { className: `${baseClass}__url` },
-            React.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
-            React.createElement(CopyToClipboard, { value: fileURL, defaultMessage: "Copy URL" })),
-        React.createElement("div", { className: `${baseClass}__size-type` },
-            formatFilesize(filesize),
-            (width && height) && (React.createElement(React.Fragment, null,
-                "\u00A0-\u00A0",
-                width,
-                "x",
-                height)),
-            mimeType && (React.createElement(React.Fragment, null,
-                "\u00A0-\u00A0",
-                mimeType)))));
-};
-export default Meta;
+import React from 'react';
+import { useConfig } from '../../../utilities/Config';
+import CopyToClipboard from '../../CopyToClipboard';
+import formatFilesize from '../../../../../uploads/formatFilesize';
+import './index.scss';
+const baseClass = 'file-meta';
+const Meta = (props) => {
+    const { filename, filesize, width, height, mimeType, staticURL, url, } = props;
+    const { serverURL } = useConfig();
+    const fileURL = url || `${serverURL}${staticURL}/${filename}`;
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("div", { className: `${baseClass}__url` },
+            React.createElement("a", { href: fileURL, target: "_blank", rel: "noopener noreferrer" }, filename),
+            React.createElement(CopyToClipboard, { value: fileURL, defaultMessage: "Copy URL" })),
+        React.createElement("div", { className: `${baseClass}__size-type` },
+            formatFilesize(filesize),
+            (width && height) && (React.createElement(React.Fragment, null,
+                "\u00A0-\u00A0",
+                width,
+                "x",
+                height)),
+            mimeType && (React.createElement(React.Fragment, null,
+                "\u00A0-\u00A0",
+                mimeType)))));
+};
+export default Meta;

package/dist/admin/components/elements/FileDetails/Meta/types.d.ts

@@ -1,10 +1,10 @@
-export declare type Props = {
-    filename: string;
-    mimeType: string;
-    filesize: number;
-    staticURL: string;
-    width?: number;
-    height?: number;
-    sizes?: unknown;
-    url?: string;
-};
+export declare type Props = {
+    filename: string;
+    mimeType: string;
+    filesize: number;
+    staticURL: string;
+    width?: number;
+    height?: number;
+    sizes?: unknown;
+    url?: string;
+};

package/dist/admin/components/elements/FileDetails/Meta/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/elements/FileDetails/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const FileDetails: React.FC<Props>;
-export default FileDetails;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const FileDetails: React.FC<Props>;
+export default FileDetails;

package/dist/admin/components/elements/FileDetails/index.js

@@ -1,41 +1,41 @@
-import React, { useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import { useTranslation } from 'react-i18next';
-import Thumbnail from '../Thumbnail';
-import Button from '../Button';
-import Meta from './Meta';
-import Chevron from '../../icons/Chevron';
-import './index.scss';
-const baseClass = 'file-details';
-const FileDetails = (props) => {
-    var _a;
-    const { doc, collection, handleRemove, } = props;
-    const { upload: { staticURL, }, } = collection;
-    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
-    const [moreInfoOpen, setMoreInfoOpen] = useState(false);
-    const { t } = useTranslation('upload');
-    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("header", null,
-            React.createElement(Thumbnail, { doc: doc, collection: collection }),
-            React.createElement("div", { className: `${baseClass}__main-detail` },
-                React.createElement(Meta, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
-                hasSizes && (React.createElement(Button, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
-                    !moreInfoOpen && (React.createElement(React.Fragment, null,
-                        t('moreInfo'),
-                        React.createElement(Chevron, null))),
-                    moreInfoOpen && (React.createElement(React.Fragment, null,
-                        t('lessInfo'),
-                        React.createElement(Chevron, null)))))),
-            handleRemove && (React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
-        hasSizes && (React.createElement(AnimateHeight, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
-            React.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(sizes).map(([key, val]) => {
-                if (val === null || val === void 0 ? void 0 : val.filename) {
-                    return (React.createElement("li", { key: key },
-                        React.createElement("div", { className: `${baseClass}__size-label` }, key),
-                        React.createElement(Meta, { ...val, mimeType: val.mimeType, staticURL: staticURL })));
-                }
-                return null;
-            }))))));
-};
-export default FileDetails;
+import React, { useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import { useTranslation } from 'react-i18next';
+import Thumbnail from '../Thumbnail';
+import Button from '../Button';
+import Meta from './Meta';
+import Chevron from '../../icons/Chevron';
+import './index.scss';
+const baseClass = 'file-details';
+const FileDetails = (props) => {
+    var _a;
+    const { doc, collection, handleRemove, } = props;
+    const { upload: { staticURL, }, } = collection;
+    const { filename, filesize, width, height, mimeType, sizes, url, } = doc;
+    const [moreInfoOpen, setMoreInfoOpen] = useState(false);
+    const { t } = useTranslation('upload');
+    const hasSizes = sizes && ((_a = Object.keys(sizes)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return (React.createElement("div", { className: baseClass },
+        React.createElement("header", null,
+            React.createElement(Thumbnail, { doc: doc, collection: collection }),
+            React.createElement("div", { className: `${baseClass}__main-detail` },
+                React.createElement(Meta, { staticURL: staticURL, filename: filename, filesize: filesize, width: width, height: height, mimeType: mimeType, url: url }),
+                hasSizes && (React.createElement(Button, { className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`, buttonStyle: "none", onClick: () => setMoreInfoOpen(!moreInfoOpen) },
+                    !moreInfoOpen && (React.createElement(React.Fragment, null,
+                        t('moreInfo'),
+                        React.createElement(Chevron, null))),
+                    moreInfoOpen && (React.createElement(React.Fragment, null,
+                        t('lessInfo'),
+                        React.createElement(Chevron, null)))))),
+            handleRemove && (React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: handleRemove, className: `${baseClass}__remove` }))),
+        hasSizes && (React.createElement(AnimateHeight, { className: `${baseClass}__more-info`, height: moreInfoOpen ? 'auto' : 0 },
+            React.createElement("ul", { className: `${baseClass}__sizes` }, Object.entries(sizes).map(([key, val]) => {
+                if (val === null || val === void 0 ? void 0 : val.filename) {
+                    return (React.createElement("li", { key: key },
+                        React.createElement("div", { className: `${baseClass}__size-label` }, key),
+                        React.createElement(Meta, { ...val, mimeType: val.mimeType, staticURL: staticURL })));
+                }
+                return null;
+            }))))));
+};
+export default FileDetails;

package/dist/admin/components/elements/FileDetails/types.d.ts

@@ -1,6 +1,6 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
-    collection: SanitizedCollectionConfig;
-    doc: Record<string, unknown>;
-    handleRemove?: () => void;
-};
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type Props = {
+    collection: SanitizedCollectionConfig;
+    doc: Record<string, unknown>;
+    handleRemove?: () => void;
+};

package/dist/admin/components/elements/FileDetails/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/elements/GenerateConfirmation/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const GenerateConfirmation: React.FC<Props>;
-export default GenerateConfirmation;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const GenerateConfirmation: React.FC<Props>;
+export default GenerateConfirmation;

package/dist/admin/components/elements/GenerateConfirmation/index.js

@@ -1,38 +1,38 @@
-import React from 'react';
-import { toast } from 'react-toastify';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { Trans, useTranslation } from 'react-i18next';
-import Button from '../Button';
-import MinimalTemplate from '../../templates/Minimal';
-import { useDocumentInfo } from '../../utilities/DocumentInfo';
-import './index.scss';
-const baseClass = 'generate-confirmation';
-const GenerateConfirmation = (props) => {
-    const { setKey, highlightField, } = props;
-    const { id } = useDocumentInfo();
-    const { toggleModal } = useModal();
-    const { t } = useTranslation('authentication');
-    const modalSlug = `generate-confirmation-${id}`;
-    const handleGenerate = () => {
-        setKey();
-        toggleModal(modalSlug);
-        toast.success(t('newAPIKeyGenerated'), { autoClose: 3000 });
-        highlightField(true);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => {
-                toggleModal(modalSlug);
-            } }, t('generateNewAPIKey')),
-        React.createElement(Modal, { slug: modalSlug, className: baseClass },
-            React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
-                React.createElement("h1", null, t('confirmGeneration')),
-                React.createElement("p", null,
-                    React.createElement(Trans, { i18nKey: "generatingNewAPIKeyWillInvalidate", t: t },
-                        "generatingNewAPIKeyWillInvalidate",
-                        React.createElement("strong", null, "invalidate"))),
-                React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: () => {
-                        toggleModal(modalSlug);
-                    } }, t('general:cancel')),
-                React.createElement(Button, { onClick: handleGenerate }, t('generate'))))));
-};
-export default GenerateConfirmation;
+import React from 'react';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { Trans, useTranslation } from 'react-i18next';
+import Button from '../Button';
+import MinimalTemplate from '../../templates/Minimal';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import './index.scss';
+const baseClass = 'generate-confirmation';
+const GenerateConfirmation = (props) => {
+    const { setKey, highlightField, } = props;
+    const { id } = useDocumentInfo();
+    const { toggleModal } = useModal();
+    const { t } = useTranslation('authentication');
+    const modalSlug = `generate-confirmation-${id}`;
+    const handleGenerate = () => {
+        setKey();
+        toggleModal(modalSlug);
+        toast.success(t('newAPIKeyGenerated'), { autoClose: 3000 });
+        highlightField(true);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { size: "small", buttonStyle: "secondary", onClick: () => {
+                toggleModal(modalSlug);
+            } }, t('generateNewAPIKey')),
+        React.createElement(Modal, { slug: modalSlug, className: baseClass },
+            React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
+                React.createElement("h1", null, t('confirmGeneration')),
+                React.createElement("p", null,
+                    React.createElement(Trans, { i18nKey: "generatingNewAPIKeyWillInvalidate", t: t },
+                        "generatingNewAPIKeyWillInvalidate",
+                        React.createElement("strong", null, "invalidate"))),
+                React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: () => {
+                        toggleModal(modalSlug);
+                    } }, t('general:cancel')),
+                React.createElement(Button, { onClick: handleGenerate }, t('generate'))))));
+};
+export default GenerateConfirmation;