@crystaldesign/quick-config 26.3.0-beta.3 → 26.3.0-beta.30

package/build/cjs/index.js

@@ -0,0 +1,2107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var divaCore = require('@crystaldesign/diva-core');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var jsxRuntime = require('react/jsx-runtime');
+var _typeof = require('@babel/runtime/helpers/typeof');
+var classNames = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
+var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+(function() {
+    const env = {"STAGE":"production"};
+    try {
+        if (process) {
+            process.env = Object.assign({}, process.env);
+            Object.assign(process.env, env);
+            return;
+        }
+    } catch (e) {} // avoid ReferenceError: process is not defined
+    globalThis.process = { env:env };
+})();
+
+/**
+ * Utility functions for QuickConfig
+ */
+
+/**
+ * Get translated text with fallback
+ */
+function getTranslatedText(translations, language, fallbackCodex) {
+  return translations[language] || translations.en || translations.de || fallbackCodex || '';
+}
+
+/**
+ * Validate QuickConfig definition
+ */
+function validateQuickConfig(config) {
+  var _config$features;
+  var errors = [];
+  if (!config.codex) {
+    errors.push('QuickConfig must have a codex');
+  }
+  if (!config.name || Object.keys(config.name).length === 0) {
+    errors.push('QuickConfig must have at least one language for name');
+  }
+  if (!config.features || config.features.length === 0) {
+    errors.push('QuickConfig must have at least one feature');
+  }
+
+  // Validate features
+  (_config$features = config.features) === null || _config$features === void 0 || _config$features.forEach(function (feature, index) {
+    var _feature$options;
+    if (!feature.codex) {
+      errors.push("Feature at index ".concat(index, " must have a codex"));
+    }
+    if (!feature.label || Object.keys(feature.label).length === 0) {
+      errors.push("Feature ".concat(feature.codex || index, " must have at least one language for label"));
+    }
+    if (!feature.layout) {
+      errors.push("Feature ".concat(feature.codex || index, " must have a layout"));
+    }
+    if (!feature.options || feature.options.length === 0) {
+      errors.push("Feature ".concat(feature.codex || index, " must have at least one option"));
+    }
+
+    // Validate options
+    (_feature$options = feature.options) === null || _feature$options === void 0 || _feature$options.forEach(function (option, optIndex) {
+      if (!option.codex) {
+        errors.push("Option at index ".concat(optIndex, " in feature ").concat(feature.codex || index, " must have a codex"));
+      }
+      if (!option.type) {
+        errors.push("Option ".concat(option.codex || optIndex, " must have a type"));
+      }
+      if (option.type === 'range' && !option.range) {
+        errors.push("Range option ".concat(option.codex || optIndex, " must have range configuration"));
+      }
+    });
+  });
+  return errors;
+}
+
+/**
+ * Evaluates a condition against the current user selections
+ */
+var ConditionEvaluator = /*#__PURE__*/function () {
+  function ConditionEvaluator(selections) {
+    _classCallCheck__default["default"](this, ConditionEvaluator);
+    _defineProperty__default["default"](this, "selections", void 0);
+    this.selections = new Map(selections.map(function (s) {
+      return [s.featureCodex, s.selectedOptions];
+    }));
+  }
+
+  /**
+   * Main evaluation method
+   */
+  return _createClass__default["default"](ConditionEvaluator, [{
+    key: "evaluate",
+    value: function evaluate(condition) {
+      if (this.isAndCondition(condition)) {
+        return this.evaluateAnd(condition);
+      }
+      if (this.isOrCondition(condition)) {
+        return this.evaluateOr(condition);
+      }
+      if (this.isNotCondition(condition)) {
+        return this.evaluateNot(condition);
+      }
+      return this.evaluateSingleCondition(condition);
+    }
+
+    /**
+     * Type guards
+     */
+  }, {
+    key: "isAndCondition",
+    value: function isAndCondition(condition) {
+      return 'and' in condition;
+    }
+  }, {
+    key: "isOrCondition",
+    value: function isOrCondition(condition) {
+      return 'or' in condition;
+    }
+  }, {
+    key: "isNotCondition",
+    value: function isNotCondition(condition) {
+      return 'not' in condition;
+    }
+
+    /**
+     * Evaluate logical operators
+     */
+  }, {
+    key: "evaluateAnd",
+    value: function evaluateAnd(condition) {
+      var _this = this;
+      return condition.and.every(function (c) {
+        return _this.evaluateSingleCondition(c);
+      });
+    }
+  }, {
+    key: "evaluateOr",
+    value: function evaluateOr(condition) {
+      var _this2 = this;
+      return condition.or.some(function (c) {
+        return _this2.evaluateSingleCondition(c);
+      });
+    }
+  }, {
+    key: "evaluateNot",
+    value: function evaluateNot(condition) {
+      return !this.evaluate(condition.not);
+    }
+
+    /**
+     * Evaluate a single condition
+     */
+  }, {
+    key: "evaluateSingleCondition",
+    value: function evaluateSingleCondition(condition) {
+      var selectedValues = this.selections.get(condition.featureCodex);
+
+      // If feature not selected yet, condition is false
+      if (!selectedValues || selectedValues.length === 0) {
+        return false;
+      }
+      switch (condition.operator) {
+        case 'eq':
+          return selectedValues.some(function (v) {
+            return v === condition.value;
+          });
+        case 'ne':
+          return !selectedValues.some(function (v) {
+            return v === condition.value;
+          });
+        case 'in':
+          return selectedValues.some(function (v) {
+            return condition.value.includes(v);
+          });
+        case 'nin':
+          return !selectedValues.some(function (v) {
+            return condition.value.includes(v);
+          });
+        default:
+          return false;
+      }
+    }
+
+    /**
+     * Utility method to check if a feature should be visible
+     */
+  }], [{
+    key: "shouldShowFeature",
+    value: function shouldShowFeature(feature, selections) {
+      if (!feature.condition) {
+        return true;
+      }
+      var evaluator = new ConditionEvaluator(selections);
+      return evaluator.evaluate(feature.condition);
+    }
+
+    /**
+     * Utility method to check if an option should be visible
+     */
+  }, {
+    key: "shouldShowOption",
+    value: function shouldShowOption(option, selections) {
+      if (!option.condition) {
+        return true;
+      }
+      var evaluator = new ConditionEvaluator(selections);
+      return evaluator.evaluate(option.condition);
+    }
+
+    /**
+     * Utility method to check if an instance should be visible
+     */
+  }, {
+    key: "shouldShowInstance",
+    value: function shouldShowInstance(instance, selections) {
+      if (!instance.condition) {
+        return true;
+      }
+      var evaluator = new ConditionEvaluator(selections);
+      return evaluator.evaluate(instance.condition);
+    }
+  }]);
+}();
+
+var useOptionRenderer = function useOptionRenderer(_ref) {
+  var feature = _ref.feature,
+    selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    selections = _ref.selections;
+  var _useTranslation = divaCore.useTranslation(),
+    i18n = _useTranslation.i18n;
+  var language = i18n.language;
+  // Filter visible options based on conditions
+  var visibleOptions = react.useMemo(function () {
+    return feature.options.filter(function (option) {
+      return ConditionEvaluator.shouldShowOption(option, selections);
+    });
+  }, [feature.options, selections]);
+  var selectOptions = react.useMemo(function () {
+    return visibleOptions.filter(function (o) {
+      return o.type === 'select';
+    });
+  }, [visibleOptions]);
+  var rangeOption = react.useMemo(function () {
+    return visibleOptions.find(function (o) {
+      return o.type === 'range';
+    });
+  }, [visibleOptions]);
+  var handleSingleSelect = react.useCallback(function (optionCodex) {
+    onSelect([optionCodex]);
+  }, [onSelect]);
+  var handleMultiSelect = react.useCallback(function (optionCodex) {
+    if (selectedOptions.includes(optionCodex)) {
+      onSelect(selectedOptions.filter(function (o) {
+        return o !== optionCodex;
+      }));
+    } else {
+      onSelect([].concat(_toConsumableArray__default["default"](selectedOptions), [optionCodex]));
+    }
+  }, [selectedOptions, onSelect]);
+  var getOptionLabel = react.useCallback(function (option) {
+    return option.label[language] || option.label.en || option.label.de || option.codex;
+  }, [language]);
+  var getOptionDescription = react.useCallback(function (option) {
+    var _option$description, _option$description2, _option$description3;
+    return ((_option$description = option.description) === null || _option$description === void 0 ? void 0 : _option$description[language]) || ((_option$description2 = option.description) === null || _option$description2 === void 0 ? void 0 : _option$description2.en) || ((_option$description3 = option.description) === null || _option$description3 === void 0 ? void 0 : _option$description3.de);
+  }, [language]);
+  var getOptionCaption = react.useCallback(function (option) {
+    var _option$caption, _option$caption2, _option$caption3;
+    return ((_option$caption = option.caption) === null || _option$caption === void 0 ? void 0 : _option$caption[language]) || ((_option$caption2 = option.caption) === null || _option$caption2 === void 0 ? void 0 : _option$caption2.en) || ((_option$caption3 = option.caption) === null || _option$caption3 === void 0 ? void 0 : _option$caption3.de);
+  }, [language]);
+  return {
+    visibleOptions: visibleOptions,
+    selectOptions: selectOptions,
+    rangeOption: rangeOption,
+    handleSingleSelect: handleSingleSelect,
+    handleMultiSelect: handleMultiSelect,
+    getOptionLabel: getOptionLabel,
+    getOptionDescription: getOptionDescription,
+    getOptionCaption: getOptionCaption
+  };
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var container = "container-nN2kI";
+var subContainer = "subContainer-x97eX";
+var stickyHeader = "stickyHeader-V5orv";
+var featureContainer = "featureContainer-cTJH8";
+var featureLabel = "featureLabel-q4sHn";
+var featureRequired = "featureRequired-tby4F";
+var featureDescription = "featureDescription-k4v-p";
+var optionDescription = "optionDescription-omLcU";
+var progressText = "progressText-LXaM7";
+var configDescription = "configDescription--0UjU";
+var resultDescription = "resultDescription-7jW2U";
+var optionsBox = "optionsBox-TBnRq";
+var optionsGallery = "optionsGallery-72aVW";
+var optionButton = "optionButton-tRXEs";
+var radioOption = "radioOption-sv3m6";
+var checkboxOption = "checkboxOption-UY3nL";
+var optionButtonSelected = "optionButtonSelected-pjY9O";
+var radioOptionSelected = "radioOptionSelected-vm6bN";
+var checkboxOptionSelected = "checkboxOptionSelected-DuZGL";
+var optionLabel = "optionLabel-oz4Zj";
+var optionCaption = "optionCaption-3d-V1";
+var optionContent = "optionContent-DS9Wc";
+var progressBar = "progressBar-RKPZp";
+var progressBarFill = "progressBarFill--Shc9";
+var progressBarInner = "progressBarInner-agBx-";
+var slider = "slider-ev57L";
+var sliderInput = "sliderInput-xAXVM";
+var sliderValue = "sliderValue-vwwNn";
+var dropdown = "dropdown-fst7q";
+var radio = "radio-GesCu";
+var checkbox = "checkbox-xI7lT";
+var toggle = "toggle-fi2uF";
+var toggleButton = "toggleButton-4myWl";
+var toggleButtonSelected = "toggleButtonSelected-4SMtn";
+var resultContainer = "resultContainer-sc6De";
+var resultItem = "resultItem-84scA";
+var resultKey = "resultKey-qD5DS";
+var resultValue = "resultValue-42tes";
+var buttonContainer = "buttonContainer-UZKoO";
+var navLeftGroup = "navLeftGroup-JOQ3N";
+var navRightGroup = "navRightGroup-mWCAz";
+var navButtonPadding = "navButtonPadding-aX9-f";
+var button = "button-CT3BR";
+var buttonPrimary = "buttonPrimary-b3Tur";
+var buttonPrimaryApplied = "buttonPrimaryApplied-90Q5-";
+var headerContainer = "headerContainer-fhFhh";
+var tabWrapper = "tabWrapper-ZqpAa";
+var tabSlider = "tabSlider-d133A";
+var tab = "tab-Cf5O4";
+var tabActive = "tabActive-B4W84";
+var buttonSecondary = "buttonSecondary-Fs2ci";
+var buttonWithArrow = "buttonWithArrow-PQQFS";
+var closeButton = "closeButton-Regwf";
+var resultsGrid = "resultsGrid-s3UTE";
+var speedometer = "speedometer-kKRJQ";
+var speedometerGroup = "speedometerGroup-SS-GT";
+var speedometerGroupTitle = "speedometerGroupTitle-4s2YI";
+var speedometerGroupGrid = "speedometerGroupGrid-SNMAM";
+var speedometerGroupItem = "speedometerGroupItem-a4T-A";
+var speedometerGroupItemTitle = "speedometerGroupItemTitle-N35gZ";
+var contentSection = "contentSection-dJgsX";
+var css_248z = ".container-nN2kI {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n\n  max-height: calc(100vh - 40px);\n  padding: 12px;\n  box-sizing: border-box;\n  overflow: auto;\n}\n\n@supports (height: 100dvh) {\n  .container-nN2kI {\n    max-height: calc(100dvh - 40px);\n  }\n}\n\n.subContainer-x97eX {\n  flex: 1;\n  padding: 12px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.mobile .subContainer-x97eX {\n  padding: 12px 0;\n  gap: 4px;\n}\n\n.stickyHeader-V5orv {\n  position: sticky;\n  top: -12px;\n  z-index: 10;\n  background: #fff;\n  margin: -12px -12px 0 -12px;\n  padding: 12px 12px 0 12px;\n}\n\n.stickyHeaderSticky-5qqWo {\n  position: sticky;\n  top: -12px;\n  z-index: 10;\n  background: #fff;\n  margin: -12px -12px 0 -12px;\n  padding: 12px 12px 0 12px;\n}\n\n.darkmode .stickyHeader-V5orv {\n  background: #1a1a1a;\n}\n\n.featureContainer-cTJH8 {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.featureLabel-q4sHn {\n  font-size: 18px;\n  font-weight: 600;\n  margin-bottom: 10px;\n  word-wrap: break-word;\n}\n\n.featureRequired-tby4F {\n  color: red;\n}\n\n.featureDescription-k4v-p,\n.optionDescription-omLcU,\n.progressText-LXaM7 {\n  color: #666;\n}\n\n.darkmode .featureDescription-k4v-p,\n.darkmode .optionDescription-omLcU,\n.darkmode .progressText-LXaM7 {\n  color: #aaa;\n}\n\n.featureDescription-k4v-p {\n  font-size: 14px;\n  margin-bottom: 15px;\n  word-wrap: break-word;\n}\n\n.configDescription--0UjU,\n.resultDescription-7jW2U {\n  font-size: 15px;\n  color: #666;\n  margin: 12px 0 0 0;\n  word-wrap: break-word;\n}\n\n.mobile .configDescription--0UjU,\n.mobile .resultDescription-7jW2U {\n  font-size: 14px;\n  margin: 8px 0 0 0;\n}\n\n.darkmode .configDescription--0UjU,\n.darkmode .resultDescription-7jW2U {\n  color: #aaa;\n}\n\n.optionsContainer-oIEc3 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.optionsBox-TBnRq {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n  grid-gap: 10px;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.optionsGallery-72aVW {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-gap: 15px;\n  gap: 15px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n/* Shared selectable option base (optionButton, radioOption, checkboxOption) */\n.optionButton-tRXEs,\n.radioOption-sv3m6,\n.checkboxOption-UY3nL {\n  padding: 12px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 0;\n}\n\n.optionButton-tRXEs {\n  padding: 15px;\n  text-align: left;\n}\n\n.radioOption-sv3m6,\n.checkboxOption-UY3nL {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.darkmode .optionButton-tRXEs,\n.darkmode .radioOption-sv3m6,\n.darkmode .checkboxOption-UY3nL {\n  border-color: #444;\n  background: #2a2a2a;\n}\n\n.optionButton-tRXEs:hover,\n.radioOption-sv3m6:hover,\n.checkboxOption-UY3nL:hover {\n  border-color: #999;\n  background: #f9f9f9;\n}\n\n.darkmode .optionButton-tRXEs:hover,\n.darkmode .radioOption-sv3m6:hover,\n.darkmode .checkboxOption-UY3nL:hover {\n  border-color: #666;\n  background: #333;\n}\n\n.optionButtonSelected-pjY9O,\n.radioOptionSelected-vm6bN,\n.checkboxOptionSelected-DuZGL {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-light);\n}\n\n.darkmode .optionButtonSelected-pjY9O,\n.darkmode .radioOptionSelected-vm6bN,\n.darkmode .checkboxOptionSelected-DuZGL {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.optionButtonSelected-pjY9O:hover,\n.radioOptionSelected-vm6bN:hover,\n.checkboxOptionSelected-DuZGL:hover {\n  border-color: var(--diva-theme-palette-primary-dark);\n  background: var(--diva-theme-palette-primary-light);\n}\n\n.darkmode .optionButtonSelected-pjY9O:hover,\n.darkmode .radioOptionSelected-vm6bN:hover,\n.darkmode .checkboxOptionSelected-DuZGL:hover {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.optionLabel-oz4Zj {\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-self: start;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  word-wrap: break-word;\n}\n\n.optionCaption-3d-V1 {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  font-weight: normal;\n  text-align: center;\n}\n\n.optionContent-DS9Wc {\n  min-width: 0;\n  flex: 1;\n}\n\n.optionDescription-omLcU {\n  font-size: 12px;\n  min-width: 0;\n  word-wrap: break-word;\n}\n\n.progressBar-RKPZp {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n  border-bottom: 1px solid #ddd;\n}\n\n.darkmode .progressBar-RKPZp {\n  border-bottom-color: #444;\n}\n\n.progressBarFill--Shc9 {\n  flex: 1;\n  height: 6px;\n  background: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.darkmode .progressBarFill--Shc9 {\n  background: #444;\n}\n\n.progressBarInner-agBx- {\n  height: 100%;\n  background: var(--diva-theme-palette-primary-main);\n  transition: width 0.3s ease;\n}\n\n.progressText-LXaM7 {\n  font-size: 14px;\n  white-space: nowrap;\n}\n\n.backButton-qRYLD {\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  background: #fff;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.darkmode .backButton-qRYLD {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.backButton-qRYLD:hover {\n  background: #f5f5f5;\n}\n\n.darkmode .backButton-qRYLD:hover {\n  background: #333;\n}\n\n.slider-ev57L {\n  width: 100%;\n  margin: 20px 0;\n}\n\n.sliderInput-xAXVM {\n  width: 100%;\n  height: 6px;\n  border-radius: 3px;\n  background: #e0e0e0;\n  outline: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n       appearance: none;\n}\n\n.darkmode .sliderInput-xAXVM {\n  background: #444;\n}\n\n.sliderInput-xAXVM::-webkit-slider-thumb,\n.sliderInput-xAXVM::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--diva-theme-palette-primary-main);\n  cursor: pointer;\n  border: none;\n}\n\n.sliderInput-xAXVM::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.sliderValue-vwwNn {\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  margin-top: 10px;\n}\n\n.dropdown-fst7q {\n  width: 100%;\n  padding: 12px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  font-size: 16px;\n  background: #fff;\n  cursor: pointer;\n}\n\n.darkmode .dropdown-fst7q {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.radio-GesCu {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.checkbox-xI7lT {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.toggle-fi2uF {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.toggleButton-4myWl {\n  flex: 1;\n  min-width: 120px;\n  padding: 15px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  transition: all 0.2s;\n  text-align: center;\n  font-weight: 500;\n}\n\n.darkmode .toggleButton-4myWl {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.toggleButton-4myWl:hover {\n  border-color: #999;\n  background: #f9f9f9;\n}\n\n.darkmode .toggleButton-4myWl:hover {\n  border-color: #666;\n  background: #333;\n}\n\n.toggleButtonSelected-4SMtn {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.toggleButtonSelected-4SMtn:hover {\n  border-color: var(--diva-theme-palette-primary-dark);\n  background: var(--diva-theme-palette-primary-dark);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.resultContainer-sc6De {\n}\n\n.mobile .resultContainer-sc6De {\n  padding: 4px;\n}\n\n.resultItem-84scA {\n  display: flex;\n  justify-content: space-between;\n  padding: 15px;\n  margin-bottom: 10px;\n  background: #f5f5f5;\n  border-radius: 8px;\n}\n\n.darkmode .resultItem-84scA {\n  background: #2a2a2a;\n}\n\n.resultKey-qD5DS {\n  font-weight: 600;\n}\n\n.resultValue-42tes {\n  color: var(--diva-theme-palette-primary-main);\n  font-weight: 500;\n}\n\n.buttonContainer-UZKoO {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  padding: 20px 0;\n  border-top: 1px solid #ddd;\n}\n\n.navLeftGroup-JOQ3N {\n  display: flex;\n  gap: 10px;\n  flex: 1;\n}\n\n.navRightGroup-mWCAz {\n  display: flex;\n  gap: 10px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  flex-grow: 1;\n}\n\n.navButtonPadding-aX9-f {\n  padding: 10px 20px;\n}\n\n.darkmode .buttonContainer-UZKoO {\n  border-top-color: #444;\n}\n\n.button-CT3BR {\n  padding: 10px 20px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n  color: #000;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.darkmode .button-CT3BR {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.button-CT3BR:hover:not(:disabled) {\n  background: #f5f5f5;\n  border-color: #999;\n}\n\n.darkmode .button-CT3BR:hover:not(:disabled) {\n  background: #333;\n  border-color: #666;\n}\n\n.button-CT3BR:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonPrimary-b3Tur {\n  background: var(--diva-theme-palette-primary-main);\n  border-color: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.buttonPrimary-b3Tur:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n}\n\n.buttonPrimaryApplied-90Q5- {\n  background: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n}\n\n.buttonCancel-HA74N {\n  background: transparent;\n  border-color: #ddd;\n  color: #666;\n}\n\n.darkmode .buttonCancel-HA74N {\n  border-color: #444;\n  color: #aaa;\n}\n\n.buttonCancel-HA74N:hover:not(:disabled) {\n  background: #f5f5f5;\n  border-color: #999;\n  color: #333;\n}\n\n.darkmode .buttonCancel-HA74N:hover:not(:disabled) {\n  background: #333;\n  border-color: #666;\n  color: white;\n}\n\n.headerContainer-fhFhh {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  margin-bottom: 4px;\n  position: relative;\n}\n\n.darkmode .headerContainer-fhFhh {\n  border-bottom-color: #333;\n}\n\n/* Segmented control style tabs */\n.tabWrapper-ZqpAa {\n  --tab-count: 2;\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  max-width: min(360px, 80%);\n  min-width: 0;\n  background: #f0f0f0;\n  border-radius: 10px;\n  padding: 3px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.darkmode .tabWrapper-ZqpAa {\n  background: #333;\n}\n\n.tabSlider-d133A {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: calc((100% - 6px) / var(--tab-count));\n  height: calc(100% - 6px);\n  background: #fff;\n  border-radius: 7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 0.25s ease;\n  pointer-events: none;\n}\n\n.darkmode .tabSlider-d133A {\n  background: #404040;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tab-Cf5O4 {\n  flex: 1;\n  min-width: 0;\n  padding: 8px 16px;\n  border: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 500;\n  color: #666;\n  transition: color 0.25s ease;\n  position: relative;\n  z-index: 1;\n  text-align: center;\n}\n\n.tab-Cf5O4:focus,\n.tab-Cf5O4.focus-visible-kxYL6,\n.tab-Cf5O4:hover,\n.tab-Cf5O4:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.tab-Cf5O4:focus,\n.tab-Cf5O4:focus-visible,\n.tab-Cf5O4:hover,\n.tab-Cf5O4:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.darkmode .tab-Cf5O4 {\n  color: #999;\n}\n\n.tabActive-B4W84 {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.tab-Cf5O4:hover:not(.tabActive-B4W84) {\n  color: #333;\n}\n\n.darkmode .tab-Cf5O4:hover:not(.tabActive-B4W84) {\n  color: #ccc;\n}\n\n.instanceNavContainer-0U7gZ {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 32px;\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  border: none;\n}\n\n.darkmode .instanceNavContainer-0U7gZ {\n  background: transparent;\n  border-color: transparent;\n}\n\n.instanceNavButtons-HMFdy {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.buttonSecondary-Fs2ci {\n  background: #fff;\n  border: 1px solid var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-main);\n  font-size: 14px;\n}\n\n.darkmode .buttonSecondary-Fs2ci {\n  background: transparent;\n  border-color: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.buttonSecondary-Fs2ci:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-light);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.darkmode .buttonSecondary-Fs2ci:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--diva-theme-palette-primary-main) 10%, transparent);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.buttonWithArrow-PQQFS {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 24px;\n  font-size: 16px;\n  border-radius: 8px;\n  height: auto;\n  text-align: left;\n  flex: 1;\n  min-width: 250px;\n}\n\n.closeButton-Regwf {\n  position: absolute;\n  right: -8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: rgba(255,255,255,0.8);\n  border-radius: 50%;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #949daf;\n  transition: color 0.2s;\n}\n\n.closeButton-Regwf:focus,\n.closeButton-Regwf.focus-visible-kxYL6,\n.closeButton-Regwf:hover,\n.closeButton-Regwf:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.closeButton-Regwf:focus,\n.closeButton-Regwf:focus-visible,\n.closeButton-Regwf:hover,\n.closeButton-Regwf:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.closeButton-Regwf:hover {\n  color: #333;\n}\n\n.darkmode .closeButton-Regwf:hover {\n  color: #fff;\n}\n\n/* Mobile Smaller Version */\n.mobile .container-nN2kI {\n  padding: 12px;\n}\n\n.mobile .subContainer-x97eX {\n  padding: 12px 0;\n}\n\n.mobile .featureLabel-q4sHn {\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n\n.mobile .featureDescription-k4v-p {\n  font-size: 13px;\n  margin-bottom: 10px;\n}\n\n.mobile .optionButton-tRXEs {\n  padding: 10px;\n}\n\n.mobile .optionLabel-oz4Zj {\n  gap: 3px;\n}\n\n.mobile .optionDescription-omLcU {\n  font-size: 11px;\n}\n\n.mobile .progressBar-RKPZp {\n  gap: 8px;\n  margin-bottom: 15px;\n  padding-bottom: 10px;\n}\n\n.mobile .progressText-LXaM7 {\n  font-size: 12px;\n}\n\n.mobile .backButton-qRYLD {\n  padding: 6px 10px;\n  font-size: 13px;\n}\n\n.mobile .sliderValue-vwwNn {\n  font-size: 14px;\n}\n\n.mobile .dropdown-fst7q {\n  padding: 10px;\n  font-size: 14px;\n}\n\n.mobile .radioOption-sv3m6,\n.mobile .checkboxOption-UY3nL {\n  padding: 10px;\n}\n\n.mobile .toggleButton-4myWl {\n  padding: 10px;\n  min-width: 90px;\n}\n\n.mobile .resultContainer-sc6De {\n  padding: 0px;\n}\n\n.mobile .resultTitle-WVM2- {\n  font-size: 20px;\n  margin-bottom: 15px;\n}\n\n.mobile .resultItem-84scA {\n  padding: 10px;\n}\n\n.mobile .buttonContainer-UZKoO {\n  padding: 8px 0;\n  margin-top: 6px;\n}\n\n.mobile .button-CT3BR {\n  padding: 8px 16px;\n  font-size: 13px;\n}\n\n.mobile .tab-Cf5O4 {\n  padding: 6px 12px;\n  font-size: 14px;\n}\n\n.mobile .instanceNavContainer-0U7gZ {\n  padding: 10px;\n}\n\n.resultsGrid-s3UTE {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 30px;\n}\n\n.speedometer-kKRJQ {\n  width: 100%;\n  max-width: 250px;\n  margin: 0 auto;\n  aspect-ratio: 240 / 170;\n}\n\n.speedometerGroup-SS-GT {\n  width: 100%;\n}\n\n.speedometerGroupTitle-4s2YI {\n  text-align: center;\n  margin-bottom: 4px;\n  margin-top: 4px;\n}\n\n.speedometerGroupGrid-SNMAM {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 16px;\n}\n\n.speedometerGroupItem-a4T-A {\n  text-align: center;\n  flex: 1 1 40%;\n  max-width: 45%;\n}\n\n.speedometerGroupItemTitle-N35gZ {\n  margin-bottom: 4px;\n  margin-top: 4px;\n}\n\n.speedometerValue-pbLcR {\n  color: var(--diva-theme-palette-primary-main);\n  stroke: var(--diva-theme-palette-primary-main);\n}\n\n.contentSection-dJgsX {\n  padding-top: 8px;\n}\n\n.darkmode .contentSection-dJgsX {\n  border-top-color: #333;\n}\n";
+styleInject(css_248z);
+
+var RangeLayout = function RangeLayout(_ref) {
+  var _range$unit, _range$unit2, _range$unit3;
+  var option = _ref.option,
+    selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    getOptionCaption = _ref.getOptionCaption;
+  var _useTranslation = divaCore.useTranslation(),
+    i18n = _useTranslation.i18n;
+  var language = i18n.language;
+  var range = option.range;
+  if (!range) return null;
+  var _useState = react.useState(selectedOptions[0] ? Number(selectedOptions[0]) : range.defaultValue || range.min),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var caption = getOptionCaption(option);
+  var handleChange = function handleChange(e) {
+    var newValue = Number(e.target.value);
+    setValue(newValue);
+    onSelect([String(newValue)]);
+  };
+  var unit = ((_range$unit = range.unit) === null || _range$unit === void 0 ? void 0 : _range$unit[language]) || ((_range$unit2 = range.unit) === null || _range$unit2 === void 0 ? void 0 : _range$unit2.en) || ((_range$unit3 = range.unit) === null || _range$unit3 === void 0 ? void 0 : _range$unit3.de) || '';
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: slider,
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      type: "range",
+      min: range.min,
+      max: range.max,
+      step: range.step,
+      value: value,
+      onChange: handleChange,
+      className: sliderInput + ' diva-stop-swipe-detection'
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: sliderValue,
+      children: [value, " ", unit, caption && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: optionCaption,
+        dangerouslySetInnerHTML: {
+          __html: " ".concat(caption)
+        }
+      })]
+    })]
+  });
+};
+
+var DropdownLayout = function DropdownLayout(_ref) {
+  var options = _ref.options,
+    selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    getOptionLabel = _ref.getOptionLabel,
+    getOptionCaption = _ref.getOptionCaption,
+    layoutConfig = _ref.layoutConfig;
+  var _useTranslation = divaCore.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxRuntime.jsxs("select", {
+    className: dropdown,
+    value: selectedOptions[0] || '',
+    onChange: function onChange(e) {
+      return onSelect(e.target.value);
+    },
+    style: {
+      fontSize: layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.optionLabelFontSize
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+      value: "",
+      children: t('quickconfig.pleaseSelect', {
+        defaultValue: 'Bitte wählen'
+      })
+    }), options.map(function (option) {
+      var label = getOptionLabel(option);
+      var caption = getOptionCaption(option);
+      return /*#__PURE__*/jsxRuntime.jsxs("option", {
+        value: option.codex,
+        children: [label, caption ? " (".concat(caption, ")") : '']
+      }, option.codex);
+    })]
+  });
+};
+
+var SelectionListLayout = function SelectionListLayout(_ref) {
+  var options = _ref.options,
+    selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    getOptionLabel = _ref.getOptionLabel,
+    getOptionDescription = _ref.getOptionDescription,
+    getOptionCaption = _ref.getOptionCaption,
+    type = _ref.type,
+    layoutConfig = _ref.layoutConfig;
+  var isRadio = type === 'radio';
+  var containerClass = isRadio ? radio : checkbox;
+  var itemClass = isRadio ? radioOption : checkboxOption;
+  var selectedItemClass = isRadio ? radioOptionSelected : checkboxOptionSelected;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: containerClass,
+    children: options.map(function (option) {
+      var isSelected = selectedOptions.includes(option.codex);
+      var label = getOptionLabel(option);
+      var description = getOptionDescription(option);
+      var caption = getOptionCaption(option);
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: isSelected ? "".concat(itemClass, " ").concat(selectedItemClass) : itemClass,
+        onClick: function onClick() {
+          return onSelect(option.codex);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+          type: isRadio ? 'radio' : 'checkbox',
+          checked: isSelected,
+          onChange: function onChange() {
+            return onSelect(option.codex);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: optionContent,
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: optionLabel,
+            style: layoutConfig !== null && layoutConfig !== void 0 && layoutConfig.optionLabelFontSize ? {
+              fontSize: layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.optionLabelFontSize
+            } : undefined,
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              dangerouslySetInnerHTML: {
+                __html: label
+              }
+            }), caption && /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: optionCaption,
+              dangerouslySetInnerHTML: {
+                __html: " ".concat(caption)
+              }
+            })]
+          }), description && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: optionDescription,
+            dangerouslySetInnerHTML: {
+              __html: description
+            }
+          })]
+        })]
+      }, option.codex);
+    })
+  });
+};
+
+var ButtonGroupLayout = function ButtonGroupLayout(_ref) {
+  var options = _ref.options,
+    selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    getOptionLabel = _ref.getOptionLabel,
+    getOptionDescription = _ref.getOptionDescription,
+    getOptionCaption = _ref.getOptionCaption,
+    layout = _ref.layout,
+    layoutConfig = _ref.layoutConfig;
+  var isToggle = layout === 'toggle' || layout === 'multitoggle';
+  var containerClass = isToggle ? toggle : layout === 'gallery' ? optionsGallery : optionsBox;
+  var itemClass = isToggle ? toggleButton : optionButton;
+  var selectedItemClass = isToggle ? toggleButtonSelected : optionButtonSelected;
+  var style = {};
+  if (layoutConfig !== null && layoutConfig !== void 0 && layoutConfig.columns && !isToggle) {
+    style.gridTemplateColumns = "repeat(".concat(layoutConfig.columns, ", minmax(0, 1fr))");
+  }
+  if (layoutConfig !== null && layoutConfig !== void 0 && layoutConfig.gap && !isToggle) {
+    style.gap = typeof layoutConfig.gap === 'number' ? "".concat(layoutConfig.gap, "px") : layoutConfig.gap;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: containerClass,
+    style: style,
+    children: options.map(function (option) {
+      var isSelected = selectedOptions.includes(option.codex);
+      var label = getOptionLabel(option);
+      var description = getOptionDescription(option);
+      var caption = getOptionCaption(option);
+      if (isToggle) {
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          className: isSelected ? "".concat(itemClass, " ").concat(selectedItemClass) : itemClass,
+          onClick: function onClick() {
+            return onSelect(option.codex);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: optionLabel,
+            style: layoutConfig !== null && layoutConfig !== void 0 && layoutConfig.optionLabelFontSize ? {
+              fontSize: layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.optionLabelFontSize
+            } : undefined,
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              dangerouslySetInnerHTML: {
+                __html: label
+              }
+            }), caption && /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: optionCaption,
+              dangerouslySetInnerHTML: {
+                __html: " ".concat(caption)
+              }
+            })]
+          })
+        }, option.codex);
+      }
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: isSelected ? "".concat(itemClass, " ").concat(selectedItemClass) : itemClass,
+        onClick: function onClick() {
+          return onSelect(option.codex);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: optionLabel,
+          style: layoutConfig !== null && layoutConfig !== void 0 && layoutConfig.optionLabelFontSize ? {
+            fontSize: layoutConfig === null || layoutConfig === void 0 ? void 0 : layoutConfig.optionLabelFontSize
+          } : undefined,
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            dangerouslySetInnerHTML: {
+              __html: label
+            }
+          }), caption && /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: optionCaption,
+            dangerouslySetInnerHTML: {
+              __html: " ".concat(caption)
+            }
+          })]
+        }), description && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: optionDescription,
+          dangerouslySetInnerHTML: {
+            __html: description
+          }
+        })]
+      }, option.codex);
+    })
+  });
+};
+
+var OptionRenderer = function OptionRenderer(_ref) {
+  var feature = _ref.feature,
+    selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    selections = _ref.selections;
+  var _useOptionRenderer = useOptionRenderer({
+      feature: feature,
+      selectedOptions: selectedOptions,
+      onSelect: onSelect,
+      selections: selections
+    }),
+    selectOptions = _useOptionRenderer.selectOptions,
+    rangeOption = _useOptionRenderer.rangeOption,
+    handleSingleSelect = _useOptionRenderer.handleSingleSelect,
+    handleMultiSelect = _useOptionRenderer.handleMultiSelect,
+    getOptionLabel = _useOptionRenderer.getOptionLabel,
+    getOptionDescription = _useOptionRenderer.getOptionDescription,
+    getOptionCaption = _useOptionRenderer.getOptionCaption;
+
+  // Handle range type (slider)
+  if (rangeOption && rangeOption.range) {
+    return /*#__PURE__*/jsxRuntime.jsx(RangeLayout, {
+      option: rangeOption,
+      selectedOptions: selectedOptions,
+      onSelect: onSelect,
+      getOptionCaption: getOptionCaption
+    });
+  }
+  var handleSelect = feature.multiSelect ? handleMultiSelect : handleSingleSelect;
+  switch (feature.layout) {
+    case 'dropdown':
+      return /*#__PURE__*/jsxRuntime.jsx(DropdownLayout, {
+        options: selectOptions,
+        selectedOptions: selectedOptions,
+        onSelect: handleSingleSelect,
+        getOptionLabel: getOptionLabel,
+        getOptionCaption: getOptionCaption,
+        layoutConfig: feature.layoutConfig
+      });
+    case 'radio':
+    case 'checkbox':
+      return /*#__PURE__*/jsxRuntime.jsx(SelectionListLayout, {
+        options: selectOptions,
+        selectedOptions: selectedOptions,
+        onSelect: handleSelect,
+        getOptionLabel: getOptionLabel,
+        getOptionDescription: getOptionDescription,
+        getOptionCaption: getOptionCaption,
+        type: feature.layout,
+        layoutConfig: feature.layoutConfig
+      });
+    case 'toggle':
+    case 'multitoggle':
+    case 'box':
+    case 'gallery':
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupLayout, {
+        options: selectOptions,
+        selectedOptions: selectedOptions,
+        onSelect: handleSelect,
+        getOptionLabel: getOptionLabel,
+        getOptionDescription: getOptionDescription,
+        getOptionCaption: getOptionCaption,
+        layout: feature.layout,
+        layoutConfig: feature.layoutConfig
+      });
+  }
+};
+
+var FeatureRenderer = function FeatureRenderer(_ref) {
+  var _feature$description, _feature$description2, _feature$description3;
+  var feature = _ref.feature,
+    selection = _ref.selection,
+    _onSelect = _ref.onSelect,
+    selections = _ref.selections;
+  var _useTranslation = divaCore.useTranslation(),
+    i18n = _useTranslation.i18n;
+  var language = i18n.language;
+  var label = feature.label[language] || feature.label.en || feature.label.de || feature.codex;
+  var description = ((_feature$description = feature.description) === null || _feature$description === void 0 ? void 0 : _feature$description[language]) || ((_feature$description2 = feature.description) === null || _feature$description2 === void 0 ? void 0 : _feature$description2.en) || ((_feature$description3 = feature.description) === null || _feature$description3 === void 0 ? void 0 : _feature$description3.de);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: featureContainer,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: featureLabel,
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        dangerouslySetInnerHTML: {
+          __html: label
+        }
+      }), feature.required && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: featureRequired,
+        children: " *"
+      })]
+    }), description && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: featureDescription,
+      dangerouslySetInnerHTML: {
+        __html: description
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(OptionRenderer, {
+      feature: feature,
+      selectedOptions: (selection === null || selection === void 0 ? void 0 : selection.selectedOptions) || [],
+      onSelect: function onSelect(selectedOptions) {
+        return _onSelect(feature.codex, selectedOptions);
+      },
+      selections: selections
+    })]
+  });
+};
+
+var Speedometer = function Speedometer(_ref) {
+  var value = _ref.value,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    label = _ref.label,
+    _ref$zones = _ref.zones,
+    zones = _ref$zones === void 0 ? [] : _ref$zones;
+  var _useTranslation = divaCore.useTranslation();
+    _useTranslation.t;
+  var radius = 80;
+  var strokeWidth = 12;
+  var centerX = 100;
+  var centerY = 110;
+  var normalizedValue = Math.min(Math.max(value, min), max);
+  var percentage = (normalizedValue - min) / (max - min);
+
+  // Speedometer arc: Centered at top (0deg), spanning 240 degrees
+  // From 240deg (bottom-left) to 480deg (bottom-right)
+  var startAngle = 240;
+  var endAngle = 480;
+  var totalAngle = endAngle - startAngle;
+  var currentAngle = startAngle + percentage * totalAngle;
+
+  // Animation state for the indicator
+  var _useState = react.useState(startAngle),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    animatedAngle = _useState2[0],
+    setAnimatedAngle = _useState2[1];
+  react.useEffect(function () {
+    var timer = setTimeout(function () {
+      setAnimatedAngle(currentAngle);
+    }, 50);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [currentAngle]);
+  var polarToCartesian = function polarToCartesian(cX, cY, r, angleInDegrees) {
+    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+    return {
+      x: cX + r * Math.cos(angleInRadians),
+      y: cY + r * Math.sin(angleInRadians)
+    };
+  };
+  var describeArc = function describeArc(x, y, r, startA, endA) {
+    var start = polarToCartesian(x, y, r, endA);
+    var end = polarToCartesian(x, y, r, startA);
+    var largeArcFlag = endA - startA <= 180 ? '0' : '1';
+    return ['M', start.x, start.y, 'A', r, r, 0, largeArcFlag, 0, end.x, end.y].join(' ');
+  };
+  var backgroundPath = describeArc(centerX, centerY, radius, startAngle, endAngle);
+
+  // Find current zone color
+  var currentZone = zones.find(function (z) {
+    if (z.value && label && z.value === label) return true;
+    return normalizedValue >= z.min && normalizedValue <= z.max;
+  });
+  var activeColor = (currentZone === null || currentZone === void 0 ? void 0 : currentZone.color) || 'var(--diva-theme-palette-primary-main)';
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: speedometer,
+    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      viewBox: "-20 0 240 170",
+      width: "100%",
+      height: "100%",
+      children: [zones.length > 0 ? zones.map(function (zone, i) {
+        var zoneStart = startAngle + (zone.min - min) / (max - min) * totalAngle;
+        var zoneEnd = startAngle + (zone.max - min) / (max - min) * totalAngle;
+        return /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: describeArc(centerX, centerY, radius, zoneStart, zoneEnd),
+          fill: "none",
+          stroke: zone.color || '#e6e6e6',
+          strokeWidth: strokeWidth,
+          opacity: 0.3
+        }, i);
+      }) : /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: backgroundPath,
+        fill: "none",
+        stroke: "#e6e6e6",
+        strokeWidth: strokeWidth,
+        strokeLinecap: "round"
+      }), /*#__PURE__*/jsxRuntime.jsx("g", {
+        style: {
+          transition: 'transform 2s cubic-bezier(0.4, 0, 0.2, 1)',
+          transform: "rotate(".concat(animatedAngle, "deg)"),
+          transformOrigin: "".concat(centerX, "px ").concat(centerY, "px")
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: describeArc(centerX, centerY, radius + 5, -2, 2),
+          fill: "none",
+          stroke: activeColor,
+          strokeWidth: strokeWidth + 10,
+          strokeLinecap: "round"
+        })
+      }), zones.map(function (zone, i) {
+        var zoneMidAngle = startAngle + ((zone.min - min) / (max - min) + (zone.max - min) / (max - min)) / 2 * totalAngle;
+
+        // Adjust offset based on string length to avoid collision with the arc/pointer
+        var textLength = zone.label.length;
+        var labelOffset = 22 + (textLength > 5 ? 6 : 0);
+        var labelPos = polarToCartesian(centerX, centerY, radius - labelOffset, zoneMidAngle);
+        return /*#__PURE__*/jsxRuntime.jsx("text", {
+          x: labelPos.x,
+          y: labelPos.y,
+          textAnchor: "middle",
+          fontSize: textLength > 7 ? '10' : '12',
+          fontWeight: "500",
+          fill: "#999",
+          dominantBaseline: "middle",
+          children: zone.label
+        }, i);
+      }), /*#__PURE__*/jsxRuntime.jsx("text", {
+        x: centerX,
+        y: centerY - 10,
+        textAnchor: "middle",
+        fontSize: "22",
+        fontWeight: "700",
+        fill: activeColor,
+        children: (currentZone === null || currentZone === void 0 ? void 0 : currentZone.label) || label || value
+      }), /*#__PURE__*/jsxRuntime.jsx("text", {
+        x: centerX,
+        y: centerY + 34,
+        textAnchor: "middle",
+        fontSize: "20",
+        fontWeight: "600",
+        fill: activeColor,
+        children: value
+      })]
+    })
+  });
+};
+
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SpeedometerGroup = function SpeedometerGroup(_ref) {
+  var displayConfig = _ref.displayConfig,
+    data = _ref.data,
+    language = _ref.language;
+  var titleText = displayConfig.title ? displayConfig.title[language] || displayConfig.title.en || displayConfig.title.de : '';
+  var speedometerConfigs = displayConfig.speedometers;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: speedometerGroup,
+    children: [titleText && /*#__PURE__*/jsxRuntime.jsx("h4", {
+      className: speedometerGroupTitle,
+      dangerouslySetInnerHTML: {
+        __html: titleText
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: speedometerGroupGrid,
+      children: speedometerConfigs.map(function (sConfig, idx) {
+        var _sConfig$zones;
+        var sValue = sConfig.valueKey ? data[sConfig.valueKey] : null;
+        var sLabel = sConfig.labelKey ? data[sConfig.labelKey] : null;
+        var sTitle = sConfig.title ? sConfig.title[language] || sConfig.title.en || sConfig.title.de : '';
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: speedometerGroupItem,
+          children: [sTitle && /*#__PURE__*/jsxRuntime.jsx("h5", {
+            className: speedometerGroupItemTitle,
+            dangerouslySetInnerHTML: {
+              __html: sTitle
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Speedometer, {
+            value: _typeof__default["default"](sValue) === 'object' ? sValue.value : sValue,
+            label: _typeof__default["default"](sLabel) === 'object' ? sLabel.result : sLabel,
+            min: sConfig.min,
+            max: sConfig.max,
+            zones: (_sConfig$zones = sConfig.zones) === null || _sConfig$zones === void 0 ? void 0 : _sConfig$zones.map(function (z) {
+              return _objectSpread$3(_objectSpread$3({}, z), {}, {
+                label: z.label[language] || z.label.en || z.label.de
+              });
+            })
+          })]
+        }, idx);
+      })
+    })]
+  });
+};
+
+var TextResult = function TextResult(_ref) {
+  var displayConfig = _ref.displayConfig,
+    data = _ref.data,
+    language = _ref.language;
+  var label = displayConfig.labelKey ? data[displayConfig.labelKey] : null;
+  var titleText = displayConfig.title ? displayConfig.title[language] || displayConfig.title.en || displayConfig.title.de : '';
+  var resultValueText = _typeof__default["default"](label) === 'object' ? label.result : String(label);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: resultItem,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: resultKey,
+      dangerouslySetInnerHTML: {
+        __html: titleText
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: resultValue,
+      dangerouslySetInnerHTML: {
+        __html: resultValueText
+      }
+    })]
+  }, displayConfig.labelKey || 'text');
+};
+
+var ResultItemsRenderer = function ResultItemsRenderer(_ref) {
+  var data = _ref.data,
+    config = _ref.config,
+    language = _ref.language;
+  var renderGenericResult = function renderGenericResult(displayConfig, data, index) {
+    switch (displayConfig.type) {
+      case 'speedometer':
+        return /*#__PURE__*/jsxRuntime.jsx(SpeedometerGroup, {
+          displayConfig: displayConfig,
+          data: data,
+          language: language
+        }, "speedometer-".concat(index));
+      case 'text':
+        return /*#__PURE__*/jsxRuntime.jsx(TextResult, {
+          displayConfig: displayConfig,
+          data: data,
+          language: language
+        }, "text-".concat(index));
+      default:
+        return null;
+    }
+  };
+  if (config.results && config.results.length > 0) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: resultsGrid,
+      children: config.results.map(function (displayConfig, index) {
+        return renderGenericResult(displayConfig, data, index);
+      })
+    });
+  }
+
+  // Fallback to legacy rendering if no results config provided
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: Object.entries(data).map(function (_ref2) {
+      var _ref3 = _slicedToArray__default["default"](_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      if (_typeof__default["default"](value) === 'object' && value !== null) {
+        if (value.result !== undefined) {
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: resultItem,
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: resultKey,
+              dangerouslySetInnerHTML: {
+                __html: key
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: resultValue,
+              dangerouslySetInnerHTML: {
+                __html: value.result
+              }
+            })]
+          }, key);
+        }
+        return null;
+      }
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: resultItem,
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: resultKey,
+          dangerouslySetInnerHTML: {
+            __html: key
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: resultValue,
+          dangerouslySetInnerHTML: {
+            __html: String(value)
+          }
+        })]
+      }, key);
+    })
+  });
+};
+
+var ArrowRight = function ArrowRight() {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [/*#__PURE__*/jsxRuntime.jsx("line", {
+      x1: "5",
+      y1: "12",
+      x2: "19",
+      y2: "12"
+    }), /*#__PURE__*/jsxRuntime.jsx("polyline", {
+      points: "12 5 19 12 12 19"
+    })]
+  });
+};
+var CopyIcon = function CopyIcon() {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+      x: "9",
+      y: "9",
+      width: "13",
+      height: "13",
+      rx: "2",
+      ry: "2"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+    })]
+  });
+};
+var CheckIcon = function CheckIcon() {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /*#__PURE__*/jsxRuntime.jsx("polyline", {
+      points: "20 6 9 17 4 12"
+    })
+  });
+};
+var CloseIcon = function CloseIcon() {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [/*#__PURE__*/jsxRuntime.jsx("line", {
+      x1: "18",
+      y1: "6",
+      x2: "6",
+      y2: "18"
+    }), /*#__PURE__*/jsxRuntime.jsx("line", {
+      x1: "6",
+      y1: "6",
+      x2: "18",
+      y2: "18"
+    })]
+  });
+};
+var Navigation = function Navigation(_ref) {
+  var onBack = _ref.onBack,
+    onNext = _ref.onNext,
+    onCopy = _ref.onCopy,
+    onRetry = _ref.onRetry,
+    onApply = _ref.onApply,
+    onClose = _ref.onClose,
+    _ref$canProceed = _ref.canProceed,
+    canProceed = _ref$canProceed === void 0 ? true : _ref$canProceed,
+    _ref$showBack = _ref.showBack,
+    showBack = _ref$showBack === void 0 ? false : _ref$showBack,
+    _ref$nextLabel = _ref.nextLabel,
+    nextLabel = _ref$nextLabel === void 0 ? '' : _ref$nextLabel,
+    nextInstance = _ref.nextInstance,
+    currentInstanceId = _ref.currentInstanceId,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'de' : _ref$language;
+  var _useTranslation = divaCore.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    appliedFeedback = _useState2[0],
+    setAppliedFeedback = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    showCloseButton = _useState4[0],
+    setShowCloseButton = _useState4[1];
+  var nextInstanceLabel = nextInstance ? nextInstance.label[language] || nextInstance.label.en || nextInstance.label.de || nextInstance.id : '';
+  var handleApply = function handleApply() {
+    onApply === null || onApply === void 0 || onApply();
+    setAppliedFeedback(true);
+    if (onClose) {
+      setTimeout(function () {
+        return setShowCloseButton(true);
+      }, 1500);
+    } else {
+      setTimeout(function () {
+        setAppliedFeedback(false);
+      }, 2000);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: buttonContainer,
+    children: [showBack && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: navLeftGroup,
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: button,
+        onClick: onBack,
+        "aria-label": t('quickconfig.back', {
+          defaultValue: 'Zurück'
+        }),
+        children: t('quickconfig.back', {
+          defaultValue: 'Zurück'
+        })
+      }, "back")
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: navRightGroup,
+      children: [onApply && !showCloseButton && /*#__PURE__*/jsxRuntime.jsxs("button", {
+        className: classNames__default["default"](button, buttonPrimary, buttonWithArrow, navButtonPadding, appliedFeedback && buttonPrimaryApplied),
+        onClick: handleApply,
+        disabled: appliedFeedback,
+        children: [appliedFeedback ? t('quickconfig.changesApplied', {
+          defaultValue: 'Änderungen wurden übernommen'
+        }) : t('quickconfig.applyChanges', {
+          defaultValue: 'Änderungen übernehmen'
+        }), appliedFeedback ? /*#__PURE__*/jsxRuntime.jsx(CheckIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(CopyIcon, {})]
+      }, "apply"), onClose && showCloseButton && /*#__PURE__*/jsxRuntime.jsxs("button", {
+        className: classNames__default["default"](button, buttonPrimary, buttonWithArrow, navButtonPadding),
+        onClick: onClose,
+        children: [t('quickconfig.closeNow', {
+          defaultValue: 'Jetzt schließen'
+        }), /*#__PURE__*/jsxRuntime.jsx(CloseIcon, {})]
+      }, "close"), onRetry && /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: classNames__default["default"](button, buttonSecondary, buttonWithArrow, navButtonPadding),
+        onClick: onRetry,
+        children: t('quickconfig.retry', {
+          defaultValue: 'Nochmal zum Anfang'
+        })
+      }, "retry"), nextInstance && onCopy && currentInstanceId && /*#__PURE__*/jsxRuntime.jsxs("button", {
+        className: classNames__default["default"](button, buttonSecondary, buttonWithArrow),
+        onClick: function onClick() {
+          onCopy(currentInstanceId, nextInstance.id);
+        },
+        disabled: !canProceed,
+        children: [t('quickconfig.applyRecommendationsFor', {
+          instance: nextInstanceLabel,
+          defaultValue: "Eingabe f\xFCr ".concat(nextInstanceLabel, " \xFCbernehmen")
+        }), /*#__PURE__*/jsxRuntime.jsx(ArrowRight, {})]
+      }, "applyRecommendations"), onNext && /*#__PURE__*/jsxRuntime.jsxs("button", {
+        className: classNames__default["default"](button, buttonPrimary, buttonWithArrow),
+        onClick: onNext,
+        disabled: !canProceed,
+        children: [nextInstance ? t('quickconfig.nextWith', {
+          instance: nextInstanceLabel,
+          defaultValue: "Weiter mit ".concat(nextInstanceLabel)
+        }) : nextLabel, /*#__PURE__*/jsxRuntime.jsx(ArrowRight, {})]
+      }, "next")]
+    })]
+  });
+};
+
+var ContentItem = function ContentItem(_ref) {
+  var id = _ref.id,
+    renderContentItem = _ref.renderContentItem;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: contentSection,
+    children: renderContentItem ? renderContentItem(id) : null
+  });
+};
+
+function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
+function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var resolveContentItemId = function resolveContentItemId(displayConfig, data) {
+  // Convert calculation results to UserSelection format for ConditionEvaluator
+  var resultAsSelections = Object.entries(data).filter(function (_ref) {
+    var _ref2 = _slicedToArray__default["default"](_ref, 1),
+      key = _ref2[0];
+    return key !== 'input' && key !== 'instanceResults';
+  }).map(function (_ref3) {
+    var _ref4 = _slicedToArray__default["default"](_ref3, 2),
+      key = _ref4[0],
+      val = _ref4[1];
+    var value = _typeof__default["default"](val) === 'object' && val !== null && 'result' in val ? String(val.result) : String(val);
+    return {
+      featureCodex: key,
+      selectedOptions: [value]
+    };
+  });
+  var evaluator = new ConditionEvaluator(resultAsSelections);
+
+  // 1. Check rules first (complex logic)
+  if (displayConfig.rules) {
+    var _iterator = _createForOfIteratorHelper$1(displayConfig.rules),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var rule = _step.value;
+        if (evaluator.evaluate(rule.condition)) {
+          return rule.contentItemId;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+
+  // 2. Fallback to direct key match or static contentItemId
+  return (displayConfig.contentItemId && data[displayConfig.contentItemId] ? data[displayConfig.contentItemId] : null) || displayConfig.contentItemId || null;
+};
+
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ResultDisplay = function ResultDisplay(_ref) {
+  var activeInstanceId = _ref.activeInstanceId,
+    result = _ref.result,
+    config = _ref.config,
+    onRetry = _ref.onRetry,
+    filteredInstances = _ref.filteredInstances,
+    onEvent = _ref.onEvent,
+    renderContentItem = _ref.renderContentItem;
+  var _useTranslation = divaCore.useTranslation(),
+    i18n = _useTranslation.i18n;
+  var language = i18n.language;
+  var activeInstanceData = react.useMemo(function () {
+    if (activeInstanceId && result.instanceResults && result.instanceResults[activeInstanceId]) return result.instanceResults[activeInstanceId];
+    return result;
+  }, [activeInstanceId, result]);
+  var handleApplyResults = function handleApplyResults() {
+    var combinedMappedResults = {};
+    if (result.instanceResults && filteredInstances && filteredInstances.length > 0) {
+      filteredInstances.forEach(function (instance) {
+        var instanceRes = result.instanceResults[instance.id];
+        if (instanceRes && instance.resultMapping) {
+          Object.entries(instance.resultMapping).forEach(function (_ref2) {
+            var _ref3 = _slicedToArray__default["default"](_ref2, 2),
+              resultKey = _ref3[0],
+              targetKey = _ref3[1];
+            var val = instanceRes[resultKey];
+            if (val && val.result) {
+              if (Array.isArray(targetKey)) {
+                targetKey.forEach(function (key) {
+                  combinedMappedResults[key] = val.result;
+                });
+              } else {
+                combinedMappedResults[targetKey] = val.result;
+              }
+            }
+          });
+        }
+      });
+    } else {
+      var targetInstance = filteredInstances && filteredInstances.length === 1 ? filteredInstances[0] : null;
+      var resSource = result.result || {};
+      if (targetInstance !== null && targetInstance !== void 0 && targetInstance.resultMapping) {
+        Object.entries(targetInstance.resultMapping).forEach(function (_ref4) {
+          var _ref5 = _slicedToArray__default["default"](_ref4, 2),
+            resultKey = _ref5[0],
+            targetKey = _ref5[1];
+          var val = resSource[resultKey];
+          if (val && val.result) {
+            if (Array.isArray(targetKey)) {
+              targetKey.forEach(function (key) {
+                combinedMappedResults[key] = val.result;
+              });
+            } else {
+              combinedMappedResults[targetKey] = val.result;
+            }
+          }
+        });
+      }
+    }
+    onEvent === null || onEvent === void 0 || onEvent({
+      type: 'applyResults',
+      payload: combinedMappedResults
+    });
+  };
+  var handleClose = onEvent ? function () {
+    return onEvent({
+      type: 'onClose'
+    });
+  } : undefined;
+  var renderResultsInOrder = function renderResultsInOrder() {
+    if (!config.results || config.results.length === 0) {
+      return /*#__PURE__*/jsxRuntime.jsx(ResultItemsRenderer, {
+        data: activeInstanceData,
+        config: config,
+        language: language
+      });
+    }
+    var elements = [];
+    var currentNonContentGroup = [];
+    var flushNonContentGroup = function flushNonContentGroup() {
+      if (currentNonContentGroup.length === 0) return;
+      var groupResults = _toConsumableArray__default["default"](currentNonContentGroup);
+      var key = "group-".concat(elements.length);
+      elements.push(/*#__PURE__*/jsxRuntime.jsx(ResultItemsRenderer, {
+        data: activeInstanceData,
+        config: _objectSpread$2(_objectSpread$2({}, config), {}, {
+          results: groupResults
+        }),
+        language: language
+      }, key));
+      currentNonContentGroup = [];
+    };
+    config.results.forEach(function (displayConfig, index) {
+      if (displayConfig.type === 'content') {
+        flushNonContentGroup();
+        var contentItemId = resolveContentItemId(displayConfig, activeInstanceData);
+        if (contentItemId) {
+          elements.push(/*#__PURE__*/jsxRuntime.jsx(ContentItem, {
+            id: contentItemId,
+            renderContentItem: renderContentItem
+          }, "content-".concat(index)));
+        }
+      } else {
+        currentNonContentGroup.push(displayConfig);
+      }
+    });
+    flushNonContentGroup();
+    return elements;
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: resultContainer,
+    children: [renderResultsInOrder(), /*#__PURE__*/jsxRuntime.jsx(Navigation, {
+      onRetry: onRetry,
+      onApply: onEvent ? handleApplyResults : undefined,
+      onClose: handleClose
+    })]
+  });
+};
+
+var ProgressBar = function ProgressBar(_ref) {
+  var currentStep = _ref.currentStep,
+    totalSteps = _ref.totalSteps;
+  var progress = currentStep / totalSteps * 100;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: progressBar,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: progressBarFill,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: progressBarInner,
+        style: {
+          width: "".concat(progress, "%")
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: progressText,
+      children: [currentStep, " / ", totalSteps]
+    })]
+  });
+};
+
+var Header = function Header(_ref) {
+  var _ref$instances = _ref.instances,
+    instances = _ref$instances === void 0 ? [] : _ref$instances,
+    _ref$activeInstanceId = _ref.activeInstanceId,
+    activeInstanceId = _ref$activeInstanceId === void 0 ? '' : _ref$activeInstanceId,
+    onSwitchInstance = _ref.onSwitchInstance,
+    onCancel = _ref.onCancel,
+    _ref$featureGroups = _ref.featureGroups,
+    featureGroups = _ref$featureGroups === void 0 ? [] : _ref$featureGroups,
+    currentFeatureGroupIndex = _ref.currentFeatureGroupIndex;
+  var _useTranslation = divaCore.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var language = i18n.language;
+  var activeIndex = instances.findIndex(function (i) {
+    return i.id === activeInstanceId;
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: stickyHeader,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: headerContainer,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: tabWrapper,
+        style: {
+          '--tab-count': instances.length
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: tabSlider,
+          style: {
+            transform: "translateX(".concat(activeIndex >= 0 ? activeIndex * 100 : 0, "%)")
+          },
+          "aria-hidden": true
+        }), instances.map(function (instance) {
+          return /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            className: classNames__default["default"](tab, _defineProperty__default["default"]({}, tabActive, activeInstanceId === instance.id)),
+            onClick: function onClick() {
+              return onSwitchInstance === null || onSwitchInstance === void 0 ? void 0 : onSwitchInstance(instance.id);
+            },
+            dangerouslySetInnerHTML: {
+              __html: instance.label[language] || instance.label.en || instance.label.de || instance.id
+            }
+          }, instance.id);
+        })]
+      }), onCancel && /*#__PURE__*/jsxRuntime.jsx("button", {
+        className: closeButton,
+        onClick: onCancel,
+        "aria-label": t('quickconfig.close', {
+          defaultValue: 'Schließen'
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [/*#__PURE__*/jsxRuntime.jsx("line", {
+            x1: "18",
+            y1: "6",
+            x2: "6",
+            y2: "18"
+          }), /*#__PURE__*/jsxRuntime.jsx("line", {
+            x1: "6",
+            y1: "6",
+            x2: "18",
+            y2: "18"
+          })]
+        })
+      })]
+    }), featureGroups.length > 1 && currentFeatureGroupIndex !== undefined && /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
+      currentStep: currentFeatureGroupIndex + 1,
+      totalSteps: featureGroups.length
+    })]
+  });
+};
+
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function calculateVariantValue(selections, config) {
+  if (!config) {
+    return {};
+  }
+
+  // 1. Prepare variables for rule evaluation
+  var variables = {};
+
+  // Extract values from selections based on config.features
+  var _loop = function _loop() {
+    var _Object$entries$_i = _slicedToArray__default["default"](_Object$entries[_i], 2),
+      featureKey = _Object$entries$_i[0],
+      featureConfig = _Object$entries$_i[1];
+    var selection = selections.find(function (s) {
+      return s.featureCodex === featureConfig.featureCodex;
+    });
+    if (selection && selection.selectedOptions.length > 0) {
+      // Use the first selected option
+      var selectedOptionCodex = selection.selectedOptions[0];
+      var optionConfig = featureConfig.options[selectedOptionCodex];
+      if (optionConfig) {
+        variables[featureKey] = parseFloat(optionConfig.value) || 0;
+      } else {
+        // Handle range strings like "150-160" -> 160
+        if (selectedOptionCodex.includes('-')) {
+          var parts = selectedOptionCodex.split('-');
+          var lastPart = parts[parts.length - 1];
+          variables[featureKey] = parseFloat(lastPart) || 0;
+        } else {
+          variables[featureKey] = parseFloat(selectedOptionCodex) || 0;
+        }
+      }
+    } else {
+      variables[featureKey] = 0;
+    }
+  };
+  for (var _i = 0, _Object$entries = Object.entries(config.features); _i < _Object$entries.length; _i++) {
+    _loop();
+  }
+
+  // 2. Evaluate results
+  var calculatedResults = {};
+  for (var _i2 = 0, _Object$entries2 = Object.entries(config.results); _i2 < _Object$entries2.length; _i2++) {
+    var _Object$entries2$_i = _slicedToArray__default["default"](_Object$entries2[_i2], 2),
+      resultKey = _Object$entries2$_i[0],
+      resultConfig = _Object$entries2$_i[1];
+    var numericValue = evaluateRule(resultConfig.rule, variables);
+    calculatedResults[resultKey] = getResultValue(resultKey, numericValue, resultConfig.valueResultPairs);
+  }
+  return calculatedResults;
+}
+
+/**
+ * Helper to evaluate a mathematical rule with given variables
+ */
+function evaluateRule(rule, variables) {
+  var expression = rule;
+
+  // Sort keys by length descending to avoid partial replacements
+  var sortedKeys = Object.keys(variables).sort(function (a, b) {
+    return b.length - a.length;
+  });
+  var _iterator = _createForOfIteratorHelper(sortedKeys),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      var value = variables[key];
+      var regex = new RegExp("\\b".concat(key, "\\b"), 'g');
+      expression = expression.replace(regex, value.toString());
+    }
+
+    // Safety check: only allow numbers, operators, parentheses and spaces
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var sanitizedExpression = expression.replace(/[0-9.+\-*/() ]/g, '');
+  if (sanitizedExpression.length > 0) {
+    return 0;
+  }
+  try {
+    // eslint-disable-next-line no-new-func
+    return new Function("return ".concat(expression))();
+  } catch (e) {
+    return 0;
+  }
+}
+
+/**
+ * Helper to map a numeric value to a result string based on ranges
+ */
+function getResultValue(resultKey, value, pairs) {
+  console.log('resultKey', resultKey, value, pairs);
+  var _iterator2 = _createForOfIteratorHelper(pairs),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _slicedToArray__default["default"](_step2.value, 2),
+        range = _step2$value[0],
+        result = _step2$value[1];
+      var parts = range.split('-');
+      var min = parseFloat(parts[0]);
+      var max = parseFloat(parts[1]);
+      if (!isNaN(min) && !isNaN(max)) {
+        if (value >= min && value <= max) {
+          return {
+            result: result,
+            value: value
+          };
+        }
+      } else if (!isNaN(min)) {
+        if (value === min) return {
+          result: result,
+          value: value
+        };
+      }
+    }
+
+    // Fallback: use first result if none match
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return pairs.length > 0 ? {
+    result: pairs[0][1],
+    value: value
+  } : {
+    result: '',
+    value: value
+  };
+}
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useQuickConfigCalculations = function useQuickConfigCalculations(config) {
+  var calculateInstanceResult = react.useCallback(function (currentSelections) {
+    if (!config.calculator) {
+      return {};
+    }
+    if (config.calculator.variantValueConfig) {
+      return calculateVariantValue(currentSelections, config.calculator.variantValueConfig);
+    }
+    return {};
+  }, [config.calculator]);
+  var calculateFullResult = react.useCallback(function (allInstanceSelections) {
+    if (!config.instances || config.instances.length === 0) {
+      var defaultSelections = allInstanceSelections['default'] || [];
+      var res = calculateInstanceResult(defaultSelections);
+      return _objectSpread$1(_objectSpread$1({}, res), {}, {
+        input: {
+          selections: defaultSelections
+        }
+      });
+    }
+    var instanceResults = {};
+    config.instances.forEach(function (instance) {
+      instanceResults[instance.id] = calculateInstanceResult(allInstanceSelections[instance.id] || []);
+    });
+    return {
+      instanceResults: instanceResults,
+      input: {
+        selections: allInstanceSelections[config.instances[0].id] || [],
+        // Backward compatibility
+        instanceSelections: allInstanceSelections
+      }
+    };
+  }, [config.instances, calculateInstanceResult]);
+  return {
+    calculateFullResult: calculateFullResult
+  };
+};
+
+var useQuickConfigFeatures = function useQuickConfigFeatures(config, selections, currentFeatureGroupIndex, result) {
+  // Group features by group field
+  var featureGroups = react.useMemo(function () {
+    var groups = [];
+    var groupMap = new Map();
+    config.features.forEach(function (feature) {
+      var groupKey = feature.group;
+      if (!groupMap.has(groupKey)) {
+        groupMap.set(groupKey, []);
+      }
+      groupMap.get(groupKey).push(feature);
+    });
+
+    // Flatten groups in order they appear
+    var seenGroups = new Set();
+    config.features.forEach(function (feature) {
+      var groupKey = feature.group;
+      if (!seenGroups.has(groupKey)) {
+        seenGroups.add(groupKey);
+        groups.push(groupMap.get(groupKey));
+      }
+    });
+    return groups;
+  }, [config.features]);
+
+  // Get visible features in current group
+  var currentFeatures = react.useMemo(function () {
+    if (result) return [];
+    var group = featureGroups[currentFeatureGroupIndex] || [];
+    return group.filter(function (feature) {
+      return ConditionEvaluator.shouldShowFeature(feature, selections);
+    });
+  }, [featureGroups, currentFeatureGroupIndex, selections, result]);
+  return {
+    featureGroups: featureGroups,
+    currentFeatures: currentFeatures
+  };
+};
+
+var STORAGE_PREFIX = 'quickconfig.';
+var TTL_MS = 24 * 60 * 60 * 1000; // 1 day
+
+function loadFromStorage(storageKey) {
+  try {
+    var raw = localStorage.getItem(storageKey);
+    if (!raw) return null;
+    var parsed = JSON.parse(raw);
+    if (_typeof__default["default"](parsed) !== 'object' || parsed === null) return null;
+
+    // Legacy format: plain selections object (no TTL)
+    if (!('storedAt' in parsed) || !('selections' in parsed)) {
+      var legacy = parsed;
+      return _typeof__default["default"](legacy) === 'object' && legacy !== null && !Array.isArray(legacy) ? legacy : null;
+    }
+    var _ref = parsed,
+      selections = _ref.selections,
+      storedAt = _ref.storedAt;
+    if (typeof storedAt !== 'number' || !selections || _typeof__default["default"](selections) !== 'object' || Array.isArray(selections)) return null;
+    if (Date.now() - storedAt > TTL_MS) {
+      localStorage.removeItem(storageKey);
+      return null;
+    }
+    return selections;
+  } catch (_unused) {
+    return null;
+  }
+}
+function useQuickConfigStorage(configId) {
+  var storageKey = react.useMemo(function () {
+    return configId ? "".concat(STORAGE_PREFIX).concat(configId) : '';
+  }, [configId]);
+  var storedSelections = react.useMemo(function () {
+    return storageKey ? loadFromStorage(storageKey) : null;
+  }, [storageKey]);
+  var persistSelections = react.useCallback(function (selections) {
+    if (!storageKey) return;
+    try {
+      var data = {
+        selections: selections,
+        storedAt: Date.now()
+      };
+      localStorage.setItem(storageKey, JSON.stringify(data));
+    } catch (_unused2) {
+      // Ignore quota exceeded or other storage errors
+    }
+  }, [storageKey]);
+  return {
+    storedSelections: storedSelections,
+    persistSelections: persistSelections
+  };
+}
+
+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__default["default"](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 useQuickConfig = function useQuickConfig(_ref) {
+  var config = _ref.config,
+    onEvent = _ref.onEvent,
+    initialContext = _ref.initialContext;
+  var storageKey = config.id || config.codex;
+  var _useQuickConfigStorag = useQuickConfigStorage(storageKey),
+    storedSelections = _useQuickConfigStorag.storedSelections,
+    persistSelections = _useQuickConfigStorag.persistSelections;
+  var filteredInstances = react.useMemo(function () {
+    if (!config.instances) return [];
+    return config.instances.filter(function (instance) {
+      return ConditionEvaluator.shouldShowInstance(instance, initialContext || []);
+    });
+  }, [config.instances, initialContext]);
+  var getInitialSelections = react.useCallback(function () {
+    // Prefer stored selections when reopening (user's previous choices persist across closes)
+    if (storedSelections && Object.keys(storedSelections).length > 0) {
+      return storedSelections;
+    }
+    // Fall back to initialContext when no stored data (e.g. pre-fill from product/basket)
+    if (initialContext !== undefined) {
+      return {
+        "default": initialContext
+      };
+    }
+    return {
+      "default": []
+    };
+  }, [initialContext, storedSelections]);
+  var _useState = react.useState(getInitialSelections),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    instanceSelections = _useState2[0],
+    setInstanceSelections = _useState2[1];
+  var prevStorageKeyRef = react.useRef(storageKey);
+  react.useEffect(function () {
+    if (prevStorageKeyRef.current !== storageKey) {
+      prevStorageKeyRef.current = storageKey;
+      setInstanceSelections(getInitialSelections());
+    }
+  }, [storageKey, getInitialSelections]);
+  react.useEffect(function () {
+    persistSelections(instanceSelections);
+  }, [instanceSelections, persistSelections]);
+  var _useState3 = react.useState(filteredInstances.length > 0 ? filteredInstances[0].id : 'default'),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    activeInstanceId = _useState4[0],
+    setActiveInstanceId = _useState4[1];
+  var _useState5 = react.useState(0),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    currentFeatureGroupIndex = _useState6[0],
+    setCurrentFeatureGroupIndex = _useState6[1];
+  var _useState7 = react.useState(null),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    result = _useState8[0],
+    setResult = _useState8[1];
+  var _useState9 = react.useState(!!config.introText),
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    showIntro = _useState10[0],
+    setShowIntro = _useState10[1];
+  react.useEffect(function () {
+    if (result && filteredInstances.length > 0) {
+      setActiveInstanceId(filteredInstances[0].id);
+    }
+  }, [result, filteredInstances]);
+  var selections = react.useMemo(function () {
+    return instanceSelections[activeInstanceId] || [];
+  }, [instanceSelections, activeInstanceId]);
+  var _useQuickConfigCalcul = useQuickConfigCalculations(config),
+    calculateFullResult = _useQuickConfigCalcul.calculateFullResult;
+  var _useQuickConfigFeatur = useQuickConfigFeatures(config, selections, currentFeatureGroupIndex, result),
+    featureGroups = _useQuickConfigFeatur.featureGroups,
+    currentFeatures = _useQuickConfigFeatur.currentFeatures;
+  var handleFeatureSelect = react.useCallback(function (featureCodex, selectedOptions) {
+    setInstanceSelections(function (prev) {
+      var currentSelections = prev[activeInstanceId] || [];
+      var existing = currentSelections.find(function (s) {
+        return s.featureCodex === featureCodex;
+      });
+      var updatedSelections = existing ? currentSelections.map(function (s) {
+        return s.featureCodex === featureCodex ? _objectSpread(_objectSpread({}, s), {}, {
+          selectedOptions: selectedOptions
+        }) : s;
+      }) : [].concat(_toConsumableArray__default["default"](currentSelections), [{
+        featureCodex: featureCodex,
+        selectedOptions: selectedOptions
+      }]);
+      var updated = _objectSpread(_objectSpread({}, prev), {}, _defineProperty__default["default"]({}, activeInstanceId, updatedSelections));
+
+      // Auto-advance logic
+      var currentFeature = currentFeatures.find(function (f) {
+        return f.codex === featureCodex;
+      });
+      if (currentFeatures.length === 1 && !(currentFeature !== null && currentFeature !== void 0 && currentFeature.multiSelect) && selectedOptions.length > 0) {
+        var isLastGroup = currentFeatureGroupIndex === featureGroups.length - 1;
+        var isLastInstance = filteredInstances.length === 0 || activeInstanceId === filteredInstances[filteredInstances.length - 1].id;
+        if (!isLastGroup || !isLastInstance) {
+          setTimeout(function () {
+            if (currentFeatureGroupIndex < featureGroups.length - 1) {
+              setCurrentFeatureGroupIndex(function (prevIdx) {
+                return prevIdx + 1;
+              });
+            }
+          }, 100);
+        } else if (isLastGroup && isLastInstance) {
+          setTimeout(function () {
+            var fullResult = calculateFullResult(updated);
+            setResult(fullResult);
+            onEvent === null || onEvent === void 0 || onEvent({
+              type: 'complete',
+              payload: fullResult
+            });
+          }, 100);
+        }
+      }
+      return updated;
+    });
+  }, [activeInstanceId, currentFeatures, currentFeatureGroupIndex, featureGroups.length, filteredInstances, calculateFullResult, onEvent]);
+  var handleNext = react.useCallback(function () {
+    var _filteredInstances$fi;
+    var isLastGroup = currentFeatureGroupIndex === featureGroups.length - 1;
+    var instanceIndex = (_filteredInstances$fi = filteredInstances.findIndex(function (i) {
+      return i.id === activeInstanceId;
+    })) !== null && _filteredInstances$fi !== void 0 ? _filteredInstances$fi : -1;
+    var isLastInstance = filteredInstances.length === 0 || instanceIndex === filteredInstances.length - 1;
+    if (!isLastGroup) {
+      setCurrentFeatureGroupIndex(function (prev) {
+        return prev + 1;
+      });
+    } else if (!isLastInstance) {
+      setActiveInstanceId(filteredInstances[instanceIndex + 1].id);
+      setCurrentFeatureGroupIndex(0);
+    } else {
+      var fullResult = calculateFullResult(instanceSelections);
+      setResult(fullResult);
+      onEvent === null || onEvent === void 0 || onEvent({
+        type: 'complete',
+        payload: fullResult
+      });
+    }
+  }, [currentFeatureGroupIndex, featureGroups.length, filteredInstances, activeInstanceId, instanceSelections, calculateFullResult, onEvent]);
+  var handleBack = react.useCallback(function () {
+    var _filteredInstances$fi2;
+    var instanceIndex = (_filteredInstances$fi2 = filteredInstances.findIndex(function (i) {
+      return i.id === activeInstanceId;
+    })) !== null && _filteredInstances$fi2 !== void 0 ? _filteredInstances$fi2 : -1;
+    if (currentFeatureGroupIndex > 0) {
+      setCurrentFeatureGroupIndex(function (prev) {
+        return prev - 1;
+      });
+    } else if (instanceIndex > 0) {
+      setActiveInstanceId(filteredInstances[instanceIndex - 1].id);
+      setCurrentFeatureGroupIndex(featureGroups.length - 1);
+    } else if (config.introText) {
+      setShowIntro(true);
+    }
+  }, [currentFeatureGroupIndex, filteredInstances, activeInstanceId, featureGroups.length, config.introText]);
+  var handleIntroNext = react.useCallback(function () {
+    return setShowIntro(false);
+  }, []);
+  var handleRetry = react.useCallback(function () {
+    setActiveInstanceId(filteredInstances.length > 0 ? filteredInstances[0].id : 'default');
+    setCurrentFeatureGroupIndex(0);
+    setResult(null);
+  }, [filteredInstances]);
+  var handleSwitchInstance = react.useCallback(function (instanceId) {
+    setActiveInstanceId(instanceId);
+    setCurrentFeatureGroupIndex(0);
+  }, []);
+  var handleCopySelections = react.useCallback(function (fromId, toId) {
+    var selectionsToCopy = instanceSelections[fromId] || [];
+    var updatedSelections = _objectSpread({}, instanceSelections);
+    var fromIndex = filteredInstances.findIndex(function (i) {
+      return i.id === fromId;
+    });
+    if (fromIndex !== -1) {
+      for (var i = fromIndex + 1; i < filteredInstances.length; i++) {
+        updatedSelections[filteredInstances[i].id] = _toConsumableArray__default["default"](selectionsToCopy);
+      }
+    } else {
+      updatedSelections[toId] = _toConsumableArray__default["default"](selectionsToCopy);
+    }
+    setInstanceSelections(updatedSelections);
+    var fullResult = calculateFullResult(updatedSelections);
+    setResult(fullResult);
+    onEvent === null || onEvent === void 0 || onEvent({
+      type: 'complete',
+      payload: fullResult
+    });
+  }, [instanceSelections, filteredInstances, calculateFullResult, onEvent]);
+  var canProceed = react.useMemo(function () {
+    return currentFeatures.every(function (feature) {
+      if (!feature.required) return true;
+      var selection = selections.find(function (s) {
+        return s.featureCodex === feature.codex;
+      });
+      return selection && selection.selectedOptions.length > 0;
+    });
+  }, [currentFeatures, selections]);
+  return {
+    selections: selections,
+    instanceSelections: instanceSelections,
+    activeInstanceId: activeInstanceId,
+    currentFeatureGroupIndex: currentFeatureGroupIndex,
+    result: result,
+    showIntro: showIntro,
+    featureGroups: featureGroups,
+    currentFeatures: currentFeatures,
+    canProceed: canProceed,
+    handleFeatureSelect: handleFeatureSelect,
+    handleNext: handleNext,
+    handleBack: handleBack,
+    handleIntroNext: handleIntroNext,
+    handleRetry: handleRetry,
+    handleSwitchInstance: handleSwitchInstance,
+    handleCopySelections: handleCopySelections,
+    setResult: setResult,
+    filteredInstances: filteredInstances
+  };
+};
+
+function getLocalizedText(texts, language) {
+  if (!texts) return '';
+  return texts[language] || texts.en || texts.de || '';
+}
+var QuickConfig = function QuickConfig(_ref) {
+  var config = _ref.config,
+    onEvent = _ref.onEvent,
+    initialContext = _ref.initialContext,
+    renderContentItem = _ref.renderContentItem;
+  var _useTranslation = divaCore.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var language = i18n.language;
+  var containerRef = react.useRef(null);
+  var handleCancel = onEvent ? function () {
+    return onEvent({
+      type: 'onCancel'
+    });
+  } : undefined;
+  var _useQuickConfig = useQuickConfig({
+      config: config,
+      onEvent: onEvent,
+      initialContext: initialContext
+    }),
+    selections = _useQuickConfig.selections,
+    activeInstanceId = _useQuickConfig.activeInstanceId,
+    currentFeatureGroupIndex = _useQuickConfig.currentFeatureGroupIndex,
+    result = _useQuickConfig.result,
+    showIntro = _useQuickConfig.showIntro,
+    featureGroups = _useQuickConfig.featureGroups,
+    currentFeatures = _useQuickConfig.currentFeatures,
+    canProceed = _useQuickConfig.canProceed,
+    handleFeatureSelect = _useQuickConfig.handleFeatureSelect,
+    handleNext = _useQuickConfig.handleNext,
+    handleBack = _useQuickConfig.handleBack,
+    handleIntroNext = _useQuickConfig.handleIntroNext,
+    handleRetry = _useQuickConfig.handleRetry,
+    handleSwitchInstance = _useQuickConfig.handleSwitchInstance,
+    handleCopySelections = _useQuickConfig.handleCopySelections,
+    filteredInstances = _useQuickConfig.filteredInstances;
+  react.useEffect(function () {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.scrollTo({
+      top: 0
+    });
+  }, [currentFeatureGroupIndex, activeInstanceId, showIntro, result]);
+  if (showIntro && config.introText) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: container,
+      ref: containerRef,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+        onCancel: handleCancel,
+        featureGroups: featureGroups,
+        currentFeatureGroupIndex: currentFeatureGroupIndex
+      }), getLocalizedText(config.configDescription, language) && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: configDescription,
+        dangerouslySetInnerHTML: {
+          __html: getLocalizedText(config.configDescription, language)
+        }
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: subContainer,
+        children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
+          dangerouslySetInnerHTML: {
+            __html: getLocalizedText(config.name, language)
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          dangerouslySetInnerHTML: {
+            __html: getLocalizedText(config.introText, language)
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(Navigation, {
+        onNext: handleIntroNext,
+        canProceed: true,
+        showBack: false,
+        nextLabel: t('quickconfig.next', {
+          defaultValue: 'Weiter'
+        })
+      })]
+    });
+  }
+  if (result) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: container,
+      ref: containerRef,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+        instances: filteredInstances,
+        activeInstanceId: activeInstanceId,
+        onSwitchInstance: handleSwitchInstance,
+        onCancel: handleCancel,
+        featureGroups: featureGroups,
+        currentFeatureGroupIndex: currentFeatureGroupIndex
+      }), getLocalizedText(config.resultDescription, language) && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: resultDescription,
+        dangerouslySetInnerHTML: {
+          __html: getLocalizedText(config.resultDescription, language)
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(ResultDisplay, {
+        activeInstanceId: activeInstanceId,
+        result: result,
+        config: config,
+        onRetry: handleRetry,
+        filteredInstances: filteredInstances,
+        onEvent: onEvent,
+        renderContentItem: renderContentItem
+      })]
+    });
+  }
+  var currentInstanceIndex = filteredInstances.findIndex(function (i) {
+    return i.id === activeInstanceId;
+  });
+  var hasNextInstance = filteredInstances.length > 1 && currentInstanceIndex < filteredInstances.length - 1;
+  var isLastStep = currentFeatureGroupIndex >= featureGroups.length - 1 && !hasNextInstance;
+  var nextLabel = isLastStep ? t('quickconfig.calculate', {
+    defaultValue: 'Berechnen'
+  }) : t('quickconfig.next', {
+    defaultValue: 'Weiter'
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: container,
+    ref: containerRef,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      instances: filteredInstances,
+      activeInstanceId: activeInstanceId,
+      onSwitchInstance: handleSwitchInstance,
+      onCancel: handleCancel,
+      featureGroups: featureGroups,
+      currentFeatureGroupIndex: currentFeatureGroupIndex
+    }), getLocalizedText(config.configDescription, language) && /*#__PURE__*/jsxRuntime.jsx("p", {
+      className: configDescription,
+      dangerouslySetInnerHTML: {
+        __html: getLocalizedText(config.configDescription, language)
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: subContainer,
+      children: currentFeatures.map(function (feature) {
+        return /*#__PURE__*/jsxRuntime.jsx(FeatureRenderer, {
+          feature: feature,
+          selection: selections.find(function (s) {
+            return s.featureCodex === feature.codex;
+          }),
+          onSelect: handleFeatureSelect,
+          selections: selections
+        }, feature.codex);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Navigation, {
+      onBack: handleBack,
+      onNext: handleNext,
+      onCopy: handleCopySelections,
+      canProceed: canProceed,
+      showBack: currentFeatureGroupIndex > 0,
+      nextLabel: nextLabel,
+      currentInstanceId: activeInstanceId,
+      language: language,
+      nextInstance: hasNextInstance ? filteredInstances[currentInstanceIndex + 1] : undefined
+    }, currentFeatureGroupIndex)]
+  });
+};
+
+exports.ConditionEvaluator = ConditionEvaluator;
+exports.QuickConfig = QuickConfig;
+exports.getTranslatedText = getTranslatedText;
+exports.validateQuickConfig = validateQuickConfig;