@crystaldesign/diva-web-planner-react 26.8.0-beta.5 → 26.8.0-beta.51

package/build/esm/index-9d4d3241.js

@@ -0,0 +1,60 @@
+import { s as styleInject, u as useViewHandler } from './index-0873620d.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 wcTabGroupItem = "wcTabGroupItem-RxTRT";
+var wcActiveStep = "wcActiveStep-W687q";
+var wcVisitedStep = "wcVisitedStep-IGlR4";
+var wcTabGroupItemMobile = "wcTabGroupItemMobile-tMZbr";
+var tablet = "tablet--DGT2";
+var css_248z = ".wcTabGroupItem-RxTRT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  transition:\n    background-color 0.3s ease-out,\n    color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n  cursor: pointer;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q,\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q.wcTabGroupItem-RxTRT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcTabGroupItem-RxTRT.wcVisitedStep-IGlR4 {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-IGlR4.wcTabGroupItem-RxTRT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-RxTRT.wcTabGroupItem-RxTRT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q {\n  color: white;\n}\n\n.wcTabGroupItemMobile-tMZbr {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  line-height: calc(var(--configuratorTabGroupHeight) - 3px);\n  padding-left: 10px;\n  padding-right: 10px;\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-weight: 600;\n  position: relative;\n}\n\n:not(.tablet--DGT2).wcTabGroupItemMobile-tMZbr {\n  font-size: 12px;\n}\n\n.wcTabGroupItemMobile-tMZbr::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  height: 3px;\n  left: 50%;\n  bottom: 0;\n  background-color: var(--primaryColor);\n  transition: all ease-in-out 0.2s;\n}\n\n.wcActiveStep-W687q::after {\n  width: 100%;\n  left: 0;\n}\n\n.wcTabGroupItemMobile-tMZbr:hover {\n  color: var(--primaryColor);\n}\n\n.wcActiveStep-W687q {\n  border: none;\n  color: var(--primaryColor);\n  background: rgba(230, 230, 230, 0.95);\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var active = tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  return /*#__PURE__*/jsx("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onTabGroupClick(tabGroup);
+    },
+    className: classnames(!viewHandler.uiState.isInMobileView ? wcTabGroupItem : wcTabGroupItemMobile, viewHandler.uiState.isTablet ? tablet : undefined, active ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !active ? wcVisitedStep : undefined),
+    children: t('configurator.' + tabGroup.title, tabGroup.title)
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };

package/build/esm/index-9de3b759.js

@@ -0,0 +1,44 @@
+import { s as styleInject } from './index-0873620d.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 pdfButton = "pdfButton-4l4zL";
+var css_248z = ".pdfButton-4l4zL {\n  border-radius: 50%;\n  border: solid 2px var(--primaryColor);\n  width: 26px;\n  height: 26px;\n  cursor: pointer;\n  margin-left: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pdfButton-4l4zL img {\n  width: 80%;\n}\n";
+styleInject(css_248z);
+
+var pdfIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20%202H8c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm0%2014H8V4h12v12zM4%206H2v14c0%201.1.9%202%202%202h14v-2H4V6zm12%206V9c0-.55-.45-1-1-1h-2v5h2c.55%200%201-.45%201-1zm-2-3h1v3h-1V9zm4%202h1v-1h-1V9h1V8h-2v5h1zm-8%200h1c.55%200%201-.45%201-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z%22%2F%3E%3C%2Fsvg%3E";
+
+var PDFButton = function PDFButton(_ref) {
+  var pdfUrl = _ref.pdfUrl;
+  return /*#__PURE__*/jsx("div", {
+    className: pdfButton,
+    onClick: function onClick() {
+      return window.open(pdfUrl, '_blank');
+    },
+    children: /*#__PURE__*/jsx("img", {
+      src: pdfIcon
+    })
+  });
+};
+
+export { PDFButton as default };

package/build/esm/index-9f739a1c.js

@@ -0,0 +1,78 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler, G as GenericToolTip } from './index-0873620d.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useHover, useLayer } from 'react-laag';
+import classnames from 'classnames';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var posnrWrapper = "posnr-wrapper-Y5KDP";
+var swiperWrapper = "swiper-wrapper-nEwC5";
+var swiperSlide = "swiper-slide-43Id0";
+var posnr = "posnr-zpYVY";
+var mobile = "mobile-0MfYt";
+var isActive = "isActive-mWaAC";
+var allIsActive = "allIsActive-iSz9H";
+var isSelectable = "isSelectable-FBPGm";
+var small = "small-xZ6Og";
+var css_248z = ".posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 {\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  flex-wrap: wrap;\n  align-items: center;\n  font-size: 16px;\n  line-height: 18px;\n  color: var(--secondaryColor);\n  height: 100%;\n  position: relative;\n  max-width: 120px;\n}\n\n.swiper-slide-43Id0 {\n  outline: none;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper {\n  width: 100%;\n  height: 100%;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY {\n  border-radius: var(--articlePosNrRadius);\n  font-size: 16px;\n  line-height: var(--articlePosNrSize);\n  min-width: var(--articlePosNrSize);\n  width: 25px;\n  text-align: center;\n  display: inline-block;\n  margin: 0 1px;\n  transition:\n    box-shadow 0.2s ease,\n    background-color 1s ease,\n    color 1s ease;\n}\n.mobile-0MfYt.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY,\n.mobile-0MfYt.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.isActive-mWaAC {\n  font-size: 14px;\n  width: 20px;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY:hover {\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n\n  cursor: pointer;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.isActive-mWaAC {\n  color: white;\n  background-color: var(--primaryColor);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.allIsActive-iSz9H {\n  color: white;\n  background: var(--primaryColor);\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.isSelectable-FBPGm {\n  color: var(--secondaryColor);\n  background: #eaeaea;\n}\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.small-xZ6Og,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .posnr-zpYVY.small-xZ6Og.isActive-mWaAC {\n  font-size: 12px;\n}\n\n/**\n * Swiper 11.1.12\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * https://swiperjs.com\n *\n * Copyright 2014-2024 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: September 1, 2024\n */\n\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  /* Fix of Webkit flickering */\n  z-index: 1;\n  display: block;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n  transition-timing-function: initial;\n  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n  box-sizing: content-box;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-android .swiper-slide,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-ios .swiper-slide,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-horizontal {\n  touch-action: pan-y;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-vertical {\n  touch-action: pan-x;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-slide {\n  flex-shrink: 0;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n  display: block;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n/* Auto Height */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-autoheight,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n/* 3D Effects */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d.swiper-css-mode .swiper-wrapper {\n  perspective: 1200px;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-wrapper {\n  transform-style: preserve-3d;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d {\n  perspective: 1200px;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-cube-shadow {\n  transform-style: preserve-3d;\n}\n/* CSS Mode */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode > .swiper-wrapper {\n  overflow: auto;\n  scrollbar-width: none;\n  /* For Firefox */\n  -ms-overflow-style: none;\n  /* For Internet Explorer and Edge */\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n  display: none;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: start start;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-horizontal > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-vertical > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-free-mode > .swiper-wrapper {\n  scroll-snap-type: none;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: none;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n  scroll-snap-stop: always;\n}\n[dir=\"ltr\"] .posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n/* Slide styles start */\n/* 3D Shadows */\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-left,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-right,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-top,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-bottom,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-left,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-right,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-top,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-bottom {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 10;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow {\n  background: rgba(0, 0, 0, 0.15);\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-left {\n  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-right {\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-top {\n  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-3d .swiper-slide-shadow-bottom {\n  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-lazy-preloader {\n  width: 42px;\n  height: 42px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  margin-left: -21px;\n  margin-top: -21px;\n  z-index: 10;\n  transform-origin: 50%;\n  box-sizing: border-box;\n  border: 4px solid var(--swiper-theme-color);\n  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n  border-radius: 50%;\n  border-top-color: transparent;\n}\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,\n.posnr-wrapper-Y5KDP.swiper-wrapper-nEwC5 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {\n  animation: swiper-preloader-spin 1s infinite linear;\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 SettingsPosNr = function SettingsPosNr(_ref) {
+  var _renderLayer;
+  var id = _ref.id;
+  var viewHandler = useViewHandler();
+  var article = viewHandler.settingsState.articleInfos[id];
+  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: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.articleInfoSelected(Number(id));
+    },
+    id: "ArticleInfo",
+    className: classnames(posnr, viewHandler.settingsState.allArticlesAreActive ? allIsActive : article.isActive ? isActive : isSelectable, article.posNr.toString().length > 2 ? small : undefined)
+  }, triggerProps), hoverProps), {}, {
+    children: [article.posNr, isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: article.name,
+      price: article.singlePrice,
+      codex: article.codex,
+      image: article.image,
+      layerProps: layerProps
+    }, article.codex)))]
+  }), id);
+};
+var SettingsPosNr$1 = observer(SettingsPosNr);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': SettingsPosNr$1
+});
+
+export { SettingsPosNr$1 as S, swiperSlide as a, index as i, mobile as m, posnrWrapper as p, swiperWrapper as s };

package/build/esm/index-9f7a6cf5.js

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

package/build/esm/index-9fe26b0a.js

@@ -0,0 +1,181 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-0873620d.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef } from 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import Draggable from 'react-draggable';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 container = "container-ulbgy";
+var wrapper = "wrapper-CDDb8";
+var door = "door-MAV8k";
+var first = "first-flj9W";
+var last = "last-joL72";
+var handle = "handle-uyqn6";
+var short1 = "short1-1RTH5";
+var short2 = "short2-ELqSF";
+var short3 = "short3-YuCyl";
+var shortLeft = "short-left-3AMc0";
+var shortRight = "short-right-ElG0J";
+var left = "left-rt3Dw";
+var right = "right-ziERh";
+var invisibleDragger = "invisible-dragger-CYEX3";
+var visibleDragger = "visible-dragger-GTq6j";
+var isOkay = "is-okay-xl784";
+var notOkay = "not-okay-7XIp7";
+var css_248z = ".container-ulbgy,\n.container-ulbgy * {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n.container-ulbgy {\n  overflow-x: auto;\n  width: calc(100% - 20px);\n  height: 100%;\n  position: relative;\n  padding: 0;\n  margin: 10px;\n  float: left;\n}\n.wrapper-CDDb8 {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.door-MAV8k {\n  display: inline-block;\n  word-break: break-word;\n  background: #eee;\n  box-sizing: border-box;\n  border: 1px solid black;\n  position: relative;\n  width: 50px;\n  height: 150px;\n}\n\n.first-flj9W {\n  border-left: 3px solid black;\n}\n\n.last-joL72 {\n  border-right: 3px solid black;\n}\n\n.handle-uyqn6 {\n  position: absolute;\n  top: 47%;\n  height: 20px;\n  width: 30px;\n  left: calc(50% - 17px);\n  pointer-events: none;\n}\n\n.short1-1RTH5,\n.short2-ELqSF,\n.short3-YuCyl {\n  position: absolute;\n  height: 0px;\n  width: 50px;\n  pointer-events: none;\n  border: 1px solid black;\n  z-index: 10;\n}\n\n.short-left-3AMc0,\n.short-right-ElG0J {\n  background-color: #eee;\n  height: 30%;\n  position: absolute;\n  bottom: 0px;\n  width: 4px;\n}\n\n.short-left-3AMc0 {\n  left: 100%;\n}\n.short-right-ElG0J {\n  right: 100%;\n}\n\n.short1-1RTH5 {\n  bottom: 30%;\n}\n.short2-ELqSF {\n  bottom: 20%;\n}\n.short3-YuCyl {\n  bottom: 10%;\n}\n\n.first-flj9W .short1-1RTH5,\n.first-flj9W .short2-ELqSF,\n.first-flj9W .short3-YuCyl {\n  width: 48px;\n  left: 2px;\n}\n\n.last-joL72 .short1-1RTH5,\n.last-joL72 .short2-ELqSF,\n.last-joL72 .short3-YuCyl {\n  width: 48px;\n  right: 2px;\n}\n\n.left-rt3Dw {\n  border-left: solid 3px black;\n}\n.right-ziERh {\n  border-right: solid 3px black;\n}\n\n.invisible-dragger-CYEX3 {\n  height: 150px;\n  opacity: 0;\n  position: absolute;\n  z-index: 100;\n}\n\n.visible-dragger-GTq6j {\n  opacity: 1;\n  border: 1px solid black;\n  cursor: ew-resize;\n}\n\n.is-okay-xl784 {\n  border: 1px solid green;\n  background-image: url(data:image/png;base64,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);\n  background-repeat: no-repeat;\n  background-size: 60%;\n  background-position: center 30%;\n}\n\n.not-okay-7XIp7 {\n  border: 1px solid red;\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAACSCAYAAACue5OOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wUCBxMapy8qGgAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAF50lEQVR4nO3dW3ITMRSE4fZkA05lKewgWbeX4KVQeAFQ4SE14NhzkTSSTp+j/p+AQEaXjxDbGnP6/PxEaX8+Pv794ZfL5VT8iZRZtfZwqjGApZ8r/mruYRGktQsKk59q72E2pL0LCRN/LfYwC1LqBYSJt1Z7mAwp9xMLE18t9zAJUikKYeKp9R7uQjqKQZjs67GHm5BqIRAmu3rt4Sqk2psvTP3ruYeLkFptujD1q/cePkFqvdnC1D6LPZz2fkOvgag6We3htPaB3gNRx7Pcw8liAEsDUcey3sPT7/d3883UEZRjMfyFLD5GUjOGhfAay9pNb9frq/UgAJ4F8RTLmr1dr6/T7Xa7CZO/WNbq7Xp9vd1utwkAhMlXLGs0IwLuvkcSJh+xrM09IuDhm21h4o5lTR4RAQuP2oSJM5a1WEIErDz8FyauWNZgDRGw8TySMHHEMvctRMDOE5LCZBvLnPcQAQnPbAuTTSxzTUEEJL5EIkx9Y5ljKiIg47U2YeoTy9xyEAGZL9oKU9tY5pSLCCh49V+Y2sQylxJEQOExEmGqG8scShEBB84jCVOdWMZ+BBFw8GCbMB2LZcxHEQEVTkgKU1ksY62BCKh01FaY8mIZYy1EQMUz28KUFsvYaiICKh/+F6btWMZUGxHQ4C4SYVqOZSwtEAGNbkcSJr4xAO0QAQ3vaxMm+2vf1xIR0PgGydExjYII6HCn7aiYRkIEdLplezRMoyECOt77PwqmEREBnd9EIjqmUREBBu9GEhXTyIgAo7e1iYZpdESA4fsjRcEkRF+ZvtGWd0xC9D/zd2zzikmIvmcOCfCHSYieo4AE+MEkRMvRQAL4MQnRelSQAF5MQrTd6ch/196y8/l8/vnjxy/rcTDFiggg/Io0x/SViSFmRAAxJECY5tgRAeSQAGHygAhwAAkYF5MXRIATSMB4mDwhAhxBAsbB5A0R4AwSEB+TR0SAQ0hAXExeEQFOIQHxMHlGBDiGBMTB5B0R4BwS4B9TBERAAEiAX0xREAFBIAH+MEVCBASCBPjBFA0REAwSwI8pIiIgICSAF1NUREBQSAAfpsiIgMCQAIDphCXTWFoUFhLLGev7GMdUq5CQmDeMeWxHCgfJw0Z5GGNuoSB52iBPY00pDCSPG+NxzGuFgOR5QzyP/T73kCJsRIQ5uIYUYQPmvM/FLSTvC7+U5zm5hOR5wffyOjd3kLwudE4e5+gKkscFLs3bXN1A8rawNfI0ZxeQPC1o7bzMnR6Sl4VsmYc1oIbkYQF7xb4WtJBYFu7ten1lOWnJsiZLUUJiWbD5eCzTsV2WtXmMDhLLQj2esRam7aggsSzQ2kF9YVqPBhLLwuzd7SFMy1FAYlmQ1FuGhOk5c0gsC5F735kwfc8UEsMCAOU3LwrT/8wgWU987ugdsML0lQmkKIjmhMkAUjREc6Nj6gopKqK5kTF1gxQd0dyomLpAGgXR3IiYmkMaDdHcaJiaQhoV0dxImJpBGh3R3CiYmkASou+NgKk6JCFaLjqmqpCEaLvImKpBEqK0omKqAkmI8oqI6TAkISorGqZDkIToWJEwFUMSojpFwVQESYjqFgFTNiQhapN3TFmQhKhtnjElQxKiPnnFlARJiPrmEdMuJCGyyRumTUhCZJsnTKuQhIgjL5gWIQkRVx4wPUESIs7YMU17v8EiIVqOGdO09gGrhGg7VkzT4y9YJkRpMWI6/X5/FyKnnc/nM8t/A2/+RluAEJXG9JXJHJIQHYsF0/RyuZysLi5EdbLG9HK5nKb5B70vLkR1s8I025kef6FHQtSm3pjuzUxrH2iVELWtF6ZHK0/fbLfEJER9ao1pycjio7YWmISob60wrdlYffhfE5MQ2VQb05aJzeeRamASIttqYdqzsPuE5BFMQsTRUUwpBpKe2S7BJERclWJK3fvkl0hyMAkRZ7mYcvY867W2lE8sRNylYsr9Vyj7RdutCwiRj/YwlXwrU/Tq/9KFhMhXa5hKH1wVHyO5v6AQ+ewR05FH6H8B5Ihh9gBsjDAAAAAASUVORK5CYII=);\n  background-repeat: no-repeat;\n  background-size: 60%;\n  background-position: center 30%;\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 DoorPlanner = function DoorPlanner(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var DOOR_WIDTH = 50;
+  var doors = item.groups[0].items;
+  var _useState = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedDoor = _useState4[0],
+    setSelectedDoor = _useState4[1];
+  var scroller = useRef(null);
+  var draggable = useRef(null); // https://github.com/react-grid-layout/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171
+
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    doorSwapPossible = _useState6[0],
+    setDoorSwapPossible = _useState6[1];
+  var handleStart = function handleStart(e) {
+    var offset = getEventOffsetX(e);
+    var xPos = offset - offset % DOOR_WIDTH;
+    setPosition({
+      y: 0,
+      x: xPos
+    });
+    setSelectedDoor(doors[xPos / DOOR_WIDTH]);
+  };
+  var handleDrag = function handleDrag(e) {
+    var offset = getEventOffsetX(e);
+    var index = (offset - offset % DOOR_WIDTH) / DOOR_WIDTH;
+    if (index >= 0 && index < doors.length) {
+      if ((selectedDoor === null || selectedDoor === void 0 ? void 0 : selectedDoor.key) != doors[index].key && (selectedDoor === null || selectedDoor === void 0 ? void 0 : selectedDoor.currentDoor.StrictType) === doors[index].currentDoor.StrictType) {
+        setDoorSwapPossible(true);
+      } else {
+        setDoorSwapPossible(false);
+      }
+    }
+    scrollLeftOrRight(e);
+  };
+  var handleStop = function handleStop(e) {
+    var offset = getEventOffsetX(e);
+    var index = (offset - offset % DOOR_WIDTH) / DOOR_WIDTH;
+    if (doorSwapPossible && selectedDoor && index >= 0 && index < doors.length) {
+      viewHandler.divaWebPlanner.moveDoors(selectedDoor.door, doors[index].door);
+    }
+    setSelectedDoor(undefined);
+    setDoorSwapPossible(false);
+    setPosition({
+      y: 0,
+      x: 0
+    });
+  };
+  var scrollLeftOrRight = function scrollLeftOrRight(e) {
+    var _e$layerX, _viewHandler$settings, _viewHandler$settings2;
+    if (!scroller.current) return;
+    var offset = (_e$layerX = e.layerX) !== null && _e$layerX !== void 0 ? _e$layerX : e.changedTouches[0].clientX - ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().x) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0);
+    if (offset < scroller.current.getBoundingClientRect().width / 100 * 5) {
+      //scroll left
+      scroller.current.scrollTo({
+        left: scroller.current.scrollLeft - 10
+      });
+    } else if (offset > scroller.current.getBoundingClientRect().width / 100 * 95) {
+      //scroll right
+      scroller.current.scrollTo({
+        left: scroller.current.scrollLeft + 10
+      });
+    }
+  };
+  var getEventOffsetX = function getEventOffsetX(e) {
+    var _e$clientX, _viewHandler$settings3, _viewHandler$settings4, _scroller$current$scr, _scroller$current;
+    return ((_e$clientX = e.clientX) !== null && _e$clientX !== void 0 ? _e$clientX : e.changedTouches[0].clientX) - ((_viewHandler$settings3 = (_viewHandler$settings4 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings4 === void 0 ? void 0 : _viewHandler$settings4.getBoundingClientRect().x) !== null && _viewHandler$settings3 !== void 0 ? _viewHandler$settings3 : 0) + ((_scroller$current$scr = (_scroller$current = scroller.current) === null || _scroller$current === void 0 ? void 0 : _scroller$current.scrollLeft) !== null && _scroller$current$scr !== void 0 ? _scroller$current$scr : 0);
+  };
+  var dragHandlers = {
+    onStart: handleStart,
+    onDrag: handleDrag,
+    onStop: handleStop
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [t('configurator.DoorPlanner_Description'), /*#__PURE__*/jsx("div", {
+      ref: scroller,
+      className: classnames(container, 'box'),
+      children: /*#__PURE__*/jsxs("div", {
+        className: classnames(wrapper, 'no-swiping'),
+        children: [/*#__PURE__*/jsx(Draggable, _objectSpread(_objectSpread({
+          nodeRef: draggable,
+          bounds: "parent",
+          position: position
+        }, dragHandlers), {}, {
+          axis: "x",
+          defaultClassName: invisibleDragger,
+          defaultClassNameDragging: classnames(visibleDragger, doorSwapPossible ? isOkay : notOkay),
+          children: /*#__PURE__*/jsx("div", {
+            ref: draggable,
+            className: "box cursor-x",
+            style: {
+              width: !!selectedDoor ? DOOR_WIDTH : DOOR_WIDTH * doors.length
+            }
+          })
+        })), doors.map(function (item, index) {
+          return /*#__PURE__*/jsxs("div", {
+            className: classnames(door, index == 0 ? first : undefined, index === doors.length - 1 ? last : undefined),
+            children: [item.type.includes('TUER_L') && /*#__PURE__*/jsx("div", {
+              className: classnames(handle, right)
+            }), item.type.includes('TUER_R') && /*#__PURE__*/jsx("div", {
+              className: classnames(handle, left)
+            }), item.type == 'TUER_L_SHORT' && /*#__PURE__*/jsx("div", {
+              className: classnames(shortLeft)
+            }), item.type == 'TUER_R_SHORT' && /*#__PURE__*/jsx("div", {
+              className: classnames(shortRight)
+            }), item.type.includes('SHORT') && /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("div", {
+                className: classnames(short1)
+              }), /*#__PURE__*/jsx("div", {
+                className: classnames(short2)
+              }), /*#__PURE__*/jsx("div", {
+                className: classnames(short3)
+              })]
+            })]
+          });
+        })]
+      })
+    })]
+  });
+};
+var index = observer(DoorPlanner);
+
+export { index as default };

package/build/esm/index-a4846bf0.js

@@ -0,0 +1,66 @@
+import { u as useViewHandler } from './index-0873620d.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import ConfigStep from './index-296d528c.js';
+import Header from './index-ef1537c4.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 VerticalTabGroupItemClassification = function VerticalTabGroupItemClassification(_ref) {
+  var tabGroup = _ref.tabGroup;
+    _ref.height;
+    _ref.minHeight;
+  var viewHandler = useViewHandler();
+  var tabGroupItemRef = useRef(null);
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var configSteps = Array.from(tabGroup.options.values()).map(function (o) {
+    return {
+      configStep: Array.from(o.configSteps.values())[0],
+      option: o
+    };
+  }).flat();
+  return /*#__PURE__*/jsx("div", {
+    ref: tabGroupItemRef,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      open: true,
+      easing: "ease",
+      trigger: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: false
+      }),
+      triggerWhenOpen: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: true
+      }),
+      children: configSteps.map(function (step) {
+        return /*#__PURE__*/jsx(ConfigStep, {
+          step: step
+        }, step.configStep.key);
+      })
+    })
+  });
+};
+var index = observer(VerticalTabGroupItemClassification);
+
+export { index as default };