@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      if (!active || !over) return\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"names":["DndContext","KeyboardSensor","PointerSensor","closestCenter","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","children","className","ids","onDragEnd","id","setNodeRef","sensors","activationConstraint","distance","coordinateGetter","handleDragEnd","event","active","over","moveFromIndex","findIndex","_id","moveToIndex","collisionDetection","items","div","ref"],"mappings":"AAAA;;AAGA,SACEA,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL,gBAAe;AACtB,SAASC,eAAe,EAAEC,2BAA2B,QAAQ,oBAAmB;AAChF,OAAOC,SAASC,WAAW,EAAEC,KAAK,QAAQ,QAAO;AAMjD,OAAO,MAAMC,oBAAqC,CAACC;IACjD,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,SAAS,EAAE,GAAGJ;IAEhD,MAAMK,KAAKP;IAEX,MAAM,EAAEQ,UAAU,EAAE,GAAGf,aAAa;QAClCc;IACF;IAEA,MAAME,UAAUd,WACdD,UAAUH,eAAe;QACvBmB,sBAAsB;YACpBC,UAAU;QACZ;IACF,IACAjB,UAAUJ,gBAAgB;QACxBsB,kBAAkBf;IACpB;IAGF,MAAMgB,gBAAgBd,YACpB,CAACe;QACC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;QAEzB,IAAI,CAACC,UAAU,CAACC,MAAM;QAEtB,IAAI,OAAOV,cAAc,YAAY;YACnCA,UAAU;gBACRQ;gBACAG,eAAeZ,IAAIa,SAAS,CAAC,CAACC,MAAQA,QAAQJ,OAAOR,EAAE;gBACvDa,aAAaf,IAAIa,SAAS,CAAC,CAACC,MAAQA,QAAQH,KAAKT,EAAE;YACrD;QACF;IACF,GACA;QAACD;QAAWD;KAAI;IAGlB,qBACE,KAAChB;QACCgC,oBAAoB7B;QACpBe,IAAIA;QACJD,WAAWO;QACXJ,SAASA;kBAET,cAAA,KAACb;YAAgB0B,OAAOjB;sBACtB,cAAA,KAACkB;gBAAInB,WAAWA;gBAAWoB,KAAKhB;0BAC7BL;;;;AAKX,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","closestCenter","DndContext","KeyboardSensor","PointerSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      event.activatorEvent.stopPropagation()\n\n      if (!active || !over) {\n        return\n      }\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAF,aAAA,EAAyBmB,EAIzB,GACAjB,SAAA,CAAAH,cAAA,EAA0ByB,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAG,GAAA;IAIAa,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAEzBA,KAAA,CAAAG,cAAA,CAAAC,eAAA,CAAoC;MAAA,IAEhC,CAACH,MAAA,KAAWC,IAAA;QAAA;MAAA;MAAA,IAIZ,OAAOf,SAAA,KAAc;QACvBA,SAAA;UAAAa,KAAA;UAAAK,aAAA,EAEiBnB,GAAA,CAAAoB,SAAA,CAAAC,GAAA,IAAuBA,GAAA,KAAQN,MAAA,CAAAb,EAAS;UAAAoB,WAAA,EAC1CtB,GAAA,CAAAoB,SAAA,CAAAG,KAAA,IAAuBF,KAAA,KAAQL,IAAA,CAAAd,EAAO;QAAA,CACrD;MAAA;IAAA;IAEJL,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAjBF,MAAA2B,aAAA,GAAsBX,EAkBJ;EAAA,IAAAY,EAAA;EAAA,IAAA5B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,SAAAG,GAAA,IAAAH,CAAA,SAAAK,EAAA,IAAAL,CAAA,SAAA2B,aAAA,IAAA3B,CAAA,SAAAe,OAAA;IAIhBa,EAAA,GAAAC,IAAA,CAAA1C,UAAA;MAAA2C,kBAAA,EAAA5C,aAAA;MAAAmB,EAAA;MAAAD,SAAA,EAGauB,aAAA;MAAAZ,OAAA;MAAAd,QAAA,EAGX4B,IAAA,CAAApC,eAAA;QAAAsC,KAAA,EAAwB5B,GAAA;QAAAF,QAAA,EACtB4B,IAAA,CAAC;UAAA3B,SAAA;UAAA8B,GAAA,EAA+BzB,UAAA;UAAAN;QAAA,C;;;;;;;;;;;;;;SAPpC2B,E;CAaJ","ignoreList":[]}

package/dist/elements/DraggableSortable/types.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core'\nimport type { Ref } from 'react'\n\nexport type Props = {\n  children: React.ReactNode\n  className?: string\n  droppableRef?: Ref<HTMLElement>\n  ids: string[]\n  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void\n}\n"],"names":[],"mappings":"AAGA,WAMC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core'\nimport type { Ref } from 'react'\n\nexport type Props = {\n  children: React.ReactNode\n  className?: string\n  droppableRef?: Ref<HTMLElement>\n  ids: string[]\n  onDragEnd: (e: { event: DragEndEvent; moveFromIndex: number; moveToIndex: number }) => void\n}\n"],"mappings":"AAGA","ignoreList":[]}

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

@@ -1,29 +1,90 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { useSortable } from '@dnd-kit/sortable';
-export const useDraggableSortable = (props)=>{
-    const { id, disabled } = props;
-    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
-        id,
-        disabled,
-        transition: {
-            duration: 250,
-            easing: 'cubic-bezier(0, 0.2, 0.2, 1)'
-        }
-    });
-    return {
-        attributes: {
-            ...attributes,
-            style: {
-                cursor: isDragging ? 'grabbing' : 'grab',
-                transition
-            }
-        },
-        isDragging,
-        listeners,
-        setNodeRef,
-        transform: transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        transition
+export const useDraggableSortable = props => {
+  const $ = _c(17);
+  const {
+    id,
+    disabled
+  } = props;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      duration: 250,
+      easing: "cubic-bezier(0, 0.2, 0.2, 1)"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== id || $[2] !== disabled) {
+    t1 = {
+      id,
+      disabled,
+      transition: t0
+    };
+    $[1] = id;
+    $[2] = disabled;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable(t1);
+  const t2 = isDragging ? "grabbing" : "grab";
+  let t3;
+  if ($[4] !== t2 || $[5] !== transition) {
+    t3 = {
+      cursor: t2,
+      transition
     };
+    $[4] = t2;
+    $[5] = transition;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== attributes || $[8] !== t3) {
+    t4 = {
+      ...attributes,
+      style: t3
+    };
+    $[7] = attributes;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`;
+  let t6;
+  if ($[10] !== t4 || $[11] !== isDragging || $[12] !== listeners || $[13] !== setNodeRef || $[14] !== t5 || $[15] !== transition) {
+    t6 = {
+      attributes: t4,
+      isDragging,
+      listeners,
+      setNodeRef,
+      transform: t5,
+      transition
+    };
+    $[10] = t4;
+    $[11] = isDragging;
+    $[12] = listeners;
+    $[13] = setNodeRef;
+    $[14] = t5;
+    $[15] = transition;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
 };
-
 //# sourceMappingURL=index.js.map

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, 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"}
+{"version":3,"file":"index.js","names":["c","_c","useSortable","useDraggableSortable","props","$","id","disabled","t0","Symbol","for","duration","easing","t1","transition","attributes","isDragging","listeners","setNodeRef","transform","t2","t3","cursor","t4","style","t5","x","y","t6"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAGA,SAASC,WAAW,QAAQ;AAI5B,OAAO,MAAMC,oBAAA,GAAuBC,KAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAClC;IAAAK,EAAA;IAAAC;EAAA,IAAyBH,KAAA;EAAA,IAAAI,EAAA;EAAA,IAAAH,CAAA,QAAAI,MAAA,CAAAC,GAAA;IAKXF,EAAA;MAAAG,QAAA;MAAAC,MAAA,EAEF;IAAA;IACVP,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAE,QAAA;IAN2FM,EAAA;MAAAP,EAAA;MAAAC,QAAA;MAAAO,UAAA,EAG/EN;IAGZ;IACFH,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAPA;IAAAU,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAL;EAAA,IAAiFZ,WAAA,CAAYW,EAO7F;EAMc,MAAAO,EAAA,GAAAJ,UAAA,GAAa,aAAa;EAAA,IAAAK,EAAA;EAAA,IAAAhB,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAS,UAAA;IAD7BO,EAAA;MAAAC,MAAA,EACGF,EAA0B;MAAAN;IAAA;IAEpCT,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAlB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAgB,EAAA;IALUE,EAAA;MAAA,GACPR,UAAU;MAAAS,KAAA,EACNH;IAGP;IACFhB,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAIW,MAAAoB,EAAA,GAAAN,SAAA,IAAa,eAAeA,SAAA,CAAAO,CAAA,OAAkBP,SAAA,CAAAQ,CAAA,QAAmB;EAAA,IAAAC,EAAA;EAAA,IAAAvB,CAAA,SAAAkB,EAAA,IAAAlB,CAAA,SAAAW,UAAA,IAAAX,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAoB,EAAA,IAAApB,CAAA,SAAAS,UAAA;IAXvEc,EAAA;MAAAb,UAAA,EACOQ,EAMZ;MAAAP,UAAA;MAAAC,SAAA;MAAAC,UAAA;MAAAC,SAAA,EAIWM,EAAiE;MAAAX;IAAA;IAE9ET,CAAA,OAAAkB,EAAA;IAAAlB,CAAA,OAAAW,UAAA;IAAAX,CAAA,OAAAY,SAAA;IAAAZ,CAAA,OAAAa,UAAA;IAAAb,CAAA,OAAAoB,EAAA;IAAApB,CAAA,OAAAS,UAAA;IAAAT,CAAA,OAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EAAA,OAbOuB,EAaP;AAAA,CACF","ignoreList":[]}

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

@@ -1,11 +1,11 @@
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import type { HTMLAttributes } from 'react';
 export type UseDraggableSortableReturn = {
-    attributes: HTMLAttributes<unknown>;
-    isDragging?: boolean;
-    listeners: SyntheticListenerMap;
-    setNodeRef: (node: HTMLElement | null) => void;
-    transform: string;
-    transition: string;
+    readonly attributes: HTMLAttributes<unknown>;
+    readonly isDragging?: boolean;
+    readonly listeners: SyntheticListenerMap;
+    readonly setNodeRef: (node: HTMLElement | null) => void;
+    readonly transform: string;
+    readonly 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;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,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,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC5C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAA;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA"}

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

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

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  transition: string\n}\n"],"names":[],"mappings":"AAGA,WAOC"}
+{"version":3,"file":"types.js","names":[],"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  readonly attributes: HTMLAttributes<unknown>\n  readonly isDragging?: boolean\n  readonly listeners: SyntheticListenerMap\n  readonly setNodeRef: (node: HTMLElement | null) => void\n  readonly transform: string\n  readonly transition: string\n}\n"],"mappings":"AAGA","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Props, TogglerProps } from './types.js';
 import './index.scss';
+export declare const drawerZBase = 100;
 export declare const formatDrawerSlug: ({ slug, depth }: {
     depth: number;
     slug: string;
@@ -8,4 +9,9 @@ export declare const formatDrawerSlug: ({ slug, depth }: {
 export { useDrawerSlug } from './useDrawerSlug.js';
 export declare const DrawerToggler: React.FC<TogglerProps>;
 export declare const Drawer: React.FC<Props>;
+export declare const DrawerDepthContext: React.Context<number>;
+export declare const DrawerDepthProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useDrawerDepth: () => number;
 //# sourceMappingURL=index.d.ts.map

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,CAuFlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAE1F,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,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,CAyBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuFlC,CAAA;AAED,eAAO,MAAM,kBAAkB,uBAAmB,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAKvE,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,MAAwC,CAAA"}

package/dist/elements/Drawer/index.js

@@ -1,121 +1,258 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { XIcon } from '../../icons/X/index.js';
-import { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'drawer';
-const zBase = 100;
-export const formatDrawerSlug = ({ slug, depth })=>`drawer_${depth}_${slug}`;
+export const drawerZBase = 100;
+export const formatDrawerSlug = ({
+  slug,
+  depth
+}) => `drawer_${depth}_${slug}`;
 export { useDrawerSlug } from './useDrawerSlug.js';
-export const DrawerToggler = ({ slug, children, className, disabled, onClick, ...rest })=>{
-    const { openModal } = useModal();
-    const handleClick = useCallback((e)=>{
-        openModal(slug);
-        if (typeof onClick === 'function') onClick(e);
-    }, [
-        openModal,
-        slug,
-        onClick
-    ]);
-    return /*#__PURE__*/ _jsx("button", {
-        className: className,
-        disabled: disabled,
-        onClick: handleClick,
-        type: "button",
-        ...rest,
-        children: children
+export const DrawerToggler = t0 => {
+  const $ = _c(17);
+  let slug;
+  let onClick;
+  let className;
+  let disabled;
+  let rest;
+  let children;
+  if ($[0] !== t0) {
+    ({
+      slug,
+      children,
+      className,
+      disabled,
+      onClick,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = slug;
+    $[2] = onClick;
+    $[3] = className;
+    $[4] = disabled;
+    $[5] = rest;
+    $[6] = children;
+  } else {
+    slug = $[1];
+    onClick = $[2];
+    className = $[3];
+    disabled = $[4];
+    rest = $[5];
+    children = $[6];
+  }
+  const {
+    openModal
+  } = useModal();
+  let t1;
+  if ($[7] !== openModal || $[8] !== slug || $[9] !== onClick) {
+    t1 = e => {
+      openModal(slug);
+      if (typeof onClick === "function") {
+        onClick(e);
+      }
+    };
+    $[7] = openModal;
+    $[8] = slug;
+    $[9] = onClick;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  const handleClick = t1;
+  let t2;
+  if ($[11] !== className || $[12] !== disabled || $[13] !== handleClick || $[14] !== rest || $[15] !== children) {
+    t2 = _jsx("button", {
+      className,
+      disabled,
+      onClick: handleClick,
+      type: "button",
+      ...rest,
+      children
     });
+    $[11] = className;
+    $[12] = disabled;
+    $[13] = handleClick;
+    $[14] = rest;
+    $[15] = children;
+    $[16] = t2;
+  } else {
+    t2 = $[16];
+  }
+  return t2;
 };
-export const Drawer = ({ slug, Header, children, className, gutter = true, hoverTitle, title })=>{
-    const { t } = useTranslation();
-    const { closeModal, modalState } = useModal();
-    const drawerDepth = useEditDepth();
-    const [isOpen, setIsOpen] = useState(false);
-    const [animateIn, setAnimateIn] = useState(false);
-    useEffect(()=>{
-        setIsOpen(modalState[slug]?.isOpen);
-    }, [
-        slug,
-        modalState
-    ]);
-    useEffect(()=>{
-        setAnimateIn(isOpen);
-    }, [
-        isOpen
-    ]);
-    if (isOpen) {
-        // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers
-        return /*#__PURE__*/ _jsxs(Modal, {
-            className: [
-                className,
-                baseClass,
-                animateIn && `${baseClass}--is-open`,
-                drawerDepth > 1 && `${baseClass}--nested`
-            ].filter(Boolean).join(' '),
-            slug: slug,
+export const Drawer = t0 => {
+  const $ = _c(26);
+  const {
+    slug,
+    children,
+    className,
+    gutter: t1,
+    Header,
+    hoverTitle,
+    title
+  } = t0;
+  const gutter = t1 === undefined ? true : t1;
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeModal,
+    modalState
+  } = useModal();
+  const drawerDepth = useDrawerDepth();
+  const [isOpen, setIsOpen] = useState(false);
+  const [animateIn, setAnimateIn] = useState(false);
+  let t2;
+  let t3;
+  if ($[0] !== modalState || $[1] !== slug) {
+    t2 = () => {
+      setIsOpen(modalState[slug]?.isOpen);
+    };
+    t3 = [slug, modalState];
+    $[0] = modalState;
+    $[1] = slug;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  let t5;
+  if ($[4] !== isOpen) {
+    t4 = () => {
+      setAnimateIn(isOpen);
+    };
+    t5 = [isOpen];
+    $[4] = isOpen;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t4 = $[5];
+    t5 = $[6];
+  }
+  useEffect(t4, t5);
+  if (isOpen) {
+    const t6 = animateIn && `${baseClass}--is-open`;
+    const t7 = drawerDepth > 1 && `${baseClass}--nested`;
+    let t8;
+    if ($[7] !== className || $[8] !== t6 || $[9] !== t7) {
+      t8 = [className, baseClass, t6, t7].filter(Boolean);
+      $[7] = className;
+      $[8] = t6;
+      $[9] = t7;
+      $[10] = t8;
+    } else {
+      t8 = $[10];
+    }
+    const t9 = t8.join(" ");
+    const t10 = drawerZBase + drawerDepth;
+    let t11;
+    if ($[11] !== t10 || $[12] !== drawerDepth || $[13] !== t || $[14] !== slug || $[15] !== closeModal || $[16] !== Header || $[17] !== hoverTitle || $[18] !== title || $[19] !== children || $[20] !== gutter || $[21] !== t9) {
+      let t12;
+      if ($[23] !== closeModal || $[24] !== slug) {
+        t12 = () => closeModal(slug);
+        $[23] = closeModal;
+        $[24] = slug;
+        $[25] = t12;
+      } else {
+        t12 = $[25];
+      }
+      t11 = _jsx(DrawerDepthProvider, {
+        children: _jsxs(Modal, {
+          className: t9,
+          slug,
+          style: {
+            zIndex: t10
+          },
+          children: [(!drawerDepth || drawerDepth === 1) && _jsx("div", {
+            className: `${baseClass}__blur-bg`
+          }), _jsx("button", {
+            "aria-label": t("general:close"),
+            className: `${baseClass}__close`,
+            id: `close-drawer__${slug}`,
+            onClick: t12,
+            type: "button"
+          }), _jsxs("div", {
+            className: `${baseClass}__content`,
             style: {
-                zIndex: zBase + drawerDepth
+              width: `calc(100% - (${drawerDepth} * var(--gutter-h))`
             },
-            children: [
-                (!drawerDepth || drawerDepth === 1) && /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__blur-bg`
-                }),
-                /*#__PURE__*/ _jsx("button", {
-                    "aria-label": t('general:close'),
-                    className: `${baseClass}__close`,
-                    id: `close-drawer__${slug}`,
-                    onClick: ()=>closeModal(slug),
-                    type: "button"
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__content`,
-                    style: {
-                        width: `calc(100% - (${drawerDepth} * var(--gutter-h))`
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            className: `${baseClass}__blur-bg-content`
-                        }),
-                        /*#__PURE__*/ _jsx(Gutter, {
-                            className: `${baseClass}__content-children`,
-                            left: gutter,
-                            right: gutter,
-                            children: /*#__PURE__*/ _jsxs(EditDepthContext.Provider, {
-                                value: drawerDepth + 1,
-                                children: [
-                                    Header,
-                                    Header === undefined && /*#__PURE__*/ _jsxs("div", {
-                                        className: `${baseClass}__header`,
-                                        children: [
-                                            /*#__PURE__*/ _jsx("h2", {
-                                                className: `${baseClass}__header__title`,
-                                                title: hoverTitle ? title : null,
-                                                children: title
-                                            }),
-                                            /*#__PURE__*/ _jsx("button", {
-                                                "aria-label": t('general:close'),
-                                                className: `${baseClass}__header__close`,
-                                                id: `close-drawer__${slug}`,
-                                                onClick: ()=>closeModal(slug),
-                                                type: "button",
-                                                children: /*#__PURE__*/ _jsx(XIcon, {})
-                                            })
-                                        ]
-                                    }),
-                                    children
-                                ]
-                            })
-                        })
-                    ]
-                })
-            ]
-        });
+            children: [_jsx("div", {
+              className: `${baseClass}__blur-bg-content`
+            }), _jsxs(Gutter, {
+              className: `${baseClass}__content-children`,
+              left: gutter,
+              right: gutter,
+              children: [Header, Header === undefined && _jsxs("div", {
+                className: `${baseClass}__header`,
+                children: [_jsx("h2", {
+                  className: `${baseClass}__header__title`,
+                  title: hoverTitle ? title : null,
+                  children: title
+                }), _jsx("button", {
+                  "aria-label": t("general:close"),
+                  className: `${baseClass}__header__close`,
+                  id: `close-drawer__${slug}`,
+                  onClick: () => closeModal(slug),
+                  type: "button",
+                  children: _jsx(XIcon, {})
+                })]
+              }), children]
+            })]
+          })]
+        })
+      });
+      $[11] = t10;
+      $[12] = drawerDepth;
+      $[13] = t;
+      $[14] = slug;
+      $[15] = closeModal;
+      $[16] = Header;
+      $[17] = hoverTitle;
+      $[18] = title;
+      $[19] = children;
+      $[20] = gutter;
+      $[21] = t9;
+      $[22] = t11;
+    } else {
+      t11 = $[22];
     }
-    return null;
+    return t11;
+  }
+  return null;
+};
+export const DrawerDepthContext = /*#__PURE__*/createContext(1);
+export const DrawerDepthProvider = t0 => {
+  const $ = _c(3);
+  const {
+    children
+  } = t0;
+  const parentDepth = useDrawerDepth();
+  const depth = parentDepth + 1;
+  let t1;
+  if ($[0] !== depth || $[1] !== children) {
+    t1 = _jsx(DrawerDepthContext.Provider, {
+      value: depth,
+      children
+    });
+    $[0] = depth;
+    $[1] = children;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
+export const useDrawerDepth = () => {
+  return useContext(DrawerDepthContext);
 };
-
 //# sourceMappingURL=index.js.map