@crystaldesign/widget-library 25.3.0-beta.9 → 25.4.0-beta.1

package/build/esm/index.js

@@ -1,3 +1,19 @@
+import { useEffect, useMemo, useState, forwardRef, useRef } from 'react';
+import { useDivaCore, getLogger, DivaError, useTranslation } from '@crystaldesign/diva-core';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Navigation, Thumbs, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useLayer, Arrow } from 'react-laag';
+import QRCode from 'react-qr-code';
+import _typeof from '@babel/runtime/helpers/typeof';
+import flatten$1, { flatten } from 'flat';
+
 (function() {
     const env = {"STAGE":"production"};
     try {
@@ -9,3 +25,912 @@
     } catch (e) {} // avoid ReferenceError: process is not defined
     globalThis.process = { env:env };
 })();
+
+/**
+ * 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 useCss(settings) {
+  useEffect(function () {
+    updateCssInDom(settings.cssUrl, settings.css);
+  }, [settings.cssUrl, settings.css]);
+}
+
+function useConfiguration(type, componentSettings) {
+  var _useDivaCore = useDivaCore(),
+    getSubConfiguration = _useDivaCore.actions.getSubConfiguration;
+  var settings = useMemo(function () {
+    return componentSettings !== null && componentSettings !== void 0 ? componentSettings : getSubConfiguration(type);
+  }, [getSubConfiguration, type, componentSettings]);
+  if (!settings) {
+    throw new Error("Configuration for ".concat(type, " not found"));
+  }
+  return settings;
+}
+
+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('DivaWidget', 'useProductData');
+function useProductData(_ref) {
+  var productIds = _ref.productIds,
+    variants = _ref.variants,
+    onProductLoaded = _ref.onProductLoaded;
+  var _useDivaCore = useDivaCore(),
+    handler = _useDivaCore.handler;
+  var _useState = useState(variants !== null && variants !== void 0 ? variants : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    productVariants = _useState2[0],
+    setProductVariants = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  useEffect(function () {
+    setError(false);
+    setLoading(true);
+    if (!(productIds !== null && productIds !== void 0 && productIds.length)) {
+      LOG.error(new DivaError('productIds array is required and cannot be empty'));
+      setError(true);
+      setLoading(false);
+      return;
+    }
+    (function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(ids) {
+        var newVariants, productsPromises, productsResults, allProducts, _iterator, _step, _loop;
+        return _regeneratorRuntime.wrap(function _callee$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              if (!variants) {
+                _context2.next = 6;
+                break;
+              }
+              setProductVariants(variants);
+              newVariants = variants;
+              _context2.next = 13;
+              break;
+            case 6:
+              // Fetch all products in parallel
+              productsPromises = ids.map(function (id) {
+                return handler.productHandler.apiGetProductVariants(id, true);
+              });
+              _context2.next = 9;
+              return Promise.all(productsPromises);
+            case 9:
+              productsResults = _context2.sent;
+              // Flatten the array of arrays into a single array of variants
+              allProducts = productsResults.flat();
+              setProductVariants(allProducts);
+              newVariants = allProducts;
+            case 13:
+              // Log business events for loaded products
+              _iterator = _createForOfIteratorHelper(newVariants);
+              _context2.prev = 14;
+              _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
+                var product, matchingProductId;
+                return _regeneratorRuntime.wrap(function _loop$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      product = _step.value;
+                      matchingProductId = ids.find(function (id) {
+                        return product._id === id;
+                      });
+                      if (matchingProductId) {
+                        LOG.businessEvent('onLoadProductPDP', 'ProductDetailPage', 'Neues Product in PDP geladen.', {
+                          productId: matchingProductId,
+                          catalogName: product.modelName,
+                          catalogCodex: product.catCodex
+                        });
+                      }
+                    case 3:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _loop);
+              });
+              _iterator.s();
+            case 17:
+              if ((_step = _iterator.n()).done) {
+                _context2.next = 21;
+                break;
+              }
+              return _context2.delegateYield(_loop(), "t0", 19);
+            case 19:
+              _context2.next = 17;
+              break;
+            case 21:
+              _context2.next = 26;
+              break;
+            case 23:
+              _context2.prev = 23;
+              _context2.t1 = _context2["catch"](14);
+              _iterator.e(_context2.t1);
+            case 26:
+              _context2.prev = 26;
+              _iterator.f();
+              return _context2.finish(26);
+            case 29:
+              onProductLoaded === null || onProductLoaded === void 0 || onProductLoaded(newVariants);
+              _context2.next = 36;
+              break;
+            case 32:
+              _context2.prev = 32;
+              _context2.t2 = _context2["catch"](0);
+              LOG.error(new DivaError('Error loading products', {
+                cause: _context2.t2
+              }));
+              setError(true);
+            case 36:
+              _context2.prev = 36;
+              setLoading(false);
+              return _context2.finish(36);
+            case 39:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee, null, [[0, 32, 36, 39], [14, 23, 26, 29]]);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    })()(productIds);
+  }, [variants, productIds]);
+  return {
+    productVariants: productVariants,
+    error: error,
+    loading: loading
+  };
+}
+
+function useSirv(_ref) {
+  var hasSirvMedia = _ref.hasSirvMedia,
+    baseSirvUrls = _ref.baseSirvUrls;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    sirvLoaded = _useState2[0],
+    setSirvLoaded = _useState2[1];
+  useEffect(function () {
+    // Check if Sirv script is already loaded in DOM
+    var existingSirvScript = document.querySelector('script[src*="sirv.js"]');
+    if (existingSirvScript) {
+      setSirvLoaded(true);
+      return;
+    }
+    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);
+    });
+  }, [hasSirvMedia, baseSirvUrls]);
+  return {
+    sirvLoaded: sirvLoaded
+  };
+}
+
+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 useMedia(_ref) {
+  var products = _ref.products,
+    functionTypes = _ref.functionTypes,
+    add2DImage = _ref.add2DImage,
+    add3DImageAsFallback = _ref.add3DImageAsFallback;
+  return useMemo(function () {
+    var newMedias = [];
+    products.forEach(function (product, productIndex) {
+      // Track if any media was added for this product
+      var hasAddedMediaForProduct = false;
+
+      // Add media based on function types
+      var _loop = function _loop() {
+        var _product$media$filter, _product$media;
+        var functionType = functionTypes[i];
+        var filteredMedia = (_product$media$filter = (_product$media = product.media) === null || _product$media === void 0 ? void 0 : _product$media.filter(function (m) {
+          return m.functionType === functionType;
+        })) !== null && _product$media$filter !== void 0 ? _product$media$filter : [];
+
+        // Add product index to each media item
+        if (filteredMedia.length > 0) {
+          hasAddedMediaForProduct = true;
+          newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray(filteredMedia.map(function (media) {
+            return _objectSpread$3(_objectSpread$3({}, media), {}, {
+              productIndex: productIndex
+            });
+          })));
+        }
+      };
+      for (var i = 0; i < functionTypes.length; i++) {
+        _loop();
+      }
+
+      // Add 3D image as fallback only if no media at all exists for this product
+      if (add3DImageAsFallback && product.image && !hasAddedMediaForProduct) {
+        newMedias.push({
+          url: product.image,
+          productIndex: productIndex
+        });
+      }
+
+      // Add 2D image if configured
+      if (add2DImage && product.image2D) {
+        newMedias.push({
+          url: product.image2D,
+          productIndex: productIndex
+        });
+      }
+    });
+    return newMedias;
+  }, [products, functionTypes, add2DImage, add3DImageAsFallback]);
+}
+
+function useGallery(_ref) {
+  var products = _ref.products,
+    _ref$config = _ref.config,
+    functionTypes = _ref$config.functionTypes,
+    add2DImage = _ref$config.add2DImage,
+    add3DImageAsFallback = _ref$config.add3DImageAsFallback,
+    currentProductIndex = _ref.currentProductIndex,
+    setCurrentProductIndex = _ref.setCurrentProductIndex;
+  var _useDivaCore = useDivaCore(),
+    baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
+  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),
+    currentMediaIndex = _useState6[0],
+    setCurrentMediaIndex = _useState6[1];
+  var medias = useMedia({
+    products: products,
+    functionTypes: functionTypes,
+    add2DImage: add2DImage,
+    add3DImageAsFallback: add3DImageAsFallback
+  });
+
+  // Update currentMediaIndex when currentProductIndex changes from outside
+  useEffect(function () {
+    var _medias$currentMediaI;
+    if (currentProductIndex !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productIndex) !== currentProductIndex) {
+      // Find the first media index that corresponds to this product index
+      var mediaIndex = medias.findIndex(function (media) {
+        return media.productIndex === currentProductIndex;
+      });
+      if (mediaIndex !== -1 && mediaIndex !== currentMediaIndex) {
+        setCurrentMediaIndex(mediaIndex);
+        swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex);
+      }
+    }
+  }, [currentProductIndex]);
+  var hasSirvMedia = useMemo(function () {
+    var _loop = function _loop(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]);
+        })) return {
+          v: true
+        };
+      },
+      _ret;
+    for (var i = 0; i < (baseSirvUrls !== null && baseSirvUrls !== void 0 ? baseSirvUrls : []).length; i++) {
+      _ret = _loop(i);
+      if (_ret) return _ret.v;
+    }
+    return false;
+  }, [medias, baseSirvUrls]);
+  var _useSirv = useSirv({
+      hasSirvMedia: hasSirvMedia,
+      baseSirvUrls: baseSirvUrls
+    }),
+    sirvLoaded = _useSirv.sirvLoaded;
+  var onSlideChange = function onSlideChange(swiper) {
+    var newMediaIndex = swiper.realIndex;
+    setCurrentMediaIndex(newMediaIndex);
+
+    // Get the product index corresponding to this media index
+    var media = medias[newMediaIndex];
+
+    // Call the external setCurrentProductIndex if provided
+    if (setCurrentProductIndex && media) {
+      setCurrentProductIndex(media.productIndex);
+    }
+  };
+
+  // Get the current product index based on the current media index
+  var currentMedia = medias[currentMediaIndex];
+  var derivedCurrentProductIndex = currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.productIndex;
+  return {
+    medias: medias,
+    sirvLoaded: sirvLoaded,
+    thumbsSwiper: thumbsSwiper,
+    swiper: swiper,
+    currentIndex: currentMediaIndex,
+    currentProductIndex: currentProductIndex !== null && currentProductIndex !== void 0 ? currentProductIndex : derivedCurrentProductIndex,
+    setCurrentProductIndex: setCurrentProductIndex,
+    setThumbsSwiper: setThumbsSwiper,
+    setSwiper: setSwiper,
+    onSlideChange: onSlideChange
+  };
+}
+
+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; }
+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$2(_objectSpread$2({
+    className: "Sirv custom"
+  }, sirvWrapperProps), {}, {
+    children: /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2({
+      "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-gAk7I";
+var css_248z$2 = "/* This keeps child nodes hidden while the element loads */\n.diva-ar-gAk7I :not(:defined) > * {\n  display: none;\n}\n\nmodel-viewer.diva-ar-gAk7I {\n  overflow-x: hidden;\n}\n\n@keyframes circle-9De-W {\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-AkX-b {\n  from {\n    transform: translateX(100px);\n  }\n  to {\n    transform: translateX(-100px);\n  }\n}\n\nmodel-viewer.diva-ar-gAk7I > #ar-prompt {\n  position: absolute;\n  left: 50%;\n  bottom: 175px;\n  animation: elongate-AkX-b 2s infinite ease-in-out alternate;\n  display: none;\n}\n\nmodel-viewer.diva-ar-gAk7I[ar-status='session-started'] > #ar-prompt {\n  display: block;\n}\n\nmodel-viewer.diva-ar-gAk7I > #ar-prompt > img {\n  animation: circle-9De-W 4s linear infinite;\n}\n\nmodel-viewer.diva-ar-gAk7I > #ar-failure {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 175px;\n  display: none;\n}\n\nmodel-viewer.diva-ar-gAk7I[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) {
+  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 (!config.disableSirv && 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-XR09O";
+var css_248z$1 = ".gallery-XR09O .gallery-thumb .swiper-slide {\n  opacity: 0.4;\n}\n.gallery-XR09O .gallery-thumb .swiper-slide-thumb-active {\n  opacity: 1;\n}\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-android .swiper-slide,\n.gallery-XR09O.diva-widget-gallery .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.gallery-XR09O.diva-widget-gallery .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-slide {\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.gallery-XR09O.diva-widget-gallery .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-autoheight,\n.gallery-XR09O.diva-widget-gallery .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .gallery-XR09O.diva-widget-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .gallery-XR09O.diva-widget-gallery .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n\n/*pagination.css*/\n\n.gallery-XR09O .swiper-pagination {\n  position: absolute;\n  text-align: center;\n  transition: 300ms opacity;\n  transform: translate3d(0, 0, 0);\n  z-index: 10;\n}\n.gallery-XR09O .swiper-pagination.swiper-pagination-hidden {\n  opacity: 0;\n}\n.gallery-XR09O .swiper-pagination-disabled > .swiper-pagination,\n.gallery-XR09O .swiper-pagination.swiper-pagination-disabled {\n  display: none !important;\n}\n/* Common Styles */\n.gallery-XR09O .swiper-pagination-fraction,\n.gallery-XR09O .swiper-pagination-custom,\n.gallery-XR09O .swiper-horizontal > .swiper-pagination-bullets,\n.gallery-XR09O .swiper-pagination-bullets.swiper-pagination-horizontal {\n  bottom: 8px;\n  bottom: var(--swiper-pagination-bottom, 8px);\n  top: auto;\n  top: var(--swiper-pagination-top, auto);\n  left: 0;\n  width: 100%;\n}\n/* Bullets */\n.gallery-XR09O .swiper-pagination-bullets-dynamic {\n  overflow: hidden;\n  font-size: 0;\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n  transform: scale(0.33);\n  position: relative;\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n  transform: scale(1);\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n  transform: scale(1);\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n  transform: scale(0.66);\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n  transform: scale(0.33);\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n  transform: scale(0.66);\n}\n.gallery-XR09O .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n  transform: scale(0.33);\n}\n.gallery-XR09O .swiper-pagination-bullet {\n  width: 8px;\n  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));\n  height: 8px;\n  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));\n  display: inline-block;\n  border-radius: 50%;\n  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);\n  background: #000;\n  background: var(--swiper-pagination-bullet-inactive-color, #000);\n  opacity: 0.2;\n  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);\n}\n.gallery-XR09O button.swiper-pagination-bullet {\n  border: none;\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n       appearance: none;\n}\n.gallery-XR09O .swiper-pagination-clickable .swiper-pagination-bullet {\n  cursor: pointer;\n}\n.gallery-XR09O .swiper-pagination-bullet:only-child {\n  display: none !important;\n}\n.gallery-XR09O .swiper-pagination-bullet-active {\n  opacity: 1;\n  opacity: var(--swiper-pagination-bullet-opacity, 1);\n  background: var(--swiper-theme-color);\n  background: var(--swiper-pagination-color, var(--swiper-theme-color));\n}\n.gallery-XR09O .swiper-vertical > .swiper-pagination-bullets,\n.gallery-XR09O .swiper-pagination-vertical.swiper-pagination-bullets {\n  right: 8px;\n  right: var(--swiper-pagination-right, 8px);\n  left: auto;\n  left: var(--swiper-pagination-left, auto);\n  top: 50%;\n  transform: translate3d(0px, -50%, 0);\n}\n.gallery-XR09O .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,\n.gallery-XR09O .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {\n  margin: 6px 0;\n  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;\n  display: block;\n}\n.gallery-XR09O .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n.gallery-XR09O .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n  top: 50%;\n  transform: translateY(-50%);\n  width: 8px;\n}\n.gallery-XR09O .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,\n.gallery-XR09O .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n  display: inline-block;\n  transition:\n    200ms transform,\n    200ms top;\n}\n.gallery-XR09O .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,\n.gallery-XR09O .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {\n  margin: 0 4px;\n  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);\n}\n.gallery-XR09O .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n.gallery-XR09O .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n  left: 50%;\n  transform: translateX(-50%);\n  white-space: nowrap;\n}\n.gallery-XR09O .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,\n.gallery-XR09O .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n  transition:\n    200ms transform,\n    200ms left;\n}\n.gallery-XR09O .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n  transition:\n    200ms transform,\n    200ms right;\n}\n/* Fraction */\n.gallery-XR09O .swiper-pagination-fraction {\n  color: inherit;\n  color: var(--swiper-pagination-fraction-color, inherit);\n}\n/* Progress */\n.gallery-XR09O .swiper-pagination-progressbar {\n  background: rgba(0, 0, 0, 0.25);\n  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));\n  position: absolute;\n}\n.gallery-XR09O .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n  background: var(--swiper-theme-color);\n  background: var(--swiper-pagination-color, var(--swiper-theme-color));\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transform: scale(0);\n  transform-origin: left top;\n}\n.gallery-XR09O .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n  transform-origin: right top;\n}\n.gallery-XR09O .swiper-horizontal > .swiper-pagination-progressbar,\n.gallery-XR09O .swiper-pagination-progressbar.swiper-pagination-horizontal,\n.gallery-XR09O .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n.gallery-XR09O .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {\n  width: 100%;\n  height: 4px;\n  height: var(--swiper-pagination-progressbar-size, 4px);\n  left: 0;\n  top: 0;\n}\n.gallery-XR09O .swiper-vertical > .swiper-pagination-progressbar,\n.gallery-XR09O .swiper-pagination-progressbar.swiper-pagination-vertical,\n.gallery-XR09O .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n.gallery-XR09O .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {\n  width: 4px;\n  width: var(--swiper-pagination-progressbar-size, 4px);\n  height: 100%;\n  left: 0;\n  top: 0;\n}\n.gallery-XR09O .swiper-pagination-lock {\n  display: none;\n}\n\n/*navigation*/\n.gallery-XR09O.diva-widget-gallery .swiper-button-prev,\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-button-prev.swiper-button-disabled,\n.gallery-XR09O.diva-widget-gallery .swiper-button-next.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-prev.swiper-button-hidden,\n.gallery-XR09O.diva-widget-gallery .swiper-button-next.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-navigation-disabled .swiper-button-prev,\n.gallery-XR09O.diva-widget-gallery .swiper-navigation-disabled .swiper-button-next {\n  display: none !important;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-prev svg,\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-prev svg,\n.gallery-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-next svg {\n  transform: rotate(180deg);\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-prev,\n.gallery-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-next {\n  left: 10px;\n  left: var(--swiper-navigation-sides-offset, 10px);\n  right: auto;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-next,\n.gallery-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-lock {\n  display: none;\n}\n/* Navigation font start */\n.gallery-XR09O.diva-widget-gallery .swiper-button-prev:after,\n.gallery-XR09O.diva-widget-gallery .swiper-button-next:after {\n  text-transform: none !important;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-prev:after,\n.gallery-XR09O.diva-widget-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-XR09O.diva-widget-gallery .swiper-button-prev:after,\n.gallery-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-next,\n.gallery-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.gallery-XR09O.diva-widget-gallery .swiper-button-next:after,\n.gallery-XR09O.diva-widget-gallery .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n/* Navigation font end */\n";
+styleInject(css_248z$1);
+
+var galleryAdditional = "gallery-additional-oIgEY";
+var css_248z = ".gallery-additional-oIgEY.diva-widget-gallery {\n  width: 100%;\n  height: 100%;\n  --swiper-navigation-color: #bbb;\n  --swiper-navigation-sides-offset: 4px;\n}\n\n.gallery-additional-oIgEY .gallery-main {\n  height: 85%;\n}\n\n.gallery-additional-oIgEY .gallery-thumb {\n  height: 15%;\n}\n\n.gallery-additional-oIgEY .gallery-image,\n.gallery-additional-oIgEY .gallery-image-thumb {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: scale-down;\n     object-fit: scale-down;\n}\n\n.gallery-additional-oIgEY .gallery-image-thumb {\n  cursor: pointer;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-main {\n  height: 100%;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-thumb {\n  display: none;\n}\n\n.gallery-additional-oIgEY .gallery-page-number {\n  position: absolute;\n  bottom: 16px;\n  left: 16px;\n  border-radius: 15px;\n  z-index: 1000;\n  padding: 0 16px;\n}\n";
+styleInject(css_248z);
+
+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; }
+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 _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  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;
+  var arText = typeof (config === null || config === void 0 ? void 0 : config.text) === 'string' ? config.text : (config === null || config === void 0 ? void 0 : config.text) !== false ? t('widget.gallery.arActionIcon.text') : '';
+  return /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1({}, triggerProps), {}, {
+    onClick: function onClick() {
+      return setOpen(!isOpen);
+    },
+    className: 'diva-widget-ar-action-icon ' + ((_config$className = config === null || config === void 0 ? void 0 : config.className) !== null && _config$className !== void 0 ? _config$className : ''),
+    children: isOpen && useTooltip && renderLayer(/*#__PURE__*/jsxs("div", _objectSpread$1(_objectSpread$1({}, 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: arText
+        }), /*#__PURE__*/jsx("div", {
+          className: "close",
+          onClick: function onClick() {
+            return setOpen(false);
+          }
+        })]
+      }), /*#__PURE__*/jsx(Arrow, _objectSpread$1({
+        onPointerEnterCapture: undefined,
+        onPointerLeaveCapture: undefined
+      }, arrowProps))]
+    })))
+  }));
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var 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(props) {
+  var _medias$find, _props$config$arIconP;
+  var _useGallery = useGallery(props),
+    medias = _useGallery.medias,
+    thumbsSwiper = _useGallery.thumbsSwiper,
+    swiper = _useGallery.swiper,
+    onSlideChange = _useGallery.onSlideChange,
+    setThumbsSwiper = _useGallery.setThumbsSwiper,
+    setSwiper = _useGallery.setSwiper;
+  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, galleryAdditional, ' diva-widget-gallery', props.config.className),
+    children: [!((_props$config$arIconP = props.config.arIconProps) !== null && _props$config$arIconP !== void 0 && _props$config$arIconP.hidden) && (htmlArElement === null || htmlArElement === void 0 ? void 0 : htmlArElement.current) && arUrl && /*#__PURE__*/jsx(ArActionIcon, {
+      config: props.config.arIconProps,
+      url: arUrl,
+      htmlArElement: htmlArElement === null || htmlArElement === void 0 ? void 0 : htmlArElement.current
+    }), /*#__PURE__*/jsx(Swiper, _objectSpread(_objectSpread({
+      onSwiper: setSwiper,
+      resizeObserver: false,
+      onSlideChange: onSlideChange,
+      focusableElements: focusable,
+      noSwipingSelector: noSwiping,
+      navigation: true,
+      thumbs: {
+        swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
+      },
+      modules: [Navigation, Thumbs, Pagination],
+      className: "gallery-main"
+    }, props.config.sliderProp), {}, {
+      children: medias.map(function (media, i) {
+        return /*#__PURE__*/jsx(SwiperSlide, {
+          id: 'gallery media index ' + i,
+          children: /*#__PURE__*/jsx(MediaItem, {
+            media: media,
+            config: props.config,
+            isCurrentlyVisible: i === (swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex),
+            ref: htmlArElement
+          })
+        }, media.ref);
+      })
+    })), /*#__PURE__*/jsx(Swiper, _objectSpread(_objectSpread({
+      onSwiper: setThumbsSwiper,
+      resizeObserver: false,
+      slidesPerView: medias.length < 5 ? medias.length : 6,
+      modules: [Navigation, Thumbs],
+      className: "gallery-thumb"
+    }, props.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)
+        }, media.ref + 't');
+      })
+    }))]
+  });
+};
+
+var Action = function Action(_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: classNames('diva-widget-action', className),
+    onDoubleClick: onDoubleClick ? onClick : undefined,
+    onClick: !onDoubleClick ? onClick : undefined,
+    children: [typeof text == 'string' && /*#__PURE__*/jsx("div", {
+      className: classNames(textClass, 'diva-widget-action-text'),
+      children: text
+    }), icon !== undefined && /*#__PURE__*/jsx("img", {
+      src: icon
+    }), iconClass !== undefined && /*#__PURE__*/jsx("div", {
+      className: classNames(iconClass, 'diva-widget-action-icon')
+    })]
+  });
+};
+
+var ActionGroup = function ActionGroup(_ref) {
+  var _config$actions;
+  var config = _ref.config;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('diva-widget-actions', config.className),
+    children: (_config$actions = config.actions) === null || _config$actions === void 0 ? void 0 : _config$actions.map(function (a, index) {
+      return /*#__PURE__*/jsx(Action, {
+        config: a
+      }, index);
+    })
+  });
+};
+
+var Text = function Text(_ref) {
+  var config = _ref.config;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('diva-widget-text', config.className),
+    dangerouslySetInnerHTML: {
+      __html: config.text
+    }
+  });
+};
+
+function TextBlock(_ref) {
+  var config = _ref.config;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('diva-widget-text-block', config.className),
+    children: config.texts.map(function (text, index) {
+      return /*#__PURE__*/jsx(Text, {
+        config: text
+      }, index);
+    })
+  });
+}
+
+/**
+ *  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 replaceTemplatesInObject(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);
+    }
+    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);
+  var flatProduct = flatten(product);
+  for (var _i2 = 0, _matches = matches; _i2 < _matches.length; _i2++) {
+    var _flatProduct;
+    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 = (_flatProduct = flatProduct["".concat(productField, "_locales.").concat(locale)]) !== null && _flatProduct !== void 0 ? _flatProduct : flatProduct["".concat(productField, "_locales.de")];
+    if (!value) value = flatProduct[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;
+}
+
+/**
+ * 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 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
+ */
+function replaceActions(content, productVariants, product, language, openComponentFunction, onEventFunction) {
+  if (typeof content == 'string') return content;
+  return recursiveReplaceActions(content, productVariants, product, language, openComponentFunction, onEventFunction);
+}
+
+/**
+ * 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 openComponentFunction the function to open a component
+ * @param onEventFunction the function to handle an event
+ */
+function recursiveReplaceActions(content, productVariants, product, language, openComponentFunction, onEventFunction) {
+  var keys = Object.keys(content);
+  var openComponent = undefined;
+  var onEvent = 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 (_typeof(content[key]) === 'object') {
+      content[key] = recursiveReplaceActions(content[key], productVariants, product, language, openComponentFunction, onEventFunction);
+    }
+  }
+  if (openComponent || onEvent) {
+    content['onClick'] = function (_, productId) {
+      var _productVariants$find;
+      var currentProduct = (_productVariants$find = productVariants.find(function (variant) {
+        return variant._id === productId;
+      })) !== null && _productVariants$find !== void 0 ? _productVariants$find : product;
+      flatten$1(currentProduct);
+      if (openComponent) {
+        var translatedOpenComponent = replaceTemplatesInObject(openComponent, currentProduct, language);
+        openComponentFunction(translatedOpenComponent);
+      }
+      if (onEvent) {
+        onEventFunction({
+          type: onEvent,
+          data: currentProduct
+        });
+      }
+    };
+  }
+  return content;
+}
+
+export { Action, ActionGroup, Gallery, Text, TextBlock, replaceActions, replaceTemplatesInObject, useConfiguration, useCss, useProductData };