@crystaldesign/diva-web-planner-react 26.7.0-rc.10 → 26.7.0-rc.12

package/build/esm/index-f3545035.js

@@ -0,0 +1,88 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-4d7dc1dc.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var title = "title-60AHO";
+var input = "input-jhc29";
+var css_248z = ".title-60AHO {\n  padding: 8px 0;\n  font-size: 14px;\n  font-weight: 500;\n  display: block;\n  width: 100%;\n  color: #2a4b63;\n  margin-bottom: 4px;\n}\n.input-jhc29 {\n  height: 20px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 16px;\n  border: rgb(228, 228, 231) solid 1px;\n  width: calc(100% - 28px);\n  box-sizing: content-box;\n}\n";
+styleInject(css_248z);
+
+var CustomInput = function CustomInput(_ref) {
+  var selectedRoom = _ref.selectedRoom;
+  var _useDivaCore = useDivaCore(),
+    user = _useDivaCore.state.user;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorMessage = _useState4[0],
+    setErrorMessage = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.aiState.setCustomPromptInput(value);
+  }, [value]);
+  useEffect(function () {
+    if (viewHandler.aiState.customPromptInput == value) return;
+    setValue(viewHandler.aiState.customPromptInput || '');
+  }, [viewHandler.aiState.customPromptInput]);
+  useEffect(function () {
+    var _viewHandler$aiState$;
+    if (!selectedRoom) return;
+    var hash = viewHandler.aiState.setHash;
+    var error = (_viewHandler$aiState$ = viewHandler.aiState.aiGenerationErrors[selectedRoom]) === null || _viewHandler$aiState$ === void 0 ? void 0 : _viewHandler$aiState$[hash];
+    setErrorMessage(error);
+  }, [selectedRoom, viewHandler.aiState.setHash, viewHandler.aiState.aiGenerationErrors]);
+  return /*#__PURE__*/jsxs("div", {
+    children: [!!user && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: title,
+        children: t('configurator.roomRendering.customPrompt')
+      }), /*#__PURE__*/jsx("input", {
+        className: input,
+        type: "text",
+        value: value,
+        onChange: function onChange(e) {
+          return setValue(e.target.value);
+        }
+      })]
+    }), errorMessage && /*#__PURE__*/jsx("div", {
+      style: {
+        marginTop: '8px',
+        padding: '8px',
+        background: 'rgba(255, 59, 48, 0.9)',
+        color: 'white',
+        borderRadius: '4px',
+        fontSize: '12px',
+        textAlign: 'center'
+      },
+      children: t(errorMessage)
+    })]
+  });
+};
+var CustomInput$1 = observer(CustomInput);
+
+export { CustomInput$1 as default };

package/build/esm/index-f38280ad.js

@@ -0,0 +1,85 @@
+import { s as styleInject, u as useViewHandler } from './index-4d7dc1dc.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, 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 optionTitleWrapper = "option-title-wrapper-nelTh";
+var optionTitle = "option-title-b23DF";
+var defined = "defined-9MId3";
+var current = "current-XPc15";
+var optionValue = "option-value-0dXL2";
+var suggested = "suggested-cnTpG";
+var required = "required-JhxVe";
+var disabled = "disabled-YODb1";
+var css_248z = ".option-title-wrapper-nelTh {\n  color: #fff;\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  padding: 8px 24px;\n  cursor: pointer;\n  transition: background-color ease 0.3s;\n  border-right: #5b798b 8px solid;\n  flex-wrap: wrap;\n  overflow: hidden;\n}\n\n.option-title-wrapper-nelTh:hover {\n  background-color: #4b6e84;\n}\n\n.option-title-b23DF {\n  font-weight: 600;\n}\n.defined-9MId3 {\n  border-right: #53ac00 8px solid;\n  background-color: #0d3040;\n}\n\n.defined-9MId3:hover {\n  background-color: #134054;\n}\n.current-XPc15 {\n  border-right: #edff2a 8px solid;\n  background-color: #1e455b;\n}\n.option-value-0dXL2 {\n  max-width: 70%;\n  overflow: hidden;\n}\n\n.suggested-cnTpG {\n  border-right: #ff958b 8px solid;\n}\n\n.required-JhxVe {\n  border-right: #ff2a2a 8px solid;\n}\n.disabled-YODb1 {\n  background-color: #9da7ad;\n}\n.option-title-wrapper-nelTh.disabled-YODb1:hover {\n  cursor: not-allowed;\n  background-color: #9da7ad;\n}\n";
+styleInject(css_248z);
+
+var OptionStepComponent = function OptionStepComponent(_ref) {
+  var _configStep$optionsta, _configStep$optionsta2, _configStep$optionsta3, _configStep$optionsta4, _configStep$optionsta5, _configStep$optionsta6, _configStep$optionsta7, _configStep$optionsta8;
+  var _ref$step = _ref.step,
+    option = _ref$step.option,
+    configStep = _ref$step.configStep;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var value = (_configStep$optionsta = configStep.optionstate) === null || _configStep$optionsta === void 0 ? void 0 : _configStep$optionsta.valName;
+  var isRequired = (_configStep$optionsta2 = configStep.optionstate) === null || _configStep$optionsta2 === void 0 ? void 0 : _configStep$optionsta2.isRequired;
+  var isSuggested = (_configStep$optionsta3 = configStep.optionstate) === null || _configStep$optionsta3 === void 0 ? void 0 : _configStep$optionsta3.isSuggested;
+  if ((_configStep$optionsta4 = configStep.optionstate) !== null && _configStep$optionsta4 !== void 0 && _configStep$optionsta4.isDifferentOption) {
+    value = 'divers';
+  } else if ((_configStep$optionsta5 = configStep.optionstate) !== null && _configStep$optionsta5 !== void 0 && _configStep$optionsta5.freeTextLang) {
+    var text = '';
+    var freetexts = configStep.optionstate.freeTextLang;
+    for (var key in freetexts) {
+      var _freetexts$key;
+      text += key + ': ' + ((_freetexts$key = freetexts[key]) !== null && _freetexts$key !== void 0 ? _freetexts$key : '') + ';';
+    }
+    if (text) value = text;
+  } else if ((_configStep$optionsta6 = configStep.optionstate) !== null && _configStep$optionsta6 !== void 0 && _configStep$optionsta6.freeText) {
+    value = configStep.optionstate.freeText + (!viewHandler.getViewConfig().hideMeasureUnit ? ' ' + configStep.optionstate.measureUnit : '');
+  } else if ((_configStep$optionsta7 = configStep.optionstate) !== null && _configStep$optionsta7 !== void 0 && _configStep$optionsta7.isMultiselect && (_configStep$optionsta8 = configStep.optionstate) !== null && _configStep$optionsta8 !== void 0 && (_configStep$optionsta8 = _configStep$optionsta8.multiSelects) !== null && _configStep$optionsta8 !== void 0 && _configStep$optionsta8.length) {
+    var _configStep$optionsta9, _configStep$optionsta10;
+    value = ((_configStep$optionsta9 = (_configStep$optionsta10 = configStep.optionstate) === null || _configStep$optionsta10 === void 0 ? void 0 : _configStep$optionsta10.multiSelects) !== null && _configStep$optionsta9 !== void 0 ? _configStep$optionsta9 : []).map(function (opv) {
+      return opv.name;
+    }).join(',');
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(optionTitleWrapper, viewHandler.configuratorStructureHandler.curOptionCodex === option.codex ? current : undefined, viewHandler.configStepAlreadyVisited(configStep) ? defined : undefined, configStep.isDisabledByDiverseParentOption ? disabled : undefined, isSuggested ? suggested : undefined, isRequired ? required : undefined),
+    title: configStep.isDisabledByDiverseParentOption ? t('configurator.disable_tabgroup_classification') : undefined,
+    onClick: function onClick() {
+      if (configStep.isDisabledByDiverseParentOption) return;
+      viewHandler.navigateToConfigStep(configStep.key);
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: optionTitle,
+      title: !configStep.isDisabledByDiverseParentOption ? option.codex : undefined,
+      children: option.title
+    }), /*#__PURE__*/jsx("div", {
+      className: optionValue,
+      title: !configStep.isDisabledByDiverseParentOption ? value : undefined,
+      children: value
+    })]
+  });
+};
+var ConfigStep = observer(OptionStepComponent);
+
+export { ConfigStep as default };

package/build/esm/index-f3e0ff43.js

@@ -0,0 +1,51 @@
+import { c as usePlannerUIHandler } from './index-4d7dc1dc.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var DPACC = function DPACC(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var iconIsSelected = plannerUIHandler.getDPUIISSelected(item);
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      plannerUIHandler.setDPUISelectionChanged(item, !iconIsSelected);
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.dpId, !iconIsSelected, item.dockToElementId);
+    },
+    style: {
+      left: item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, item.plannerMode == '2D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDocking : undefined, item.plannerMode == '2D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp2DAccNotDockingSel : undefined : undefined, item.plannerMode == '3D' ? item.dockingInfo == 'DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccDocking : plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDocking : undefined, item.plannerMode == '3D' ? iconIsSelected && item.dockingInfo == 'NOT_DOCKING' ? plannerUIProps.classes.dockingPoint.DPACC.dp3DAccNotDockingSel : undefined : undefined),
+    children: item.posNr
+  });
+};
+var DPACC$1 = observer(DPACC);
+
+export { DPACC$1 as default };

package/build/esm/index-f3f6e49b.js

@@ -0,0 +1,94 @@
+import { u as useViewHandler, T as Toggle } from './index-4d7dc1dc.js';
+import 'react';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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 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-f426af44.js

@@ -0,0 +1,177 @@
+import { s as styleInject, u as useViewHandler } from './index-4d7dc1dc.js';
+import 'react';
+import { Rnd } from 'react-rnd';
+import { jsxs, 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 container = "container-efJ5C";
+var header = "header-1CJv0";
+var headerTitle = "headerTitle-uXM2j";
+var closeBtn = "closeBtn-5GDgH";
+var body = "body-x-0by";
+var bodyScroll = "bodyScroll-7BmZx";
+var css_248z = ".container-efJ5C {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 6px;\n  overflow: hidden;\n  background: #fff;\n  z-index: 1500;\n}\n\n.header-1CJv0 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: #f3f3f3;\n  border-bottom: 1px solid #e0e0e0;\n  cursor: move;\n  flex-shrink: 0;\n}\n\n.headerTitle-uXM2j {\n  font-weight: 600;\n  font-size: 14px;\n}\n\n.closeBtn-5GDgH {\n  background: none;\n  border: none;\n  font-size: 20px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0 4px;\n  color: #666;\n}\n\n.closeBtn-5GDgH:hover {\n  color: #333;\n}\n\n.body-x-0by {\n  flex: 1 1 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.bodyScroll-7BmZx {\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n/* Dark mode – matches backoffice (portaled to body) */\nbody.darkmode .container-efJ5C {\n  background: rgb(20, 20, 20);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\nbody.darkmode .header-1CJv0 {\n  background: rgb(30, 30, 30);\n  border-bottom-color: rgba(255, 255, 255, 0.12);\n  color: rgb(255, 255, 255);\n}\n\nbody.darkmode .headerTitle-uXM2j {\n  color: rgb(255, 255, 255);\n}\n\nbody.darkmode .closeBtn-5GDgH {\n  color: rgba(255, 255, 255, 0.65);\n}\n\nbody.darkmode .closeBtn-5GDgH:hover {\n  color: rgb(255, 255, 255);\n}\n\nbody.darkmode .body-x-0by {\n  background: rgb(20, 20, 20);\n  color: rgb(255, 255, 255);\n}\n";
+styleInject(css_248z);
+
+var SNAP_THRESHOLD = 24;
+
+/** Snaps position to viewport edges when within threshold (dock-style snapping). */
+function getSnappedBounds(x, y, width, height) {
+  var vw = window.innerWidth;
+  var vh = window.innerHeight;
+  var nx = x;
+  var ny = y;
+  if (x <= SNAP_THRESHOLD) nx = 0;
+  if (x + width >= vw - SNAP_THRESHOLD) nx = Math.max(0, vw - width);
+  if (y <= SNAP_THRESHOLD) ny = 0;
+  if (y + height >= vh - SNAP_THRESHOLD) ny = Math.max(0, vh - height);
+  return {
+    x: nx,
+    y: ny
+  };
+}
+/** Resize handle styles – positioned inside the container so they are not clipped by overflow:hidden. */
+var resizeHandleStyles = {
+  top: {
+    top: 0,
+    height: 12
+  },
+  right: {
+    right: 0,
+    left: 'auto',
+    width: 12
+  },
+  bottom: {
+    bottom: 0,
+    top: 'auto',
+    height: 12
+  },
+  left: {
+    left: 0,
+    width: 12
+  },
+  topRight: {
+    top: 0,
+    right: 0,
+    left: 'auto',
+    bottom: 'auto',
+    width: 16,
+    height: 16
+  },
+  bottomRight: {
+    bottom: 0,
+    right: 0,
+    left: 'auto',
+    top: 'auto',
+    width: 16,
+    height: 16
+  },
+  bottomLeft: {
+    bottom: 0,
+    left: 0,
+    right: 'auto',
+    top: 'auto',
+    width: 16,
+    height: 16
+  },
+  topLeft: {
+    top: 0,
+    left: 0,
+    right: 'auto',
+    bottom: 'auto',
+    width: 16,
+    height: 16
+  }
+};
+var FloatingWindow = function FloatingWindow(_ref) {
+  var windowType = _ref.windowType,
+    title = _ref.title,
+    bounds = _ref.bounds,
+    children = _ref.children;
+  var viewHandler = useViewHandler();
+  var handleDragStop = function handleDragStop(_e, d) {
+    var snapped = getSnappedBounds(d.x, d.y, bounds.width, bounds.height);
+    viewHandler.wysiwygDebugState.updateWysiwygWindowBounds(windowType, snapped);
+  };
+  var handleResizeStop = function handleResizeStop(_e, _direction, ref, _delta, position) {
+    var _ref$style$width, _ref$style$height;
+    var width = parseInt((_ref$style$width = ref.style.width) !== null && _ref$style$width !== void 0 ? _ref$style$width : String(bounds.width), 10);
+    var height = parseInt((_ref$style$height = ref.style.height) !== null && _ref$style$height !== void 0 ? _ref$style$height : String(bounds.height), 10);
+    viewHandler.wysiwygDebugState.updateWysiwygWindowBounds(windowType, {
+      x: position.x,
+      y: position.y,
+      width: width,
+      height: height
+    });
+  };
+  var handleClose = function handleClose() {
+    viewHandler.wysiwygDebugState.removeWysiwygWindow(windowType);
+  };
+  return /*#__PURE__*/jsxs(Rnd, {
+    position: {
+      x: bounds.x,
+      y: bounds.y
+    },
+    size: {
+      width: bounds.width,
+      height: bounds.height
+    },
+    onDragStop: function onDragStop(e, d) {
+      return handleDragStop(e, d);
+    },
+    onResizeStop: handleResizeStop,
+    dragHandleClassName: header,
+    minWidth: 280,
+    minHeight: 200,
+    className: container,
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    bounds: "window",
+    resizeHandleStyles: resizeHandleStyles,
+    resizeHandleWrapperStyle: {
+      zIndex: 1000
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      className: header,
+      children: [/*#__PURE__*/jsx("span", {
+        className: headerTitle,
+        children: title
+      }), /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: closeBtn,
+        onClick: handleClose,
+        "aria-label": "Close",
+        children: "\xD7"
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: body,
+      children: /*#__PURE__*/jsx("div", {
+        className: bodyScroll,
+        children: children
+      })
+    })]
+  });
+};
+
+export { FloatingWindow as default };

package/build/esm/index-f4c5add5.js

@@ -0,0 +1,104 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-4d7dc1dc.js';
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Grid } from 'swiper/modules';
+import ConceptItem from './index-bc7a17c3.js';
+import classnames from 'classnames';
+import Collapsible from 'react-collapsible';
+import CollapsibleTrigger from './index-ec46cc93.js';
+import InfoBanner from './index-85368fc9.js';
+import { jsxs, 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/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';
+import './index-5f817477.js';
+
+var collapsible = "collapsible-RtG0L";
+var collapsibleContentInner = "collapsible-content-inner-pCgwK";
+var conceptFilter = "concept-filter-oYrcv";
+var conceptFilterSwiper = "concept-filter-swiper-l7E-n";
+var css_248z = ".collapsible-RtG0L {\n  margin-bottom: 16px;\n}\n\n.collapsible-content-inner-pCgwK {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-top: 16px;\n  justify-content: center;\n  align-items: center;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 4px;\n}\n\n/*grid css*/\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-grid > .swiper-wrapper {\n  flex-wrap: wrap;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-grid-column > .swiper-wrapper {\n  flex-wrap: wrap;\n  flex-direction: column;\n  height: 198px;\n}\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-android .swiper-slide,\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-autoheight,\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.concept-filter-oYrcv.concept-filter-swiper-l7E-n .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
+styleInject(css_248z);
+
+var ConceptFilter = function ConceptFilter(_ref) {
+  var genericConceptItems = _ref.genericConceptItems,
+    bannerTitle = _ref.bannerTitle,
+    bannerText = _ref.bannerText,
+    _onClose = _ref.onClose;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    swiperRef = _useState2[0],
+    setSwiperRef = _useState2[1];
+  var navigateToOnClick = function navigateToOnClick(index) {
+    swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(index);
+  };
+  return /*#__PURE__*/jsxs(Collapsible, {
+    open: true,
+    className: collapsible,
+    trigger: /*#__PURE__*/jsx(CollapsibleTrigger, {
+      open: false
+    }),
+    triggerWhenOpen: /*#__PURE__*/jsx(CollapsibleTrigger, {
+      open: true
+    }),
+    contentInnerClassName: collapsibleContentInner,
+    easing: "ease-out",
+    onClose: function onClose() {
+      _onClose === null || _onClose === void 0 || _onClose();
+    },
+    children: [/*#__PURE__*/jsx(InfoBanner, {
+      title: bannerTitle,
+      text: bannerText
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(conceptFilterSwiper, conceptFilter),
+      children: /*#__PURE__*/jsx(Swiper, {
+        onSwiper: setSwiperRef,
+        resizeObserver: true,
+        modules: [Navigation, Grid],
+        style: {
+          width: 'fit-content'
+        },
+        spaceBetween: 8,
+        scrollbar: true,
+        slideToClickedSlide: true,
+        wrapperClass: "no-swiping",
+        slidesPerView: 3,
+        grid: {
+          rows: 2
+        },
+        children: genericConceptItems.map(function (e, index) {
+          return /*#__PURE__*/jsx(SwiperSlide, {
+            onClick: function onClick(e) {
+              var clickRow = (index - index % 2) / 2;
+              var rowToNavigateTo = clickRow - 1;
+              navigateToOnClick(rowToNavigateTo >= 0 ? rowToNavigateTo : 0);
+              e.stopPropagation();
+            },
+            children: /*#__PURE__*/jsx(ConceptItem, {
+              item: e
+            }, e.key)
+          }, index);
+        })
+      })
+    })]
+  });
+};
+var ConceptGallery = observer(ConceptFilter);
+
+export { ConceptGallery as default };