intergalactic 15.129.0 → 15.130.0

package/drag-and-drop/lib/esm/DragAndDrop.mjs

@@ -1,490 +1,623 @@
-import M from "@babel/runtime/helpers/esm/objectSpread2";
-import Z from "@babel/runtime/helpers/esm/toConsumableArray";
-import B from "@babel/runtime/helpers/esm/classCallCheck";
-import W from "@babel/runtime/helpers/esm/createClass";
-import p from "@babel/runtime/helpers/esm/assertThisInitialized";
-import L from "@babel/runtime/helpers/esm/inherits";
-import U from "@babel/runtime/helpers/esm/createSuper";
-import s from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as J } from 'intergalactic/utils/lib/core/index';
-import X, { sstyled as C, assignProps as F, Component as Y } from 'intergalactic/core';
-import q from "react";
-import { Box as N, ScreenReaderOnly as G } from 'intergalactic/flex-box';
-import { localizedMessages as O } from "./translations/__intergalactic-dynamic-locales.mjs";
-import Q from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import V from 'intergalactic/utils/lib/use/useEnhancedEffect';
-import $ from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
-import ee from 'intergalactic/utils/lib/uniqueID';
-import ne from 'intergalactic/utils/lib/canUseDOM';
-var te = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from 'intergalactic/utils/lib/core/index';
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from 'intergalactic/core';
+import React from "react";
+import { Box, ScreenReaderOnly } from 'intergalactic/flex-box';
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import useEnhancedEffect from 'intergalactic/utils/lib/use/useEnhancedEffect';
+import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
+import uniqueIDEnhance from 'intergalactic/utils/lib/uniqueID';
+import canUseDOM from 'intergalactic/utils/lib/canUseDOM';
+/*!__reshadow-styles__:"./style/drag-and-drop.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (J.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SDraggable_19qjn_gg_.__draggable_19qjn_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_19qjn_gg_.__draggable_19qjn_gg_::before{content:"";position:absolute;display:none;pointer-events:none;background-image:radial-gradient(circle at center,var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,transparent 0);background-size:6px 6px;background-position:2px 2px;background-repeat:repeat repeat}@media (hover:hover){.___SDraggable_19qjn_gg_.__draggable_19qjn_gg_:hover::before{display:block}}.___SDraggable_19qjn_gg_.__draggable_19qjn_gg_.__hideHoverEffect_19qjn_gg_:not(._role_menuitemcheckbox_19qjn_gg_)::before{display:none}.___SDraggable_19qjn_gg_._placement_right_19qjn_gg_::before{right:0}.___SDraggable_19qjn_gg_._placement_bottom_19qjn_gg_::before{bottom:0}.___SDraggable_19qjn_gg_._placement_left_19qjn_gg_::before{left:0}.___SDraggable_19qjn_gg_._placement_top_19qjn_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_19qjn_gg_._placement_bottom_19qjn_gg_::before{left:0;width:100%;height:16px}.___SDraggable_19qjn_gg_._placement_left_19qjn_gg_::before,.___SDraggable_19qjn_gg_._placement_right_19qjn_gg_::before{top:0;width:16px;height:100%}.___SDropZone_19qjn_gg_{position:relative}.___SDraggable_19qjn_gg_.__dropPreview_19qjn_gg_,.___SDropZone_19qjn_gg_.__dropPreview_19qjn_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_19qjn_gg_.__dark_19qjn_gg_.__dropPreview_19qjn_gg_,.___SDropZone_19qjn_gg_.__dark_19qjn_gg_.__dropPreview_19qjn_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_19qjn_gg_:focus{outline:0}.___SDraggable_19qjn_gg_.__keyboardFocused_19qjn_gg_:focus{box-shadow:none}.___SDraggable_19qjn_gg_.__keyboardFocused_19qjn_gg_:focus:after{position:absolute;display:block;content:"";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none}.___SDraggable_19qjn_gg_.__keyboardDragging_19qjn_gg_{scale:1.1;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);box-shadow:var(--intergalactic-box-shadow-dnd, 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16))!important}.___SDraggable_19qjn_gg_.__keyboardDragging_19qjn_gg_.__hideHoverEffect_19qjn_gg_::before,.___SDraggable_19qjn_gg_.__keyboardDragging_19qjn_gg_::before{display:block}.___SDraggable_19qjn_gg_.__keyboardDragging_19qjn_gg_.__reversedScaling_19qjn_gg_{scale:.95}.___SDraggable_19qjn_gg_.__animatedScaling_19qjn_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_19qjn_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_19qjn_gg_{transition:none}}',
-    "19qjn_gg_"
-  ), {
-    __SDraggable: "___SDraggable_19qjn_gg_",
-    _placement_top: "_placement_top_19qjn_gg_",
-    _placement_right: "_placement_right_19qjn_gg_",
-    _placement_left: "_placement_left_19qjn_gg_",
-    _placement_bottom: "_placement_bottom_19qjn_gg_",
-    __SDropZone: "___SDropZone_19qjn_gg_",
-    _dropPreview: "__dropPreview_19qjn_gg_",
-    _dark: "__dark_19qjn_gg_",
-    _keyboardFocused: "__keyboardFocused_19qjn_gg_",
-    _keyboardDragging: "__keyboardDragging_19qjn_gg_",
-    _reversedScaling: "__reversedScaling_19qjn_gg_",
-    _animatedScaling: "__animatedScaling_19qjn_gg_",
-    __SA11yHint: "___SA11yHint_19qjn_gg_",
-    _draggable: "__draggable_19qjn_gg_",
-    _hideHoverEffect: "__hideHoverEffect_19qjn_gg_",
-    _role_menuitemcheckbox: "_role_menuitemcheckbox_19qjn_gg_"
+    '.___SDraggable_1rnvf_gg_.__draggable_1rnvf_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_1rnvf_gg_.__draggable_1rnvf_gg_::before{content:"";position:absolute;display:none;pointer-events:none;background-image:radial-gradient(circle at center,var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,transparent 0);background-size:6px 6px;background-position:2px 2px;background-repeat:repeat repeat}@media (hover:hover){.___SDraggable_1rnvf_gg_.__draggable_1rnvf_gg_:hover::before{display:block}}.___SDraggable_1rnvf_gg_.__draggable_1rnvf_gg_.__hideHoverEffect_1rnvf_gg_:not(._role_menuitemcheckbox_1rnvf_gg_)::before{display:none}.___SDraggable_1rnvf_gg_._placement_right_1rnvf_gg_::before{right:0}.___SDraggable_1rnvf_gg_._placement_bottom_1rnvf_gg_::before{bottom:0}.___SDraggable_1rnvf_gg_._placement_left_1rnvf_gg_::before{left:0}.___SDraggable_1rnvf_gg_._placement_top_1rnvf_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_1rnvf_gg_._placement_bottom_1rnvf_gg_::before{left:0;width:100%;height:16px}.___SDraggable_1rnvf_gg_._placement_left_1rnvf_gg_::before,.___SDraggable_1rnvf_gg_._placement_right_1rnvf_gg_::before{top:0;width:16px;height:100%}.___SDropZone_1rnvf_gg_{position:relative}.___SDraggable_1rnvf_gg_.__dropPreview_1rnvf_gg_,.___SDropZone_1rnvf_gg_.__dropPreview_1rnvf_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_1rnvf_gg_.__dark_1rnvf_gg_.__dropPreview_1rnvf_gg_,.___SDropZone_1rnvf_gg_.__dark_1rnvf_gg_.__dropPreview_1rnvf_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_1rnvf_gg_:focus{outline:0}.___SDraggable_1rnvf_gg_.__keyboardFocused_1rnvf_gg_:focus{box-shadow:none}.___SDraggable_1rnvf_gg_.__keyboardFocused_1rnvf_gg_:focus:after{position:absolute;display:block;content:"";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none}.___SDraggable_1rnvf_gg_.__keyboardDragging_1rnvf_gg_{scale:1.1;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);box-shadow:var(--intergalactic-box-shadow-dnd, 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16))!important}.___SDraggable_1rnvf_gg_.__keyboardDragging_1rnvf_gg_.__hideHoverEffect_1rnvf_gg_::before,.___SDraggable_1rnvf_gg_.__keyboardDragging_1rnvf_gg_::before{display:block}.___SDraggable_1rnvf_gg_.__keyboardDragging_1rnvf_gg_.__reversedScaling_1rnvf_gg_{scale:.95}.___SDraggable_1rnvf_gg_.__animatedScaling_1rnvf_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_1rnvf_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_1rnvf_gg_{transition:none}}',
+    /*__inner_css_end__*/
+    "1rnvf_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SDraggable": "___SDraggable_1rnvf_gg_",
+    "_placement_top": "_placement_top_1rnvf_gg_",
+    "_placement_right": "_placement_right_1rnvf_gg_",
+    "_placement_left": "_placement_left_1rnvf_gg_",
+    "_placement_bottom": "_placement_bottom_1rnvf_gg_",
+    "__SDropZone": "___SDropZone_1rnvf_gg_",
+    "_dropPreview": "__dropPreview_1rnvf_gg_",
+    "_dark": "__dark_1rnvf_gg_",
+    "_keyboardFocused": "__keyboardFocused_1rnvf_gg_",
+    "_keyboardDragging": "__keyboardDragging_1rnvf_gg_",
+    "_reversedScaling": "__reversedScaling_1rnvf_gg_",
+    "_animatedScaling": "__animatedScaling_1rnvf_gg_",
+    "__SA11yHint": "___SA11yHint_1rnvf_gg_",
+    "_draggable": "__draggable_1rnvf_gg_",
+    "_hideHoverEffect": "__hideHoverEffect_1rnvf_gg_",
+    "_role_menuitemcheckbox": "_role_menuitemcheckbox_1rnvf_gg_"
   })
-), z = function() {
-}, R = /* @__PURE__ */ q.createContext({
-  attach: z,
-  detach: z
-}), A = /* @__PURE__ */ function(E) {
-  L(b, E);
-  var c = U(b);
-  function b() {
-    var e;
-    B(this, b);
-    for (var h = arguments.length, _ = new Array(h), D = 0; D < h; D++)
-      _[D] = arguments[D];
-    return e = c.call.apply(c, [this].concat(_)), s(p(e), "state", {
+);
+var noop = function noop2() {
+};
+var DragAndDropContext = /* @__PURE__ */ React.createContext({
+  attach: noop,
+  detach: noop
+});
+var DragAndDropRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(DragAndDropRoot2, _Component);
+  var _super = _createSuper(DragAndDropRoot2);
+  function DragAndDropRoot2() {
+    var _this;
+    _classCallCheck(this, DragAndDropRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
       items: [],
       dragging: null,
       dragOver: null,
-      hideHoverEffect: !1,
+      hideHoverEffect: false,
       // https://stackoverflow.com/questions/67118739/hover-effect-reset-when-hovering-over-other-letters
       a11yHint: null,
       keyboardDraggingIndex: null,
       animatedScaling: null,
-      reversedScaling: !1
-    }), s(p(e), "containerRef", /* @__PURE__ */ q.createRef()), s(p(e), "clearA11yHintTimeout", 0), s(p(e), "handleItemDragStart", function(n) {
-      var r = e.state.items, t = r[n];
-      if (t) {
-        var a = t.node.getAttribute("aria-label") || t.node.textContent || "".concat(n + 1), i = t.zoneName, g = i ? r.filter(function(l) {
-          return (l == null ? void 0 : l.zoneName) === i;
-        }) : r, o = g.length, u = g.findIndex(function(l) {
-          return (l == null ? void 0 : l.node) === t.node || (l == null ? void 0 : l.id) && (l == null ? void 0 : l.id) === t.id;
-        });
-        e.setA11yHint(i ? "grabbedWithZone" : "grabbed", {
-          itemText: a,
-          itemPosition: u + 1,
-          itemsCount: o,
-          zoneName: i || ""
-        }), e.setState(function(l) {
-          return {
-            dragging: {
-              index: n,
-              initialItemsRects: l.items.map(function(f) {
-                return f == null ? void 0 : f.node.getBoundingClientRect();
-              })
-            }
-          };
-        });
-      }
-    }), s(p(e), "handleItemDragEnd", function(n) {
-      n.preventDefault(), e.setState({
+      reversedScaling: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "clearA11yHintTimeout", 0);
+    _defineProperty(_assertThisInitialized(_this), "handleItemDragStart", function(index) {
+      var items = _this.state.items;
+      var currentItem = items[index];
+      if (!currentItem) return;
+      var itemText = currentItem.node.getAttribute("aria-label") || currentItem.node.textContent || "".concat(index + 1);
+      var zoneName = currentItem.zoneName;
+      var zonedItems = !zoneName ? items : items.filter(function(i) {
+        return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
+      });
+      var itemsCount = zonedItems.length;
+      var itemPosition = zonedItems.findIndex(function(i) {
+        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
+      });
+      _this.setA11yHint(zoneName ? "grabbedWithZone" : "grabbed", {
+        itemText,
+        itemPosition: itemPosition + 1,
+        itemsCount,
+        zoneName: zoneName || ""
+      });
+      _this.setState(function(prevState) {
+        return {
+          dragging: {
+            index,
+            initialItemsRects: prevState.items.map(function(item) {
+              return item === null || item === void 0 ? void 0 : item.node.getBoundingClientRect();
+            })
+          }
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemDragEnd", function(event) {
+      event.preventDefault();
+      _this.setState({
         dragging: null,
         dragOver: null,
-        reversedScaling: !1,
+        reversedScaling: false,
         keyboardDraggingIndex: null
       });
-    }), s(p(e), "handleItemDragOver", function(n) {
-      n.preventDefault();
-      var r = e.state, t = r.items, a = r.dragging, i = r.dragOver;
-      if (a) {
-        var g = a.initialItemsRects.findIndex(function(d) {
-          return d && n.clientX > d.x && n.clientX < d.x + d.width && n.clientY > d.y && n.clientY < d.y + d.height;
-        }), o = t[g], u = t[a.index];
-        if (!(!o || !u || g === i)) {
-          var l = o.isDropZone ? u.node : o.node, f = l.getAttribute("aria-label") || l.textContent || "".concat(g + 1), m = o.zoneName, v = m ? t.filter(function(d) {
-            return (d == null ? void 0 : d.zoneName) === m;
-          }) : t, y = v.length, j = v.findIndex(function(d) {
-            return (d == null ? void 0 : d.node) === o.node || (d == null ? void 0 : d.id) && (d == null ? void 0 : d.id) === o.id;
-          }), S = m ? o.isDropZone ? "grabbingJustWithZone" : "grabbingFullWithZone" : "grabbing";
-          e.setA11yHint(S, {
-            itemText: f,
-            itemPosition: j + 1,
-            itemsCount: y,
-            zoneName: m || ""
-          }), e.setState({
-            dragOver: g
-          }, e.swapElements);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemDragOver", function(event) {
+      event.preventDefault();
+      var _this$state = _this.state, items = _this$state.items, dragging = _this$state.dragging, dragOver = _this$state.dragOver;
+      if (!dragging) return;
+      var itemIndex = dragging.initialItemsRects.findIndex(function(rect) {
+        return rect && event.clientX > rect.x && event.clientX < rect.x + rect.width && event.clientY > rect.y && event.clientY < rect.y + rect.height;
+      });
+      var currentItem = items[itemIndex];
+      var draggingItem = items[dragging.index];
+      if (!currentItem || !draggingItem || itemIndex === dragOver) return;
+      var node = currentItem.isDropZone ? draggingItem.node : currentItem.node;
+      var itemText = node.getAttribute("aria-label") || node.textContent || "".concat(itemIndex + 1);
+      var zoneName = currentItem.zoneName;
+      var zonedItems = !zoneName ? items : items.filter(function(i) {
+        return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
+      });
+      var itemsCount = zonedItems.length;
+      var itemPosition = zonedItems.findIndex(function(i) {
+        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
+      });
+      var i18nKey = !zoneName ? "grabbing" : currentItem.isDropZone ? "grabbingJustWithZone" : "grabbingFullWithZone";
+      _this.setA11yHint(i18nKey, {
+        itemText,
+        itemPosition: itemPosition + 1,
+        itemsCount,
+        zoneName: zoneName || ""
+      });
+      _this.setState({
+        dragOver: itemIndex
+      }, _this.swapElements);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemDrop", function() {
+      var onDnD = _this.asProps.onDnD;
+      if (!onDnD) return;
+      var _this$state2 = _this.state, items = _this$state2.items, dragging = _this$state2.dragging, dragOver = _this$state2.dragOver;
+      if (!dragging) return;
+      var currentItem = dragOver !== null ? items[dragOver] : items[dragging.index];
+      var draggingItem = items[dragging.index];
+      if (!currentItem || !draggingItem) return;
+      var node = currentItem.isDropZone ? draggingItem.node : currentItem.node;
+      var itemText = node.getAttribute("aria-label") || node.textContent || "".concat((dragOver !== null && dragOver !== void 0 ? dragOver : dragging.index) + 1);
+      var zoneName = currentItem.zoneName;
+      var zonedItems = !zoneName ? items : items.filter(function(i) {
+        return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
+      });
+      var itemsCount = zonedItems.length;
+      var itemPosition = zonedItems.findIndex(function(i) {
+        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
+      });
+      var i18nKey = !zoneName ? "dropped" : currentItem.isDropZone ? "droppedJustWithZone" : "droppedFullWithZone";
+      _this.setA11yHint(i18nKey, {
+        itemText,
+        itemPosition: itemPosition + 1,
+        itemsCount,
+        zoneName: zoneName || ""
+      });
+      _this.setState({
+        dragging: null,
+        dragOver: null,
+        keyboardDraggingIndex: null,
+        hideHoverEffect: true,
+        reversedScaling: false
+      });
+      if (dragging && items[dragging.index]) {
+        var fromNode = items[dragging.index];
+        if (fromNode) {
+          onDnD({
+            fromId: fromNode.id,
+            fromIndex: dragging.index,
+            toId: currentItem.id,
+            toIndex: dragOver !== null && dragOver !== void 0 ? dragOver : dragging.index
+          });
         }
       }
-    }), s(p(e), "handleItemDrop", function() {
-      var n = e.asProps.onDnD;
-      if (n) {
-        var r = e.state, t = r.items, a = r.dragging, i = r.dragOver;
-        if (a) {
-          var g = i !== null ? t[i] : t[a.index], o = t[a.index];
-          if (!(!g || !o)) {
-            var u = g.isDropZone ? o.node : g.node, l = u.getAttribute("aria-label") || u.textContent || "".concat((i ?? a.index) + 1), f = g.zoneName, m = f ? t.filter(function(x) {
-              return (x == null ? void 0 : x.zoneName) === f;
-            }) : t, v = m.length, y = m.findIndex(function(x) {
-              return (x == null ? void 0 : x.node) === g.node || (x == null ? void 0 : x.id) && (x == null ? void 0 : x.id) === g.id;
-            }), j = f ? g.isDropZone ? "droppedJustWithZone" : "droppedFullWithZone" : "dropped";
-            if (e.setA11yHint(j, {
-              itemText: l,
-              itemPosition: y + 1,
-              itemsCount: v,
-              zoneName: f || ""
-            }), e.setState({
-              dragging: null,
-              dragOver: null,
-              keyboardDraggingIndex: null,
-              hideHoverEffect: !0,
-              reversedScaling: !1
-            }), a && t[a.index]) {
-              var S = t[a.index];
-              S && n({
-                fromId: S.id,
-                fromIndex: a.index,
-                toId: g.id,
-                toIndex: i ?? a.index
-              });
-            }
-            if (g.draggingAllowed) {
-              var I, H, P;
-              (I = (H = e.asProps).onSwapDraggable) === null || I === void 0 || I.call(H, (P = t[a.index]) === null || P === void 0 ? void 0 : P.children, g.children);
-            } else {
-              var d, k, w;
-              (d = (k = e.asProps).onInsertDroppable) === null || d === void 0 || d.call(k, (w = t[a.index]) === null || w === void 0 ? void 0 : w.children, g.children);
-            }
-          }
-        }
+      if (!currentItem.draggingAllowed) {
+        var _this$asProps$onInser, _this$asProps, _items$index;
+        (_this$asProps$onInser = (_this$asProps = _this.asProps).onInsertDroppable) === null || _this$asProps$onInser === void 0 ? void 0 : _this$asProps$onInser.call(_this$asProps, (_items$index = items[dragging.index]) === null || _items$index === void 0 ? void 0 : _items$index.children, currentItem.children);
+      } else {
+        var _this$asProps$onSwapD, _this$asProps2, _items$index2;
+        (_this$asProps$onSwapD = (_this$asProps2 = _this.asProps).onSwapDraggable) === null || _this$asProps$onSwapD === void 0 ? void 0 : _this$asProps$onSwapD.call(_this$asProps2, (_items$index2 = items[dragging.index]) === null || _items$index2 === void 0 ? void 0 : _items$index2.children, currentItem.children);
       }
-    }), s(p(e), "handleItemDragEnter", function(n) {
-      n.preventDefault();
-    }), s(p(e), "handleItemMouseMove", function() {
-      e.state.hideHoverEffect && e.setState({
-        hideHoverEffect: !1
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemDragEnter", function(event) {
+      event.preventDefault();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseMove", function() {
+      if (!_this.state.hideHoverEffect) return;
+      _this.setState({
+        hideHoverEffect: false
       });
-    }), s(p(e), "updateItemScaling", function() {
-      var n, r = (n = e.state.items[0]) === null || n === void 0 ? void 0 : n.node;
-      if (r && !e.state.reversedScaling) {
-        for (var t = r.getBoundingClientRect(), a = !1, i = r.parentElement; i && i !== document.body; ) {
-          var g = getComputedStyle(i), o = i.getBoundingClientRect();
-          if (g.overflow !== "visible") {
-            if (o.left >= t.left || o.right <= t.right || o.top >= t.top || o.bottom <= t.bottom) {
-              a = !0;
-              break;
-            }
-          } else if (o.left < t.left && o.right > t.right && o.top < t.top && o.bottom > t.bottom)
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateItemScaling", function() {
+      var _this$state$items$;
+      var firstItemNode = (_this$state$items$ = _this.state.items[0]) === null || _this$state$items$ === void 0 ? void 0 : _this$state$items$.node;
+      if (!firstItemNode) return;
+      if (_this.state.reversedScaling) return;
+      var firstItemRect = firstItemNode.getBoundingClientRect();
+      var reversedScaling = false;
+      var parent = firstItemNode.parentElement;
+      while (parent && parent !== document.body) {
+        var computedStyle = getComputedStyle(parent);
+        var rect = parent.getBoundingClientRect();
+        if (computedStyle.overflow !== "visible") {
+          if (rect.left >= firstItemRect.left || rect.right <= firstItemRect.right || rect.top >= firstItemRect.top || rect.bottom <= firstItemRect.bottom) {
+            reversedScaling = true;
+            break;
+          }
+        } else {
+          if (rect.left < firstItemRect.left && rect.right > firstItemRect.right && rect.top < firstItemRect.top && rect.bottom > firstItemRect.bottom) {
             break;
-          i = i.parentElement;
+          }
         }
-        e.state.reversedScaling !== a && e.setState({
-          reversedScaling: a
+        parent = parent.parentElement;
+      }
+      if (_this.state.reversedScaling !== reversedScaling) {
+        _this.setState({
+          reversedScaling
         });
       }
-    }), s(p(e), "swapElements", function() {
-      var n, r, t, a = e.state, i = a.items, g = a.dragging, o = a.dragOver, u = (n = g == null ? void 0 : g.index) !== null && n !== void 0 ? n : null;
-      if (!(u === null || o === null)) {
-        var l = (r = i[u]) === null || r === void 0 ? void 0 : r.node, f = (t = i[o]) === null || t === void 0 ? void 0 : t.node;
-        if (!(!l || !f)) {
-          if (u === o) {
-            var m, v, y, j = (m = (v = i[o + 1]) === null || v === void 0 ? void 0 : v.node) !== null && m !== void 0 ? m : null;
-            (y = e.containerRef.current) === null || y === void 0 || y.insertBefore(l, j);
-          } else if (u > o) {
-            var S;
-            (S = e.containerRef.current) === null || S === void 0 || S.insertBefore(l, f);
-          } else {
-            var d;
-            (d = e.containerRef.current) === null || d === void 0 || d.insertBefore(l, f.nextSibling);
-          }
-          l.focus();
-        }
+    });
+    _defineProperty(_assertThisInitialized(_this), "swapElements", function() {
+      var _dragging$index, _items$draggingIndex, _items$dragOver;
+      var _this$state3 = _this.state, items = _this$state3.items, dragging = _this$state3.dragging, dragOver = _this$state3.dragOver;
+      var draggingIndex = (_dragging$index = dragging === null || dragging === void 0 ? void 0 : dragging.index) !== null && _dragging$index !== void 0 ? _dragging$index : null;
+      if (draggingIndex === null || dragOver === null) return;
+      var node = (_items$draggingIndex = items[draggingIndex]) === null || _items$draggingIndex === void 0 ? void 0 : _items$draggingIndex.node;
+      var dragNode = (_items$dragOver = items[dragOver]) === null || _items$dragOver === void 0 ? void 0 : _items$dragOver.node;
+      if (!node || !dragNode) return;
+      if (draggingIndex === dragOver) {
+        var _items$node, _items, _this$containerRef$cu;
+        var nextDragNode = (_items$node = (_items = items[dragOver + 1]) === null || _items === void 0 ? void 0 : _items.node) !== null && _items$node !== void 0 ? _items$node : null;
+        (_this$containerRef$cu = _this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.insertBefore(node, nextDragNode);
+      } else if (draggingIndex > dragOver) {
+        var _this$containerRef$cu2;
+        (_this$containerRef$cu2 = _this.containerRef.current) === null || _this$containerRef$cu2 === void 0 ? void 0 : _this$containerRef$cu2.insertBefore(node, dragNode);
+      } else {
+        var _this$containerRef$cu3;
+        (_this$containerRef$cu3 = _this.containerRef.current) === null || _this$containerRef$cu3 === void 0 ? void 0 : _this$containerRef$cu3.insertBefore(node, dragNode.nextSibling);
       }
-    }), s(p(e), "handleItemKeyDown", function(n, r) {
-      if (n.target === n.currentTarget) {
-        if (e.state.dragging && n.key === "Tab" && (n.preventDefault(), n.stopPropagation()), n.key === " ") {
-          var t;
-          return n.preventDefault(), n.stopPropagation(), e.state.dragging ? (e.handleItemDrop(), e.setState({
-            dragging: null,
-            dragOver: null,
-            keyboardDraggingIndex: null,
-            animatedScaling: r,
-            hideHoverEffect: !0
-          })) : (t = e.state.items[r]) !== null && t !== void 0 && t.draggingAllowed && (e.handleItemDragStart(r), e.setState({
-            keyboardDraggingIndex: r,
-            animatedScaling: r
-          }), e.updateItemScaling()), !1;
-        } else if (n.key === "Escape" && e.state.dragging) {
-          n.preventDefault(), n.stopPropagation(), e.setA11yHint("discarded"), e.setState({
+      node.focus();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemKeyDown", function(event, index) {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (_this.state.dragging && event.key === "Tab") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (event.key === " ") {
+        var _this$state$items$ind;
+        event.preventDefault();
+        event.stopPropagation();
+        if (_this.state.dragging) {
+          _this.handleItemDrop();
+          _this.setState({
             dragging: null,
             dragOver: null,
             keyboardDraggingIndex: null,
-            hideHoverEffect: !0
+            animatedScaling: index,
+            hideHoverEffect: true
           });
-          for (var a = e.state.items, i = a.length - 1; i >= 0; i--) {
-            var g, o, u, l = (g = a[i]) === null || g === void 0 ? void 0 : g.node, f = (o = (u = a[i + 1]) === null || u === void 0 ? void 0 : u.node) !== null && o !== void 0 ? o : null;
-            if (l) {
-              var m;
-              (m = e.containerRef.current) === null || m === void 0 || m.insertBefore(l, f);
-            }
+        } else if ((_this$state$items$ind = _this.state.items[index]) !== null && _this$state$items$ind !== void 0 && _this$state$items$ind.draggingAllowed) {
+          _this.handleItemDragStart(index);
+          _this.setState({
+            keyboardDraggingIndex: index,
+            animatedScaling: index
+          });
+          _this.updateItemScaling();
+        }
+        return false;
+      } else if (event.key === "Escape" && _this.state.dragging) {
+        event.preventDefault();
+        event.stopPropagation();
+        _this.setA11yHint("discarded");
+        _this.setState({
+          dragging: null,
+          dragOver: null,
+          keyboardDraggingIndex: null,
+          hideHoverEffect: true
+        });
+        var items = _this.state.items;
+        for (var i = items.length - 1; i >= 0; i--) {
+          var _items$i, _items$node2, _items2;
+          var node = (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i.node;
+          var prevNode = (_items$node2 = (_items2 = items[i + 1]) === null || _items2 === void 0 ? void 0 : _items2.node) !== null && _items$node2 !== void 0 ? _items$node2 : null;
+          if (node) {
+            var _this$containerRef$cu4;
+            (_this$containerRef$cu4 = _this.containerRef.current) === null || _this$containerRef$cu4 === void 0 ? void 0 : _this$containerRef$cu4.insertBefore(node, prevNode);
           }
-          return n.target instanceof HTMLElement && n.target.focus(), !1;
-        } else if (n.key.startsWith("Arrow") && e.state.dragging) {
-          e.state.animatedScaling !== null && e.setState({
+        }
+        if (event.target instanceof HTMLElement) {
+          event.target.focus();
+        }
+        return false;
+      } else if (event.key.startsWith("Arrow") && _this.state.dragging) {
+        if (_this.state.animatedScaling !== null) {
+          _this.setState({
             animatedScaling: null
           });
-          var v = n.currentTarget;
-          if (!v || v !== document.activeElement) return;
-          n.preventDefault(), n.stopPropagation(), requestAnimationFrame(function() {
-            var y;
-            if (!(!(v instanceof HTMLElement) || v !== document.activeElement)) {
-              var j = [], S = {
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0
+        }
+        var _node = event.currentTarget;
+        if (!_node || _node !== document.activeElement) return;
+        event.preventDefault();
+        event.stopPropagation();
+        requestAnimationFrame(function() {
+          var _this$containerRef$cu5;
+          if (!(_node instanceof HTMLElement) || _node !== document.activeElement) return;
+          var rects = [];
+          var nodeRect = {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+          };
+          (_this$containerRef$cu5 = _this.containerRef.current) === null || _this$containerRef$cu5 === void 0 ? void 0 : _this$containerRef$cu5.childNodes.forEach(function(childNode, index2) {
+            if (childNode instanceof HTMLElement && childNode.getAttribute("draggable") !== null) {
+              var rect = childNode.getBoundingClientRect();
+              var roundedRect = {
+                top: Math.round(rect.top),
+                right: Math.round(rect.right),
+                bottom: Math.round(rect.bottom),
+                left: Math.round(rect.left)
               };
-              (y = e.containerRef.current) === null || y === void 0 || y.childNodes.forEach(function(k, w) {
-                if (k instanceof HTMLElement && k.getAttribute("draggable") !== null) {
-                  var I = k.getBoundingClientRect(), H = {
-                    top: Math.round(I.top),
-                    right: Math.round(I.right),
-                    bottom: Math.round(I.bottom),
-                    left: Math.round(I.left)
-                  };
-                  j.push(H), k === v && (S = H);
-                }
-              });
-              var d = re(j, S, n.key);
-              return d === -1 || v && e.state.dragging !== null && (e.setA11yHint("grabbing", {
-                itemPosition: d + 1,
-                itemsCount: e.state.items.length
-              }), e.setState({
-                dragOver: d
-              }, function() {
-                e.swapElements();
-              })), !1;
+              rects.push(roundedRect);
+              if (childNode === _node) {
+                nodeRect = roundedRect;
+              }
             }
           });
-        }
+          var nextIndex = findNextRectangleIndex(rects, nodeRect, event.key);
+          if (nextIndex === -1) return false;
+          if (_node && _this.state.dragging !== null) {
+            _this.setA11yHint("grabbing", {
+              itemPosition: nextIndex + 1,
+              itemsCount: _this.state.items.length
+            });
+            _this.setState({
+              dragOver: nextIndex
+            }, function() {
+              _this.swapElements();
+            });
+          }
+          return false;
+        });
       }
-    }), s(p(e), "handleItemFocus", function() {
-      e.state.dragging && e.updateItemScaling();
-    }), s(p(e), "makeItemDragStartHandler", function(n) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemFocus", function() {
+      if (!_this.state.dragging) return;
+      _this.updateItemScaling();
+    });
+    _defineProperty(_assertThisInitialized(_this), "makeItemDragStartHandler", function(index) {
       return function() {
-        return e.handleItemDragStart(n);
+        return _this.handleItemDragStart(index);
       };
-    }), s(p(e), "makeItemKeyDownHandler", function(n) {
-      return function(r) {
-        return e.handleItemKeyDown(r, n);
+    });
+    _defineProperty(_assertThisInitialized(_this), "makeItemKeyDownHandler", function(index) {
+      return function(event) {
+        return _this.handleItemKeyDown(event, index);
       };
-    }), s(p(e), "handlePageKeyDown", function(n) {
-      if (e.asProps.customFocus !== void 0) {
-        var r = e.getCustomFocusItemIndex(e.asProps.customFocus);
-        e.state.items[r] && e.handleItemKeyDown(n, r);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlePageKeyDown", function(event) {
+      if (_this.asProps.customFocus !== void 0) {
+        var itemIndex = _this.getCustomFocusItemIndex(_this.asProps.customFocus);
+        if (_this.state.items[itemIndex]) {
+          _this.handleItemKeyDown(event, itemIndex);
+        }
       }
-    }), s(p(e), "attach", function(n) {
-      var r = n.index, t = n.children, a = n.node, i = n.id, g = n.draggingAllowed, o = n.zoneName, u = n.isDropZone;
-      e.setState(function(l) {
-        var f, m;
-        if (((f = l.items[r]) === null || f === void 0 ? void 0 : f.children) === t && ((m = l.items[r]) === null || m === void 0 ? void 0 : m.node) === a) return l;
-        var v = l.items;
-        return v[r] = {
-          children: t,
-          node: a,
-          id: i,
-          draggingAllowed: g,
-          zoneName: o,
-          isDropZone: u
-        }, {
-          items: Z(v)
+    });
+    _defineProperty(_assertThisInitialized(_this), "attach", function(_ref7) {
+      var index = _ref7.index, children = _ref7.children, node = _ref7.node, id = _ref7.id, draggingAllowed = _ref7.draggingAllowed, zoneName = _ref7.zoneName, isDropZone = _ref7.isDropZone;
+      _this.setState(function(prevState) {
+        var _prevState$items$inde, _prevState$items$inde2;
+        if (((_prevState$items$inde = prevState.items[index]) === null || _prevState$items$inde === void 0 ? void 0 : _prevState$items$inde.children) === children && ((_prevState$items$inde2 = prevState.items[index]) === null || _prevState$items$inde2 === void 0 ? void 0 : _prevState$items$inde2.node) === node) return prevState;
+        var items = prevState.items;
+        items[index] = {
+          children,
+          node,
+          id,
+          draggingAllowed,
+          zoneName,
+          isDropZone
+        };
+        return {
+          items: _toConsumableArray(items)
         };
       });
-    }), s(p(e), "detach", function(n) {
-      e.setState(function(r) {
-        if (!r.items[n]) return r;
-        var t = r.items;
-        return t[n] = void 0, {
-          items: Z(t)
+    });
+    _defineProperty(_assertThisInitialized(_this), "detach", function(index) {
+      _this.setState(function(prevState) {
+        if (!prevState.items[index]) return prevState;
+        var items = prevState.items;
+        items[index] = void 0;
+        return {
+          items: _toConsumableArray(items)
         };
       });
-    }), s(p(e), "getCustomFocusItemIndex", function(n) {
-      if (n !== void 0) {
-        var r = n;
-        if (typeof r == "string" && (r = e.state.items.findIndex(function(t) {
-          return (t == null ? void 0 : t.id) === n;
-        })), !(r === -1 || typeof r != "number"))
-          return r;
-      }
-    }), s(p(e), "setA11yHint", function(n) {
-      var r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-      clearTimeout(e.clearA11yHintTimeout);
-      var t = e.asProps.getI18nText;
-      e.setState({
-        a11yHint: t(n, r)
-      }), (n === "dropped" || n === "discarded") && ne() && (e.clearA11yHintTimeout = window.setTimeout(function() {
-        e.setState({
-          a11yHint: null
+    });
+    _defineProperty(_assertThisInitialized(_this), "getCustomFocusItemIndex", function(customFocus) {
+      if (customFocus === void 0) return void 0;
+      var itemIndex = customFocus;
+      if (typeof itemIndex === "string") {
+        itemIndex = _this.state.items.findIndex(function(item) {
+          return (item === null || item === void 0 ? void 0 : item.id) === customFocus;
         });
-      }, 2e3));
-    }), e;
+      }
+      if (itemIndex === -1 || typeof itemIndex !== "number") return void 0;
+      return itemIndex;
+    });
+    _defineProperty(_assertThisInitialized(_this), "setA11yHint", function(key) {
+      var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+      clearTimeout(_this.clearA11yHintTimeout);
+      var getI18nText = _this.asProps.getI18nText;
+      _this.setState({
+        a11yHint: getI18nText(key, options)
+      });
+      if ((key === "dropped" || key === "discarded") && canUseDOM()) {
+        _this.clearA11yHintTimeout = window.setTimeout(function() {
+          _this.setState({
+            a11yHint: null
+          });
+        }, 2e3);
+      }
+    });
+    return _this;
   }
-  return W(b, [{
+  _createClass(DragAndDropRoot2, [{
     key: "getDraggableProps",
-    value: function(h, _) {
-      var D = this.asProps.uid;
+    value: function getDraggableProps(_, index) {
+      var uid = this.asProps.uid;
       return {
-        uid: D,
-        index: _,
-        onDragStart: this.makeItemDragStartHandler(_),
+        uid,
+        index,
+        onDragStart: this.makeItemDragStartHandler(index),
         onDragEnd: this.handleItemDragEnd,
         onDragOver: this.handleItemDragOver,
         onDragEnter: this.handleItemDragEnter,
         onDrop: this.handleItemDrop,
         onMouseMove: this.handleItemMouseMove,
-        onKeyDown: this.makeItemKeyDownHandler(_),
+        onKeyDown: this.makeItemKeyDownHandler(index),
         onFocus: this.handleItemFocus,
-        dropPreview: _ === this.state.dragOver,
-        keyboardDragging: _ === this.state.keyboardDraggingIndex,
+        dropPreview: index === this.state.dragOver,
+        keyboardDragging: index === this.state.keyboardDraggingIndex,
         reversedScaling: this.state.reversedScaling,
         dark: this.asProps.theme === "dark",
         hideHoverEffect: this.state.hideHoverEffect,
-        animatedScaling: _ === this.state.animatedScaling
+        animatedScaling: index === this.state.animatedScaling
       };
     }
   }, {
     key: "componentDidMount",
-    value: function() {
+    value: function componentDidMount() {
       document.addEventListener("keydown", this.handlePageKeyDown, {
-        capture: !0
+        capture: true
       });
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
-      clearTimeout(this.clearA11yHintTimeout), document.removeEventListener("keydown", this.handlePageKeyDown, {
-        capture: !0
+    value: function componentWillUnmount() {
+      clearTimeout(this.clearA11yHintTimeout);
+      document.removeEventListener("keydown", this.handlePageKeyDown, {
+        capture: true
       });
     }
   }, {
     key: "componentDidUpdate",
-    value: function(h) {
-      if (h.customFocus !== this.asProps.customFocus) {
-        var _ = this.getCustomFocusItemIndex(this.asProps.customFocus);
-        this.state.items[_] && this.handleItemFocus();
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.customFocus !== this.asProps.customFocus) {
+        var itemIndex = this.getCustomFocusItemIndex(this.asProps.customFocus);
+        if (this.state.items[itemIndex]) this.handleItemFocus();
       }
     }
   }, {
     key: "render",
-    value: function() {
-      var h = this.asProps, _, D = this.attach, n = this.detach, r = "div", t = this.state, a = t.a11yHint;
-      t.dragging;
-      var i = {
-        attach: D,
-        detach: n
-      }, g = this.asProps, o = g.getI18nText, u = g.uid;
-      return _ = C(this.asProps.styles), /* @__PURE__ */ q.createElement(R.Provider, {
-        value: i
-      }, a && /* @__PURE__ */ q.createElement(r, _.cn("SA11yHint", {
-        role: "alert",
+    value: function render() {
+      var _ref = this.asProps, _ref4;
+      var attach = this.attach, detach = this.detach;
+      var SA11yHint = "div";
+      var _this$state4 = this.state, a11yHint = _this$state4.a11yHint;
+      _this$state4.dragging;
+      var context = {
+        attach,
+        detach
+      };
+      var _this$asProps3 = this.asProps, getI18nText = _this$asProps3.getI18nText, uid = _this$asProps3.uid;
+      return _ref4 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(DragAndDropContext.Provider, {
+        value: context
+      }, a11yHint && /* @__PURE__ */ React.createElement(SA11yHint, _ref4.cn("SA11yHint", {
+        "role": "alert",
         "aria-live": "assertive"
-      }), a), /* @__PURE__ */ q.createElement(N, F({
-        role: "group",
-        ref: this.containerRef
-      }, h)), /* @__PURE__ */ q.createElement(G, _.cn("ScreenReaderOnly", {
-        id: "describe-draggable-".concat(u),
+      }), a11yHint), /* @__PURE__ */ React.createElement(Box, assignProps({
+        "role": "group",
+        "ref": this.containerRef
+      }, _ref)), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref4.cn("ScreenReaderOnly", {
+        "id": "describe-draggable-".concat(uid),
         "aria-hidden": "true"
-      }), o("describe", {
+      }), getI18nText("describe", {
         control: "Space"
       })));
     }
-  }]), b;
-}(Y);
-s(A, "displayName", "DragAndDrop");
-s(A, "enhance", [Q(O), ee()]);
-s(A, "defaultProps", {
+  }]);
+  return DragAndDropRoot2;
+}(Component);
+_defineProperty(DragAndDropRoot, "displayName", "DragAndDrop");
+_defineProperty(DragAndDropRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhance()]);
+_defineProperty(DragAndDropRoot, "defaultProps", {
   theme: "default",
-  i18n: O,
+  i18n: localizedMessages,
   locale: "en"
 });
-s(A, "style", te);
-var K = function(c) {
-  var b = arguments[0], e, h = N, _ = q.useRef(), D = q.useContext(R), n = D.attach, r = D.detach, t = c.styles, a = c.placement, i = a === void 0 ? "right" : a, g = c.noDrag, o = g === void 0 ? !1 : g, u = c.index, l = c.children, f = c.Children, m = c.id, v = c.zoneName, y = c.isDropZone, j = y === void 0 ? !1 : y, S = c.uid, d = c.isCustomFocus, k = d === void 0 ? !1 : d, w = c.keyboardFocused, I = q.useMemo(function() {
-    return typeof l == "function" ? l(c) : l;
-  }, [l, c]);
-  return V(function() {
-    return n({
-      index: u,
-      children: I,
-      node: _.current,
-      id: m,
-      draggingAllowed: !o,
-      zoneName: v,
-      isDropZone: j
-    }), function() {
-      return r(u);
+_defineProperty(DragAndDropRoot, "style", style);
+var Draggable = function Draggable2(props) {
+  var _ref2 = arguments[0], _ref5;
+  var SDraggable = Box;
+  var ref = React.useRef();
+  var _React$useContext = React.useContext(DragAndDropContext), attach = _React$useContext.attach, detach = _React$useContext.detach;
+  var styles = props.styles, _props$placement = props.placement, placement = _props$placement === void 0 ? "right" : _props$placement, _props$noDrag = props.noDrag, noDrag = _props$noDrag === void 0 ? false : _props$noDrag, index = props.index, children = props.children, Children = props.Children, id = props.id, zoneName = props.zoneName, _props$isDropZone = props.isDropZone, isDropZone = _props$isDropZone === void 0 ? false : _props$isDropZone, uid = props.uid, _props$isCustomFocus = props.isCustomFocus, isCustomFocus = _props$isCustomFocus === void 0 ? false : _props$isCustomFocus, keyboardFocused = props.keyboardFocused;
+  var resolvedChildren = React.useMemo(function() {
+    return typeof children === "function" ? children(props) : children;
+  }, [children, props]);
+  useEnhancedEffect(function() {
+    attach({
+      index,
+      children: resolvedChildren,
+      node: ref.current,
+      id,
+      draggingAllowed: !noDrag,
+      zoneName,
+      isDropZone
+    });
+    return function() {
+      return detach(index);
     };
-  }, [u, I, n, r, m]), e = C(t), /* @__PURE__ */ q.createElement(h, e.cn("SDraggable", M({}, F({
-    ref: _,
-    draggable: !o,
-    placement: i,
-    role: "group",
-    "aria-describedby": "describe-draggable-".concat(S),
-    "use:keyboardFocused": k ? !1 : w
-  }, b))), /* @__PURE__ */ q.createElement(f, e.cn("Children", {})));
+  }, [index, resolvedChildren, attach, detach, id]);
+  return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDraggable, _ref5.cn("SDraggable", _objectSpread({}, assignProps({
+    "ref": ref,
+    "draggable": !noDrag,
+    "placement": placement,
+    "role": "group",
+    "aria-describedby": "describe-draggable-".concat(uid),
+    "use:keyboardFocused": isCustomFocus ? false : keyboardFocused
+  }, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})));
 };
-K.enhance = [$()];
-var re = function(c, b, e) {
-  for (var h = null, _ = 1 / 0, D = 0; D < c.length; D++) {
-    var n = c[D];
-    if (n && n !== b) {
-      var r = b.top <= n.bottom && b.bottom >= n.top, t = b.left <= n.right && b.right >= n.left;
-      if (!(!r && !t))
-        switch (e) {
-          case "ArrowRight": {
-            if (!r) continue;
-            var a = n.left - b.right;
-            if (a < 0 || a >= _) continue;
-            h = n, _ = a;
-            break;
-          }
-          case "ArrowLeft": {
-            if (!r) continue;
-            var i = b.left - n.right;
-            if (i < 0 || i >= _) continue;
-            h = n, _ = i;
-            break;
-          }
-          case "ArrowUp": {
-            if (!t) continue;
-            var g = b.top - n.bottom;
-            if (g < 0 || g >= _) continue;
-            h = n, _ = g;
-            break;
-          }
-          case "ArrowDown": {
-            if (!t) continue;
-            var o = n.top - b.bottom;
-            if (o < 0 || o >= _) continue;
-            h = n, _ = o;
-            break;
-          }
-        }
+Draggable.enhance = [keyboardFocusEnhance()];
+var findNextRectangleIndex = function findNextRectangleIndex2(rectangles, current, direction) {
+  var candidate = null;
+  var minDistance = Infinity;
+  for (var i = 0; i < rectangles.length; i++) {
+    var rect = rectangles[i];
+    if (!rect) continue;
+    if (rect === current) continue;
+    var verticallyOverlaps = current.top <= rect.bottom && current.bottom >= rect.top;
+    var horizontallyOverlaps = current.left <= rect.right && current.right >= rect.left;
+    if (!verticallyOverlaps && !horizontallyOverlaps) continue;
+    switch (direction) {
+      case "ArrowRight": {
+        if (!verticallyOverlaps) continue;
+        var distance = rect.left - current.right;
+        if (distance < 0 || distance >= minDistance) continue;
+        candidate = rect;
+        minDistance = distance;
+        break;
+      }
+      case "ArrowLeft": {
+        if (!verticallyOverlaps) continue;
+        var _distance = current.left - rect.right;
+        if (_distance < 0 || _distance >= minDistance) continue;
+        candidate = rect;
+        minDistance = _distance;
+        break;
+      }
+      case "ArrowUp": {
+        if (!horizontallyOverlaps) continue;
+        var _distance2 = current.top - rect.bottom;
+        if (_distance2 < 0 || _distance2 >= minDistance) continue;
+        candidate = rect;
+        minDistance = _distance2;
+        break;
+      }
+      case "ArrowDown": {
+        if (!horizontallyOverlaps) continue;
+        var _distance3 = rect.top - current.bottom;
+        if (_distance3 < 0 || _distance3 >= minDistance) continue;
+        candidate = rect;
+        minDistance = _distance3;
+        break;
+      }
     }
   }
-  return c.indexOf(h);
-}, T = function(c) {
-  var b = arguments[0], e, h = ae.Draggable, _ = c.styles;
-  return e = C(_), /* @__PURE__ */ q.createElement(h, e.cn("SDropZone", M({}, F({
-    noDrag: !0,
-    isDropZone: !0,
+  return rectangles.indexOf(candidate);
+};
+var DropZone = function DropZone2(props) {
+  var _ref3 = arguments[0], _ref6;
+  var SDropZone = DragAndDrop.Draggable;
+  var styles = props.styles;
+  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDropZone, _ref6.cn("SDropZone", _objectSpread({}, assignProps({
+    "noDrag": true,
+    "isDropZone": true,
     "aria-describedby": null
-  }, b))));
-}, ae = X(A, {
-  Draggable: K,
-  DropZone: T,
-  Dropable: T
+  }, _ref3))));
+};
+var DragAndDrop = createComponent(DragAndDropRoot, {
+  Draggable,
+  DropZone,
+  Dropable: DropZone
 });
 export {
-  ae as default
+  DragAndDrop as default
 };