@eightshift/ui-components 6.0.9 → 6.0.11

package/dist/components/draggable/draggable.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, memo, forwardRef, useImperativeHandle, useContext, useId } from "react";
+import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, createContext, memo, useInsertionEffect, forwardRef, startTransition, useImperativeHandle, useContext } from "react";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { DraggableContext } from "./draggable-context.js";
 import { r as reactDomExports } from "../../index-sSixe2j_.js";
-import { randomId } from "../../utilities/hash.js";
 var i = /* @__PURE__ */ Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {
@@ -371,31 +370,31 @@ function E(i2, t2) {
   return o2;
 }
 var __create$5 = Object.create;
-var __defProp$7 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
+var __defProp$6 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$5 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a2, b2) => {
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$8.call(b2, prop))
-      __defNormalProp$7(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b2)) {
-      if (__propIsEnum$8.call(b2, prop))
-        __defNormalProp$7(a2, prop, b2[prop]);
+    if (__hasOwnProp$7.call(b2, prop))
+      __defNormalProp$6(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b2)) {
+      if (__propIsEnum$7.call(b2, prop))
+        __defNormalProp$6(a2, prop, b2[prop]);
     }
   return a2;
 };
-var __spreadProps$6 = (a2, b2) => __defProps$6(a2, __getOwnPropDescs$6(b2));
-var __name$2 = (target, value) => __defProp$7(target, "name", { value, configurable: true });
+var __spreadProps$5 = (a2, b2) => __defProps$5(a2, __getOwnPropDescs$5(b2));
+var __name$2 = (target, value) => __defProp$6(target, "name", { value, configurable: true });
 var __decoratorStart$5 = (base) => {
   var _a22;
   return [, , , __create$5((_a22 = void 0) != null ? _a22 : null)];
@@ -403,7 +402,7 @@ var __decoratorStart$5 = (base) => {
 var __decoratorStrings$5 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$5 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$6("Function expected") : fn;
 var __decoratorContext$5 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$5[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$6("Already initialized") : fns.push(__expectFn$5(fn || null)) });
-var __decoratorMetadata$5 = (array, target) => __defNormalProp$7(target, __knownSymbol$5("metadata"), array[3]);
+var __decoratorMetadata$5 = (array, target) => __defNormalProp$6(target, __knownSymbol$5("metadata"), array[3]);
 var __runInitializers$5 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
   return value;
@@ -430,7 +429,7 @@ var __decorateElement$5 = (array, flags, name, decorators, target, extra) => {
     else if (typeof it !== "object" || it === null) __typeError$6("Object expected");
     else __expectFn$5(fn = it.get) && (desc.get = fn), __expectFn$5(fn = it.set) && (desc.set = fn), __expectFn$5(fn = it.init) && initializers.unshift(fn);
   }
-  return k || __decoratorMetadata$5(array, target), desc && __defProp$7(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
+  return k || __decoratorMetadata$5(array, target), desc && __defProp$6(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
 var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
 var __privateIn$2 = (member, obj) => Object(obj) !== obj ? __typeError$6('Cannot use the "in" operator on this value') : member.has(obj);
@@ -526,13 +525,13 @@ function enumerable(enumerable2 = true) {
       const host = context.kind === "field" ? this : context.static ? this : Object.getPrototypeOf(this);
       const descriptor2 = Object.getOwnPropertyDescriptor(host, context.name);
       if (descriptor2) {
-        Object.defineProperty(host, context.name, __spreadProps$6(__spreadValues$7({}, descriptor2), { enumerable: enumerable2 }));
+        Object.defineProperty(host, context.name, __spreadProps$5(__spreadValues$6({}, descriptor2), { enumerable: enumerable2 }));
       }
     });
   };
 }
 function effects(...entries) {
-  const effects2 = entries.map(E);
+  const effects2 = entries.map((fn) => E(fn));
   return () => effects2.forEach((cleanup) => cleanup());
 }
 var _previous_dec, _initial_dec, _current_dec$1, _current_dec2, _previous_dec2, _initial_dec2, _init$5, _initial, _a$3, initial_get, initial_set, _ValueHistory_instances, _previous, _b$1, previous_get, previous_set, _current, _c$2, current_get, current_set;
@@ -624,25 +623,25 @@ var WeakStore = class {
 };
 _store = /* @__PURE__ */ new WeakMap();
 var __create$4 = Object.create;
-var __defProp$6 = Object.defineProperty;
+var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$4 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
 var __pow = Math.pow;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a2, b2) => {
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$7.call(b2, prop))
-      __defNormalProp$6(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b2)) {
-      if (__propIsEnum$7.call(b2, prop))
-        __defNormalProp$6(a2, prop, b2[prop]);
+    if (__hasOwnProp$6.call(b2, prop))
+      __defNormalProp$5(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b2)) {
+      if (__propIsEnum$6.call(b2, prop))
+        __defNormalProp$5(a2, prop, b2[prop]);
     }
   return a2;
 };
@@ -653,7 +652,7 @@ var __decoratorStart$4 = (base) => {
 var __decoratorStrings$4 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$4 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$5("Function expected") : fn;
 var __decoratorContext$4 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$4[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$5("Already initialized") : fns.push(__expectFn$4(fn || null)) });
-var __decoratorMetadata$4 = (array, target) => __defNormalProp$6(target, __knownSymbol$4("metadata"), array[3]);
+var __decoratorMetadata$4 = (array, target) => __defNormalProp$5(target, __knownSymbol$4("metadata"), array[3]);
 var __runInitializers$4 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) fns[i2].call(self);
   return value;
@@ -672,7 +671,7 @@ var __decorateElement$4 = (array, flags, name, decorators, target, extra) => {
     it = (0, decorators[i2])(desc[key], ctx), done._ = 1;
     __expectFn$4(it) && (desc[key] = it);
   }
-  return desc && __defProp$6(target, name, desc), target;
+  return desc && __defProp$5(target, name, desc), target;
 };
 var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
 var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), member.get(obj));
@@ -738,7 +737,7 @@ var Rectangle = class _Rectangle {
   translate(x, y2) {
     const { top, left, width, height, scale } = this;
     const newShape = new _Rectangle(left + x, top + y2, width, height);
-    newShape.scale = __spreadValues$6({}, scale);
+    newShape.scale = __spreadValues$5({}, scale);
     return newShape;
   }
   get boundingRectangle() {
@@ -913,39 +912,39 @@ var Axis$1 = /* @__PURE__ */ ((Axis2) => {
 })(Axis$1 || {});
 var Axes = Object.values(Axis$1);
 var __create$3 = Object.create;
-var __defProp$5 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
+var __defProp$4 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a2, b2) => {
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$6.call(b2, prop))
-      __defNormalProp$5(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b2)) {
-      if (__propIsEnum$6.call(b2, prop))
-        __defNormalProp$5(a2, prop, b2[prop]);
+    if (__hasOwnProp$5.call(b2, prop))
+      __defNormalProp$4(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b2)) {
+      if (__propIsEnum$5.call(b2, prop))
+        __defNormalProp$4(a2, prop, b2[prop]);
     }
   return a2;
 };
-var __spreadProps$5 = (a2, b2) => __defProps$5(a2, __getOwnPropDescs$5(b2));
-var __name$1 = (target, value) => __defProp$5(target, "name", { value, configurable: true });
+var __spreadProps$4 = (a2, b2) => __defProps$4(a2, __getOwnPropDescs$4(b2));
+var __name$1 = (target, value) => __defProp$4(target, "name", { value, configurable: true });
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -957,7 +956,7 @@ var __decoratorStart$3 = (base) => {
 var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$4("Function expected") : fn;
 var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$4("Already initialized") : fns.push(__expectFn$3(fn || null)) });
-var __decoratorMetadata$3 = (array, target) => __defNormalProp$5(target, __knownSymbol$3("metadata"), array[3]);
+var __decoratorMetadata$3 = (array, target) => __defNormalProp$4(target, __knownSymbol$3("metadata"), array[3]);
 var __runInitializers$3 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
   return value;
@@ -984,7 +983,7 @@ var __decorateElement$3 = (array, flags, name, decorators, target, extra) => {
     else if (typeof it !== "object" || it === null) __typeError$4("Object expected");
     else __expectFn$3(fn = it.get) && (desc.get = fn), __expectFn$3(fn = it.set) && (desc.set = fn), __expectFn$3(fn = it.init) && initializers.unshift(fn);
   }
-  return k || __decoratorMetadata$3(array, target), desc && __defProp$5(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
+  return k || __decoratorMetadata$3(array, target), desc && __defProp$4(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
 var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
 var __privateIn$1 = (member, obj) => Object(obj) !== obj ? __typeError$4('Cannot use the "in" operator on this value') : member.has(obj);
@@ -1411,7 +1410,7 @@ var DragDropMonitor = class extends Monitor {
 };
 function defaultPreventable(event, cancelable = true) {
   let defaultPrevented = false;
-  return __spreadProps$5(__spreadValues$5({}, event), {
+  return __spreadProps$4(__spreadValues$4({}, event), {
     cancelable,
     get defaultPrevented() {
       return defaultPrevented;
@@ -2018,6 +2017,56 @@ var Sensor = class extends Plugin {
     this.options = options2;
   }
 };
+var ActivationController = class extends AbortController {
+  constructor(constraints, onActivate) {
+    super();
+    this.constraints = constraints;
+    this.onActivate = onActivate;
+    this.activated = false;
+    for (const constraint of constraints != null ? constraints : []) {
+      constraint.controller = this;
+    }
+  }
+  onEvent(event) {
+    var _a4;
+    if (this.activated) return;
+    if ((_a4 = this.constraints) == null ? void 0 : _a4.length) {
+      for (const constraint of this.constraints) {
+        constraint.onEvent(event);
+      }
+    } else {
+      this.activate(event);
+    }
+  }
+  activate(event) {
+    if (this.activated) return;
+    this.activated = true;
+    this.onActivate(event);
+  }
+  abort(event) {
+    this.activated = false;
+    super.abort(event);
+  }
+};
+var _controller;
+var ActivationConstraint = class {
+  constructor(options2) {
+    this.options = options2;
+    __privateAdd$4(this, _controller);
+  }
+  set controller(controller) {
+    __privateSet$4(this, _controller, controller);
+    controller.signal.addEventListener("abort", () => this.abort());
+  }
+  /**
+   * Called when the activation is triggered.
+   */
+  activate(event) {
+    var _a4;
+    (_a4 = __privateGet$4(this, _controller)) == null ? void 0 : _a4.activate(event);
+  }
+};
+_controller = /* @__PURE__ */ new WeakMap();
 var Modifier = class extends Plugin {
   /**
    * Creates a new modifier instance.
@@ -2178,7 +2227,7 @@ var DragOperation = class {
     const { x, y: y2 } = this.position.delta;
     let transform = { x, y: y2 };
     for (const modifier of this.modifiers) {
-      transform = modifier.apply(__spreadProps$5(__spreadValues$5({}, this.snapshot()), {
+      transform = modifier.apply(__spreadProps$4(__spreadValues$4({}, this.snapshot()), {
         transform
       }));
     }
@@ -2461,7 +2510,6 @@ function getBoundingRectangle(element) {
   const { width, height, top, left, bottom, right } = element.getBoundingClientRect();
   return { width, height, top, left, bottom, right };
 }
-var canUseDOM$1 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 function isWindow(element) {
   const elementString = Object.prototype.toString.call(element);
   return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
@@ -2590,6 +2638,40 @@ function getVisibleBoundingRectangle(element, boundingClientRect = element.getBo
   }
   return rect;
 }
+function getEventCoordinates(event) {
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+var canUseDOM$1 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function getDocuments(rootDoc = document, seen = /* @__PURE__ */ new Set()) {
+  if (seen.has(rootDoc)) return [];
+  seen.add(rootDoc);
+  const docs = [rootDoc];
+  for (const frame of Array.from(
+    rootDoc.querySelectorAll("iframe, frame")
+  )) {
+    try {
+      const childDoc = frame.contentDocument;
+      if (childDoc && !seen.has(childDoc)) {
+        docs.push(...getDocuments(childDoc, seen));
+      }
+    } catch (e2) {
+    }
+  }
+  try {
+    const win = rootDoc.defaultView;
+    if (win && win !== window.top) {
+      const parentWin = win.parent;
+      if (parentWin && parentWin.document && parentWin.document !== rootDoc) {
+        docs.push(...getDocuments(parentWin.document, seen));
+      }
+    }
+  } catch (e2) {
+  }
+  return docs;
+}
 function isSafari() {
   return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
@@ -2639,6 +2721,18 @@ function isIFrameElement(element) {
   return (element == null ? void 0 : element.tagName) === "IFRAME";
 }
 var ProxiedElements = /* @__PURE__ */ new WeakMap();
+function isInteractiveElement(element) {
+  return Boolean(
+    element.closest(`
+      input:not([disabled]),
+      select:not([disabled]),
+      textarea:not([disabled]),
+      button:not([disabled]),
+      a[href],
+      [contenteditable]:not([contenteditable="false"])
+    `)
+  );
+}
 var Listeners = class {
   constructor() {
     this.entries = /* @__PURE__ */ new Set();
@@ -2651,14 +2745,17 @@ var Listeners = class {
     };
   }
   bind(target, input) {
+    const eventTargets = Array.isArray(target) ? target : [target];
     const listeners = Array.isArray(input) ? input : [input];
     const entries = [];
-    for (const descriptor2 of listeners) {
-      const { type, listener, options: options2 } = descriptor2;
-      const entry = [target, descriptor2];
-      target.addEventListener(type, listener, options2);
-      this.entries.add(entry);
-      entries.push(entry);
+    for (const target2 of eventTargets) {
+      for (const descriptor2 of listeners) {
+        const { type, listener, options: options2 } = descriptor2;
+        const entry = [target2, descriptor2];
+        target2.addEventListener(type, listener, options2);
+        this.entries.add(entry);
+        entries.push(entry);
+      }
     }
     return function cleanup() {
       for (const [target2, { type, listener, options: options2 }] of entries) {
@@ -3657,39 +3754,39 @@ function generateUniqueId(prefix) {
   return `${prefix}-${id}`;
 }
 var __create$2 = Object.create;
-var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a2, b2) => {
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$5.call(b2, prop))
-      __defNormalProp$4(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b2)) {
-      if (__propIsEnum$5.call(b2, prop))
-        __defNormalProp$4(a2, prop, b2[prop]);
+    if (__hasOwnProp$4.call(b2, prop))
+      __defNormalProp$3(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b2)) {
+      if (__propIsEnum$4.call(b2, prop))
+        __defNormalProp$3(a2, prop, b2[prop]);
     }
   return a2;
 };
-var __spreadProps$4 = (a2, b2) => __defProps$4(a2, __getOwnPropDescs$4(b2));
-var __name = (target, value) => __defProp$4(target, "name", { value, configurable: true });
+var __spreadProps$3 = (a2, b2) => __defProps$3(a2, __getOwnPropDescs$3(b2));
+var __name = (target, value) => __defProp$3(target, "name", { value, configurable: true });
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3701,7 +3798,7 @@ var __decoratorStart$2 = (base) => {
 var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
 var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
-var __decoratorMetadata$2 = (array, target) => __defNormalProp$4(target, __knownSymbol$2("metadata"), array[3]);
+var __decoratorMetadata$2 = (array, target) => __defNormalProp$3(target, __knownSymbol$2("metadata"), array[3]);
 var __runInitializers$2 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
   return value;
@@ -3728,7 +3825,7 @@ var __decorateElement$2 = (array, flags, name, decorators, target, extra) => {
     else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
     else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
   }
-  return k || __decoratorMetadata$2(array, target), desc && __defProp$4(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
+  return k || __decoratorMetadata$2(array, target), desc && __defProp$3(target, name, desc), p2 ? k ^ 4 ? extra : desc : target;
 };
 var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
 var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError$2('Cannot use the "in" operator on this value') : member.has(obj);
@@ -4528,7 +4625,7 @@ render_fn = function() {
             elementMutationObserver == null ? void 0 : elementMutationObserver.takeRecords();
             animateTransform({
               element: feedbackElement,
-              keyframes: __spreadProps$4(__spreadValues$4(__spreadValues$4({}, heightKeyframes), widthKeyframes), {
+              keyframes: __spreadProps$3(__spreadValues$3(__spreadValues$3({}, heightKeyframes), widthKeyframes), {
                 translate: [
                   `${currentTranslate.x}px ${currentTranslate.y}px 0`,
                   `${finalTranslate.x}px ${finalTranslate.y}px 0`
@@ -4979,9 +5076,8 @@ var defaults = Object.freeze({
     left: ["ArrowLeft"],
     right: ["ArrowRight"]
   },
-  shouldActivate(args) {
+  preventActivation(event, source) {
     var _a4;
-    const { event, source } = args;
     const target = (_a4 = source.handle) != null ? _a4 : source.element;
     return event.target === target;
   }
@@ -5006,7 +5102,7 @@ var _KeyboardSensor = class _KeyboardSensor2 extends Sensor {
       }
       const {
         keyboardCodes = defaults.keyboardCodes,
-        shouldActivate = defaults.shouldActivate
+        preventActivation = defaults.preventActivation
       } = options3 != null ? options3 : {};
       if (!keyboardCodes.start.includes(event.code)) {
         return;
@@ -5014,9 +5110,8 @@ var _KeyboardSensor = class _KeyboardSensor2 extends Sensor {
       if (!this.manager.dragOperation.status.idle) {
         return;
       }
-      if (shouldActivate({ event, source, manager: this.manager })) {
-        this.handleStart(event, source, options3);
-      }
+      if (preventActivation == null ? void 0 : preventActivation(event, source)) return;
+      this.handleStart(event, source, options3);
     };
   }
   bind(source, options2 = this.options) {
@@ -5156,6 +5251,89 @@ var KeyboardSensor = _KeyboardSensor;
 function isKeycode(event, codes) {
   return codes.includes(event.code);
 }
+var _coordinates;
+var DistanceConstraint = class extends ActivationConstraint {
+  constructor() {
+    super(...arguments);
+    __privateAdd$2(this, _coordinates);
+  }
+  onEvent(event) {
+    switch (event.type) {
+      case "pointerdown":
+        __privateSet$2(this, _coordinates, getEventCoordinates(event));
+        break;
+      case "pointermove":
+        if (!__privateGet$2(this, _coordinates)) return;
+        const { x, y: y2 } = getEventCoordinates(event);
+        const delta = {
+          x: x - __privateGet$2(this, _coordinates).x,
+          y: y2 - __privateGet$2(this, _coordinates).y
+        };
+        const { tolerance } = this.options;
+        if (tolerance && exceedsDistance(delta, tolerance)) {
+          this.abort();
+          return;
+        }
+        if (exceedsDistance(delta, this.options.value)) {
+          this.activate(event);
+        }
+        break;
+      case "pointerup":
+        this.abort();
+        break;
+    }
+  }
+  abort() {
+    __privateSet$2(this, _coordinates, void 0);
+  }
+};
+_coordinates = /* @__PURE__ */ new WeakMap();
+var _timeout2, _coordinates2;
+var DelayConstraint = class extends ActivationConstraint {
+  constructor() {
+    super(...arguments);
+    __privateAdd$2(this, _timeout2);
+    __privateAdd$2(this, _coordinates2);
+  }
+  onEvent(event) {
+    switch (event.type) {
+      case "pointerdown":
+        __privateSet$2(this, _coordinates2, getEventCoordinates(event));
+        __privateSet$2(this, _timeout2, setTimeout(
+          () => this.activate(event),
+          this.options.value
+        ));
+        break;
+      case "pointermove":
+        if (!__privateGet$2(this, _coordinates2)) return;
+        const { x, y: y2 } = getEventCoordinates(event);
+        const delta = {
+          x: x - __privateGet$2(this, _coordinates2).x,
+          y: y2 - __privateGet$2(this, _coordinates2).y
+        };
+        if (exceedsDistance(delta, this.options.tolerance)) {
+          this.abort();
+        }
+        break;
+      case "pointerup":
+        this.abort();
+        break;
+    }
+  }
+  abort() {
+    if (__privateGet$2(this, _timeout2)) {
+      clearTimeout(__privateGet$2(this, _timeout2));
+      __privateSet$2(this, _coordinates2, void 0);
+      __privateSet$2(this, _timeout2, void 0);
+    }
+  }
+};
+_timeout2 = /* @__PURE__ */ new WeakMap();
+_coordinates2 = /* @__PURE__ */ new WeakMap();
+var PointerActivationConstraints = class {
+};
+PointerActivationConstraints.Delay = DelayConstraint;
+PointerActivationConstraints.Distance = DistanceConstraint;
 var defaults2 = Object.freeze({
   activationConstraints(event, source) {
     var _a4;
@@ -5164,29 +5342,37 @@ var defaults2 = Object.freeze({
       return void 0;
     }
     if (pointerType === "touch") {
-      return {
-        delay: { value: 250, tolerance: 5 }
-      };
+      return [
+        new PointerActivationConstraints.Delay({ value: 250, tolerance: 5 })
+      ];
     }
     if (isTextInput(target) && !event.defaultPrevented) {
-      return {
-        delay: { value: 200, tolerance: 0 }
-      };
+      return [
+        new PointerActivationConstraints.Delay({ value: 200, tolerance: 0 })
+      ];
     }
-    return {
-      delay: { value: 200, tolerance: 10 },
-      distance: { value: 5 }
-    };
+    return [
+      new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+      new PointerActivationConstraints.Distance({ value: 5 })
+    ];
+  },
+  preventActivation(event, source) {
+    var _a4;
+    const { target } = event;
+    if (target === source.element) return false;
+    if (target === source.handle) return false;
+    if (!isElement(target)) return false;
+    if ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)) return false;
+    return isInteractiveElement(target);
   }
 });
-var _cleanup, _clearTimeout;
+var _cleanup;
 var _PointerSensor = class _PointerSensor2 extends Sensor {
   constructor(manager, options2) {
     super(manager);
     this.manager = manager;
     this.options = options2;
     __privateAdd$2(this, _cleanup, /* @__PURE__ */ new Set());
-    __privateAdd$2(this, _clearTimeout);
     this.listeners = new Listeners();
     this.latest = {
       event: void 0,
@@ -5236,36 +5422,33 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     });
     return unbind;
   }
-  handlePointerDown(event, source, options2 = {}) {
+  handlePointerDown(event, source, options2) {
     if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled || isCapturedBySensor(event) || !this.manager.dragOperation.status.idle) {
       return;
     }
+    const { preventActivation = defaults2.preventActivation } = options2 != null ? options2 : {};
+    if (preventActivation == null ? void 0 : preventActivation(event, source)) {
+      return;
+    }
     const { target } = event;
     const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
     const offset = getFrameTransform(source.element);
+    const { x, y: y2 } = getEventCoordinates(event);
     this.initialCoordinates = {
-      x: event.clientX * offset.scaleX + offset.x,
-      y: event.clientY * offset.scaleY + offset.y
+      x: x * offset.scaleX + offset.x,
+      y: y2 * offset.scaleY + offset.y
     };
     const constraints = this.activationConstraints(event, source);
     event.sensor = this;
-    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
-      this.handleStart(source, event);
-    } else {
-      const { delay } = constraints;
-      if (delay) {
-        const timeout2 = setTimeout(
-          () => this.handleStart(source, event),
-          delay.value
-        );
-        __privateSet$2(this, _clearTimeout, () => {
-          clearTimeout(timeout2);
-          __privateSet$2(this, _clearTimeout, void 0);
-        });
-      }
-    }
-    const ownerDocument = getDocument(event.target);
-    const unbindListeners = this.listeners.bind(ownerDocument, [
+    const controller = new ActivationController(
+      constraints,
+      (event2) => this.handleStart(source, event2)
+    );
+    controller.signal.onabort = () => this.handleCancel(event);
+    controller.onEvent(event);
+    this.controller = controller;
+    const documents = getDocuments();
+    const unbindListeners = this.listeners.bind(documents, [
       {
         type: "pointermove",
         listener: (event2) => this.handlePointerMove(event2, source)
@@ -5287,50 +5470,27 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       }
     ]);
     const cleanup = () => {
-      var _a4;
       unbindListeners();
-      (_a4 = __privateGet$2(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
       this.initialCoordinates = void 0;
     };
     __privateGet$2(this, _cleanup).add(cleanup);
   }
   handlePointerMove(event, source) {
-    const coordinates = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const offset = getFrameTransform(source.element);
-    coordinates.x = coordinates.x * offset.scaleX + offset.x;
-    coordinates.y = coordinates.y * offset.scaleY + offset.y;
+    var _a4, _b2;
+    if (((_a4 = this.controller) == null ? void 0 : _a4.activated) === false) {
+      (_b2 = this.controller) == null ? void 0 : _b2.onEvent(event);
+      return;
+    }
     if (this.manager.dragOperation.status.dragging) {
+      const coordinates = getEventCoordinates(event);
+      const offset = getFrameTransform(source.element);
+      coordinates.x = coordinates.x * offset.scaleX + offset.x;
+      coordinates.y = coordinates.y * offset.scaleY + offset.y;
       event.preventDefault();
       event.stopPropagation();
       this.latest.event = event;
       this.latest.coordinates = coordinates;
       scheduler.schedule(this.handleMove);
-      return;
-    }
-    if (!this.initialCoordinates) {
-      return;
-    }
-    const delta = {
-      x: coordinates.x - this.initialCoordinates.x,
-      y: coordinates.y - this.initialCoordinates.y
-    };
-    const constraints = this.activationConstraints(event, source);
-    const { distance, delay } = constraints != null ? constraints : {};
-    if (distance) {
-      if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
-        return this.handleCancel(event);
-      }
-      if (exceedsDistance(delta, distance.value)) {
-        return this.handleStart(source, event);
-      }
-    }
-    if (delay) {
-      if (exceedsDistance(delta, delay.tolerance)) {
-        return this.handleCancel(event);
-      }
     }
   }
   handlePointerUp(event) {
@@ -5350,9 +5510,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     }
   }
   handleStart(source, event) {
-    var _a4;
     const { manager, initialCoordinates } = this;
-    (_a4 = __privateGet$2(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
     if (!initialCoordinates || !manager.dragOperation.status.idle) {
       return;
     }
@@ -5369,7 +5527,8 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     const ownerDocument = getDocument(event.target);
     const pointerCaptureTarget = ownerDocument.body;
     pointerCaptureTarget.setPointerCapture(event.pointerId);
-    const unbind = this.listeners.bind(ownerDocument, [
+    const listenerTargets = isElement(event.target) ? [event.target, ownerDocument.body] : ownerDocument.body;
+    const unbind = this.listeners.bind(listenerTargets, [
       {
         // Prevent scrolling on touch devices
         type: "touchmove",
@@ -5390,13 +5549,6 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       {
         type: "keydown",
         listener: this.handleKeyDown
-      },
-      {
-        type: "lostpointercapture",
-        listener: (event2) => {
-          if (event2.target !== pointerCaptureTarget) return;
-          this.handlePointerUp(event2);
-        }
       }
     ]);
     __privateGet$2(this, _cleanup).add(unbind);
@@ -5422,7 +5574,6 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
   }
 };
 _cleanup = /* @__PURE__ */ new WeakMap();
-_clearTimeout = /* @__PURE__ */ new WeakMap();
 _PointerSensor.configure = configurator(_PointerSensor);
 _PointerSensor.defaults = defaults2;
 var PointerSensor = _PointerSensor;
@@ -5457,7 +5608,7 @@ var DragDropManager2 = class extends DragDropManager$1 {
       sensors = defaultPreset.sensors,
       modifiers = []
     } = input;
-    super(__spreadProps$4(__spreadValues$4({}, input), {
+    super(__spreadProps$3(__spreadValues$3({}, input), {
       plugins: [ScrollListener, Scroller, ...plugins],
       sensors,
       modifiers
@@ -5479,7 +5630,7 @@ var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [rea
       "feedback"
     ]);
     super(
-      __spreadValues$4({
+      __spreadValues$3({
         effects: () => [
           ...effects2(),
           () => {
@@ -5541,7 +5692,7 @@ var Droppable2 = class extends (_c2 = Droppable$1, _element_dec2 = [reactive], _
     };
     const observePosition = d(false);
     super(
-      __spreadProps$4(__spreadValues$4({}, input), {
+      __spreadProps$3(__spreadValues$3({}, input), {
         collisionDetector,
         effects: () => [
           ...effects2(),
@@ -5601,38 +5752,38 @@ _d = __decorateElement$2(_init5, 20, "#element", _element_dec2, _Droppable_insta
 __decorateElement$2(_init5, 4, "proxy", _proxy_dec, Droppable2, _proxy);
 __decoratorMetadata$2(_init5, Droppable2);
 var __create$1 = Object.create;
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
 var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$1 = (msg) => {
   throw TypeError(msg);
 };
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a2, b2) => {
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$4.call(b2, prop))
-      __defNormalProp$3(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b2)) {
-      if (__propIsEnum$4.call(b2, prop))
-        __defNormalProp$3(a2, prop, b2[prop]);
+    if (__hasOwnProp$3.call(b2, prop))
+      __defNormalProp$2(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b2)) {
+      if (__propIsEnum$3.call(b2, prop))
+        __defNormalProp$2(a2, prop, b2[prop]);
     }
   return a2;
 };
-var __spreadProps$3 = (a2, b2) => __defProps$3(a2, __getOwnPropDescs$3(b2));
+var __spreadProps$2 = (a2, b2) => __defProps$2(a2, __getOwnPropDescs$2(b2));
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -5644,7 +5795,7 @@ var __decoratorStart$1 = (base) => {
 var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
 var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
-var __decoratorMetadata$1 = (array, target) => __defNormalProp$3(target, __knownSymbol$1("metadata"), array[3]);
+var __decoratorMetadata$1 = (array, target) => __defNormalProp$2(target, __knownSymbol$1("metadata"), array[3]);
 var __runInitializers$1 = (array, flags, self, value) => {
   for (var i2 = 0, fns = array[flags >> 1], n2 = fns && fns.length; i2 < n2; i2++) flags & 1 ? fns[i2].call(self) : value = fns[i2].call(self, value);
   return value;
@@ -5670,7 +5821,7 @@ var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
     else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
     else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
   }
-  return desc && __defProp$3(target, name, desc), target;
+  return desc && __defProp$2(target, name, desc), target;
 };
 var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
 var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
@@ -5837,7 +5988,7 @@ function arrayMove$1(array, from, to) {
   newArray.splice(to, 0, newArray.splice(from, 1)[0]);
   return newArray;
 }
-function mutate$1(items, event, mutation) {
+function mutate(items, event, mutation) {
   var _a4, _b2;
   const { source, target, canceled } = event.operation;
   if (!source || !target || canceled) {
@@ -5915,8 +6066,8 @@ function mutate$1(items, event, mutation) {
     ]
   });
 }
-function move$1(items, event) {
-  return mutate$1(items, event, arrayMove$1);
+function move(items, event) {
+  return mutate(items, event, arrayMove$1);
 }
 var defaultGroup = "__default__";
 var OptimisticSortingPlugin = class extends Plugin {
@@ -5988,7 +6139,7 @@ var OptimisticSortingPlugin = class extends Plugin {
               [sourceGroup]: orderedSourceSortables,
               [targetGroup]: orderedTargetSortables
             };
-            const newState = move$1(state, event);
+            const newState = move(state, event);
             if (state === newState) return;
             const sourceIndex = newState[targetGroup].indexOf(source.sortable);
             const targetIndex = newState[targetGroup].indexOf(target.sortable);
@@ -6133,7 +6284,7 @@ var Sortable2 = class {
     ]);
     this.droppable = new SortableDroppable(input, manager, this);
     this.draggable = new SortableDraggable(
-      __spreadProps$3(__spreadValues$3({}, input), {
+      __spreadProps$2(__spreadValues$2({}, input), {
         effects: () => [
           () => {
             var _a22, _b22, _c3;
@@ -6492,17 +6643,17 @@ function useOnElementChange(value, onChange) {
     }
   });
 }
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6566,9 +6717,7 @@ function DragDropProvider(_a22) {
     "onDragOver",
     "onDragEnd"
   ]);
-  var _a32;
   const rendererRef = useRef(null);
-  const [manager, setManager] = useState((_a32 = input.manager) != null ? _a32 : null);
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = useLatest(onBeforeDragStart);
   const handleDragStart = useLatest(onDragStart);
@@ -6576,53 +6725,57 @@ function DragDropProvider(_a22) {
   const handleDragMove = useLatest(onDragMove);
   const handleDragEnd = useLatest(onDragEnd);
   const handleCollision = useLatest(onCollision);
+  const manager = useStableInstance(() => {
+    var _a32;
+    return (_a32 = input.manager) != null ? _a32 : new DragDropManager2(input);
+  });
   useEffect(() => {
-    var _a4;
     if (!rendererRef.current) throw new Error("Renderer not found");
     const { renderer, trackRendering } = rendererRef.current;
-    const manager2 = (_a4 = input.manager) != null ? _a4 : new DragDropManager2(input);
-    manager2.renderer = renderer;
-    manager2.monitor.addEventListener("beforedragstart", (event) => {
-      const callback = handleBeforeDragStart.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener(
-      "dragstart",
-      (event) => {
-        var _a5;
-        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
-      }
-    );
-    manager2.monitor.addEventListener("dragover", (event) => {
-      const callback = handleDragOver.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener("dragmove", (event) => {
-      const callback = handleDragMove.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener("dragend", (event) => {
-      const callback = handleDragEnd.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener(
-      "collision",
-      (event) => {
-        var _a5;
-        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
-      }
-    );
-    startTransition(() => setManager(manager2));
-    return manager2.destroy;
-  }, [input.manager]);
+    const { monitor } = manager;
+    manager.renderer = renderer;
+    const listeners = [
+      monitor.addEventListener("beforedragstart", (event) => {
+        const callback = handleBeforeDragStart.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener(
+        "dragstart",
+        (event) => {
+          var _a32;
+          return (_a32 = handleDragStart.current) == null ? void 0 : _a32.call(handleDragStart, event, manager);
+        }
+      ),
+      monitor.addEventListener("dragover", (event) => {
+        const callback = handleDragOver.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener("dragmove", (event) => {
+        const callback = handleDragMove.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener("dragend", (event) => {
+        const callback = handleDragEnd.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener(
+        "collision",
+        (event) => {
+          var _a32;
+          return (_a32 = handleCollision.current) == null ? void 0 : _a32.call(handleCollision, event, manager);
+        }
+      )
+    ];
+    return () => listeners.forEach((dispose) => dispose());
+  }, [manager]);
   useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
@@ -6643,6 +6796,19 @@ function DragDropProvider(_a22) {
     children
   ] });
 }
+function useStableInstance(create) {
+  const ref = useRef(null);
+  if (!ref.current) {
+    ref.current = create();
+  }
+  useInsertionEffect(() => {
+    return () => {
+      var _a22;
+      return (_a22 = ref.current) == null ? void 0 : _a22.destroy();
+    };
+  }, []);
+  return ref.current;
+}
 function useDragDropManager() {
   return useContext(DragDropContext);
 }
@@ -6805,25 +6971,25 @@ var Axis = /* @__PURE__ */ ((Axis2) => {
   return Axis2;
 })(Axis || {});
 Object.values(Axis);
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a2, b2) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$2.call(b2, prop))
-      __defNormalProp$2(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b2)) {
-      if (__propIsEnum$2.call(b2, prop))
-        __defNormalProp$2(a2, prop, b2[prop]);
+    if (__hasOwnProp$1.call(b2, prop))
+      __defNormalProp$1(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b2)) {
+      if (__propIsEnum$1.call(b2, prop))
+        __defNormalProp$1(a2, prop, b2[prop]);
     }
   return a2;
 };
-var __spreadProps$2 = (a2, b2) => __defProps$2(a2, __getOwnPropDescs$2(b2));
+var __spreadProps$1 = (a2, b2) => __defProps$1(a2, __getOwnPropDescs$1(b2));
 function useSortable(input) {
   const {
     accept,
@@ -6842,10 +7008,10 @@ function useSortable(input) {
     target,
     type
   } = input;
-  const transition = __spreadValues$2(__spreadValues$2({}, defaultSortableTransition), input.transition);
+  const transition = __spreadValues$1(__spreadValues$1({}, defaultSortableTransition), input.transition);
   const sortable = useInstance((manager) => {
     return new Sortable2(
-      __spreadProps$2(__spreadValues$2({}, input), {
+      __spreadProps$1(__spreadValues$1({}, input), {
         transition,
         register: false,
         handle: currentValue(handle),
@@ -6968,25 +7134,25 @@ function shouldUpdateSynchronously(key, oldValue, newValue) {
   if (key === "isDragSource" && !newValue && oldValue) return true;
   return false;
 }
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a2, b2) => {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a2, b2) => {
   for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$1.call(b2, prop))
-      __defNormalProp$1(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b2)) {
-      if (__propIsEnum$1.call(b2, prop))
-        __defNormalProp$1(a2, prop, b2[prop]);
+    if (__hasOwnProp.call(b2, prop))
+      __defNormalProp(a2, prop, b2[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b2)) {
+      if (__propIsEnum.call(b2, prop))
+        __defNormalProp(a2, prop, b2[prop]);
     }
   return a2;
 };
-var __spreadProps$1 = (a2, b2) => __defProps$1(a2, __getOwnPropDescs$1(b2));
+var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 var _AxisModifier = class _AxisModifier2 extends Modifier {
   /**
    * Applies the axis restriction to the drag operation.
@@ -6999,7 +7165,7 @@ var _AxisModifier = class _AxisModifier2 extends Modifier {
       return transform;
     }
     const { axis, value } = this.options;
-    return __spreadProps$1(__spreadValues$1({}, transform), {
+    return __spreadProps(__spreadValues({}, transform), {
       [axis]: value
     });
   }
@@ -7015,7 +7181,7 @@ var RestrictToHorizontalAxis = AxisModifier.configure({
   value: 0
 });
 function restrictShapeToBoundingRectangle(shape, transform, boundingRect) {
-  const value = __spreadValues$1({}, transform);
+  const value = __spreadValues({}, transform);
   if (shape.boundingRectangle.top + transform.y <= boundingRect.top) {
     value.y = boundingRect.top - shape.boundingRectangle.top;
   } else if (shape.boundingRectangle.bottom + transform.y >= boundingRect.top + boundingRect.height) {
@@ -7040,7 +7206,7 @@ var _SnapModifier = class _SnapModifier2 extends Modifier {
     const { size = 20 } = (_a4 = this.options) != null ? _a4 : {};
     const x = typeof size === "number" ? size : size.x;
     const y2 = typeof size === "number" ? size : size.y;
-    return __spreadProps$1(__spreadValues$1({}, transform), {
+    return __spreadProps(__spreadValues({}, transform), {
       x: Math.ceil(transform.x / x) * x,
       y: Math.ceil(transform.y / y2) * y2
     });
@@ -7115,25 +7281,6 @@ var _RestrictToElement = class _RestrictToElement2 extends Modifier {
 };
 _RestrictToElement.configure = configurator(_RestrictToElement);
 var RestrictToElement = _RestrictToElement;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp.call(b2, prop))
-      __defNormalProp(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b2)) {
-      if (__propIsEnum.call(b2, prop))
-        __defNormalProp(a2, prop, b2[prop]);
-    }
-  return a2;
-};
-var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 function arrayMove(array, from, to) {
   if (from === to) {
     return array;
@@ -7142,87 +7289,6 @@ function arrayMove(array, from, to) {
   newArray.splice(to, 0, newArray.splice(from, 1)[0]);
   return newArray;
 }
-function mutate(items, event, mutation) {
-  var _a4, _b2;
-  const { source, target, canceled } = event.operation;
-  if (!source || !target || canceled) {
-    if ("preventDefault" in event) event.preventDefault();
-    return items;
-  }
-  const findIndex = (item, id) => item === id || typeof item === "object" && "id" in item && item.id === id;
-  if (Array.isArray(items)) {
-    const sourceIndex2 = items.findIndex((item) => findIndex(item, source.id));
-    const targetIndex2 = items.findIndex((item) => findIndex(item, target.id));
-    if (sourceIndex2 === -1 || targetIndex2 === -1) {
-      return items;
-    }
-    if (!canceled && "index" in source && typeof source.index === "number") {
-      const projectedSourceIndex = source.index;
-      if (projectedSourceIndex !== sourceIndex2) {
-        return mutation(items, sourceIndex2, projectedSourceIndex);
-      }
-    }
-    return mutation(items, sourceIndex2, targetIndex2);
-  }
-  const entries = Object.entries(items);
-  let sourceIndex = -1;
-  let sourceParent;
-  let targetIndex = -1;
-  let targetParent;
-  for (const [id, children] of entries) {
-    if (sourceIndex === -1) {
-      sourceIndex = children.findIndex((item) => findIndex(item, source.id));
-      if (sourceIndex !== -1) {
-        sourceParent = id;
-      }
-    }
-    if (targetIndex === -1) {
-      targetIndex = children.findIndex((item) => findIndex(item, target.id));
-      if (targetIndex !== -1) {
-        targetParent = id;
-      }
-    }
-    if (sourceIndex !== -1 && targetIndex !== -1) {
-      break;
-    }
-  }
-  if (!source.manager) return items;
-  const { dragOperation } = source.manager;
-  const position = (_b2 = (_a4 = dragOperation.shape) == null ? void 0 : _a4.current.center) != null ? _b2 : dragOperation.position.current;
-  if (targetParent == null) {
-    if (target.id in items) {
-      const insertionIndex = target.shape && position.y > target.shape.center.y ? items[target.id].length : 0;
-      targetParent = target.id;
-      targetIndex = insertionIndex;
-    }
-  }
-  if (sourceParent == null || targetParent == null || sourceParent === targetParent && sourceIndex === targetIndex) {
-    if ("preventDefault" in event) event.preventDefault();
-    return items;
-  }
-  if (sourceParent === targetParent) {
-    return __spreadProps(__spreadValues({}, items), {
-      [sourceParent]: mutation(items[sourceParent], sourceIndex, targetIndex)
-    });
-  }
-  const isBelowTarget = target.shape && Math.round(position.y) > Math.round(target.shape.center.y);
-  const modifier = isBelowTarget ? 1 : 0;
-  const sourceItem = items[sourceParent][sourceIndex];
-  return __spreadProps(__spreadValues({}, items), {
-    [sourceParent]: [
-      ...items[sourceParent].slice(0, sourceIndex),
-      ...items[sourceParent].slice(sourceIndex + 1)
-    ],
-    [targetParent]: [
-      ...items[targetParent].slice(0, targetIndex + modifier),
-      sourceItem,
-      ...items[targetParent].slice(targetIndex + modifier)
-    ]
-  });
-}
-function move(items, event) {
-  return mutate(items, event, arrayMove);
-}
 const SortableItem = ({ id, index, disabled, children, axis }) => {
   const [element, setElement] = useState(null);
   const handleRef = useRef(null);
@@ -7282,10 +7348,9 @@ const SortableItem = ({ id, index, disabled, children, axis }) => {
  * @preserve
  */
 const Draggable3 = (props) => {
-  useId("draggable-list-item-");
   const {
     children,
-    items: rawItems,
+    items,
     onChange,
     noReorder,
     axis = "both",
@@ -7294,16 +7359,18 @@ const Draggable3 = (props) => {
     hidden,
     ...rest
   } = props;
-  if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
+  if (typeof items === "undefined" || items === null || !Array.isArray(items)) {
     console.warn(__("Draggable: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
-  const [items, setItems] = useState(rawItems);
-  useEffect(() => {
-    setItems(rawItems);
-  }, [rawItems]);
   if (hidden) {
     return null;
   }
+  const [internalIds, setInternalIds] = useState(items.map((_2, index) => index));
+  useEffect(() => {
+    if (items.length !== internalIds.length) {
+      setInternalIds(items.map((_2, index) => index));
+    }
+  }, [items]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -7312,18 +7379,22 @@ const Draggable3 = (props) => {
       children: /* @__PURE__ */ jsx(
         DragDropProvider,
         {
-          onDragOver: (event) => setItems((items2) => move(items2, event)),
           onDragEnd: (event) => {
             if (event?.canceled) {
               return;
             }
-            setItems((items2) => move(items2, event));
-            onChange(items);
+            if (!("operation" in event)) {
+              return;
+            }
+            const oldIndex = event?.operation?.source?.sortable?.initialIndex;
+            const newIndex = event?.operation?.source?.sortable?.index;
+            onChange(arrayMove(items, oldIndex, newIndex));
+            setInternalIds(arrayMove(internalIds, oldIndex, newIndex));
           },
           children: items.map((item, index) => /* @__PURE__ */ jsx(
             SortableItem,
             {
-              id: randomId(6),
+              id: `item-${internalIds?.[index] ?? index}`,
               index,
               item,
               disabled: noReorder,
@@ -7337,19 +7408,18 @@ const Draggable3 = (props) => {
                     ...newValue
                   };
                   onChange(updated);
-                  setItems(updated);
                 },
                 itemIndex: index,
                 deleteItem: () => {
-                  setItems([...items].filter((_2, i2) => i2 !== index));
                   onChange([...items].filter((_2, i2) => i2 !== index));
+                  setInternalIds([...internalIds].filter((_2, i2) => i2 !== index));
                   if (onAfterItemRemove) {
                     onAfterItemRemove(item);
                   }
                 }
               }) })
             },
-            index
+            `item-${internalIds?.[index] ?? index}`
           ))
         }
       )