@crystaldesign/diva-web-planner-react 24.14.0-beta.1 → 24.14.0-beta.10

package/build/esm/index-7aafbf0e.js

@@ -0,0 +1,45 @@
+import { u as useViewHandler } from './index-f37069da.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Image3DNavBar from './index-ec67b68e.js';
+import { g as wcConfigurator3Dimage, i as imageCenterOrbit, h as imageCenterStatic } from './index.module-29a609ca.js';
+import Logo from './index-7f1f0ccd.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+
+var Planner3DImage = function Planner3DImage(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setImage3DElement(_ref);
+    },
+    className: wcConfigurator3Dimage,
+    id: "3DImage-Container",
+    style: {
+      // backgroundImage: viewHandler.productState.RenderImageURL,
+      visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
+    },
+    children: [/*#__PURE__*/jsx(Image3DNavBar, {}), /*#__PURE__*/jsx("img", {
+      className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
+      id: "diva3dImg",
+      draggable: "false",
+      src: viewHandler.productState.diva3dImgSrc
+    }), /*#__PURE__*/jsx(Logo, {})]
+  });
+};
+var Planner3DImage$1 = observer(Planner3DImage);
+
+export { Planner3DImage$1 as default };

package/build/esm/index-7ad8a57a.js

@@ -0,0 +1,129 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f37069da.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-9fc11720.js';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-62da2053.js';
+import MetaData from './index-b66a4bd4.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import InfoIcon from './index-05e5de5b.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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';
+
+var paletteItem = "PaletteItem-C-fa2";
+var wcVCodexText = "wcVCodexText-GN3-8";
+var sel = "sel-3ZIRz";
+var imageWrapper = "imageWrapper-QwsRE";
+var small = "small-Ynrzj";
+var wcImage = "wcImage-eveCj";
+var title = "title-mFBM6";
+var big = "big-wADuy";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-C-fa2 {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-C-fa2:active,\n.PaletteItem-C-fa2:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-GN3-8 {\n  position: absolute;\n  line-height: 104px;\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.PaletteItem-C-fa2:hover .wcVCodexText-GN3-8,\n.sel-3ZIRz .wcVCodexText-GN3-8 {\n  display: block;\n}\n\n.imageWrapper-QwsRE {\n  border-radius: 50%;\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE:hover,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-eveCj {\n  width: calc(100% - 7px);\n  aspect-ratio: 1;\n  border: 4px white solid;\n  border-radius: 50%;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.sel-3ZIRz .wcImage-eveCj,\n.small-Ynrzj.sel-3ZIRz .wcImage-eveCj {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-NBrjx {\n  width: 80px;\n  height: 80px;\n}\n\n.title-mFBM6 {\n  margin-top: 4px;\n  text-align: center;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  width: 100%;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  z-index: 400;\n}\n\n.PaletteItem-C-fa2:hover .title-mFBM6,\n.small-Ynrzj .PaletteItem-C-fa2:hover .title-mFBM6 {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  z-index: 200;\n}\n\n/* Size Small */\n\n.small-Ynrzj .wcVCodexText-GN3-8 {\n  line-height: 58px;\n  font-size: 12px;\n}\n\n.small-Ynrzj .title-mFBM6 {\n  font-size: 12px;\n  margin-top: 6px;\n  -webkit-line-clamp: 1;\n}\n/* Size very Small */\n\n.very-small-XTQPS .wcVCodexText-GN3-8 {\n  line-height: 48px;\n  font-size: 10px;\n}\n\n.very-small-XTQPS .title-mFBM6 {\n  font-size: 10px;\n  margin-top: 5px;\n  -webkit-line-clamp: 1;\n}\n\n/* Size big */\n\n.big-wADuy .wcVCodexText-GN3-8 {\n  line-height: 158px;\n  font-size: 15px;\n}\n\n.big-wADuy .title-mFBM6 {\n  font-size: 15px;\n  margin-top: 10px;\n  -webkit-line-clamp: 2;\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; }
+var Option = function Option(_ref) {
+  var _item$hexColor, _renderLayer;
+  var itemP = _ref.item,
+    type = _ref.type,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor)) {
+    isOver = hover[0] && !viewHandler.settingsState.isContentItemIdVisible(item.contentItemId);
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    id: item.codex,
+    className: classnames(type == 'small' ? small : undefined, type == 'big' ? big : undefined, paletteItem, item.sel ? sel : undefined),
+    onClick: onClick
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(imageWrapper),
+      children: [item.vCodex && /*#__PURE__*/jsx("div", {
+        className: classnames(wcVCodexText),
+        children: item.vCodex
+      }), item.image ? /*#__PURE__*/jsx("img", {
+        className: classnames(wcImage),
+        src: item.image
+      }) : /*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundColor: '#' + ((_item$hexColor = item.hexColor) !== null && _item$hexColor !== void 0 ? _item$hexColor : 'dfdfdf')
+        }
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: title,
+      dangerouslySetInnerHTML: {
+        __html: item.text
+      }
+    }), item.doShowFav && /*#__PURE__*/jsx("div", {
+      className: item.isFav ? wcFavoriteSel : wcFavorite,
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+      }
+    }), /*#__PURE__*/jsx(MetaData, {
+      style: {
+        position: 'relative',
+        "float": 'left',
+        display: 'none'
+      },
+      metaData: item.metaData,
+      visible: [metaDataVisible, setMetaDataVisible]
+    }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.text + (item.freeText ? item.freeText : ''),
+      hexColor: item.hexColor,
+      desciption: metaDataVisible,
+      image: item.image,
+      layerProps: layerProps
+    }, item.codex)))]
+  }));
+};
+var GalleryText = observer(Option);
+
+export { GalleryText as default };

package/build/esm/index-7bbbd5ca.js

@@ -0,0 +1,129 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-f37069da.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-9fc11720.js';
+import { useHover, useLayer } from 'react-laag';
+import GenericToolTip from './index-62da2053.js';
+import MetaData from './index-b66a4bd4.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import InfoIcon from './index-05e5de5b.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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';
+
+var paletteItem = "PaletteItem-pvphX";
+var wcVCodexText = "wcVCodexText-2VGmK";
+var sel = "sel-e2r3E";
+var imageWrapper = "imageWrapper-eKZwi";
+var small = "small-b58yQ";
+var wcImage = "wcImage-y7r8f";
+var title = "title-MeHlK";
+var big = "big-2aHax";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-pvphX {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  height: 136px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-pvphX:active,\n.PaletteItem-pvphX:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-2VGmK {\n  position: absolute;\n  line-height: 104px;\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.PaletteItem-pvphX:hover .wcVCodexText-2VGmK,\n.sel-e2r3E .wcVCodexText-2VGmK {\n  display: block;\n}\n\n.imageWrapper-eKZwi {\n  border-radius: 50%;\n  border: 1px rgb(230, 230, 230) solid;\n  width: 104px;\n  height: 104px;\n  transition: 0.15s ease;\n  position: relative;\n}\n.imageWrapper-eKZwi:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-e2r3E .imageWrapper-eKZwi:hover,\n.small-b58yQ.sel-e2r3E .imageWrapper-eKZwi:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-e2r3E .imageWrapper-eKZwi,\n.small-b58yQ.sel-e2r3E .imageWrapper-eKZwi {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-y7r8f {\n  width: 96px;\n  height: 96px;\n  border: 4px white solid;\n  border-radius: 50%;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.sel-e2r3E .wcImage-y7r8f,\n.small-b58yQ.sel-e2r3E .wcImage-y7r8f {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-qat17 {\n  width: 80px;\n  height: 80px;\n}\n\n.title-MeHlK {\n  margin-top: 4px;\n  text-align: center;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  width: 100%;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  z-index: 400;\n}\n\n.PaletteItem-pvphX:hover .title-MeHlK,\n.small-b58yQ .PaletteItem-pvphX:hover .title-MeHlK {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  z-index: 200;\n}\n\n/* Size Small */\n\n.small-b58yQ.PaletteItem-pvphX {\n  width: 60px;\n  height: 80px;\n}\n\n.small-b58yQ .wcVCodexText-2VGmK {\n  line-height: 58px;\n  font-size: 12px;\n}\n\n.small-b58yQ .imageWrapper-eKZwi {\n  width: 58px;\n  height: 58px;\n}\n\n.small-b58yQ .wcImage-y7r8f {\n  width: 50px;\n  height: 50px;\n}\n\n.small-b58yQ .title-MeHlK {\n  font-size: 12px;\n  margin-top: 6px;\n  -webkit-line-clamp: 1;\n}\n/* Size very Small */\n\n.very-small-sUUki.PaletteItem-pvphX {\n  width: 50px;\n  height: 65px;\n}\n\n.very-small-sUUki .wcVCodexText-2VGmK {\n  line-height: 48px;\n  font-size: 10px;\n}\n\n.very-small-sUUki .imageWrapper-eKZwi {\n  width: 48px;\n  height: 48px;\n}\n\n.very-small-sUUki .wcImage-y7r8f {\n  width: 40px;\n  height: 40px;\n}\n\n.very-small-sUUki .title-MeHlK {\n  font-size: 10px;\n  margin-top: 5px;\n  -webkit-line-clamp: 1;\n}\n\n/* Size big */\n\n.big-2aHax.PaletteItem-pvphX {\n  width: 170px;\n  height: 200px;\n}\n\n.big-2aHax .wcVCodexText-2VGmK {\n  line-height: 158px;\n  font-size: 15px;\n}\n\n.big-2aHax .imageWrapper-eKZwi {\n  width: 158px;\n  height: 158px;\n}\n\n.big-2aHax .wcImage-y7r8f {\n  width: 150px;\n  height: 150px;\n}\n\n.big-2aHax .title-MeHlK {\n  font-size: 15px;\n  margin-top: 10px;\n  -webkit-line-clamp: 2;\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; }
+var Option = function Option(_ref) {
+  var _item$hexColor, _renderLayer;
+  var itemP = _ref.item,
+    type = _ref.type,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 600,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor)) {
+    isOver = hover[0] && !viewHandler.settingsState.isContentItemIdVisible(item.contentItemId);
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    id: item.codex,
+    className: classnames(type == 'small' ? small : undefined, type == 'big' ? big : undefined, paletteItem, item.sel ? sel : undefined),
+    onClick: onClick
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(imageWrapper),
+      children: [item.vCodex && /*#__PURE__*/jsx("div", {
+        className: classnames(wcVCodexText),
+        children: item.vCodex
+      }), item.image ? /*#__PURE__*/jsx("img", {
+        className: classnames(wcImage),
+        src: item.image
+      }) : /*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundColor: '#' + ((_item$hexColor = item.hexColor) !== null && _item$hexColor !== void 0 ? _item$hexColor : 'dfdfdf')
+        }
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: title,
+      dangerouslySetInnerHTML: {
+        __html: item.text
+      }
+    }), item.doShowFav && /*#__PURE__*/jsx("div", {
+      className: item.isFav ? wcFavoriteSel : wcFavorite,
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+      }
+    }), /*#__PURE__*/jsx(MetaData, {
+      style: {
+        position: 'relative',
+        "float": 'left',
+        display: 'none'
+      },
+      metaData: item.metaData,
+      visible: [metaDataVisible, setMetaDataVisible]
+    }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.text + (item.freeText ? item.freeText : ''),
+      hexColor: item.hexColor,
+      desciption: metaDataVisible,
+      image: item.image,
+      layerProps: layerProps
+    }, item.codex)))]
+  }));
+};
+var Default = observer(Option);
+
+export { Default as default };

package/build/esm/index-7c2b4cd1.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-f37069da.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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; }
+var ProductHeaderFunction = function ProductHeaderFunction(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductHeader/Functions"
+  }));
+};
+
+export { ProductHeaderFunction as default };

package/build/esm/index-7d5c27f6.js

@@ -0,0 +1,92 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-f37069da.js';
+import { useState } from 'react';
+import classnames from 'classnames';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import Draggable from 'react-draggable';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'mobx-react-lite';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Rotation3DGrid = function Rotation3DGrid(_ref) {
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var mouseDownDetected = false;
+  var onStartDragging = function onStartDragging(e) {
+    mouseDownDetected = true;
+    if (e.type == 'mousedown') {
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    } else if (e.type == 'touchstart') {
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    }
+  };
+  var onDragging = function onDragging(e) {
+    if (mouseDownDetected && !isDragging) {
+      var _item$onDragStartFunc;
+      setIsDragging(true);
+      (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+    } else if (isDragging) {
+      var _viewHandler$productS, _viewHandler$productS2;
+      var boundingLeft = (_viewHandler$productS = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS !== void 0 && _viewHandler$productS.getBoundingClientRect().left ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().left : 0;
+      var boundingTop = (_viewHandler$productS2 = viewHandler.productState.planner3DGridElement) !== null && _viewHandler$productS2 !== void 0 && _viewHandler$productS2.getBoundingClientRect().top ? viewHandler.productState.planner3DGridElement.getBoundingClientRect().top : 0;
+      if (e.type == 'mousemove') {
+        var _item$onDragMoveFunct;
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - boundingLeft, e.clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      } else if (e.type == 'touchmove') {
+        var _item$onDragMoveFunct2;
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - boundingLeft, e.touches[0].clientY - boundingTop));
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+    }
+    mouseDownDetected = false;
+  };
+  var onDragEnd = function onDragEnd(e) {
+    if (isDragging) {
+      var _item$onDragEndFuncti;
+      setIsDragging(false);
+      (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+    }
+    mouseDownDetected = false;
+  };
+  return /*#__PURE__*/jsx(Draggable, {
+    handle: ".handle3DRotation",
+    onStart: function onStart(e) {
+      onStartDragging(e);
+    },
+    onDrag: function onDrag(e) {
+      onDragging(e);
+    },
+    onStop: function onStop(e) {
+      onDragEnd();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      style: {
+        visibility: isDragging ? 'hidden' : 'visible',
+        left: item.position.x + 'px',
+        top: item.position.y + 'px'
+      },
+      className: classnames('handle3DRotation', plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.rotation.rot3DGrid)
+    })
+  });
+};
+
+export { Rotation3DGrid as default };

package/build/esm/index-7e815842.js

@@ -0,0 +1,36 @@
+import { s as styleInject } from './index-f37069da.js';
+import ProductHeader from './index-06b47c3d.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import 'classnames';
+import './index-7c2b4cd1.js';
+import '@crystaldesign/content-box';
+import './index-a64e88a7.js';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var productHeader = "productHeader-oJxLo";
+var css_248z = ".productHeader-oJxLo {\n  font-weight: 300 !important;\n}\n";
+styleInject(css_248z);
+
+var ProductHeaderBlue = function ProductHeaderBlue(props) {
+  return /*#__PURE__*/jsx(ProductHeader, {
+    productClass: productHeader
+  });
+};
+
+export { ProductHeaderBlue as default };

package/build/esm/index-7f05803b.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-f37069da.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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; }
+var ItemVariant = function ItemVariant(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "TabGroup/TabGroupVertical/ItemVariants"
+  }));
+};
+
+export { ItemVariant as default };

package/build/esm/index-7f1f0ccd.js

@@ -0,0 +1,40 @@
+import { s as styleInject, u as useViewHandler } from './index-f37069da.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var logo = "logo-h99KB";
+var mobile = "mobile-W86xf";
+var hidden = "hidden-uMA1f";
+var notHidden = "not-hidden-88ft-";
+var landscape = "landscape-gPEyU";
+var css_248z = ".logo-h99KB {\n  right: 0px;\n  bottom: 0px;\n  position: absolute;\n  z-index: 600;\n  opacity: 1;\n  max-width: 30%;\n  max-height: 64px;\n  margin-bottom: 16px;\n  margin-right: 20px;\n}\n\n.mobile-W86xf {\n  right: auto;\n  right: initial;\n  left: 0px;\n  margin-bottom: 10px;\n  margin-right: 0;\n  margin-right: initial;\n  margin-left: 20px;\n  max-height: 50px;\n}\n\n.hidden-uMA1f {\n  opacity: 0;\n}\n\n.not-hidden-88ft- {\n  transition: opacity 0.5s;\n}\n\n.landscape-gPEyU.logo-h99KB {\n  opacity: 0;\n}\n";
+styleInject(css_248z);
+
+var Logo = function Logo(props) {
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    logoUrl = _useDivaCore.state.organization.logoUrl;
+  if (!viewHandler.uiState.isInMobileView && !viewHandler.uiState.ViewConfig.showLogoInProductDesktop || !viewHandler.uiState.ViewConfig.showLogoInProduct || !logoUrl) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("img", {
+    className: classnames(logo, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.productState.orbitHidden ? notHidden : hidden, viewHandler.uiState.isMobileLandscape ? landscape : undefined),
+    src: logoUrl
+  });
+};
+var Logo$1 = observer(Logo);
+
+export { Logo$1 as default };

package/build/esm/index-804d6f38.js

@@ -0,0 +1,41 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-f37069da.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import VerticalTabGroupItemStandard from './index-172c4728.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import './IconHandler-7463e6e4.js';
+
+var verticalItemPoligon = "verticalItemPoligon-uLIgs";
+var wcActiveStep = "wcActiveStep-Cjjc7";
+var wcVisitedStep = "wcVisitedStep-Syo-H";
+var wcStepIcon = "wcStepIcon-oKNsW";
+var css_248z = ".verticalItemPoligon-uLIgs {\n  fill: #f5f5f5;\n  stroke: #f5f5f5;\n}\n.verticalItemPoligon-uLIgs:hover {\n  stroke: #cca663;\n  stroke-width: 2px;\n}\n.verticalItemPoligon-uLIgs.wcActiveStep-Cjjc7 {\n  stroke: #cca663;\n  color: #cca663;\n}\n.verticalItemPoligon-uLIgs.wcVisitedStep-Syo-H {\n  color: #a1a1a1;\n}\n\n.verticalItemPoligon-uLIgs.wcActiveStep-Cjjc7:hover {\n  stroke: #d6b781;\n}\n\n.verticalItemPoligon-uLIgs:hover,\n.verticalItemPoligon-uLIgs.wcVisitedStep-Syo-H:hover {\n  color: #e1e1e1;\n}\n\n.wcStepIcon-oKNsW {\n  display: block;\n  background-color: black;\n  background-position: center center;\n  width: 42px;\n  height: 42px;\n  margin: auto;\n  -webkit-mask-size: contain;\n  -webkit-mask-repeat: no-repeat;\n}\n\n.wcActiveStep-Cjjc7 .wcStepIcon-oKNsW {\n  background-color: #cca663;\n}\n.wcVisitedStep-Syo-H .wcStepIcon-oKNsW {\n  background-color: #a1a1a1;\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; }
+var VerticalTabGroupItemFree = function VerticalTabGroupItemFree(props) {
+  return /*#__PURE__*/jsx(VerticalTabGroupItemStandard, _objectSpread(_objectSpread({}, props), {}, {
+    wcVisitedStepClass: wcVisitedStep,
+    wcActiveStepClass: wcActiveStep,
+    verticalItemPoligonClass: verticalItemPoligon,
+    wcStepIconClass: wcStepIcon
+  }));
+};
+var index = observer(VerticalTabGroupItemFree);
+
+export { index as default };