@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.e16cf59

package/dist/elements/DraggableSortable/index.js

@@ -1,75 +1,98 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { closestCenter, DndContext, KeyboardSensor, MouseSensor, TouchSensor, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import React, { useCallback, useId } from 'react';
+import React, { useCallback, useEffect, useId, useState } from 'react';
+import './index.css';
 export const DraggableSortable = props => {
-  const $ = _c(20);
+  const $ = _c(27);
   const {
     children,
     className,
     ids,
     onDragEnd,
-    onDragStart
+    onDragStart,
+    renderDragOverlay,
+    sortingStrategy
   } = props;
-  const dndContextID = useId();
-  const sortableContextID = useId();
+  const [activeId, setActiveId] = useState(null);
   let t0;
-  if ($[0] !== dndContextID) {
-    t0 = {
-      id: dndContextID
+  let t1;
+  if ($[0] !== activeId) {
+    t0 = () => {
+      if (activeId !== null) {
+        document.body.classList.add("is-dragging");
+        return _temp;
+      }
     };
-    $[0] = dndContextID;
+    t1 = [activeId];
+    $[0] = activeId;
     $[1] = t0;
+    $[2] = t1;
   } else {
     t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  const dndContextID = useId();
+  const sortableContextID = useId();
+  let t2;
+  if ($[3] !== dndContextID) {
+    t2 = {
+      id: dndContextID
+    };
+    $[3] = dndContextID;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
   }
   const {
     setNodeRef
-  } = useDroppable(t0);
-  let t1;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
+  } = useDroppable(t2);
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
       activationConstraint: {
         distance: 5
       }
     };
-    $[2] = t1;
+    $[5] = t3;
   } else {
-    t1 = $[2];
+    t3 = $[5];
   }
-  let t2;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = {
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
       activationConstraint: {
         delay: 200,
         tolerance: 5
       }
     };
-    $[3] = t2;
+    $[6] = t4;
   } else {
-    t2 = $[3];
+    t4 = $[6];
   }
-  let t3;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = {
+  let t5;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
       coordinateGetter: sortableKeyboardCoordinates
     };
-    $[4] = t3;
+    $[7] = t5;
   } else {
-    t3 = $[4];
+    t5 = $[7];
   }
-  const sensors = useSensors(useSensor(MouseSensor, t1), useSensor(TouchSensor, t2), useSensor(KeyboardSensor, t3));
-  let t4;
-  if ($[5] !== ids || $[6] !== onDragEnd) {
-    t4 = event => {
+  const sensors = useSensors(useSensor(MouseSensor, t3), useSensor(TouchSensor, t4), useSensor(KeyboardSensor, t5));
+  let t6;
+  if ($[8] !== ids || $[9] !== onDragEnd) {
+    t6 = event => {
       const {
         active,
         over
       } = event;
       event.activatorEvent.stopPropagation();
+      setActiveId(null);
       if (!active || !over) {
         return;
       }
@@ -81,22 +104,33 @@ export const DraggableSortable = props => {
         });
       }
     };
-    $[5] = ids;
-    $[6] = onDragEnd;
-    $[7] = t4;
+    $[8] = ids;
+    $[9] = onDragEnd;
+    $[10] = t6;
   } else {
-    t4 = $[7];
+    t6 = $[10];
   }
-  const handleDragEnd = t4;
-  let t5;
-  if ($[8] !== onDragStart) {
-    t5 = event_0 => {
+  const handleDragEnd = t6;
+  let t7;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => {
+      setActiveId(null);
+    };
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  const handleDragCancel = t7;
+  let t8;
+  if ($[12] !== onDragStart) {
+    t8 = event_0 => {
       const {
         active: active_0
       } = event_0;
       if (!active_0) {
         return;
       }
+      setActiveId(active_0.id);
       if (typeof onDragStart === "function") {
         onDragStart({
           id: active_0.id,
@@ -104,43 +138,54 @@ export const DraggableSortable = props => {
         });
       }
     };
-    $[8] = onDragStart;
-    $[9] = t5;
+    $[12] = onDragStart;
+    $[13] = t8;
   } else {
-    t5 = $[9];
+    t8 = $[13];
   }
-  const handleDragStart = t5;
-  let t6;
-  if ($[10] !== children || $[11] !== className || $[12] !== dndContextID || $[13] !== handleDragEnd || $[14] !== handleDragStart || $[15] !== ids || $[16] !== sensors || $[17] !== setNodeRef || $[18] !== sortableContextID) {
-    t6 = _jsx(DndContext, {
+  const handleDragStart = t8;
+  let t9;
+  if ($[14] !== activeId || $[15] !== children || $[16] !== className || $[17] !== dndContextID || $[18] !== handleDragEnd || $[19] !== handleDragStart || $[20] !== ids || $[21] !== renderDragOverlay || $[22] !== sensors || $[23] !== setNodeRef || $[24] !== sortableContextID || $[25] !== sortingStrategy) {
+    t9 = _jsxs(DndContext, {
       collisionDetection: closestCenter,
       id: dndContextID,
+      onDragCancel: handleDragCancel,
       onDragEnd: handleDragEnd,
       onDragStart: handleDragStart,
       sensors,
-      children: _jsx(SortableContext, {
+      children: [_jsx(SortableContext, {
         id: sortableContextID,
         items: ids,
+        strategy: sortingStrategy,
         children: _jsx("div", {
           className,
           ref: setNodeRef,
           children
         })
-      })
+      }), renderDragOverlay && activeId !== null && _jsx(DragOverlay, {
+        dropAnimation: null,
+        children: renderDragOverlay(activeId)
+      })]
     });
-    $[10] = children;
-    $[11] = className;
-    $[12] = dndContextID;
-    $[13] = handleDragEnd;
-    $[14] = handleDragStart;
-    $[15] = ids;
-    $[16] = sensors;
-    $[17] = setNodeRef;
-    $[18] = sortableContextID;
-    $[19] = t6;
+    $[14] = activeId;
+    $[15] = children;
+    $[16] = className;
+    $[17] = dndContextID;
+    $[18] = handleDragEnd;
+    $[19] = handleDragStart;
+    $[20] = ids;
+    $[21] = renderDragOverlay;
+    $[22] = sensors;
+    $[23] = setNodeRef;
+    $[24] = sortableContextID;
+    $[25] = sortingStrategy;
+    $[26] = t9;
   } else {
-    t6 = $[19];
+    t9 = $[26];
   }
-  return t6;
+  return t9;
 };
+function _temp() {
+  document.body.classList.remove("is-dragging");
+}
 //# sourceMappingURL=index.js.map

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,"file":"index.js","names":["c","_c","closestCenter","DndContext","DragOverlay","KeyboardSensor","MouseSensor","TouchSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useEffect","useId","useState","DraggableSortable","props","$","children","className","ids","onDragEnd","onDragStart","renderDragOverlay","sortingStrategy","activeId","setActiveId","t0","t1","document","body","classList","add","_temp","dndContextID","sortableContextID","t2","id","setNodeRef","t3","Symbol","for","activationConstraint","distance","t4","delay","tolerance","t5","coordinateGetter","sensors","t6","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t7","handleDragCancel","t8","event_0","active_0","handleDragStart","t9","_jsxs","collisionDetection","onDragCancel","_jsx","items","strategy","ref","dropAnimation","remove"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  DragOverlay,\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, useEffect, useId, useState } from 'react'\n\nimport type { Props } from './types.js'\n\nimport './index.css'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd, onDragStart, renderDragOverlay, sortingStrategy } =\n    props\n  const [activeId, setActiveId] = useState<null | number | string>(null)\n\n  // The overlay is a different element than the drag handle, so its inline cursor\n  // styles don't carry over. So set a body class to show a grabbing cursor everywhere.\n  useEffect(() => {\n    if (activeId !== null) {\n      document.body.classList.add('is-dragging')\n      return () => {\n        document.body.classList.remove('is-dragging')\n      }\n    }\n  }, [activeId])\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      setActiveId(null)\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 handleDragCancel = useCallback(() => {\n    setActiveId(null)\n  }, [])\n\n  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const { active } = event\n\n      if (!active) {\n        return\n      }\n\n      setActiveId(active.id)\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      onDragCancel={handleDragCancel}\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        strategy={sortingStrategy}\n      >\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n      {renderDragOverlay && activeId !== null && (\n        <DragOverlay dropAnimation={null}>{renderDragOverlay(activeId)}</DragOverlay>\n      )}\n    </DndContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import type { SortingStrategy } from '@dnd-kit/sortable';
 import type { Ref } from 'react';
 export type Props = {
     children: React.ReactNode;
@@ -14,5 +15,7 @@ export type Props = {
         event: DragStartEvent;
         id: number | string;
     }) => void;
+    renderDragOverlay?: (activeId: number | string) => React.ReactNode;
+    sortingStrategy?: SortingStrategy;
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC/B,GAAG,EAAE,MAAM,EAAE,CAAA;IACb,SAAS,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,aAAa,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3F,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC1E,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC/B,GAAG,EAAE,MAAM,EAAE,CAAA;IACb,SAAS,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,aAAa,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC3F,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzE,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,eAAe,CAAC,EAAE,eAAe,CAAA;CAClC,CAAA"}

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,"file":"types.js","names":[],"sources":["../../../src/elements/DraggableSortable/types.ts"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'\nimport type { SortingStrategy } from '@dnd-kit/sortable'\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  renderDragOverlay?: (activeId: number | string) => React.ReactNode\n  sortingStrategy?: SortingStrategy\n}\n"],"mappings":"AAIA","ignoreList":[]}

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

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

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

@@ -3,7 +3,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 export const useDraggableSortable = props => {
-  const $ = _c(17);
+  const $ = _c(16);
   const {
     id,
     disabled
@@ -39,52 +39,49 @@ export const useDraggableSortable = props => {
     transform,
     transition
   } = useSortable(t1);
-  const t2 = isDragging ? "grabbing" : "grab";
-  let t3;
-  if ($[4] !== t2 || $[5] !== transition) {
-    t3 = {
-      cursor: t2,
+  let t2;
+  if ($[4] !== transition) {
+    t2 = {
       transition
     };
-    $[4] = t2;
-    $[5] = transition;
-    $[6] = t3;
+    $[4] = transition;
+    $[5] = t2;
   } else {
-    t3 = $[6];
+    t2 = $[5];
   }
-  let t4;
-  if ($[7] !== attributes || $[8] !== t3) {
-    t4 = {
+  let t3;
+  if ($[6] !== attributes || $[7] !== t2) {
+    t3 = {
       ...attributes,
-      style: t3
+      style: t2
     };
-    $[7] = attributes;
+    $[6] = attributes;
+    $[7] = t2;
     $[8] = t3;
-    $[9] = t4;
   } else {
-    t4 = $[9];
+    t3 = $[8];
   }
-  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,
+  const t4 = transform && `translate3d(${transform.x}px, ${transform.y}px, 0)`;
+  let t5;
+  if ($[9] !== isDragging || $[10] !== listeners || $[11] !== setNodeRef || $[12] !== t3 || $[13] !== t4 || $[14] !== transition) {
+    t5 = {
+      attributes: t3,
       isDragging,
       listeners,
       setNodeRef,
-      transform: t5,
+      transform: t4,
       transition
     };
-    $[10] = isDragging;
-    $[11] = listeners;
-    $[12] = setNodeRef;
+    $[9] = isDragging;
+    $[10] = listeners;
+    $[11] = setNodeRef;
+    $[12] = t3;
     $[13] = t4;
-    $[14] = t5;
-    $[15] = transition;
-    $[16] = t6;
+    $[14] = transition;
+    $[15] = t5;
   } else {
-    t6 = $[16];
+    t5 = $[15];
   }
-  return t6;
+  return t5;
 };
 //# 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,"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","style","t4","x","y","t5"],"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        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;EAAA,IAAAO,EAAA;EAAA,IAAAf,CAAA,QAAAS,UAAA;IAKWM,EAAA;MAAAN;IAAA;IAEPT,CAAA,MAAAS,UAAA;IAAAT,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAhB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAe,EAAA;IAJUC,EAAA;MAAA,GACPN,UAAU;MAAAO,KAAA,EACNF;IAEP;IACFf,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAIW,MAAAkB,EAAA,GAAAJ,SAAA,IAAa,eAAeA,SAAA,CAAAK,CAAA,OAAkBL,SAAA,CAAAM,CAAA,QAAmB;EAAA,IAAAC,EAAA;EAAA,IAAArB,CAAA,QAAAW,UAAA,IAAAX,CAAA,SAAAY,SAAA,IAAAZ,CAAA,SAAAa,UAAA,IAAAb,CAAA,SAAAgB,EAAA,IAAAhB,CAAA,SAAAkB,EAAA,IAAAlB,CAAA,SAAAS,UAAA;IAVvEY,EAAA;MAAAX,UAAA,EACOM,EAKZ;MAAAL,UAAA;MAAAC,SAAA;MAAAC,UAAA;MAAAC,SAAA,EAIWI,EAAiE;MAAAT;IAAA;IAE9ET,CAAA,MAAAW,UAAA;IAAAX,CAAA,OAAAY,SAAA;IAAAZ,CAAA,OAAAa,UAAA;IAAAb,CAAA,OAAAgB,EAAA;IAAAhB,CAAA,OAAAkB,EAAA;IAAAlB,CAAA,OAAAS,UAAA;IAAAT,CAAA,OAAAqB,EAAA;EAAA;IAAAA,EAAA,GAAArB,CAAA;EAAA;EAAA,OAZOqB,EAYP;AAAA,CACF","ignoreList":[]}

package/dist/elements/Drawer/index.css

@@ -0,0 +1,138 @@
+@layer payload-default {
+  .drawer {
+    display: flex;
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
+  }
+
+  .drawer__blur-bg {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: all 200ms linear;
+
+    &:before,
+    &:after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    &:before {
+      background: var(--theme-bg);
+      opacity: 0.75;
+    }
+
+    &:after {
+      backdrop-filter: blur(8px);
+    }
+  }
+
+  .drawer__content {
+    opacity: 0;
+    transform: translateX(calc(var(--base) * 4));
+    position: relative;
+    z-index: 2;
+    /* NOTE: width is controlled by js */
+    overflow: hidden;
+    transition: all 200ms linear;
+    background-color: var(--theme-bg);
+  }
+
+  .drawer__content-children {
+    position: relative;
+    z-index: 1;
+    overflow: auto;
+    height: 100%;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      padding: var(--spacer-2-5);
+    }
+  }
+
+  .drawer--is-open .drawer__content,
+  .drawer--is-open .drawer__blur-bg {
+    opacity: 1;
+  }
+
+  .drawer--is-open .drawer__close {
+    opacity: 0.1;
+    transition: opacity 200ms linear;
+    transition-delay: 100ms;
+  }
+
+  .drawer--is-open .drawer__content {
+    transform: translateX(0);
+  }
+
+  .drawer__close {
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    text-indent: -9999px;
+    cursor: pointer;
+    opacity: 0;
+    will-change: opacity;
+    transition: none;
+    transition-delay: 0ms;
+    flex-grow: 1;
+    background: var(--theme-elevation-800);
+
+    &:active,
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .drawer__header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border-bottom: 1px solid var(--border-default);
+    background: var(--bg-default);
+  }
+
+  .drawer__header__title {
+    margin: 0;
+    flex-grow: 1;
+    overflow: hidden;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: -0.032px;
+  }
+
+  .drawer__header__close {
+    margin: 0;
+  }
+
+  .drawer__header__actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  html[data-theme='dark'] {
+    .drawer__close {
+      background: var(--color-base-1000);
+    }
+
+    .drawer--is-open .drawer__close {
+      opacity: 0.25;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props, TogglerProps } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const drawerZBase = 100;
 export declare const formatDrawerSlug: ({ slug, depth }: {
     depth: number;

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,KAAqE,MAAM,OAAO,CAAA;AAEzF,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,CAsFlC,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,MAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqE,MAAM,OAAO,CAAA;AAEzF,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,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,CAwGlC,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,MAAiC,CAAA"}