@crystaldesign/diva-web-planner-react 26.11.0-beta.3 → 26.11.0-beta.30

package/build/esm/{index-56d95f56.js → index-ab8dc8e0.js}

@@ -1,21 +1,21 @@
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import classnames from 'classnames';
-import DockFilter from './index-a01842a6.js';
-import RALFilter from './index-f74add7e.js';
+import DockFilter from './index-f717b58f.js';
+import RALFilter from './index-7acb06b8.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import Searchbar from './index-45ae8ca7.js';
-import ToggleHeader from './index-882e9781.js';
-import NumberInput from './index-e424ab5b.js';
-import InfoButton from './index-4daa80c5.js';
-import PDFButton from './index-a366d35e.js';
-import SummaryVariantButton from './index-f8660916.js';
-import SelectedOpv from './index-69436c25.js';
-import InfoIcon from './index-37df8f9a.js';
-import SettingsPosNr from './index-315a6526.js';
-import SettingsConfigSingle from './index-d4be771b.js';
-import { u as useStickyScroll } from './ussIsSticky-6dac519b.js';
+import Searchbar from './index-3320c27f.js';
+import ToggleHeader from './index-10eb429e.js';
+import NumberInput from './index-f89aa898.js';
+import InfoButton from './index-e1c75dfc.js';
+import PDFButton from './index-ff268b26.js';
+import SummaryVariantButton from './index-94d86bd9.js';
+import SelectedOpv from './index-6b77bd94.js';
+import InfoIcon from './index-4a8a4ca9.js';
+import SettingsPosNr from './index-75224a75.js';
+import SettingsConfigSingle from './index-9575339b.js';
+import { u as useStickyScroll } from './ussIsSticky-e203c3a2.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -35,16 +35,16 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-624149c8.js';
+import './index-03f331f1.js';
 import 'react-dropdown';
-import './index-dc3778bc.js';
-import './index-ead3c18e.js';
+import './index-2cae4848.js';
+import './index-ff1065a1.js';
 import '@crystaldesign/content-box';
-import './index-71c05fb2.js';
-import './index-181ff2a0.js';
+import './index-fe3494ee.js';
+import './index-6c60ca58.js';
 import 'react-laag';
-import './index-1d2d7fb6.js';
-import './index-a0e22978.js';
+import './index-cf02d8ed.js';
+import './index-6d2016bc.js';
 import 'swiper/react';
 
 var headerWrapper = "header-wrapper-qVEmI";

package/build/esm/{index-85269def.js → index-ac1c2f4d.js}

@@ -1,7 +1,7 @@
-import { u as useViewHandler } from './index-899b8922.js';
+import { u as useViewHandler } from './index-cb3f6a27.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
-import RoomGallery from './index-10cd9e60.js';
+import RoomGallery from './index-3f715701.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
@@ -24,13 +24,13 @@ import 'react-switch';
 import 'react-countup';
 import 'swiper/react';
 import 'swiper/modules';
-import './index-ac5a2704.js';
-import './index.module-25cdca01.js';
-import './index-37df8f9a.js';
-import './index-f45ab225.js';
+import './index-ed7bf98f.js';
+import './index.module-e90b0636.js';
+import './index-4a8a4ca9.js';
+import './index-7af6bd59.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-46e9d390.js';
-import './index-89fd7133.js';
+import './index-64c00abe.js';
+import './index-37992051.js';
 
 var AiRoomsSelection = function AiRoomsSelection(props) {
   var _viewHandler$aiState$, _organization$setting;

package/build/esm/{index-07075961.js → index-aea56c2a.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';

package/build/esm/{index-5d29eff3.js → index-b39ee00c.js}

@@ -1,11 +1,11 @@
-import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import Functions from './index-c87402ba.js';
+import Functions from './index-8331fe6e.js';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { u as useCustomDimensions } from './useCustomDimensions-f2bb4edd.js';
+import { u as useCustomDimensions } from './useCustomDimensions-9be96ee7.js';
 import { ContentItemComponent } from '@crystaldesign/content-item';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
@@ -25,7 +25,7 @@ import '@babel/runtime/helpers/typeof';
 import 'flat';
 import 'react-switch';
 import 'react-countup';
-import './index-b9ea263d.js';
+import './index-9a895999.js';
 
 var wrapper = "wrapper-y4VmL";
 var wcConfiguratorProductHeader = "wcConfiguratorProductHeader-W1oWZ";

package/build/esm/{index-da2a2a8b.js → index-b3b30d08.js}

@@ -1,13 +1,13 @@
-import { s as styleInject, u as useViewHandler, C as Checkout } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler, C as Checkout } from './index-cb3f6a27.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import ConfettiInSummary from './index-7c7b6fc7.js';
-import ArticleOverview from './index-17ba7b38.js';
-import SummaryHeader from './index-0ec473cc.js';
-import { u as useStickyScroll } from './ussIsSticky-6dac519b.js';
+import ConfettiInSummary from './index-358782f0.js';
+import ArticleOverview from './index-aaa125d1.js';
+import SummaryHeader from './index-ba7e105d.js';
+import { u as useStickyScroll } from './ussIsSticky-e203c3a2.js';
 import classnames from 'classnames';
-import AiRoomsSelection from './index-85269def.js';
-import AppointmentPreview from './index-52eb8599.js';
+import AiRoomsSelection from './index-ac1c2f4d.js';
+import AppointmentPreview from './index-3fe0571a.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -28,22 +28,22 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import 'react-confetti-explosion';
-import './index-99c94447.js';
+import './index-f8d7c164.js';
 import 'react-laag';
-import './index-048552f0.js';
+import './index-9165b357.js';
 import 'react-qr-code';
-import './index-eb30bc4d.js';
-import './useCustomDimensions-f2bb4edd.js';
-import './index-10cd9e60.js';
+import './index-b9c5ddd0.js';
+import './useCustomDimensions-9be96ee7.js';
+import './index-3f715701.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './index-ac5a2704.js';
-import './index.module-25cdca01.js';
-import './index-37df8f9a.js';
-import './index-f45ab225.js';
+import './index-ed7bf98f.js';
+import './index.module-e90b0636.js';
+import './index-4a8a4ca9.js';
+import './index-7af6bd59.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-46e9d390.js';
-import './index-89fd7133.js';
+import './index-64c00abe.js';
+import './index-37992051.js';
 
 var checkoutWrapper = "checkout-wrapper-jKxxm";
 var checkoutWrapperSticky = "checkout-wrapper-sticky-dE4al";

package/build/esm/{index-5dce3fc8.js → index-b3de81d6.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';

package/build/esm/{index-5b795c7b.js → index-b83c7ccf.js}

@@ -1,4 +1,4 @@
-import './index-899b8922.js';
+import './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-c45f18fe.js → index-b8763b90.js}

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler } from './index-899b8922.js';
+import { u as useViewHandler } from './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-bdf5827b.js → index-b9802779.js}

@@ -1,10 +1,10 @@
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import 'react';
 import classnames from 'classnames';
-import ArQrCodeIcon from './index-99c94447.js';
+import ArQrCodeIcon from './index-f8d7c164.js';
 import { useTranslation } from '@crystaldesign/diva-core';
 import { observer } from 'mobx-react-lite';
-import ProductRoomList from './index-9a249b74.js';
+import ProductRoomList from './index-272fbc41.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -24,9 +24,9 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import 'react-laag';
-import './index-048552f0.js';
+import './index-9165b357.js';
 import 'react-qr-code';
-import './index-eb30bc4d.js';
+import './index-b9c5ddd0.js';
 
 var mobileWrapper = "mobile-wrapper-CITxg";
 var tablet = "tablet-ECmH-";

package/build/esm/{index-eb30bc4d.js → index-b9c5ddd0.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-899b8922.js';
+import { s as styleInject } from './index-cb3f6a27.js';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import QRCode from 'react-qr-code';

package/build/esm/{index-0ec473cc.js → index-ba7e105d.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-cb3f6a27.js';
 import { observer } from 'mobx-react-lite';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
 import { useState, useEffect } from 'react';

package/build/esm/{index-e5e0e394.js → index-be32a2e2.js}

@@ -1,5 +1,5 @@
-import { s as styleInject } from './index-899b8922.js';
-import ProductHeader from './index-5d29eff3.js';
+import { s as styleInject } from './index-cb3f6a27.js';
+import ProductHeader from './index-b39ee00c.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
@@ -22,10 +22,10 @@ import '@babel/runtime/helpers/typeof';
 import 'flat';
 import 'react-switch';
 import 'react-countup';
-import './index-c87402ba.js';
-import './index-b9ea263d.js';
+import './index-8331fe6e.js';
+import './index-9a895999.js';
 import '@crystaldesign/content-box';
-import './useCustomDimensions-f2bb4edd.js';
+import './useCustomDimensions-9be96ee7.js';
 import '@crystaldesign/content-item';
 
 var productHeader = "productHeader-oJxLo";

package/build/esm/{index-f3bca3be.js → index-c0027e7d.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';

package/build/esm/{index-c1bf3a44.js → index-c0eee176.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-899b8922.js';
+import { s as styleInject } from './index-cb3f6a27.js';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-af4148a4.js → index-c176f45a.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import VerticalTabGroupItemStandard from './index-5665b09a.js';
+import VerticalTabGroupItemStandard from './index-83047454.js';
 import { useTranslation, DivaUtils } from '@crystaldesign/diva-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';

package/build/esm/{index-03a0fdc9.js → index-c4c5a8a3.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-899b8922.js';
+import { s as styleInject } from './index-cb3f6a27.js';
 import { useTranslation, useDivaCore, getLogger } from '@crystaldesign/diva-core';
 import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/build/esm/{index-be4baeb9.js → index-c703f557.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler } from './index-899b8922.js';
+import { u as useViewHandler } from './index-cb3f6a27.js';
 import 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import ShelfDeleteButton from './index-5ec0c2dc.js';
+import ShelfDeleteButton from './index-cbd560c7.js';
 import { observer } from 'mobx-react-lite';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';

package/build/esm/{index-16fe405b.js → index-c73d78e9.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler } from './index-cb3f6a27.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import MultiToggleSwitch from './index-e8eb5116.js';
+import MultiToggleSwitch from './index-556e0a0d.js';
 import classnames from 'classnames';
-import InfoIcon from './index-37df8f9a.js';
+import InfoIcon from './index-4a8a4ca9.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-4be1fee3.js → index-c79424f1.js}

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { c as usePlannerUIHandler } from './index-899b8922.js';
+import { c as usePlannerUIHandler } from './index-cb3f6a27.js';
 import { useState } from 'react';
-import DPACC from './index-f1c2ec32.js';
+import DPACC from './index-5119923c.js';
 import { Vector2 } from '@crystaldesign/web-planner-logic';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/build/esm/{index-8d52e836.js → index-c883c4df.js}

@@ -1,10 +1,10 @@
-import { u as useViewHandler } from './index-899b8922.js';
+import { u as useViewHandler } from './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-15c22604.js';
-import IsActive from './index-1e23c982.js';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-78232b3d.js';
+import IsActive from './index-2cf7b7c7.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-70bf7fb6.js → index-c8b29988.js}

@@ -1,12 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-cb3f6a27.js';
 import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
 import { useState, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
 import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
 import classnames from 'classnames';
-import Search from './index-bc8576ec.js';
+import Search from './index-ddda70a5.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-36c018f3.js → index-c8cae97b.js}

@@ -1,13 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-899b8922.js';
+import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import { useHover, useLayer } from 'react-laag';
-import MetaData from './index-1d2d7fb6.js';
-import InfoIcon from './index-37df8f9a.js';
+import MetaData from './index-cf02d8ed.js';
+import InfoIcon from './index-4a8a4ca9.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/asyncToGenerator';
@@ -29,11 +30,17 @@ var container = "container-08OcY";
 var sel = "sel-hd522";
 var titleContainer = "title-container-QzcUc";
 var title = "title-WUWIa";
-var css_248z = ".container-08OcY {\n  position: relative;\n  box-sizing: border-box;\n  border: 3px solid transparent;\n  border-radius: 6px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition:\n    box-shadow 0.2s ease-in-out,\n    border-color 0.2s ease-in-out;\n  background: #f2f2f2;\n  cursor: pointer;\n}\n\n.container-08OcY.sel-hd522 {\n  border-color: var(--primaryColor);\n}\n\n.container-08OcY:hover {\n  box-shadow: rgba(0, 0, 0,0.2) 0px 0px 16px 0px;\n}\n\n.container-08OcY img {\n  width: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.title-container-QzcUc {\n  color: #4b4b4b;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  height: 100%;\n}\n.title-WUWIa {\n  height: auto;\n  margin: 0 3px;\n}\n\n.title-WUWIa {\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 15px;\n}\n";
+var dragGhost = "drag-ghost-l6Ved";
+var css_248z = ".container-08OcY {\n  position: relative;\n  box-sizing: border-box;\n  border: 3px solid transparent;\n  border-radius: 6px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  transition:\n    box-shadow 0.2s ease-in-out,\n    border-color 0.2s ease-in-out;\n  background: #f2f2f2;\n  cursor: pointer;\n}\n\n.container-08OcY.sel-hd522 {\n  border-color: var(--primaryColor);\n}\n\n.container-08OcY:hover {\n  box-shadow: rgba(0, 0, 0,0.2) 0px 0px 16px 0px;\n}\n\n.container-08OcY img {\n  width: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.title-container-QzcUc {\n  color: #4b4b4b;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  height: 100%;\n}\n.title-WUWIa {\n  height: auto;\n  margin: 0 3px;\n}\n\n.title-WUWIa {\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 15px;\n}\n\n.drag-ghost-l6Ved {\n  position: fixed;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  z-index: 9999;\n  opacity: 0.8;\n}\n";
 styleInject(css_248z);
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Suppresses the native drag ghost; the portal ghost below replaces it.
+var EMPTY_DRAG_IMAGE = typeof Image !== 'undefined' ? new Image(1, 1) : undefined;
+if (EMPTY_DRAG_IMAGE) {
+  EMPTY_DRAG_IMAGE.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+}
 var ShelfAccessoires = function ShelfAccessoires(_ref) {
   var _renderLayer, _item$longDescription;
   var item = _ref.item;
@@ -50,6 +57,39 @@ var ShelfAccessoires = function ShelfAccessoires(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     metaDataVisible = _useState2[0],
     setMetaDataVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var ghostRef = useRef(null);
+  var lastDragPos = useRef({
+    x: 0,
+    y: 0
+  });
+  var dragGeom = useRef({
+    grabX: 0,
+    grabY: 0,
+    width: 0
+  });
+  var positionGhost = function positionGhost(el) {
+    if (!el) return;
+    var g = dragGeom.current;
+    el.style.transform = "translate(".concat(lastDragPos.current.x - g.grabX, "px, ").concat(lastDragPos.current.y - g.grabY, "px)");
+  };
+  useEffect(function () {
+    if (!isDragging) return;
+    var onDragOver = function onDragOver(e) {
+      lastDragPos.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      positionGhost(ghostRef.current);
+    };
+    document.addEventListener('dragover', onDragOver);
+    return function () {
+      return document.removeEventListener('dragover', onDragOver);
+    };
+  }, [isDragging]);
 
   /* tool tip stuff*/
   var triggerProps = {};
@@ -61,13 +101,14 @@ var ShelfAccessoires = function ShelfAccessoires(_ref) {
     delayEnter: 1500,
     hideOnScroll: true
   });
+  var tooltipOpen = hover[0] && !isDragging;
   var tooltip = useLayer({
-    isOpen: hover[0],
+    isOpen: tooltipOpen,
     auto: true,
     placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
   });
   if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
-    isOver = hover[0];
+    isOver = tooltipOpen;
     hoverProps = hover[1];
     triggerProps = tooltip.triggerProps;
     layerProps = tooltip.layerProps;
@@ -78,14 +119,40 @@ var ShelfAccessoires = function ShelfAccessoires(_ref) {
     id: item.articleCodex,
     className: classnames(container, sel$1 ? sel : undefined),
     onClick: function onClick() {
+      return viewHandler.paletteViewHandler.selectShelfAccessorie(item.articleCodex, undefined, false);
+    },
+    onDoubleClick: function onDoubleClick() {
       return viewHandler.paletteViewHandler.selectShelfAccessorie(item.articleCodex);
+    },
+    draggable: true,
+    onDragStart: function onDragStart(e) {
+      e.dataTransfer.effectAllowed = 'copy';
+      e.dataTransfer.setData('text/plain', item.articleCodex);
+      if (EMPTY_DRAG_IMAGE) e.dataTransfer.setDragImage(EMPTY_DRAG_IMAGE, 0, 0);
+      var rect = e.currentTarget.getBoundingClientRect();
+      dragGeom.current = {
+        grabX: e.clientX - rect.left,
+        grabY: e.clientY - rect.top,
+        width: rect.width
+      };
+      lastDragPos.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      setIsDragging(true);
+      viewHandler.paletteViewHandler.startShelfAccessorieDrag(item.articleCodex);
+    },
+    onDragEnd: function onDragEnd() {
+      setIsDragging(false);
+      viewHandler.paletteViewHandler.endShelfAccessorieDrag();
     }
   }, triggerProps), hoverProps), {}, {
     children: [/*#__PURE__*/jsx("img", {
       style: {
         maxHeight: viewHandler.settingsState.settingsWidth / 3
       },
-      src: item.image
+      src: item.image,
+      draggable: false
     }), /*#__PURE__*/jsxs("div", {
       className: titleContainer,
       children: [/*#__PURE__*/jsx("div", {
@@ -114,7 +181,30 @@ var ShelfAccessoires = function ShelfAccessoires(_ref) {
       image: item.image,
       codex: item.articleCodex,
       layerProps: layerProps
-    }, item.articleCodex)))]
+    }, item.articleCodex))), isDragging && !viewHandler.settingsState.draggedAccessoryHasTarget && /*#__PURE__*/createPortal(/*#__PURE__*/jsxs("div", {
+      className: classnames(container, dragGhost),
+      style: {
+        width: dragGeom.current.width
+      },
+      ref: function ref(el) {
+        ghostRef.current = el;
+        positionGhost(el);
+      },
+      children: [/*#__PURE__*/jsx("img", {
+        style: {
+          maxHeight: viewHandler.settingsState.settingsWidth / 3
+        },
+        src: item.image
+      }), /*#__PURE__*/jsx("div", {
+        className: titleContainer,
+        children: /*#__PURE__*/jsx("div", {
+          className: title,
+          dangerouslySetInnerHTML: {
+            __html: header
+          }
+        })
+      })]
+    }), document.body)]
   }));
 };
 var ShelfAccessoires$1 = observer(ShelfAccessoires);

package/build/esm/{index-0029288b.js → index-c9846514.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-899b8922.js';
+import './index-cb3f6a27.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-0db57583.js → index-caa3b342.js}

@@ -1,4 +1,4 @@
-import './index-899b8922.js';
+import './index-cb3f6a27.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';