@payloadcms/ui 3.0.0-canary.95fcd13 → 3.0.0-canary.96477cf

package/dist/elements/DeleteDocument/index.js

@@ -1,154 +1,188 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { useForm } from '../../forms/Form/context.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';
 import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 import { Button } from '../Button/index.js';
+import { drawerZBase } from '../Drawer/index.js';
 import { PopupList } from '../Popup/index.js';
 import { Translation } from '../Translation/index.js';
 import './index.scss';
 const baseClass = 'delete-document';
-export const DeleteDocument = (props)=>{
-    const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props;
-    const { routes: { admin: adminRoute, api }, serverURL } = useConfig();
-    const { setModified } = useForm();
-    const [deleting, setDeleting] = useState(false);
-    const { toggleModal } = useModal();
-    const router = useRouter();
-    const { i18n, t } = useTranslation();
-    const { title } = useDocumentInfo();
-    const titleToRender = titleFromProps || title || id;
-    const modalSlug = `delete-${id}`;
-    const addDefaultError = useCallback(()=>{
-        setDeleting(false);
-        toast.error(t('error:deletingTitle', {
-            title
-        }));
-    }, [
-        t,
-        title
-    ]);
-    const handleDelete = useCallback(async ()=>{
-        setDeleting(true);
-        setModified(false);
+export const DeleteDocument = props => {
+  const {
+    id,
+    buttonId,
+    collectionSlug,
+    onDelete,
+    redirectAfterDelete = true,
+    singularLabel,
+    title: titleFromProps
+  } = props;
+  const {
+    config: {
+      routes: {
+        admin: adminRoute,
+        api
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const {
+    setModified
+  } = useForm();
+  const [deleting, setDeleting] = useState(false);
+  const {
+    closeModal,
+    toggleModal
+  } = useModal();
+  const router = useRouter();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    title
+  } = useDocumentInfo();
+  const editDepth = useEditDepth();
+  const titleToRender = titleFromProps || title || id;
+  const modalSlug = `delete-${id}`;
+  const addDefaultError = useCallback(() => {
+    setDeleting(false);
+    toast.error(t('error:deletingTitle', {
+      title
+    }));
+  }, [t, title]);
+  useEffect(() => {
+    return () => {
+      closeModal(modalSlug);
+    };
+  }, [closeModal, modalSlug]);
+  const handleDelete = useCallback(async () => {
+    setDeleting(true);
+    setModified(false);
+    try {
+      await requests.delete(`${serverURL}${api}/${collectionSlug}/${id}`, {
+        headers: {
+          'Accept-Language': i18n.language,
+          'Content-Type': 'application/json'
+        }
+      }).then(async res => {
         try {
-            await requests.delete(`${serverURL}${api}/${collectionSlug}/${id}`, {
-                headers: {
-                    'Accept-Language': i18n.language,
-                    'Content-Type': 'application/json'
-                }
-            }).then(async (res)=>{
-                try {
-                    const json = await res.json();
-                    if (res.status < 400) {
-                        setDeleting(false);
-                        toggleModal(modalSlug);
-                        toast.success(t('general:titleDeleted', {
-                            label: getTranslation(singularLabel, i18n),
-                            title
-                        }) || json.message);
-                        return router.push(formatAdminURL({
-                            adminRoute,
-                            path: `/collections/${collectionSlug}`
-                        }));
-                    }
-                    toggleModal(modalSlug);
-                    if (json.errors) {
-                        json.errors.forEach((error)=>toast.error(error.message));
-                    } else {
-                        addDefaultError();
-                    }
-                    return false;
-                } catch (e) {
-                    return addDefaultError();
-                }
-            });
-        } catch (e) {
+          const json = await res.json();
+          if (res.status < 400) {
+            setDeleting(false);
+            toggleModal(modalSlug);
+            toast.success(t('general:titleDeleted', {
+              label: getTranslation(singularLabel, i18n),
+              title
+            }) || json.message);
+            if (redirectAfterDelete) {
+              return router.push(formatAdminURL({
+                adminRoute,
+                path: `/collections/${collectionSlug}`
+              }));
+            }
+            if (typeof onDelete === 'function') {
+              await onDelete({
+                id,
+                collectionConfig
+              });
+            }
+            toggleModal(modalSlug);
+            return;
+          }
+          toggleModal(modalSlug);
+          if (json.errors) {
+            json.errors.forEach(error => toast.error(error.message));
+          } else {
             addDefaultError();
+          }
+          return false;
+        } catch (e_0) {
+          return addDefaultError();
         }
-    }, [
-        setModified,
-        serverURL,
-        api,
-        collectionSlug,
-        id,
-        toggleModal,
-        modalSlug,
-        t,
-        singularLabel,
-        i18n,
-        title,
-        router,
-        adminRoute,
-        addDefaultError
-    ]);
-    if (id) {
-        return /*#__PURE__*/ _jsxs(React.Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(PopupList.Button, {
-                    id: buttonId,
-                    onClick: ()=>{
-                        setDeleting(false);
-                        toggleModal(modalSlug);
-                    },
-                    children: t('general:delete')
-                }),
-                /*#__PURE__*/ _jsx(Modal, {
-                    className: baseClass,
-                    slug: modalSlug,
-                    children: /*#__PURE__*/ _jsxs("div", {
-                        className: `${baseClass}__template`,
-                        children: [
-                            /*#__PURE__*/ _jsx("h1", {
-                                children: t('general:confirmDeletion')
-                            }),
-                            /*#__PURE__*/ _jsx("p", {
-                                children: /*#__PURE__*/ _jsx(Translation, {
-                                    elements: {
-                                        '1': ({ children })=>/*#__PURE__*/ _jsx("strong", {
-                                                children: children
-                                            })
-                                    },
-                                    i18nKey: "general:aboutToDelete",
-                                    t: t,
-                                    variables: {
-                                        label: getTranslation(singularLabel, i18n),
-                                        title: titleToRender
-                                    }
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: `${baseClass}__actions`,
-                                children: [
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        buttonStyle: "secondary",
-                                        id: "confirm-cancel",
-                                        onClick: deleting ? undefined : ()=>toggleModal(modalSlug),
-                                        type: "button",
-                                        children: t('general:cancel')
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        id: "confirm-delete",
-                                        onClick: deleting ? undefined : handleDelete,
-                                        children: deleting ? t('general:deleting') : t('general:confirm')
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                })
-            ]
-        });
+      });
+    } catch (e) {
+      addDefaultError();
     }
-    return null;
+  }, [setModified, serverURL, api, collectionSlug, id, toggleModal, modalSlug, t, singularLabel, i18n, title, router, adminRoute, addDefaultError, redirectAfterDelete, onDelete, collectionConfig]);
+  if (id) {
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(PopupList.Button, {
+        id: buttonId,
+        onClick: () => {
+          setDeleting(false);
+          toggleModal(modalSlug);
+        },
+        children: t('general:delete')
+      }), /*#__PURE__*/_jsx(Modal, {
+        className: baseClass,
+        slug: modalSlug,
+        style: {
+          zIndex: drawerZBase + editDepth
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__wrapper`,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__content`,
+            children: [/*#__PURE__*/_jsx("h1", {
+              children: t('general:confirmDeletion')
+            }), /*#__PURE__*/_jsx("p", {
+              children: /*#__PURE__*/_jsx(Translation, {
+                elements: {
+                  '1': ({
+                    children
+                  }) => /*#__PURE__*/_jsx("strong", {
+                    children: children
+                  })
+                },
+                i18nKey: "general:aboutToDelete",
+                t: t,
+                variables: {
+                  label: getTranslation(singularLabel, i18n),
+                  title: titleToRender
+                }
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__controls`,
+            children: [/*#__PURE__*/_jsx(Button, {
+              buttonStyle: "secondary",
+              id: "confirm-cancel",
+              onClick: deleting ? undefined : () => toggleModal(modalSlug),
+              size: "large",
+              type: "button",
+              children: t('general:cancel')
+            }), /*#__PURE__*/_jsx(Button, {
+              id: "confirm-delete",
+              onClick: () => {
+                if (!deleting) {
+                  void handleDelete();
+                }
+              },
+              size: "large",
+              children: deleting ? t('general:deleting') : t('general:confirm')
+            })]
+          })]
+        })
+      })]
+    });
+  }
+  return null;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/DeleteDocument/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { Button } from '../Button/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'delete-document'\n\nexport type Props = {\n  buttonId?: string\n  collectionSlug: SanitizedCollectionConfig['slug']\n  id?: string\n  singularLabel: SanitizedCollectionConfig['labels']['singular']\n  title?: string\n  useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const DeleteDocument: React.FC<Props> = (props) => {\n  const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props\n\n  const {\n    routes: { admin: adminRoute, api },\n    serverURL,\n  } = useConfig()\n\n  const { setModified } = useForm()\n  const [deleting, setDeleting] = useState(false)\n  const { toggleModal } = useModal()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentInfo()\n\n  const titleToRender = titleFromProps || title || id\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    setDeleting(false)\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete = useCallback(async () => {\n    setDeleting(true)\n    setModified(false)\n    try {\n      await requests\n        .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n          },\n        })\n        .then(async (res) => {\n          try {\n            const json = await res.json()\n\n            if (res.status < 400) {\n              setDeleting(false)\n              toggleModal(modalSlug)\n              toast.success(\n                t('general:titleDeleted', { label: getTranslation(singularLabel, i18n), title }) ||\n                  json.message,\n              )\n\n              return router.push(\n                formatAdminURL({\n                  adminRoute,\n                  path: `/collections/${collectionSlug}`,\n                }),\n              )\n            }\n            toggleModal(modalSlug)\n            if (json.errors) {\n              json.errors.forEach((error) => toast.error(error.message))\n            } else {\n              addDefaultError()\n            }\n            return false\n          } catch (e) {\n            return addDefaultError()\n          }\n        })\n    } catch (e) {\n      addDefaultError()\n    }\n  }, [\n    setModified,\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    toggleModal,\n    modalSlug,\n    t,\n    singularLabel,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    addDefaultError,\n  ])\n\n  if (id) {\n    return (\n      <React.Fragment>\n        <PopupList.Button\n          id={buttonId}\n          onClick={() => {\n            setDeleting(false)\n            toggleModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <Modal className={baseClass} slug={modalSlug}>\n          <div className={`${baseClass}__template`}>\n            <h1>{t('general:confirmDeletion')}</h1>\n            <p>\n              <Translation\n                elements={{\n                  '1': ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"general:aboutToDelete\"\n                t={t}\n                variables={{\n                  label: getTranslation(singularLabel, i18n),\n                  title: titleToRender,\n                }}\n              />\n            </p>\n            <div className={`${baseClass}__actions`}>\n              <Button\n                buttonStyle=\"secondary\"\n                id=\"confirm-cancel\"\n                onClick={deleting ? undefined : () => toggleModal(modalSlug)}\n                type=\"button\"\n              >\n                {t('general:cancel')}\n              </Button>\n              <Button id=\"confirm-delete\" onClick={deleting ? undefined : handleDelete}>\n                {deleting ? t('general:deleting') : t('general:confirm')}\n              </Button>\n            </div>\n          </div>\n        </Modal>\n      </React.Fragment>\n    )\n  }\n\n  return null\n}\n"],"names":["Modal","useModal","getTranslation","useRouter","React","useCallback","useState","toast","useForm","useConfig","useDocumentInfo","useTranslation","requests","formatAdminURL","Button","PopupList","Translation","baseClass","DeleteDocument","props","id","buttonId","collectionSlug","singularLabel","title","titleFromProps","routes","admin","adminRoute","api","serverURL","setModified","deleting","setDeleting","toggleModal","router","i18n","t","titleToRender","modalSlug","addDefaultError","error","handleDelete","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","e","Fragment","onClick","className","slug","div","h1","p","elements","children","strong","i18nKey","variables","buttonStyle","undefined","type"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Modal","useModal","getTranslation","useRouter","React","useCallback","useEffect","useState","toast","useForm","useConfig","useDocumentInfo","useEditDepth","useTranslation","requests","formatAdminURL","Button","drawerZBase","PopupList","Translation","baseClass","DeleteDocument","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","setModified","deleting","setDeleting","closeModal","toggleModal","router","i18n","t","editDepth","titleToRender","modalSlug","addDefaultError","error","handleDelete","delete","headers","language","then","res","json","status","success","label","message","push","path","errors","forEach","e","_jsxs","Fragment","_jsx","onClick","className","slug","style","zIndex","elements","1","children","i18nKey","variables","buttonStyle","undefined","size","type"],"sources":["../../../src/elements/DeleteDocument/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, SanitizedCollectionConfig } from 'payload'\n\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/index.js'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\nimport { Button } from '../Button/index.js'\nimport { drawerZBase } from '../Drawer/index.js'\nimport { PopupList } from '../Popup/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'delete-document'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentInfoContext['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n  readonly useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle']\n}\n\nexport const DeleteDocument: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig\n\n  const { setModified } = useForm()\n  const [deleting, setDeleting] = useState(false)\n  const { closeModal, toggleModal } = useModal()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentInfo()\n  const editDepth = useEditDepth()\n\n  const titleToRender = titleFromProps || title || id\n\n  const modalSlug = `delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    setDeleting(false)\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  useEffect(() => {\n    return () => {\n      closeModal(modalSlug)\n    }\n  }, [closeModal, modalSlug])\n\n  const handleDelete = useCallback(async () => {\n    setDeleting(true)\n    setModified(false)\n\n    try {\n      await requests\n        .delete(`${serverURL}${api}/${collectionSlug}/${id}`, {\n          headers: {\n            'Accept-Language': i18n.language,\n            'Content-Type': 'application/json',\n          },\n        })\n        .then(async (res) => {\n          try {\n            const json = await res.json()\n\n            if (res.status < 400) {\n              setDeleting(false)\n              toggleModal(modalSlug)\n\n              toast.success(\n                t('general:titleDeleted', { label: getTranslation(singularLabel, i18n), title }) ||\n                  json.message,\n              )\n\n              if (redirectAfterDelete) {\n                return router.push(\n                  formatAdminURL({\n                    adminRoute,\n                    path: `/collections/${collectionSlug}`,\n                  }),\n                )\n              }\n\n              if (typeof onDelete === 'function') {\n                await onDelete({ id, collectionConfig })\n              }\n\n              toggleModal(modalSlug)\n\n              return\n            }\n\n            toggleModal(modalSlug)\n\n            if (json.errors) {\n              json.errors.forEach((error) => toast.error(error.message))\n            } else {\n              addDefaultError()\n            }\n            return false\n          } catch (e) {\n            return addDefaultError()\n          }\n        })\n    } catch (e) {\n      addDefaultError()\n    }\n  }, [\n    setModified,\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    toggleModal,\n    modalSlug,\n    t,\n    singularLabel,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    addDefaultError,\n    redirectAfterDelete,\n    onDelete,\n    collectionConfig,\n  ])\n\n  if (id) {\n    return (\n      <React.Fragment>\n        <PopupList.Button\n          id={buttonId}\n          onClick={() => {\n            setDeleting(false)\n            toggleModal(modalSlug)\n          }}\n        >\n          {t('general:delete')}\n        </PopupList.Button>\n        <Modal\n          className={baseClass}\n          slug={modalSlug}\n          style={{\n            zIndex: drawerZBase + editDepth,\n          }}\n        >\n          <div className={`${baseClass}__wrapper`}>\n            <div className={`${baseClass}__content`}>\n              <h1>{t('general:confirmDeletion')}</h1>\n              <p>\n                <Translation\n                  elements={{\n                    '1': ({ children }) => <strong>{children}</strong>,\n                  }}\n                  i18nKey=\"general:aboutToDelete\"\n                  t={t}\n                  variables={{\n                    label: getTranslation(singularLabel, i18n),\n                    title: titleToRender,\n                  }}\n                />\n              </p>\n            </div>\n            <div className={`${baseClass}__controls`}>\n              <Button\n                buttonStyle=\"secondary\"\n                id=\"confirm-cancel\"\n                onClick={deleting ? undefined : () => toggleModal(modalSlug)}\n                size=\"large\"\n                type=\"button\"\n              >\n                {t('general:cancel')}\n              </Button>\n              <Button\n                id=\"confirm-delete\"\n                onClick={() => {\n                  if (!deleting) {\n                    void handleDelete()\n                  }\n                }}\n                size=\"large\"\n              >\n                {deleting ? t('general:deleting') : t('general:confirm')}\n              </Button>\n            </div>\n          </div>\n        </Modal>\n      </React.Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DeleteDocument/index.scss

@@ -4,25 +4,39 @@
   @include blur-bg;
   display: flex;
   align-items: center;
-  height: 100%;
   justify-content: center;
+  height: 100%;
+
+  &__toggle {
+    @extend %btn-reset;
+  }
 
-  &__template {
+  &__wrapper {
     z-index: 1;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.8);
+    padding: base(2);
+    max-width: base(36);
   }
 
-  &__toggle {
-    @extend %btn-reset;
-  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.4);
 
-  .btn {
-    margin: 0;
+    > * {
+      margin: 0;
+    }
   }
 
-  &__actions {
+  &__controls {
     display: flex;
-    flex-wrap: wrap;
-    gap: $baseline;
+    gap: base(0.4);
+
+    .btn {
+      margin: 0;
+    }
   }
 }

package/dist/elements/DeleteMany/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAKrD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAYpD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,sBAAsB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoHtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAKrD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAYpD,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,sBAAsB,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2HtC,CAAA"}