@crystaldesign/diva-web-planner-react 25.2.0-beta.3 → 25.2.0-beta.30

package/build/esm/index-c69631be.js

@@ -0,0 +1,31 @@
+import { u as useViewHandler } from './index-d1cf8cb5.js';
+import 'react';
+import { k as wcPlanner3DGrid } from './index.module-a8358696.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 'mobx-react-lite';
+
+var Planner3DGrid = function Planner3DGrid(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setPlanner3DGridElement(_ref);
+    },
+    id: "diva3dImg_3DGrid",
+    className: wcPlanner3DGrid
+  });
+};
+
+export { Planner3DGrid as default };

package/build/esm/index-c6fc2919.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-d1cf8cb5.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ProductHeaderFunction = function ProductHeaderFunction(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductHeader/Functions"
+  }));
+};
+
+export { ProductHeaderFunction as default };

package/build/esm/index-c701de3a.js

@@ -0,0 +1,58 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { a as usePlannerUIHandler } from './index-d1cf8cb5.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Outline3D from './index-162db339.js';
+import ItemsContainer from './index-3356e402.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 '@crystaldesign/diva-core';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import './index-032ad303.js';
+import './index-7de200f8.js';
+import './index-366701cc.js';
+import './index-20688b1f.js';
+import './index-2350069a.js';
+import './index-ed3b49a1.js';
+import './index-857659f0.js';
+import './index-6a37b4d5.js';
+import './index-f53f8e5e.js';
+import './index-1923beb6.js';
+import './index-32b23f43.js';
+import 'react-draggable';
+import './index-b47827d7.js';
+import './index-e9fc53c9.js';
+import './index-824cc38a.js';
+
+var PlannerUI = function PlannerUI(_ref) {
+  var plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var uiItems = plannerUIHandler.getItems();
+  var uiOutline3DItemsArr = plannerUIHandler.getItemsOutline3D();
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [_toConsumableArray(uiItems.keys()).map(function (setId) {
+      return _toConsumableArray(uiItems.get(setId).keys()).map(function (elementId) {
+        return /*#__PURE__*/jsx(ItemsContainer, {
+          plannerUIProps: plannerUIProps,
+          items: uiItems.get(setId).get(elementId)
+        }, setId + '_' + elementId);
+      });
+    }), /*#__PURE__*/jsx(Outline3D, {
+      items: uiOutline3DItemsArr,
+      plannerUIProps: plannerUIProps
+    })]
+  });
+};
+var PlannerUI$1 = observer(PlannerUI);
+
+export { PlannerUI$1 as default };

package/build/esm/index-c76f3932.js

@@ -0,0 +1,69 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-d1cf8cb5.js';
+import classnames from 'classnames';
+import { useState } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+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';
+
+var PlannerMsgItem = function PlannerMsgItem(_ref) {
+  var item = _ref.item,
+    codex = _ref.codex,
+    wcPlannerMsgContainer = _ref.wcPlannerMsgContainer,
+    wcPlannerWarningContainer = _ref.wcPlannerWarningContainer,
+    wcPlannerInfoContainer = _ref.wcPlannerInfoContainer,
+    wcPlannerInfoContainerCollapsed = _ref.wcPlannerInfoContainerCollapsed,
+    wcPlannerMsgImg = _ref.wcPlannerMsgImg,
+    wcPlannerMsgText = _ref.wcPlannerMsgText,
+    wcPlannerWarningImg = _ref.wcPlannerWarningImg,
+    wcPlannerInfoImg = _ref.wcPlannerInfoImg,
+    wcPlannerWarningText = _ref.wcPlannerWarningText,
+    wcPlannerInfoText = _ref.wcPlannerInfoText,
+    wcClose = _ref.wcClose,
+    wcCloseButton = _ref.wcCloseButton;
+  var viewHandler = useViewHandler();
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    timeOut = _useState2[0],
+    setTimeOut = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (!timeOut && item.autoHide == true) {
+    setTimeOut(setTimeout(function () {
+      return viewHandler.productState.updatePlannerMsgContainer(codex, false, item.type, item.content, item.autoHide);
+    }, item.timeoutDuration));
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wcPlannerMsgContainer, item.collapsed ? wcPlannerInfoContainerCollapsed : undefined, item.type == 'INFO' ? wcPlannerInfoContainer : undefined, item.type == 'WARNING' ? wcPlannerWarningContainer : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(wcPlannerMsgImg, item.type == 'INFO' ? wcPlannerInfoImg : undefined, item.type == 'WARNING' ? wcPlannerWarningImg : undefined)
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(wcPlannerMsgText, item.type == 'INFO' ? wcPlannerInfoText : undefined, item.type == 'WARNING' ? wcPlannerWarningText : undefined),
+      dangerouslySetInnerHTML: typeof item.content == 'string' ? {
+        __html: t('configurator.' + item.content, item.content)
+      } : undefined
+    }), typeof item.content != 'string' && item.content, /*#__PURE__*/jsx("div", {
+      className: wcClose,
+      onClick: function onClick() {
+        return viewHandler.productState.onPlannerMsgArrowClick(codex);
+      },
+      children: wcCloseButton != '' && /*#__PURE__*/jsx("div", {
+        className: wcCloseButton
+      })
+    })]
+  });
+};
+var PlannerMsgItem$1 = observer(PlannerMsgItem);
+
+export { PlannerMsgItem$1 as default };

package/build/esm/index-cb21d6ef.js

@@ -0,0 +1,43 @@
+import { s as styleInject, u as useViewHandler } from './index-d1cf8cb5.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+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';
+
+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-cc4f63c2.js

@@ -0,0 +1,76 @@
+import { s as styleInject, u as useViewHandler, a as usePlannerUIHandler } from './index-d1cf8cb5.js';
+import { observer } from 'mobx-react-lite';
+import { 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/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';
+
+var wcConfiguratorGrid = "wcConfigurator-grid-DANlC";
+var wcConfiguratorGrid2DCanvas = "wcConfigurator-grid-2D-canvas-kC0d5";
+var grid2DBg = "Grid2D_BG-qKtq3";
+var css_248z = ".wcConfigurator-grid-DANlC {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  width: 100% !important;\n  height: 100% !important;\n  position: absolute !important;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  z-index: 5;\n}\n\n.Grid2D_BG-qKtq3 {\n  background-repeat: repeat;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  position: absolute;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfdDAUQEiovM6IXAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMUfzQjcAAAP7SURBVHhe7ZzZbtsKEEP7/38Yf0JWZEGWJxc0MMVAGFMUwN6rynw4DeA5kSkRUTBO7V8/Pz/nNZ6ensbHlzi97+9vyfv6+rp4W9xp1nF65eB8pnnndDqdU8hAChlIIQQlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQq5QFwZf11BOwu19fn5evC3uNOs4vXJwPtO8cykE8hG4v78fH98Lr6+vq9zd3eWWNbHrWxZQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXwAFxYIa63dbxpllH9ep5t7jTrOP0ysH5TPPOpRDIR2Dvm/rb29u4nXeyqV/B6ZUj/4RMgyVKOOD0UghBCQecXgohKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vZstBN/AqE1zmnXU7Va90KpXz/v4+DjOO2pGp1eOXAjkI/Dw8DA+vhewqa+RTf0KTq8c+SdkGixRwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXqAOuoZyE26tNGIvhNO9kU/8P2fum/v7+fv74+KDklnWF//WWNQ2WKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vRRCUMIBp5dCCEo44PRuthB8A6M2zWnWUbdb9UKrXj3vFneadZxeOXIhkMPf5+XlZZVLIdOg8/z8fHlZYpp1VA/hVA//k2SagT5XTxq+4tXLMNOss8XD9ZlmnUP9DsH7Q6Z5p9xp1nF65ci3rGmwRAkHnN7WQra406yTQgZSCEEJB5xeCiEo4YDTSyEEJRxweimEoIQDTi+FEJRwwOmlkCvUhcHXNZSTcHt56WSn1Ba+V6YPClhyqFsWXp6Y5p1D3LKAEg44va2FbHGnWSeFDKQQghIOOL0UQlDCAaeXQghKOOD0UghBCQecXgohKOGA07vZQiCugQPiwAx1u63jTbOO6tXzbnGnWcfplYPzmeady/vUIR+B+vv2XsEHA0zbeedQt6xs6gNOb2shW9xp1kkhAymEoIQDTi+FEJRwwOmlEIISDji9FEJQwgGnl0IISjjg9G62EHwDozbNadZRt1v1QqtePa+yh6gZnV45SiGH2tT3/jf15cf5TeSWdQWnV458y5oGS5RwwOmlEIISDji9FEJQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6N1sIxDXqgGsoJ+H2ahNW3oWbTT38IR/xN/BP3LKmwRIlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQghKOOD0UghBCQec3s0Wgn/CXjidfwOJNZK+WhRfKgAAAABJRU5ErkJggg==');\n  /*background-image: url(\"images/Standard/grid_standard.png\");*/\n  background-size: 100px 100px;\n  z-index: 0;\n  /* zoom: 200%;*/\n}\n";
+styleInject(css_248z);
+
+var touchMoveDetected = false;
+var Planner2DGrid = function Planner2DGrid(props) {
+  var viewHandler = useViewHandler();
+  var uiHandler = usePlannerUIHandler();
+  var gridRef = useRef(null);
+  useEffect(function () {
+    if (!gridRef) return;
+    viewHandler.productState.setPlanner2DGridElement(gridRef.current);
+    if (gridRef.current) uiHandler.setGrid2DUIElement(gridRef.current);
+  }, [gridRef]);
+  var on2DPlannerBGClick = function on2DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: gridRef,
+    className: wcConfiguratorGrid,
+    id: "wcConfigurator-grid-container",
+    style: {
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      visibility: viewHandler.productState.doShowGrid ? 'visible' : 'hidden'
+    },
+    onClick: on2DPlannerBGClick,
+    onTouchStart: function onTouchStart() {
+      touchMoveDetected = false;
+    },
+    onTouchMove: function onTouchMove() {
+      touchMoveDetected = true;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!touchMoveDetected) {
+        on2DPlannerBGClick(e);
+      }
+      touchMoveDetected = false;
+    },
+    children: [/*#__PURE__*/jsx("canvas", {
+      className: wcConfiguratorGrid2DCanvas,
+      id: "wcConfigurator-grid-2D-canvas"
+    }), /*#__PURE__*/jsx("div", {
+      className: grid2DBg,
+      style: {
+        zoom: uiHandler.get2DGridBackgroundState().zoom,
+        backgroundPosition: uiHandler.get2DGridBackgroundState().position.x + 'px ' + uiHandler.get2DGridBackgroundState().position.y + 'px'
+      }
+    })]
+  });
+};
+var Planner2DGrid$1 = observer(Planner2DGrid);
+
+export { Planner2DGrid$1 as default };

package/build/esm/index-cc69b748.js

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

package/build/esm/index-cd6643a7.js

@@ -0,0 +1,91 @@
+import { u as useViewHandler } from './index-d1cf8cb5.js';
+import 'react';
+import DivaUtils from '@crystaldesign/diva-utils';
+import Toggle from './index-7597a996.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+import 'classnames';
+import 'react-switch';
+
+var Varaint = function Varaint(_ref) {
+  var _item$variantValues;
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      userSelect: 'unset',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 20,
+      alignItems: 'center',
+      borderBottom: '1px solid grey',
+      justifyContent: 'space-between',
+      padding: 10
+    },
+    children: [/*#__PURE__*/jsx("button", {
+      onClick: item.onClick,
+      children: "konfigurieren"
+    }), /*#__PURE__*/jsx("div", {
+      children: item.index
+    }), (_item$variantValues = item.variantValues) === null || _item$variantValues === void 0 ? void 0 : _item$variantValues.map(function (item) {
+      return /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10
+        },
+        children: [item.optionValueImage && /*#__PURE__*/jsx("img", {
+          src: item.optionValueImage,
+          style: {
+            height: 40
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 5,
+            width: '150px'
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            children: item.optionName
+          }), /*#__PURE__*/jsx("div", {
+            children: item.optionValueName
+          })]
+        })]
+      }, item.opt);
+    }), /*#__PURE__*/jsx("div", {
+      children: item.title
+    }), /*#__PURE__*/jsx("div", {
+      children: DivaUtils.formatPrice(item.price)
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        alignSelf: 'flex-end'
+      },
+      children: /*#__PURE__*/jsx(Toggle, {
+        height: 32,
+        handleDiameter: 22,
+        width: 60,
+        onChange: function onChange() {
+          item.onToggle();
+          viewHandler.paletteViewHandler.updateCurPaletteData(true);
+        },
+        state: !item.disabled
+      })
+    })]
+  }, item.hash);
+};
+
+export { Varaint as default };

package/build/esm/index-ce290224.js

@@ -0,0 +1,68 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-d1cf8cb5.js';
+import { useState, useEffect } from 'react';
+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 '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var metaData = "meta-data-kJbmQ";
+var css_248z = ".meta-data-kJbmQ {\n  display: -webkit-box;\n  max-height: 64px;\n  min-height: 16px;\n  color: var(--secondaryColor);\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: var(--secondaryColor);\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var MetaData = function MetaData(_ref) {
+  var style = _ref.style,
+    metaData$1 = _ref.metaData,
+    _ref$visible = _ref.visible,
+    _ref$visible2 = _ref$visible === void 0 ? useState('') : _ref$visible,
+    _ref$visible3 = _slicedToArray(_ref$visible2, 2),
+    metaDataVisible = _ref$visible3[0],
+    setMetaDataVisible = _ref$visible3[1];
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  var displayMetaDatas = viewHandler.getViewConfig().displayMetaDatas;
+  var firstItem = metaData$1 === null || metaData$1 === void 0 ? void 0 : metaData$1.find(function (data) {
+    return displayMetaDatas === null || displayMetaDatas === void 0 ? void 0 : displayMetaDatas.includes(data.codex);
+  });
+  useEffect(function () {
+    if (!firstItem) return;
+    var textTmp = '';
+    for (var i = 0; i < firstItem.values.length; i++) {
+      if (textTmp !== '') textTmp = textTmp + ', ';
+      var _loop = function _loop(j) {
+        var data = metaData$1 === null || metaData$1 === void 0 ? void 0 : metaData$1.find(function (data) {
+          return data.codex === displayMetaDatas[j];
+        });
+        if (!data) return 1; // continue
+        if (textTmp !== '') textTmp = textTmp + ' ';
+        textTmp = textTmp + (data.name ? data.name + ': ' : '') + data.values[i];
+      };
+      for (var j = 0; j < displayMetaDatas.length; j++) {
+        if (_loop(j)) continue;
+      }
+    }
+    setText(textTmp);
+    setMetaDataVisible(textTmp);
+  }, []);
+  if (!metaDataVisible) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    style: style,
+    className: metaData,
+    children: text
+  });
+};
+
+export { MetaData as default };

package/build/esm/index-cf643c99.js

@@ -0,0 +1,91 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject } from './index-d1cf8cb5.js';
+import { observer } from 'mobx-react-lite';
+import AccessoiresStandard from './index-0e3c2cd5.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'react-laag';
+import './index-ce290224.js';
+import './index-3597db83.js';
+import './index-5a385b30.js';
+import './index-a7ea6eb0.js';
+import 'react-collapsible';
+import './index-1923a16f.js';
+import './index-6530f4ed.js';
+import 'sift';
+import './index-5a4bb156.js';
+import './index-b6fc62e8.js';
+import './index-0851e9ed.js';
+import './index-f8a5a44d.js';
+import './index-5127c3fb.js';
+import './index.module-6ae9d645.js';
+import './index-7597a996.js';
+import 'react-switch';
+import './index-6a88e5ea.js';
+import './index-2e424243.js';
+import 'react-dropdown';
+import './index-907c80de.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-93440a28.js';
+import './index-347b4bf3.js';
+import './index-48b042ed.js';
+import '@crystaldesign/content-box';
+import './index-cb21d6ef.js';
+import './index-ef07a66f.js';
+import './index-0031c7ba.js';
+import './index-67390e87.js';
+import './index-2727b72c.js';
+import './index-f21232f9.js';
+import './index-a43c7853.js';
+import './index-b302a054.js';
+import './index-eb106009.js';
+import './index-597a3ac8.js';
+import './index-a4c98ad6.js';
+import './index-dd47f326.js';
+import './index-6150b954.js';
+import './index-d58c6e8b.js';
+import './index.module-6c709213.js';
+import './index-84c2ad38.js';
+import './index-bab52a00.js';
+import './index-f16d5815.js';
+import './index-57111a6d.js';
+import './index-fb9abe0e.js';
+import './index-cd6643a7.js';
+import './index-f89a3960.js';
+import './index.module-19816615.js';
+import './index-b9d909cb.js';
+import './index-f6325409.js';
+
+var wcAccInfoContainer = "wcAccInfoContainer-gHZnB";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title--6avT";
+var wrapper = "wrapper-mM-Et";
+var css_248z = ".wcAccInfoContainer-gHZnB {\n  float: left;\n  position: relative;\n  height: 100%;\n  max-width: 160px;\n}\n\n.wcConfigurator-settings-title--6avT {\n  display: -webkit-box;\n  float: left;\n  max-height: 150px;\n  min-height: 16px;\n  margin-top: 8px;\n  max-width: 100%;\n  color: var(--secondaryColor);\n  font-size: 20px;\n  font-weight: 300;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n}\n\n.wcConfigurator-settings-title--6avT:hover {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  background: #fff;\n  z-index: 150;\n}\n\n.wrapper-mM-Et {\n  --infoIconSize: 22px;\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 AccessoiresSerious = function AccessoiresSerious(props) {
+  return /*#__PURE__*/jsx(AccessoiresStandard, _objectSpread(_objectSpread({}, props), {}, {
+    wcAccInfoContainerClass: wcAccInfoContainer,
+    wrapper: wrapper,
+    wcConfiguratorSettingsTitleClass: wcConfiguratorSettingsTitle,
+    hidePrice: true,
+    hideSize: true
+  }));
+};
+var index = observer(AccessoiresSerious);
+
+export { index as default };