@eightshift/ui-components 6.0.10 → 6.0.12

package/dist/components/draggable/draggable.js

@@ -3,7 +3,6 @@ import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, cre
 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,7 +525,7 @@ 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 }));
       }
     });
   };
@@ -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;
@@ -2228,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
       }));
     }
@@ -3755,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;
@@ -3799,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;
@@ -3826,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);
@@ -4626,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`
@@ -5609,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
@@ -5631,7 +5630,7 @@ var Draggable$1 = class Draggable2 extends (_c = Draggable$2, _handle_dec = [rea
       "feedback"
     ]);
     super(
-      __spreadValues$4({
+      __spreadValues$3({
         effects: () => [
           ...effects2(),
           () => {
@@ -5693,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(),
@@ -5753,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;
@@ -5796,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;
@@ -5822,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));
@@ -5989,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) {
@@ -6067,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 {
@@ -6140,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);
@@ -6285,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;
@@ -6644,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;
@@ -6972,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,
@@ -7009,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),
@@ -7135,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.
@@ -7166,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
     });
   }
@@ -7182,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) {
@@ -7207,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
     });
@@ -7282,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;
@@ -7309,88 +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 removeIds = (arr) => arr.map(({ id, ...item }) => item);
 const SortableItem = ({ id, index, disabled, children, axis }) => {
   const [element, setElement] = useState(null);
   const handleRef = useRef(null);
@@ -7452,7 +7350,7 @@ const SortableItem = ({ id, index, disabled, children, axis }) => {
 const Draggable3 = (props) => {
   const {
     children,
-    items: rawItems,
+    items,
     onChange,
     noReorder,
     axis = "both",
@@ -7461,19 +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.map((item) => ({ ...item, id: item?.id || randomId(6) })));
-  useEffect(() => {
-    if (JSON.stringify(rawItems) === JSON.stringify(removeIds(items))) {
-      return;
-    }
-    setItems(rawItems.map((item) => ({ ...item, id: randomId(6) })));
-  }, [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",
     {
@@ -7486,16 +7383,18 @@ const Draggable3 = (props) => {
             if (event?.canceled) {
               return;
             }
-            setItems((items2) => {
-              const newItems = move(items2, event);
-              onChange(removeIds(newItems));
-              return newItems;
-            });
+            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(({ id, ...item }, index) => /* @__PURE__ */ jsx(
+          children: items.map((item, index) => /* @__PURE__ */ jsx(
             SortableItem,
             {
-              id,
+              id: `item-${internalIds?.[index] ?? index}`,
               index,
               item,
               disabled: noReorder,
@@ -7508,21 +7407,19 @@ const Draggable3 = (props) => {
                     ...updated[index],
                     ...newValue
                   };
-                  setItems(updated);
-                  onChange(removeIds(updated));
+                  onChange(updated);
                 },
                 itemIndex: index,
                 deleteItem: () => {
-                  setItems([...items].filter((_2, i2) => i2 !== index));
-                  onChange(removeIds([...items].filter((_2, i2) => i2 !== index)));
+                  onChange([...items].filter((_2, i2) => i2 !== index));
+                  setInternalIds([...internalIds].filter((_2, i2) => i2 !== index));
                   if (onAfterItemRemove) {
-                    const { id: id2, ...restItem } = item;
-                    onAfterItemRemove(restItem);
+                    onAfterItemRemove(item);
                   }
                 }
               }) })
             },
-            id
+            `item-${internalIds?.[index] ?? index}`
           ))
         }
       )

package/dist/components/menu/menu.js

@@ -100,6 +100,7 @@ const Menu = (props) => {
     additionalProps.trigger = "longPress";
   }
   const hasSubmenuItems = Array.isArray(children) ? children.some((child) => child?.type?.displayName === "SubMenuItem") : children?.type?.displayName === "SubMenuItem";
+  let { className: popoverClassName, wrapperClassName: popoverWrapperClassName, ...otherPopoverProps } = popoverProps || {};
   return /* @__PURE__ */ jsxs(
     $3674c52c6b3c5bce$export$27d2ad3c5815583e,
     {
@@ -122,11 +123,11 @@ const Menu = (props) => {
             "aria-label": ariaLabel,
             popoverProps: {
               maxHeight: Math.max(240, window.innerHeight * 0.42),
-              ...popoverProps
+              ...otherPopoverProps
             },
-            ...popoverProps,
-            className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
-            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverProps?.wrapperClassName),
+            ...otherPopoverProps,
+            className: clsx("es:p-1.5 es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverClassName),
+            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverWrapperClassName),
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
               {

package/dist/components/responsive/responsive-legacy.js

@@ -214,7 +214,7 @@ const ResponsiveLegacy = (props) => {
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
                 breakpoint: defaultBreakpoint,
                 currentValue: value?.[attribute[defaultBreakpoint]],
                 options,

package/dist/components/responsive/responsive.js

@@ -346,7 +346,7 @@ const Responsive = (props) => {
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2 es:w-full", children: children({
                 breakpoint: "_default",
                 currentValue: value?.["_default"],
                 handleChange: (newValue) => onChange({

package/dist/components/slider/slider.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DPWyf-gp.js";
 import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CZV3HhHY.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -87,6 +88,7 @@ const Slider = (props) => {
     hidden,
     ...other
   } = props;
+  const [hoveredThumbs, setHoveredThumbs] = useState([]);
   if (hidden) {
     return null;
   }
@@ -247,6 +249,8 @@ const Slider = (props) => {
                         $6f909507e6374d18$export$2c1b491743890dec,
                         {
                           index: i,
+                          onHoverStart: () => setHoveredThumbs((prev) => [...prev, i]),
+                          onHoverEnd: () => setHoveredThumbs((prev) => prev.filter((val) => val !== i)),
                           "aria-label": thumbLabels?.[i],
                           className: clsx(
                             !vertical && ["es:h-10 es:w-0.75", "es:row-1"],
@@ -271,7 +275,7 @@ const Slider = (props) => {
                           },
                           children: [
                             thumbContent && thumbContent(i),
-                            /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx(AnimatePresence, { children: (state.focusedThumb === i || hoveredThumbs.includes(i)) && /* @__PURE__ */ jsx(
                               motion.div,
                               {
                                 className: clsx(

package/dist/icons/icons.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { GenericColorSwatch } from "./generic-color-swatch.js";
 const icons = {
   width: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
@@ -3407,7 +3407,37 @@ const icons = {
     /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 14.5h15", fill: "none" }),
     /* @__PURE__ */ jsx("path", { d: "M12.5 3h-5a.5.5 0 0 1-.3-.9L9.7.225a.5.5 0 0 1 .6 0L12.8 2.1a.5.5 0 0 1-.3.9Zm0 14h-5a.5.5 0 0 0-.3.9l2.5 1.875a.5.5 0 0 0 .6 0l2.5-1.875a.5.5 0 0 0-.3-.9Z", fill: "currentColor" })
   ] }),
-  loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) })
+  loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) }),
+  verticalAlignAround: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "12.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  verticalAlignEvenly: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "11.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  verticalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "0.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "14.75", y: "3", width: "4.5", height: "14", rx: "1.5", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1h18M1 19h18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  horizontalAlignAround: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 2.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 12.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  horizontalAlignEvenly: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 3.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 11.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  horizontalAlignBetween: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 .75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { width: "4.5", height: "14", rx: "1.5", transform: "matrix(0 1 1 0 3 14.75)", fill: "currentColor", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 1v18M19 1v18", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] })
 };
 const blockIcons = {
   // Eightshift blocks.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.0.10",
+	"version": "6.0.12",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",