@payloadcms/ui 3.0.0-canary.cee5702 → 3.0.0-canary.cf66341

package/dist/elements/DocumentControls/index.scss

@@ -24,7 +24,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    align-items: center;
+    align-items: space-between;
     gap: var(--base);
     padding-bottom: 1px;
     z-index: 4;
@@ -36,6 +36,7 @@
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
+    padding: base(0.8) 0;
   }
 
   &__meta {
@@ -46,6 +47,10 @@
     gap: var(--base);
     margin: 0;
     width: 100%;
+
+    & button {
+      margin: 0;
+    }
   }
 
   &__list-item {
@@ -64,6 +69,7 @@
     white-space: nowrap;
     margin: 0;
     font-weight: 600;
+    line-height: base(1.2);
   }
 
   &__label {
@@ -103,8 +109,8 @@
     gap: 2px;
     border: 1px solid var(--theme-elevation-100);
     border-radius: $style-radius-m;
-    height: calc(var(--base) * 1.5);
-    width: calc(var(--base) * 1.5);
+    height: calc(var(--base) * 1.6);
+    width: calc(var(--base) * 1.6);
 
     &:hover {
       border: 1px solid var(--theme-elevation-500);
@@ -141,7 +147,7 @@
     // The timestamps and meta can scroll past
     // The same container needs to the sticky, though
     // So we use a static height with a negative top equal to the meta height plus top padding
-    top: calc(var(--base) * -2);
+    top: base(-2.8);
     padding-right: 0;
     padding-left: 0;
 
@@ -154,8 +160,7 @@
     &__content {
       width: 100%;
       overflow: auto;
-      height: calc(var(--base) * 2);
-
+      padding-inline: base(2);
       // this container has a fixed height
       // this means the scrollbar (when present) overlaps the content
       &::-webkit-scrollbar {
@@ -166,14 +171,13 @@
     &__meta {
       width: auto;
       gap: calc(var(--base) / 2);
-      margin-left: var(--gutter-h);
 
       &::after {
         content: '';
         display: block;
-        position: sticky;
+        position: absolute;
         right: 0;
-        width: calc(var(--base) * 2);
+        width: base(0.8);
         height: var(--base);
         background: linear-gradient(to right, transparent, var(--theme-bg));
         flex-shrink: 0;
@@ -183,6 +187,7 @@
     }
 
     &__controls-wrapper {
+      background-color: var(--theme-bg);
       width: 100%;
       transform: translate3d(0, 0, 0);
       padding-right: var(--gutter-h);
@@ -215,4 +220,10 @@
       }
     }
   }
+
+  @include small-break {
+    &__content {
+      padding-inline: base(0.8);
+    }
+  }
 }

package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAerD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmG/D,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAcrD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0F/D,CAAA"}

package/dist/elements/DocumentDrawer/DrawerContent.js

@@ -1,109 +1,190 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
-import queryString from 'qs';
+import { useModal } from '@faceless-ui/modal';
 import React, { useCallback, useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js';
-import { X } from '../../icons/X/index.js';
-import { useComponentMap } from '../../providers/ComponentMap/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js';
-import { useFormQueryParams } from '../../providers/FormQueryParams/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Gutter } from '../Gutter/index.js';
 import { IDLabel } from '../IDLabel/index.js';
 import { RenderTitle } from '../RenderTitle/index.js';
 import { baseClass } from './index.js';
-export const DocumentDrawerContent = ({ id: existingDocID, Header, collectionSlug, drawerSlug, onSave: onSaveFromProps })=>{
-    const { useModal } = facelessUIImport;
-    const config = useConfig();
-    const { routes: { api: apiRoute }, serverURL } = config;
-    const { closeModal, modalState, toggleModal } = useModal();
-    const locale = useLocale();
-    const { t } = useTranslation();
-    const [docID, setDocID] = useState(existingDocID);
-    const [isOpen, setIsOpen] = useState(false);
-    const [collectionConfig] = useRelatedCollections(collectionSlug);
-    const { formQueryParams } = useFormQueryParams();
-    const formattedQueryParams = queryString.stringify(formQueryParams);
-    const { componentMap } = useComponentMap();
-    const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug];
-    const isEditing = Boolean(docID);
-    const apiURL = docID ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}?locale=${locale.code}` : null;
-    const action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${docID}` : ''}?${formattedQueryParams}`;
-    useEffect(()=>{
-        setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
-    }, [
-        modalState,
-        drawerSlug
-    ]);
-    const onLoadError = React.useCallback((data)=>{
-        if (isOpen) {
-            closeModal(drawerSlug);
-            toast.error(data.errors?.[0].message || t('error:unspecific'));
-        }
-    }, [
-        closeModal,
-        drawerSlug,
-        isOpen,
-        t
-    ]);
-    const onSave = useCallback((args)=>{
-        setDocID(args.doc.id);
-        if (typeof onSaveFromProps === 'function') {
-            void onSaveFromProps({
-                ...args,
-                collectionConfig
-            });
-        }
-    }, [
-        onSaveFromProps,
-        collectionConfig
-    ]);
-    return /*#__PURE__*/ _jsx(DocumentInfoProvider, {
-        BeforeDocument: /*#__PURE__*/ _jsxs(Gutter, {
-            className: `${baseClass}__header`,
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__header-content`,
-                    children: [
-                        /*#__PURE__*/ _jsx("h2", {
-                            className: `${baseClass}__header-text`,
-                            children: Header || /*#__PURE__*/ _jsx(RenderTitle, {
-                                element: "span"
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx("button", {
-                            "aria-label": t('general:close'),
-                            className: `${baseClass}__header-close`,
-                            onClick: ()=>toggleModal(drawerSlug),
-                            type: "button",
-                            children: /*#__PURE__*/ _jsx(X, {})
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(DocumentTitle, {})
-            ]
-        }),
-        action: action,
-        apiURL: apiURL,
-        collectionSlug: collectionConfig.slug,
-        disableActions: true,
-        disableLeaveWithoutSaving: true,
-        id: docID,
-        isEditing: isEditing,
-        onLoadError: onLoadError,
-        onSave: onSave,
-        children: Edit
+export const DocumentDrawerContent = t0 => {
+  const $ = _c(29);
+  const {
+    id: existingDocID,
+    Header,
+    collectionSlug,
+    drawerSlug,
+    onSave: onSaveFromProps
+  } = t0;
+  const {
+    config
+  } = useConfig();
+  const {
+    routes: t1,
+    serverURL
+  } = config;
+  const {
+    api: apiRoute
+  } = t1;
+  const {
+    closeModal,
+    modalState,
+    toggleModal
+  } = useModal();
+  const locale = useLocale();
+  const {
+    t
+  } = useTranslation();
+  const [docID, setDocID] = useState(existingDocID);
+  const [isOpen, setIsOpen] = useState(false);
+  const [collectionConfig] = useRelatedCollections(collectionSlug);
+  const Edit = collectionConfig.admin.components.views.edit.default.Component;
+  const isEditing = Boolean(docID);
+  const apiURL = docID ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ""}` : null;
+  let t2;
+  let t3;
+  if ($[0] !== modalState || $[1] !== drawerSlug) {
+    t2 = () => {
+      setIsOpen(Boolean(modalState[drawerSlug]?.isOpen));
+    };
+    t3 = [modalState, drawerSlug];
+    $[0] = modalState;
+    $[1] = drawerSlug;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[4] !== isOpen || $[5] !== closeModal || $[6] !== drawerSlug || $[7] !== t) {
+    t4 = data => {
+      if (isOpen) {
+        closeModal(drawerSlug);
+        toast.error(data.errors?.[0].message || t("error:unspecific"));
+      }
+    };
+    $[4] = isOpen;
+    $[5] = closeModal;
+    $[6] = drawerSlug;
+    $[7] = t;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const onLoadError = t4;
+  let t5;
+  if ($[9] !== onSaveFromProps || $[10] !== collectionConfig) {
+    t5 = args => {
+      setDocID(args.doc.id);
+      if (typeof onSaveFromProps === "function") {
+        onSaveFromProps({
+          ...args,
+          collectionConfig
+        });
+      }
+    };
+    $[9] = onSaveFromProps;
+    $[10] = collectionConfig;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const onSave = t5;
+  let t6;
+  if ($[12] !== Header) {
+    t6 = Header || _jsx(RenderTitle, {
+      element: "span"
+    });
+    $[12] = Header;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t6 || $[15] !== t || $[16] !== toggleModal || $[17] !== drawerSlug || $[18] !== Edit || $[19] !== apiURL || $[20] !== collectionConfig.slug || $[21] !== docID || $[22] !== isEditing || $[23] !== onLoadError || $[24] !== onSave) {
+    let t8;
+    if ($[26] !== toggleModal || $[27] !== drawerSlug) {
+      t8 = () => toggleModal(drawerSlug);
+      $[26] = toggleModal;
+      $[27] = drawerSlug;
+      $[28] = t8;
+    } else {
+      t8 = $[28];
+    }
+    t7 = _jsx(DocumentInfoProvider, {
+      BeforeDocument: _jsxs(Gutter, {
+        className: `${baseClass}__header`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__header-content`,
+          children: [_jsx("h2", {
+            className: `${baseClass}__header-text`,
+            children: t6
+          }), _jsx("button", {
+            "aria-label": t("general:close"),
+            className: `${baseClass}__header-close`,
+            onClick: t8,
+            type: "button",
+            children: _jsx(XIcon, {})
+          })]
+        }), _jsx(DocumentTitle, {})]
+      }),
+      apiURL,
+      collectionSlug: collectionConfig.slug,
+      disableActions: true,
+      disableLeaveWithoutSaving: true,
+      id: docID,
+      isEditing,
+      onLoadError,
+      onSave,
+      children: _jsx(RenderComponent, {
+        mappedComponent: Edit
+      })
     });
+    $[14] = t6;
+    $[15] = t;
+    $[16] = toggleModal;
+    $[17] = drawerSlug;
+    $[18] = Edit;
+    $[19] = apiURL;
+    $[20] = collectionConfig.slug;
+    $[21] = docID;
+    $[22] = isEditing;
+    $[23] = onLoadError;
+    $[24] = onSave;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  return t7;
 };
-const DocumentTitle = ()=>{
-    const { id, title } = useDocumentInfo();
-    return id && id !== title ? /*#__PURE__*/ _jsx(IDLabel, {
-        id: id.toString()
+const DocumentTitle = () => {
+  const $ = _c(3);
+  const {
+    id,
+    title
+  } = useDocumentInfo();
+  let t0;
+  if ($[0] !== id || $[1] !== title) {
+    t0 = id && id !== title ? _jsx(IDLabel, {
+      id: id.toString()
     }) : null;
+    $[0] = id;
+    $[1] = title;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
 };
-
 //# sourceMappingURL=DrawerContent.js.map

package/dist/elements/DocumentDrawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport queryString from 'qs'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'react-toastify'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { X } from '../../icons/X/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useFormQueryParams } from '../../providers/FormQueryParams/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n  id: existingDocID,\n  Header,\n  collectionSlug,\n  drawerSlug,\n  onSave: onSaveFromProps,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const config = useConfig()\n\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const { closeModal, modalState, toggleModal } = useModal()\n  const locale = useLocale()\n  const { t } = useTranslation()\n  const [docID, setDocID] = useState(existingDocID)\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n  const { formQueryParams } = useFormQueryParams()\n  const formattedQueryParams = queryString.stringify(formQueryParams)\n\n  const { componentMap } = useComponentMap()\n\n  const { Edit } = componentMap[`${collectionSlug ? 'collections' : 'globals'}`][collectionSlug]\n  const isEditing = Boolean(docID)\n  const apiURL = docID\n    ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}?locale=${locale.code}`\n    : null\n  const action = `${serverURL}${apiRoute}/${collectionSlug}${\n    isEditing ? `/${docID}` : ''\n  }?${formattedQueryParams}`\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const onLoadError = React.useCallback(\n    (data) => {\n      if (isOpen) {\n        closeModal(drawerSlug)\n        toast.error(data.errors?.[0].message || t('error:unspecific'))\n      }\n    },\n    [closeModal, drawerSlug, isOpen, t],\n  )\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setDocID(args.doc.id)\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...args,\n          collectionConfig,\n        })\n      }\n    },\n    [onSaveFromProps, collectionConfig],\n  )\n\n  return (\n    <DocumentInfoProvider\n      BeforeDocument={\n        <Gutter className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-content`}>\n            <h2 className={`${baseClass}__header-text`}>\n              {Header || <RenderTitle element=\"span\" />}\n            </h2>\n            {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n            i.e. changing to a `div` element will fix the animation issue but will break accessibility\n          */}\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => toggleModal(drawerSlug)}\n              type=\"button\"\n            >\n              <X />\n            </button>\n          </div>\n          <DocumentTitle />\n        </Gutter>\n      }\n      action={action}\n      apiURL={apiURL}\n      collectionSlug={collectionConfig.slug}\n      disableActions\n      disableLeaveWithoutSaving\n      id={docID}\n      isEditing={isEditing}\n      onLoadError={onLoadError}\n      onSave={onSave}\n    >\n      {Edit}\n    </DocumentInfoProvider>\n  )\n}\n\nconst DocumentTitle: React.FC = () => {\n  const { id, title } = useDocumentInfo()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"names":["facelessUIImport","queryString","React","useCallback","useEffect","useState","toast","useRelatedCollections","X","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useFormQueryParams","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","useModal","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","formQueryParams","formattedQueryParams","stringify","componentMap","Edit","isEditing","Boolean","apiURL","code","action","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","title","toString"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"DrawerContent.js","names":["c","_c","useModal","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","RenderComponent","useConfig","DocumentInfoProvider","useDocumentInfo","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","t0","$","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","config","routes","t1","serverURL","api","apiRoute","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","Edit","admin","components","views","edit","default","Component","isEditing","Boolean","apiURL","code","t2","t3","t4","data","error","errors","message","onLoadError","t5","args","doc","t6","_jsx","element","t8","t7","BeforeDocument","_jsxs","className","children","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","mappedComponent","title","toString"],"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerProps } from './types.js'\n\nimport { useRelatedCollections } from '../../fields/Relationship/AddNew/useRelatedCollections.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport { RenderTitle } from '../RenderTitle/index.js'\nimport { baseClass } from './index.js'\n\nexport const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({\n  id: existingDocID,\n  Header,\n  collectionSlug,\n  drawerSlug,\n  onSave: onSaveFromProps,\n}) => {\n  const { config } = useConfig()\n\n  const {\n    routes: { api: apiRoute },\n    serverURL,\n  } = config\n\n  const { closeModal, modalState, toggleModal } = useModal()\n  const locale = useLocale()\n  const { t } = useTranslation()\n  const [docID, setDocID] = useState(existingDocID)\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionConfig] = useRelatedCollections(collectionSlug)\n\n  const Edit = collectionConfig.admin.components.views.edit.default.Component\n\n  const isEditing = Boolean(docID)\n  const apiURL = docID\n    ? `${serverURL}${apiRoute}/${collectionSlug}/${docID}${locale?.code ? `?locale=${locale.code}` : ''}`\n    : null\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  const onLoadError = React.useCallback(\n    (data) => {\n      if (isOpen) {\n        closeModal(drawerSlug)\n        toast.error(data.errors?.[0].message || t('error:unspecific'))\n      }\n    },\n    [closeModal, drawerSlug, isOpen, t],\n  )\n\n  const onSave = useCallback<DocumentDrawerProps['onSave']>(\n    (args) => {\n      setDocID(args.doc.id)\n      if (typeof onSaveFromProps === 'function') {\n        void onSaveFromProps({\n          ...args,\n          collectionConfig,\n        })\n      }\n    },\n    [onSaveFromProps, collectionConfig],\n  )\n\n  return (\n    <DocumentInfoProvider\n      BeforeDocument={\n        <Gutter className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-content`}>\n            <h2 className={`${baseClass}__header-text`}>\n              {Header || <RenderTitle element=\"span\" />}\n            </h2>\n            {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n            i.e. changing to a `div` element will fix the animation issue but will break accessibility\n          */}\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => toggleModal(drawerSlug)}\n              type=\"button\"\n            >\n              <XIcon />\n            </button>\n          </div>\n          <DocumentTitle />\n        </Gutter>\n      }\n      apiURL={apiURL}\n      collectionSlug={collectionConfig.slug}\n      disableActions\n      disableLeaveWithoutSaving\n      id={docID}\n      isEditing={isEditing}\n      onLoadError={onLoadError}\n      onSave={onSave}\n    >\n      <RenderComponent mappedComponent={Edit} />\n    </DocumentInfoProvider>\n  )\n}\n\nconst DocumentTitle: React.FC = () => {\n  const { id, title } = useDocumentInfo()\n  return id && id !== title ? <IDLabel id={id.toString()} /> : null\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAO9F,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,eAAe,CAAA;AAcrC,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyBhE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAmE/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAO9F,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,eAAe,CAAA;AAcrC,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyBhE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAiE/B,CAAA"}