@crystaldesign/product-detail-page 24.10.0-alpha.6

package/build/esm/index.js

@@ -0,0 +1,1542 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
+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 _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { cloneDeep } from 'lodash';
+import _typeof from '@babel/runtime/helpers/typeof';
+import flatten$1, { flatten } from 'flat';
+
+(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 };
+})();
+
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ArActionIcon = function ArActionIcon(_ref) {
+  var _config$className;
+
+  var config = _ref.config,
+      url = _ref.url,
+      htmlArElement = _ref.htmlArElement;
+
+  var _useDivaCore = useDivaCore(),
+      isMobile = _useDivaCore.state.dimensions.isMobile;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useLayer = useLayer({
+    isOpen: isOpen && !isMobile,
+    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;
+      _useLayer.layerSide;
+
+  useEffect(function () {
+    if (isOpen && isMobile) {
+      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) return /*#__PURE__*/jsx(Fragment, {});
+  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 && !isMobile && 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: url,
+          className: "qr-code",
+          onClick: function onClick() {
+            return window.open(url, '_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({}, arrowProps))]
+    })))
+  }));
+};
+
+function useGallery (_ref) {
+  var product = _ref.product,
+      _ref$config = _ref.config,
+      functionTypes = _ref$config.functionTypes,
+      mediaTypes = _ref$config.mediaTypes,
+      add2DImage = _ref$config.add2DImage;
+
+  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 newMedias = [];
+
+    var _loop = function _loop(i) {
+      var _product$media$filter, _product$media;
+
+      var functionType = functionTypes[i];
+      var filteredMedias = (_product$media$filter = (_product$media = product.media) === null || _product$media === void 0 ? void 0 : _product$media.filter(function (m, i) {
+        return m.functionType === functionType;
+      })) !== null && _product$media$filter !== void 0 ? _product$media$filter : [];
+
+      if (filteredMedias !== null && filteredMedias !== void 0 && filteredMedias.length) {
+        if (mediaTypes) {
+          var _loop2 = function _loop2(j) {
+            newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray(filteredMedias.filter(function (m) {
+              return m.mediaType === mediaTypes[j];
+            })));
+          };
+
+          for (var j = 0; j < mediaTypes.length; j++) {
+            _loop2(j);
+          }
+
+          var _loop3 = function _loop3(_j) {
+            newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray(filteredMedias.filter(function (m) {
+              return !newMedias.find(function (m) {
+                return m.url == filteredMedias[_j].url;
+              });
+            })));
+          };
+
+          for (var _j = 0; _j < filteredMedias.length; _j++) {
+            _loop3(_j);
+          }
+        } else {
+          newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray(filteredMedias));
+        }
+      }
+    };
+
+    for (var i = 0; i < functionTypes.length; i++) {
+      _loop(i);
+    }
+
+    if (add2DImage && product.image2D) newMedias.push({
+      url: product.image2D
+    });
+    setMedias(newMedias);
+  }, [product]);
+  useEffect(function () {
+    var hasSirvMedia = false;
+
+    var _loop4 = function _loop4(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++) {
+      _loop4(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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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;
+  return /*#__PURE__*/jsx("div", _objectSpread$6(_objectSpread$6({
+    className: "Sirv custom"
+  }, sirvWrapperProps), {}, {
+    children: /*#__PURE__*/jsx("div", _objectSpread$6(_objectSpread$6({
+      "data-src": url
+    }, 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 */\r\n.diva-ar-msJ2C :not(:defined) > * {\r\n  display: none;\r\n}\r\n\r\nmodel-viewer.diva-ar-msJ2C {\r\n  overflow-x: hidden;\r\n}\r\n\r\n@-webkit-keyframes circle-qKefP {\r\n  from {\r\n    transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);\r\n  }\r\n  to {\r\n    transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);\r\n  }\r\n}\r\n\r\n@keyframes circle-qKefP {\r\n  from {\r\n    transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);\r\n  }\r\n  to {\r\n    transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);\r\n  }\r\n}\r\n\r\n@-webkit-keyframes elongate-EJuQ- {\r\n  from {\r\n    transform: translateX(100px);\r\n  }\r\n  to {\r\n    transform: translateX(-100px);\r\n  }\r\n}\r\n\r\n@keyframes elongate-EJuQ- {\r\n  from {\r\n    transform: translateX(100px);\r\n  }\r\n  to {\r\n    transform: translateX(-100px);\r\n  }\r\n}\r\n\r\nmodel-viewer.diva-ar-msJ2C > #ar-prompt {\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: 175px;\r\n  -webkit-animation: elongate-EJuQ- 2s infinite ease-in-out alternate;\r\n          animation: elongate-EJuQ- 2s infinite ease-in-out alternate;\r\n  display: none;\r\n}\r\n\r\nmodel-viewer.diva-ar-msJ2C[ar-status='session-started'] > #ar-prompt {\r\n  display: block;\r\n}\r\n\r\nmodel-viewer.diva-ar-msJ2C > #ar-prompt > img {\r\n  -webkit-animation: circle-qKefP 4s linear infinite;\r\n          animation: circle-qKefP 4s linear infinite;\r\n}\r\n\r\nmodel-viewer.diva-ar-msJ2C > #ar-failure {\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  bottom: 175px;\r\n  display: none;\r\n}\r\n\r\nmodel-viewer.diva-ar-msJ2C[ar-tracking='not-tracking'] > #ar-failure {\r\n  display: block;\r\n}\r\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(),
+      baseCdnUrl = _useDivaCore.state.apiConfig.baseCdnUrl;
+
+  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": '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 = _ref.media,
+      medias = _ref.medias;
+
+  if (media.mediaType == 'AR') {
+    var _medias$find$url, _medias$find;
+
+    var mainImageUrl = (_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;
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("img", {
+        className: "gallery-image-thumb",
+        src: mainImageUrl
+      }), /*#__PURE__*/jsx("div", {
+        className: 'ar-icon-thumb'
+      })]
+    });
+  }
+
+  return /*#__PURE__*/jsx("img", {
+    className: "gallery-image-thumb",
+    src: media.url
+  });
+};
+
+var gallery = "gallery-jOl8d";
+var css_248z$1 = ".gallery-jOl8d .gallery-thumb .swiper-slide {\r\n  opacity: 0.4;\r\n}\r\n.gallery-jOl8d .gallery-thumb .swiper-slide-thumb-active {\r\n  opacity: 1;\r\n}\r\n\r\n/*navigation*/\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next {\r\n  position: absolute;\r\n  top: 50%;\r\n  top: var(--swiper-navigation-top-offset, 50%);\r\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\r\n  height: var(--swiper-navigation-size);\r\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\r\n  z-index: 10;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--swiper-theme-color);\r\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev.swiper-button-disabled,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next.swiper-button-disabled {\r\n  opacity: 0.35;\r\n  cursor: auto;\r\n  pointer-events: none;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev.swiper-button-hidden,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next.swiper-button-hidden {\r\n  opacity: 0;\r\n  cursor: auto;\r\n  pointer-events: none;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-navigation-disabled .swiper-button-prev,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-navigation-disabled .swiper-button-next {\r\n  display: none !important;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev svg,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  -o-object-fit: contain;\r\n     object-fit: contain;\r\n  transform-origin: center;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev svg,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-next svg {\r\n  transform: rotate(180deg);\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-next {\r\n  left: 10px;\r\n  left: var(--swiper-navigation-sides-offset, 10px);\r\n  right: auto;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev {\r\n  right: 10px;\r\n  right: var(--swiper-navigation-sides-offset, 10px);\r\n  left: auto;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-lock {\r\n  display: none;\r\n}\r\n/* Navigation font start */\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev:after,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next:after {\r\n  text-transform: none !important;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev:after,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next:after {\r\n  font-family: swiper-icons;\r\n  font-size: var(--swiper-navigation-size);\r\n  letter-spacing: 0;\r\n  font-feature-settings: ;\r\n  font-variant: normal;\r\n  font-variant: initial;\r\n  line-height: 1;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-prev:after,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-next:after {\r\n  content: 'prev';\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev {\r\n  right: 10px;\r\n  right: var(--swiper-navigation-sides-offset, 10px);\r\n  left: auto;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-button-next:after,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-rtl .swiper-button-prev:after {\r\n  content: 'next';\r\n}\r\n/* Navigation font end */\r\n\r\n/*swiper min css*/\r\n\r\n@font-face {\r\n  font-family: swiper-icons;\r\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n.gallery-jOl8d.diva-pdp-gallery .swiper {\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  position: relative;\r\n  overflow: hidden;\r\n  list-style: none;\r\n  padding: 0;\r\n  z-index: 1;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-vertical > .swiper-wrapper {\r\n  flex-direction: column;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  display: flex;\r\n  transition-property: transform;\r\n  box-sizing: content-box;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-android .swiper-slide,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-wrapper {\r\n  transform: translate3d(0px, 0, 0);\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-pointer-events {\r\n  touch-action: pan-y;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-pointer-events.swiper-vertical {\r\n  touch-action: pan-x;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-slide {\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  position: relative;\r\n  transition-property: transform;\r\n}\r\n\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-slide-invisible-blank {\r\n  visibility: hidden;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-autoheight,\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-autoheight .swiper-slide {\r\n  height: auto;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-autoheight .swiper-wrapper {\r\n  align-items: flex-start;\r\n  transition-property: transform, height;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-backface-hidden .swiper-slide {\r\n  transform: translateZ(0);\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\r\n  scroll-snap-type: x mandatory;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-vertical.swiper-css-mode > .swiper-wrapper {\r\n  scroll-snap-type: y mandatory;\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered > .swiper-wrapper::before {\r\n  content: '';\r\n  flex-shrink: 0;\r\n  order: 9999;\r\n}\r\n[dir=\"ltr\"] .gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\r\n  margin-left: var(--swiper-centered-offset-before);\r\n}\r\n[dir=\"rtl\"] .gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\r\n  margin-right: var(--swiper-centered-offset-before);\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\r\n  height: 100%;\r\n  min-height: 1px;\r\n  width: var(--swiper-centered-offset-after);\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\r\n  margin-top: var(--swiper-centered-offset-before);\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered.swiper-vertical > .swiper-wrapper::before {\r\n  width: 100%;\r\n  min-width: 1px;\r\n  height: var(--swiper-centered-offset-after);\r\n}\r\n.gallery-jOl8d.diva-pdp-gallery .swiper-centered > .swiper-wrapper > .swiper-slide {\r\n  scroll-snap-align: center center;\r\n}\r\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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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,
+      onSlideChange: function onSlideChange(swiper) {
+        setCurrentIndex(swiper.activeIndex);
+      },
+      focusableElements: focusable,
+      noSwipingSelector: noSwiping,
+      navigation: true,
+      thumbs: {
+        swiper: thumbsSwiper
+      },
+      modules: [Navigation, Thumbs],
+      className: "gallery-main"
+    }, config.sliderProp), {}, {
+      children: medias.map(function (media, i) {
+        return /*#__PURE__*/jsx(SwiperSlide, {
+          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,
+      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, {
+          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
+    }
+  });
+};
+
+var Price = function Price(_ref) {
+  var _config$className;
+
+  var addedPrice = _ref.addedPrice,
+      discountedPrice = _ref.discountedPrice,
+      config = _ref.config;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var price_ending = '';
+  if (config.priceEnding) price_ending = t(config.priceEnding);
+  return /*#__PURE__*/jsxs("div", {
+    className: 'diva-pdp-price ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
+    children: [!!discountedPrice && /*#__PURE__*/jsxs("div", {
+      id: "discounted-price",
+      children: [DivaUtils.formatPrice(discountedPrice) + ' ' + price_ending, " "]
+    }), /*#__PURE__*/jsx("div", {
+      id: "added-price",
+      className: !!discountedPrice ? 'added-price-cancelled' : undefined,
+      children: !!addedPrice && DivaUtils.formatPrice(addedPrice) + ' ' + price_ending
+    })]
+  });
+};
+
+var Tab = function Tab(props) {
+  //TODO implement Tab component
+  return /*#__PURE__*/jsx("div", {
+    children: "To be implemented"
+  });
+};
+
+var TabInfo = function TabInfo(_ref) {
+  var _config$className;
+
+  var config = _ref.config;
+  return /*#__PURE__*/jsx("div", {
+    className: 'diva-pdp-tabs ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
+    children: config.tabs.map(function (tab) {
+      return /*#__PURE__*/jsx(Tab, {
+        text: tab.title,
+        title: tab.text
+      });
+    })
+  });
+};
+
+var Info = function Info(_ref) {
+  var config = _ref.config;
+  if (config.type == 'TABS') return /*#__PURE__*/jsx(TabInfo, {
+    config: config
+  });
+  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: [text !== undefined && /*#__PURE__*/jsx("div", {
+      className: textClass,
+      children: text
+    }), icon !== undefined && /*#__PURE__*/jsx("img", {
+      src: icon
+    }), iconClass !== undefined && /*#__PURE__*/jsx("div", {
+      className: iconClass
+    })]
+  });
+};
+
+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);
+    })
+  });
+};
+
+var variants = "variants-HWTGr";
+var css_248z = "/*navigation*/\r\n.variants-HWTGr.classification-group .swiper-button-prev,\r\n.variants-HWTGr.classification-group .swiper-button-next {\r\n  position: absolute;\r\n  top: 50%;\r\n  top: var(--swiper-navigation-top-offset, 50%);\r\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\r\n  height: var(--swiper-navigation-size);\r\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\r\n  z-index: 10;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--swiper-theme-color);\r\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-prev.swiper-button-disabled,\r\n.variants-HWTGr.classification-group .swiper-button-next.swiper-button-disabled {\r\n  opacity: 0.35;\r\n  cursor: auto;\r\n  pointer-events: none;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-prev.swiper-button-hidden,\r\n.variants-HWTGr.classification-group .swiper-button-next.swiper-button-hidden {\r\n  opacity: 0;\r\n  cursor: auto;\r\n  pointer-events: none;\r\n}\r\n.variants-HWTGr.classification-group .swiper-navigation-disabled .swiper-button-prev,\r\n.variants-HWTGr.classification-group .swiper-navigation-disabled .swiper-button-next {\r\n  display: none !important;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-prev svg,\r\n.variants-HWTGr.classification-group .swiper-button-next svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  -o-object-fit: contain;\r\n     object-fit: contain;\r\n  transform-origin: center;\r\n}\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev svg,\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-next svg {\r\n  transform: rotate(180deg);\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-prev,\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-next {\r\n  left: 10px;\r\n  left: var(--swiper-navigation-sides-offset, 10px);\r\n  right: auto;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-next,\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev {\r\n  right: 10px;\r\n  right: var(--swiper-navigation-sides-offset, 10px);\r\n  left: auto;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-lock {\r\n  display: none;\r\n}\r\n/* Navigation font start */\r\n.variants-HWTGr.classification-group .swiper-button-prev:after,\r\n.variants-HWTGr.classification-group .swiper-button-next:after {\r\n  text-transform: none !important;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-prev:after,\r\n.variants-HWTGr.classification-group .swiper-button-next:after {\r\n  font-family: swiper-icons;\r\n  font-size: var(--swiper-navigation-size);\r\n  letter-spacing: 0;\r\n  font-feature-settings: ;\r\n  font-variant: normal;\r\n  font-variant: initial;\r\n  line-height: 1;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-prev:after,\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-next:after {\r\n  content: 'prev';\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-next,\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev {\r\n  right: 10px;\r\n  right: var(--swiper-navigation-sides-offset, 10px);\r\n  left: auto;\r\n}\r\n.variants-HWTGr.classification-group .swiper-button-next:after,\r\n.variants-HWTGr.classification-group .swiper-rtl .swiper-button-prev:after {\r\n  content: 'next';\r\n}\r\n/* Navigation font end */\r\n\r\n/*swiper min css*/\r\n\r\n@font-face {\r\n  font-family: swiper-icons;\r\n  src: url('data:application/font-woff;charset=utf-8;base64, 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');\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n.variants-HWTGr.classification-group .swiper {\r\n  position: relative;\r\n  overflow: hidden;\r\n  list-style: none;\r\n  padding: 0;\r\n  z-index: 1;\r\n}\r\n.variants-HWTGr.classification-group .swiper-vertical > .swiper-wrapper {\r\n  flex-direction: column;\r\n}\r\n.variants-HWTGr.classification-group .swiper-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  display: flex;\r\n  transition-property: transform;\r\n  box-sizing: content-box;\r\n}\r\n.variants-HWTGr.classification-group .swiper-android .swiper-slide,\r\n.variants-HWTGr.classification-group .swiper-wrapper {\r\n  transform: translate3d(0px, 0, 0);\r\n}\r\n.variants-HWTGr.classification-group .swiper-pointer-events {\r\n  touch-action: pan-y;\r\n}\r\n.variants-HWTGr.classification-group .swiper-pointer-events.swiper-vertical {\r\n  touch-action: pan-x;\r\n}\r\n.variants-HWTGr.classification-group .swiper-slide {\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  position: relative;\r\n  transition-property: transform;\r\n}\r\n\r\n.variants-HWTGr.classification-group .swiper-slide-invisible-blank {\r\n  visibility: hidden;\r\n}\r\n.variants-HWTGr.classification-group .swiper-autoheight,\r\n.variants-HWTGr.classification-group .swiper-autoheight .swiper-slide {\r\n  height: auto;\r\n}\r\n.variants-HWTGr.classification-group .swiper-autoheight .swiper-wrapper {\r\n  align-items: flex-start;\r\n  transition-property: transform, height;\r\n}\r\n.variants-HWTGr.classification-group .swiper-backface-hidden .swiper-slide {\r\n  transform: translateZ(0);\r\n  -webkit-backface-visibility: hidden;\r\n  backface-visibility: hidden;\r\n}\r\n.variants-HWTGr.classification-group .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\r\n  scroll-snap-type: x mandatory;\r\n}\r\n.variants-HWTGr.classification-group .swiper-vertical.swiper-css-mode > .swiper-wrapper {\r\n  scroll-snap-type: y mandatory;\r\n}\r\n.variants-HWTGr.classification-group .swiper-centered > .swiper-wrapper::before {\r\n  content: '';\r\n  flex-shrink: 0;\r\n  order: 9999;\r\n}\r\n[dir=\"ltr\"] .variants-HWTGr.classification-group .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\r\n  margin-left: var(--swiper-centered-offset-before);\r\n}\r\n[dir=\"rtl\"] .variants-HWTGr.classification-group .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\r\n  margin-right: var(--swiper-centered-offset-before);\r\n}\r\n.variants-HWTGr.classification-group .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\r\n  height: 100%;\r\n  min-height: 1px;\r\n  width: var(--swiper-centered-offset-after);\r\n}\r\n.variants-HWTGr.classification-group .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\r\n  margin-top: var(--swiper-centered-offset-before);\r\n}\r\n.variants-HWTGr.classification-group .swiper-centered.swiper-vertical > .swiper-wrapper::before {\r\n  width: 100%;\r\n  min-width: 1px;\r\n  height: var(--swiper-centered-offset-after);\r\n}\r\n.variants-HWTGr.classification-group .swiper-centered > .swiper-wrapper > .swiper-slide {\r\n  scroll-snap-align: center center;\r\n}\r\n";
+styleInject(css_248z);
+
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Group = function Group(_ref) {
+  var _config$classificatio, _selectedClassificati;
+
+  var onChange = _ref.onChange,
+      groups = _ref.groups,
+      product = _ref.product,
+      groupKey = _ref.groupKey,
+      config = _ref.config,
+      products = _ref.products,
+      _ref$selectedClassifi = _ref.selectedClassification,
+      selectedClassification = _ref$selectedClassifi === void 0 ? product[groupKey] : _ref$selectedClassifi;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      swiperRef = _useState2[0],
+      setSwiperRef = _useState2[1];
+
+  if (!selectedClassification) return /*#__PURE__*/jsx(Fragment, {});
+  var classificationConfig = (_config$classificatio = config.classificationConfig) === null || _config$classificatio === void 0 ? void 0 : _config$classificatio[groupKey];
+  var classificationText = classificationConfig === null || classificationConfig === void 0 ? void 0 : classificationConfig.text;
+  var group = groups[groupKey];
+
+  var _onClick = function onClick(e, codex) {
+    var _classificationConfig3, _classificationConfig4;
+
+    var potentials = products.filter(function (variant) {
+      var _variant$groupKey$val, _variant$groupKey, _variant$groupKey2;
+
+      return compareCodexes((_variant$groupKey$val = (_variant$groupKey = variant[groupKey]) === null || _variant$groupKey === void 0 ? void 0 : _variant$groupKey.value) !== null && _variant$groupKey$val !== void 0 ? _variant$groupKey$val : (_variant$groupKey2 = variant[groupKey]) === null || _variant$groupKey2 === void 0 ? void 0 : _variant$groupKey2.opv, codex);
+    });
+    if (!potentials.length) return;
+
+    for (var i = 0; i < potentials.length; i++) {
+      var potential = potentials[i];
+      var perfectMatch = true;
+
+      for (var key in groups) {
+        var _potential$key$value, _potential$key, _potential$key2, _key$value, _key, _key2;
+
+        if (key === groupKey) continue;
+        var potentialCodex = (_potential$key$value = (_potential$key = potential[key]) === null || _potential$key === void 0 ? void 0 : _potential$key.value) !== null && _potential$key$value !== void 0 ? _potential$key$value : (_potential$key2 = potential[key]) === null || _potential$key2 === void 0 ? void 0 : _potential$key2.opv;
+        var currentCodex = (_key$value = (_key = product[key]) === null || _key === void 0 ? void 0 : _key.value) !== null && _key$value !== void 0 ? _key$value : (_key2 = product[key]) === null || _key2 === void 0 ? void 0 : _key2.opv;
+
+        if (!compareCodexes(potentialCodex, currentCodex)) {
+          perfectMatch = false;
+          break;
+        }
+      }
+
+      if (perfectMatch) {
+        var _classificationConfig, _classificationConfig2;
+
+        onChange(potential._id);
+        classificationConfig === null || classificationConfig === void 0 ? void 0 : (_classificationConfig = classificationConfig.action) === null || _classificationConfig === void 0 ? void 0 : (_classificationConfig2 = _classificationConfig.onClick) === null || _classificationConfig2 === void 0 ? void 0 : _classificationConfig2.call(_classificationConfig, e, potential._id);
+        return;
+      }
+    }
+
+    onChange(potentials[0]._id);
+    classificationConfig === null || classificationConfig === void 0 ? void 0 : (_classificationConfig3 = classificationConfig.action) === null || _classificationConfig3 === void 0 ? void 0 : (_classificationConfig4 = _classificationConfig3.onClick) === null || _classificationConfig4 === void 0 ? void 0 : _classificationConfig4.call(_classificationConfig3, e, potentials[0]._id);
+  };
+
+  var selectedKey = (_selectedClassificati = selectedClassification === null || selectedClassification === void 0 ? void 0 : selectedClassification.opv) !== null && _selectedClassificati !== void 0 ? _selectedClassificati : selectedClassification === null || selectedClassification === void 0 ? void 0 : selectedClassification.value;
+  var elements = group.map(function (item, index) {
+    var _item$image, _item$variant$media, _item$variant$media$f;
+
+    var image = (_item$image = item.image) !== null && _item$image !== void 0 ? _item$image : (_item$variant$media = item.variant.media) === null || _item$variant$media === void 0 ? void 0 : (_item$variant$media$f = _item$variant$media.find(function (media) {
+      return media.functionType === 'OPV';
+    })) === null || _item$variant$media$f === void 0 ? void 0 : _item$variant$media$f.url;
+
+    if (image) {
+      //IMAGE AND TEXT
+      // if (imageAndText) {
+      //   return <ImageAndText onClick={(e) => onClick(e, item.codex)} image={image} name={item.name} selected={selectedKey === item.codex} />;
+      // }
+      //IMAGE
+      return /*#__PURE__*/jsx("div", {
+        onClick: function onClick(e) {
+          return _onClick(e, item.codex);
+        },
+        style: {
+          backgroundImage: 'url(' + image + '?w=' + 64 + ')'
+        },
+        className: classNames('variant-item-image', selectedKey === item.codex ? 'sel' : undefined)
+      }, index);
+    } else {
+      //TEXT
+      return /*#__PURE__*/jsx("div", {
+        onClick: function onClick(e) {
+          return _onClick(e, item.codex);
+        },
+        className: classNames('variant-item-text', selectedKey === item.codex ? 'sel' : undefined)
+      }, index);
+    }
+  });
+
+  if (classificationConfig !== null && classificationConfig !== void 0 && classificationConfig.maxCount) {
+    elements.length = classificationConfig.maxCount;
+  }
+
+  var navigateToOnClick = function navigateToOnClick(index) {
+    swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.slideTo(index);
+  };
+
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(variants, 'classification-group'),
+    children: [!!classificationText && /*#__PURE__*/jsx("div", {
+      className: "classification-group-title",
+      children: classificationText
+    }), /*#__PURE__*/jsx(Swiper, _objectSpread$4(_objectSpread$4({
+      onSwiper: setSwiperRef,
+      className: "classification-variants-slider"
+    }, config.sliderProp), {}, {
+      children: elements.map(function (e, index) {
+        return /*#__PURE__*/jsx(SwiperSlide, {
+          onClick: function onClick(e) {
+            navigateToOnClick(index - 1);
+            e.stopPropagation();
+          },
+          children: e
+        }, index);
+      })
+    })), config.moreIcon && /*#__PURE__*/jsx(PdpAction, {
+      config: config.moreIcon
+    })]
+  });
+};
+
+var compareCodexes = function compareCodexes(codex1, codex2) {
+  if (codex1 == codex2) return true;
+
+  if (codex1.startsWith('A') && codex2.startsWith('A')) {
+    var _codex1$match, _codex2$match;
+
+    var reg = new RegExp(/A\d*(.*)/);
+    var repairedCodex1 = (_codex1$match = codex1.match(reg)) === null || _codex1$match === void 0 ? void 0 : _codex1$match[1];
+    var repairedCodex2 = (_codex2$match = codex2.match(reg)) === null || _codex2$match === void 0 ? void 0 : _codex2$match[1];
+
+    if (repairedCodex1 && repairedCodex2 && repairedCodex1 == repairedCodex2) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+function useVariants (_ref) {
+  var products = _ref.products;
+
+  //const [posOfOptState, setPosOfOpt] = useState<{ [opt: string]: number }>({});
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      groupsState = _useState2[0],
+      setGroups = _useState2[1];
+
+  useEffect(function () {
+    var groups = {};
+    var posOfOpt = {};
+
+    for (var i = 0; i < products.length; i++) {
+      for (var _key in products[i]) {
+        if (_key.startsWith('dc_')) {
+          var classification = products[i][_key];
+          if (!groups[_key]) groups[_key] = [];
+
+          if (posOfOpt[_key] === undefined) {
+            if (classification.optionPosition !== undefined) {
+              posOfOpt[_key] = classification.optionPosition;
+            } else if (classification.defaultOptionPosition !== undefined) {
+              posOfOpt[_key] = classification.defaultOptionPosition;
+            }
+          }
+        }
+      }
+    } //sort options
+
+
+    if (Object.keys(posOfOpt).length) {
+      var positions = Object.assign({}, posOfOpt);
+      groups = {};
+
+      while (Object.keys(positions).length) {
+        var options = Object.keys(positions);
+        var nextOpt = options[0];
+
+        for (var _key2 in positions) {
+          if (positions[nextOpt] > positions[_key2]) nextOpt = _key2;
+        }
+
+        delete positions[nextOpt];
+        groups[nextOpt] = [];
+      }
+    }
+
+    products.map(function (variant, index) {
+      var variantAny = variant;
+
+      var _loop = function _loop(_key3) {
+        var _variantAny$_key3$val, _variantAny$_key, _variantAny$_key2, _variantAny$_key3$nam, _variant$media, _variant$media$find;
+
+        var value = (_variantAny$_key3$val = (_variantAny$_key = variantAny[_key3]) === null || _variantAny$_key === void 0 ? void 0 : _variantAny$_key.value) !== null && _variantAny$_key3$val !== void 0 ? _variantAny$_key3$val : (_variantAny$_key2 = variantAny[_key3]) === null || _variantAny$_key2 === void 0 ? void 0 : _variantAny$_key2.opv;
+        if (!value) return "continue";
+        if (groups[_key3].find(function (group) {
+          return group.codex === value;
+        })) return "continue";
+        var position = variantAny[_key3].position;
+
+        groups[_key3].push({
+          codex: value,
+          position: variantAny[_key3].position !== undefined ? position : index,
+          name: (_variantAny$_key3$nam = variantAny[_key3].name) !== null && _variantAny$_key3$nam !== void 0 ? _variantAny$_key3$nam : variantAny[_key3].opvName,
+          image: (_variant$media = variant.media) === null || _variant$media === void 0 ? void 0 : (_variant$media$find = _variant$media.find(function (media) {
+            return media.functionType === 'OPV' && 'dc_' + media["class"] === _key3;
+          })) === null || _variant$media$find === void 0 ? void 0 : _variant$media$find.url,
+          variant: variant,
+          optName: variantAny[_key3].optName
+        });
+      };
+
+      for (var _key3 in groups) {
+        var _ret = _loop(_key3);
+
+        if (_ret === "continue") continue;
+      }
+    });
+    var irrelevantGroups = [];
+
+    for (var _key4 in groups) {
+      if (groups[_key4].length <= 1) {
+        irrelevantGroups.push(_key4);
+      } //sort the values of each group
+
+
+      groups[_key4] = groups[_key4].sort(function (o1, o2) {
+        if (o1.position < o2.position) return -1;
+        return 1;
+      });
+    }
+
+    irrelevantGroups.map(function (key) {
+      return delete groups[key];
+    });
+    setGroups(groups); //setPosOfOpt(posOfOpt);
+  }, [products]);
+  return {
+    groupsState: groupsState
+  };
+}
+
+var Variants = function Variants(_ref) {
+  var _config$className;
+
+  var products = _ref.products,
+      config = _ref.config,
+      product = _ref.product,
+      onChange = _ref.onChange;
+
+  var _useVariants = useVariants({
+    products: products
+  }),
+      groupsState = _useVariants.groupsState;
+
+  return /*#__PURE__*/jsx("div", {
+    className: 'diva-pdp-variants ' + ((_config$className = config.className) !== null && _config$className !== void 0 ? _config$className : ''),
+    children: Object.keys(groupsState).map(function (key) {
+      return /*#__PURE__*/jsx(Group, {
+        products: products,
+        groups: groupsState,
+        product: product,
+        groupKey: key,
+        onChange: onChange,
+        config: config,
+        selectedClassification: product[key]
+      }, key);
+    })
+  });
+};
+
+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 UiElemet = function UiElemet(_ref) {
+  var _content$containers;
+
+  var content = _ref.content,
+      product = _ref.product,
+      productVariants = _ref.productVariants,
+      selectProduct = _ref.selectProduct;
+
+  switch (content.id) {
+    case 'GALLERY':
+      return /*#__PURE__*/jsx(Gallery, {
+        config: content,
+        product: product
+      });
+
+    case 'TEXT':
+      return /*#__PURE__*/jsx(Text, {
+        config: content
+      });
+
+    case 'PRICE':
+      return /*#__PURE__*/jsx(Price, {
+        config: content,
+        addedPrice: product.addedPrice,
+        discountedPrice: product.discountedPrice
+      });
+
+    case 'INFO':
+      return /*#__PURE__*/jsx(Info, {
+        config: content
+      });
+
+    case 'ACTIONS':
+      return /*#__PURE__*/jsx(Actions, {
+        config: content
+      });
+
+    case 'VARIANTS':
+      return /*#__PURE__*/jsx(Variants, {
+        config: content,
+        products: productVariants,
+        onChange: selectProduct,
+        product: product
+      });
+
+    case 'ACTIONICON':
+      return /*#__PURE__*/jsx(ActionIcon, {
+        config: content
+      });
+
+    default:
+      return /*#__PURE__*/jsx("div", {
+        id: content.id,
+        className: content.className,
+        children: !!('containers' in content) && ((_content$containers = content.containers) === null || _content$containers === void 0 ? void 0 : _content$containers.map(function (c, i) {
+          return /*#__PURE__*/jsx(UiElemet, {
+            content: c,
+            product: product,
+            productVariants: productVariants,
+            selectProduct: selectProduct
+          }, i);
+        }))
+      });
+  }
+};
+
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Filters the content based on the current settings
+ *
+ * @param content the content to filter
+ * @param isMobile if the device is mobile
+ * @param isPortrait if the device is in portrait mode
+ */
+function filterContent(content, isMobile, isPortrait) {
+  if (typeof content !== 'string' && 'containers' in content) {
+    var filteredContainer = [];
+
+    for (var i = 0; content.containers && i < content.containers.length; i++) {
+      var innerContent = filterContent(content.containers[i], isMobile, isPortrait);
+      if (innerContent) filteredContainer.push(innerContent);
+    }
+
+    if (filteredContainer.length === 0) return null;
+    return _objectSpread$3(_objectSpread$3({}, content), {}, {
+      containers: filteredContainer
+    });
+  }
+
+  if (isVisible(content, isMobile, isPortrait)) {
+    return content;
+  }
+
+  return null;
+}
+/**
+ * Checks if an element should be filtered out, based on the current settings
+ *
+ * @param content the content to check
+ * @param isMobile if the device is mobile
+ * @param isPortrait if the device is in portrait mode
+ */
+
+function isVisible(content, isMobile, isPortrait) {
+  var _content$onlyFor, _content$onlyFor2, _content$onlyFor3, _content$onlyFor4;
+
+  if (typeof content == 'string') {
+    return true;
+  }
+
+  if ((_content$onlyFor = content.onlyFor) !== null && _content$onlyFor !== void 0 && _content$onlyFor.includes('DESKTOP') && isMobile) return false;
+  if ((_content$onlyFor2 = content.onlyFor) !== null && _content$onlyFor2 !== void 0 && _content$onlyFor2.includes('LANDSCAPE') && (!isMobile || !isPortrait)) return false;
+  if ((_content$onlyFor3 = content.onlyFor) !== null && _content$onlyFor3 !== void 0 && _content$onlyFor3.includes('MOBILE') && !isMobile) return false;
+  if ((_content$onlyFor4 = content.onlyFor) !== null && _content$onlyFor4 !== void 0 && _content$onlyFor4.includes('PORTRAIT') && !isPortrait) return false;
+  return true;
+}
+
+/**
+ *  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') {
+      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$languag;
+
+        content[_key] = replaceTemplateString((_content$_key$languag = content[_key][language]) !== null && _content$_key$languag !== void 0 ? _content$_key$languag : 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) 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$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Replaces the references in the content with the actual content
+ * @param content the current content to parse
+ * @param fullContent the full content to look for references
+ */
+function resolveReferences(content, fullContent) {
+  if (typeof content == 'string') {
+    var ref = getContentById(content, fullContent);
+
+    if (!ref) {
+      throw new Error("Reference ".concat(content, " not found"));
+    }
+
+    return ref;
+  }
+
+  if ('containers' in content) {
+    var _content$containers;
+
+    //resolve references in containers
+    var container = (_content$containers = content.containers) !== null && _content$containers !== void 0 ? _content$containers : [];
+    var parsedContainer = [];
+
+    for (var i = 0; i < container.length; i++) {
+      var element = resolveReferences(container[i], fullContent);
+      parsedContainer.push(element);
+    }
+
+    return _objectSpread$2(_objectSpread$2({}, 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;
+  }
+}
+/**
+ * Recursive find a content element by id
+ *
+ * @param id the id of the element to find
+ * @param content the root content element
+ * @throws an error if the id is not found
+ */
+
+function getContentById(id, content) {
+  if (typeof content != 'string') {
+    if (content.id === id) {
+      return content;
+    }
+
+    if ('containers' in content && content.containers) {
+      for (var i = 0; i < content.containers.length; i++) {
+        var result = getContentById(id, content.containers[i]);
+        if (result) return result;
+      }
+    }
+  }
+
+  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 ? 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 ? 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * 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;
+}
+
+var LOG = getLogger('PDP', 'useDetailPage');
+function useDetailPage(_ref) {
+  var settings = _ref.settings,
+      productData = _ref.productData,
+      productId = _ref.productId;
+
+  var _useDivaCore = useDivaCore(),
+      _useDivaCore$state$di = _useDivaCore.state.dimensions,
+      isMobile = _useDivaCore$state$di.isMobile,
+      isPortrait = _useDivaCore$state$di.isPortrait,
+      _useDivaCore$actions = _useDivaCore.actions,
+      onEvent = _useDivaCore$actions.onEvent,
+      openComponent = _useDivaCore$actions.openComponent,
+      openSideMenu = _useDivaCore$actions.openSideMenu,
+      handler = _useDivaCore.handler;
+
+  var _useTranslation = useTranslation(),
+      i18n = _useTranslation.i18n;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var _useState5 = useState(undefined),
+      _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];
+
+  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;
+        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:
+                selectProduct(productId, newVariants);
+                _context.next = 20;
+                break;
+
+              case 16:
+                _context.prev = 16;
+                _context.t0 = _context["catch"](2);
+                //TODO: show the diva error page?
+                LOG.error(new DivaError('Error loading products', {
+                  cause: _context.t0
+                }));
+                setError(true);
+
+              case 20:
+                _context.prev = 20;
+                setLoading(false);
+                return _context.finish(20);
+
+              case 23:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[2, 16, 20, 23]]);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    })()(productId);
+  }, [productData, productId]);
+  useEffect(function () {
+    if (!currentProduct) return;
+
+    try {
+      var _parsedContent = parseContent(isMobile, isPortrait, productVariants, currentProduct, i18n.language, selectProduct, openComponent, onEvent, openSideMenu, settings.content);
+
+      if (!_parsedContent) {
+        LOG.warn('No content to render, check the configuration');
+      }
+
+      setParsedContent(_parsedContent);
+    } catch (e) {
+      LOG.error(new DivaError('Error parsing content', {
+        cause: e
+      }));
+      setError(true);
+    }
+  }, [settings.content, isMobile, isPortrait, currentProduct, i18n.language]);
+  var selectProduct = useCallback(function (productId, newVariants) {
+    var currentProduct = (newVariants !== null && newVariants !== void 0 ? newVariants : productVariants).find(function (p) {
+      return p._id === productId;
+    });
+
+    if (!currentProduct) {
+      LOG.error(new DivaError('Product not found', {
+        cause: error
+      }));
+      setError(true);
+    }
+
+    setCurrentProduct(currentProduct);
+  }, [productVariants]);
+  return {
+    loading: loading,
+    error: error,
+    content: parsedContent,
+    productVariants: productVariants,
+    product: currentProduct,
+    selectProduct: selectProduct,
+    isMobile: isMobile,
+    isPortrait: isPortrait
+  };
+}
+/**
+ * Takes the content from the configuration and processes it to render in the ui.
+ * This includes replacing references and filtering out elements that should not be rendered
+ *
+ * @param content the content to parse
+ * @param isMobile if the device is mobile
+ * @param isPortrait if the device is in portrait mode
+ * @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) {
+  var finalContent = null;
+
+  if (content) {
+    var clonedContent = cloneDeep(content);
+    var pureContent = resolveReferences(clonedContent, content);
+    var filteredContent = filterContent(pureContent, isMobile, isPortrait);
+    if (!filteredContent) return null;
+    var withActionsContent = replaceActions(filteredContent, productVariants, product, language, selectProduct, openComponentFunction, onEventFunction, openSideMenuFunction);
+    finalContent = replaceTemplateStrings(withActionsContent, product, language);
+  }
+
+  return finalContent;
+}
+
+var MainComponent = function MainComponent(props) {
+  var _useDetailPage = useDetailPage(props),
+      product = _useDetailPage.product,
+      productVariants = _useDetailPage.productVariants,
+      loading = _useDetailPage.loading,
+      error = _useDetailPage.error,
+      content = _useDetailPage.content,
+      selectProduct = _useDetailPage.selectProduct;
+
+  if (error) return /*#__PURE__*/jsx("div", {
+    children: "error"
+  });
+  if (loading || !product || !content) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    id: 'DIVA-PDP-' + (product === null || product === void 0 ? void 0 : product._id),
+    className: 'diva-pdp',
+    children: /*#__PURE__*/jsx(UiElemet, {
+      content: content,
+      product: product,
+      productVariants: productVariants,
+      selectProduct: selectProduct
+    })
+  });
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Main = function Main(_ref) {
+  var settings = _ref.settings,
+      parameters = _ref.parameters,
+      internal = _ref.internal;
+  return /*#__PURE__*/jsx(MainComponent, {
+    settings: settings,
+    productData: internal === null || internal === void 0 ? void 0 : internal.productData,
+    productId: parameters === null || parameters === void 0 ? void 0 : parameters.id
+  });
+};
+
+var ProductDetailPageComponent = function ProductDetailPageComponent(props) {
+  return /*#__PURE__*/jsx(MainComponent, _objectSpread({}, props));
+};
+var ProductDetailPage = {
+  name: 'PRODUCTDETAILPAGE',
+  renderFunction: Main
+};
+
+export { ProductDetailPageComponent, ProductDetailPage as default };