@blaze-cms/react-page-builder 0.141.0-core-styles.16 → 0.141.0-core-styles.20

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.141.0-core-styles.20](https://github.com/thebyte9/blaze/compare/v0.141.0-core-styles.19...v0.141.0-core-styles.20) (2024-05-01)
+
+
+### Features
+
+* added thumbnail carousel variant ([#4343](https://github.com/thebyte9/blaze/issues/4343)) ([69beb66](https://github.com/thebyte9/blaze/commit/69beb66445c35f3ff67d5002aa96fe60aa8cae50))
+
+
+
+
+
 # [0.141.0-core-styles.16](https://github.com/thebyte9/blaze/compare/v0.141.0-core-styles.15...v0.141.0-core-styles.16) (2024-04-25)
 
 

package/lib/variants/ThumbnailCarousel/ThumbnailCarousel.js

@@ -0,0 +1,65 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.map.js");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _useThumbnailCarousel2 = _interopRequireDefault(require("./useThumbnailCarousel"));
+var _ThumbnailImage = _interopRequireDefault(require("./ThumbnailImage"));
+var ThumbnailCarousel = function ThumbnailCarousel(props) {
+  var _useThumbnailCarousel = (0, _useThumbnailCarousel2["default"])(props),
+    thumbnailsListRef = _useThumbnailCarousel.thumbnailsListRef,
+    imageIds = _useThumbnailCarousel.imageIds,
+    selectedImageId = _useThumbnailCarousel.selectedImageId,
+    priorityLimit = _useThumbnailCarousel.priorityLimit,
+    mainImageButtonClick = _useThumbnailCarousel.mainImageButtonClick,
+    thumbnailImageClick = _useThumbnailCarousel.thumbnailImageClick;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumbnail-carousel",
+    "data-testid": "thumbnail-carousel"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumbnail-carousel__main_image_container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "previous-button",
+    className: "thumbnail-carousel__main_image_container__button",
+    role: "button",
+    onClick: function onClick() {
+      return mainImageButtonClick();
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "arrow arrow--left"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumbnail-carousel__main_image_container__main-image",
+    "data-testid": "thumbnail-main-image",
+    ref: thumbnailsListRef
+  }, /*#__PURE__*/_react["default"].createElement(_ThumbnailImage["default"], (0, _extends2["default"])({}, props, {
+    priority: true,
+    imageId: selectedImageId
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "next-button",
+    className: "thumbnail-carousel__main_image_container__button next",
+    role: "button",
+    onClick: function onClick() {
+      return mainImageButtonClick(true);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "arrow arrow--right"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "thumbnail-carousel__list"
+  }, imageIds.map(function (imageId, index) {
+    return /*#__PURE__*/_react["default"].createElement(_ThumbnailImage["default"], (0, _extends2["default"])({}, props, {
+      key: imageId,
+      priority: index < priorityLimit,
+      imageId: imageId,
+      selectedImageId: selectedImageId,
+      handleOnClick: thumbnailImageClick
+    }));
+  })));
+};
+var _default = exports["default"] = ThumbnailCarousel;
+//# sourceMappingURL=ThumbnailCarousel.js.map

package/lib/variants/ThumbnailCarousel/ThumbnailCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailCarousel.js","names":["_react","_interopRequireDefault","require","_useThumbnailCarousel2","_ThumbnailImage","ThumbnailCarousel","props","_useThumbnailCarousel","useThumbnailCarousel","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","mainImageButtonClick","thumbnailImageClick","createElement","className","id","role","onClick","ref","_extends2","priority","imageId","map","index","key","handleOnClick","_default","exports"],"sources":["../../../src/variants/ThumbnailCarousel/ThumbnailCarousel.js"],"sourcesContent":["import React from 'react';\nimport useThumbnailCarousel from './useThumbnailCarousel';\nimport ThumbnailImage from './ThumbnailImage';\n\nconst ThumbnailCarousel = props => {\n  const {\n    thumbnailsListRef,\n    imageIds,\n    selectedImageId,\n    priorityLimit,\n    mainImageButtonClick,\n    thumbnailImageClick\n  } = useThumbnailCarousel(props);\n\n  return (\n    <div className=\"thumbnail-carousel\" data-testid=\"thumbnail-carousel\">\n      <div className=\"thumbnail-carousel__main_image_container\">\n        <div\n          id=\"previous-button\"\n          className=\"thumbnail-carousel__main_image_container__button\"\n          role=\"button\"\n          onClick={() => mainImageButtonClick()}>\n          <div className=\"arrow arrow--left\" />\n        </div>\n        <div\n          className=\"thumbnail-carousel__main_image_container__main-image\"\n          data-testid=\"thumbnail-main-image\"\n          ref={thumbnailsListRef}>\n          <ThumbnailImage {...props} priority imageId={selectedImageId} />\n        </div>\n        <div\n          id=\"next-button\"\n          className=\"thumbnail-carousel__main_image_container__button next\"\n          role=\"button\"\n          onClick={() => mainImageButtonClick(true)}>\n          <div className=\"arrow arrow--right\" />\n        </div>\n      </div>\n      <div className=\"thumbnail-carousel__list\">\n        {imageIds.map((imageId, index) => (\n          <ThumbnailImage\n            {...props}\n            key={imageId}\n            priority={index < priorityLimit}\n            imageId={imageId}\n            selectedImageId={selectedImageId}\n            handleOnClick={thumbnailImageClick}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAGC,KAAK,EAAI;EACjC,IAAAC,qBAAA,GAOI,IAAAC,iCAAoB,EAACF,KAAK,CAAC;IAN7BG,iBAAiB,GAAAF,qBAAA,CAAjBE,iBAAiB;IACjBC,QAAQ,GAAAH,qBAAA,CAARG,QAAQ;IACRC,eAAe,GAAAJ,qBAAA,CAAfI,eAAe;IACfC,aAAa,GAAAL,qBAAA,CAAbK,aAAa;IACbC,oBAAoB,GAAAN,qBAAA,CAApBM,oBAAoB;IACpBC,mBAAmB,GAAAP,qBAAA,CAAnBO,mBAAmB;EAGrB,oBACEd,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC,oBAAoB;IAAC,eAAY;EAAoB,gBAClEhB,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAA0C,gBACvDhB,MAAA,YAAAe,aAAA;IACEE,EAAE,EAAC,iBAAiB;IACpBD,SAAS,EAAC,kDAAkD;IAC5DE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMN,oBAAoB,CAAC,CAAC;IAAA;EAAC,gBACtCb,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAAmB,CAAE,CACjC,CAAC,eACNhB,MAAA,YAAAe,aAAA;IACEC,SAAS,EAAC,sDAAsD;IAChE,eAAY,sBAAsB;IAClCI,GAAG,EAAEX;EAAkB,gBACvBT,MAAA,YAAAe,aAAA,CAACX,eAAA,WAAc,MAAAiB,SAAA,iBAAKf,KAAK;IAAEgB,QAAQ;IAACC,OAAO,EAAEZ;EAAgB,EAAE,CAC5D,CAAC,eACNX,MAAA,YAAAe,aAAA;IACEE,EAAE,EAAC,aAAa;IAChBD,SAAS,EAAC,uDAAuD;IACjEE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMN,oBAAoB,CAAC,IAAI,CAAC;IAAA;EAAC,gBAC1Cb,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAAoB,CAAE,CAClC,CACF,CAAC,eACNhB,MAAA,YAAAe,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCN,QAAQ,CAACc,GAAG,CAAC,UAACD,OAAO,EAAEE,KAAK;IAAA,oBAC3BzB,MAAA,YAAAe,aAAA,CAACX,eAAA,WAAc,MAAAiB,SAAA,iBACTf,KAAK;MACToB,GAAG,EAAEH,OAAQ;MACbD,QAAQ,EAAEG,KAAK,GAAGb,aAAc;MAChCW,OAAO,EAAEA,OAAQ;MACjBZ,eAAe,EAAEA,eAAgB;MACjCgB,aAAa,EAAEb;IAAoB,EACpC,CAAC;EAAA,CACH,CACE,CACF,CAAC;AAEV,CAAC;AAAC,IAAAc,QAAA,GAAAC,OAAA,cAEaxB,iBAAiB"}

package/lib/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LazyImage = _interopRequireDefault(require("../../../components/LazyImage"));
+var _useThumbnailImage2 = _interopRequireDefault(require("./useThumbnailImage"));
+var ThumbnailImage = function ThumbnailImage(props) {
+  var _useThumbnailImage = (0, _useThumbnailImage2["default"])(props),
+    loading = _useThumbnailImage.loading,
+    error = _useThumbnailImage.error,
+    className = _useThumbnailImage.className,
+    imageRef = _useThumbnailImage.imageRef,
+    imageUrl = _useThumbnailImage.imageUrl,
+    altText = _useThumbnailImage.altText,
+    priority = _useThumbnailImage.priority,
+    handleClick = _useThumbnailImage.handleClick,
+    handleEnableLightbox = _useThumbnailImage.handleEnableLightbox;
+  if (error) return error.message;
+  if (loading) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: imageRef,
+    className: className,
+    onClick: handleClick,
+    role: "button",
+    "data-testid": "thumbnail-image"
+  }, /*#__PURE__*/_react["default"].createElement(_LazyImage["default"], {
+    src: imageUrl,
+    alt: altText,
+    sizeKey: "carousel",
+    onClick: handleEnableLightbox,
+    role: "button",
+    priority: priority
+  }));
+};
+var _default = exports["default"] = ThumbnailImage;
+//# sourceMappingURL=ThumbnailImage.js.map

package/lib/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailImage.js","names":["_react","_interopRequireDefault","require","_LazyImage","_useThumbnailImage2","ThumbnailImage","props","_useThumbnailImage","useThumbnailImage","loading","error","className","imageRef","imageUrl","altText","priority","handleClick","handleEnableLightbox","message","createElement","ref","onClick","role","src","alt","sizeKey","_default","exports"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js"],"sourcesContent":["import React from 'react';\nimport LazyImage from '../../../components/LazyImage';\nimport useThumbnailImage from './useThumbnailImage';\n\nconst ThumbnailImage = props => {\n  const {\n    loading,\n    error,\n    className,\n    imageRef,\n    imageUrl,\n    altText,\n    priority,\n    handleClick,\n    handleEnableLightbox\n  } = useThumbnailImage(props);\n\n  if (error) return error.message;\n  if (loading) return null;\n\n  return (\n    <div\n      ref={imageRef}\n      className={className}\n      onClick={handleClick}\n      role=\"button\"\n      data-testid=\"thumbnail-image\">\n      <LazyImage\n        src={imageUrl}\n        alt={altText}\n        sizeKey=\"carousel\"\n        onClick={handleEnableLightbox}\n        role=\"button\"\n        priority={priority}\n      />\n    </div>\n  );\n};\n\nexport default ThumbnailImage;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,cAAc,GAAG,SAAjBA,cAAcA,CAAGC,KAAK,EAAI;EAC9B,IAAAC,kBAAA,GAUI,IAAAC,8BAAiB,EAACF,KAAK,CAAC;IAT1BG,OAAO,GAAAF,kBAAA,CAAPE,OAAO;IACPC,KAAK,GAAAH,kBAAA,CAALG,KAAK;IACLC,SAAS,GAAAJ,kBAAA,CAATI,SAAS;IACTC,QAAQ,GAAAL,kBAAA,CAARK,QAAQ;IACRC,QAAQ,GAAAN,kBAAA,CAARM,QAAQ;IACRC,OAAO,GAAAP,kBAAA,CAAPO,OAAO;IACPC,QAAQ,GAAAR,kBAAA,CAARQ,QAAQ;IACRC,WAAW,GAAAT,kBAAA,CAAXS,WAAW;IACXC,oBAAoB,GAAAV,kBAAA,CAApBU,oBAAoB;EAGtB,IAAIP,KAAK,EAAE,OAAOA,KAAK,CAACQ,OAAO;EAC/B,IAAIT,OAAO,EAAE,OAAO,IAAI;EAExB,oBACET,MAAA,YAAAmB,aAAA;IACEC,GAAG,EAAER,QAAS;IACdD,SAAS,EAAEA,SAAU;IACrBU,OAAO,EAAEL,WAAY;IACrBM,IAAI,EAAC,QAAQ;IACb,eAAY;EAAiB,gBAC7BtB,MAAA,YAAAmB,aAAA,CAAChB,UAAA,WAAS;IACRoB,GAAG,EAAEV,QAAS;IACdW,GAAG,EAAEV,OAAQ;IACbW,OAAO,EAAC,UAAU;IAClBJ,OAAO,EAAEJ,oBAAqB;IAC9BK,IAAI,EAAC,QAAQ;IACbP,QAAQ,EAAEA;EAAS,CACpB,CACE,CAAC;AAEV,CAAC;AAAC,IAAAW,QAAA,GAAAC,OAAA,cAEatB,cAAc"}

package/lib/variants/ThumbnailCarousel/ThumbnailImage/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ThumbnailImage = _interopRequireDefault(require("./ThumbnailImage"));
+var _default = exports["default"] = _ThumbnailImage["default"];
+//# sourceMappingURL=index.js.map

package/lib/variants/ThumbnailCarousel/ThumbnailImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_ThumbnailImage","_interopRequireDefault","require","_default","exports","ThumbnailImage"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/index.js"],"sourcesContent":["import ThumbnailImage from './ThumbnailImage';\n\nexport default ThumbnailImage;\n"],"mappings":";;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8C,IAAAC,QAAA,GAAAC,OAAA,cAE/BC,0BAAc"}

package/lib/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../../hooks");
+var _utils = require("../../../utils");
+var useThumbnailImage = function useThumbnailImage(_ref) {
+  var imageId = _ref.imageId,
+    enableLightbox = _ref.enableLightbox,
+    toggleModal = _ref.toggleModal,
+    handleSelectedImage = _ref.handleSelectedImage,
+    priority = _ref.priority,
+    selectedImageId = _ref.selectedImageId,
+    handleOnClick = _ref.handleOnClick;
+  var imageRef = (0, _react.useRef)(null);
+  var isSelected = selectedImageId === imageId;
+  var _useGetImages = (0, _hooks.useGetImages)(imageId),
+    _useGetImages$data = _useGetImages.data,
+    data = _useGetImages$data === void 0 ? {} : _useGetImages$data,
+    loading = _useGetImages.loading,
+    error = _useGetImages.error;
+  (0, _react.useEffect)(function () {
+    if (imageRef.current && isSelected) {
+      imageRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  }, [isSelected]);
+  var handleEnableLightbox = function handleEnableLightbox() {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(imageId);
+  };
+  var handleClick = function handleClick() {
+    handleOnClick(imageId);
+  };
+  var _ref2 = data.getFile || {
+      getFile: {
+        url: '',
+        data: {}
+      }
+    },
+    _ref2$url = _ref2.url,
+    imageUrl = _ref2$url === void 0 ? '' : _ref2$url,
+    _ref2$data = _ref2.data,
+    imageData = _ref2$data === void 0 ? {} : _ref2$data;
+  var _getImageData = (0, _utils.getImageData)({}, imageData),
+    altText = _getImageData.altText;
+  var className = selectedImageId === imageId ? 'thumbnail-carousel-image thumbnail-carousel-image--selected' : 'thumbnail-carousel-image';
+  return {
+    loading: loading,
+    error: error,
+    className: className,
+    imageRef: imageRef,
+    imageUrl: imageUrl,
+    altText: altText,
+    priority: priority,
+    handleClick: handleClick,
+    handleEnableLightbox: handleEnableLightbox
+  };
+};
+useThumbnailImage.propTypes = {
+  imageId: _propTypes["default"].string.isRequired,
+  selectedImageId: _propTypes["default"].string.isRequired,
+  enableLightbox: _propTypes["default"].bool.isRequired,
+  toggleModal: _propTypes["default"].func.isRequired,
+  handleSelectedImage: _propTypes["default"].func.isRequired,
+  priority: _propTypes["default"].bool.isRequired,
+  handleOnClick: _propTypes["default"].func
+};
+useThumbnailImage.defaultProps = {
+  handleOnClick: function handleOnClick() {}
+};
+var _default = exports["default"] = useThumbnailImage;
+//# sourceMappingURL=useThumbnailImage.js.map

package/lib/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThumbnailImage.js","names":["_react","require","_propTypes","_interopRequireDefault","_hooks","_utils","useThumbnailImage","_ref","imageId","enableLightbox","toggleModal","handleSelectedImage","priority","selectedImageId","handleOnClick","imageRef","useRef","isSelected","_useGetImages","useGetImages","_useGetImages$data","data","loading","error","useEffect","current","scrollIntoView","behavior","block","handleEnableLightbox","handleClick","_ref2","getFile","url","_ref2$url","imageUrl","_ref2$data","imageData","_getImageData","getImageData","altText","className","propTypes","PropTypes","string","isRequired","bool","func","defaultProps","_default","exports"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useGetImages } from '../../../hooks';\nimport { getImageData } from '../../../utils';\n\nconst useThumbnailImage = ({\n  imageId,\n  enableLightbox,\n  toggleModal,\n  handleSelectedImage,\n  priority,\n  selectedImageId,\n  handleOnClick\n}) => {\n  const imageRef = useRef(null);\n  const isSelected = selectedImageId === imageId;\n  const { data = {}, loading, error } = useGetImages(imageId);\n\n  useEffect(\n    () => {\n      if (imageRef.current && isSelected) {\n        imageRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    },\n    [isSelected]\n  );\n\n  const handleEnableLightbox = () => {\n    if (!enableLightbox) return;\n    toggleModal();\n    handleSelectedImage(imageId);\n  };\n\n  const handleClick = () => {\n    handleOnClick(imageId);\n  };\n\n  const { url: imageUrl = '', data: imageData = {} } = data.getFile || {\n    getFile: { url: '', data: {} }\n  };\n  const { altText } = getImageData({}, imageData);\n\n  const className =\n    selectedImageId === imageId\n      ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'\n      : 'thumbnail-carousel-image';\n\n  return {\n    loading,\n    error,\n    className,\n    imageRef,\n    imageUrl,\n    altText,\n    priority,\n    handleClick,\n    handleEnableLightbox\n  };\n};\n\nuseThumbnailImage.propTypes = {\n  imageId: PropTypes.string.isRequired,\n  selectedImageId: PropTypes.string.isRequired,\n  enableLightbox: PropTypes.bool.isRequired,\n  toggleModal: PropTypes.func.isRequired,\n  handleSelectedImage: PropTypes.func.isRequired,\n  priority: PropTypes.bool.isRequired,\n  handleOnClick: PropTypes.func\n};\n\nuseThumbnailImage.defaultProps = {\n  handleOnClick: () => {}\n};\n\nexport default useThumbnailImage;\n"],"mappings":"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"}

package/lib/variants/ThumbnailCarousel/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ThumbnailCarousel = _interopRequireDefault(require("./ThumbnailCarousel"));
+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) { (0, _defineProperty2["default"])(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 ThumbnailCarousel = {
+  getSettings: function getSettings(componentSettings) {
+    return _objectSpread({}, componentSettings);
+  },
+  VariantComponent: _ThumbnailCarousel["default"]
+};
+var _default = exports["default"] = ThumbnailCarousel;
+//# sourceMappingURL=index.js.map

package/lib/variants/ThumbnailCarousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_ThumbnailCarousel","_interopRequireDefault","require","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","ThumbnailCarousel","getSettings","componentSettings","VariantComponent","ThumbnailCarouselComponent","_default","exports"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import ThumbnailCarouselComponent from './ThumbnailCarousel';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: ThumbnailCarouselComponent\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6D,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,aAAAhB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAAlB,CAAA,EAAAG,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAnB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAE7D,IAAMoB,iBAAiB,GAAG;EACxBC,WAAW,EAAE,SAAAA,YAAAC,iBAAiB;IAAA,OAAAV,aAAA,KACzBU,iBAAiB;EAAA,CACpB;EACFC,gBAAgB,EAAEC;AACpB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEaN,iBAAiB"}

package/lib/variants/ThumbnailCarousel/useThumbnailCarousel.js

@@ -0,0 +1,62 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.index-of.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _excluded = ["imageIds", "priorityLimit"];
+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) { (0, _defineProperty2["default"])(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 useThumbnailCarousel = function useThumbnailCarousel(_ref) {
+  var imageIds = _ref.imageIds,
+    priorityLimit = _ref.priorityLimit,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedImageIndex = _useState2[0],
+    setSelectedImageIndex = _useState2[1];
+  var thumbnailsListRef = (0, _react.useRef)(null);
+  var selectedImageId = imageIds[selectedImageIndex];
+  var mainImageButtonClick = function mainImageButtonClick(next) {
+    if (next) {
+      var isLast = imageIds.length - 1 === selectedImageIndex;
+      var newIndex = isLast ? 0 : selectedImageIndex + 1;
+      setSelectedImageIndex(newIndex);
+    } else {
+      var isFirst = selectedImageIndex === 0;
+      var _newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
+      setSelectedImageIndex(_newIndex);
+    }
+  };
+  var thumbnailImageClick = function thumbnailImageClick(id) {
+    var newIndex = imageIds.indexOf(id);
+    if (newIndex !== -1) setSelectedImageIndex(newIndex);
+  };
+  return _objectSpread(_objectSpread({}, props), {}, {
+    imageIds: imageIds,
+    selectedImageId: selectedImageId,
+    selectedImageIndex: selectedImageIndex,
+    thumbnailsListRef: thumbnailsListRef,
+    priorityLimit: priorityLimit,
+    thumbnailImageClick: thumbnailImageClick,
+    mainImageButtonClick: mainImageButtonClick
+  });
+};
+var _default = exports["default"] = useThumbnailCarousel;
+//# sourceMappingURL=useThumbnailCarousel.js.map

package/lib/variants/ThumbnailCarousel/useThumbnailCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThumbnailCarousel.js","names":["_react","require","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties2","_useState","useState","_useState2","_slicedToArray2","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","useRef","selectedImageId","mainImageButtonClick","next","isLast","newIndex","isFirst","thumbnailImageClick","id","indexOf","_default","exports"],"sources":["../../../src/variants/ThumbnailCarousel/useThumbnailCarousel.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nconst useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n  const thumbnailsListRef = useRef(null);\n  const selectedImageId = imageIds[selectedImageIndex];\n\n  const mainImageButtonClick = next => {\n    if (next) {\n      const isLast = imageIds.length - 1 === selectedImageIndex;\n      const newIndex = isLast ? 0 : selectedImageIndex + 1;\n      setSelectedImageIndex(newIndex);\n    } else {\n      const isFirst = selectedImageIndex === 0;\n      const newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;\n      setSelectedImageIndex(newIndex);\n    }\n  };\n\n  const thumbnailImageClick = id => {\n    const newIndex = imageIds.indexOf(id);\n    if (newIndex !== -1) setSelectedImageIndex(newIndex);\n  };\n\n  return {\n    ...props,\n    imageIds,\n    selectedImageId,\n    selectedImageIndex,\n    thumbnailsListRef,\n    priorityLimit,\n    thumbnailImageClick,\n    mainImageButtonClick\n  };\n};\n\nexport default useThumbnailCarousel;\n"],"mappings":"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"}

package/lib/variants/index.js

@@ -1,9 +1,13 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _default = exports["default"] = {};
+var _ThumbnailCarousel = _interopRequireDefault(require("./ThumbnailCarousel"));
+var _default = exports["default"] = {
+  thumbnailCarousel: _ThumbnailCarousel["default"]
+};
 //# sourceMappingURL=index.js.map

package/lib/variants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/variants/index.js"],"sourcesContent":["export default {};\n"],"mappings":";;;;;;;oCAAe,CAAC,CAAC"}
+{"version":3,"file":"index.js","names":["_ThumbnailCarousel","_interopRequireDefault","require","_default","exports","thumbnailCarousel"],"sources":["../../src/variants/index.js"],"sourcesContent":["import thumbnailCarousel from './ThumbnailCarousel';\n\nexport default {\n  thumbnailCarousel\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAoD,IAAAC,QAAA,GAAAC,OAAA,cAErC;EACbC,iBAAiB,EAAjBA;AACF,CAAC"}

package/lib-es/variants/ThumbnailCarousel/ThumbnailCarousel.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import useThumbnailCarousel from './useThumbnailCarousel';
+import ThumbnailImage from './ThumbnailImage';
+const ThumbnailCarousel = props => {
+  const {
+    thumbnailsListRef,
+    imageIds,
+    selectedImageId,
+    priorityLimit,
+    mainImageButtonClick,
+    thumbnailImageClick
+  } = useThumbnailCarousel(props);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "thumbnail-carousel",
+    "data-testid": "thumbnail-carousel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "thumbnail-carousel__main_image_container"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "previous-button",
+    className: "thumbnail-carousel__main_image_container__button",
+    role: "button",
+    onClick: () => mainImageButtonClick()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arrow arrow--left"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "thumbnail-carousel__main_image_container__main-image",
+    "data-testid": "thumbnail-main-image",
+    ref: thumbnailsListRef
+  }, /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
+    priority: true,
+    imageId: selectedImageId
+  }))), /*#__PURE__*/React.createElement("div", {
+    id: "next-button",
+    className: "thumbnail-carousel__main_image_container__button next",
+    role: "button",
+    onClick: () => mainImageButtonClick(true)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arrow arrow--right"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "thumbnail-carousel__list"
+  }, imageIds.map((imageId, index) => /*#__PURE__*/React.createElement(ThumbnailImage, _extends({}, props, {
+    key: imageId,
+    priority: index < priorityLimit,
+    imageId: imageId,
+    selectedImageId: selectedImageId,
+    handleOnClick: thumbnailImageClick
+  })))));
+};
+export default ThumbnailCarousel;
+//# sourceMappingURL=ThumbnailCarousel.js.map

package/lib-es/variants/ThumbnailCarousel/ThumbnailCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailCarousel.js","names":["React","useThumbnailCarousel","ThumbnailImage","ThumbnailCarousel","props","thumbnailsListRef","imageIds","selectedImageId","priorityLimit","mainImageButtonClick","thumbnailImageClick","createElement","className","id","role","onClick","ref","_extends","priority","imageId","map","index","key","handleOnClick"],"sources":["../../../src/variants/ThumbnailCarousel/ThumbnailCarousel.js"],"sourcesContent":["import React from 'react';\nimport useThumbnailCarousel from './useThumbnailCarousel';\nimport ThumbnailImage from './ThumbnailImage';\n\nconst ThumbnailCarousel = props => {\n  const {\n    thumbnailsListRef,\n    imageIds,\n    selectedImageId,\n    priorityLimit,\n    mainImageButtonClick,\n    thumbnailImageClick\n  } = useThumbnailCarousel(props);\n\n  return (\n    <div className=\"thumbnail-carousel\" data-testid=\"thumbnail-carousel\">\n      <div className=\"thumbnail-carousel__main_image_container\">\n        <div\n          id=\"previous-button\"\n          className=\"thumbnail-carousel__main_image_container__button\"\n          role=\"button\"\n          onClick={() => mainImageButtonClick()}>\n          <div className=\"arrow arrow--left\" />\n        </div>\n        <div\n          className=\"thumbnail-carousel__main_image_container__main-image\"\n          data-testid=\"thumbnail-main-image\"\n          ref={thumbnailsListRef}>\n          <ThumbnailImage {...props} priority imageId={selectedImageId} />\n        </div>\n        <div\n          id=\"next-button\"\n          className=\"thumbnail-carousel__main_image_container__button next\"\n          role=\"button\"\n          onClick={() => mainImageButtonClick(true)}>\n          <div className=\"arrow arrow--right\" />\n        </div>\n      </div>\n      <div className=\"thumbnail-carousel__list\">\n        {imageIds.map((imageId, index) => (\n          <ThumbnailImage\n            {...props}\n            key={imageId}\n            priority={index < priorityLimit}\n            imageId={imageId}\n            selectedImageId={selectedImageId}\n            handleOnClick={thumbnailImageClick}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;EACjC,MAAM;IACJC,iBAAiB;IACjBC,QAAQ;IACRC,eAAe;IACfC,aAAa;IACbC,oBAAoB;IACpBC;EACF,CAAC,GAAGT,oBAAoB,CAACG,KAAK,CAAC;EAE/B,oBACEJ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC,oBAAoB;IAAC,eAAY;EAAoB,gBAClEZ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAA0C,gBACvDZ,KAAA,CAAAW,aAAA;IACEE,EAAE,EAAC,iBAAiB;IACpBD,SAAS,EAAC,kDAAkD;IAC5DE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAMN,oBAAoB,CAAC;EAAE,gBACtCT,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAmB,CAAE,CACjC,CAAC,eACNZ,KAAA,CAAAW,aAAA;IACEC,SAAS,EAAC,sDAAsD;IAChE,eAAY,sBAAsB;IAClCI,GAAG,EAAEX;EAAkB,gBACvBL,KAAA,CAAAW,aAAA,CAACT,cAAc,EAAAe,QAAA,KAAKb,KAAK;IAAEc,QAAQ;IAACC,OAAO,EAAEZ;EAAgB,EAAE,CAC5D,CAAC,eACNP,KAAA,CAAAW,aAAA;IACEE,EAAE,EAAC,aAAa;IAChBD,SAAS,EAAC,uDAAuD;IACjEE,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAMN,oBAAoB,CAAC,IAAI;EAAE,gBAC1CT,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAAoB,CAAE,CAClC,CACF,CAAC,eACNZ,KAAA,CAAAW,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCN,QAAQ,CAACc,GAAG,CAAC,CAACD,OAAO,EAAEE,KAAK,kBAC3BrB,KAAA,CAAAW,aAAA,CAACT,cAAc,EAAAe,QAAA,KACTb,KAAK;IACTkB,GAAG,EAAEH,OAAQ;IACbD,QAAQ,EAAEG,KAAK,GAAGb,aAAc;IAChCW,OAAO,EAAEA,OAAQ;IACjBZ,eAAe,EAAEA,eAAgB;IACjCgB,aAAa,EAAEb;EAAoB,EACpC,CACF,CACE,CACF,CAAC;AAEV,CAAC;AAED,eAAeP,iBAAiB"}

package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import LazyImage from '../../../components/LazyImage';
+import useThumbnailImage from './useThumbnailImage';
+const ThumbnailImage = props => {
+  const {
+    loading,
+    error,
+    className,
+    imageRef,
+    imageUrl,
+    altText,
+    priority,
+    handleClick,
+    handleEnableLightbox
+  } = useThumbnailImage(props);
+  if (error) return error.message;
+  if (loading) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: imageRef,
+    className: className,
+    onClick: handleClick,
+    role: "button",
+    "data-testid": "thumbnail-image"
+  }, /*#__PURE__*/React.createElement(LazyImage, {
+    src: imageUrl,
+    alt: altText,
+    sizeKey: "carousel",
+    onClick: handleEnableLightbox,
+    role: "button",
+    priority: priority
+  }));
+};
+export default ThumbnailImage;
+//# sourceMappingURL=ThumbnailImage.js.map

package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailImage.js","names":["React","LazyImage","useThumbnailImage","ThumbnailImage","props","loading","error","className","imageRef","imageUrl","altText","priority","handleClick","handleEnableLightbox","message","createElement","ref","onClick","role","src","alt","sizeKey"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js"],"sourcesContent":["import React from 'react';\nimport LazyImage from '../../../components/LazyImage';\nimport useThumbnailImage from './useThumbnailImage';\n\nconst ThumbnailImage = props => {\n  const {\n    loading,\n    error,\n    className,\n    imageRef,\n    imageUrl,\n    altText,\n    priority,\n    handleClick,\n    handleEnableLightbox\n  } = useThumbnailImage(props);\n\n  if (error) return error.message;\n  if (loading) return null;\n\n  return (\n    <div\n      ref={imageRef}\n      className={className}\n      onClick={handleClick}\n      role=\"button\"\n      data-testid=\"thumbnail-image\">\n      <LazyImage\n        src={imageUrl}\n        alt={altText}\n        sizeKey=\"carousel\"\n        onClick={handleEnableLightbox}\n        role=\"button\"\n        priority={priority}\n      />\n    </div>\n  );\n};\n\nexport default ThumbnailImage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,+BAA+B;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,MAAMC,cAAc,GAAGC,KAAK,IAAI;EAC9B,MAAM;IACJC,OAAO;IACPC,KAAK;IACLC,SAAS;IACTC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC,WAAW;IACXC;EACF,CAAC,GAAGX,iBAAiB,CAACE,KAAK,CAAC;EAE5B,IAAIE,KAAK,EAAE,OAAOA,KAAK,CAACQ,OAAO;EAC/B,IAAIT,OAAO,EAAE,OAAO,IAAI;EAExB,oBACEL,KAAA,CAAAe,aAAA;IACEC,GAAG,EAAER,QAAS;IACdD,SAAS,EAAEA,SAAU;IACrBU,OAAO,EAAEL,WAAY;IACrBM,IAAI,EAAC,QAAQ;IACb,eAAY;EAAiB,gBAC7BlB,KAAA,CAAAe,aAAA,CAACd,SAAS;IACRkB,GAAG,EAAEV,QAAS;IACdW,GAAG,EAAEV,OAAQ;IACbW,OAAO,EAAC,UAAU;IAClBJ,OAAO,EAAEJ,oBAAqB;IAC9BK,IAAI,EAAC,QAAQ;IACbP,QAAQ,EAAEA;EAAS,CACpB,CACE,CAAC;AAEV,CAAC;AAED,eAAeR,cAAc"}

package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/index.js

@@ -0,0 +1,3 @@
+import ThumbnailImage from './ThumbnailImage';
+export default ThumbnailImage;
+//# sourceMappingURL=index.js.map

package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ThumbnailImage"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/index.js"],"sourcesContent":["import ThumbnailImage from './ThumbnailImage';\n\nexport default ThumbnailImage;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAE7C,eAAeA,cAAc"}

package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useGetImages } from '../../../hooks';
+import { getImageData } from '../../../utils';
+const useThumbnailImage = ({
+  imageId,
+  enableLightbox,
+  toggleModal,
+  handleSelectedImage,
+  priority,
+  selectedImageId,
+  handleOnClick
+}) => {
+  const imageRef = useRef(null);
+  const isSelected = selectedImageId === imageId;
+  const {
+    data = {},
+    loading,
+    error
+  } = useGetImages(imageId);
+  useEffect(() => {
+    if (imageRef.current && isSelected) {
+      imageRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  }, [isSelected]);
+  const handleEnableLightbox = () => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(imageId);
+  };
+  const handleClick = () => {
+    handleOnClick(imageId);
+  };
+  const {
+    url: imageUrl = '',
+    data: imageData = {}
+  } = data.getFile || {
+    getFile: {
+      url: '',
+      data: {}
+    }
+  };
+  const {
+    altText
+  } = getImageData({}, imageData);
+  const className = selectedImageId === imageId ? 'thumbnail-carousel-image thumbnail-carousel-image--selected' : 'thumbnail-carousel-image';
+  return {
+    loading,
+    error,
+    className,
+    imageRef,
+    imageUrl,
+    altText,
+    priority,
+    handleClick,
+    handleEnableLightbox
+  };
+};
+useThumbnailImage.propTypes = {
+  imageId: PropTypes.string.isRequired,
+  selectedImageId: PropTypes.string.isRequired,
+  enableLightbox: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  handleSelectedImage: PropTypes.func.isRequired,
+  priority: PropTypes.bool.isRequired,
+  handleOnClick: PropTypes.func
+};
+useThumbnailImage.defaultProps = {
+  handleOnClick: () => {}
+};
+export default useThumbnailImage;
+//# sourceMappingURL=useThumbnailImage.js.map

package/lib-es/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThumbnailImage.js","names":["useEffect","useRef","PropTypes","useGetImages","getImageData","useThumbnailImage","imageId","enableLightbox","toggleModal","handleSelectedImage","priority","selectedImageId","handleOnClick","imageRef","isSelected","data","loading","error","current","scrollIntoView","behavior","block","handleEnableLightbox","handleClick","url","imageUrl","imageData","getFile","altText","className","propTypes","string","isRequired","bool","func","defaultProps"],"sources":["../../../../src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useGetImages } from '../../../hooks';\nimport { getImageData } from '../../../utils';\n\nconst useThumbnailImage = ({\n  imageId,\n  enableLightbox,\n  toggleModal,\n  handleSelectedImage,\n  priority,\n  selectedImageId,\n  handleOnClick\n}) => {\n  const imageRef = useRef(null);\n  const isSelected = selectedImageId === imageId;\n  const { data = {}, loading, error } = useGetImages(imageId);\n\n  useEffect(\n    () => {\n      if (imageRef.current && isSelected) {\n        imageRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    },\n    [isSelected]\n  );\n\n  const handleEnableLightbox = () => {\n    if (!enableLightbox) return;\n    toggleModal();\n    handleSelectedImage(imageId);\n  };\n\n  const handleClick = () => {\n    handleOnClick(imageId);\n  };\n\n  const { url: imageUrl = '', data: imageData = {} } = data.getFile || {\n    getFile: { url: '', data: {} }\n  };\n  const { altText } = getImageData({}, imageData);\n\n  const className =\n    selectedImageId === imageId\n      ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'\n      : 'thumbnail-carousel-image';\n\n  return {\n    loading,\n    error,\n    className,\n    imageRef,\n    imageUrl,\n    altText,\n    priority,\n    handleClick,\n    handleEnableLightbox\n  };\n};\n\nuseThumbnailImage.propTypes = {\n  imageId: PropTypes.string.isRequired,\n  selectedImageId: PropTypes.string.isRequired,\n  enableLightbox: PropTypes.bool.isRequired,\n  toggleModal: PropTypes.func.isRequired,\n  handleSelectedImage: PropTypes.func.isRequired,\n  priority: PropTypes.bool.isRequired,\n  handleOnClick: PropTypes.func\n};\n\nuseThumbnailImage.defaultProps = {\n  handleOnClick: () => {}\n};\n\nexport default useThumbnailImage;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,OAAO;EACPC,cAAc;EACdC,WAAW;EACXC,mBAAmB;EACnBC,QAAQ;EACRC,eAAe;EACfC;AACF,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAGZ,MAAM,CAAC,IAAI,CAAC;EAC7B,MAAMa,UAAU,GAAGH,eAAe,KAAKL,OAAO;EAC9C,MAAM;IAAES,IAAI,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGd,YAAY,CAACG,OAAO,CAAC;EAE3DN,SAAS,CACP,MAAM;IACJ,IAAIa,QAAQ,CAACK,OAAO,IAAIJ,UAAU,EAAE;MAClCD,QAAQ,CAACK,OAAO,CAACC,cAAc,CAAC;QAAEC,QAAQ,EAAE,QAAQ;QAAEC,KAAK,EAAE;MAAQ,CAAC,CAAC;IACzE;EACF,CAAC,EACD,CAACP,UAAU,CACb,CAAC;EAED,MAAMQ,oBAAoB,GAAGA,CAAA,KAAM;IACjC,IAAI,CAACf,cAAc,EAAE;IACrBC,WAAW,CAAC,CAAC;IACbC,mBAAmB,CAACH,OAAO,CAAC;EAC9B,CAAC;EAED,MAAMiB,WAAW,GAAGA,CAAA,KAAM;IACxBX,aAAa,CAACN,OAAO,CAAC;EACxB,CAAC;EAED,MAAM;IAAEkB,GAAG,EAAEC,QAAQ,GAAG,EAAE;IAAEV,IAAI,EAAEW,SAAS,GAAG,CAAC;EAAE,CAAC,GAAGX,IAAI,CAACY,OAAO,IAAI;IACnEA,OAAO,EAAE;MAAEH,GAAG,EAAE,EAAE;MAAET,IAAI,EAAE,CAAC;IAAE;EAC/B,CAAC;EACD,MAAM;IAAEa;EAAQ,CAAC,GAAGxB,YAAY,CAAC,CAAC,CAAC,EAAEsB,SAAS,CAAC;EAE/C,MAAMG,SAAS,GACblB,eAAe,KAAKL,OAAO,GACvB,6DAA6D,GAC7D,0BAA0B;EAEhC,OAAO;IACLU,OAAO;IACPC,KAAK;IACLY,SAAS;IACThB,QAAQ;IACRY,QAAQ;IACRG,OAAO;IACPlB,QAAQ;IACRa,WAAW;IACXD;EACF,CAAC;AACH,CAAC;AAEDjB,iBAAiB,CAACyB,SAAS,GAAG;EAC5BxB,OAAO,EAAEJ,SAAS,CAAC6B,MAAM,CAACC,UAAU;EACpCrB,eAAe,EAAET,SAAS,CAAC6B,MAAM,CAACC,UAAU;EAC5CzB,cAAc,EAAEL,SAAS,CAAC+B,IAAI,CAACD,UAAU;EACzCxB,WAAW,EAAEN,SAAS,CAACgC,IAAI,CAACF,UAAU;EACtCvB,mBAAmB,EAAEP,SAAS,CAACgC,IAAI,CAACF,UAAU;EAC9CtB,QAAQ,EAAER,SAAS,CAAC+B,IAAI,CAACD,UAAU;EACnCpB,aAAa,EAAEV,SAAS,CAACgC;AAC3B,CAAC;AAED7B,iBAAiB,CAAC8B,YAAY,GAAG;EAC/BvB,aAAa,EAAEA,CAAA,KAAM,CAAC;AACxB,CAAC;AAED,eAAeP,iBAAiB"}

package/lib-es/variants/ThumbnailCarousel/index.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+import ThumbnailCarouselComponent from './ThumbnailCarousel';
+const ThumbnailCarousel = {
+  getSettings: componentSettings => _objectSpread({}, componentSettings),
+  VariantComponent: ThumbnailCarouselComponent
+};
+export default ThumbnailCarousel;
+//# sourceMappingURL=index.js.map

package/lib-es/variants/ThumbnailCarousel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ThumbnailCarouselComponent","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import ThumbnailCarouselComponent from './ThumbnailCarousel';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: ThumbnailCarouselComponent\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,0BAA0B,MAAM,qBAAqB;AAE5D,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL;AACpB,CAAC;AAED,eAAeC,iBAAiB"}

package/lib-es/variants/ThumbnailCarousel/useThumbnailCarousel.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["imageIds", "priorityLimit"];
+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; }
+import { useState, useRef } from 'react';
+const useThumbnailCarousel = _ref => {
+  let {
+      imageIds,
+      priorityLimit
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const thumbnailsListRef = useRef(null);
+  const selectedImageId = imageIds[selectedImageIndex];
+  const mainImageButtonClick = next => {
+    if (next) {
+      const isLast = imageIds.length - 1 === selectedImageIndex;
+      const newIndex = isLast ? 0 : selectedImageIndex + 1;
+      setSelectedImageIndex(newIndex);
+    } else {
+      const isFirst = selectedImageIndex === 0;
+      const newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
+      setSelectedImageIndex(newIndex);
+    }
+  };
+  const thumbnailImageClick = id => {
+    const newIndex = imageIds.indexOf(id);
+    if (newIndex !== -1) setSelectedImageIndex(newIndex);
+  };
+  return _objectSpread(_objectSpread({}, props), {}, {
+    imageIds,
+    selectedImageId,
+    selectedImageIndex,
+    thumbnailsListRef,
+    priorityLimit,
+    thumbnailImageClick,
+    mainImageButtonClick
+  });
+};
+export default useThumbnailCarousel;
+//# sourceMappingURL=useThumbnailCarousel.js.map

package/lib-es/variants/ThumbnailCarousel/useThumbnailCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThumbnailCarousel.js","names":["useState","useRef","useThumbnailCarousel","_ref","imageIds","priorityLimit","props","_objectWithoutProperties","_excluded","selectedImageIndex","setSelectedImageIndex","thumbnailsListRef","selectedImageId","mainImageButtonClick","next","isLast","length","newIndex","isFirst","thumbnailImageClick","id","indexOf","_objectSpread"],"sources":["../../../src/variants/ThumbnailCarousel/useThumbnailCarousel.js"],"sourcesContent":["import { useState, useRef } from 'react';\n\nconst useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n  const thumbnailsListRef = useRef(null);\n  const selectedImageId = imageIds[selectedImageIndex];\n\n  const mainImageButtonClick = next => {\n    if (next) {\n      const isLast = imageIds.length - 1 === selectedImageIndex;\n      const newIndex = isLast ? 0 : selectedImageIndex + 1;\n      setSelectedImageIndex(newIndex);\n    } else {\n      const isFirst = selectedImageIndex === 0;\n      const newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;\n      setSelectedImageIndex(newIndex);\n    }\n  };\n\n  const thumbnailImageClick = id => {\n    const newIndex = imageIds.indexOf(id);\n    if (newIndex !== -1) setSelectedImageIndex(newIndex);\n  };\n\n  return {\n    ...props,\n    imageIds,\n    selectedImageId,\n    selectedImageIndex,\n    thumbnailsListRef,\n    priorityLimit,\n    thumbnailImageClick,\n    mainImageButtonClick\n  };\n};\n\nexport default useThumbnailCarousel;\n"],"mappings":";;;;;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AAExC,MAAMC,oBAAoB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAAF,IAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAC/D,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGV,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMW,iBAAiB,GAAGV,MAAM,CAAC,IAAI,CAAC;EACtC,MAAMW,eAAe,GAAGR,QAAQ,CAACK,kBAAkB,CAAC;EAEpD,MAAMI,oBAAoB,GAAGC,IAAI,IAAI;IACnC,IAAIA,IAAI,EAAE;MACR,MAAMC,MAAM,GAAGX,QAAQ,CAACY,MAAM,GAAG,CAAC,KAAKP,kBAAkB;MACzD,MAAMQ,QAAQ,GAAGF,MAAM,GAAG,CAAC,GAAGN,kBAAkB,GAAG,CAAC;MACpDC,qBAAqB,CAACO,QAAQ,CAAC;IACjC,CAAC,MAAM;MACL,MAAMC,OAAO,GAAGT,kBAAkB,KAAK,CAAC;MACxC,MAAMQ,QAAQ,GAAGC,OAAO,GAAGd,QAAQ,CAACY,MAAM,GAAG,CAAC,GAAGP,kBAAkB,GAAG,CAAC;MACvEC,qBAAqB,CAACO,QAAQ,CAAC;IACjC;EACF,CAAC;EAED,MAAME,mBAAmB,GAAGC,EAAE,IAAI;IAChC,MAAMH,QAAQ,GAAGb,QAAQ,CAACiB,OAAO,CAACD,EAAE,CAAC;IACrC,IAAIH,QAAQ,KAAK,CAAC,CAAC,EAAEP,qBAAqB,CAACO,QAAQ,CAAC;EACtD,CAAC;EAED,OAAAK,aAAA,CAAAA,aAAA,KACKhB,KAAK;IACRF,QAAQ;IACRQ,eAAe;IACfH,kBAAkB;IAClBE,iBAAiB;IACjBN,aAAa;IACbc,mBAAmB;IACnBN;EAAoB;AAExB,CAAC;AAED,eAAeX,oBAAoB"}

package/lib-es/variants/index.js

@@ -1,2 +1,5 @@
-export default {};
+import thumbnailCarousel from './ThumbnailCarousel';
+export default {
+  thumbnailCarousel
+};
 //# sourceMappingURL=index.js.map

package/lib-es/variants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/variants/index.js"],"sourcesContent":["export default {};\n"],"mappings":"AAAA,eAAe,CAAC,CAAC"}
+{"version":3,"file":"index.js","names":["thumbnailCarousel"],"sources":["../../src/variants/index.js"],"sourcesContent":["import thumbnailCarousel from './ThumbnailCarousel';\n\nexport default {\n  thumbnailCarousel\n};\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,qBAAqB;AAEnD,eAAe;EACbA;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.141.0-core-styles.16",
+  "version": "0.141.0-core-styles.20",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "e6dff43958480a68453d3895888a61c9129dc94b"
+  "gitHead": "4e9b6cfffbc04fa32476c3daed008594a54838e9"
 }

package/src/variants/ThumbnailCarousel/ThumbnailCarousel.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import useThumbnailCarousel from './useThumbnailCarousel';
+import ThumbnailImage from './ThumbnailImage';
+
+const ThumbnailCarousel = props => {
+  const {
+    thumbnailsListRef,
+    imageIds,
+    selectedImageId,
+    priorityLimit,
+    mainImageButtonClick,
+    thumbnailImageClick
+  } = useThumbnailCarousel(props);
+
+  return (
+    <div className="thumbnail-carousel" data-testid="thumbnail-carousel">
+      <div className="thumbnail-carousel__main_image_container">
+        <div
+          id="previous-button"
+          className="thumbnail-carousel__main_image_container__button"
+          role="button"
+          onClick={() => mainImageButtonClick()}>
+          <div className="arrow arrow--left" />
+        </div>
+        <div
+          className="thumbnail-carousel__main_image_container__main-image"
+          data-testid="thumbnail-main-image"
+          ref={thumbnailsListRef}>
+          <ThumbnailImage {...props} priority imageId={selectedImageId} />
+        </div>
+        <div
+          id="next-button"
+          className="thumbnail-carousel__main_image_container__button next"
+          role="button"
+          onClick={() => mainImageButtonClick(true)}>
+          <div className="arrow arrow--right" />
+        </div>
+      </div>
+      <div className="thumbnail-carousel__list">
+        {imageIds.map((imageId, index) => (
+          <ThumbnailImage
+            {...props}
+            key={imageId}
+            priority={index < priorityLimit}
+            imageId={imageId}
+            selectedImageId={selectedImageId}
+            handleOnClick={thumbnailImageClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ThumbnailCarousel;

package/src/variants/ThumbnailCarousel/ThumbnailImage/ThumbnailImage.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import LazyImage from '../../../components/LazyImage';
+import useThumbnailImage from './useThumbnailImage';
+
+const ThumbnailImage = props => {
+  const {
+    loading,
+    error,
+    className,
+    imageRef,
+    imageUrl,
+    altText,
+    priority,
+    handleClick,
+    handleEnableLightbox
+  } = useThumbnailImage(props);
+
+  if (error) return error.message;
+  if (loading) return null;
+
+  return (
+    <div
+      ref={imageRef}
+      className={className}
+      onClick={handleClick}
+      role="button"
+      data-testid="thumbnail-image">
+      <LazyImage
+        src={imageUrl}
+        alt={altText}
+        sizeKey="carousel"
+        onClick={handleEnableLightbox}
+        role="button"
+        priority={priority}
+      />
+    </div>
+  );
+};
+
+export default ThumbnailImage;

package/src/variants/ThumbnailCarousel/ThumbnailImage/index.js

@@ -0,0 +1,3 @@
+import ThumbnailImage from './ThumbnailImage';
+
+export default ThumbnailImage;

package/src/variants/ThumbnailCarousel/ThumbnailImage/useThumbnailImage.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useGetImages } from '../../../hooks';
+import { getImageData } from '../../../utils';
+
+const useThumbnailImage = ({
+  imageId,
+  enableLightbox,
+  toggleModal,
+  handleSelectedImage,
+  priority,
+  selectedImageId,
+  handleOnClick
+}) => {
+  const imageRef = useRef(null);
+  const isSelected = selectedImageId === imageId;
+  const { data = {}, loading, error } = useGetImages(imageId);
+
+  useEffect(
+    () => {
+      if (imageRef.current && isSelected) {
+        imageRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    },
+    [isSelected]
+  );
+
+  const handleEnableLightbox = () => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(imageId);
+  };
+
+  const handleClick = () => {
+    handleOnClick(imageId);
+  };
+
+  const { url: imageUrl = '', data: imageData = {} } = data.getFile || {
+    getFile: { url: '', data: {} }
+  };
+  const { altText } = getImageData({}, imageData);
+
+  const className =
+    selectedImageId === imageId
+      ? 'thumbnail-carousel-image thumbnail-carousel-image--selected'
+      : 'thumbnail-carousel-image';
+
+  return {
+    loading,
+    error,
+    className,
+    imageRef,
+    imageUrl,
+    altText,
+    priority,
+    handleClick,
+    handleEnableLightbox
+  };
+};
+
+useThumbnailImage.propTypes = {
+  imageId: PropTypes.string.isRequired,
+  selectedImageId: PropTypes.string.isRequired,
+  enableLightbox: PropTypes.bool.isRequired,
+  toggleModal: PropTypes.func.isRequired,
+  handleSelectedImage: PropTypes.func.isRequired,
+  priority: PropTypes.bool.isRequired,
+  handleOnClick: PropTypes.func
+};
+
+useThumbnailImage.defaultProps = {
+  handleOnClick: () => {}
+};
+
+export default useThumbnailImage;

package/src/variants/ThumbnailCarousel/index.js

@@ -0,0 +1,10 @@
+import ThumbnailCarouselComponent from './ThumbnailCarousel';
+
+const ThumbnailCarousel = {
+  getSettings: componentSettings => ({
+    ...componentSettings
+  }),
+  VariantComponent: ThumbnailCarouselComponent
+};
+
+export default ThumbnailCarousel;

package/src/variants/ThumbnailCarousel/useThumbnailCarousel.js

@@ -0,0 +1,37 @@
+import { useState, useRef } from 'react';
+
+const useThumbnailCarousel = ({ imageIds, priorityLimit, ...props }) => {
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const thumbnailsListRef = useRef(null);
+  const selectedImageId = imageIds[selectedImageIndex];
+
+  const mainImageButtonClick = next => {
+    if (next) {
+      const isLast = imageIds.length - 1 === selectedImageIndex;
+      const newIndex = isLast ? 0 : selectedImageIndex + 1;
+      setSelectedImageIndex(newIndex);
+    } else {
+      const isFirst = selectedImageIndex === 0;
+      const newIndex = isFirst ? imageIds.length - 1 : selectedImageIndex - 1;
+      setSelectedImageIndex(newIndex);
+    }
+  };
+
+  const thumbnailImageClick = id => {
+    const newIndex = imageIds.indexOf(id);
+    if (newIndex !== -1) setSelectedImageIndex(newIndex);
+  };
+
+  return {
+    ...props,
+    imageIds,
+    selectedImageId,
+    selectedImageIndex,
+    thumbnailsListRef,
+    priorityLimit,
+    thumbnailImageClick,
+    mainImageButtonClick
+  };
+};
+
+export default useThumbnailCarousel;

package/src/variants/index.js

@@ -1 +1,5 @@
-export default {};
+import thumbnailCarousel from './ThumbnailCarousel';
+
+export default {
+  thumbnailCarousel
+};

package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailCarousel.test.js

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import ThumbnailCarousel from '../../../../../src/variants/ThumbnailCarousel/ThumbnailCarousel';
+import IMAGE_MOCKS from './mocks';
+
+const mockedProps = {
+  imageIds: ['1', '2', '3'],
+  priorityLimit: 0
+};
+
+describe('ThumbnailCarousel component', () => {
+  it('renders ThumbnailCarousel without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailCarousel {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getAllByTestId('thumbnail-image')[0]).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('thumbnail-carousel')).toBeInTheDocument();
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/ThumbnailImage.test.js

@@ -0,0 +1,45 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import ThumbnailImage from '../../../../../src/variants/ThumbnailCarousel/ThumbnailImage';
+import IMAGE_MOCKS from './mocks';
+
+describe('ThumbnailImage component', () => {
+  const mockedProps = {
+    imageId: '1',
+    enableLightbox: false,
+    toggleModal: () => {},
+    handleSelectedImage: () => {},
+    priority: 0,
+    selectedImageId: '1',
+    handleOnClick: () => {}
+  };
+
+  it('renders ThumbnailImage without error', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailImage {...mockedProps} />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('thumbnail-image')).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render error message if query fails', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={IMAGE_MOCKS}>
+        <ThumbnailImage {...mockedProps} imageId="6" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Oops something went wrong')).toBeInTheDocument();
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailCarousel.test.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailCarousel component renders ThumbnailCarousel without error 1`] = `
+<DocumentFragment>
+  <div
+    class="thumbnail-carousel"
+    data-testid="thumbnail-carousel"
+  >
+    <div
+      class="thumbnail-carousel__main_image_container"
+    >
+      <div
+        class="thumbnail-carousel__main_image_container__button"
+        id="previous-button"
+        role="button"
+      >
+        <div
+          class="arrow arrow--left"
+        />
+      </div>
+      <div
+        class="thumbnail-carousel__main_image_container__main-image"
+        data-testid="thumbnail-main-image"
+      >
+        <div
+          class="thumbnail-carousel-image"
+          data-testid="thumbnail-image"
+          role="button"
+        >
+          <span>
+            <img
+              alt=""
+              role="button"
+              src="image1.jpg"
+            />
+          </span>
+        </div>
+      </div>
+      <div
+        class="thumbnail-carousel__main_image_container__button next"
+        id="next-button"
+        role="button"
+      >
+        <div
+          class="arrow arrow--right"
+        />
+      </div>
+    </div>
+    <div
+      class="thumbnail-carousel__list"
+    >
+      <div
+        class="thumbnail-carousel-image thumbnail-carousel-image--selected"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+      <div
+        class="thumbnail-carousel-image"
+        data-testid="thumbnail-image"
+        role="button"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/variants/ThumbnailCarousel/__snapshots__/ThumbnailImage.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailImage component renders ThumbnailImage without error 1`] = `
+<DocumentFragment>
+  <div
+    class="thumbnail-carousel-image thumbnail-carousel-image--selected"
+    data-testid="thumbnail-image"
+    role="button"
+  >
+    <span />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ThumbnailImage component should render error message if query fails 1`] = `
+<DocumentFragment>
+  Oops something went wrong
+</DocumentFragment>
+`;

package/tests/unit/src/variants/ThumbnailCarousel/mocks.js

@@ -0,0 +1,64 @@
+import { getFileById } from '../../../../../src/application/query';
+
+const IMAGE_MOCKS = [
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '1' }
+    },
+    result: {
+      data: {
+        getFile: { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '2' }
+    },
+    result: {
+      data: {
+        getFile: { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '3' }
+    },
+    result: {
+      data: {
+        getFile: { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} }
+      }
+    }
+  },
+  {
+    request: {
+      query: getFileById,
+      variables: { id: '6' }
+    },
+    error: {
+      message: 'Oops something went wrong'
+    }
+  }
+  //   {
+  //     request: {
+  //       query: getFiles,
+  //       variables: { where: { id: { _in: ['1', '2', '3', '4'] } } }
+  //     },
+  //     result: {
+  //       data: {
+  //         getImages: [
+  //           { id: '1', url: 'image1.jpg', caption: 'Caption 1', data: {} },
+  //           { id: '2', url: 'image2.jpg', caption: 'Caption 2', data: {} },
+  //           { id: '3', url: 'image3.jpg', caption: 'Caption 3', data: {} },
+  //           { id: '4', url: 'image4.jpg', caption: 'Caption 4', data: {} }
+  //         ]
+  //       }
+  //     }
+  //   }
+];
+
+export default IMAGE_MOCKS;