@crystaldesign/product-detail-page 25.3.0-beta.39 → 25.3.0-beta.42

package/build/esm/index.js

@@ -1,19 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { replaceTemplatesInObject, Action, ActionGroup, Text, Gallery, useCss, useProductData, replaceActions } from '@crystaldesign/widget-library';
+import { useTranslation, DivaUtils, getLogger, useDivaCore, DivaError } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Navigation, Thumbs } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { useLayer, Arrow } from 'react-laag';
-import QRCode from 'react-qr-code';
-import { useDivaCore, useTranslation, DivaUtils, getLogger, DivaError } from '@crystaldesign/diva-core';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import classnames from 'classnames';
-import flatten$1, { flatten } from 'flat';
-import _typeof from '@babel/runtime/helpers/typeof';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
 import cloneDeep from 'lodash/cloneDeep';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import flatten from 'flat';
 import DivaUtils$1 from '@crystaldesign/diva-utils';
 
 (function() {
@@ -28,432 +24,6 @@ import DivaUtils$1 from '@crystaldesign/diva-utils';
     globalThis.process = { env:env };
 })();
 
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ArActionIcon = function ArActionIcon(_ref) {
-  var _config$className;
-  var config = _ref.config,
-    url = _ref.url,
-    htmlArElement = _ref.htmlArElement;
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    isMobile = _useDivaCore$state.isMobile,
-    arViewerBaseUrl = _useDivaCore$state.apiConfig.arViewerBaseUrl;
-  var userAgent = navigator.userAgent.toLowerCase();
-  var supportAr = !(userAgent.includes('fxios') || userAgent.includes('firefox') || userAgent.includes('edgios') && userAgent.includes('iphone'));
-  var useTooltip = !isMobile || !supportAr;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setOpen = _useState2[1];
-  var _useLayer = useLayer({
-      isOpen: isOpen && useTooltip,
-      auto: true,
-      onOutsideClick: function onOutsideClick() {
-        return setOpen(false);
-      },
-      placement: 'top-start',
-      triggerOffset: 10
-    }),
-    arrowProps = _useLayer.arrowProps,
-    layerProps = _useLayer.layerProps,
-    renderLayer = _useLayer.renderLayer,
-    triggerProps = _useLayer.triggerProps;
-  useEffect(function () {
-    if (isOpen && !useTooltip) {
-      htmlArElement.activateAR();
-    }
-  }, [isOpen]);
-  useEffect(function () {
-    var _htmlArElement$shadow;
-    var element = (_htmlArElement$shadow = htmlArElement.shadowRoot) === null || _htmlArElement$shadow === void 0 ? void 0 : _htmlArElement$shadow.getElementById('default-ar-button');
-    if (element !== null && element !== void 0 && element.style) element.style.display = 'none';
-  }, []);
-  if (!url || !arViewerBaseUrl) return /*#__PURE__*/jsx(Fragment, {});
-  var finalURL = arViewerBaseUrl + '/arViewer?arMedia=' + url;
-  return /*#__PURE__*/jsx("div", _objectSpread$7(_objectSpread$7({}, triggerProps), {}, {
-    onClick: function onClick() {
-      return setOpen(!isOpen);
-    },
-    className: 'diva-pdp-ar-action-icon ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
-    children: isOpen && useTooltip && renderLayer(/*#__PURE__*/jsxs("div", _objectSpread$7(_objectSpread$7({}, layerProps), {}, {
-      className: "ar-tooltip",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "ar-tooltip-container",
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
-        children: [/*#__PURE__*/jsx(QRCode, {
-          value: finalURL,
-          className: "qr-code",
-          onClick: function onClick() {
-            return window.open(finalURL, '_blank');
-          }
-        }), /*#__PURE__*/jsx("div", {
-          className: "text",
-          children: !!config.text && config.text
-        }), /*#__PURE__*/jsx("div", {
-          className: "close",
-          onClick: function onClick() {
-            return setOpen(false);
-          }
-        })]
-      }), /*#__PURE__*/jsx(Arrow, _objectSpread$7({
-        onPointerEnterCapture: undefined,
-        onPointerLeaveCapture: undefined
-      }, arrowProps))]
-    })))
-  }));
-};
-
-function useGallery (_ref) {
-  var product = _ref.product,
-    _ref$config = _ref.config,
-    functionTypes = _ref$config.functionTypes,
-    add2DImage = _ref$config.add2DImage,
-    add3DImageAsFallback = _ref$config.add3DImageAsFallback;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    medias = _useState2[0],
-    setMedias = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    sirvLoaded = _useState4[0],
-    setSirvLoaded = _useState4[1];
-  var _useDivaCore = useDivaCore(),
-    baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
-  useEffect(function () {
-    var _product$media;
-    var newMedias = [];
-    var _loop = function _loop() {
-      var _product$media$filter, _product$media2;
-      var functionType = functionTypes[i];
-      newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray((_product$media$filter = (_product$media2 = product.media) === null || _product$media2 === void 0 ? void 0 : _product$media2.filter(function (m, i) {
-        return m.functionType === functionType;
-      })) !== null && _product$media$filter !== void 0 ? _product$media$filter : []));
-    };
-    for (var i = 0; i < functionTypes.length; i++) {
-      _loop();
-    }
-    if (add3DImageAsFallback && product.image && !((_product$media = product.media) !== null && _product$media !== void 0 && _product$media.find(function (m) {
-      return m.functionType == 'ART' || m.functionType == 'PROD';
-    }))) newMedias.push({
-      url: product.image
-    });
-    if (add2DImage && product.image2D) newMedias.push({
-      url: product.image2D
-    });
-    setMedias(newMedias);
-  }, [product]);
-  useEffect(function () {
-    var hasSirvMedia = false;
-    var _loop2 = function _loop2(i) {
-      if (medias.find(function (m) {
-        var _m$url;
-        return (_m$url = m.url) === null || _m$url === void 0 ? void 0 : _m$url.includes(baseSirvUrls[i]);
-      })) hasSirvMedia = true;
-    };
-    for (var i = 0; i < (baseSirvUrls !== null && baseSirvUrls !== void 0 ? baseSirvUrls : []).length && !hasSirvMedia; i++) {
-      _loop2(i);
-    }
-    if (!hasSirvMedia) return;
-    var loadSirv = function loadSirv() {
-      return new Promise(function (resolve) {
-        var script = document.createElement('script');
-        script.src = 'https://scripts.sirv.com/sirvjs/v3/sirv.js?modules=lazyimage,zoom,spin';
-        script.type = 'text/javascript';
-        script.async = true;
-        script.onload = resolve;
-        document.body.appendChild(script);
-      });
-    };
-    loadSirv().then(function () {
-      setSirvLoaded(true);
-    });
-  }, [medias]);
-  return {
-    medias: medias,
-    sirvLoaded: sirvLoaded
-  };
-}
-
-function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SirvMediaItem = function SirvMediaItem(_ref) {
-  var _ref$media = _ref.media,
-    url = _ref$media.url,
-    functionType = _ref$media.functionType,
-    _ref$config = _ref.config,
-    sirvProps = _ref$config.sirvProps,
-    specificSirvProps = _ref$config.specificSirvProps,
-    sirvWrapperProps = _ref$config.sirvWrapperProps;
-  var props = functionType && specificSirvProps !== null && specificSirvProps !== void 0 && specificSirvProps[functionType] ? specificSirvProps[functionType] : sirvProps;
-  var urlObj = new URL(url !== null && url !== void 0 ? url : '');
-  urlObj.searchParams.append('crop.type', 'trim');
-  urlObj.searchParams.append('crop.pad.x', '10%');
-  urlObj.searchParams.append('crop.pad.y', '10%');
-  return /*#__PURE__*/jsx("div", _objectSpread$6(_objectSpread$6({
-    className: "Sirv custom"
-  }, sirvWrapperProps), {}, {
-    children: /*#__PURE__*/jsx("div", _objectSpread$6(_objectSpread$6({
-      "data-src": urlObj.toString()
-    }, props), {}, {
-      className: 'diva-sirv-img'
-    }))
-  }));
-};
-
-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 divaAr = "diva-ar-msJ2C";
-var css_248z$2 = "/* This keeps child nodes hidden while the element loads */\n.diva-ar-msJ2C :not(:defined) > * {\n  display: none;\n}\n\nmodel-viewer.diva-ar-msJ2C {\n  overflow-x: hidden;\n}\n\n@keyframes circle-qKefP {\n  from {\n    transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);\n  }\n  to {\n    transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);\n  }\n}\n\n@keyframes elongate-EJuQ- {\n  from {\n    transform: translateX(100px);\n  }\n  to {\n    transform: translateX(-100px);\n  }\n}\n\nmodel-viewer.diva-ar-msJ2C > #ar-prompt {\n  position: absolute;\n  left: 50%;\n  bottom: 175px;\n  animation: elongate-EJuQ- 2s infinite ease-in-out alternate;\n  display: none;\n}\n\nmodel-viewer.diva-ar-msJ2C[ar-status='session-started'] > #ar-prompt {\n  display: block;\n}\n\nmodel-viewer.diva-ar-msJ2C > #ar-prompt > img {\n  animation: circle-qKefP 4s linear infinite;\n}\n\nmodel-viewer.diva-ar-msJ2C > #ar-failure {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 175px;\n  display: none;\n}\n\nmodel-viewer.diva-ar-msJ2C[ar-tracking='not-tracking'] > #ar-failure {\n  display: block;\n}\n";
-styleInject(css_248z$2);
-
-if (!window.customElements.get('model-viewer')) {
-  import('@google/model-viewer');
-}
-var ArViewer = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  _ref.cameraArButton;
-    var media = _ref.media;
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    baseCdnUrl = _useDivaCore$state.apiConfig.baseCdnUrl,
-    isFirefox = _useDivaCore$state.isFirefox;
-  return /*#__PURE__*/jsxs("model-viewer", {
-    ref: ref,
-    src: media.url,
-    "environment-image": 'neutral',
-    shadowIntensity: 1,
-    shadowSoftness: 1,
-    exposure: 1,
-    "camera-controls": true,
-    ar: true,
-    "ar-modes": !isFirefox ? 'webxr quick-look' : '',
-    "ar-scale": 'fixed',
-    style: {
-      overscrollBehavior: 'none',
-      width: '100%',
-      height: '100%',
-      touchAction: 'none'
-    },
-    "class": classnames(divaAr, 'diva-pdp-ar'),
-    "touch-action": "pan-y",
-    children: [/*#__PURE__*/jsx("div", {
-      id: "ar-prompt",
-      children: /*#__PURE__*/jsx("img", {
-        src: baseCdnUrl + '/static/images/hand.png'
-      })
-    }), /*#__PURE__*/jsx("button", {
-      id: "ar-failure",
-      children: "AR is not tracking!"
-    })]
-  });
-});
-
-var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var media = _ref.media,
-    config = _ref.config;
-    _ref.isCurrentlyVisible;
-  var useSirv = false;
-  var _useDivaCore = useDivaCore(),
-    baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
-  if (media.url && baseSirvUrls !== null && baseSirvUrls !== void 0 && baseSirvUrls.find(function (base) {
-    var _media$url;
-    return (_media$url = media.url) === null || _media$url === void 0 ? void 0 : _media$url.includes(base);
-  })) useSirv = true;
-  if (useSirv) return /*#__PURE__*/jsx(SirvMediaItem, {
-    media: media,
-    config: config
-  }, media.url);
-  if (media.mediaType == 'AR') return /*#__PURE__*/jsx(ArViewer, {
-    ref: ref,
-    media: media
-  });
-  return /*#__PURE__*/jsx("img", {
-    className: "gallery-image",
-    src: media.url
-  }, media.url);
-});
-
-var Thumb = function Thumb(_ref) {
-  var _media$url;
-  var media = _ref.media,
-    medias = _ref.medias;
-  var _useDivaCore = useDivaCore(),
-    baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
-  function addCrop(url) {
-    var res = new URL(url);
-    if (url && baseSirvUrls !== null && baseSirvUrls !== void 0 && baseSirvUrls.find(function (base) {
-      return url.includes(base);
-    })) {
-      res.searchParams.append('crop.type', 'trim');
-      res.searchParams.append('crop.pad.x', '10%');
-      res.searchParams.append('crop.pad.y', '10%');
-    }
-    return res;
-  }
-  if (media.mediaType == 'AR') {
-    var _ref2, _medias$find$url, _medias$find;
-    var mainImageUrl = addCrop((_ref2 = (_medias$find$url = (_medias$find = medias.find(function (m) {
-      return m.functionType == 'ART';
-    })) === null || _medias$find === void 0 ? void 0 : _medias$find.url) !== null && _medias$find$url !== void 0 ? _medias$find$url : medias[0].url) !== null && _ref2 !== void 0 ? _ref2 : '');
-    return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("img", {
-        className: "gallery-image-thumb",
-        src: mainImageUrl.toString()
-      }), /*#__PURE__*/jsx("div", {
-        className: 'ar-icon-thumb',
-        style: {
-          backgroundColor: 'white',
-          border: 'solid',
-          borderWidth: '0.1px',
-          borderRadius: '100%'
-        }
-      })]
-    });
-  }
-  var urlObj = addCrop((_media$url = media.url) !== null && _media$url !== void 0 ? _media$url : '');
-  return /*#__PURE__*/jsx("img", {
-    className: "gallery-image-thumb",
-    src: urlObj.toString()
-  });
-};
-
-var gallery = "gallery-jOl8d";
-var css_248z$1 = ".gallery-jOl8d .gallery-thumb .swiper-slide {\n  opacity: 0.4;\n}\n.gallery-jOl8d .gallery-thumb .swiper-slide-thumb-active {\n  opacity: 1;\n}\n\n/*navigation*/\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev,\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  top: var(--swiper-navigation-top-offset, 50%);\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\n  height: var(--swiper-navigation-size);\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--swiper-theme-color);\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev.swiper-button-disabled,\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev.swiper-button-hidden,\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-navigation-disabled .swiper-button-prev,\n.gallery-jOl8d.diva-pdp-gallery .swiper-navigation-disabled .swiper-button-next {\n  display: none !important;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev svg,\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next svg {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  transform-origin: center;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev svg,\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-next svg {\n  transform: rotate(180deg);\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev,\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-next {\n  left: 10px;\n  left: var(--swiper-navigation-sides-offset, 10px);\n  right: auto;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next,\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-lock {\n  display: none;\n}\n/* Navigation font start */\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev:after,\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next:after {\n  text-transform: none !important;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev:after,\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: var(--swiper-navigation-size);\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev:after,\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next,\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next:after,\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n/* Navigation font end */\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.gallery-jOl8d.diva-pdp-gallery .swiper {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-android .swiper-slide,\n.gallery-jOl8d.diva-pdp-gallery .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-slide {\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.gallery-jOl8d.diva-pdp-gallery .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-autoheight,\n.gallery-jOl8d.diva-pdp-gallery .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
-styleInject(css_248z$1);
-
-var PageNumber = function PageNumber(_ref) {
-  var index = _ref.index,
-    length = _ref.length;
-  return /*#__PURE__*/jsx("div", {
-    className: "gallery-page-number",
-    children: index + 1 + '/' + length
-  });
-};
-
-function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var focusable = '.smv-cursor-zoom-in, .sirv-zoom-wrapper, .sirv-zoom-map-lens ,.sirv-zoom-map, .sirv-deepzoom, .smv-icon, canvas, .diva-sirv-img, input, select, option, textarea, button, video, label';
-var noSwiping = 'canvas, model-viewer, .sirv-zoom-map, .zoom-controls, .smv-icon';
-var Gallery = function Gallery(_ref) {
-  var _medias$find;
-  var config = _ref.config,
-    product = _ref.product;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    thumbsSwiper = _useState2[0],
-    setThumbsSwiper = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    swiper = _useState4[0],
-    setSwiper = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    currentIndex = _useState6[0],
-    setCurrentIndex = _useState6[1];
-  var className = config.className;
-  var _useGallery = useGallery({
-      product: product,
-      config: config
-    }),
-    medias = _useGallery.medias;
-  var htmlArElement = useRef(null);
-  if (!medias.length) return /*#__PURE__*/jsx(Fragment, {});
-  var arUrl = (_medias$find = medias.find(function (m) {
-    return m.mediaType == 'AR';
-  })) === null || _medias$find === void 0 ? void 0 : _medias$find.url;
-  return /*#__PURE__*/jsxs("div", {
-    className: classnames(gallery, ' diva-pdp-gallery', className),
-    children: [config.arIconProps && (htmlArElement === null || htmlArElement === void 0 ? void 0 : htmlArElement.current) && arUrl && /*#__PURE__*/jsx(ArActionIcon, {
-      config: config.arIconProps,
-      url: arUrl,
-      htmlArElement: htmlArElement === null || htmlArElement === void 0 ? void 0 : htmlArElement.current
-    }), config.showPageNumber && swiper && /*#__PURE__*/jsx(PageNumber, {
-      index: currentIndex,
-      length: medias.length
-    }), /*#__PURE__*/jsx(Swiper, _objectSpread$5(_objectSpread$5({
-      onSwiper: setSwiper,
-      resizeObserver: false,
-      onSlideChange: function onSlideChange(swiper) {
-        setCurrentIndex(swiper.realIndex);
-      },
-      focusableElements: focusable,
-      noSwipingSelector: noSwiping,
-      navigation: true,
-      thumbs: {
-        swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
-      },
-      modules: [Navigation, Thumbs],
-      className: "gallery-main"
-    }, config.sliderProp), {}, {
-      children: medias.map(function (media, i) {
-        return /*#__PURE__*/jsx(SwiperSlide, {
-          id: 'gallery media index ' + i,
-          children: /*#__PURE__*/jsx(MediaItem, {
-            media: media,
-            config: config,
-            isCurrentlyVisible: i === (swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex),
-            ref: htmlArElement
-          })
-        }, i);
-      })
-    })), /*#__PURE__*/jsx(Swiper, _objectSpread$5(_objectSpread$5({
-      onSwiper: setThumbsSwiper,
-      resizeObserver: false,
-      slidesPerView: medias.length < 5 ? medias.length : 6,
-      modules: [Navigation, Thumbs],
-      className: "gallery-thumb"
-    }, config.thumbSliderProp), {}, {
-      children: medias.map(function (media, i) {
-        return /*#__PURE__*/jsx(SwiperSlide, {
-          id: 'thumb media index ' + i,
-          children: /*#__PURE__*/jsx(Thumb, {
-            media: media,
-            medias: medias
-          }, i)
-        }, i + 't');
-      })
-    }))]
-  });
-};
-
-var Text = function Text(_ref) {
-  var _config$className;
-  var config = _ref.config;
-  return /*#__PURE__*/jsx("div", {
-    className: 'diva-pdp-text ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
-    dangerouslySetInnerHTML: {
-      __html: config.text.replaceAll('\n', '<br/>')
-    }
-  });
-};
-
 var Price = function Price(_ref) {
   var _config$className;
   var addedPrice = _ref.addedPrice,
@@ -505,42 +75,32 @@ var Info = function Info(_ref) {
   throw new Error('Info type ' + config.type + ' not implemented!');
 };
 
-var PdpAction = function PdpAction(_ref) {
-  var _ref$config = _ref.config,
-    icon = _ref$config.icon,
-    iconClass = _ref$config.iconClass,
-    textClass = _ref$config.textClass,
-    onClick = _ref$config.onClick,
-    onDoubleClick = _ref$config.onDoubleClick,
-    text = _ref$config.text,
-    className = _ref$config.className;
-  return /*#__PURE__*/jsxs("button", {
-    className: 'diva-pdp-action ' + (className !== null && className !== void 0 ? className : ''),
-    onDoubleClick: onDoubleClick ? onClick : undefined,
-    onClick: !onDoubleClick ? onClick : undefined,
-    children: [typeof text == 'string' && /*#__PURE__*/jsx("div", {
-      className: textClass,
-      children: text
-    }), icon !== undefined && /*#__PURE__*/jsx("img", {
-      src: icon
-    }), iconClass !== undefined && /*#__PURE__*/jsx("div", {
-      className: iconClass
-    })]
-  });
-};
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
 
-var Actions = function Actions(_ref) {
-  var _config$className, _config$actions;
-  var config = _ref.config;
-  return /*#__PURE__*/jsx("div", {
-    className: 'diva-pdp-actions ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
-    children: (_config$actions = config.actions) === null || _config$actions === void 0 ? void 0 : _config$actions.map(function (a) {
-      return /*#__PURE__*/jsx(PdpAction, {
-        config: a
-      }, a.id);
-    })
-  });
-};
+  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 variants = "variants-HWTGr";
 var css_248z = "/*navigation*/\n.variants-HWTGr.classification-group .swiper-button-prev,\n.variants-HWTGr.classification-group .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  top: var(--swiper-navigation-top-offset, 50%);\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\n  height: var(--swiper-navigation-size);\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--swiper-theme-color);\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.variants-HWTGr.classification-group .swiper-button-prev.swiper-button-disabled,\n.variants-HWTGr.classification-group .swiper-button-next.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n.variants-HWTGr.classification-group .swiper-button-prev.swiper-button-hidden,\n.variants-HWTGr.classification-group .swiper-button-next.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n.variants-HWTGr.classification-group .swiper-navigation-disabled .swiper-button-prev,\n.variants-HWTGr.classification-group .swiper-navigation-disabled .swiper-button-next {\n  display: none !important;\n}\n.variants-HWTGr.classification-group .swiper-button-prev svg,\n.variants-HWTGr.classification-group .swiper-button-next svg {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  transform-origin: center;\n}\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev svg,\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-next svg {\n  transform: rotate(180deg);\n}\n.variants-HWTGr.classification-group .swiper-button-prev,\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-next {\n  left: 10px;\n  left: var(--swiper-navigation-sides-offset, 10px);\n  right: auto;\n}\n.variants-HWTGr.classification-group .swiper-button-next,\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.variants-HWTGr.classification-group .swiper-button-lock {\n  display: none;\n}\n/* Navigation font start */\n.variants-HWTGr.classification-group .swiper-button-prev:after,\n.variants-HWTGr.classification-group .swiper-button-next:after {\n  text-transform: none !important;\n}\n.variants-HWTGr.classification-group .swiper-button-prev:after,\n.variants-HWTGr.classification-group .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: var(--swiper-navigation-size);\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n.variants-HWTGr.classification-group .swiper-button-prev:after,\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n.variants-HWTGr.classification-group .swiper-button-next,\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.variants-HWTGr.classification-group .swiper-button-next:after,\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n/* Navigation font end */\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.variants-HWTGr.classification-group .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.variants-HWTGr.classification-group .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.variants-HWTGr.classification-group .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.variants-HWTGr.classification-group .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.variants-HWTGr.classification-group .swiper-android .swiper-slide,\n.variants-HWTGr.classification-group .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.variants-HWTGr.classification-group .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.variants-HWTGr.classification-group .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.variants-HWTGr.classification-group .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.variants-HWTGr.classification-group .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.variants-HWTGr.classification-group .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.variants-HWTGr.classification-group .swiper-autoheight,\n.variants-HWTGr.classification-group .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.variants-HWTGr.classification-group .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.variants-HWTGr.classification-group .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.variants-HWTGr.classification-group .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.variants-HWTGr.classification-group .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.variants-HWTGr.classification-group .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .variants-HWTGr.classification-group .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .variants-HWTGr.classification-group .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.variants-HWTGr.classification-group .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.variants-HWTGr.classification-group .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.variants-HWTGr.classification-group .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.variants-HWTGr.classification-group .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
@@ -585,90 +145,8 @@ var compareCodexes = function compareCodexes(codex1, codex2) {
   return false;
 };
 
-/**
- *  Replaces the template strings in the content with the actual product data
- *
- * @param content the content to parse
- * @param product the product data to use
- * @param language the language to use
- */
-function replaceTemplateStrings (content, product, language) {
-  if (typeof content == 'string') return content;
-  var flatProduct = flatten(product);
-  return recursiveReplaceTemplates(content, flatProduct, language);
-}
-
-/**
- * Replaces the template string in all fields of the content object with the actual product data
- *
- * @param content the content to parse
- * @param product the flattend version of the product data
- */
-function recursiveReplaceTemplates(content, product, language) {
-  for (var _i = 0, _Object$entries = Object.entries(content); _i < _Object$entries.length; _i++) {
-    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-      key = _Object$entries$_i[0],
-      value = _Object$entries$_i[1];
-    if (typeof content[key] === 'string' && key != 'link') {
-      content[key] = replaceTemplateString(value, product, language);
-    } else if (_typeof(content[key]) === 'object') {
-      //check if the object is a language dictionary, if so replace it with the value for the current language
-      var keys = Object.keys(content[key]);
-      if (keys.includes(language) || keys.includes('de')) {
-        var _content$key$language;
-        content[key] = replaceTemplateString((_content$key$language = content[key][language]) !== null && _content$key$language !== void 0 ? _content$key$language : content[key].de, product, language);
-      } else {
-        content[key] = recursiveReplaceTemplates(content[key], product, language);
-      }
-    }
-  }
-  return content;
-}
-
-/**
- * replaces the templates in on string with the actual product data
- *
- * @param template the templatestring to parse
- * @param product the flattend version of the product data
- * @param locale the locale to use, if any
- */
-function replaceTemplateString(template, product, locale) {
-  var matches = checkForTemplateStrings(template);
-  for (var _i2 = 0, _matches = matches; _i2 < _matches.length; _i2++) {
-    var _product$locale, _product, _product2;
-    var match = _matches[_i2];
-    //if a locale is provided, check if there is a locale version of the field (fallback is 'de'), if not use the default
-    var productField = match.replace('product.', '');
-    var value = void 0;
-    if (locale) value = (_product$locale = (_product = product[productField + '_locales']) === null || _product === void 0 ? void 0 : _product[locale]) !== null && _product$locale !== void 0 ? _product$locale : (_product2 = product[productField + '_locales']) === null || _product2 === void 0 ? void 0 : _product2.de;
-    if (!value) value = product[productField];
-    if (value != undefined) template = template.replace('${' + match + '}', value);
-  }
-  return template;
-}
-
-/**
- *  Extracts all substrings that are inside ${...}
- *
- * @param input the template to parse
- * @returns a list of values extracted form the template
- */
-function checkForTemplateStrings(input) {
-  // Regular expression to match ${...}
-  var regex = /\$\{([^}]+)\}/g;
-  var matches = [];
-  var match;
-
-  // Find all matches
-  while ((match = regex.exec(input)) !== null) {
-    // Extract the content inside ${...}
-    matches.push(match[1]);
-  }
-  return matches;
-}
-
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(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 Group = function Group(_ref) {
   var _config$classificatio, _config$classificatio2, _group$, _classificationConfig;
   var onChange = _ref.onChange,
@@ -706,7 +184,11 @@ var Group = function Group(_ref) {
     var variant = getVariantFromCodex(product, products, groups, groupKey, item.codex);
     var link = (_classificationConfig3 = classificationConfig === null || classificationConfig === void 0 || (_classificationConfig4 = classificationConfig.action) === null || _classificationConfig4 === void 0 ? void 0 : _classificationConfig4.link) !== null && _classificationConfig3 !== void 0 ? _classificationConfig3 : (_config$defaultVarian = config.defaultVariantAction) === null || _config$defaultVarian === void 0 ? void 0 : _config$defaultVarian.link;
     if (link) {
-      link = replaceTemplateString(link, flatten(variant), i18n.language);
+      var _replaceTemplatesInOb = replaceTemplatesInObject({
+          link: link
+        }, variant, i18n.language),
+        newLink = _replaceTemplatesInOb.link;
+      link = newLink;
     }
     if (uiType == 'IMAGE_AND_TEXT' && image) {
       return /*#__PURE__*/jsxs("div", {
@@ -783,12 +265,12 @@ var Group = function Group(_ref) {
     children: [typeof classificationText == 'string' && /*#__PURE__*/jsx("div", {
       className: "classification-group-title",
       children: classificationText
-    }), /*#__PURE__*/jsx(Swiper, _objectSpread$4(_objectSpread$4({
+    }), /*#__PURE__*/jsx(Swiper, _objectSpread$3(_objectSpread$3({
       onSwiper: setSwiperRef,
       className: "classification-variants-slider",
       resizeObserver: false,
       modules: [Navigation]
-    }, _objectSpread$4(_objectSpread$4({}, config.sliderProp), classificationConfig !== null && classificationConfig !== void 0 && classificationConfig.sliderProp ? classificationConfig === null || classificationConfig === void 0 ? void 0 : classificationConfig.sliderProp : {})), {}, {
+    }, _objectSpread$3(_objectSpread$3({}, config.sliderProp), classificationConfig !== null && classificationConfig !== void 0 && classificationConfig.sliderProp ? classificationConfig === null || classificationConfig === void 0 ? void 0 : classificationConfig.sliderProp : {})), {}, {
       children: elements.map(function (e, index) {
         return /*#__PURE__*/jsx(SwiperSlide, {
           style: {
@@ -801,7 +283,7 @@ var Group = function Group(_ref) {
           children: e
         }, index);
       })
-    })), moreIconVisible && /*#__PURE__*/jsx(PdpAction, {
+    })), moreIconVisible && /*#__PURE__*/jsx(Action, {
       config: config.moreIcon
     })]
   });
@@ -1002,17 +484,6 @@ var Variants = function Variants(_ref) {
   });
 };
 
-var ActionIcon = function ActionIcon(_ref) {
-  var _config$className;
-  var config = _ref.config;
-  return /*#__PURE__*/jsx("div", {
-    className: 'diva-pdp-action-icon ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
-    children: config.action && /*#__PURE__*/jsx(PdpAction, {
-      config: config.action
-    })
-  });
-};
-
 var Tabs = function Tabs(_ref) {
   var _ref$config = _ref.config,
     tabs = _ref$config.tabs,
@@ -1066,7 +537,7 @@ var _UiElemet = function UiElemet(_ref) {
     case 'GALLERY':
       return /*#__PURE__*/jsx(Gallery, {
         config: content,
-        product: product
+        products: [product]
       });
     case 'TEXT':
       return /*#__PURE__*/jsx(Text, {
@@ -1083,7 +554,7 @@ var _UiElemet = function UiElemet(_ref) {
         config: content
       });
     case 'ACTIONS':
-      return /*#__PURE__*/jsx(Actions, {
+      return /*#__PURE__*/jsx(ActionGroup, {
         config: content
       });
     case 'VARIANTS':
@@ -1093,10 +564,6 @@ var _UiElemet = function UiElemet(_ref) {
         onChange: selectProduct,
         product: product
       });
-    case 'ACTIONICON':
-      return /*#__PURE__*/jsx(ActionIcon, {
-        config: content
-      });
     case 'TABS':
       return /*#__PURE__*/jsx(Tabs, {
         config: content,
@@ -1120,8 +587,8 @@ var _UiElemet = function UiElemet(_ref) {
   }
 };
 
-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(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; }
+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(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; }
 
 /**
  * Filters the content based on the current settings
@@ -1134,7 +601,7 @@ function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t
  */
 function filterContent (content, isMobile, isPortrait, product, language) {
   if (typeof content == 'string') return content;
-  var flatProduct = flatten$1(product);
+  var flatProduct = flatten(product);
   return filterContent$1(content, isMobile, isPortrait, flatProduct, language);
 }
 
@@ -1159,7 +626,7 @@ function filterContent$1(content, isMobile, isPortrait, product, language) {
       if (innerContent) filteredContainer.push(innerContent);
     }
     if (filteredContainer.length === 0) return null;
-    return _objectSpread$3(_objectSpread$3({}, content), {}, _defineProperty({}, key, filteredContainer));
+    return _objectSpread$2(_objectSpread$2({}, content), {}, _defineProperty({}, key, filteredContainer));
   }
   if (isVisible(content, isMobile, isPortrait, product, language)) {
     return content;
@@ -1181,7 +648,7 @@ function isVisible(content, isMobile, isPortrait, product, language) {
   if (typeof content == 'string') {
     return true;
   }
-  var rule = recursiveReplaceTemplates((_content$rule = content.rule) !== null && _content$rule !== void 0 ? _content$rule : {}, product, language);
+  var rule = replaceTemplatesInObject((_content$rule = content.rule) !== null && _content$rule !== void 0 ? _content$rule : {}, product, language);
   var visibleForDevices = content.onlyFor || ((_content$rule2 = content.rule) === null || _content$rule2 === void 0 ? void 0 : _content$rule2.visibleForDevices);
   if (visibleForDevices !== null && visibleForDevices !== void 0 && visibleForDevices.includes('DESKTOP') && isMobile) return false;
   if (visibleForDevices !== null && visibleForDevices !== void 0 && visibleForDevices.includes('LANDSCAPE') && (!isMobile || !isPortrait)) return false;
@@ -1200,8 +667,8 @@ function isVisible(content, isMobile, isPortrait, product, language) {
   return true;
 }
 
-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(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; }
+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(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; }
 /**
  * Replaces the references in the content with the actual content
  * @param content the current content to parse
@@ -1224,27 +691,9 @@ function resolveReferences(content, fullContent) {
       var element = resolveReferences(container[i], fullContent);
       parsedContainer.push(element);
     }
-    return _objectSpread$2(_objectSpread$2({}, content), {}, {
+    return _objectSpread$1(_objectSpread$1({}, content), {}, {
       containers: parsedContainer
     });
-  } else if ('actions' in content) {
-    var _content$actions;
-    //resolve references in actions arrays, i.e. ActionGroupConfig
-    var actions = (_content$actions = content.actions) !== null && _content$actions !== void 0 ? _content$actions : [];
-    for (var _i = 0; _i < actions.length; _i++) {
-      var openMenu = actions[_i].openMenu;
-      if (openMenu) {
-        openMenu.content = resolveReferences(openMenu.content, fullContent);
-      }
-    }
-    return content;
-  } else if ('action' in content) {
-    var _content$action;
-    //resolve references in single action, i.e. ActionIconConfig, VariantsConfig
-    if ((_content$action = content.action) !== null && _content$action !== void 0 && _content$action.openMenu) {
-      content.action.openMenu.content = resolveReferences(content.action.openMenu.content, fullContent);
-    }
-    return content;
   } else {
     return content;
   }
@@ -1272,132 +721,6 @@ function getContentById(id, content) {
   return null;
 }
 
-/**
- * Make sure that the CSS is in the dome and that it has the current content
- *
- * @param url an url to a css file
- * @param css the css content as text
- */
-function updateCssInDom (url, css) {
-  if (url) {
-    var element = document.getElementById('DIVA-PDP-STYLE-URL');
-    if (element) {
-      var _element$parentNode;
-      (_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || _element$parentNode.removeChild(element);
-    }
-    element = document.createElement('link');
-    element.rel = 'stylesheet';
-    element.type = 'text/css';
-    element.id = 'DIVA-PDP-STYLE-URL';
-    element.href = url;
-    document.head.appendChild(element);
-  }
-  if (css) {
-    var finalCss = Array.isArray(css) ? css.join(' ') : css;
-    var _element = document.getElementById('DIVA-PDP-STYLE');
-    if (_element) {
-      var _element$parentNode2;
-      (_element$parentNode2 = _element.parentNode) === null || _element$parentNode2 === void 0 || _element$parentNode2.removeChild(_element);
-    }
-    _element = document.createElement('style');
-    _element.type = 'text/css';
-    _element.id = 'DIVA-PDP-STYLE';
-    _element.appendChild(document.createTextNode(finalCss));
-    document.head.appendChild(_element);
-  }
-}
-
-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(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; }
-
-/**
- * Replace the configurated actions with an onClick function
- *
- * Needs to be called after the references are resolved, but before the templates are replaced.
- * The onClick function accepts a product id, which can differ from the current product, so the translation has to be done in the function
- *
- * @param content the content to replace the actions in
- * @param productVariants the current product variants, needed for the side menu renderer
- * @param product the current product, needed for the side menu renderer and the is also passed with the event
- * @param language the language to use, needed to translated the action
- * @param selectProduct the function to select a product, needed for the side menu renderer
- * @param openComponentFunction the function to open a component, called when an action with openComponent config is clicked
- * @param onEventFunction the function to handle an event, called when an action with onEvent config is clicked, the current product is passed with the event
- * @param openSideMenuFunction the function to open a side menu, called when an action with openMenu config is clicked, a side menu is opened with the rendered content
- */
-function replaceActions (content, productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction) {
-  if (typeof content == 'string') return content;
-  return recursiveReplaceActions(content, productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction);
-}
-
-/**
- * Recursively replace the actions in the content with an onClick function
- *
- * @param content the content to replace the actions in
- * @param productVariants the current product variants
- * @param product the current product
- * @param language the language to use
- * @param selectProduct the function to select a product
- * @param openComponentFunction the function to open a component
- * @param onEventFunction the function to handle an event
- * @param openSideMenuFunction the function to open a side menu
- */
-function recursiveReplaceActions(content, productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction) {
-  var keys = Object.keys(content);
-  var openComponent = undefined;
-  var onEvent = undefined;
-  var openMenu = undefined;
-  for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
-    var key = _keys[_i];
-    if (key === 'openComponent') {
-      openComponent = content[key];
-      delete content[key];
-    } else if (key === 'onEvent') {
-      onEvent = content[key];
-      delete content[key];
-    } else if (key === 'openMenu') {
-      openMenu = content[key];
-      delete content[key];
-    } else if (_typeof(content[key]) === 'object') {
-      content[key] = recursiveReplaceActions(content[key], productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction);
-    }
-  }
-  if (openComponent || onEvent || openMenu) {
-    content['onClick'] = function (e, productId) {
-      var _productVariants$find;
-      var currentProduct = (_productVariants$find = productVariants.find(function (variant) {
-        return variant._id === productId;
-      })) !== null && _productVariants$find !== void 0 ? _productVariants$find : product;
-      var flatProduct = flatten$1(currentProduct);
-      if (openComponent) {
-        var translatedOpenComponent = recursiveReplaceTemplates(openComponent, flatProduct, language);
-        openComponentFunction(translatedOpenComponent);
-      }
-      if (onEvent) {
-        onEventFunction({
-          type: onEvent,
-          data: currentProduct
-        });
-      }
-      if (openMenu) {
-        var translatedOpenMenu = recursiveReplaceTemplates(openMenu, flatProduct, language);
-        openSideMenuFunction(_objectSpread$1(_objectSpread$1({}, translatedOpenMenu), {}, {
-          content: /*#__PURE__*/React.createElement(_UiElemet, {
-            content: translatedOpenMenu.content,
-            product: currentProduct,
-            productVariants: productVariants,
-            selectProduct: selectProduct
-          })
-        }));
-      }
-    };
-  }
-  return content;
-}
-
-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; }
 var LOG = getLogger('ProductDetailPage', 'ProductDetailPage');
 function useDetailPage(_ref) {
   var settings = _ref.settings,
@@ -1409,131 +732,46 @@ function useDetailPage(_ref) {
     isPortrait = _useDivaCore$state$di.isPortrait,
     _useDivaCore$actions = _useDivaCore.actions,
     onEvent = _useDivaCore$actions.onEvent,
-    openComponent = _useDivaCore$actions.openComponent,
-    openSideMenu = _useDivaCore$actions.openSideMenu,
-    subscribeEvents = _useDivaCore$actions.subscribeEvents,
+    openComponent = _useDivaCore$actions.openComponent;
+    _useDivaCore$actions.openSideMenu;
+    var subscribeEvents = _useDivaCore$actions.subscribeEvents,
     unSubscribeEvents = _useDivaCore$actions.unSubscribeEvents,
-    closeComponentInFullscreen = _useDivaCore$actions.closeComponentInFullscreen,
-    handler = _useDivaCore.handler;
+    closeComponentInFullscreen = _useDivaCore$actions.closeComponentInFullscreen;
   var _useTranslation = useTranslation(),
     i18n = _useTranslation.i18n;
-  var _useState = useState(true),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(false),
+    parsingError = _useState2[0],
+    setError = _useState2[1];
+  var _useState3 = useState(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
-    error = _useState4[0],
-    setError = _useState4[1];
-  var _useState5 = useState(undefined),
+    currentProduct = _useState4[0],
+    setCurrentProduct = _useState4[1];
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    currentProduct = _useState6[0],
-    setCurrentProduct = _useState6[1];
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    productVariants = _useState8[0],
-    setProductVariants = _useState8[1];
-  var _useState9 = useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    parsedContent = _useState10[0],
-    setParsedContent = _useState10[1];
+    parsedContent = _useState6[0],
+    setParsedContent = _useState6[1];
+  useCss(settings);
   useEffect(function () {
     DivaUtils$1.businessMetrics.setConfiguratorSessionId();
   }, []);
-  useEffect(function () {
-    updateCssInDom(settings.cssUrl, settings.css);
-  }, [settings.cssUrl, settings.css]);
-  useEffect(function () {
-    if (!productId) throw new Error('productId is required');
-    (function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(productId) {
-        var newVariants, products, _iterator, _step, product;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              setError(false);
-              setLoading(true);
-              _context.prev = 2;
-              if (!productData) {
-                _context.next = 8;
-                break;
-              }
-              setProductVariants(productData);
-              newVariants = productData;
-              _context.next = 13;
-              break;
-            case 8:
-              _context.next = 10;
-              return handler.productHandler.apiGetProductVariants(productId, true);
-            case 10:
-              products = _context.sent;
-              setProductVariants(products);
-              newVariants = products;
-            case 13:
-              _iterator = _createForOfIteratorHelper(newVariants);
-              _context.prev = 14;
-              _iterator.s();
-            case 16:
-              if ((_step = _iterator.n()).done) {
-                _context.next = 23;
-                break;
-              }
-              product = _step.value;
-              if (!(product._id == productId)) {
-                _context.next = 21;
-                break;
-              }
-              LOG.businessEvent('onLoadProductPDP', 'ProductDetailPage', 'Neues Product in PDP geladen.', {
-                productId: productId,
-                catalogName: product.modelName,
-                catalogCodex: product.catCodex
-              });
-              return _context.abrupt("break", 23);
-            case 21:
-              _context.next = 16;
-              break;
-            case 23:
-              _context.next = 28;
-              break;
-            case 25:
-              _context.prev = 25;
-              _context.t0 = _context["catch"](14);
-              _iterator.e(_context.t0);
-            case 28:
-              _context.prev = 28;
-              _iterator.f();
-              return _context.finish(28);
-            case 31:
-              selectProduct(productId, newVariants);
-              _context.next = 38;
-              break;
-            case 34:
-              _context.prev = 34;
-              _context.t1 = _context["catch"](2);
-              //TODO: show the diva error page?
-              LOG.error(new DivaError('Error loading products', {
-                cause: _context.t1
-              }));
-              setError(true);
-            case 38:
-              _context.prev = 38;
-              setLoading(false);
-              return _context.finish(38);
-            case 41:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[2, 34, 38, 41], [14, 25, 28, 31]]);
-      }));
-      return function (_x) {
-        return _ref2.apply(this, arguments);
-      };
-    })()(productId);
-  }, [productData, productId]);
+  var productIds = useMemo(function () {
+    return productId ? [productId] : undefined;
+  }, [productId]);
+  var _useProductData = useProductData({
+      productIds: productIds,
+      variants: productData,
+      onProductLoaded: function onProductLoaded(variants) {
+        selectProduct(productId, variants);
+      }
+    }),
+    productVariants = _useProductData.productVariants,
+    loadingError = _useProductData.error,
+    loading = _useProductData.loading;
   useEffect(function () {
     if (!currentProduct) return;
     try {
-      var _parsedContent = parseContent(isMobile, isPortrait, productVariants, currentProduct, i18n.language, selectProduct, openComponent, onEvent, openSideMenu, settings.content);
+      var _parsedContent = parseContent(isMobile, isPortrait, productVariants, currentProduct, i18n.language, openComponent, onEvent, settings.content);
       if (!_parsedContent) {
         LOG.warn('No content to render, check the configuration');
       }
@@ -1550,10 +788,9 @@ function useDetailPage(_ref) {
       return p._id === productId;
     });
     if (!currentProduct) {
-      LOG.error(new DivaError('Product not found', {
-        cause: error
-      }));
+      LOG.error(new DivaError('Product not found'));
       setError(true);
+      return;
     }
     setCurrentProduct(currentProduct);
   }, [productVariants]);
@@ -1593,7 +830,7 @@ function useDetailPage(_ref) {
   };
   return {
     loading: loading,
-    error: error,
+    error: parsingError || loadingError,
     content: parsedContent,
     productVariants: productVariants,
     product: currentProduct,
@@ -1612,15 +849,15 @@ function useDetailPage(_ref) {
  * @param product the product data to use
  * @param language the language to use
  */
-function parseContent(isMobile, isPortrait, productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction, content) {
+function parseContent(isMobile, isPortrait, productVariants, product, language, openComponentFunction, onEventFunction, content) {
   var finalContent = null;
   if (content) {
     var clonedContent = cloneDeep(content);
     var pureContent = resolveReferences(clonedContent, content);
     var filteredContent = filterContent(pureContent, isMobile, isPortrait, product, language);
     if (!filteredContent) return null;
-    var withActionsContent = replaceActions(filteredContent, productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction);
-    finalContent = replaceTemplateStrings(withActionsContent, product, language);
+    var withActionsContent = replaceActions(filteredContent, productVariants, product, language, openComponentFunction, onEventFunction);
+    finalContent = replaceTemplatesInObject(withActionsContent, product, language);
   }
   return finalContent;
 }