@crystaldesign/diva-web-planner-react 24.12.0 → 24.12.1

package/build/esm/index-0ed992e6.js

@@ -0,0 +1,46 @@
+import { s as styleInject } from './index-945074f1.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import Item from './index-0953e946.js';
+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 'react-laag';
+import './index-2b309493.js';
+import 'classnames';
+import './index-e4dd8413.js';
+
+var wrapper = "wrapper-Da1y8";
+var css_248z = ".wrapper-Da1y8 {\r\n  display: flex;\r\n  margin-left: 16px;\r\n  margin-right: 16px;\r\n  gap: 6px 10px;\r\n  overflow: auto;\r\n  width: 100%;\r\n  flex-wrap: wrap;\r\n}\r\n";
+styleInject(css_248z);
+
+var SelectedOpv = function SelectedOpv(_ref) {
+  var item = _ref.item,
+    selectedElements = _ref.selectedElements;
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    style: {
+      marginTop: selectedElements.length ? 16 : undefined
+    },
+    children: selectedElements.map(function (selectedElement, i) {
+      return /*#__PURE__*/jsx(Item, {
+        selectedElement: selectedElement,
+        paletteId: item.id
+      }, selectedElement.codex);
+    })
+  });
+};
+var SelectedOpv$1 = observer(SelectedOpv);
+
+export { SelectedOpv$1 as default };

package/build/esm/index-0f8e2602.js

@@ -0,0 +1,61 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-945074f1.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { useState, useRef, useEffect } from 'react';
+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/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 'mobx-react-lite';
+
+var wrapper = "wrapper-MPQ1D";
+var searchText = "search-text-h7Q58";
+var icon = "icon-yltss";
+var css_248z = ".wrapper-MPQ1D {\r\n  display: flex;\r\n  height: 100%;\r\n  align-items: center;\r\n}\r\n\r\n.search-text-h7Q58 {\r\n  width: 130px;\r\n  height: 30px;\r\n  line-height: 28px;\r\n  border-radius: 5px;\r\n  -webkit-tap-highlight-color: transparent;\r\n  outline: 0;\r\n  background-color: #fff;\r\n  padding: 0 1.6rem;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  position: relative;\r\n  border: 0;\r\n}\r\n\r\n.icon-yltss {\r\n  width: 36px;\r\n  height: 36px;\r\n  background: center / contain no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2259%22 height%3D%2259%22 viewBox%3D%220 0 59 59%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M39.9163 41.38C40.3208 41.7844 40.9765 41.7844 41.3809 41.38C41.7854 40.9755 41.7854 40.3198 41.3809 39.9153L39.9163 41.38ZM36.851 27.5286C36.851 32.6767 32.6776 36.85 27.5296 36.85V38.9215C33.8216 38.9215 38.9224 33.8206 38.9224 27.5286H36.851ZM27.5296 36.85C22.3815 36.85 18.2081 32.6767 18.2081 27.5286H16.1367C16.1367 33.8206 21.2375 38.9215 27.5296 38.9215V36.85ZM18.2081 27.5286C18.2081 22.3805 22.3815 18.2072 27.5296 18.2072V16.1357C21.2375 16.1357 16.1367 21.2365 16.1367 27.5286H18.2081ZM27.5296 18.2072C32.6776 18.2072 36.851 22.3805 36.851 27.5286H38.9224C38.9224 21.2365 33.8216 16.1357 27.5296 16.1357V18.2072ZM41.3809 39.9153L35.5982 34.1325L34.1334 35.5972L39.9163 41.38L41.3809 39.9153Z%22 fill%3D%22%234F4F4F%22%2F%3E%0D%3C%2Fsvg%3E%0D\");\r\n  margin-left: 12px;\r\n  margin-right: 12px;\r\n}\r\n";
+styleInject(css_248z);
+
+var Search = function Search(_ref) {
+  var _ref$searchState = _slicedToArray(_ref.searchState, 2),
+    search = _ref$searchState[0],
+    setSearch = _ref$searchState[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (value && value.length > 2) setSearch(value);else if ((search === null || search === void 0 ? void 0 : search.length) !== 0) {
+      setSearch(undefined);
+    }
+  }, [value]);
+  useEffect(function () {
+    if (!(search !== null && search !== void 0 && search.length)) setValue('');
+  }, [search]);
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("input", {
+      ref: inputRef,
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      type: 'text',
+      value: value,
+      className: searchText,
+      placeholder: t('filter.global')
+    }), /*#__PURE__*/jsx("div", {
+      className: icon
+    })]
+  });
+};
+
+export { Search as default };

package/build/esm/index-0fa13ae7.js

@@ -0,0 +1,202 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import classnames from 'classnames';
+import { useEffect } from 'react';
+import Inputbox from './index-f21bc2b5.js';
+import Product from './index-e1f54066.js';
+import Settings from './index-19008c8c.js';
+import TabGroup from './index-418359c4.js';
+import NavigationButtons from './index-ff5b9257.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import BasketActionStandard from './index-791f4ff0.js';
+import { observer } from 'mobx-react-lite';
+import BasketMobile from './index-c6f7e5e1.js';
+import ProgressBar from './index-5b024c5e.js';
+import BarrierActions from './index-d9443dd0.js';
+import { jsxs, Fragment, 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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import './index-8d1d697a.js';
+import './index-ca0e4969.js';
+import './index-053d32e4.js';
+import './index-0b2690bb.js';
+import './index-327cd278.js';
+import 'react-laag';
+import './index-68f24f4a.js';
+import './index-87812dfe.js';
+import './index-a8f4c6d0.js';
+import 'sift';
+import './index-c84e2c9d.js';
+import './index-2ce21b8e.js';
+import './index-a638b452.js';
+import './index-339fe263.js';
+import './index.module-0c3a1f94.js';
+import './index-caa33034.js';
+import 'react-switch';
+import './index-55f945c0.js';
+import './index-a8d969d8.js';
+import 'react-dropdown';
+import './index-7dbf560b.js';
+import './index-abcc0f82.js';
+import './index-b34188dc.js';
+import './index-63cce023.js';
+import '@crystaldesign/content-box';
+import './index-2f1a0e04.js';
+import './index-972a9fb1.js';
+import './index-b5b683b5.js';
+import './index-4f5189b5.js';
+import './index-8161d3d2.js';
+import '@crystaldesign/products-component';
+import './index-0f8e2602.js';
+import './index-f5a4b8a0.js';
+import './index-bd162ad8.js';
+import './index-e4dd8413.js';
+import './index-2b309493.js';
+import './index-ef85426a.js';
+import './index-6891af5f.js';
+import './index-48a8a155.js';
+import './index-1a28e9b5.js';
+import './index-1bb9122f.js';
+import './index-473e0393.js';
+import './index-a76c6752.js';
+import './index-89cc3b90.js';
+import './index.module-d4c0130b.js';
+import './index-783af724.js';
+import './index-eefd4032.js';
+import './index-770767c2.js';
+import './index-7cab0762.js';
+import './index-b5e6499c.js';
+import './index-7531df3b.js';
+import './index-f214f28a.js';
+import './index.module-cb0c03a2.js';
+import './index-fde74907.js';
+import './index-9b97271d.js';
+import './index-0668dc6a.js';
+import './index-fc98f1f4.js';
+import './index-91f2928f.js';
+import './index-c6729434.js';
+import './index-786d8f5e.js';
+import './index-f903b11e.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 foldedup = "foldedup-Qqnox";
+var settingsHidden = "settings-hidden-NnHMW";
+var burgerVisible = "burger-visible-AFcf0";
+var isOnLastStep = "isOnLastStep-eAWSY";
+var progressBar = "progressBar-Izqk1";
+var actionOnTop = "action-on-top-UqyK5";
+var css_248z = ".wcConfigurator-YOuy8 {\r\n  position: relative;\r\n\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  font-family: var(--diva-typography-font-family);\r\n  font-weight: 100;\r\n  -webkit-touch-callout: none; /* iOS Safari */\r\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\r\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\r\n  user-select: none; /* Non-prefixed version, currently*/\r\n}\r\n\r\n.wcConfigurator-YOuy8 *,\r\n.wcConfigurator-YOuy8 *::before,\r\n.wcConfigurator-YOuy8 *::after {\r\n  box-sizing: content-box;\r\n  box-sizing: initial;\r\n}\r\n\r\n.wcConfigurator-YOuy8.landscape-EyFBs {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.wcConfigurator-YOuy8.portrait-XiOPl {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n/******************************************Product*******************************************/\r\n\r\n.wcConfigurator-product-Ovdqk {\r\n  position: absolute;\r\n  width: 63%;\r\n  max-width: calc(100% - 564px);\r\n  left: 0px;\r\n  top: 0;\r\n  height: 100%;\r\n}\r\n.min-expanded-aFvtw .wcConfigurator-product-Ovdqk {\r\n  width: calc(100% - 128px - 16px);\r\n  max-width: none;\r\n  max-width: initial;\r\n}\r\n\r\n.wc-configurator-settings-wrapper-ymkif {\r\n  position: absolute;\r\n  z-index: 600;\r\n  height: calc(100% - 32px);\r\n  width: calc(37% - 16px);\r\n  min-width: 550px;\r\n  right: 0;\r\n  padding: 16px 16px 16px 0;\r\n  background-color: var(--settingsBackgroundColor);\r\n  transition: width 0.45s;\r\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.expanded-LXnio .wc-configurator-settings-wrapper-ymkif {\r\n  width: 70%;\r\n}\r\n\r\n.min-expanded-aFvtw .wc-configurator-settings-wrapper-ymkif {\r\n  width: calc(128px);\r\n  min-width: 0;\r\n  min-width: initial;\r\n}\r\n.max-expanded-Q2hOy .wc-configurator-settings-wrapper-ymkif {\r\n  width: calc(100% - 16px);\r\n  z-index: 801;\r\n}\r\n\r\n/**************************************ConfigPalette***************************************/\r\n.wcConfigurator-settings-OLzdK {\r\n  position: absolute;\r\n  width: calc(100% - 128px - 4px - 16px);\r\n\r\n  transition: height 0.45s, top 0.45s;\r\n  overflow-y: hidden;\r\n  overflow-x: hidden;\r\n  overflow: visible;\r\n  z-index: 100;\r\n  right: calc(128px + 4px + 16px);\r\n  top: 16px;\r\n  height: calc(100% - 32px - 4px - 50px);\r\n}\r\n\r\n/**************************************TabGroup********************************************/\r\n\r\n.wcConfigurator-steps-1--dZ {\r\n  position: absolute;\r\n  z-index: 300;\r\n  right: 16px;\r\n  top: 16px;\r\n  height: calc(100% - 32px - 4px - 50px);\r\n  width: 128px;\r\n}\r\n.close-button-visible-y3GY8 .wcConfigurator-steps-1--dZ {\r\n  top: 80px;\r\n  height: calc(100% - 32px - 4px - 50px - 64px);\r\n}\r\n\r\n/************************************Navigaton Buttons*************************************/\r\n\r\n.wcConfigurator-settings-actions-xqcr5 {\r\n  position: absolute;\r\n  width: calc(100% - 128px - 4px - 16px);\r\n  height: 50px;\r\n  right: calc(128px + 4px + 16px);\r\n  bottom: 16px;\r\n  z-index: 200;\r\n}\r\n\r\n.min-expanded-aFvtw .wcConfigurator-settings-actions-xqcr5 {\r\n  overflow: hidden;\r\n}\r\n\r\n/*************************************Basket Button****************************************/\r\n.wcConfigurator-action-ycd5b {\r\n  position: absolute;\r\n  width: 128px;\r\n  height: 50px;\r\n  right: 16px;\r\n  bottom: 16px;\r\n  z-index: 200;\r\n}\r\n\r\n/****************************************Settings- Expanded *******************************/\r\n.expanded-LXnio .wcConfigurator-settings-OLzdK,\r\n.max-expanded-Q2hOy .wcConfigurator-settings-OLzdK,\r\n.expanded-LXnio .wcConfigurator-settings-actions-xqcr5,\r\n.max-expanded-Q2hOy .wcConfigurator-settings-actions-xqcr5 {\r\n  width: calc(100% - 128px - 16px - 4px);\r\n}\r\n\r\n.wcConfigurator-YOuy8.portrait-XiOPl,\r\n.landscape-EyFBs.wcConfigurator-YOuy8 {\r\n  padding: 0;\r\n  padding: initial;\r\n  overflow: hidden;\r\n}\r\n/*********************************************************************Mobile Landscape***********************************************************************/\r\n\r\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\r\n.landscape-EyFBs .wcConfigurator-product-Ovdqk {\r\n  width: 100%;\r\n  height: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  max-width: none;\r\n  max-width: initial;\r\n}\r\n\r\n/*************************ConfigPalette -- Mobile Landscape ***************************/\r\n\r\n.landscape-EyFBs .wcConfigurator-settings-OLzdK {\r\n  display: none;\r\n}\r\n\r\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\r\n/* .landscape.settings-hidden .wcConfigurator-settings {\r\n  top: 100%;\r\n} */\r\n\r\n/*****************************TabGroup -- Mobile Landscape ****************************/\r\n\r\n.landscape-EyFBs .wcConfigurator-steps-1--dZ {\r\n  display: none;\r\n}\r\n\r\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\r\n.landscape-EyFBs .wcConfigurator-settings-actions-xqcr5 {\r\n  display: none;\r\n}\r\n\r\n/*********************Basket Button-- Mobile Landscape*********************************/\r\n.landscape-EyFBs .wcConfigurator-action-ycd5b {\r\n  display: none;\r\n}\r\n\r\n/*********************************************************************Mobile Portrait************************************************************************/\r\n\r\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\r\n.portrait-XiOPl .wcConfigurator-product-Ovdqk {\r\n  top: 50px;\r\n  left: 0;\r\n  height: 40%;\r\n  width: 100%;\r\n  max-width: none;\r\n  max-width: initial;\r\n}\r\n\r\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-product-Ovdqk {\r\n  z-index: 1;\r\n}\r\n\r\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-product-Ovdqk {\r\n  height: calc(100% - 50px);\r\n}\r\n\r\n/*************************ConfigPalette -- Mobile Portrait ****************************/\r\n\r\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\r\n  left: 0px;\r\n  top: calc(40% + 50px);\r\n  height: calc(60% - 50px - var(--configuratorActionHeight) - 6px);\r\n  width: 100%;\r\n}\r\n\r\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-settings-OLzdK {\r\n  top: 100%;\r\n}\r\n\r\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-settings-OLzdK {\r\n  top: 2.5rem;\r\n  height: calc(100% - 50px);\r\n}\r\n\r\n/*****************************TabGroup -- Mobile Portrait *****************************/\r\n\r\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\r\n  position: absolute;\r\n  left: 0px;\r\n  top: 0;\r\n  width: calc(100% - 50px);\r\n  height: 50px;\r\n}\r\n\r\n.portrait-XiOPl .wcConfigurator-steps-1--dZ.burger-visible-AFcf0 {\r\n  left: 50px;\r\n  width: calc(100% - 50px - 50px);\r\n}\r\n\r\n.portrait-XiOPl.foldedup-Qqnox .wcConfigurator-steps-1--dZ {\r\n  top: 0px;\r\n}\r\n\r\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\r\n\r\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\r\n  bottom: 0px;\r\n  width: calc(100% - 10px);\r\n\r\n  height: calc(var(--configuratorActionHeight) - 5px);\r\n  margin: 0 5px 5px 5px;\r\n  padding-top: 0px;\r\n  right: 0px;\r\n}\r\n.portrait-XiOPl.isOnLastStep-eAWSY .wcConfigurator-settings-actions-xqcr5,\r\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-settings-actions-xqcr5 {\r\n  display: none !important;\r\n}\r\n\r\n/*********************Basket Button-- Mobile Portrait *********************************/\r\n\r\n.portrait-XiOPl .wcConfigurator-action-ycd5b,\r\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-action-ycd5b {\r\n  display: none;\r\n}\r\n\r\n.portrait-XiOPl.isOnLastStep-eAWSY .wcConfigurator-action-ycd5b {\r\n  right: 0px;\r\n  bottom: 0px;\r\n  width: calc(100% - 10px);\r\n\r\n  height: calc(var(--configuratorActionHeight) - 5px);\r\n  margin: 0 5px 5px 5px;\r\n  padding-top: 0px;\r\n  display: block;\r\n}\r\n\r\n.portrait-XiOPl .progressBar-Izqk1 {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 4px;\r\n  top: 50px;\r\n  left: 0;\r\n  z-index: 1000;\r\n  display: flex;\r\n}\r\n\r\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\r\n\r\n.action-on-top-UqyK5 {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: 50px;\r\n  height: 50px;\r\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%0D%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%0D%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%0D%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%0D%3C%2Fsvg%3E%0D%0D\") center center var(--primaryColor);\r\n  background-size: 37%;\r\n  z-index: 300;\r\n}\r\n\r\n.landscape-EyFBs,\r\n.portrait-XiOPl {\r\n  --configuratorActionHeight: 50px;\r\n}\r\n\r\n.wcConfigurator-YOuy8 ::-webkit-scrollbar {\r\n  width: 5px;\r\n  height: 5px;\r\n}\r\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-track {\r\n  background: #dfdfdf;\r\n  border-radius: 3px;\r\n}\r\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-thumb {\r\n  background: #b1b1b1;\r\n  border-radius: 3px;\r\n}\r\n";
+styleInject(css_248z);
+
+var Standard = function Standard(_ref) {
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    headerInfos = _useDivaCore$state.headerInfos,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent;
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("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.configSettingsIsFoldedUp ? foldedup : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.configSettingsIsHidden ? settingsHidden : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, viewHandler.actionButtonState.isOnLastStep ? isOnLastStep : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
+      children: [/*#__PURE__*/jsx(Product, {
+        className: wcConfiguratorProduct
+      }), !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorSettingsWrapper,
+        children: [/*#__PURE__*/jsx(TabGroup, {
+          className: wcConfiguratorSteps
+        }), /*#__PURE__*/jsx(Settings, {
+          className: wcConfiguratorSettings
+        }), /*#__PURE__*/jsx(NavigationButtons, {
+          className: wcConfiguratorSettingsActions
+        }), /*#__PURE__*/jsx(BasketActionStandard, {
+          containerClassName: wcConfiguratorAction
+        })]
+      }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(TabGroup, {
+          className: classnames(wcConfiguratorSteps, headerInfos.onlyBurgerVisibles || isFullscreenComponent ? burgerVisible : undefined),
+          showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
+        }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx(ProgressBar, {
+          className: progressBar
+        }), /*#__PURE__*/jsx(Settings, {
+          className: wcConfiguratorSettings
+        }), /*#__PURE__*/jsx(NavigationButtons, {
+          className: classnames(wcConfiguratorSettingsActions)
+        }), /*#__PURE__*/jsx(BasketActionStandard, {
+          containerClassName: wcConfiguratorAction
+        }), /*#__PURE__*/jsx(BasketMobile, {
+          className: actionOnTop
+        })]
+      })]
+    }), /*#__PURE__*/jsx(BarrierActions, {}), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#d60084',
+  '--secondaryColor': '#4b4b4b',
+  '--thirdColor': '#e5e5e5; ',
+  '--globalBorderRadius': '3px',
+  '--articlePosNrRadius': '50%',
+  '--articlePosNrSize': '1.5rem',
+  '--articlePosNrFontSize': '1.1rem',
+  '--galleryItemRadius': '50%',
+  '--galleryItemRowCount': '5',
+  '--galleryItemMargin': '0.5%',
+  '--galleryItemRowCountSmall': '6',
+  '--galleryItemMarginSmall': '0.3%',
+  '--galleryItemBorder': '0px',
+  '--galleryItemBorderColor': '#e8e9ed',
+  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
+  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
+  '--lineHeight1': '20.8px',
+  '--fontWeight1': '300',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--itemsMargin': '11.2px 0 0 0',
+  '--tabGroupBackground': 'unset',
+  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.9)',
+  '--settingsScrollerPaddingTopBottom': '0px',
+  '--settingsScrollerPaddingRight': '5px',
+  '--settingsScrollerPaddingLeft': '5px',
+  '--foldArrowMarginRight': 'calc(50% - 8px)',
+  '--configuratorActionHeight': '50px',
+  '--configuratorActionWidthForthBackSpacer': '6px',
+  '--configuratorActionForthWidth': 'calc((100% - 53px) - (var(--configuratorActionWidthForthBackSpacer) / 2))',
+  '--configuratorActionBackWidth': 'calc(53px - (var(--configuratorActionWidthForthBackSpacer) / 2))'
+};
+var index = observer(Standard);
+
+export { index as default };

package/build/esm/index-10c3945c.js

@@ -0,0 +1,49 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-945074f1.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ArticleOverview from './index-d4a87c7e.js';
+import SVGViewer from './index-dc533da1.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 './index.module-d4c830a3.js';
+import './index.module-03df1a8f.js';
+import 'classnames';
+import './index.module-94a16855.js';
+import 'react-collapsible';
+import './index-58b8d83c.js';
+import './index.module-8b7db6c1.js';
+import './index-3a428f38.js';
+
+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 SVGAnalyser = function SVGAnalyser(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(ArticleOverview, _objectSpread(_objectSpread({}, props), {}, {
+    className: props.className,
+    ChildComponent: SVGViewer,
+    settings: [{
+      key: 'SVGSOURCE',
+      name: 'SVG Source'
+    }, {
+      key: 'SVGOVERVIEW',
+      name: 'SVG Übersicht'
+    }],
+    title: 'SVG Übersicht'
+  }));
+};
+var SVGAnalyzer = observer(SVGAnalyser);
+
+export { SVGAnalyzer as default };

package/build/esm/index-10e2e029.js

@@ -0,0 +1,127 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import { useState, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import SubTabGroupHeader from './index-63c5453a.js';
+import { S as SettingsItem } from './index-a8f4c6d0.js';
+import { observer } from 'mobx-react-lite';
+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/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'sift';
+import './index-c84e2c9d.js';
+import './index-ca0e4969.js';
+import './index-2ce21b8e.js';
+import './index-a638b452.js';
+import './index-339fe263.js';
+import './index.module-0c3a1f94.js';
+import './index-caa33034.js';
+import 'react-switch';
+import './index-55f945c0.js';
+import './index-a8d969d8.js';
+import 'react-dropdown';
+import './index-7dbf560b.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-abcc0f82.js';
+import './index-b34188dc.js';
+import './index-63cce023.js';
+import '@crystaldesign/content-box';
+import './index-2f1a0e04.js';
+import './index-972a9fb1.js';
+import './index-b5b683b5.js';
+import './index-4f5189b5.js';
+import './index-8161d3d2.js';
+import '@crystaldesign/products-component';
+import './index-0f8e2602.js';
+import './index-f5a4b8a0.js';
+import './index-bd162ad8.js';
+import 'react-laag';
+import './index-e4dd8413.js';
+import './index-2b309493.js';
+import './index-ef85426a.js';
+import './index-6891af5f.js';
+import './index-48a8a155.js';
+import './index-1a28e9b5.js';
+import './index-1bb9122f.js';
+import './index-473e0393.js';
+import './index-a76c6752.js';
+import './index-89cc3b90.js';
+import './index.module-d4c0130b.js';
+import './index-783af724.js';
+import './index-eefd4032.js';
+import './index-770767c2.js';
+import './index-7cab0762.js';
+import './index-b5e6499c.js';
+import './index-7531df3b.js';
+import './index-f214f28a.js';
+import './index.module-cb0c03a2.js';
+import './index-fde74907.js';
+import './index-9b97271d.js';
+
+var collapsableOuter = "collapsable-outer-udXIP";
+var css_248z = ".collapsable-outer-udXIP {\r\n  overflow: visible !important;\r\n}\n.collapsable-outer-udXIP {\r\n  height: auto;\r\n  transition: none 0s ease 0s;\r\n}\r\n";
+styleInject(css_248z);
+
+var SubTabgroup = function SubTabgroup(_ref) {
+  var _viewHandler$getViewC, _viewHandler$getViewC2;
+  var itemPalettesOfArticle = _ref.itemPalettesOfArticle;
+  var viewHandler = useViewHandler();
+  var _useState = useState(!!((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.selectAccessoiresWithToggle)),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var basketIds = Object.keys(itemPalettesOfArticle);
+  var _useState3 = useState('ALL'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    curTab = _useState4[0],
+    setCurTab = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabs = _useState6[0],
+    setTabs = _useState6[1];
+  var _useState7 = useState(itemPalettesOfArticle[basketIds[0]]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    itemPalettes = _useState8[0],
+    setItemPalettes = _useState8[1];
+  useEffect(function () {
+    var _itemPalettesOfArticl;
+    var actPalettes = (_itemPalettesOfArticl = itemPalettesOfArticle[curTab == 'ALL' ? basketIds[0] : curTab]) !== null && _itemPalettesOfArticl !== void 0 ? _itemPalettesOfArticl : {};
+    Object.values(actPalettes).map(function (p) {
+      return p.configAllMode = curTab == 'ALL' ? basketIds : undefined;
+    });
+    setItemPalettes(actPalettes);
+    setTabs(['ALL'].concat(_toConsumableArray(basketIds.length > 1 ? basketIds : [])));
+    if (!tabs.includes(curTab)) setCurTab(tabs[0]);
+  }, [itemPalettesOfArticle, curTab]);
+  return /*#__PURE__*/jsx(Collapsible, {
+    trigger: (_viewHandler$getViewC2 = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC2 !== void 0 && _viewHandler$getViewC2.selectAccessoiresWithToggle ? /*#__PURE__*/jsx(Fragment, {}) : /*#__PURE__*/jsx(SubTabGroupHeader, {
+      tabs: tabs,
+      openState: [isOpen, setIsOpen],
+      curState: [curTab, setCurTab]
+    }),
+    contentOuterClassName: isOpen ? collapsableOuter : undefined,
+    easing: "ease",
+    open: isOpen,
+    triggerDisabled: isOpen,
+    children: Object.values(itemPalettes).map(function (item, index) {
+      return /*#__PURE__*/jsx(SettingsItem, {
+        item: item,
+        id: item.id
+      }, index);
+    })
+  });
+};
+var SubTabGroup = observer(SubTabgroup);
+
+export { SubTabGroup as default };

package/build/esm/index-10ee75a6.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-945074f1.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 ProductFooter = function ProductFooter(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductFooter"
+  }));
+};
+
+export { ProductFooter as default };

package/build/esm/index-11073e5e.js

@@ -0,0 +1,121 @@
+import { s as styleInject, u as useViewHandler } from './index-945074f1.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-3933e482.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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var verticalItem = "verticalItem-NmQDx";
+var wcSpan = "wcSpan-0wnmJ";
+var verticalItemPoligon = "verticalItemPoligon-M44lA";
+var wcActiveStep = "wcActiveStep-ykv3D";
+var wcVisitedStep = "wcVisitedStep-qDdfW";
+var wcStepIcon = "wcStepIcon-7hz1S";
+var css_248z = ".verticalItem-NmQDx {\r\n  font-size: 12px;\r\n  width: 100%;\r\n  line-height: 14px;\r\n  height: 3.5rem;\r\n  letter-spacing: 0.3px;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-stroke: 0.4px;\r\n  background-image: none;\r\n  text-align: center;\r\n  vertical-align: top;\r\n  zoom: 1;\r\n  box-sizing: content-box;\r\n  position: relative;\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  color: #000;\r\n  color: var(--tabGroupStepVisitedFont, #000);\r\n}\r\n\r\n.wcSpan-0wnmJ {\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  position: absolute;\r\n  font-size: 12px;\r\n  line-height: 14px;\r\n  height: 3.5rem;\r\n  letter-spacing: 0.3px;\r\n  -webkit-font-smoothing: antialiased;\r\n  -webkit-text-stroke: 0.4px;\r\n  background-image: none;\r\n  text-align: center;\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n.verticalItemPoligon-M44lA {\r\n  fill: var(--thirdColor);\r\n  fill: var(--tabGroupStep, var(--thirdColor));\r\n}\r\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D {\r\n  fill: var(--primaryColor);\r\n  fill: var(--tabGroupStepActive, var(--primaryColor));\r\n  color: white;\r\n}\r\n/* .verticalItemPoligon.wcVisitedStep {\r\n  border: #b1b1b1 1px solid;\r\n} */\r\n\r\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW {\r\n  fill: #b1b1b1;\r\n  fill: var(--tabGroupStepVisited, #b1b1b1);\r\n}\r\n.verticalItemPoligon-M44lA.wcActiveStep-ykv3D:hover {\r\n  fill: var(--primaryColor);\r\n  fill: var(--tabGroupStepActive, var(--primaryColor));\r\n}\r\n\r\n.verticalItemPoligon-M44lA:hover,\r\n.verticalItemPoligon-M44lA.wcVisitedStep-qDdfW:hover {\r\n  fill: #bbbbbb;\r\n  fill: var(--tabGroupStepHover, #bbbbbb);\r\n}\r\n\r\n.wcStepIcon-7hz1S {\r\n  display: block;\r\n  background-color: #000;\r\n  background-color: var(--tabGroupStepVisitedFont, #000);\r\n  background-position: center center;\r\n  width: 42px;\r\n  height: 42px;\r\n  margin: auto;\r\n  -webkit-mask-size: contain;\r\n  -webkit-mask-repeat: no-repeat;\r\n}\r\n\r\n.wcActiveStep-ykv3D .wcStepIcon-7hz1S {\r\n  background-color: white;\r\n}\r\n";
+styleInject(css_248z);
+
+var VerticalTabGroupItemStandard = function VerticalTabGroupItemStandard(_ref) {
+  var _getIconOfTabGroup;
+  var tabGroup = _ref.tabGroup,
+    height = _ref.height,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 80 : _ref$minHeight,
+    isFirstItem = _ref.isFirstItem,
+    isLastItem = _ref.isLastItem,
+    _ref$wcVisitedStepCla = _ref.wcVisitedStepClass,
+    wcVisitedStepClass = _ref$wcVisitedStepCla === void 0 ? wcVisitedStep : _ref$wcVisitedStepCla,
+    _ref$wcActiveStepClas = _ref.wcActiveStepClass,
+    wcActiveStepClass = _ref$wcActiveStepClas === void 0 ? wcActiveStep : _ref$wcActiveStepClas,
+    _ref$verticalItemPoli = _ref.verticalItemPoligonClass,
+    verticalItemPoligonClass = _ref$verticalItemPoli === void 0 ? verticalItemPoligon : _ref$verticalItemPoli,
+    _ref$wcStepIconClass = _ref.wcStepIconClass,
+    wcStepIconClass = _ref$wcStepIconClass === void 0 ? wcStepIcon : _ref$wcStepIconClass,
+    lastItemDiv = _ref.lastItemDiv;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var width = 128;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  if (height < minHeight) {
+    height = minHeight;
+  }
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var tabGroupActive = tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var tabGroupVisited = viewHandler.tabGroupAlreadyVisited(tabGroup) && !(tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr));
+  var polygonPoints;
+  if (isFirstItem && isLastItem) {
+    polygonPoints = '0 ' + height + ', 0 0, ' + width + ' 0, ' + width + ' ' + height + ', ' + '64 ' + height;
+  } else if (isFirstItem) {
+    polygonPoints = '0 ' + (height - 9) + ', 0 0, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', ' + '64 ' + (height - 1);
+  } else if (isLastItem) {
+    polygonPoints = '0 ' + (height - 1) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 1);
+  } else {
+    polygonPoints = '0 ' + (height - 9) + ', 0 0, 64 8, ' + width + ' 0, ' + width + ' ' + (height - 9) + ', 64 ' + (height - 1);
+  }
+  var icon = (_getIconOfTabGroup = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons)) !== null && _getIconOfTabGroup !== void 0 ? _getIconOfTabGroup : '';
+  var div = /*#__PURE__*/jsxs("div", {
+    "data-test-id": "tabGroupItem",
+    children: [/*#__PURE__*/jsx("div", {
+      className: wcStepIconClass,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    }), /*#__PURE__*/jsx("span", {
+      "data-test-id": "tabGroupItemTitle",
+      children: t('configurator.' + tabGroup.title, tabGroup.title)
+    })]
+  });
+  if (isLastItem && lastItemDiv) {
+    div = lastItemDiv;
+  }
+  return /*#__PURE__*/jsxs("svg", {
+    "data-test-id": "tabGroupItemSvg",
+    viewBox: '0 0 ' + width + ' ' + height,
+    ref: tabGroupItemRef,
+    style: {
+      height: height + 'px',
+      minHeight: minHeight
+    },
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(verticalItem, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+    children: [/*#__PURE__*/jsx("polygon", {
+      className: classnames(verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+      points: polygonPoints
+    }), /*#__PURE__*/jsx("foreignObject", {
+      width: "100%",
+      height: "100%",
+      style: {
+        pointerEvents: 'none'
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(wcSpan, verticalItemPoligonClass, tabGroupActive ? wcActiveStepClass : undefined, tabGroupVisited ? wcVisitedStepClass : undefined),
+        children: div
+      })
+    })]
+  });
+};
+var VerticalTabGroupItemStandard$1 = observer(VerticalTabGroupItemStandard);
+
+export { VerticalTabGroupItemStandard$1 as default };