@crystaldesign/content-item 25.8.0-beta.2 → 25.8.0-beta.20

package/build/esm/index.js

@@ -1,15 +1,15 @@
-import { useState, useEffect, useCallback, useMemo, createContext, useContext, useRef, useDeferredValue, useTransition } from 'react';
+import { useState, useDeferredValue, useTransition, useEffect, useCallback, useMemo, createContext, useContext, useRef } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useDivaCore, useTranslation, DivaError } from '@crystaldesign/diva-core';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import axios from 'axios';
-import classnames from 'classnames';
+import classNames from 'classnames';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 
 (function() {
     const env = {"STAGE":"production"};
@@ -152,8 +152,8 @@ var fullscreenWrapper$1 = "fullscreen-wrapper-GByIA";
 var css_248z$8 = ".image-and-text-wrapper-c1RTN {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  justify-content: center;\n  position: relative;\n}\n\n.text-Da-D1 {\n  overflow: auto;\n  text-align: center;\n  font-size: 14px;\n}\n\n.fullscreen-button-wrapper-Botqq {\n  position: relative;\n}\n\n.fullscreen-button-A4b3x {\n  cursor: pointer;\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  top: 16px;\n  right: 8px;\n  border-radius: 3px;\n  z-index: 1000;\n  background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.fullscreen-wrapper-GByIA {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #fff;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 2000005;\n}\n";
 styleInject(css_248z$8);
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _Image = function Image(_ref) {
   var _ref$item = _ref.item,
     image = _ref$item.image,
@@ -202,7 +202,7 @@ var _Image = function Image(_ref) {
   };
   var imageComponent = /*#__PURE__*/jsx("img", {
     alt: altText,
-    style: _objectSpread$2(_objectSpread$2({}, styles), style),
+    style: _objectSpread$3(_objectSpread$3({}, styles), style),
     src: urlObj.toString()
   });
   if (showFullscreenButton) {
@@ -238,7 +238,8 @@ styleInject(css_248z$7);
 var Video = function Video(_ref) {
   var _ref$item = _ref.item,
     video = _ref$item.video,
-    thumb = _ref$item.thumb;
+    thumb = _ref$item.thumb,
+    loop = _ref$item.loop;
   if (!video) return /*#__PURE__*/jsx(Fragment, {});
   if (video.includes('youtube.com') || video.includes('youtu.be')) {
     if (thumb) return /*#__PURE__*/jsx("div", {
@@ -270,6 +271,7 @@ var Video = function Video(_ref) {
     controls: !thumb,
     playsInline: true,
     autoPlay: !thumb,
+    loop: !thumb && loop,
     children: /*#__PURE__*/jsx("source", {
       src: video + (thumb ? '#t=2' : ''),
       type: video.includes('.mp4') ? 'video/mp4' : 'video/webm'
@@ -281,12 +283,137 @@ var title = "title-0S918";
 var css_248z$6 = ".title-0S918 {\n  font-size: 18px;\n  font-weight: 500;\n}\n";
 styleInject(css_248z$6);
 
-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 useContentItemNavigator = function useContentItemNavigator(_ref) {
+var useContentItemConfiguration = function useContentItemConfiguration(_ref) {
+  var onContentItemLoaded = _ref.onContentItemLoaded,
+    currentContentItem = _ref.currentContentItem;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    apiConfig = _useDivaCore$state.apiConfig,
+    jwt = _useDivaCore$state.jwt;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n;
+  var _ref2 = currentContentItem !== null && currentContentItem !== void 0 ? currentContentItem : {},
+    contentItemId = _ref2.id,
+    contentItemCodex = _ref2.codex,
+    externalConfiguration = _ref2.configuration;
+  var _useState = useState(externalConfiguration !== null && externalConfiguration !== void 0 ? externalConfiguration : {
+      content: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    configuration = _useState2[0],
+    setConfiguration = _useState2[1];
+  var deferredConfiguration = useDeferredValue(configuration);
+  var _useTransition = useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    isPending = _useTransition2[0],
+    startTransition = _useTransition2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  useEffect(function () {
+    if (contentItemId || contentItemCodex) {
+      setLoading(true);
+      setError(null);
+      getContentItem(apiConfig.catalogService, jwt, contentItemId !== null && contentItemId !== void 0 ? contentItemId : contentItemCodex, i18n.language).then(function (newConfiguration) {
+        startTransition(function () {
+          setConfiguration(newConfiguration);
+          var infoBoxTitle = newConfiguration.content.filter(function (item) {
+            return item.type === 'Title' && item.text;
+          }).map(function (item) {
+            return item.text;
+          });
+          onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
+        });
+      })["catch"](function (error) {
+        setError(error);
+      })["finally"](function () {
+        setLoading(false);
+      });
+    }
+  }, [contentItemId, contentItemCodex]);
+  useEffect(function () {
+    if (externalConfiguration) {
+      startTransition(function () {
+        setConfiguration(externalConfiguration);
+        var infoBoxTitle = externalConfiguration.content.filter(function (item) {
+          return item.type === 'Title' && item.text;
+        }).map(function (item) {
+          return item.text;
+        });
+        onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
+      });
+      setError(null);
+      setLoading(false);
+    }
+  }, [externalConfiguration]);
+  return {
+    configuration: deferredConfiguration,
+    loading: loading || isPending,
+    error: error
+  };
+};
+function getContentItem(_x, _x2, _x3, _x4) {
+  return _getContentItem.apply(this, arguments);
+}
+function _getContentItem() {
+  _getContentItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(catalogService, jwt, idOrCodex, lang) {
+    var fullUrl, res, resData, _e$response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          fullUrl = catalogService + '/contentItems/' + idOrCodex + '?language=' + lang;
+          _context.prev = 1;
+          _context.next = 4;
+          return axios.get(fullUrl, {
+            headers: {
+              Authorization: 'Bearer ' + jwt
+            }
+          });
+        case 4:
+          res = _context.sent;
+          resData = res.data;
+          if (!(res.status !== 200)) {
+            _context.next = 8;
+            break;
+          }
+          throw new DivaError(resData.error || 'Failed to get content item');
+        case 8:
+          return _context.abrupt("return", resData);
+        case 11:
+          _context.prev = 11;
+          _context.t0 = _context["catch"](1);
+          if (!axios.isAxiosError(_context.t0)) {
+            _context.next = 15;
+            break;
+          }
+          throw new DivaError(((_e$response = _context.t0.response) === null || _e$response === void 0 || (_e$response = _e$response.data) === null || _e$response === void 0 ? void 0 : _e$response.error) || 'Could not get content item', {
+            cause: _context.t0
+          });
+        case 15:
+          throw new DivaError('Could not get content item', {
+            cause: _context.t0
+          });
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 11]]);
+  }));
+  return _getContentItem.apply(this, arguments);
+}
+
+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 useContentItemContext = function useContentItemContext(_ref) {
   var initialItemId = _ref.initialItemId,
     initialItemCodex = _ref.initialItemCodex,
-    initialItemConfiguration = _ref.initialItemConfiguration;
+    initialItemConfiguration = _ref.initialItemConfiguration,
+    onContentItemLoaded = _ref.onContentItemLoaded;
   var _useState = useState({
       current: {
         id: initialItemId,
@@ -328,68 +455,134 @@ var useContentItemNavigator = function useContentItemNavigator(_ref) {
       };
     });
   }, []);
-  var onContentItemLoaded = useCallback(function (title) {
+  var onContentItemLoadedInternal = useCallback(function (title) {
+    onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(title);
     setNavigationState(function (prev) {
-      return _objectSpread$1(_objectSpread$1({}, prev), {}, {
-        current: _objectSpread$1(_objectSpread$1({}, prev.current), {}, {
+      return _objectSpread$2(_objectSpread$2({}, prev), {}, {
+        current: _objectSpread$2(_objectSpread$2({}, prev.current), {}, {
           title: title
         })
       });
     });
   }, []);
-
+  var _useContentItemConfig = useContentItemConfiguration({
+      currentContentItem: navigationState.current,
+      onContentItemLoaded: onContentItemLoadedInternal
+    }),
+    configuration = _useContentItemConfig.configuration,
+    error = _useContentItemConfig.error,
+    loading = _useContentItemConfig.loading;
+  var content = useMemo(function () {
+    var _configuration$conten;
+    if (((_configuration$conten = configuration.content) === null || _configuration$conten === void 0 || (_configuration$conten = _configuration$conten[0]) === null || _configuration$conten === void 0 ? void 0 : _configuration$conten.type) === 'Title') {
+      return _toConsumableArray(configuration.content).slice(1);
+    }
+    return configuration.content;
+  }, [configuration]);
+  var renderTitle = useMemo(function () {
+    var _configuration$conten2, _configuration$conten3;
+    return (configuration === null || configuration === void 0 || (_configuration$conten2 = configuration.content) === null || _configuration$conten2 === void 0 || (_configuration$conten2 = _configuration$conten2[0]) === null || _configuration$conten2 === void 0 ? void 0 : _configuration$conten2.type) === 'Title' ? configuration === null || configuration === void 0 || (_configuration$conten3 = configuration.content) === null || _configuration$conten3 === void 0 ? void 0 : _configuration$conten3[0] : undefined;
+  }, [configuration]);
+  var hasNavigations = useMemo(function () {
+    var _configuration$conten4;
+    var c = JSON.stringify((_configuration$conten4 = configuration === null || configuration === void 0 ? void 0 : configuration.content) !== null && _configuration$conten4 !== void 0 ? _configuration$conten4 : []);
+    return c.includes('@[codex:') || c.includes('@[id:');
+  }, [content]);
   // Create context value
-  var contextValue = useMemo(function () {
-    return {
-      navigateTo: navigateTo,
-      onContentItemLoaded: onContentItemLoaded,
-      canGoBack: navigationState.history.length > 0,
-      currentContentItem: navigationState.current
-    };
-  }, [navigationState.current, navigationState.history.length]);
+  var contextValue = {
+    navigateTo: navigateTo,
+    navigateBack: navigateBack,
+    canGoBack: navigationState.history.length > 0,
+    renderTitle: renderTitle,
+    content: content,
+    loading: loading,
+    error: error,
+    hasNavigations: hasNavigations
+  };
   return {
-    contextValue: contextValue,
-    navigateBack: navigateBack
+    contextValue: contextValue
   };
 };
 
-var navigator = "navigator-C8xIR";
-var backButton = "back-button-JNU6b";
-var css_248z$5 = ".navigator-C8xIR {\n  position: relative;\n  width: 100%;\n}\n\n.back-button-JNU6b {\n  position: absolute;\n  top: 12px;\n  left: 8px;\n  z-index: 2;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 20px;\n  color: #666;\n  transition: color 0.2s ease;\n  border-radius: 50%;\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 4px;\n}\n.back-button-JNU6b:after {\n  content: '←';\n  display: block;\n  text-align: center;\n}\n\n.back-button-JNU6b:hover {\n  color: #333;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n";
+var header = "header-7dWXW";
+var paddingLeft = "padding-left-The7U";
+var headerLeft = "header-left-pbZcL";
+var backButton = "back-button-2IUJb";
+var closeButton = "close-button-VW8Z5";
+var css_248z$5 = ".header-7dWXW {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0px 12px;\n  width: calc(100% - 24px);\n  justify-content: space-between;\n  border-bottom: 1px solid lightgray;\n}\n.padding-left-The7U {\n  padding-left: 34px;\n}\n.header-left-pbZcL {\n  display: flex;\n  align-items: center;\n  width: 90%;\n}\n\n.back-button-2IUJb {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 20px;\n  color: #666;\n  transition:\n    color 0.2s ease,\n    background-color 0.2s ease;\n  border-radius: 50%;\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 4px;\n}\n\n.back-button-2IUJb:after {\n  content: '←';\n  display: block;\n  text-align: center;\n}\n\n.back-button-2IUJb:hover,\n.close-button-VW8Z5:hover {\n  color: #333;\n  background-color: rgba(0, 0, 0, 0.05);\n  background-size: 45%;\n}\n.close-button-VW8Z5 {\n  width: 36px;\n  height: 36px;\n  background-repeat: no-repeat;\n  border-radius: 50%;\n  background-position: center center;\n  background-size: 40%;\n  background-color: transparent;\n  transition:\n    background-color 0.2s ease,\n    background-size 0.2s ease;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2210%22 viewBox%3D%220 0 10 10%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.35355 0.646447C1.15829 0.451184 0.841709 0.451184 0.646447 0.646447C0.451184 0.841709 0.451184 1.15829 0.646447 1.35355L1.35355 0.646447ZM8.64645 9.35355C8.84171 9.54882 9.15829 9.54882 9.35355 9.35355C9.54882 9.15829 9.54882 8.84171 9.35355 8.64645L8.64645 9.35355ZM9.35355 1.35355C9.54882 1.15829 9.54882 0.841709 9.35355 0.646447C9.15829 0.451184 8.84171 0.451184 8.64645 0.646447L9.35355 1.35355ZM0.646447 8.64645C0.451185 8.84171 0.451185 9.15829 0.646447 9.35355C0.841709 9.54881 1.15829 9.54881 1.35355 9.35355L0.646447 8.64645ZM0.646447 1.35355L8.64645 9.35355L9.35355 8.64645L1.35355 0.646447L0.646447 1.35355ZM8.64645 0.646447L0.646447 8.64645L1.35355 9.35355L9.35355 1.35355L8.64645 0.646447Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n\n  cursor: pointer;\n}\n";
 styleInject(css_248z$5);
 
-var ContentItemNavigationContext = /*#__PURE__*/createContext(undefined);
-function useContentItemNavigation() {
-  var context = useContext(ContentItemNavigationContext);
+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 Header = function Header(_ref) {
+  var onClose = _ref.onClose,
+    headerClassName = _ref.headerClassName,
+    headerWrapperStyle = _ref.headerWrapperStyle;
+  var _useContentItem = useContentItem(),
+    canGoBack = _useContentItem.canGoBack,
+    navigateBack = _useContentItem.navigateBack,
+    renderTitle = _useContentItem.renderTitle,
+    hasNavigations = _useContentItem.hasNavigations;
+  if (!onClose && !canGoBack && !renderTitle) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(header, headerClassName),
+    style: headerWrapperStyle,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames(headerLeft, !canGoBack && hasNavigations && paddingLeft),
+      children: [canGoBack && /*#__PURE__*/jsx("button", {
+        className: backButton,
+        onClick: navigateBack,
+        id: "diva-content-item-back-button",
+        "aria-label": "Go back"
+      }), renderTitle && /*#__PURE__*/jsx(Title, {
+        item: _objectSpread$1(_objectSpread$1({}, renderTitle), {}, {
+          style: _objectSpread$1(_objectSpread$1({}, renderTitle.style), {}, {
+            borderBottom: 'unset'
+          })
+        })
+      })]
+    }), onClose && /*#__PURE__*/jsx("div", {
+      className: closeButton,
+      onClick: onClose,
+      id: "diva-content-item-close-button",
+      "aria-label": "Close"
+    })]
+  });
+};
+
+var ContentItemContext = /*#__PURE__*/createContext(undefined);
+function useContentItem() {
+  var context = useContext(ContentItemContext);
   if (!context) {
-    throw new Error('useContentItemNavigation must be used within a ContentItemNavigator');
+    throw new Error('useContentItem must be used within a ContentItemContextProvider');
   }
   return context;
 }
-function ContentItemNavigator(_ref) {
+function ContentItemContextProvider(_ref) {
   var initialItemId = _ref.initialItemId,
     initialItemCodex = _ref.initialItemCodex,
     initialItemConfiguration = _ref.initialItemConfiguration,
-    children = _ref.children;
-  var _useContentItemNaviga = useContentItemNavigator({
+    children = _ref.children,
+    headerClassName = _ref.headerClassName,
+    headerWrapperStyle = _ref.headerWrapperStyle,
+    onClose = _ref.onClose,
+    onContentItemLoaded = _ref.onContentItemLoaded;
+  var _useContentItemContex = useContentItemContext({
       initialItemId: initialItemId,
       initialItemCodex: initialItemCodex,
-      initialItemConfiguration: initialItemConfiguration
+      initialItemConfiguration: initialItemConfiguration,
+      onContentItemLoaded: onContentItemLoaded
     }),
-    contextValue = _useContentItemNaviga.contextValue,
-    navigateBack = _useContentItemNaviga.navigateBack;
-  return /*#__PURE__*/jsx(ContentItemNavigationContext.Provider, {
+    contextValue = _useContentItemContex.contextValue;
+  return /*#__PURE__*/jsxs(ContentItemContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxs("div", {
-      className: navigator,
-      id: "diva-content-item-navigator",
-      children: [contextValue.canGoBack && /*#__PURE__*/jsx("button", {
-        className: backButton,
-        onClick: navigateBack,
-        id: "diva-content-item-back-button",
-        "aria-label": "Go back"
-      }), children]
-    })
+    children: [/*#__PURE__*/jsx(Header, {
+      headerClassName: headerClassName,
+      onClose: onClose,
+      headerWrapperStyle: headerWrapperStyle
+    }), children]
   });
 }
 
@@ -397,8 +590,8 @@ var Title = function Title(_ref) {
   var _ref$item = _ref.item,
     text = _ref$item.text,
     style = _ref$item.style;
-  var _useContentItemNaviga = useContentItemNavigation(),
-    navigateTo = _useContentItemNaviga.navigateTo;
+  var _useContentItem = useContentItem(),
+    navigateTo = _useContentItem.navigateTo;
   if (!text) return /*#__PURE__*/jsx(Fragment, {});
   var processedContent = processContentItemLinks(text, navigateTo);
   return /*#__PURE__*/jsx("h4", {
@@ -520,8 +713,8 @@ var RichText = function RichText(_ref) {
     text = _ref$item.text,
     style = _ref$item.style;
   var containerRef = useRef(null);
-  var _useContentItemNaviga = useContentItemNavigation(),
-    navigateTo = _useContentItemNaviga.navigateTo;
+  var _useContentItem = useContentItem(),
+    navigateTo = _useContentItem.navigateTo;
   var processedContent = processContentItemLinks(text, navigateTo);
   useEffect(function () {
     if (!containerRef.current) return;
@@ -605,134 +798,6 @@ var ContentItem = function ContentItem(_ref) {
   throw new Error('unkonwn type: ' + item.type);
 };
 
-var useContentItem = function useContentItem(_ref) {
-  var onContentItemLoaded = _ref.onContentItemLoaded;
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    apiConfig = _useDivaCore$state.apiConfig,
-    jwt = _useDivaCore$state.jwt;
-  var _useTranslation = useTranslation(),
-    i18n = _useTranslation.i18n;
-  var _useContentItemNaviga = useContentItemNavigation(),
-    _useContentItemNaviga2 = _useContentItemNaviga.currentContentItem,
-    contentItemId = _useContentItemNaviga2.id,
-    contentItemCodex = _useContentItemNaviga2.codex,
-    externalConfiguration = _useContentItemNaviga2.configuration,
-    onContentItemLoadedFromNavigation = _useContentItemNaviga.onContentItemLoaded;
-  var _useState = useState(externalConfiguration !== null && externalConfiguration !== void 0 ? externalConfiguration : {
-      content: []
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    configuration = _useState2[0],
-    setConfiguration = _useState2[1];
-  var deferredConfiguration = useDeferredValue(configuration);
-  var _useTransition = useTransition(),
-    _useTransition2 = _slicedToArray(_useTransition, 2),
-    isPending = _useTransition2[0],
-    startTransition = _useTransition2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
-  useEffect(function () {
-    if (contentItemId || contentItemCodex) {
-      setLoading(true);
-      setError(null);
-      getContentItem(apiConfig.catalogService, jwt, contentItemId !== null && contentItemId !== void 0 ? contentItemId : contentItemCodex, i18n.language).then(function (newConfiguration) {
-        startTransition(function () {
-          setConfiguration(newConfiguration);
-          var infoBoxTitle = newConfiguration.content.filter(function (item) {
-            return item.type === 'Title' && item.text;
-          }).map(function (item) {
-            return item.text;
-          });
-          onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
-          onContentItemLoadedFromNavigation(infoBoxTitle[0]);
-        });
-      })["catch"](function (error) {
-        setError(error);
-      })["finally"](function () {
-        setLoading(false);
-      });
-    }
-  }, [contentItemId, contentItemCodex]);
-  useEffect(function () {
-    if (externalConfiguration) {
-      startTransition(function () {
-        setConfiguration(externalConfiguration);
-        var infoBoxTitle = externalConfiguration.content.filter(function (item) {
-          return item.type === 'Title' && item.text;
-        }).map(function (item) {
-          return item.text;
-        });
-        onContentItemLoaded === null || onContentItemLoaded === void 0 || onContentItemLoaded(infoBoxTitle[0]);
-        onContentItemLoadedFromNavigation(infoBoxTitle[0]);
-      });
-      setError(null);
-      setLoading(false);
-    }
-  }, [externalConfiguration]);
-  return {
-    configuration: configuration,
-    deferredConfiguration: deferredConfiguration,
-    loading: loading || isPending,
-    error: error
-  };
-};
-function getContentItem(_x, _x2, _x3, _x4) {
-  return _getContentItem.apply(this, arguments);
-}
-function _getContentItem() {
-  _getContentItem = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(catalogService, jwt, idOrCodex, lang) {
-    var fullUrl, res, resData, _e$response;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          fullUrl = catalogService + '/contentItems/' + idOrCodex + '?language=' + lang;
-          _context.prev = 1;
-          _context.next = 4;
-          return axios.get(fullUrl, {
-            headers: {
-              Authorization: 'Bearer ' + jwt
-            }
-          });
-        case 4:
-          res = _context.sent;
-          resData = res.data;
-          if (!(res.status !== 200)) {
-            _context.next = 8;
-            break;
-          }
-          throw new DivaError(resData.error || 'Failed to get content item');
-        case 8:
-          return _context.abrupt("return", resData);
-        case 11:
-          _context.prev = 11;
-          _context.t0 = _context["catch"](1);
-          if (!axios.isAxiosError(_context.t0)) {
-            _context.next = 15;
-            break;
-          }
-          throw new DivaError(((_e$response = _context.t0.response) === null || _e$response === void 0 || (_e$response = _e$response.data) === null || _e$response === void 0 ? void 0 : _e$response.error) || 'Could not get content item', {
-            cause: _context.t0
-          });
-        case 15:
-          throw new DivaError('Could not get content item', {
-            cause: _context.t0
-          });
-        case 16:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[1, 11]]);
-  }));
-  return _getContentItem.apply(this, arguments);
-}
-
 var errorBox = "error-box-coPDD";
 var css_248z$2 = ".error-box-coPDD {\n  color: red;\n  text-align: center;\n  padding: 20px;\n  border: 1px solid red;\n  background-color: #ffeeee;\n  border-radius: 4px;\n}\n";
 styleInject(css_248z$2);
@@ -761,23 +826,24 @@ function Loader() {
 var rootWrapper = "root-wrapper-WNprt";
 var contentWrapper = "content-wrapper-K5XIs";
 var loading = "loading-089Ib";
-var css_248z = ".root-wrapper-WNprt {\n  min-height: 60px;\n  position: relative;\n  width: 100%;\n  padding-left: 40px;\n}\n\n.content-wrapper-K5XIs {\n  transition: opacity 0.2s ease-in-out;\n}\n.content-wrapper-K5XIs.loading-089Ib {\n  opacity: 0.5;\n}\n";
+var css_248z = ".root-wrapper-WNprt {\n  min-height: 60px;\n  position: relative;\n  overflow: auto;\n}\n\n.content-wrapper-K5XIs {\n  transition: opacity 0.2s ease-in-out;\n}\n.content-wrapper-K5XIs.loading-089Ib {\n  opacity: 0.5;\n}\n";
 styleInject(css_248z);
 
-var ContentItems = function ContentItems(props) {
-  var _deferredConfiguratio;
-  var _useContentItem = useContentItem(props),
-    deferredConfiguration = _useContentItem.deferredConfiguration,
+var ContentItems = function ContentItems(_ref) {
+  var wrapperStyle = _ref.wrapperStyle;
+  var _useContentItem = useContentItem(),
+    content = _useContentItem.content,
     loading$1 = _useContentItem.loading,
     error = _useContentItem.error;
   return /*#__PURE__*/jsxs("div", {
     className: rootWrapper,
     id: 'diva-content-item',
     children: [loading$1 && /*#__PURE__*/jsx(Loader, {}), /*#__PURE__*/jsxs("div", {
-      className: classnames(contentWrapper, _defineProperty({}, loading, loading$1)),
+      className: classNames(contentWrapper, _defineProperty({}, loading, loading$1)),
+      style: wrapperStyle,
       children: [error && /*#__PURE__*/jsx(ErrorBox, {
         error: error
-      }), (_deferredConfiguratio = deferredConfiguration.content) === null || _deferredConfiguratio === void 0 ? void 0 : _deferredConfiguratio.map(function (item, i) {
+      }), content === null || content === void 0 ? void 0 : content.map(function (item, i) {
         return /*#__PURE__*/jsx(ContentItem, {
           item: item
         }, i);
@@ -787,12 +853,16 @@ var ContentItems = function ContentItems(props) {
 };
 
 var ContentItemComponent = function ContentItemComponent(props) {
-  return /*#__PURE__*/jsx(ContentItemNavigator, {
+  return /*#__PURE__*/jsx(ContentItemContextProvider, {
     initialItemId: props.contentItemId,
     initialItemCodex: props.contentItemCodex,
     initialItemConfiguration: props.configuration,
+    wrapperStyle: props.wrapperStyle,
+    headerWrapperStyle: props.headerWrapperStyle,
+    headerClassName: props.headerClassName,
+    onContentItemLoaded: props.onContentItemLoaded,
+    onClose: props.onClose,
     children: /*#__PURE__*/jsx(ContentItems, {
-      onContentItemLoaded: props.onContentItemLoaded,
       wrapperStyle: props.wrapperStyle
     })
   });

package/build/types/content-item/src/Components/ContentItemContextProvider/index.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { Configuration, ContentItemContextType } from '../../types';
+export interface ContentItemContextProviderProps {
+    initialItemId?: string;
+    initialItemCodex?: string;
+    initialItemConfiguration?: Configuration;
+    children?: ReactNode;
+    headerClassName?: string;
+    headerWrapperStyle?: React.CSSProperties;
+    onClose?: () => void;
+    wrapperStyle?: React.CSSProperties;
+    onContentItemLoaded?: (title: string) => void;
+}
+export declare function useContentItem(): ContentItemContextType;
+export declare function ContentItemContextProvider({ initialItemId, initialItemCodex, initialItemConfiguration, children, headerClassName, headerWrapperStyle, onClose, onContentItemLoaded, }: ContentItemContextProviderProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/ContentItemContextProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAKpE,MAAM,WAAW,+BAA+B;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,cAAc,2BAM7B;AAED,wBAAgB,0BAA0B,CAAC,EACzC,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACR,eAAe,EACf,kBAAkB,EAClB,OAAO,EACP,mBAAmB,GACpB,EAAE,+BAA+B,qBASjC"}

package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemConfiguration.d.ts

@@ -0,0 +1,12 @@
+import { Configuration, ContentItemState } from '../../types';
+export interface UseContentItemProps {
+    currentContentItem?: ContentItemState;
+    onContentItemLoaded?: (title: string) => void;
+}
+export declare const useContentItemConfiguration: ({ onContentItemLoaded, currentContentItem, }: UseContentItemProps) => {
+    configuration: Configuration;
+    loading: boolean;
+    error: Error | null;
+};
+export default useContentItemConfiguration;
+//# sourceMappingURL=useContentItemConfiguration.d.ts.map

package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemConfiguration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentItemConfiguration.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/useContentItemConfiguration.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI9D,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC;IACtC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,2BAA2B,iDAGrC,mBAAmB,KAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAmDrB,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemContext.d.ts

@@ -0,0 +1,6 @@
+import { ContentItemContextType } from '../../types';
+import { ContentItemContextProviderProps } from './index';
+export declare const useContentItemContext: ({ initialItemId, initialItemCodex, initialItemConfiguration, onContentItemLoaded, }: ContentItemContextProviderProps) => {
+    contextValue: ContentItemContextType;
+};
+//# sourceMappingURL=useContentItemContext.d.ts.map

package/build/types/content-item/src/Components/ContentItemContextProvider/useContentItemContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContentItemContext.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemContextProvider/useContentItemContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAoB,MAAM,aAAa,CAAC;AACvE,OAAO,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAG1D,eAAO,MAAM,qBAAqB,wFAK/B,+BAA+B;;CAkFjC,CAAC"}

package/build/types/content-item/src/Components/ContentItems/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { UseContentItemProps } from './useContentItem';
-interface ContentItemsProps extends UseContentItemProps {
+interface ContentItemsProps {
     wrapperStyle?: React.CSSProperties;
 }
-declare const ContentItems: (props: ContentItemsProps) => React.JSX.Element;
+declare const ContentItems: ({ wrapperStyle }: ContentItemsProps) => React.JSX.Element;
 export default ContentItems;
 //# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/ContentItems/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,QAAA,MAAM,YAAY,UAAW,iBAAiB,sBAY7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,iBAAiB;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,QAAA,MAAM,YAAY,qBAAsB,iBAAiB,sBAYxD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/content-item/src/Components/Header/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface HeaderProps {
+    onClose?: () => void;
+    headerClassName?: string;
+    headerWrapperStyle?: React.CSSProperties;
+}
+declare const Header: ({ onClose, headerClassName, headerWrapperStyle }: HeaderProps) => React.JSX.Element;
+export default Header;
+//# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AACD,QAAA,MAAM,MAAM,qDAAsD,WAAW,sBAgB5E,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/content-item/src/Components/Video/index.d.ts

@@ -3,6 +3,6 @@ import { VideoType } from '../../types';
 type Props = {
     item: VideoType;
 };
-declare const Video: ({ item: { video, thumb } }: Props) => React.JSX.Element;
+declare const Video: ({ item: { video, thumb, loop } }: Props) => React.JSX.Element;
 export default Video;
 //# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/Video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,+BAAgC,KAAK,sBA4B/C,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,qCAAsC,KAAK,sBAqCrD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/content-item/src/index.d.ts

@@ -9,6 +9,9 @@ export interface ContentItemProps {
     contentItemId?: string;
     contentItemCodex?: string;
     wrapperStyle?: React.CSSProperties;
+    headerClassName?: string;
+    headerWrapperStyle?: React.CSSProperties;
+    onClose?: () => void;
     onContentItemLoaded?: (title: string) => void;
 }
 export declare const ContentItemComponent: React.FC<ContentItemProps>;

package/build/types/content-item/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAU3D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAe3D,CAAC"}

package/build/types/content-item/src/types.d.ts

@@ -5,11 +5,15 @@ export interface ContentItemState {
     configuration?: Configuration;
     title?: string;
 }
-export interface ContentItemNavigationContextType {
+export interface ContentItemContextType {
     navigateTo: (props: ContentItemState) => void;
-    onContentItemLoaded: (title: string) => void;
+    navigateBack: () => void;
     canGoBack: boolean;
-    currentContentItem: ContentItemState;
+    content?: ContentItemType[];
+    loading?: boolean;
+    error?: Error | null;
+    renderTitle?: TitleType;
+    hasNavigations?: boolean;
 }
 export interface Configuration {
     content: ContentItemType[];
@@ -51,6 +55,7 @@ export interface VideoType {
     type: 'Video';
     video: string;
     thumb?: boolean;
+    loop?: boolean;
 }
 export interface URLType {
     type: 'URL';

package/build/types/content-item/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gCAAgC;IAC/C,UAAU,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AAErH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;AAErH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AACD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/content-item",
-  "version": "25.8.0-beta.2",
+  "version": "25.8.0-beta.20",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -34,5 +34,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/content-item/src/index.d.ts",
-  "gitHead": "4333eeff9a165c43b2421ffe3abb4852c6014f08"
+  "gitHead": "9c1dd6cded06b2f44d1b0e6ae5234fa07c37d992"
 }

package/build/types/content-item/src/Components/ContentItemNavigator/index.d.ts

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Configuration, ContentItemNavigationContextType } from '../../types';
-export interface ContentItemNavigatorProps {
-    initialItemId?: string;
-    initialItemCodex?: string;
-    initialItemConfiguration?: Configuration;
-    children?: ReactNode;
-}
-export declare function useContentItemNavigation(): ContentItemNavigationContextType;
-export declare function ContentItemNavigator({ initialItemId, initialItemCodex, initialItemConfiguration, children }: ContentItemNavigatorProps): React.JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/build/types/content-item/src/Components/ContentItemNavigator/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemNavigator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,gCAAgC,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,yBAAyB;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,wBAAgB,wBAAwB,qCAMvC;AAED,wBAAgB,oBAAoB,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,EAAE,yBAAyB,qBAWtI"}

package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts

@@ -1,7 +0,0 @@
-import { ContentItemNavigationContextType } from '../../types';
-import { ContentItemNavigatorProps } from './index';
-export declare const useContentItemNavigator: ({ initialItemId, initialItemCodex, initialItemConfiguration }: ContentItemNavigatorProps) => {
-    contextValue: ContentItemNavigationContextType;
-    navigateBack: () => void;
-};
-//# sourceMappingURL=useContentItemNavigator.d.ts.map

package/build/types/content-item/src/Components/ContentItemNavigator/useContentItemNavigator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContentItemNavigator.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItemNavigator/useContentItemNavigator.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAoB,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,uBAAuB,kEAAmE,yBAAyB;;;CA+D/H,CAAC"}

package/build/types/content-item/src/Components/ContentItems/useContentItem.d.ts

@@ -1,12 +0,0 @@
-import { Configuration } from '../../types';
-export interface UseContentItemProps {
-    onContentItemLoaded?: (title: string) => void;
-}
-export declare const useContentItem: ({ onContentItemLoaded, }: UseContentItemProps) => {
-    configuration: Configuration;
-    deferredConfiguration: Configuration;
-    loading: boolean;
-    error: Error | null;
-};
-export default useContentItem;
-//# sourceMappingURL=useContentItem.d.ts.map

package/build/types/content-item/src/Components/ContentItems/useContentItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContentItem.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/ContentItems/useContentItem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK5C,MAAM,WAAW,mBAAmB;IAClC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,cAAc,6BAExB,mBAAmB,KAAG;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,qBAAqB,EAAE,aAAa,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAyDrB,CAAC;AAEF,eAAe,cAAc,CAAC"}