@payloadcms/ui 3.0.0-canary.926cbeb → 3.0.0-canary.95fcd13

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport qs from 'qs'\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 { 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 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 = qs.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?.code ? `?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              <XIcon />\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":["useModal","qs","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useFormQueryParams","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","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"],"mappings":"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"}
+{"version":3,"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 { useComponentMap } from '../../providers/ComponentMap/index.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 { 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?.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      {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":["useModal","React","useCallback","useEffect","useState","toast","useRelatedCollections","XIcon","useComponentMap","useConfig","DocumentInfoProvider","useDocumentInfo","useLocale","useTranslation","Gutter","IDLabel","RenderTitle","baseClass","DocumentDrawerContent","id","existingDocID","Header","collectionSlug","drawerSlug","onSave","onSaveFromProps","config","routes","api","apiRoute","serverURL","closeModal","modalState","toggleModal","locale","t","docID","setDocID","isOpen","setIsOpen","collectionConfig","componentMap","Edit","isEditing","Boolean","apiURL","code","onLoadError","data","error","errors","message","args","doc","BeforeDocument","className","div","h2","element","button","aria-label","onClick","type","DocumentTitle","slug","disableActions","disableLeaveWithoutSaving","title","toString"],"mappings":"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"}

package/dist/elements/DocumentDrawer/index.scss

@@ -45,15 +45,13 @@
     padding: 0;
     cursor: pointer;
     overflow: hidden;
-    width: base(1);
-    height: base(1);
+    width: base(2);
+    height: base(2);
 
     svg {
-      width: base(2.75);
-      height: base(2.75);
+      width: base(2);
+      height: base(2);
       position: relative;
-      left: base(-0.825);
-      top: base(-0.825);
 
       .stroke {
         stroke-width: 2px;

package/dist/elements/DocumentDrawer/types.d.ts

@@ -2,20 +2,20 @@ import type React from 'react';
 import type { HTMLAttributes } from 'react';
 import type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js';
 import type { Props as DrawerProps } from '../Drawer/types.js';
-export type DocumentDrawerProps = Pick<DrawerProps, 'Header'> & {
+export type DocumentDrawerProps = {
     collectionSlug: string;
     drawerSlug?: string;
     id?: null | number | string;
     onSave?: DocumentInfoContext['onSave'];
-};
-export type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+} & Pick<DrawerProps, 'Header'>;
+export type DocumentTogglerProps = {
     children?: React.ReactNode;
     className?: string;
     collectionSlug: string;
     disabled?: boolean;
     drawerSlug?: string;
     id?: string;
-};
+} & HTMLAttributes<HTMLButtonElement>;
 export type UseDocumentDrawer = (args: {
     collectionSlug: string;
     id?: number | string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG;IAC9D,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AAChF,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACvC,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAErC,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = Pick<DrawerProps, 'Header'> & {\n  collectionSlug: string\n  drawerSlug?: string\n  id?: null | number | string\n  onSave?: DocumentInfoContext['onSave']\n}\n\nexport type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode\n  className?: string\n  collectionSlug: string\n  disabled?: boolean\n  drawerSlug?: string\n  id?: string\n}\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n  React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n  React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAsBA,WAWC"}
+{"version":3,"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = {\n  collectionSlug: string\n  drawerSlug?: string\n  id?: null | number | string\n  onSave?: DocumentInfoContext['onSave']\n} & Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  children?: React.ReactNode\n  className?: string\n  collectionSlug: string\n  disabled?: boolean\n  drawerSlug?: string\n  id?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n  React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n  React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAsBA,WAWC"}

package/dist/elements/DocumentFields/index.d.ts

@@ -1,6 +1,5 @@
-import type { Description, DocumentPermissions } from 'payload';
+import type { Description, DocumentPermissions, FieldMap } from 'payload';
 import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js';
 import './index.scss';
 type Args = {
     AfterFields?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAIvF,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAoEzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,cAAc,EAAE,mBAAmB,CAAA;IACnC,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAkEzC,CAAA"}

package/dist/elements/DocumentFields/index.js

@@ -9,58 +9,56 @@ export const DocumentFields = ({ AfterFields, BeforeFields, description, docPerm
     const mainFields = fieldMap.filter(({ isSidebar })=>!isSidebar);
     const sidebarFields = fieldMap.filter(({ isSidebar })=>isSidebar);
     const hasSidebarFields = sidebarFields && sidebarFields.length > 0;
-    return /*#__PURE__*/ _jsx(React.Fragment, {
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: [
-                baseClass,
-                hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-                forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
-            ].filter(Boolean).join(' '),
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__main`,
-                    children: /*#__PURE__*/ _jsxs(Gutter, {
-                        className: `${baseClass}__edit`,
-                        children: [
-                            /*#__PURE__*/ _jsx("header", {
-                                className: `${baseClass}__header`,
-                                children: description && /*#__PURE__*/ _jsx("div", {
-                                    className: `${baseClass}__sub-header`
-                                })
-                            }),
-                            BeforeFields,
-                            /*#__PURE__*/ _jsx(RenderFields, {
-                                className: `${baseClass}__fields`,
-                                fieldMap: mainFields,
-                                forceRender: 10,
-                                path: "",
-                                permissions: docPermissions?.fields,
-                                readOnly: readOnly,
-                                schemaPath: schemaPath
-                            }),
-                            AfterFields
-                        ]
-                    })
-                }),
-                hasSidebarFields && /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__sidebar-wrap`,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__sidebar`,
-                        children: /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__sidebar-fields`,
-                            children: /*#__PURE__*/ _jsx(RenderFields, {
-                                fieldMap: sidebarFields,
-                                forceRender: 10,
-                                path: "",
-                                permissions: docPermissions?.fields,
-                                readOnly: readOnly,
-                                schemaPath: schemaPath
+    return /*#__PURE__*/ _jsxs("div", {
+        className: [
+            baseClass,
+            hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
+            forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__main`,
+                children: /*#__PURE__*/ _jsxs(Gutter, {
+                    className: `${baseClass}__edit`,
+                    children: [
+                        /*#__PURE__*/ _jsx("header", {
+                            className: `${baseClass}__header`,
+                            children: description && /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__sub-header`
                             })
+                        }),
+                        BeforeFields,
+                        /*#__PURE__*/ _jsx(RenderFields, {
+                            className: `${baseClass}__fields`,
+                            fieldMap: mainFields,
+                            forceRender: 10,
+                            path: "",
+                            permissions: docPermissions?.fields,
+                            readOnly: readOnly,
+                            schemaPath: schemaPath
+                        }),
+                        AfterFields
+                    ]
+                })
+            }),
+            hasSidebarFields && /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__sidebar-wrap`,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: `${baseClass}__sidebar`,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__sidebar-fields`,
+                        children: /*#__PURE__*/ _jsx(RenderFields, {
+                            fieldMap: sidebarFields,
+                            forceRender: 10,
+                            path: "",
+                            permissions: docPermissions?.fields,
+                            readOnly: readOnly,
+                            schemaPath: schemaPath
                         })
                     })
                 })
-            ]
-        })
+            })
+        ]
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { Description, DocumentPermissions } from 'payload'\n\nimport React from 'react'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  AfterFields?: React.ReactNode\n  BeforeFields?: React.ReactNode\n  description?: Description\n  docPermissions: DocumentPermissions\n  fieldMap: FieldMap\n  forceSidebarWrap?: boolean\n  readOnly: boolean\n  schemaPath: string\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  description,\n  docPermissions,\n  fieldMap,\n  forceSidebarWrap,\n  readOnly,\n  schemaPath,\n}) => {\n  const mainFields = fieldMap.filter(({ isSidebar }) => !isSidebar)\n\n  const sidebarFields = fieldMap.filter(({ isSidebar }) => isSidebar)\n\n  const hasSidebarFields = sidebarFields && sidebarFields.length > 0\n\n  return (\n    <React.Fragment>\n      <div\n        className={[\n          baseClass,\n          hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n          forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__main`}>\n          <Gutter className={`${baseClass}__edit`}>\n            <header className={`${baseClass}__header`}>\n              {description && (\n                <div className={`${baseClass}__sub-header`}>\n                  {/* <ViewDescription description={description} /> */}\n                </div>\n              )}\n            </header>\n            {BeforeFields}\n            <RenderFields\n              className={`${baseClass}__fields`}\n              fieldMap={mainFields}\n              forceRender={10}\n              path=\"\"\n              permissions={docPermissions?.fields}\n              readOnly={readOnly}\n              schemaPath={schemaPath}\n            />\n            {AfterFields}\n          </Gutter>\n        </div>\n        {hasSidebarFields && (\n          <div className={`${baseClass}__sidebar-wrap`}>\n            <div className={`${baseClass}__sidebar`}>\n              <div className={`${baseClass}__sidebar-fields`}>\n                <RenderFields\n                  fieldMap={sidebarFields}\n                  forceRender={10}\n                  path=\"\"\n                  permissions={docPermissions?.fields}\n                  readOnly={readOnly}\n                  schemaPath={schemaPath}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </React.Fragment>\n  )\n}\n"],"names":["React","RenderFields","Gutter","baseClass","DocumentFields","AfterFields","BeforeFields","description","docPermissions","fieldMap","forceSidebarWrap","readOnly","schemaPath","mainFields","filter","isSidebar","sidebarFields","hasSidebarFields","length","Fragment","div","className","Boolean","join","header","forceRender","path","permissions","fields"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAIzB,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAalB,OAAO,MAAMC,iBAAiC,CAAC,EAC7CC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,gBAAgB,EAChBC,QAAQ,EACRC,UAAU,EACX;IACC,MAAMC,aAAaJ,SAASK,MAAM,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAK,CAACA;IAEvD,MAAMC,gBAAgBP,SAASK,MAAM,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAKA;IAEzD,MAAME,mBAAmBD,iBAAiBA,cAAcE,MAAM,GAAG;IAEjE,qBACE,KAAClB,MAAMmB,QAAQ;kBACb,cAAA,MAACC;YACCC,WAAW;gBACTlB;gBACAc,mBAAmB,CAAC,EAAEd,UAAU,aAAa,CAAC,GAAG,CAAC,EAAEA,UAAU,YAAY,CAAC;gBAC3EO,oBAAoB,CAAC,EAAEP,UAAU,oBAAoB,CAAC;aACvD,CACEW,MAAM,CAACQ,SACPC,IAAI,CAAC;;8BAER,KAACH;oBAAIC,WAAW,CAAC,EAAElB,UAAU,MAAM,CAAC;8BAClC,cAAA,MAACD;wBAAOmB,WAAW,CAAC,EAAElB,UAAU,MAAM,CAAC;;0CACrC,KAACqB;gCAAOH,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;0CACtCI,6BACC,KAACa;oCAAIC,WAAW,CAAC,EAAElB,UAAU,YAAY,CAAC;;;4BAK7CG;0CACD,KAACL;gCACCoB,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;gCACjCM,UAAUI;gCACVY,aAAa;gCACbC,MAAK;gCACLC,aAAanB,gBAAgBoB;gCAC7BjB,UAAUA;gCACVC,YAAYA;;4BAEbP;;;;gBAGJY,kCACC,KAACG;oBAAIC,WAAW,CAAC,EAAElB,UAAU,cAAc,CAAC;8BAC1C,cAAA,KAACiB;wBAAIC,WAAW,CAAC,EAAElB,UAAU,SAAS,CAAC;kCACrC,cAAA,KAACiB;4BAAIC,WAAW,CAAC,EAAElB,UAAU,gBAAgB,CAAC;sCAC5C,cAAA,KAACF;gCACCQ,UAAUO;gCACVS,aAAa;gCACbC,MAAK;gCACLC,aAAanB,gBAAgBoB;gCAC7BjB,UAAUA;gCACVC,YAAYA;;;;;;;;AAS9B,EAAC"}
+{"version":3,"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { Description, DocumentPermissions, FieldMap } from 'payload'\n\nimport React from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  AfterFields?: React.ReactNode\n  BeforeFields?: React.ReactNode\n  description?: Description\n  docPermissions: DocumentPermissions\n  fieldMap: FieldMap\n  forceSidebarWrap?: boolean\n  readOnly: boolean\n  schemaPath: string\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  description,\n  docPermissions,\n  fieldMap,\n  forceSidebarWrap,\n  readOnly,\n  schemaPath,\n}) => {\n  const mainFields = fieldMap.filter(({ isSidebar }) => !isSidebar)\n\n  const sidebarFields = fieldMap.filter(({ isSidebar }) => isSidebar)\n\n  const hasSidebarFields = sidebarFields && sidebarFields.length > 0\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          <header className={`${baseClass}__header`}>\n            {description && (\n              <div className={`${baseClass}__sub-header`}>\n                {/* <ViewDescription description={description} /> */}\n              </div>\n            )}\n          </header>\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fieldMap={mainFields}\n            forceRender={10}\n            path=\"\"\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n            schemaPath={schemaPath}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields && (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fieldMap={sidebarFields}\n                forceRender={10}\n                path=\"\"\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n                schemaPath={schemaPath}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","RenderFields","Gutter","baseClass","DocumentFields","AfterFields","BeforeFields","description","docPermissions","fieldMap","forceSidebarWrap","readOnly","schemaPath","mainFields","filter","isSidebar","sidebarFields","hasSidebarFields","length","div","className","Boolean","join","header","forceRender","path","permissions","fields"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAalB,OAAO,MAAMC,iBAAiC,CAAC,EAC7CC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,gBAAgB,EAChBC,QAAQ,EACRC,UAAU,EACX;IACC,MAAMC,aAAaJ,SAASK,MAAM,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAK,CAACA;IAEvD,MAAMC,gBAAgBP,SAASK,MAAM,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAKA;IAEzD,MAAME,mBAAmBD,iBAAiBA,cAAcE,MAAM,GAAG;IAEjE,qBACE,MAACC;QACCC,WAAW;YACTjB;YACAc,mBAAmB,CAAC,EAAEd,UAAU,aAAa,CAAC,GAAG,CAAC,EAAEA,UAAU,YAAY,CAAC;YAC3EO,oBAAoB,CAAC,EAAEP,UAAU,oBAAoB,CAAC;SACvD,CACEW,MAAM,CAACO,SACPC,IAAI,CAAC;;0BAER,KAACH;gBAAIC,WAAW,CAAC,EAAEjB,UAAU,MAAM,CAAC;0BAClC,cAAA,MAACD;oBAAOkB,WAAW,CAAC,EAAEjB,UAAU,MAAM,CAAC;;sCACrC,KAACoB;4BAAOH,WAAW,CAAC,EAAEjB,UAAU,QAAQ,CAAC;sCACtCI,6BACC,KAACY;gCAAIC,WAAW,CAAC,EAAEjB,UAAU,YAAY,CAAC;;;wBAK7CG;sCACD,KAACL;4BACCmB,WAAW,CAAC,EAAEjB,UAAU,QAAQ,CAAC;4BACjCM,UAAUI;4BACVW,aAAa;4BACbC,MAAK;4BACLC,aAAalB,gBAAgBmB;4BAC7BhB,UAAUA;4BACVC,YAAYA;;wBAEbP;;;;YAGJY,kCACC,KAACE;gBAAIC,WAAW,CAAC,EAAEjB,UAAU,cAAc,CAAC;0BAC1C,cAAA,KAACgB;oBAAIC,WAAW,CAAC,EAAEjB,UAAU,SAAS,CAAC;8BACrC,cAAA,KAACgB;wBAAIC,WAAW,CAAC,EAAEjB,UAAU,gBAAgB,CAAC;kCAC5C,cAAA,KAACF;4BACCQ,UAAUO;4BACVQ,aAAa;4BACbC,MAAK;4BACLC,aAAalB,gBAAgBmB;4BAC7BhB,UAAUA;4BACVC,YAAYA;;;;;;;AAQ5B,EAAC"}

package/dist/elements/DraggableSortable/DraggableSortableItem/index.d.ts

@@ -1,7 +1,7 @@
 import type { UseDraggableArguments } from '@dnd-kit/core';
 import React from 'react';
 import type { ChildFunction } from './types.js';
-export declare const DraggableSortableItem: React.FC<UseDraggableArguments & {
+export declare const DraggableSortableItem: React.FC<{
     children: ChildFunction;
-}>;
+} & UseDraggableArguments>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/DraggableSortable/DraggableSortableItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAI/C,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAC1C,qBAAqB,GAAG;IACtB,QAAQ,EAAE,aAAa,CAAA;CACxB,CAwBF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAI/C,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAC1C;IACE,QAAQ,EAAE,aAAa,CAAA;CACxB,GAAG,qBAAqB,CA2B1B,CAAA"}

package/dist/elements/DraggableSortable/DraggableSortableItem/index.js

@@ -4,7 +4,7 @@ import React, { Fragment } from 'react';
 import { useDraggableSortable } from '../useDraggableSortable/index.js';
 export const DraggableSortableItem = (props)=>{
     const { id, children, disabled } = props;
-    const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
+    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useDraggableSortable({
         id,
         disabled
     });
@@ -16,9 +16,11 @@ export const DraggableSortableItem = (props)=>{
                     cursor: isDragging ? 'grabbing' : 'grab'
                 }
             },
+            isDragging,
             listeners,
             setNodeRef,
-            transform
+            transform,
+            transition
         })
     });
 };

package/dist/elements/DraggableSortable/DraggableSortableItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport React, { Fragment } from 'react'\n\nimport type { ChildFunction } from './types.js'\n\nimport { useDraggableSortable } from '../useDraggableSortable/index.js'\n\nexport const DraggableSortableItem: React.FC<\n  UseDraggableArguments & {\n    children: ChildFunction\n  }\n> = (props) => {\n  const { id, children, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n    disabled,\n  })\n\n  return (\n    <Fragment>\n      {children({\n        attributes: {\n          ...attributes,\n          style: {\n            cursor: isDragging ? 'grabbing' : 'grab',\n          },\n        },\n        listeners,\n        setNodeRef,\n        transform,\n      })}\n    </Fragment>\n  )\n}\n"],"names":["React","Fragment","useDraggableSortable","DraggableSortableItem","props","id","children","disabled","attributes","isDragging","listeners","setNodeRef","transform","style","cursor"],"mappings":"AAAA;;AAGA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,oBAAoB,QAAQ,mCAAkC;AAEvE,OAAO,MAAMC,wBAIT,CAACC;IACH,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGV,qBAAqB;QACxFG;QACAE;IACF;IAEA,qBACE,KAACN;kBACEK,SAAS;YACRE,YAAY;gBACV,GAAGA,UAAU;gBACbK,OAAO;oBACLC,QAAQL,aAAa,aAAa;gBACpC;YACF;YACAC;YACAC;YACAC;QACF;;AAGN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport React, { Fragment } from 'react'\n\nimport type { ChildFunction } from './types.js'\n\nimport { useDraggableSortable } from '../useDraggableSortable/index.js'\n\nexport const DraggableSortableItem: React.FC<\n  {\n    children: ChildFunction\n  } & UseDraggableArguments\n> = (props) => {\n  const { id, children, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } =\n    useDraggableSortable({\n      id,\n      disabled,\n    })\n\n  return (\n    <Fragment>\n      {children({\n        attributes: {\n          ...attributes,\n          style: {\n            cursor: isDragging ? 'grabbing' : 'grab',\n          },\n        },\n        isDragging,\n        listeners,\n        setNodeRef,\n        transform,\n        transition,\n      })}\n    </Fragment>\n  )\n}\n"],"names":["React","Fragment","useDraggableSortable","DraggableSortableItem","props","id","children","disabled","attributes","isDragging","listeners","setNodeRef","transform","transition","style","cursor"],"mappings":"AAAA;;AAGA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,oBAAoB,QAAQ,mCAAkC;AAEvE,OAAO,MAAMC,wBAIT,CAACC;IACH,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGH;IAEnC,MAAM,EAAEI,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAC5EX,qBAAqB;QACnBG;QACAE;IACF;IAEF,qBACE,KAACN;kBACEK,SAAS;YACRE,YAAY;gBACV,GAAGA,UAAU;gBACbM,OAAO;oBACLC,QAAQN,aAAa,aAAa;gBACpC;YACF;YACAA;YACAC;YACAC;YACAC;YACAC;QACF;;AAGN,EAAC"}

package/dist/elements/DraggableSortable/DraggableSortableItem/types.d.ts

@@ -2,12 +2,12 @@ import type { UseDraggableArguments } from '@dnd-kit/core';
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import type React from 'react';
 import type { UseDraggableSortableReturn } from '../useDraggableSortable/types.js';
-export type DragHandleProps = UseDraggableArguments & {
+export type DragHandleProps = {
     attributes: UseDraggableArguments['attributes'];
     listeners: SyntheticListenerMap;
-};
+} & UseDraggableArguments;
 export type ChildFunction = (args: UseDraggableSortableReturn) => React.ReactNode;
-export type Props = UseDraggableArguments & {
+export type Props = {
     children: ChildFunction;
-};
+} & UseDraggableArguments;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/DraggableSortable/DraggableSortableItem/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAA;AAElF,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAA;IAC/C,SAAS,EAAE,oBAAoB,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAA;AAEjF,MAAM,MAAM,KAAK,GAAG,qBAAqB,GAAG;IAC1C,QAAQ,EAAE,aAAa,CAAA;CACxB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAA;AAElF,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAA;IAC/C,SAAS,EAAE,oBAAoB,CAAA;CAChC,GAAG,qBAAqB,CAAA;AAEzB,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAA;AAEjF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,aAAa,CAAA;CACxB,GAAG,qBAAqB,CAAA"}

package/dist/elements/DraggableSortable/DraggableSortableItem/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/types.ts"],"sourcesContent":["import type { UseDraggableArguments } from '@dnd-kit/core'\nimport type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../useDraggableSortable/types.js'\n\nexport type DragHandleProps = UseDraggableArguments & {\n  attributes: UseDraggableArguments['attributes']\n  listeners: SyntheticListenerMap\n}\n\nexport type ChildFunction = (args: UseDraggableSortableReturn) => React.ReactNode\n\nexport type Props = UseDraggableArguments & {\n  children: ChildFunction\n}\n"],"names":[],"mappings":"AAaA,WAEC"}
+{"version":3,"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/types.ts"],"sourcesContent":["import type { UseDraggableArguments } from '@dnd-kit/core'\nimport type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../useDraggableSortable/types.js'\n\nexport type DragHandleProps = {\n  attributes: UseDraggableArguments['attributes']\n  listeners: SyntheticListenerMap\n} & UseDraggableArguments\n\nexport type ChildFunction = (args: UseDraggableSortableReturn) => React.ReactNode\n\nexport type Props = {\n  children: ChildFunction\n} & UseDraggableArguments\n"],"names":[],"mappings":"AAaA,WAEyB"}

package/dist/elements/DraggableSortable/useDraggableSortable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAI1D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,oBAAoB,UAAW,qBAAqB,KAAG,0BAoBnE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAI1D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,oBAAoB,UAAW,qBAAqB,KAAG,0BA0BnE,CAAA"}

package/dist/elements/DraggableSortable/useDraggableSortable/index.js

@@ -2,21 +2,27 @@
 import { useSortable } from '@dnd-kit/sortable';
 export const useDraggableSortable = (props)=>{
     const { id, disabled } = props;
-    const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
+    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         id,
-        disabled
+        disabled,
+        transition: {
+            duration: 250,
+            easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
+        }
     });
     return {
         attributes: {
             ...attributes,
             style: {
-                cursor: isDragging ? 'grabbing' : 'grab'
+                cursor: isDragging ? 'grabbing' : 'grab',
+                transition
             }
         },
         isDragging,
         listeners,
         setNodeRef,
-        transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`
+        transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        transition
     };
 };
 

package/dist/elements/DraggableSortable/useDraggableSortable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport { useSortable } from '@dnd-kit/sortable'\n\nimport type { UseDraggableSortableReturn } from './types.js'\n\nexport const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {\n  const { id, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({\n    id,\n    disabled,\n  })\n\n  return {\n    attributes: {\n      ...attributes,\n      style: {\n        cursor: isDragging ? 'grabbing' : 'grab',\n      },\n    },\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers\n  }\n}\n"],"names":["useSortable","useDraggableSortable","props","id","disabled","attributes","isDragging","listeners","setNodeRef","transform","style","cursor","x","y"],"mappings":"AAAA;AAGA,SAASA,WAAW,QAAQ,oBAAmB;AAI/C,OAAO,MAAMC,uBAAuB,CAACC;IACnC,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGF;IAEzB,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGT,YAAY;QAC/EG;QACAC;IACF;IAEA,OAAO;QACLC,YAAY;YACV,GAAGA,UAAU;YACbK,OAAO;gBACLC,QAAQL,aAAa,aAAa;YACpC;QACF;QACAA;QACAC;QACAC;QACAC,WAAWA,aAAa,CAAC,YAAY,EAAEA,UAAUG,CAAC,CAAC,IAAI,EAAEH,UAAUI,CAAC,CAAC,MAAM,CAAC;IAC9E;AACF,EAAC"}
+{"version":3,"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { UseDraggableArguments } from '@dnd-kit/core'\n\nimport { useSortable } from '@dnd-kit/sortable'\n\nimport type { UseDraggableSortableReturn } from './types.js'\n\nexport const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {\n  const { id, disabled } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({\n    id,\n    disabled,\n    transition: {\n      duration: 250,\n      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',\n    },\n  })\n\n  return {\n    attributes: {\n      ...attributes,\n      style: {\n        cursor: isDragging ? 'grabbing' : 'grab',\n        transition,\n      },\n    },\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`, // translate3d is faster than translate in most browsers\n    transition,\n  }\n}\n"],"names":["useSortable","useDraggableSortable","props","id","disabled","attributes","isDragging","listeners","setNodeRef","transform","transition","duration","easing","style","cursor","x","y"],"mappings":"AAAA;AAGA,SAASA,WAAW,QAAQ,oBAAmB;AAI/C,OAAO,MAAMC,uBAAuB,CAACC;IACnC,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGF;IAEzB,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGV,YAAY;QAC3FG;QACAC;QACAM,YAAY;YACVC,UAAU;YACVC,QAAQ;QACV;IACF;IAEA,OAAO;QACLP,YAAY;YACV,GAAGA,UAAU;YACbQ,OAAO;gBACLC,QAAQR,aAAa,aAAa;gBAClCI;YACF;QACF;QACAJ;QACAC;QACAC;QACAC,WAAWA,aAAa,CAAC,YAAY,EAAEA,UAAUM,CAAC,CAAC,IAAI,EAAEN,UAAUO,CAAC,CAAC,MAAM,CAAC;QAC5EN;IACF;AACF,EAAC"}

package/dist/elements/DraggableSortable/useDraggableSortable/types.d.ts

@@ -6,5 +6,6 @@ export type UseDraggableSortableReturn = {
     listeners: SyntheticListenerMap;
     setNodeRef: (node: HTMLElement | null) => void;
     transform: string;
+    transition: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/DraggableSortable/useDraggableSortable/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,oBAAoB,CAAA;IAC/B,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,0BAA0B,GAAG;IACvC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,oBAAoB,CAAA;IAC/B,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA"}

package/dist/elements/DraggableSortable/useDraggableSortable/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"sourcesContent":["import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type { HTMLAttributes } from 'react'\n\nexport type UseDraggableSortableReturn = {\n  attributes: HTMLAttributes<unknown>\n  isDragging?: boolean\n  listeners: SyntheticListenerMap\n  setNodeRef: (node: HTMLElement | null) => void\n  transform: string\n}\n"],"names":[],"mappings":"AAGA,WAMC"}
+{"version":3,"sources":["../../../../src/elements/DraggableSortable/useDraggableSortable/types.ts"],"sourcesContent":["import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'\nimport type { HTMLAttributes } from 'react'\n\nexport type UseDraggableSortableReturn = {\n  attributes: HTMLAttributes<unknown>\n  isDragging?: boolean\n  listeners: SyntheticListenerMap\n  setNodeRef: (node: HTMLElement | null) => void\n  transform: string\n  transition: string\n}\n"],"names":[],"mappings":"AAGA,WAOC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAMrD,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAMrD,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuFlC,CAAA"}

package/dist/elements/Drawer/index.js

@@ -73,6 +73,9 @@ export const Drawer = ({ slug, Header, children, className, gutter = true, hover
                 }),
                 /*#__PURE__*/ _jsxs("div", {
                     className: `${baseClass}__content`,
+                    style: {
+                        width: `calc(100% - (${drawerDepth} * var(--gutter-h))`
+                    },
                     children: [
                         /*#__PURE__*/ _jsx("div", {
                             className: `${baseClass}__blur-bg-content`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div className={`${baseClass}__content`}>\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\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                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"names":["Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","children","className","disabled","onClick","rest","openModal","handleClick","e","button","type","Drawer","Header","gutter","hoverTitle","title","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","filter","Boolean","join","style","zIndex","div","aria-label","id","left","right","Provider","value","undefined","h2"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div\n          className={`${baseClass}__content`}\n          style={{\n            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n          }}\n        >\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\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                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"names":["Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","children","className","disabled","onClick","rest","openModal","handleClick","e","button","type","Drawer","Header","gutter","hoverTitle","title","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","filter","Boolean","join","style","zIndex","div","aria-label","id","width","left","right","Provider","value","undefined","h2"],"mappings":"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"}

package/dist/elements/Drawer/index.scss

@@ -25,7 +25,8 @@ $transTime: 200;
     transform: translateX(calc(var(--base) * 4));
     position: relative;
     z-index: 2;
-    width: calc(100% - var(--gutter-h));
+    // NOTE: width is controlled by js
+    // width: calc(100% - var(--gutter-h));
     overflow: hidden;
     transition: all #{$transTime}ms linear;
     background-color: var(--theme-bg);
@@ -79,6 +80,7 @@ $transTime: 200;
 
   &__header {
     display: flex;
+    align-items: center;
     margin-top: base(2.5);
     margin-bottom: base(1);
     width: 100%;
@@ -94,19 +96,22 @@ $transTime: 200;
       padding: 0;
       cursor: pointer;
       overflow: hidden;
-      width: base(1);
-      height: base(1);
       direction: ltr;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
 
       svg {
-        width: base(2.75);
-        height: base(2.75);
+        margin: base(-1.2);
+        width: base(2.4);
+        height: base(2.4);
+
         position: relative;
-        left: base(-0.825);
-        top: base(-0.825);
 
         .stroke {
-          stroke-width: 2px;
+          stroke-width: 1px;
           vector-effect: non-scaling-stroke;
         }
       }

package/dist/elements/Drawer/types.d.ts

@@ -8,10 +8,10 @@ export type Props = {
     slug: string;
     title?: string;
 };
-export type TogglerProps = HTMLAttributes<HTMLButtonElement> & {
+export type TogglerProps = {
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
     slug: string;
-};
+} & HTMLAttributes<HTMLButtonElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/Drawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}

package/dist/elements/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  Header?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  gutter?: boolean\n  hoverTitle?: boolean\n  slug: string\n  title?: string\n}\n\nexport type TogglerProps = HTMLAttributes<HTMLButtonElement> & {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n}\n"],"names":[],"mappings":"AAYA,WAKC"}
+{"version":3,"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  Header?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  gutter?: boolean\n  hoverTitle?: boolean\n  slug: string\n  title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"names":[],"mappings":"AAYA,WAKqC"}

package/dist/elements/Dropzone/index.d.ts

@@ -4,6 +4,7 @@ export type Props = {
     className?: string;
     mimeTypes?: string[];
     onChange: (e: FileList) => void;
+    onPasteUrlClick?: () => void;
 };
 export declare const Dropzone: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0GpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC/B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiHpC,CAAA"}

package/dist/elements/Dropzone/index.js

@@ -9,7 +9,7 @@ const handleDragOver = (e)=>{
     e.stopPropagation();
 };
 const baseClass = 'dropzone';
-export const Dropzone = ({ className, mimeTypes, onChange })=>{
+export const Dropzone = ({ className, mimeTypes, onChange, onPasteUrlClick })=>{
     const dropRef = React.useRef(null);
     const [dragging, setDragging] = React.useState(false);
     const inputRef = React.useRef(null);
@@ -90,9 +90,16 @@ export const Dropzone = ({ className, mimeTypes, onChange })=>{
                 onClick: ()=>{
                     inputRef.current.click();
                 },
-                size: "small",
+                size: "medium",
                 children: t('upload:selectFile')
             }),
+            /*#__PURE__*/ _jsx(Button, {
+                buttonStyle: "secondary",
+                className: `${baseClass}__file-button`,
+                onClick: onPasteUrlClick,
+                size: "medium",
+                children: t('upload:pasteURL')
+            }),
             /*#__PURE__*/ _jsx("input", {
                 accept: mimeTypes?.join(','),
                 className: `${baseClass}__hidden-input`,