@payloadcms/ui 3.80.0-canary.3 → 3.80.0-internal-debug.daef79f

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","closestCenter","DndContext","KeyboardSensor","MouseSensor","TouchSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","onDragStart","dndContextID","sortableContextID","t0","id","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","delay","tolerance","t3","coordinateGetter","sensors","t4","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t5","event_0","active_0","handleDragStart","t6","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\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, onDragStart } = props\n\n  const dndContextID = useId()\n  const sortableContextID = useId()\n\n  const { setNodeRef } = useDroppable({\n    id: dndContextID,\n  })\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint: {\n        delay: 200,\n        tolerance: 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  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const { active } = event\n\n      if (!active) {\n        return\n      }\n\n      if (typeof onDragStart === 'function') {\n        onDragStart({ id: active.id, event })\n      }\n    },\n    [onDragStart],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n      id={dndContextID}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      sensors={sensors}\n    >\n      <SortableContext\n        // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n        id={sortableContextID}\n        items={ids}\n      >\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\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, onDragStart } = props\n\n  const dndContextID = useId()\n  const sortableContextID = useId()\n\n  const { setNodeRef } = useDroppable({\n    id: dndContextID,\n  })\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint: {\n        delay: 200,\n        tolerance: 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  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const { active } = event\n\n      if (!active) {\n        return\n      }\n\n      if (typeof onDragStart === 'function') {\n        onDragStart({ id: active.id, event })\n      }\n    },\n    [onDragStart],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n      id={dndContextID}\n      onDragEnd={handleDragEnd}\n      onDragStart={handleDragStart}\n      sensors={sensors}\n    >\n      <SortableContext\n        // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n        id={sortableContextID}\n        items={ids}\n      >\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"names":["closestCenter","DndContext","KeyboardSensor","MouseSensor","TouchSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","children","className","ids","onDragEnd","onDragStart","dndContextID","sortableContextID","setNodeRef","id","sensors","activationConstraint","distance","delay","tolerance","coordinateGetter","handleDragEnd","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","handleDragStart","collisionDetection","items","div","ref"],"mappings":"AAAA;;AAGA,SACEA,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,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,EAAEC,WAAW,EAAE,GAAGL;IAE7D,MAAMM,eAAeR;IACrB,MAAMS,oBAAoBT;IAE1B,MAAM,EAAEU,UAAU,EAAE,GAAGjB,aAAa;QAClCkB,IAAIH;IACN;IAEA,MAAMI,UAAUjB,WACdD,UAAUH,aAAa;QACrBsB,sBAAsB;YACpBC,UAAU;QACZ;IACF,IACApB,UAAUF,aAAa;QACrBqB,sBAAsB;YACpBE,OAAO;YACPC,WAAW;QACb;IACF,IACAtB,UAAUJ,gBAAgB;QACxB2B,kBAAkBpB;IACpB;IAGF,MAAMqB,gBAAgBnB,YACpB,CAACoB;QACC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGF;QAEzBA,MAAMG,cAAc,CAACC,eAAe;QAEpC,IAAI,CAACH,UAAU,CAACC,MAAM;YACpB;QACF;QAEA,IAAI,OAAOf,cAAc,YAAY;YACnCA,UAAU;gBACRa;gBACAK,eAAenB,IAAIoB,SAAS,CAAC,CAACC,MAAQA,QAAQN,OAAOT,EAAE;gBACvDgB,aAAatB,IAAIoB,SAAS,CAAC,CAACC,MAAQA,QAAQL,KAAKV,EAAE;YACrD;QACF;IACF,GACA;QAACL;QAAWD;KAAI;IAGlB,MAAMuB,kBAAkB7B,YACtB,CAACoB;QACC,MAAM,EAAEC,MAAM,EAAE,GAAGD;QAEnB,IAAI,CAACC,QAAQ;YACX;QACF;QAEA,IAAI,OAAOb,gBAAgB,YAAY;YACrCA,YAAY;gBAAEI,IAAIS,OAAOT,EAAE;gBAAEQ;YAAM;QACrC;IACF,GACA;QAACZ;KAAY;IAGf,qBACE,QAAClB;QACCwC,oBAAoBzC;QACpB,6FAA6F;QAC7FuB,IAAIH;QACJF,WAAWY;QACXX,aAAaqB;QACbhB,SAASA;kBAET,cAAA,QAAChB;YACC,6FAA6F;YAC7Fe,IAAIF;YACJqB,OAAOzB;sBAEP,cAAA,QAAC0B;gBAAI3B,WAAWA;gBAAW4B,KAAKtB;0BAC7BP;;;;;;;;;;;;;;;;AAKX,EAAC"}

package/dist/elements/DraggableSortable/types.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } 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  onDragStart?: (e: { event: DragStartEvent; id: number | string }) => void\n}\n"],"mappings":"AAGA","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } 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  onDragStart?: (e: { event: DragStartEvent; id: number | string }) => void\n}\n"],"names":[],"mappings":"AAGA,WAOC"}

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

@@ -1,90 +1,30 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
 import { useSortable } from '@dnd-kit/sortable';
-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] !== disabled || $[2] !== id) {
-    t1 = {
-      id,
-      disabled,
-      transition: t0
-    };
-    $[1] = disabled;
-    $[2] = id;
-    $[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
+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)`,
+        // translate3d is faster than translate in most browsers
+        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] !== isDragging || $[11] !== listeners || $[12] !== setNodeRef || $[13] !== t4 || $[14] !== t5 || $[15] !== transition) {
-    t6 = {
-      attributes: t4,
-      isDragging,
-      listeners,
-      setNodeRef,
-      transform: t5,
-      transition
-    };
-    $[10] = isDragging;
-    $[11] = listeners;
-    $[12] = setNodeRef;
-    $[13] = t4;
-    $[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,"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,QAAAE,QAAA,IAAAF,CAAA,QAAAC,EAAA;IAN2FO,EAAA;MAAAP,EAAA;MAAAC,QAAA;MAAAO,UAAA,EAG/EN;IAGZ;IACFH,CAAA,MAAAE,QAAA;IAAAF,CAAA,MAAAC,EAAA;IAAAD,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,SAAAW,UAAA,IAAAX,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAkB,EAAA,IAAAlB,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,OAAAW,UAAA;IAAAX,CAAA,OAAAY,SAAA;IAAAZ,CAAA,OAAAa,UAAA;IAAAb,CAAA,OAAAkB,EAAA;IAAAlB,CAAA,OAAAoB,EAAA;IAAApB,CAAA,OAAAS,UAAA;IAAAT,CAAA,OAAAuB,EAAA;EAAA;IAAAA,EAAA,GAAAvB,CAAA;EAAA;EAAA,OAbOuB,EAaP;AAAA,CACF","ignoreList":[]}
+{"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;QAAE,wDAAwD;QACtIN;IACF;AACF,EAAC"}

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

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

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

@@ -1 +1 @@
-{"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":[]}
+{"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  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"],"names":[],"mappings":"AAGA,WAOC"}

package/dist/elements/Drawer/index.js

@@ -1,7 +1,5 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { Modal, useModal } from '@faceless-ui/modal';
 import React, { createContext, use, useCallback, useLayoutEffect, useState } from 'react';
 import { XIcon } from '../../icons/X/index.js';
@@ -10,198 +8,174 @@ import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'drawer';
 export const drawerZBase = 100;
-export const formatDrawerSlug = ({
-  slug,
-  depth
-}) => `drawer_${depth}_${slug}`;
+export const formatDrawerSlug = ({ slug, depth })=>`drawer_${depth}_${slug}`;
 export { useDrawerSlug } from './useDrawerSlug.js';
-export const DrawerToggler = t0 => {
-  const $ = _c(4);
-  const {
-    slug,
-    children,
-    className,
-    disabled,
-    onClick,
-    ...rest
-  } = t0;
-  const {
-    openModal
-  } = useModal();
-  let t1;
-  if ($[0] !== onClick || $[1] !== openModal || $[2] !== slug) {
-    t1 = e => {
-      openModal(slug);
-      if (typeof onClick === "function") {
-        onClick(e);
-      }
-    };
-    $[0] = onClick;
-    $[1] = openModal;
-    $[2] = slug;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const handleClick = t1;
-  return _jsx("button", {
-    className,
-    disabled,
-    onClick: handleClick,
-    type: "button",
-    ...rest,
-    children
-  });
+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__*/ _jsxDEV("button", {
+        className: className,
+        disabled: disabled,
+        onClick: handleClick,
+        type: "button",
+        ...rest,
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/Drawer/index.tsx",
+        lineNumber: 42,
+        columnNumber: 5
+    }, this);
 };
-export const Drawer = t0 => {
-  const $ = _c(22);
-  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 = !!modalState[slug]?.isOpen;
-  const [animateIn, setAnimateIn] = useState(isOpen);
-  let t2;
-  let t3;
-  if ($[0] !== isOpen) {
-    t2 = () => {
-      setAnimateIn(isOpen);
-    };
-    t3 = [isOpen];
-    $[0] = isOpen;
-    $[1] = t2;
-    $[2] = t3;
-  } else {
-    t2 = $[1];
-    t3 = $[2];
-  }
-  useLayoutEffect(t2, t3);
-  if (isOpen) {
-    const t4 = animateIn && `${baseClass}--is-open`;
-    const t5 = drawerDepth > 1 && `${baseClass}--nested`;
-    let t6;
-    if ($[3] !== className || $[4] !== t4 || $[5] !== t5) {
-      t6 = [className, baseClass, t4, t5].filter(Boolean);
-      $[3] = className;
-      $[4] = t4;
-      $[5] = t5;
-      $[6] = t6;
-    } else {
-      t6 = $[6];
-    }
-    const t7 = t6.join(" ");
-    const t8 = drawerZBase + drawerDepth;
-    let t9;
-    if ($[7] !== Header || $[8] !== children || $[9] !== closeModal || $[10] !== drawerDepth || $[11] !== gutter || $[12] !== hoverTitle || $[13] !== slug || $[14] !== t || $[15] !== t7 || $[16] !== t8 || $[17] !== title) {
-      let t10;
-      if ($[19] !== closeModal || $[20] !== slug) {
-        t10 = () => closeModal(slug);
-        $[19] = closeModal;
-        $[20] = slug;
-        $[21] = t10;
-      } else {
-        t10 = $[21];
-      }
-      t9 = _jsx(DrawerDepthProvider, {
-        children: _jsxs(Modal, {
-          className: t7,
-          closeOnBlur: false,
-          slug,
-          style: {
-            zIndex: t8
-          },
-          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: t10,
-            type: "button"
-          }), _jsxs("div", {
-            className: `${baseClass}__content`,
-            style: {
-              width: `calc(100% - (${drawerDepth} * var(--gutter-h)))`
-            },
-            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]
-            })]
-          })]
-        })
-      });
-      $[7] = Header;
-      $[8] = children;
-      $[9] = closeModal;
-      $[10] = drawerDepth;
-      $[11] = gutter;
-      $[12] = hoverTitle;
-      $[13] = slug;
-      $[14] = t;
-      $[15] = t7;
-      $[16] = t8;
-      $[17] = title;
-      $[18] = t9;
-    } else {
-      t9 = $[18];
+export const Drawer = ({ slug, children, className, gutter = true, Header, hoverTitle, title })=>{
+    const { t } = useTranslation();
+    const { closeModal, modalState } = useModal();
+    const drawerDepth = useDrawerDepth();
+    const isOpen = !!modalState[slug]?.isOpen;
+    const [animateIn, setAnimateIn] = useState(isOpen);
+    useLayoutEffect(()=>{
+        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__*/ _jsxDEV(DrawerDepthProvider, {
+            children: /*#__PURE__*/ _jsxDEV(Modal, {
+                className: [
+                    className,
+                    baseClass,
+                    animateIn && `${baseClass}--is-open`,
+                    drawerDepth > 1 && `${baseClass}--nested`
+                ].filter(Boolean).join(' '),
+                // Fixes https://github.com/payloadcms/payload/issues/13778
+                closeOnBlur: false,
+                slug: slug,
+                style: {
+                    zIndex: drawerZBase + drawerDepth
+                },
+                children: [
+                    (!drawerDepth || drawerDepth === 1) && /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__blur-bg`
+                    }, void 0, false, {
+                        fileName: "src/elements/Drawer/index.tsx",
+                        lineNumber: 89,
+                        columnNumber: 51
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("button", {
+                        "aria-label": t('general:close'),
+                        className: `${baseClass}__close`,
+                        id: `close-drawer__${slug}`,
+                        onClick: ()=>closeModal(slug),
+                        type: "button"
+                    }, void 0, false, {
+                        fileName: "src/elements/Drawer/index.tsx",
+                        lineNumber: 90,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__content`,
+                        style: {
+                            width: `calc(100% - (${drawerDepth} * var(--gutter-h)))`
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__blur-bg-content`
+                            }, void 0, false, {
+                                fileName: "src/elements/Drawer/index.tsx",
+                                lineNumber: 103,
+                                columnNumber: 13
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(Gutter, {
+                                className: `${baseClass}__content-children`,
+                                left: gutter,
+                                right: gutter,
+                                children: [
+                                    Header,
+                                    Header === undefined && /*#__PURE__*/ _jsxDEV("div", {
+                                        className: `${baseClass}__header`,
+                                        children: [
+                                            /*#__PURE__*/ _jsxDEV("h2", {
+                                                className: `${baseClass}__header__title`,
+                                                title: hoverTitle ? title : null,
+                                                children: title
+                                            }, void 0, false, {
+                                                fileName: "src/elements/Drawer/index.tsx",
+                                                lineNumber: 108,
+                                                columnNumber: 19
+                                            }, this),
+                                            /* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...
+                    i.e. changing to a `div` element will fix the animation issue but will break accessibility
+                  */ /*#__PURE__*/ _jsxDEV("button", {
+                                                "aria-label": t('general:close'),
+                                                className: `${baseClass}__header__close`,
+                                                id: `close-drawer__${slug}`,
+                                                onClick: ()=>closeModal(slug),
+                                                type: "button",
+                                                children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
+                                                    fileName: "src/elements/Drawer/index.tsx",
+                                                    lineNumber: 121,
+                                                    columnNumber: 21
+                                                }, this)
+                                            }, void 0, false, {
+                                                fileName: "src/elements/Drawer/index.tsx",
+                                                lineNumber: 114,
+                                                columnNumber: 19
+                                            }, this)
+                                        ]
+                                    }, void 0, true, {
+                                        fileName: "src/elements/Drawer/index.tsx",
+                                        lineNumber: 107,
+                                        columnNumber: 17
+                                    }, this),
+                                    children
+                                ]
+                            }, void 0, true, {
+                                fileName: "src/elements/Drawer/index.tsx",
+                                lineNumber: 104,
+                                columnNumber: 13
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/Drawer/index.tsx",
+                        lineNumber: 97,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/Drawer/index.tsx",
+                lineNumber: 73,
+                columnNumber: 9
+            }, this)
+        }, void 0, false, {
+            fileName: "src/elements/Drawer/index.tsx",
+            lineNumber: 72,
+            columnNumber: 7
+        }, this);
     }
-    return t9;
-  }
-  return null;
+    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] !== children || $[1] !== depth) {
-    t1 = _jsx(DrawerDepthContext, {
-      value: depth,
-      children
-    });
-    $[0] = children;
-    $[1] = depth;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+export const DrawerDepthContext = /*#__PURE__*/ createContext(1);
+export const DrawerDepthProvider = ({ children })=>{
+    const parentDepth = useDrawerDepth();
+    const depth = parentDepth + 1;
+    return /*#__PURE__*/ _jsxDEV(DrawerDepthContext, {
+        value: depth,
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/Drawer/index.tsx",
+        lineNumber: 142,
+        columnNumber: 10
+    }, this);
 };
-export const useDrawerDepth = () => use(DrawerDepthContext);
+export const useDrawerDepth = ()=>use(DrawerDepthContext);
+
 //# sourceMappingURL=index.js.map