@knovator/pagecreator 0.5.0 → 0.5.1

package/index.cjs

@@ -0,0 +1,726 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Slider = require('react-slick');
+var reactTabs = require('react-tabs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
+
+var regeneratorRuntime$1 = {exports: {}};
+
+var _typeof = {exports: {}};
+
+(function (module) {
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
+}
+module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
+}(_typeof));
+
+(function (module) {
+var _typeof$1 = _typeof.exports["default"];
+function _regeneratorRuntime() {
+  module.exports = _regeneratorRuntime = function _regeneratorRuntime() {
+    return exports;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  var exports = {},
+    Op = Object.prototype,
+    hasOwn = Op.hasOwnProperty,
+    defineProperty = Object.defineProperty || function (obj, key, desc) {
+      obj[key] = desc.value;
+    },
+    $Symbol = "function" == typeof Symbol ? Symbol : {},
+    iteratorSymbol = $Symbol.iterator || "@@iterator",
+    asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+    toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+  function define(obj, key, value) {
+    return Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), obj[key];
+  }
+  try {
+    define({}, "");
+  } catch (err) {
+    define = function define(obj, key, value) {
+      return obj[key] = value;
+    };
+  }
+  function wrap(innerFn, outerFn, self, tryLocsList) {
+    var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+      generator = Object.create(protoGenerator.prototype),
+      context = new Context(tryLocsList || []);
+    return defineProperty(generator, "_invoke", {
+      value: makeInvokeMethod(innerFn, self, context)
+    }), generator;
+  }
+  function tryCatch(fn, obj, arg) {
+    try {
+      return {
+        type: "normal",
+        arg: fn.call(obj, arg)
+      };
+    } catch (err) {
+      return {
+        type: "throw",
+        arg: err
+      };
+    }
+  }
+  exports.wrap = wrap;
+  var ContinueSentinel = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  var IteratorPrototype = {};
+  define(IteratorPrototype, iteratorSymbol, function () {
+    return this;
+  });
+  var getProto = Object.getPrototypeOf,
+    NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+  var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+  function defineIteratorMethods(prototype) {
+    ["next", "throw", "return"].forEach(function (method) {
+      define(prototype, method, function (arg) {
+        return this._invoke(method, arg);
+      });
+    });
+  }
+  function AsyncIterator(generator, PromiseImpl) {
+    function invoke(method, arg, resolve, reject) {
+      var record = tryCatch(generator[method], generator, arg);
+      if ("throw" !== record.type) {
+        var result = record.arg,
+          value = result.value;
+        return value && "object" == _typeof$1(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+          invoke("next", value, resolve, reject);
+        }, function (err) {
+          invoke("throw", err, resolve, reject);
+        }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+          result.value = unwrapped, resolve(result);
+        }, function (error) {
+          return invoke("throw", error, resolve, reject);
+        });
+      }
+      reject(record.arg);
+    }
+    var previousPromise;
+    defineProperty(this, "_invoke", {
+      value: function value(method, arg) {
+        function callInvokeWithMethodAndArg() {
+          return new PromiseImpl(function (resolve, reject) {
+            invoke(method, arg, resolve, reject);
+          });
+        }
+        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      }
+    });
+  }
+  function makeInvokeMethod(innerFn, self, context) {
+    var state = "suspendedStart";
+    return function (method, arg) {
+      if ("executing" === state) throw new Error("Generator is already running");
+      if ("completed" === state) {
+        if ("throw" === method) throw arg;
+        return doneResult();
+      }
+      for (context.method = method, context.arg = arg;;) {
+        var delegate = context.delegate;
+        if (delegate) {
+          var delegateResult = maybeInvokeDelegate(delegate, context);
+          if (delegateResult) {
+            if (delegateResult === ContinueSentinel) continue;
+            return delegateResult;
+          }
+        }
+        if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+          if ("suspendedStart" === state) throw state = "completed", context.arg;
+          context.dispatchException(context.arg);
+        } else "return" === context.method && context.abrupt("return", context.arg);
+        state = "executing";
+        var record = tryCatch(innerFn, self, context);
+        if ("normal" === record.type) {
+          if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+          return {
+            value: record.arg,
+            done: context.done
+          };
+        }
+        "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+      }
+    };
+  }
+  function maybeInvokeDelegate(delegate, context) {
+    var methodName = context.method,
+      method = delegate.iterator[methodName];
+    if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
+    var record = tryCatch(method, delegate.iterator, context.arg);
+    if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+    var info = record.arg;
+    return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+  }
+  function pushTryEntry(locs) {
+    var entry = {
+      tryLoc: locs[0]
+    };
+    1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+  }
+  function resetTryEntry(entry) {
+    var record = entry.completion || {};
+    record.type = "normal", delete record.arg, entry.completion = record;
+  }
+  function Context(tryLocsList) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(iterable) {
+    if (iterable) {
+      var iteratorMethod = iterable[iteratorSymbol];
+      if (iteratorMethod) return iteratorMethod.call(iterable);
+      if ("function" == typeof iterable.next) return iterable;
+      if (!isNaN(iterable.length)) {
+        var i = -1,
+          next = function next() {
+            for (; ++i < iterable.length;) {
+              if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+            }
+            return next.value = undefined, next.done = !0, next;
+          };
+        return next.next = next;
+      }
+    }
+    return {
+      next: doneResult
+    };
+  }
+  function doneResult() {
+    return {
+      value: undefined,
+      done: !0
+    };
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
+    value: GeneratorFunctionPrototype,
+    configurable: !0
+  }), defineProperty(GeneratorFunctionPrototype, "constructor", {
+    value: GeneratorFunction,
+    configurable: !0
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+    var ctor = "function" == typeof genFun && genFun.constructor;
+    return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+  }, exports.mark = function (genFun) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+  }, exports.awrap = function (arg) {
+    return {
+      __await: arg
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+    return this;
+  }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+    void 0 === PromiseImpl && (PromiseImpl = Promise);
+    var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+    return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+      return result.done ? result.value : iter.next();
+    });
+  }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+    return this;
+  }), define(Gp, "toString", function () {
+    return "[object Generator]";
+  }), exports.keys = function (val) {
+    var object = Object(val),
+      keys = [];
+    for (var key in object) {
+      keys.push(key);
+    }
+    return keys.reverse(), function next() {
+      for (; keys.length;) {
+        var key = keys.pop();
+        if (key in object) return next.value = key, next.done = !1, next;
+      }
+      return next.done = !0, next;
+    };
+  }, exports.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function reset(skipTempReset) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) {
+        "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+      }
+    },
+    stop: function stop() {
+      this.done = !0;
+      var rootRecord = this.tryEntries[0].completion;
+      if ("throw" === rootRecord.type) throw rootRecord.arg;
+      return this.rval;
+    },
+    dispatchException: function dispatchException(exception) {
+      if (this.done) throw exception;
+      var context = this;
+      function handle(loc, caught) {
+        return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+      }
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i],
+          record = entry.completion;
+        if ("root" === entry.tryLoc) return handle("end");
+        if (entry.tryLoc <= this.prev) {
+          var hasCatch = hasOwn.call(entry, "catchLoc"),
+            hasFinally = hasOwn.call(entry, "finallyLoc");
+          if (hasCatch && hasFinally) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          } else if (hasCatch) {
+            if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+          } else {
+            if (!hasFinally) throw new Error("try statement without catch or finally");
+            if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function abrupt(type, arg) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+          var finallyEntry = entry;
+          break;
+        }
+      }
+      finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+      var record = finallyEntry ? finallyEntry.completion : {};
+      return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+    },
+    complete: function complete(record, afterLoc) {
+      if ("throw" === record.type) throw record.arg;
+      return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+    },
+    finish: function finish(finallyLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+      }
+    },
+    "catch": function _catch(tryLoc) {
+      for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+        var entry = this.tryEntries[i];
+        if (entry.tryLoc === tryLoc) {
+          var record = entry.completion;
+          if ("throw" === record.type) {
+            var thrown = record.arg;
+            resetTryEntry(entry);
+          }
+          return thrown;
+        }
+      }
+      throw new Error("illegal catch attempt");
+    },
+    delegateYield: function delegateYield(iterable, resultName, nextLoc) {
+      return this.delegate = {
+        iterator: values(iterable),
+        resultName: resultName,
+        nextLoc: nextLoc
+      }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+    }
+  }, exports;
+}
+module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports;
+}(regeneratorRuntime$1));
+
+// TODO(Babel 8): Remove this file.
+
+var runtime = regeneratorRuntime$1.exports();
+var regenerator = runtime;
+
+// Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+try {
+  regeneratorRuntime = runtime;
+} catch (accidentalStrictMode) {
+  if (typeof globalThis === "object") {
+    globalThis.regeneratorRuntime = runtime;
+  } else {
+    Function("r", "regeneratorRuntime = r")(runtime);
+  }
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+var _a;
+function getData(_ref) {
+  var url = _ref.url,
+    code = _ref.code,
+    token = _ref.token;
+  return __awaiter(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+    var response, data;
+    return regenerator.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return fetch(url, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                Authorization: token ? "Bearer ".concat(token) : ''
+              },
+              body: JSON.stringify({
+                code: code
+              })
+            });
+          case 2:
+            response = _context.sent;
+            if (response.ok) {
+              _context.next = 5;
+              break;
+            }
+            throw new Error(response.statusText);
+          case 5:
+            _context.next = 7;
+            return response.json();
+          case 7:
+            data = _context.sent;
+            return _context.abrupt("return", data['data']);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+}
+function buildSrcSets(imageBaseUrl, srcSets) {
+  if (!srcSets) return '';
+  if (!imageBaseUrl) return srcSets;
+  return srcSets.split(', ').map(function (srcSetItem) {
+    return "".concat(imageBaseUrl).concat(srcSetItem);
+  }).join(', ');
+}
+var isMobileDevice = typeof window !== 'undefined' && /Mobi/i.test((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.userAgent);
+var filterItemData = function filterItemData(data) {
+  return isMobileDevice ? data.itemType === 'Mobile' : data.itemType === 'Web';
+};
+
+function FixedWidget(_ref) {
+  var widgetData = _ref.widgetData,
+    formatItem = _ref.formatItem,
+    className = _ref.className;
+  var gridClasses = "grid grid-cols-".concat(widgetData.mobilePerRow, " md:grid-cols-").concat(widgetData.tabletPerRow, " lg:grid-cols-").concat(widgetData.webPerRow);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className || gridClasses
+  }, widgetData.itemsType === 'Image' ? widgetData.items.filter(filterItemData).map(function (item, index) {
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: index
+    }, formatItem(item));
+  }) : widgetData.collectionItems.map(function (item, index) {
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: index
+    }, formatItem(item));
+  }));
+}
+
+var Next = function Next() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9.129 5.25L5.106 1.227L6.1665 0.166504L12 6L6.1665 11.8335L5.106 10.773L9.129 6.75H0V5.25H9.129Z",
+    fill: "#40B5E8"
+  }));
+};
+
+var Previous = function Previous() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2.871 5.25L6.894 1.227L5.8335 0.166504L0 6L5.8335 11.8335L6.894 10.773L2.871 6.75H12V5.25H2.871Z",
+    fill: "#40B5E8"
+  }));
+};
+
+var SlickArrowLeft = function SlickArrowLeft(_a) {
+  var currentSlide = _a.currentSlide;
+    _a.slideCount;
+    var props = __rest(_a, ["currentSlide", "slideCount"]);
+  return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
+    className: 'slick-prev slick-arrow' + (currentSlide === 0 ? ' slick-disabled' : ''),
+    "aria-hidden": "true",
+    "aria-disabled": currentSlide === 0 ? true : false,
+    type: "button"
+  }), /*#__PURE__*/React__default["default"].createElement(Previous, null));
+};
+var SlickArrowRight = function SlickArrowRight(_a) {
+  var currentSlide = _a.currentSlide,
+    slideCount = _a.slideCount,
+    props = __rest(_a, ["currentSlide", "slideCount"]);
+  return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
+    className: 'slick-next slick-arrow' + (slideCount && currentSlide === slideCount - 1 ? ' slick-disabled' : ''),
+    "aria-hidden": "true",
+    "aria-disabled": slideCount && currentSlide === slideCount - 1 ? true : false,
+    type: "button"
+  }), /*#__PURE__*/React__default["default"].createElement(Next, null));
+};
+function CarouselWidget(_ref) {
+  var widgetData = _ref.widgetData,
+    formatItem = _ref.formatItem,
+    settings = _ref.settings,
+    className = _ref.className;
+  var defaultSettings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: widgetData.mobilePerRow,
+    slidesToScroll: 1,
+    autoplay: widgetData.autoPlay,
+    autoplaySpeed: 1500,
+    pauseOnHover: true,
+    nextArrow: /*#__PURE__*/React__default["default"].createElement(SlickArrowRight, null),
+    prevArrow: /*#__PURE__*/React__default["default"].createElement(SlickArrowLeft, null),
+    responsive: [{
+      breakpoint: 768,
+      settings: {
+        slidesToShow: widgetData.tabletPerRow
+      }
+    }, {
+      breakpoint: 1024,
+      settings: {
+        arrows: false,
+        slidesToShow: widgetData.webPerRow
+      }
+    }]
+  };
+  if (!widgetData) return null;
+  return /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], Object.assign({}, settings ? settings : defaultSettings, {
+    className: className
+  }), widgetData.itemsType === 'Image' ? widgetData.items.filter(filterItemData).map(function (item, index) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: index
+    }, formatItem(item));
+  }) : widgetData.collectionItems.map(function (item, index) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: index
+    }, formatItem(item));
+  }));
+}
+
+function Banner(_ref) {
+  var imageAltText = _ref.imageAltText,
+    imageUrl = _ref.imageUrl,
+    _onClick = _ref.onClick,
+    srcSets = _ref.srcSets,
+    title = _ref.title,
+    subtitle = _ref.subtitle;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kpc_banner"
+  }, /*#__PURE__*/React__default["default"].createElement("b", null, title), subtitle ? /*#__PURE__*/React__default["default"].createElement("p", null, subtitle) : null, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: imageUrl,
+    alt: imageAltText,
+    className: "kpc_banner-image",
+    srcSet: srcSets,
+    loading: "lazy",
+    onClick: function onClick() {
+      return _onClick && _onClick();
+    }
+  }));
+}
+
+function CollectionItem(_ref) {
+  var name = _ref.name,
+    _onClick = _ref.onClick;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kpc_item",
+    onClick: function onClick() {
+      return _onClick && _onClick();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "kpc_item-text"
+  }, name || 'Laurem Ipsum'));
+}
+
+function TabWidget(_ref) {
+  var widgetData = _ref.widgetData,
+    formatItem = _ref.formatItem,
+    className = _ref.className,
+    formatTabTitle = _ref.formatTabTitle;
+  var _useState = React.useState(0),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var gridClasses = "grid grid-cols-".concat(widgetData.mobilePerRow, " md:grid-cols-").concat(widgetData.tabletPerRow, " lg:grid-cols-").concat(widgetData.webPerRow);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(reactTabs.Tabs, {
+    selectedIndex: activeTab,
+    onSelect: setActiveTab
+  }, /*#__PURE__*/React__default["default"].createElement(reactTabs.TabList, null, widgetData.tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default["default"].createElement(reactTabs.Tab, {
+      key: index
+    }, formatTabTitle(tab.name, tab.collectionItems, activeTab === index));
+  })), widgetData.tabs.map(function (tab, index) {
+    return /*#__PURE__*/React__default["default"].createElement(reactTabs.TabPanel, {
+      key: index
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: className || gridClasses
+    }, tab.collectionItems.map(function (item) {
+      return formatItem(item);
+    })));
+  })));
+}
+
+function Widget(_ref) {
+  var widgetData = _ref.widgetData,
+    imageBaseUrl = _ref.imageBaseUrl,
+    formatItem = _ref.formatItem,
+    _onClick = _ref.onClick,
+    settings = _ref.settings,
+    hideTitle = _ref.hideTitle,
+    className = _ref.className,
+    formatFooter = _ref.formatFooter,
+    formatHeader = _ref.formatHeader,
+    formatTabTitle = _ref.formatTabTitle;
+  var formatItems = function formatItems(item) {
+    var _a;
+    if (typeof formatItem === 'function' && formatItem) return formatItem(item);else if (widgetData.itemsType === 'Image') return /*#__PURE__*/React__default["default"].createElement(Banner, {
+      key: item._id,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      imageUrl: "".concat(imageBaseUrl || '').concat((_a = item.image) === null || _a === void 0 ? void 0 : _a.uri),
+      imageAltText: item._id,
+      onClick: function onClick() {
+        return _onClick && _onClick(item);
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      srcSets: buildSrcSets(imageBaseUrl, item.srcSets),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      title: item.title,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      subtitle: item.subtitle
+    });else return /*#__PURE__*/React__default["default"].createElement(CollectionItem, Object.assign({
+      key: item._id,
+      onClick: function onClick() {
+        return _onClick && _onClick(item);
+      }
+    }, item));
+  };
+  var formatTabTitles = function formatTabTitles(title, collectionData, isActive) {
+    if (typeof formatTabTitle === 'function' && formatTabTitle) return formatTabTitle(title, collectionData, isActive);
+    return /*#__PURE__*/React__default["default"].createElement("div", null, title);
+  };
+  if (!widgetData) return null;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kpc_widget",
+    style: {
+      backgroundColor: widgetData.backgroundColor
+    }
+  }, hideTitle === true ? null : typeof formatHeader === 'function' ? formatHeader(widgetData.widgetTitle, widgetData) : /*#__PURE__*/React__default["default"].createElement("h2", {
+    className: "kpc_widget-title"
+  }, widgetData.widgetTitle), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kpc_widget-body"
+  }, widgetData.widgetType === 'Carousel' ? /*#__PURE__*/React__default["default"].createElement(CarouselWidget, {
+    settings: settings,
+    widgetData: widgetData,
+    formatItem: formatItems,
+    className: className,
+    formatTabTitle: formatTabTitles
+  }) : widgetData.widgetType === 'Tabs' ? /*#__PURE__*/React__default["default"].createElement(TabWidget, {
+    formatItem: formatItems,
+    formatTabTitle: formatTabTitles,
+    widgetData: widgetData,
+    className: className
+  }) : /*#__PURE__*/React__default["default"].createElement(FixedWidget, {
+    widgetData: widgetData,
+    formatItem: formatItems,
+    className: className,
+    formatTabTitle: formatTabTitles
+  })), typeof formatFooter === 'function' ? formatFooter(widgetData) : null);
+}
+
+function Page(_ref) {
+  var title = _ref.title,
+    imageBaseUrl = _ref.imageBaseUrl,
+    pageData = _ref.pageData,
+    formatItem = _ref.formatItem,
+    onClick = _ref.onClick,
+    formatWidget = _ref.formatWidget,
+    hideWidgetTitles = _ref.hideWidgetTitles;
+  if (!pageData) return null;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kpc_page"
+  }, title && /*#__PURE__*/React__default["default"].createElement("h1", {
+    className: "kpc_page-title"
+  }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "kpc_page-widgets"
+  }, pageData.widgets.map(function (widgetData, index) {
+    return typeof formatWidget === 'function' ? /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: index
+    }, formatWidget(widgetData, index)) : /*#__PURE__*/React__default["default"].createElement(Widget, {
+      widgetData: widgetData,
+      key: index,
+      imageBaseUrl: imageBaseUrl,
+      hideTitle: hideWidgetTitles === true,
+      formatItem: formatItem && function (itemData) {
+        return formatItem(widgetData.code, itemData);
+      },
+      onClick: onClick && function (itemData) {
+        return onClick(widgetData.code, itemData);
+      }
+    });
+  })));
+}
+
+exports.Page = Page;
+exports.Widget = Widget;
+exports.getData = getData;

package/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import Slider from 'react-slick';
 import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
 
@@ -446,10 +446,14 @@ function FixedWidget(_ref) {
   var gridClasses = "grid grid-cols-".concat(widgetData.mobilePerRow, " md:grid-cols-").concat(widgetData.tabletPerRow, " lg:grid-cols-").concat(widgetData.webPerRow);
   return /*#__PURE__*/React.createElement("div", {
     className: className || gridClasses
-  }, widgetData.itemsType === 'Image' ? widgetData.items.filter(filterItemData).map(function (item) {
-    return formatItem(item);
-  }) : widgetData.collectionItems.map(function (item) {
-    return formatItem(item);
+  }, widgetData.itemsType === 'Image' ? widgetData.items.filter(filterItemData).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, formatItem(item));
+  }) : widgetData.collectionItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, formatItem(item));
   }));
 }
 
@@ -691,7 +695,9 @@ function Page(_ref) {
   }, title), /*#__PURE__*/React.createElement("div", {
     className: "kpc_page-widgets"
   }, pageData.widgets.map(function (widgetData, index) {
-    return typeof formatWidget === 'function' ? formatWidget(widgetData, index) : /*#__PURE__*/React.createElement(Widget, {
+    return typeof formatWidget === 'function' ? /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, formatWidget(widgetData, index)) : /*#__PURE__*/React.createElement(Widget, {
       widgetData: widgetData,
       key: index,
       imageBaseUrl: imageBaseUrl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:knovator/pagecreator.git"
@@ -22,7 +22,8 @@
     "README.md",
     "style.css",
     "index.d.ts",
-    "index.js"
+    "index.js",
+    "index.cjs"
   ],
   "module": "./index.js",
   "main": "./index.cjs",