@crystaldesign/diva-web-planner-react 26.2.0-rc.8 → 26.3.0-beta.10

package/build/esm/{index-fcb0bcd8.js → index-e5075b3b.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -27,7 +27,7 @@ var description = "description-dcuP6";
 var button = "button-0gvSY";
 var buttonText = "buttonText-HqWTX";
 var arrow = "arrow-9YFFk";
-var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 15px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n.mobile .description-dcuP6 {\n  font-size: 13px;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = ".teaserContainer--DnKQ {\n  background-color: #e6f0fa;\n  background-color: var(--diva-theme-palette-primary-light, #e6f0fa);\n  padding: 12px 16px;\n  border-radius: 8px;\n  text-align: center;\n  margin: 8px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.emoji-R0ay8 {\n  font-size: 28px;\n  margin-bottom: 2px;\n}\n\n.title-PeINh {\n  font-weight: 700;\n  font-size: 16px;\n  color: #000;\n  margin: 0;\n  line-height: 1.2;\n}\n\n.description-dcuP6 {\n  font-size: 13px;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n\n.button-0gvSY {\n  margin-top: 10px;\n  border: 2px solid #ff6b00;\n  border: 2px solid var(--primaryColor, #ff6b00);\n  color: #ff6b00;\n  color: var(--primaryColor, #ff6b00);\n  background: #fff;\n  padding: 6px 16px;\n  border-radius: 6px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  transition: all 0.2s ease;\n  width: 100%;\n  max-width: 280px;\n  box-sizing: border-box;\n  min-height: 40px;\n}\n\n.button-0gvSY:hover {\n  background-color: #ff6b00;\n  background-color: var(--primaryColor, #ff6b00);\n  color: #fff;\n}\n\n.buttonText-HqWTX {\n  flex: 1;\n  text-align: center;\n  padding: 0 24px;\n}\n\n.arrow-9YFFk {\n  position: absolute;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.arrow-9YFFk svg {\n  width: 100%;\n  height: 100%;\n}";
 styleInject(css_248z);
 
 var ContentItemTeaser = function ContentItemTeaser(_ref) {
@@ -35,9 +35,9 @@ var ContentItemTeaser = function ContentItemTeaser(_ref) {
   var viewHandler = useViewHandler();
   return /*#__PURE__*/jsxs("div", {
     className: teaserContainer,
-    children: [item.emoji && /*#__PURE__*/jsx("div", {
+    children: [/*#__PURE__*/jsx("div", {
       className: emoji,
-      children: item.emoji
+      children: "\uD83D\uDE34"
     }), /*#__PURE__*/jsx("div", {
       className: title,
       children: item.title

package/build/esm/{index-5cd14c4e.js → index-e69ffbfe.js}

@@ -1,16 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import 'react';
-import { w as wholeWrapper, n as notExpanded } from './index.module-bb84d0e6.js';
-import TabGroups from './index-b31830ec.js';
-import TabGroupOptions from './index-e587ab96.js';
+import { w as wholeWrapper, n as notExpanded } from './index.module-6b77dc2b.js';
+import TabGroups from './index-9c8f8c3b.js';
+import TabGroupOptions from './index-1bcd799b.js';
 import { observer } from 'mobx-react-lite';
-import ProduktDetails from './index-912ead04.js';
+import ProduktDetails from './index-bab193c1.js';
 import Collapsible from 'react-collapsible';
-import Price from './index-0caf03d4.js';
+import Price from './index-556e1699.js';
 import classnames from 'classnames';
-import JsonViewer from './index-de55de4e.js';
+import JsonViewer from './index-3f9d61a1.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
@@ -27,11 +27,11 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-0bac6ef7.js';
-import './index-b68acfbf.js';
-import './index.module-dd27e8d0.js';
+import './index-379137d6.js';
+import './index-39523d8c.js';
+import './index.module-a1335515.js';
 import 'react-json-view-lite';
-import './react-json-viewer-c545b366.js';
+import './react-json-viewer-f7ac226f.js';
 
 var menuPoint = "menu-point-Bz5zM";
 var collapsibleHeader = "collapsibleHeader-lzT9Y";

package/build/esm/{index-6314fe81.js → index-e75cc8cd.js}

@@ -1,23 +1,23 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { a as usePlannerUIHandler, u as useViewHandler } from './index-3922f706.js';
+import { a as usePlannerUIHandler, u as useViewHandler } from './index-545a32b9.js';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import AVL from './index-4e8560cd.js';
-import AVR from './index-6a06ef50.js';
-import Outline from './index-8640c716.js';
-import RotationClockwise from './index-17f6596e.js';
-import RotationCounterClockwise from './index-d694d616.js';
-import Trash from './index-70701401.js';
-import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-4a7ffe35.js';
+import AVL from './index-85cc659b.js';
+import AVR from './index-5e7761b0.js';
+import Outline from './index-1f1da450.js';
+import RotationClockwise from './index-08bc3f3d.js';
+import RotationCounterClockwise from './index-854ee916.js';
+import Trash from './index-890ea358.js';
+import { u as useDockingPointPositioning, I as ItemsDPAccContainer } from './index-048e04d0.js';
 import { Vector2 } from '@crystaldesign/web-planner-logic';
-import PosNr from './index-a906f2f4.js';
-import BoxCopy from './index-b95b0fa0.js';
-import Move3DGrid from './index-8c9cd224.js';
-import Rotation3DGrid from './index-fc306ee2.js';
+import PosNr from './index-3e1209b4.js';
+import BoxCopy from './index-77d1948a.js';
+import Move3DGrid from './index-a5380036.js';
+import Rotation3DGrid from './index-d2bf338b.js';
 import { getLogger } from '@crystaldesign/diva-core';
 import { DivaError } from '@crystaldesign/diva-utils';
-import ElementCopy from './index-1ad7542c.js';
-import DistanceToGround from './index-c8e7ee07.js';
+import ElementCopy from './index-bbec39f3.js';
+import DistanceToGround from './index-d041e228.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -32,7 +32,7 @@ import 'classnames';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-e008a712.js';
+import './index-d5e12fe5.js';
 import 'react-draggable';
 
 function usePosNrPositioning(_ref) {

package/build/esm/{index-4a57d624.js → index-e8a9b04c.js}

@@ -1,16 +1,16 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler } from './index-3922f706.js';
+import { u as useViewHandler } from './index-545a32b9.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { s as swiperClass, a as swiperWrapper, b as swiperSlide } from './index.module-cdbd9af2.js';
-import SettingsScroller from './index-99723a54.js';
-import SettingsHeader from './index-ab68b2f2.js';
+import { s as swiperClass, a as swiperWrapper, b as swiperSlide } from './index.module-98aa6f44.js';
+import SettingsScroller from './index-bbe0343a.js';
+import SettingsHeader from './index-76594e31.js';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { DivaUtils } from '@crystaldesign/diva-core';
-import NavForwardButton from './index-dd1151d7.js';
+import NavForwardButton from './index-ecbab135.js';
 import classnames from 'classnames';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
@@ -25,88 +25,88 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-2dc70205.js';
-import './index-400d1db8.js';
-import './index-eb2ac81a.js';
-import './index-315c2632.js';
+import './index-8ec0f023.js';
+import './index-7b1fa760.js';
+import './index-8660a6fa.js';
+import './index-36114526.js';
 import 'sift';
-import './index-ddb28baf.js';
-import './index-dc74f2b9.js';
-import './index-1269d21d.js';
-import './index-808b7fea.js';
-import './index.module-4a1f9648.js';
-import './index-09a4e5f8.js';
+import './index-dd0f64a5.js';
+import './index-787e3d13.js';
+import './index-2eb3451d.js';
+import './index-094d50a2.js';
+import './index.module-f5f04403.js';
+import './index-a36c5a23.js';
 import 'react-switch';
-import './index-5b49f5ff.js';
-import './index-12490889.js';
-import './index-7dd817c0.js';
+import './index-6d5db0a9.js';
+import './index-ef7dc862.js';
+import './index-89e866ee.js';
 import 'react-countup';
-import './index-4f64269f.js';
+import './index-173772f8.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-3d49e263.js';
+import './index-afa71e50.js';
 import 'react-dropdown';
-import './index-b553bf54.js';
-import './index-542657c4.js';
-import './index-d0387365.js';
-import './index-e26359d7.js';
+import './index-073d10a1.js';
+import './index-527ad827.js';
+import './index-948218c6.js';
+import './index-7d8c9c2c.js';
 import '@crystaldesign/content-box';
-import './index-07592828.js';
-import './index-b56ad6e1.js';
-import './index-2040fce6.js';
-import './index-28317cce.js';
-import './index-e8f24354.js';
-import './index-d9cf5ea2.js';
-import './index-090f8878.js';
-import './index-44cc790a.js';
-import './index-8345bf55.js';
+import './index-2b1e0d1a.js';
+import './index-2a743ef9.js';
+import './index-bd356d40.js';
+import './index-15a53812.js';
+import './index-cd3d2d65.js';
+import './index-9440c593.js';
+import './index-25d04e8a.js';
+import './index-a182a2b4.js';
+import './index-5bee4e0b.js';
 import 'react-laag';
-import './index.module-401da9ac.js';
-import './index-5280d1f9.js';
-import './index-e2323b2e.js';
-import './index-4a86c4ea.js';
-import './index-a1463d4a.js';
-import './index-4b54c335.js';
-import './index-85c391dc.js';
-import './index.module-2fa24b76.js';
-import './index-493aec05.js';
-import './index-9a471e4a.js';
-import './index-5470cc03.js';
-import './index-9de490bd.js';
-import './index-3ecca788.js';
-import './index-b9420b72.js';
-import './index-732df399.js';
-import './index-cc427821.js';
-import './index-c1f7fb67.js';
-import './index-bb2cc2ef.js';
-import './index-b36a443f.js';
-import './index-c73c3f99.js';
+import './index.module-77bd5380.js';
+import './index-20cf7e10.js';
+import './index-da1769b8.js';
+import './index-2a44aff1.js';
+import './index-39b15e35.js';
+import './index-4e085b6b.js';
+import './index-9377bfb4.js';
+import './index.module-c5cfe845.js';
+import './index-46cea5fa.js';
+import './index-5b91d7d1.js';
+import './index-307fa726.js';
+import './index-24df4a0c.js';
+import './index-eebc8e3e.js';
+import './index-5f761efe.js';
+import './index-73904008.js';
+import './index-32d08d94.js';
+import './index-4cbd873c.js';
+import './index-a58865ba.js';
+import './index-94569688.js';
+import './index-ce0d1800.js';
 import 'swiper/modules';
-import './index-02517336.js';
+import './index-756dde74.js';
 import 'rc-slider';
-import './index-c47055d4.js';
-import './index-042b8212.js';
-import './index-2fcac75f.js';
-import './index-d5f73e2e.js';
-import './index-5f5d1e51.js';
+import './index-3787b639.js';
+import './index-9ae75ee2.js';
+import './index-46b1a81a.js';
+import './index-f044a604.js';
+import './index-060ae141.js';
 import 'react-confetti-explosion';
-import './index-0669bcf6.js';
-import './index-76e201bb.js';
-import './index-6094b12e.js';
+import './index-cbeabc19.js';
+import './index-cedf1e97.js';
+import './index-a9e74135.js';
 import 'react-qr-code';
-import './index-fc0ed7ca.js';
-import './useCustomDimensions-0c7d22e4.js';
-import './index-14387edb.js';
-import './ussIsSticky-3abe86c0.js';
-import './index-c57eec62.js';
-import './index-c2289d9c.js';
-import './index-33202420.js';
-import './index.module-741c9efd.js';
-import './index-8a8c19dd.js';
-import './index-54cfcc07.js';
-import './index-8859be10.js';
-import './index-18385cf3.js';
-import './index-fcb0bcd8.js';
+import './index-bb3c21a4.js';
+import './useCustomDimensions-2f4020aa.js';
+import './index-eae77a5a.js';
+import './ussIsSticky-333db608.js';
+import './index-97fed7cf.js';
+import './index-eb00ac3f.js';
+import './index-cfca9284.js';
+import './index.module-35d4dfdd.js';
+import './index-944d5596.js';
+import './index-73cac779.js';
+import './index-d8958104.js';
+import './index-24a77d27.js';
+import './index-e5075b3b.js';
 
 var useSwiperHook = function useSwiperHook(viewHandler) {
   var _useState = useState(null),

package/build/esm/index-ea0ac7d2.js

@@ -0,0 +1,213 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { useHover, useLayer } from 'react-laag';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import GenericToolTip from './index-da1769b8.js';
+import { b as table, c as column, g as optionValueSelected, i as opvStatusVisible, j as opvStatusHidden } from './index.module-ace05329.js';
+import SettingsHeader from './index-76594e31.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import './index-ef7dc862.js';
+import './index-89e866ee.js';
+import 'react-countup';
+
+var wrapper = "wrapper-Rde6D";
+var thumbCell = "thumbCell-eWvHh";
+var thumb = "thumb-Y2z2t";
+var thumbPlaceholder = "thumbPlaceholder-ouplE";
+var thumbImg = "thumbImg--thGO";
+var thumbHex = "thumbHex-lyzfu";
+var optionStatusBanner = "optionStatusBanner-Wkgws";
+var optionStatusBannerVisible = "optionStatusBannerVisible-DFt2q";
+var optionStatusBannerHidden = "optionStatusBannerHidden-XCsxP";
+var optionStatusLabel = "optionStatusLabel-upzLS";
+var optionStatusVisible = "optionStatusVisible-3JPbp";
+var optionStatusHidden = "optionStatusHidden-ckHtO";
+var visibleHistory = "visibleHistory-YhehZ";
+var visibleHistoryEntry = "visibleHistoryEntry-EwERO";
+var visibleHistoryEntryHidden = "visibleHistoryEntryHidden-W1L1c";
+var visibleHistoryEntryShown = "visibleHistoryEntryShown-GiTX5";
+var css_248z = ".wrapper-Rde6D {\n  width: 100%;\n  overflow-x: auto;\n}\n\n.wrapper-Rde6D tbody tr {\n  cursor: pointer;\n}\n\n.thumbCell-eWvHh {\n  padding: 4px !important;\n}\n\n.thumbCell-eWvHh {\n  width: 36px;\n  vertical-align: middle;\n}\n\n.thumb-Y2z2t {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n}\n\n.thumbPlaceholder-ouplE {\n  width: 28px;\n  height: 28px;\n  background: #f0f0f0;\n  border-radius: 4px;\n}\n\n.thumbImg--thGO,\n.thumbHex-lyzfu {\n  width: 28px;\n  height: 28px;\n  border-radius: 4px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.thumbHex-lyzfu {\n  min-width: 28px;\n}\n\n.optionStatusBanner-Wkgws {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 14px;\n  margin-bottom: 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.optionStatusBannerVisible-DFt2q {\n  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);\n  border: 1px solid #9ae6b4;\n  color: #276749;\n}\n\n.optionStatusBannerHidden-XCsxP {\n  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);\n  border: 1px solid #feb2b2;\n  color: #c53030;\n}\n\n.optionStatusLabel-upzLS {\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: 0.9;\n}\n\n.optionStatusVisible-3JPbp {\n  color: #38a169;\n}\n\n.optionStatusHidden-ckHtO {\n  color: #e53e3e;\n}\n\n.visibleHistory-YhehZ {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n.visibleHistoryEntry-EwERO {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.visibleHistoryEntryHidden-W1L1c {\n  background: #feb2b2;\n  color: #742a2a;\n}\n\n.visibleHistoryEntryShown-GiTX5 {\n  background: #9ae6b4;\n  color: #276749;\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; }
+function ThumbWithTooltip(_ref) {
+  var _opv$hexColor, _tooltip$renderLayer, _opv$freeText;
+  var opv = _ref.opv;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var hover = useHover({
+    delayEnter: 300,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'right-center'
+  });
+  var isOver = hover[0] && !isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip;
+  var hasImage = opv.image || opv.hexColor;
+  if (!hasImage) return /*#__PURE__*/jsx("div", {
+    className: thumbPlaceholder
+  });
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    className: thumb
+  }, tooltip.triggerProps), hover[1]), {}, {
+    children: [opv.image ? /*#__PURE__*/jsx("div", {
+      className: thumbImg,
+      style: {
+        backgroundImage: "url(".concat(opv.image, ")")
+      }
+    }) : /*#__PURE__*/jsx("div", {
+      className: thumbHex,
+      style: {
+        backgroundColor: '#' + ((_opv$hexColor = opv.hexColor) !== null && _opv$hexColor !== void 0 ? _opv$hexColor : 'ccc')
+      }
+    }), isOver && ((_tooltip$renderLayer = tooltip.renderLayer) === null || _tooltip$renderLayer === void 0 ? void 0 : _tooltip$renderLayer.call(tooltip, /*#__PURE__*/jsx(GenericToolTip, {
+      text: opv.text + ((_opv$freeText = opv.freeText) !== null && _opv$freeText !== void 0 ? _opv$freeText : ''),
+      image: opv.image,
+      hexColor: opv.hexColor,
+      layerProps: tooltip.layerProps
+    }, opv.codex)))]
+  }));
+}
+function OptionStatusBanner(_ref2) {
+  var inspectInfo = _ref2.inspectInfo;
+  var visible = inspectInfo.visible,
+    hiddenByDecisionNo = inspectInfo.hiddenByDecisionNo,
+    history = inspectInfo.visibleHistory,
+    headerPosVariationType = inspectInfo.headerPosVariationType;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(optionStatusBanner, visible ? optionStatusBannerVisible : optionStatusBannerHidden),
+    children: [/*#__PURE__*/jsx("span", {
+      className: optionStatusLabel,
+      children: "Option:"
+    }), /*#__PURE__*/jsx("span", {
+      className: visible ? optionStatusVisible : optionStatusHidden,
+      children: visible ? 'Visible' : 'Hidden'
+    }), !visible && hiddenByDecisionNo != null && /*#__PURE__*/jsxs("span", {
+      children: ["(since decision ", /*#__PURE__*/jsx("strong", {
+        children: hiddenByDecisionNo
+      }), ")"]
+    }), headerPosVariationType && /*#__PURE__*/jsxs("span", {
+      children: ["(HPVT: ", /*#__PURE__*/jsx("strong", {
+        title: "Header Pos Variation Type (K=Kopf, P=EinzelPos, V=Vererbung, I=Info, U=Unsichtbar)",
+        children: headerPosVariationType
+      }), ")"]
+    }), history && history.length > 0 && /*#__PURE__*/jsxs("div", {
+      className: visibleHistory,
+      children: [/*#__PURE__*/jsx("span", {
+        className: optionStatusLabel,
+        children: "History:"
+      }), history.map(function (entry, i) {
+        return /*#__PURE__*/jsxs("span", {
+          className: classnames(visibleHistoryEntry, entry.visible ? visibleHistoryEntryShown : visibleHistoryEntryHidden),
+          title: entry.visible ? 'Became visible' : 'Became hidden',
+          children: ["#", entry.decisionNo, " \u2192 ", entry.visible ? 'shown' : 'hidden']
+        }, i);
+      })]
+    })]
+  });
+}
+var InspectModeTables = function InspectModeTables(_ref3) {
+  var _step$configStep$opti;
+  var item = _ref3.item;
+  var viewHandler = useViewHandler();
+  var configItems = item.groups.flatMap(function (g) {
+    return g.items;
+  }).filter(function (i) {
+    return !!i && 'codex' in i && 'text' in i;
+  });
+  var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(item.configStepKey);
+  var opsInspectInfo = step === null || step === void 0 || (_step$configStep$opti = step.configStep.optionstate) === null || _step$configStep$opti === void 0 ? void 0 : _step$configStep$opti.inspectInfo;
+  if (configItems.length === 0) return null;
+  var _onClick = function onClick(opv) {
+    if (opv.doShowFav) viewHandler.paletteViewHandler.clickedOnFavIcon(opv);
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(opv, undefined, item.id);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: true,
+      isSettingsHeader: false,
+      item: item
+    }), opsInspectInfo && /*#__PURE__*/jsx(OptionStatusBanner, {
+      inspectInfo: opsInspectInfo
+    }), /*#__PURE__*/jsxs("table", {
+      className: table,
+      children: [/*#__PURE__*/jsx("thead", {
+        children: /*#__PURE__*/jsxs("tr", {
+          className: column,
+          children: [/*#__PURE__*/jsx("th", {}), /*#__PURE__*/jsx("th", {
+            children: "Codex"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Name"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Status"
+          }), /*#__PURE__*/jsx("th", {
+            children: "Hidden since"
+          }), /*#__PURE__*/jsx("th", {
+            children: "NewValue since"
+          })]
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        children: configItems.map(function (opv) {
+          var info = opv.inspectModeInfo;
+          return /*#__PURE__*/jsxs("tr", {
+            className: classnames(column, opv.sel ? optionValueSelected : undefined),
+            onClick: function onClick() {
+              return _onClick(opv);
+            },
+            children: [/*#__PURE__*/jsx("td", {
+              className: thumbCell,
+              children: /*#__PURE__*/jsx(ThumbWithTooltip, {
+                opv: opv
+              })
+            }), /*#__PURE__*/jsx("td", {
+              children: opv.codex
+            }), /*#__PURE__*/jsx("td", {
+              dangerouslySetInnerHTML: {
+                __html: opv.text
+              }
+            }), /*#__PURE__*/jsx("td", {
+              children: info ? info.visible ? /*#__PURE__*/jsx("span", {
+                className: opvStatusVisible,
+                children: "visible"
+              }) : /*#__PURE__*/jsx("span", {
+                className: opvStatusHidden,
+                children: "hidden"
+              }) : '-'
+            }), /*#__PURE__*/jsx("td", {
+              children: (info === null || info === void 0 ? void 0 : info.removedByDecisionNo) != null ? info.removedByDecisionNo : '-'
+            }), /*#__PURE__*/jsx("td", {
+              children: (info === null || info === void 0 ? void 0 : info.selectedByDecisionNo) != null ? info.selectedByDecisionNo : '-'
+            })]
+          }, opv.codex);
+        })
+      })]
+    })]
+  });
+};
+var index = observer(InspectModeTables);
+
+export { index as default };

package/build/esm/{index-14387edb.js → index-eae77a5a.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import { observer } from 'mobx-react-lite';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
 import { useState, useEffect } from 'react';
 import classnames from 'classnames';
-import PriceCounter from './index-7dd817c0.js';
+import PriceCounter from './index-89e866ee.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-c2289d9c.js → index-eb00ac3f.js}

@@ -1,14 +1,14 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, Grid } from 'swiper/modules';
-import RoomItem from './index-33202420.js';
+import RoomItem from './index-cfca9284.js';
 import classnames from 'classnames';
-import InfoBanner from './index-8a8c19dd.js';
-import UploadItem from './index-54cfcc07.js';
-import CustomInput from './index-8859be10.js';
+import InfoBanner from './index-944d5596.js';
+import UploadItem from './index-73cac779.js';
+import CustomInput from './index-d8958104.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -25,8 +25,8 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index.module-741c9efd.js';
-import './index-5b49f5ff.js';
+import './index.module-35d4dfdd.js';
+import './index-6d5db0a9.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
 
 var roomGallery = "room-gallery-6uX3f";

package/build/esm/{index-dd1151d7.js → index-ecbab135.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';
 import classnames from 'classnames';

package/build/esm/{index-b39db3d6.js → index-ede1345c.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-3922f706.js';
+import './index-545a32b9.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-5e157b33.js → index-ee8b6f4c.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject } from './index-3922f706.js';
+import { s as styleInject } from './index-545a32b9.js';
 import { useTranslation } from '@crystaldesign/diva-core';
 import { useState, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/build/esm/{index-3ecca788.js → index-eebc8e3e.js}

@@ -1,17 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-401da9ac.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-77bd5380.js';
 import { useHover, useLayer } from 'react-laag';
-import GenericToolTip from './index-e2323b2e.js';
-import MetaData from './index-b9420b72.js';
+import GenericToolTip from './index-da1769b8.js';
+import MetaData from './index-5f761efe.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import InfoIcon from './index-5b49f5ff.js';
-import PricePreview from './index-12490889.js';
-import ReverseCheck from './index-4f64269f.js';
+import InfoIcon from './index-6d5db0a9.js';
+import PricePreview from './index-ef7dc862.js';
+import ReverseCheck from './index-173772f8.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -26,7 +26,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-7dd817c0.js';
+import './index-89e866ee.js';
 import 'react-countup';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';

package/build/esm/{index-12490889.js → index-ef7dc862.js}

@@ -1,10 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-3922f706.js';
+import { s as styleInject, u as useViewHandler } from './index-545a32b9.js';
 import { useState, Suspense } from 'react';
 import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
-import PriceCounter from './index-7dd817c0.js';
+import PriceCounter from './index-89e866ee.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import 'mobx-react-lite';