@payloadcms/ui 3.0.0-beta.12 → 3.0.0-beta.121

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,eAAe,CAAA;AAErE,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,CAkEzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,cAAc,EAAE,mBAAmB,CAAA;IAC5C,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAkEzC,CAAA"}

package/dist/elements/DocumentFields/index.js

@@ -1,46 +1,63 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldIsSidebar } from 'payload/shared';
 import React from 'react';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { Gutter } from '../Gutter/index.js';
+import './index.scss';
 const baseClass = 'document-fields';
-export const DocumentFields = ({ AfterFields, BeforeFields, description, docPermissions, fieldMap, forceSidebarWrap, readOnly, schemaPath })=>{
-    const mainFields = fieldMap.filter(({ isSidebar })=>!isSidebar);
-    const sidebarFields = fieldMap.filter(({ isSidebar })=>isSidebar);
-    const hasSidebarFields = sidebarFields && sidebarFields.length > 0;
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: [
-            baseClass,
-            hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-            forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__main`
-    }, /*#__PURE__*/ React.createElement(Gutter, {
-        className: `${baseClass}__edit`
-    }, /*#__PURE__*/ React.createElement("header", {
-        className: `${baseClass}__header`
-    }, description && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sub-header`
-    })), BeforeFields, /*#__PURE__*/ React.createElement(RenderFields, {
-        className: `${baseClass}__fields`,
-        fieldMap: mainFields,
-        path: "",
-        permissions: docPermissions?.['fields'],
-        readOnly: readOnly,
-        schemaPath: schemaPath
-    }), AfterFields)), hasSidebarFields && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sidebar-wrap`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sidebar`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__sidebar-fields`
-    }, /*#__PURE__*/ React.createElement(RenderFields, {
-        fieldMap: sidebarFields,
-        path: "",
-        permissions: docPermissions?.fields,
-        readOnly: readOnly,
-        schemaPath: schemaPath
-    }))))));
+export const DocumentFields = ({
+  AfterFields,
+  BeforeFields,
+  description,
+  docPermissions,
+  fields,
+  forceSidebarWrap,
+  readOnly,
+  schemaPath
+}) => {
+  const mainFields = fields.filter(field => !fieldIsSidebar(field));
+  const sidebarFields = fields.filter(field => fieldIsSidebar(field));
+  const hasSidebarFields = sidebarFields && sidebarFields.length > 0;
+  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`,
+          fields: 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, {
+            fields: sidebarFields,
+            forceRender: 10,
+            path: "",
+            permissions: docPermissions?.fields,
+            readOnly: readOnly,
+            schemaPath: schemaPath
+          })
+        })
+      })
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map

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/types'\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              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                  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","path","permissions","fields"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,OAAOA,WAAW,QAAO;AAIzB,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,MAAM,QAAQ,qBAAoB;AAG3C,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,oBAAClB,MAAMmB,QAAQ,sBACb,oBAACC;QACCC,WAAW;YACTlB;YACAc,mBAAmB,CAAC,EAAEd,UAAU,aAAa,CAAC,GAAG,CAAC,EAAEA,UAAU,YAAY,CAAC;YAC3EO,oBAAoB,CAAC,EAAEP,UAAU,oBAAoB,CAAC;SACvD,CACEW,MAAM,CAACQ,SACPC,IAAI,CAAC;qBAER,oBAACH;QAAIC,WAAW,CAAC,EAAElB,UAAU,MAAM,CAAC;qBAClC,oBAACD;QAAOmB,WAAW,CAAC,EAAElB,UAAU,MAAM,CAAC;qBACrC,oBAACqB;QAAOH,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;OACtCI,6BACC,oBAACa;QAAIC,WAAW,CAAC,EAAElB,UAAU,YAAY,CAAC;SAK7CG,4BACD,oBAACL;QACCoB,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;QACjCM,UAAUI;QACVY,MAAK;QACLC,aAAalB,gBAAgB,CAAC,SAAS;QACvCG,UAAUA;QACVC,YAAYA;QAEbP,eAGJY,kCACC,oBAACG;QAAIC,WAAW,CAAC,EAAElB,UAAU,cAAc,CAAC;qBAC1C,oBAACiB;QAAIC,WAAW,CAAC,EAAElB,UAAU,SAAS,CAAC;qBACrC,oBAACiB;QAAIC,WAAW,CAAC,EAAElB,UAAU,gBAAgB,CAAC;qBAC5C,oBAACF;QACCQ,UAAUO;QACVS,MAAK;QACLC,aAAalB,gBAAgBmB;QAC7BhB,UAAUA;QACVC,YAAYA;;AAS9B,EAAC"}
+{"version":3,"file":"index.js","names":["fieldIsSidebar","React","RenderFields","Gutter","baseClass","DocumentFields","AfterFields","BeforeFields","description","docPermissions","fields","forceSidebarWrap","readOnly","schemaPath","mainFields","filter","field","sidebarFields","hasSidebarFields","length","_jsxs","className","Boolean","join","_jsx","forceRender","path","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Description, DocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\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  readonly AfterFields?: React.ReactNode\n  readonly BeforeFields?: React.ReactNode\n  readonly description?: Description\n  readonly docPermissions: DocumentPermissions\n  readonly fields: ClientField[]\n  readonly forceSidebarWrap?: boolean\n  readonly readOnly: boolean\n  readonly schemaPath: string\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  description,\n  docPermissions,\n  fields,\n  forceSidebarWrap,\n  readOnly,\n  schemaPath,\n}) => {\n  const mainFields = fields.filter((field) => !fieldIsSidebar(field))\n\n  const sidebarFields = fields.filter((field) => fieldIsSidebar(field))\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            fields={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                fields={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"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,cAAA,GAAiCA,CAAC;EAC7CC,WAAW;EACXC,YAAY;EACZC,WAAW;EACXC,cAAc;EACdC,MAAM;EACNC,gBAAgB;EAChBC,QAAQ;EACRC;AAAU,CACX;EACC,MAAMC,UAAA,GAAaJ,MAAA,CAAOK,MAAM,CAAEC,KAAA,IAAU,CAAChB,cAAA,CAAegB,KAAA;EAE5D,MAAMC,aAAA,GAAgBP,MAAA,CAAOK,MAAM,CAAEC,KAAA,IAAUhB,cAAA,CAAegB,KAAA;EAE9D,MAAME,gBAAA,GAAmBD,aAAA,IAAiBA,aAAA,CAAcE,MAAM,GAAG;EAEjE,oBACEC,KAAA,CAAC;IACCC,SAAA,EAAW,CACTjB,SAAA,EACAc,gBAAA,GAAmB,GAAGd,SAAA,eAAwB,GAAG,GAAGA,SAAA,cAAuB,EAC3EO,gBAAA,IAAoB,GAAGP,SAAA,sBAA+B,CACvD,CACEW,MAAM,CAACO,OAAA,EACPC,IAAI,CAAC;4BAERC,IAAA,CAAC;MAAIH,SAAA,EAAW,GAAGjB,SAAA,QAAiB;gBAClC,aAAAgB,KAAA,CAACjB,MAAA;QAAOkB,SAAA,EAAW,GAAGjB,SAAA,QAAiB;gCACrCoB,IAAA,CAAC;UAAOH,SAAA,EAAW,GAAGjB,SAAA,UAAmB;oBACtCI,WAAA,iBACCgB,IAAA,CAAC;YAAIH,SAAA,EAAW,GAAGjB,SAAA;;YAKtBG,YAAA,E,aACDiB,IAAA,CAACtB,YAAA;UACCmB,SAAA,EAAW,GAAGjB,SAAA,UAAmB;UACjCM,MAAA,EAAQI,UAAA;UACRW,WAAA,EAAa;UACbC,IAAA,EAAK;UACLC,WAAA,EAAalB,cAAA,EAAgBC,MAAA;UAC7BE,QAAA,EAAUA,QAAA;UACVC,UAAA,EAAYA;YAEbP,WAAA;;QAGJY,gBAAA,iBACCM,IAAA,CAAC;MAAIH,SAAA,EAAW,GAAGjB,SAAA,gBAAyB;gBAC1C,aAAAoB,IAAA,CAAC;QAAIH,SAAA,EAAW,GAAGjB,SAAA,WAAoB;kBACrC,aAAAoB,IAAA,CAAC;UAAIH,SAAA,EAAW,GAAGjB,SAAA,kBAA2B;oBAC5C,aAAAoB,IAAA,CAACtB,YAAA;YACCQ,MAAA,EAAQO,aAAA;YACRQ,WAAA,EAAa;YACbC,IAAA,EAAK;YACLC,WAAA,EAAalB,cAAA,EAAgBC,MAAA;YAC7BE,QAAA,EAAUA,QAAA;YACVC,UAAA,EAAYA;;;;;;AAQ5B","ignoreList":[]}

package/dist/elements/DocumentFields/index.scss

@@ -1,91 +1,147 @@
 @import '../../scss/styles.scss';
 
-.document-fields {
-  width: 100%;
-  display: flex;
-  --doc-sidebar-width: 325px;
-
-  &--has-sidebar {
-    .document-fields {
-      &__main {
-        width: 66.66%;
-      }
+@layer payload-default {
+  .document-fields {
+    width: 100%;
+    display: flex;
+    --doc-sidebar-width: 325px;
 
-      &__edit {
-        [dir='ltr'] & {
-          top: 0;
-          right: 0;
-          border-right: 1px solid var(--theme-elevation-100);
-          padding-right: calc(var(--base) * 2);
+    &--has-sidebar {
+      .document-fields {
+        &__main {
+          width: 66.66%;
         }
 
-        [dir='rtl'] & {
-          top: 0;
-          left: 0;
-          border-left: 1px solid var(--theme-elevation-100);
-          padding-left: calc(var(--base) * 2);
+        &__edit {
+          [dir='ltr'] & {
+            top: 0;
+            right: 0;
+            border-right: 1px solid var(--theme-elevation-100);
+            padding-right: calc(var(--base) * 2);
+          }
+
+          [dir='rtl'] & {
+            top: 0;
+            left: 0;
+            border-left: 1px solid var(--theme-elevation-100);
+            padding-left: calc(var(--base) * 2);
+          }
         }
-      }
 
-      &__fields {
-        & > .tabs-field,
-        & > .group-field {
-          margin-right: calc(var(--base) * -2);
+        &__fields {
+          & > .tabs-field,
+          & > .group-field {
+            margin-right: calc(var(--base) * -2);
+          }
         }
       }
     }
-  }
 
-  &__main {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    flex-grow: 1;
-  }
+    &__main {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      flex-grow: 1;
+    }
 
-  &__edit {
-    padding-top: calc(var(--base) * 1.5);
-    padding-bottom: var(--spacing-view-bottom);
-    flex-grow: 1;
-  }
+    &__edit {
+      padding-top: calc(var(--base) * 1.5);
+      padding-bottom: var(--spacing-view-bottom);
+      flex-grow: 1;
+    }
 
-  &__sidebar-wrap {
-    position: sticky;
-    top: var(--doc-controls-height);
-    width: 33.33%;
-    height: calc(100vh - var(--doc-controls-height));
-    min-width: var(--doc-sidebar-width);
-    flex-shrink: 0;
-  }
+    &__sidebar-wrap {
+      position: sticky;
+      top: var(--doc-controls-height);
+      width: 33.33%;
+      height: calc(100vh - var(--doc-controls-height));
+      min-width: var(--doc-sidebar-width);
+      flex-shrink: 0;
+    }
 
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
+    &__sidebar {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
 
-  &__sidebar-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding-top: calc(var(--base) * 1.5);
-    padding-left: calc(var(--base) * 2);
-    padding-right: var(--gutter-h);
-    padding-bottom: var(--spacing-view-bottom);
-  }
+    &__sidebar-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      padding-top: calc(var(--base) * 1.5);
+      padding-left: calc(var(--base) * 2);
+      padding-right: var(--gutter-h);
+      padding-bottom: var(--spacing-view-bottom);
+    }
 
-  &__label {
-    color: var(--theme-elevation-400);
-  }
+    &__label {
+      color: var(--theme-elevation-400);
+    }
+
+    &--force-sidebar-wrap {
+      display: block;
 
-  &--force-sidebar-wrap {
-    display: block;
+      .document-fields {
+        &__main {
+          width: 100%;
+          min-height: initial;
+        }
+
+        &__sidebar-wrap {
+          position: static;
+          width: 100%;
+          height: initial;
+          border-left: 0;
+        }
+
+        &__sidebar {
+          padding-bottom: base(3.5);
+          overflow: visible;
+        }
+
+        &__sidebar-fields {
+          padding-top: 0;
+          padding-left: var(--gutter-h);
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    @include mid-break {
+      display: block;
+
+      &--has-sidebar {
+        .document-fields {
+          &__main {
+            width: 100%;
+          }
+
+          &__edit {
+            [dir='ltr'] & {
+              border-right: 0;
+              padding-right: var(--gutter-h);
+            }
+
+            [dir='rtl'] & {
+              border-left: 0;
+              padding-left: var(--gutter-h);
+            }
+          }
+
+          &__fields {
+            & > .tabs-field,
+            & > .group-field {
+              margin-right: calc(var(--gutter-h) * -1);
+            }
+          }
+        }
+      }
 
-    .document-fields {
       &__main {
         width: 100%;
         min-height: initial;
@@ -98,95 +154,41 @@
         border-left: 0;
       }
 
-      &__sidebar {
-        padding-bottom: base(3.5);
-        overflow: visible;
+      &__form {
+        display: block;
       }
 
       &__sidebar-fields {
         padding-top: 0;
         padding-left: var(--gutter-h);
+        padding-right: var(--gutter-h);
         padding-bottom: 0;
-      }
-    }
-  }
-
-  @include mid-break {
-    display: block;
+        gap: base(0.5);
 
-    &--has-sidebar {
-      .document-fields {
-        &__main {
-          width: 100%;
-        }
-
-        &__edit {
-          [dir='ltr'] & {
-            border-right: 0;
-            padding-right: var(--gutter-h);
-          }
-
-          [dir='rtl'] & {
-            border-left: 0;
-            padding-left: var(--gutter-h);
-          }
+        [dir='ltr'] & {
+          padding-right: var(--gutter-h);
         }
 
-        &__fields {
-          & > .tabs-field,
-          & > .group-field {
-            margin-right: calc(var(--gutter-h) * -1);
-          }
+        [dir='rtl'] & {
+          padding-left: var(--gutter-h);
         }
       }
-    }
-
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
-      border-left: 0;
-    }
 
-    &__form {
-      display: block;
+      &__sidebar {
+        padding-bottom: base(3.5);
+        overflow: visible;
+      }
     }
 
-    &__sidebar-fields {
-      padding-top: 0;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
-      padding-bottom: 0;
-      gap: base(0.5);
-
-      [dir='ltr'] & {
-        padding-right: var(--gutter-h);
+    @include small-break {
+      &__sidebar-wrap {
+        min-width: initial;
+        width: 100%;
       }
 
-      [dir='rtl'] & {
-        padding-left: var(--gutter-h);
+      &__edit {
+        padding-top: calc(var(--base) / 2);
       }
     }
-
-    &__sidebar {
-      padding-bottom: base(3.5);
-      overflow: visible;
-    }
-  }
-
-  @include small-break {
-    &__sidebar-wrap {
-      min-width: initial;
-      width: 100%;
-    }
-
-    &__edit {
-      padding-top: calc(var(--base) / 2);
-    }
   }
 }

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":"AAAA,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

@@ -1,22 +1,66 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 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({
-        id,
-        disabled
-    });
-    return /*#__PURE__*/ React.createElement(Fragment, null, children({
+export const DraggableSortableItem = props => {
+  const $ = _c(12);
+  const {
+    id,
+    children,
+    disabled
+  } = props;
+  let t0;
+  if ($[0] !== id || $[1] !== disabled) {
+    t0 = {
+      id,
+      disabled
+    };
+    $[0] = id;
+    $[1] = disabled;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useDraggableSortable(t0);
+  const t1 = isDragging ? "grabbing" : "grab";
+  let t2;
+  if ($[3] !== t1 || $[4] !== attributes || $[5] !== isDragging || $[6] !== listeners || $[7] !== setNodeRef || $[8] !== transform || $[9] !== transition || $[10] !== children) {
+    t2 = _jsx(Fragment, {
+      children: children({
         attributes: {
-            ...attributes,
-            style: {
-                cursor: isDragging ? 'grabbing' : 'grab'
-            }
+          ...attributes,
+          style: {
+            cursor: t1
+          }
         },
+        isDragging,
         listeners,
         setNodeRef,
-        transform
-    }));
+        transform,
+        transition
+      })
+    });
+    $[3] = t1;
+    $[4] = attributes;
+    $[5] = isDragging;
+    $[6] = listeners;
+    $[7] = setNodeRef;
+    $[8] = transform;
+    $[9] = transition;
+    $[10] = children;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DraggableSortable/DraggableSortableItem/index.tsx"],"sourcesContent":["import 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAEA,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,oBAACN,gBACEK,SAAS;QACRE,YAAY;YACV,GAAGA,UAAU;YACbK,OAAO;gBACLC,QAAQL,aAAa,aAAa;YACpC;QACF;QACAC;QACAC;QACAC;IACF;AAGN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useDraggableSortable","DraggableSortableItem","props","$","id","children","disabled","t0","attributes","isDragging","listeners","setNodeRef","transform","transition","t1","t2","_jsx","style","cursor"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAIhC,SAASC,oBAAoB,QAAQ;AAErC,OAAO,MAAMC,qBAAA,GAITC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACF;IAAAO,EAAA;IAAAC,QAAA;IAAAC;EAAA,IAAmCJ,KAAA;EAAA,IAAAK,EAAA;EAAA,IAAAJ,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAG,QAAA;IAGZC,EAAA;MAAAH,EAAA;MAAAE;IAAA;IAGrBH,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAG,QAAA;IAAAH,CAAA,MAAAI,EAAA;EAAA;IAAAA,EAAA,GAAAJ,CAAA;EAAA;EAJF;IAAAK,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC;EAAA,IACEb,oBAAA,CAAqBO,EAGrB;EAQgB,MAAAO,EAAA,GAAAL,UAAA,GAAa,aAAa;EAAA,IAAAM,EAAA;EAAA,IAAAZ,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAK,UAAA,IAAAL,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAU,UAAA,IAAAV,CAAA,SAAAE,QAAA;IAL1CU,EAAA,GAAAC,IAAA,CAAAjB,QAAA;MAAAM,QAAA,EACGA,QAAA;QAAAG,UAAA;UAAA,GAEMA,UAAU;UAAAS,KAAA;YAAAC,MAAA,EAEHJ;UAA0B;QAAA;QAAAL,UAAA;QAAAC,SAAA;QAAAC,UAAA;QAAAC,SAAA;QAAAC;MAAA,CAQxC;IAAA,C;;;;;;;;;;;;;SAbFE,E;CAgBJ","ignoreList":[]}

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

@@ -1,3 +1,2 @@
-export { };
-
+export {};
 //# sourceMappingURL=types.js.map

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":[],"rangeMappings":"","mappings":"AAaA,WAEC"}
+{"version":3,"file":"types.js","names":[],"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"],"mappings":"AAaA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD7C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuD7C,CAAA"}