@crystaldesign/diva-web-planner-react 26.3.0-beta.45 → 26.3.0-beta.47

package/build/esm/index-2bde4105.js

@@ -0,0 +1,238 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-6f5a925c.js';
+import Product from './index-088d3c1c.js';
+import Settings from './index-92ab2c15.js';
+import TabGroup from './index-0e3f307c.js';
+import NavigationButtons from './index-8b1364b6.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import BasketAction from './index-f5f17520.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-1fc9830e.js';
+import ProgressBar from './index-f3ca1e10.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 '@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 'react-switch';
+import 'react-countup';
+import './index-4941cf24.js';
+import './index-2de7c8a1.js';
+import './index-72a997f5.js';
+import './index-a974091f.js';
+import './index-967b3d49.js';
+import 'sift';
+import './index-63c2feb3.js';
+import './index-ac6d3069.js';
+import './index-f55f19ad.js';
+import './index-805f7b92.js';
+import './index.module-94546f1e.js';
+import './index-1ab4da24.js';
+import './index-99e2493e.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-3fdf0b16.js';
+import 'react-dropdown';
+import './index-4b4c2ec4.js';
+import './index-142e1d7f.js';
+import './index-5a97cd26.js';
+import './index-f231bf02.js';
+import '@crystaldesign/content-box';
+import './index-2d58dbfd.js';
+import './index-d362300e.js';
+import './index-b769f30b.js';
+import './index-25ef0f48.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-3e464da5.js';
+import './index-c2588a60.js';
+import './index-7351a5cb.js';
+import './index-432eb9e2.js';
+import './index-c50e6878.js';
+import './index-41ecd5d0.js';
+import './index-a96e74f2.js';
+import 'react-laag';
+import './index.module-9bb6f869.js';
+import './index-0a30ab08.js';
+import './index-55aaebf4.js';
+import './index-3c662f4d.js';
+import './index-02ed878f.js';
+import './index-ed5d9fe7.js';
+import './index.module-3dcfe445.js';
+import './index-f7e9ec09.js';
+import './index-2b9d752a.js';
+import './index-ad48ec5a.js';
+import './index-5dc885de.js';
+import './index-63be2002.js';
+import './index-73109d21.js';
+import './index-7d969ff1.js';
+import './index-097014b9.js';
+import './index-0692f5bb.js';
+import './index-0ccd98fa.js';
+import './index-0c727a6a.js';
+import './index-95e7abd3.js';
+import './index-f271a367.js';
+import 'rc-slider';
+import './index-ae897d4f.js';
+import './index-8407edca.js';
+import './index-8f96c581.js';
+import './index-63299575.js';
+import './index-b73d1758.js';
+import 'react-confetti-explosion';
+import './index-ed48acae.js';
+import './index-097c5352.js';
+import './index-87bbcc18.js';
+import 'react-qr-code';
+import './index-a10fb8b0.js';
+import './useCustomDimensions-0a75fd35.js';
+import './index-b426aeb9.js';
+import './ussIsSticky-d04d9077.js';
+import './index-2feffe41.js';
+import './index-69ac1dd6.js';
+import './index-91706965.js';
+import './index.module-db94087a.js';
+import './index-9c2c0896.js';
+import './index-fb4d56f0.js';
+import './index-f97f8a09.js';
+import './index-37e18874.js';
+import './index-59feb61c.js';
+import './index-2ca10590.js';
+import './index.module-5f838b7e.js';
+import './index-9ba7f82a.js';
+import './index-ff15e677.js';
+import './index-53661fa9.js';
+import './index-faabda0a.js';
+import '@mui/material';
+import './index-d7c39c02.js';
+import './index-f6cb0b62.js';
+import './index-44765cb1.js';
+import './index-808bdb7c.js';
+import './index-d715f450.js';
+import './index.module-f6b76960.js';
+
+var wcConfigurator = "wcConfigurator-YOuy8";
+var landscape = "landscape-EyFBs";
+var portrait = "portrait-XiOPl";
+var wcConfiguratorProduct = "wcConfigurator-product-Ovdqk";
+var minExpanded = "min-expanded-aFvtw";
+var wcConfiguratorSettingsWrapper = "wc-configurator-settings-wrapper-ymkif";
+var expanded = "expanded-LXnio";
+var maxExpanded = "max-expanded-Q2hOy";
+var wcConfiguratorSettings = "wcConfigurator-settings-OLzdK";
+var wcConfiguratorSteps = "wcConfigurator-steps-1--dZ";
+var closeButtonVisible = "close-button-visible-y3GY8";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-xqcr5";
+var wcConfiguratorAction = "wcConfigurator-action-ycd5b";
+var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-mgMRu";
+var tablet = "tablet-W9NOW";
+var css_248z = ".wcConfigurator-YOuy8 {\n  position: relative;\n\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n  overscroll-behavior-y: contain;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-YOuy8 *,\n.wcConfigurator-YOuy8 *::before,\n.wcConfigurator-YOuy8 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-YOuy8.landscape-EyFBs {\n  height: 100%;\n  width: 100%;\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl {\n  height: 100%;\n  width: 100%;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-Ovdqk {\n  position: absolute;\n  width: 63%;\n  max-width: calc(100% - 564px);\n  left: 0px;\n  top: 0;\n  height: 100%;\n}\n.min-expanded-aFvtw .wcConfigurator-product-Ovdqk {\n  width: calc(100% - 128px - 16px);\n  max-width: none;\n  max-width: initial;\n}\n\n.wc-configurator-settings-wrapper-ymkif {\n  position: absolute;\n  z-index: 600;\n  height: calc(100% - 32px);\n  width: calc(37% - 16px);\n  min-width: 550px;\n  right: 0;\n  padding: 16px 16px 16px 0;\n  background-color: var(--settingsBackgroundColor);\n  transition: width 0.45s;\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\n}\n\n.expanded-LXnio .wc-configurator-settings-wrapper-ymkif {\n  width: 70%;\n}\n\n.min-expanded-aFvtw .wc-configurator-settings-wrapper-ymkif {\n  width: calc(128px);\n  min-width: 0;\n  min-width: initial;\n}\n.max-expanded-Q2hOy .wc-configurator-settings-wrapper-ymkif {\n  width: calc(100% - 16px);\n  z-index: 801;\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-OLzdK {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n\n  overflow-y: hidden;\n  overflow-x: hidden;\n  overflow: visible;\n  z-index: 100;\n  right: calc(128px + 4px + 16px);\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-1--dZ {\n  position: absolute;\n  z-index: 300;\n  right: 16px;\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n  width: 128px;\n}\n.close-button-visible-y3GY8 .wcConfigurator-steps-1--dZ {\n  top: 80px;\n  height: calc(100% - 32px - 4px - 50px - 64px);\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-xqcr5 {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n  height: 50px;\n  right: calc(128px + 4px + 16px);\n  bottom: 16px;\n  z-index: 200;\n}\n\n.min-expanded-aFvtw .wcConfigurator-settings-actions-xqcr5 {\n  overflow: hidden;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-ycd5b {\n  position: absolute;\n  width: 128px;\n  height: 50px;\n  right: 16px;\n  bottom: 16px;\n  z-index: 200;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-LXnio .wcConfigurator-settings-OLzdK,\n.max-expanded-Q2hOy .wcConfigurator-settings-OLzdK,\n.expanded-LXnio .wcConfigurator-settings-actions-xqcr5,\n.max-expanded-Q2hOy .wcConfigurator-settings-actions-xqcr5 {\n  width: calc(100% - 128px - 16px - 4px);\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl,\n.landscape-EyFBs.wcConfigurator-YOuy8 {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-EyFBs .wcConfigurator-product-Ovdqk {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-EyFBs .wcConfigurator-settings-OLzdK {\n  display: none;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\n} */\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-EyFBs .wcConfigurator-steps-1--dZ {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-EyFBs .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-EyFBs .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-XiOPl .wcConfigurator-product-Ovdqk {\n  top: 0px;\n  left: 0px;\n  height: var(--configuratorProductHeight);\n  transition: height 0.2s ease-out;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\n  left: 0px;\n  top: auto;\n  top: initial;\n  transition: height 0.2s ease-out;\n  bottom: 0px;\n  width: 100%;\n  z-index: 1000;\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\n  position: relative;\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  transition: none 0s ease 0s;\n  transition: initial;\n  flex-grow: 10;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-XiOPl .wcConfigurator-action-ycd5b,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-mgMRu {\n  position: relative;\n  transition: bottom 0.2s ease-out;\n  width: 50px;\n  height: var(--configuratorTabGroupHeight);\n  background: no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 600;\n}\n\n.landscape-EyFBs,\n.portrait-XiOPl {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-W9NOW {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\n}\n\n.wcConfigurator-YOuy8 ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
+styleInject(css_248z);
+
+var Standard = function Standard(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        id: "wcConfigurator-wrapper",
+        ref: function ref(wrapperRef) {
+          return viewHandler.uiState.setWrapperRef(wrapperRef);
+        },
+        style: {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          bottom: 0,
+          left: 0
+        },
+        children: [/*#__PURE__*/jsx(Product, {
+          className: wcConfiguratorProduct
+        }), viewHandler.uiState.isInMobileView ? /*#__PURE__*/jsx(Settings, {
+          tabgroupElement: /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(TabGroup, {
+              className: wcConfiguratorSteps,
+              showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+            }), /*#__PURE__*/jsx(BasketMobile, {
+              className: mobileActionAfterTabgroups
+            }), /*#__PURE__*/jsx(ProgressBar, {})]
+          })
+        }) : /*#__PURE__*/jsxs("div", {
+          className: wcConfiguratorSettingsWrapper,
+          children: [/*#__PURE__*/jsx(TabGroup, {
+            className: wcConfiguratorSteps
+          }), /*#__PURE__*/jsx(Settings, {
+            className: wcConfiguratorSettings
+          }), /*#__PURE__*/jsx(NavigationButtons, {
+            className: wcConfiguratorSettingsActions,
+            showCheckoutButtons: true
+          }), /*#__PURE__*/jsx(BasketAction, {
+            containerClassName: wcConfiguratorAction,
+            showCheckoutButtons: false
+          })]
+        })]
+      })
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#d60084',
+  '--secondaryColor': '#4b4b4b',
+  '--thirdColor': '#e5e5e5e5',
+  '--articlePosNrRadius': '50%',
+  '--articlePosNrSize': '1.5rem',
+  '--galleryItemRadius': '50%',
+  '--galleryItemRowCount': '5',
+  '--galleryItemMargin': '0.5%',
+  '--galleryItemRowCountSmall': '6',
+  '--galleryItemMarginSmall': '0.3%',
+  '--galleryItemBorder': '0px',
+  '--galleryItemBorderColor': '#e8e9ed',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--fontWeight1': '300',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--tabGroupBackground': 'unset',
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.9)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '12px',
+  '--settingsScrollerPaddingLeft': '12px',
+  '--configuratorActionHeight': '50px',
+  '--configuratorActionForthWidth': 'calc(100% - 56px)',
+  '--configuratorActionBackWidth': '50px',
+  '--globalBorderRadius': '3px',
+  '--mobile-tabgroup-drawer-border-radius': '12px',
+  '--buttons-border-radius': '8px'
+};
+var index = observer(Standard);
+
+export { index as default };

package/build/esm/index-2c623294.js

@@ -0,0 +1,45 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-1ad1eb2b.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import VerticalTabGroupItemStandard from './index-fe34cf02.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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 };

package/build/esm/index-2c9e2fe5.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-1ad1eb2b.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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 NavBar = function NavBar(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/Planner3DImage/NavBar"
+  }));
+};
+
+export { NavBar as default };

package/build/esm/index-2ca10590.js

@@ -0,0 +1,77 @@
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var teaserContainer = "teaserContainer--DnKQ";
+var emoji = "emoji-R0ay8";
+var title = "title-PeINh";
+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";
+styleInject(css_248z);
+
+var ContentItemTeaser = function ContentItemTeaser(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    className: teaserContainer,
+    children: [item.emoji && /*#__PURE__*/jsx("div", {
+      className: emoji,
+      children: item.emoji
+    }), /*#__PURE__*/jsx("div", {
+      className: title,
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      className: description,
+      children: item.description
+    }), /*#__PURE__*/jsxs("button", {
+      className: button,
+      onClick: function onClick() {
+        return viewHandler.settingsState.onClickContentItemId(item.id);
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        className: buttonText,
+        children: item.buttonText
+      }), /*#__PURE__*/jsx("div", {
+        className: arrow,
+        children: /*#__PURE__*/jsx("svg", {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M5 12H19M19 12L13 6M19 12L13 18",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          })
+        })
+      })]
+    })]
+  });
+};
+var ContentItemTeaser$1 = observer(ContentItemTeaser);
+
+export { ContentItemTeaser$1 as default };

package/build/esm/index-2d58dbfd.js

@@ -0,0 +1,48 @@
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'react-switch';
+import 'react-countup';
+
+var imageItem = "image-item-NA3C7";
+var sel = "sel-gUlno";
+var css_248z = ".image-item-NA3C7 {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f0f0f0 var(--galleryItemBorder);\n  margin: 10px 0;\n}\n\n.sel-gUlno {\n  margin: 8px 0;\n\n  border: solid var(--secondaryColor) 4px;\n}\n";
+styleInject(css_248z);
+
+var FilterItem = function FilterItem(_ref) {
+  var _viewHandler$settings;
+  var item = _ref.item,
+    id = _ref.id;
+  var viewHandler = useViewHandler();
+  var actValue = (_viewHandler$settings = viewHandler.settingsState.itemPalettes.get(id)) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.filterValue;
+  return /*#__PURE__*/jsx("span", {
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.onSelectFilter(id, item.text, 'RAL');
+    },
+    style: {
+      backgroundColor: item.rgb
+    },
+    className: classnames(imageItem, actValue === item.text ? sel : undefined)
+  });
+};
+var FilterItem$1 = observer(FilterItem);
+
+export { FilterItem$1 as default };

package/build/esm/index-2de7c8a1.js

@@ -0,0 +1,165 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-1ad1eb2b.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import SettingsHeaderContainer from './index-4941cf24.js';
+import classnames from 'classnames';
+import TotalPrice from './index-72a997f5.js';
+import SettingsItemsWrapper from './index-a974091f.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'react-switch';
+import 'react-countup';
+import './index-967b3d49.js';
+import 'sift';
+import './index-63c2feb3.js';
+import './index-ac6d3069.js';
+import './index-f55f19ad.js';
+import './index-805f7b92.js';
+import './index.module-94546f1e.js';
+import './index-1ab4da24.js';
+import './index-99e2493e.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-3fdf0b16.js';
+import 'react-dropdown';
+import './index-4b4c2ec4.js';
+import './index-142e1d7f.js';
+import './index-5a97cd26.js';
+import './index-f231bf02.js';
+import '@crystaldesign/content-box';
+import './index-2d58dbfd.js';
+import './index-d362300e.js';
+import './index-b769f30b.js';
+import './index-25ef0f48.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-3e464da5.js';
+import './index-c2588a60.js';
+import './index-7351a5cb.js';
+import './index-432eb9e2.js';
+import './index-c50e6878.js';
+import './index-41ecd5d0.js';
+import './index-a96e74f2.js';
+import 'react-laag';
+import './index.module-9bb6f869.js';
+import './index-0a30ab08.js';
+import './index-55aaebf4.js';
+import './index-3c662f4d.js';
+import './index-02ed878f.js';
+import './index-ed5d9fe7.js';
+import './index.module-3dcfe445.js';
+import './index-f7e9ec09.js';
+import './index-2b9d752a.js';
+import './index-ad48ec5a.js';
+import './index-5dc885de.js';
+import './index-63be2002.js';
+import './index-73109d21.js';
+import './index-7d969ff1.js';
+import './index-097014b9.js';
+import './index-0692f5bb.js';
+import './index-0ccd98fa.js';
+import './index-0c727a6a.js';
+import './index-95e7abd3.js';
+import './index-f271a367.js';
+import 'rc-slider';
+import './index-ae897d4f.js';
+import './index-8407edca.js';
+import './index-8f96c581.js';
+import './index-63299575.js';
+import './index-b73d1758.js';
+import 'react-confetti-explosion';
+import './index-ed48acae.js';
+import './index-097c5352.js';
+import './index-87bbcc18.js';
+import 'react-qr-code';
+import './index-a10fb8b0.js';
+import './useCustomDimensions-0a75fd35.js';
+import './index-b426aeb9.js';
+import './ussIsSticky-d04d9077.js';
+import './index-2feffe41.js';
+import './index-69ac1dd6.js';
+import './index-91706965.js';
+import './index.module-db94087a.js';
+import './index-9c2c0896.js';
+import './index-fb4d56f0.js';
+import './index-f97f8a09.js';
+import './index-37e18874.js';
+import './index-59feb61c.js';
+import './index-2ca10590.js';
+
+var wcConfiguratorSettingsScroller = "wcConfigurator-settings-scroller-TbzP8";
+var expanded = "expanded-r-uGX";
+var minExpanded = "minExpanded-oyaLK";
+var scrollerFlex = "scrollerFlex-XVfOS";
+var scrollerContentFill = "scrollerContentFill-p1UEK";
+var css_248z = ".wcConfigurator-settings-scroller-TbzP8 {\n  overflow-y: auto;\n  z-index: 100;\n  padding-right: var(--settingsScrollerPaddingRight);\n  margin-left: var(--settingsScrollerPaddingLeft);\n  padding-top: var(--settingsScrollerPaddingTopBottom);\n  padding-bottom: var(--settingsScrollerPaddingTopBottom);\n  scrollbar-gutter: stable;\n  transition: height 0.2s ease-in-out;\n}\n\n.expanded-r-uGX.wcConfigurator-settings-scroller-TbzP8 {\n  z-index: 600;\n}\n\n.minExpanded-oyaLK {\n  visibility: hidden;\n}\n\n/* When in wysiwyg inspect mode: scroller becomes flex so content can fill height */\n.scrollerFlex-XVfOS {\n  display: flex;\n  flex-direction: column;\n}\n\n.scrollerFlex-XVfOS .scrollerContentFill-p1UEK {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n";
+styleInject(css_248z);
+
+var SettingsScroller = function SettingsScroller(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var settingsScrollerElement = useRef(null);
+  var itemPalettesArr = [];
+  useEffect(function () {
+    if (settingsScrollerElement.current) {
+      viewHandler.settingsState.setScrollerElement(settingsScrollerElement.current);
+      return viewHandler.uiState.setUpSettingsScrollEvent(settingsScrollerElement.current);
+    }
+    return function () {};
+  }, [settingsScrollerElement]);
+  var style = {};
+  var snapPoint = viewHandler.uiState.snapPoints[viewHandler.settingsState.activeSnapPointIndex];
+  var mobileHeight;
+  if (isNaN(Number(snapPoint))) {
+    mobileHeight = snapPoint;
+  } else {
+    mobileHeight = snapPoint - 38 + 'px';
+  }
+  if (viewHandler.uiState.isInMobileView) {
+    style.height = mobileHeight;
+  } else {
+    var _viewHandler$settings, _viewHandler$settings2;
+    style.height = 'calc(100% - ' + ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsHeaderElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().height) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0) + 'px)';
+  }
+  for (var i = 0; i < viewHandler.settingsState.itemPaletteArr.length; i++) {
+    var itemPalette = viewHandler.settingsState.itemPaletteArr[i][1];
+    if (!itemPalette.isRenderedNotInSettingPalette && itemPalette.visible) itemPalettesArr.push(itemPalette);
+  }
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsMinExpanded) viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MIN_CONFIG_SETTINGS');else viewHandler.divaWebPlanner.updatePlannerView('ON_CLICK_EXPAND_MAX_CONFIG_SETTINGS');
+  }, [viewHandler.uiState.configSettingsIsExpanded, viewHandler.uiState.configSettingsIsMinExpanded]);
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorSettingsScroller, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerFlex),
+    id: "wcConfigurator-settings-scroller",
+    ref: settingsScrollerElement,
+    children: [(viewHandler.uiState.isInMobileView || viewHandler.settingsState.forceSettingsHeaderInScrollContainer) && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__PURE__*/jsx(SettingsHeaderContainer, {
+      isScroller: true
+    }, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsxs("div", {
+      className: classnames(viewHandler.wysiwygDebugState.wysiwygInspectView && scrollerContentFill),
+      children: [/*#__PURE__*/jsx(SettingsItemsWrapper, {
+        itemPalettesArr: itemPalettesArr
+      }), viewHandler.divaWebPlanner.doAllowSetPlanner() && viewHandler.getState() == 'SUMMARY' && /*#__PURE__*/jsx(TotalPrice, {})]
+    })]
+  });
+};
+var SettingsScroller$1 = observer(SettingsScroller);
+
+export { SettingsScroller$1 as default };