@crystaldesign/content-item 25.3.0-beta.3 → 25.3.0-beta.31

package/build/esm/index.js

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useState } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useDivaCore } from '@crystaldesign/diva-core';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
@@ -45,8 +46,8 @@ function styleInject(css, ref) {
 }
 
 var urlText = "url-text-yHwAC";
-var css_248z$4 = ".url-text-yHwAC {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  text-align: right;\n  position: relative;\n  display: block;\n  width: 100%;\n}\n";
-styleInject(css_248z$4);
+var css_248z$5 = ".url-text-yHwAC {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  text-align: right;\n  position: relative;\n  display: block;\n  width: 100%;\n}\n";
+styleInject(css_248z$5);
 
 var URL$1 = function URL(_ref) {
   var _ref$item = _ref.item,
@@ -63,30 +64,90 @@ var URL$1 = function URL(_ref) {
   });
 };
 
+var imageAndTextWrapper = "image-and-text-wrapper-c1RTN";
+var text = "text-Da-D1";
+var fullscreenButtonWrapper = "fullscreen-button-wrapper-Botqq";
+var fullscreenButton$1 = "fullscreen-button-A4b3x";
+var fullscreenWrapper$1 = "fullscreen-wrapper-GByIA";
+var css_248z$4 = ".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$4);
+
 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 Image = function Image(_ref) {
+var _Image = function Image(_ref) {
   var _ref$item = _ref.item,
     image = _ref$item.image,
     cover = _ref$item.cover,
     style = _ref$item.style,
-    altText = _ref$item.altText;
+    altText = _ref$item.altText,
+    thumb = _ref$item.thumb,
+    inGallery = _ref$item.inGallery,
+    disableFullscreen = _ref$item.disableFullscreen,
+    inFullscreen = _ref.inFullscreen;
   var styles = {};
+  var _useDivaCore = useDivaCore(),
+    openFullscreen = _useDivaCore.actions.openFullscreen;
   if (!image) return /*#__PURE__*/jsx(Fragment, {});
   var urlObj = new URL(image);
+  var showAltText = !thumb && altText;
+  var showFullscreenButton = !inGallery && !inFullscreen && !disableFullscreen && !thumb;
   if (!cover) {
     styles.maxWidth = '100%';
-    styles.maxHeight = '100%';
+    styles.maxHeight = showAltText && inGallery ? 'calc(100% - 48px)' : '100%';
   } else {
     styles.objectFit = 'cover';
     styles.minWidth = '100%';
-    styles.minHeight = '100%';
+    styles.minHeight = showAltText && inGallery ? 'calc(100% - 48px)' : '100%';
   }
-  return /*#__PURE__*/jsx("img", {
+  var openFullscreenClick = function openFullscreenClick() {
+    openFullscreen({
+      absoluteFullscreen: true,
+      overwrittenZIndex: 3000000,
+      content: /*#__PURE__*/jsxs("div", {
+        id: "diva-content-item",
+        className: fullscreenWrapper$1,
+        children: [/*#__PURE__*/jsx(_Image, {
+          item: {
+            image: image,
+            cover: cover,
+            style: style,
+            altText: altText,
+            thumb: thumb,
+            type: 'Image'
+          },
+          inFullscreen: true
+        }), ","]
+      })
+    });
+  };
+  var imageComponent = /*#__PURE__*/jsx("img", {
     alt: altText,
     style: _objectSpread$2(_objectSpread$2({}, styles), style),
     src: urlObj.toString()
   });
+  if (showFullscreenButton) {
+    imageComponent = /*#__PURE__*/jsxs("div", {
+      className: fullscreenButtonWrapper,
+      style: styles,
+      children: [/*#__PURE__*/jsx("div", {
+        className: fullscreenButton$1,
+        onClick: openFullscreenClick
+      }), imageComponent]
+    });
+  }
+  if (showAltText) {
+    return /*#__PURE__*/jsxs("div", {
+      className: imageAndTextWrapper,
+      style: inGallery ? {
+        height: '100%'
+      } : undefined,
+      children: [imageComponent, /*#__PURE__*/jsx("div", {
+        className: text,
+        children: altText
+      })]
+    });
+  }
+  return imageComponent;
 };
 
 var videoClass = "videoClass-jg-N2";
@@ -155,29 +216,61 @@ var Title = function Title(_ref) {
 var css_248z$1 = "/*Free mode*/\n#diva-content-item .swiper-free-mode > .swiper-wrapper {\n  transition-timing-function: ease-out;\n  margin: 0 auto;\n}\n/*navigation*/\n:root {\n  --swiper-navigation-size: 44px;\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-button-prev {\n  position: absolute;\n  top: 50%;\n  width: calc(44px / 44 * 27);\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\n  height: 44px;\n  height: var(--swiper-navigation-size);\n  margin-top: calc(0px - (44px / 2));\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: #007aff;\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n#diva-content-item .swiper-button-next.swiper-button-disabled,\n#diva-content-item .swiper-button-prev.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n#diva-content-item .swiper-button-next.swiper-button-hidden,\n#diva-content-item .swiper-button-prev.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n#diva-content-item .swiper-navigation-disabled .swiper-button-next,\n#diva-content-item .swiper-navigation-disabled .swiper-button-prev {\n  display: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n  text-transform: none !important;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-button-prev:after {\n  font-family: swiper-icons;\n  font-size: 44px;\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#diva-content-item .swiper-button-prev,\n#diva-content-item .swiper-rtl .swiper-button-next {\n  left: 10px;\n  right: auto;\n}\n#diva-content-item .swiper-button-prev:after,\n#diva-content-item .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n#diva-content-item .swiper-button-next,\n#diva-content-item .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  left: auto;\n}\n#diva-content-item .swiper-button-next:after,\n#diva-content-item .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n#diva-content-item .swiper-button-lock {\n  display: none;\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, 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');\n  font-weight: 400;\n  font-style: normal;\n}\n:root {\n  --swiper-theme-color: #007aff;\n}\n#diva-content-item .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#diva-content-item .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n#diva-content-item .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#diva-content-item .swiper-android .swiper-slide,\n#diva-content-item .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n#diva-content-item .swiper-pointer-events {\n  touch-action: pan-y;\n}\n#diva-content-item .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n#diva-content-item .swiper-slide {\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n#diva-content-item .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n#diva-content-item .swiper-autoheight,\n#diva-content-item .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n#diva-content-item .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n#diva-content-item .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n#diva-content-item .swiper-3d,\n#diva-content-item .swiper-3d.swiper-css-mode .swiper-wrapper {\n  perspective: 1200px;\n}\n#diva-content-item .swiper-3d .swiper-cube-shadow,\n#diva-content-item .swiper-3d .swiper-slide,\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top,\n#diva-content-item .swiper-3d .swiper-wrapper {\n  transform-style: preserve-3d;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow,\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom,\n#diva-content-item .swiper-3d .swiper-slide-shadow-left,\n#diva-content-item .swiper-3d .swiper-slide-shadow-right,\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 10;\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow {\n  background: rgba(0, 0, 0, 0.15);\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-left {\n  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-right {\n  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-top {\n  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-3d .swiper-slide-shadow-bottom {\n  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper {\n  overflow: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n  display: none;\n}\n#diva-content-item .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: start start;\n}\n#diva-content-item .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n#diva-content-item .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n#diva-content-item .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] #diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n#diva-content-item .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n#diva-content-item .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
 styleInject(css_248z$1);
 
+var fullscreenWrapper = "fullscreen-wrapper-TiWjP";
+var fullscreenButton = "fullscreen-button-unFbw";
 var mySwiper2 = "mySwiper2-mfrK1";
 var mySwiper = "mySwiper-urn8y";
-var css_248z = "#diva-content-item .swiper {\n  width: 100%;\n  height: 100%;\n}\n#diva-content-item .swiper-slide {\n  text-align: center;\n  font-size: 18px;\n  background: #fff;\n\n  /* Center slide text vertically */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n#diva-content-item .swiper {\n  width: 100%;\n  height: 300px;\n  margin-left: auto;\n  margin-right: auto;\n}\n#diva-content-item .swiper-slide {\n  background-size: cover;\n  background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n  height: 80%;\n  width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n  height: 20%;\n  box-sizing: border-box;\n  padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n  width: 25%;\n  height: 100%;\n  opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n  opacity: 1;\n}\n";
+var css_248z = "#diva-content-item .swiper {\n  width: 100%;\n  height: 100%;\n}\n#diva-content-item .swiper-slide {\n  text-align: center;\n  font-size: 18px;\n  background: #fff;\n\n  /* Center slide text vertically */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.fullscreen-wrapper-TiWjP {\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\n.fullscreen-button-unFbw {\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.mobile #diva-content-item .swiper-slide {\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  background: initial;\n}\n\n#diva-content-item .swiper {\n  width: 100%;\n  height: 350px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.diva-fullscreen #DivaContentItemGallery {\n  height: 90% !important;\n  width: 90% !important;\n}\n\n.diva-fullscreen #diva-content-item .mySwiper2-mfrK1 {\n  height: 100%;\n}\n\n#diva-content-item .swiper-slide {\n  background-size: cover;\n  background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n  height: 80%;\n  width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n  height: 20%;\n  box-sizing: border-box;\n  padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n  width: 25%;\n  height: 100%;\n  opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n  opacity: 1;\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 Gallery = function Gallery(_ref) {
+var _Gallery = function Gallery(_ref) {
   var _ref$item = _ref.item,
     content = _ref$item.content,
-    wrappingStyle = _ref$item.wrappingStyle;
+    wrappingStyle = _ref$item.wrappingStyle,
+    disableFullscreen = _ref$item.disableFullscreen,
+    inFullscreen = _ref.inFullscreen;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     thumbsSwiper = _useState2[0],
     setThumbsSwiper = _useState2[1];
+  var _useDivaCore = useDivaCore(),
+    openFullscreen = _useDivaCore.actions.openFullscreen;
   if (content.length == 0) return /*#__PURE__*/jsx(Fragment, {});
   if (content.length == 1) return /*#__PURE__*/jsx(ContentItem, {
-    item: _objectSpread$1({}, content[0])
+    item: _objectSpread$1(_objectSpread$1({}, content[0]), {
+      disableFullscreen: disableFullscreen
+    })
   });
+  var openFullscreenClick = function openFullscreenClick() {
+    openFullscreen({
+      absoluteFullscreen: true,
+      overwrittenZIndex: 3000000,
+      content: /*#__PURE__*/jsxs("div", {
+        id: "diva-content-item",
+        className: fullscreenWrapper,
+        children: [/*#__PURE__*/jsx(_Gallery, {
+          item: {
+            content: content,
+            wrappingStyle: wrappingStyle,
+            type: 'Gallery'
+          },
+          inFullscreen: true
+        }), ","]
+      })
+    });
+  };
   return /*#__PURE__*/jsxs("div", {
-    style: _objectSpread$1({}, wrappingStyle),
+    id: 'DivaContentItemGallery',
+    style: _objectSpread$1(_objectSpread$1({}, wrappingStyle), {}, {
+      position: 'relative'
+    }),
     className: "diva-stop-swipe-detection",
-    children: [/*#__PURE__*/jsx(Swiper, {
+    children: [!inFullscreen && !disableFullscreen && /*#__PURE__*/jsx("div", {
+      className: fullscreenButton,
+      onClick: openFullscreenClick
+    }), /*#__PURE__*/jsx(Swiper, {
       style: {
         '--swiper-navigation-color': '#fff',
         '--swiper-pagination-color': '#fff'
@@ -192,7 +285,9 @@ var Gallery = function Gallery(_ref) {
       children: content.map(function (item, i) {
         return /*#__PURE__*/jsx(SwiperSlide, {
           children: /*#__PURE__*/jsx(ContentItem, {
-            item: item
+            item: _objectSpread$1(_objectSpread$1({}, item), {}, {
+              inGallery: true
+            })
           })
         }, i);
       })
@@ -207,9 +302,9 @@ var Gallery = function Gallery(_ref) {
       children: content.map(function (item, i) {
         return /*#__PURE__*/jsx(SwiperSlide, {
           children: /*#__PURE__*/jsx(ContentItem, {
-            item: _objectSpread$1(_objectSpread$1({}, item), item.type == 'Video' ? {
+            item: _objectSpread$1(_objectSpread$1({}, item), {}, {
               thumb: true
-            } : {})
+            })
           })
         }, i);
       })
@@ -247,11 +342,11 @@ var ContentItem = function ContentItem(_ref) {
   var item = _ref.item;
   switch (item.type) {
     case 'Gallery':
-      return /*#__PURE__*/jsx(Gallery, {
+      return /*#__PURE__*/jsx(_Gallery, {
         item: item
       });
     case 'Image':
-      return /*#__PURE__*/jsx(Image, {
+      return /*#__PURE__*/jsx(_Image, {
         item: item
       });
     case 'RichText':

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

@@ -4,6 +4,8 @@ import { GalleryType } from '../../types';
 type Props = {
     item: GalleryType;
 };
-declare const Gallery: ({ item: { content, wrappingStyle } }: Props) => React.JSX.Element;
+declare const Gallery: ({ item: { content, wrappingStyle, disableFullscreen }, inFullscreen }: Props & {
+    inFullscreen?: boolean;
+}) => React.JSX.Element;
 export default Gallery;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Gallery/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM1C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAEnC,QAAA,MAAM,OAAO,yCAA0C,KAAK,sBA6C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Gallery/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO1C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAEnC,QAAA,MAAM,OAAO,0EAA2E,KAAK,GAAG;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,sBA6DzH,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -3,6 +3,8 @@ import { ImageType } from '../../types';
 type Props = {
     item: ImageType;
 };
-declare const Image: ({ item: { image, cover, style, altText } }: Props) => React.JSX.Element;
+declare const Image: ({ item: { image, cover, style, altText, thumb, inGallery, disableFullscreen }, inFullscreen }: Props & {
+    inFullscreen?: boolean;
+}) => React.JSX.Element;
 export default Image;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Image/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,+CAAgD,KAAK,sBAe/D,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEjC,QAAA,MAAM,KAAK,kGAAmG,KAAK,GAAG;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,sBAoD/I,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"basicItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/basicItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAWhC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC"}
+{"version":3,"file":"basicItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/basicItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAWhC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC"}

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

@@ -19,6 +19,7 @@ export interface GalleryType {
     type: 'Gallery';
     content: (ImageType | VideoType)[];
     wrappingStyle?: React.CSSProperties;
+    disableFullscreen?: boolean;
 }
 export interface ImageType {
     type: 'Image';
@@ -26,6 +27,9 @@ export interface ImageType {
     altText?: string;
     cover?: boolean;
     style?: React.CSSProperties;
+    thumb?: boolean;
+    inGallery?: boolean;
+    disableFullscreen?: boolean;
 }
 export interface VideoType {
     type: 'Video';

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,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;CACrC;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;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,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;CAC7B;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/content-item",
-  "version": "25.3.0-beta.3",
+  "version": "25.3.0-beta.31",
   "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": "c13a0b4d8bf7b91ab5671b05c465d19a46bee4e4"
+  "gitHead": "4e02d7922c3894835caaf0619ae30776098aeb6b"
 }