@blaze-cms/react-page-builder 0.124.0-alpha.1 → 0.124.0-alpha.2

package/lib/components/CarouselWrapper.js

@@ -31,8 +31,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _fa = require("react-icons/fa");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -129,9 +127,9 @@ var CarouselWrapper = function CarouselWrapper(_ref) {
       setShouldAutoScroll(false);
       handleButtonNavigation();
     }
-  }, /*#__PURE__*/_react["default"].createElement("i", null, /*#__PURE__*/_react["default"].createElement(_fa.FaAngleLeft, {
-    size: arrowSize
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "arrow left"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "cards-carousel--right-button-wrapper"
   }, displayRight && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
@@ -140,9 +138,9 @@ var CarouselWrapper = function CarouselWrapper(_ref) {
       setShouldAutoScroll(false);
       handleButtonNavigation(true);
     }
-  }, /*#__PURE__*/_react["default"].createElement("i", null, /*#__PURE__*/_react["default"].createElement(_fa.FaAngleRight, {
-    size: arrowSize
-  })))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "arrow right"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: contentClassName,
     ref: ref,
     onScroll: handleScroll

package/lib/components/CarouselWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","arrowSize","ref","displayLeft","displayRight","buttonDisplay","setButtonDisplays","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","propTypes","PropTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaAngleLeft, FaAngleRight } from 'react-icons/fa';\n\nconst CarouselWrapper = ({\n  children,\n  bannerModifier,\n  itemsPerRow,\n  enableAutoScroll,\n  autoScrollTimer,\n  arrowSize\n}) => {\n  const ref = useRef();\n  const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n  const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n  const autoScrollRef = useRef();\n\n  useEffect(\n    () => {\n      autoScrollRef.current = shouldAutoScroll;\n      const id = setInterval(scrollCheck, autoScrollTimer);\n      function scrollCheck() {\n        if (!autoScrollRef.current) {\n          clearInterval(id);\n        } else {\n          handleButtonNavigation(true);\n        }\n      }\n\n      return () => clearInterval(id);\n    },\n    [autoScrollTimer, shouldAutoScroll]\n  );\n\n  useEffect(\n    () => {\n      const {\n        current: { offsetWidth, scrollWidth }\n      } = ref;\n      if (scrollWidth <= offsetWidth)\n        setButtonDisplays({ displayLeft: false, displayRight: false });\n      setShouldAutoScroll(enableAutoScroll);\n    },\n    [enableAutoScroll]\n  );\n\n  const handleScroll = () => {\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n    const updatedDisplayLeft = !!scrollLeft;\n    const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n    setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n  };\n\n  const handleButtonNavigation = direction => {\n    if (!ref || !ref.current) return;\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n\n    if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n      ref.current.scrollLeft = 0;\n    } else {\n      ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n    }\n  };\n\n  const { displayLeft, displayRight } = buttonDisplay;\n  const wrapperClassName = `cards-carousel${bannerModifier}`;\n  const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n  return (\n    <div className={wrapperClassName}>\n      <div className=\"cards-carousel--left-button-wrapper\">\n        {displayLeft && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-back icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation();\n            }}>\n            <i>\n              <FaAngleLeft size={arrowSize} />\n            </i>\n          </button>\n        )}\n      </div>\n      <div className=\"cards-carousel--right-button-wrapper\">\n        {displayRight && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-forward icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation(true);\n            }}>\n            <i>\n              <FaAngleRight size={arrowSize} />\n            </i>\n          </button>\n        )}\n      </div>\n      <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nCarouselWrapper.propTypes = {\n  bannerModifier: PropTypes.string,\n  itemsPerRow: PropTypes.number,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  enableAutoScroll: PropTypes.bool,\n  autoScrollTimer: PropTypes.number,\n  arrowSize: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n  itemsPerRow: 0,\n  bannerModifier: '',\n  children: [],\n  enableAutoScroll: false,\n  autoScrollTimer: 0,\n  arrowSize: 14\n};\n\nexport default CarouselWrapper;\n"],"file":"CarouselWrapper.js"}
+{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","arrowSize","ref","displayLeft","displayRight","buttonDisplay","setButtonDisplays","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","propTypes","PropTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst CarouselWrapper = ({\n  children,\n  bannerModifier,\n  itemsPerRow,\n  enableAutoScroll,\n  autoScrollTimer,\n  arrowSize\n}) => {\n  const ref = useRef();\n  const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n  const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n  const autoScrollRef = useRef();\n\n  useEffect(\n    () => {\n      autoScrollRef.current = shouldAutoScroll;\n      const id = setInterval(scrollCheck, autoScrollTimer);\n      function scrollCheck() {\n        if (!autoScrollRef.current) {\n          clearInterval(id);\n        } else {\n          handleButtonNavigation(true);\n        }\n      }\n\n      return () => clearInterval(id);\n    },\n    [autoScrollTimer, shouldAutoScroll]\n  );\n\n  useEffect(\n    () => {\n      const {\n        current: { offsetWidth, scrollWidth }\n      } = ref;\n      if (scrollWidth <= offsetWidth)\n        setButtonDisplays({ displayLeft: false, displayRight: false });\n      setShouldAutoScroll(enableAutoScroll);\n    },\n    [enableAutoScroll]\n  );\n\n  const handleScroll = () => {\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n    const updatedDisplayLeft = !!scrollLeft;\n    const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n    setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n  };\n\n  const handleButtonNavigation = direction => {\n    if (!ref || !ref.current) return;\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n\n    if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n      ref.current.scrollLeft = 0;\n    } else {\n      ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n    }\n  };\n\n  const { displayLeft, displayRight } = buttonDisplay;\n  const wrapperClassName = `cards-carousel${bannerModifier}`;\n  const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n  return (\n    <div className={wrapperClassName}>\n      <div className=\"cards-carousel--left-button-wrapper\">\n        {displayLeft && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-back icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation();\n            }}>\n            <i className=\"arrow left\" />\n          </button>\n        )}\n      </div>\n      <div className=\"cards-carousel--right-button-wrapper\">\n        {displayRight && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-forward icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation(true);\n            }}>\n            <i className=\"arrow right\" />\n          </button>\n        )}\n      </div>\n      <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nCarouselWrapper.propTypes = {\n  bannerModifier: PropTypes.string,\n  itemsPerRow: PropTypes.number,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  enableAutoScroll: PropTypes.bool,\n  autoScrollTimer: PropTypes.number,\n  arrowSize: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n  itemsPerRow: 0,\n  bannerModifier: '',\n  children: [],\n  enableAutoScroll: false,\n  autoScrollTimer: 0,\n  arrowSize: 14\n};\n\nexport default CarouselWrapper;\n"],"file":"CarouselWrapper.js"}

package/lib-es/components/CarouselWrapper.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
 const CarouselWrapper = ({
   children,
@@ -95,9 +94,9 @@ const CarouselWrapper = ({
       setShouldAutoScroll(false);
       handleButtonNavigation();
     }
-  }, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(FaAngleLeft, {
-    size: arrowSize
-  })))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "arrow left"
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "cards-carousel--right-button-wrapper"
   }, displayRight && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -106,9 +105,9 @@ const CarouselWrapper = ({
       setShouldAutoScroll(false);
       handleButtonNavigation(true);
     }
-  }, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(FaAngleRight, {
-    size: arrowSize
-  })))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "arrow right"
+  }))), /*#__PURE__*/React.createElement("div", {
     className: contentClassName,
     ref: ref,
     onScroll: handleScroll

package/lib-es/components/CarouselWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["React","useRef","useState","useEffect","PropTypes","FaAngleLeft","FaAngleRight","CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","arrowSize","ref","buttonDisplay","setButtonDisplays","displayLeft","displayRight","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","propTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaAngleLeft, FaAngleRight } from 'react-icons/fa';\n\nconst CarouselWrapper = ({\n  children,\n  bannerModifier,\n  itemsPerRow,\n  enableAutoScroll,\n  autoScrollTimer,\n  arrowSize\n}) => {\n  const ref = useRef();\n  const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n  const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n  const autoScrollRef = useRef();\n\n  useEffect(\n    () => {\n      autoScrollRef.current = shouldAutoScroll;\n      const id = setInterval(scrollCheck, autoScrollTimer);\n      function scrollCheck() {\n        if (!autoScrollRef.current) {\n          clearInterval(id);\n        } else {\n          handleButtonNavigation(true);\n        }\n      }\n\n      return () => clearInterval(id);\n    },\n    [autoScrollTimer, shouldAutoScroll]\n  );\n\n  useEffect(\n    () => {\n      const {\n        current: { offsetWidth, scrollWidth }\n      } = ref;\n      if (scrollWidth <= offsetWidth)\n        setButtonDisplays({ displayLeft: false, displayRight: false });\n      setShouldAutoScroll(enableAutoScroll);\n    },\n    [enableAutoScroll]\n  );\n\n  const handleScroll = () => {\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n    const updatedDisplayLeft = !!scrollLeft;\n    const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n    setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n  };\n\n  const handleButtonNavigation = direction => {\n    if (!ref || !ref.current) return;\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n\n    if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n      ref.current.scrollLeft = 0;\n    } else {\n      ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n    }\n  };\n\n  const { displayLeft, displayRight } = buttonDisplay;\n  const wrapperClassName = `cards-carousel${bannerModifier}`;\n  const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n  return (\n    <div className={wrapperClassName}>\n      <div className=\"cards-carousel--left-button-wrapper\">\n        {displayLeft && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-back icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation();\n            }}>\n            <i>\n              <FaAngleLeft size={arrowSize} />\n            </i>\n          </button>\n        )}\n      </div>\n      <div className=\"cards-carousel--right-button-wrapper\">\n        {displayRight && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-forward icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation(true);\n            }}>\n            <i>\n              <FaAngleRight size={arrowSize} />\n            </i>\n          </button>\n        )}\n      </div>\n      <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nCarouselWrapper.propTypes = {\n  bannerModifier: PropTypes.string,\n  itemsPerRow: PropTypes.number,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  enableAutoScroll: PropTypes.bool,\n  autoScrollTimer: PropTypes.number,\n  arrowSize: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n  itemsPerRow: 0,\n  bannerModifier: '',\n  children: [],\n  enableAutoScroll: false,\n  autoScrollTimer: 0,\n  arrowSize: 14\n};\n\nexport default CarouselWrapper;\n"],"file":"CarouselWrapper.js"}
+{"version":3,"sources":["../../src/components/CarouselWrapper.js"],"names":["React","useRef","useState","useEffect","PropTypes","CarouselWrapper","children","bannerModifier","itemsPerRow","enableAutoScroll","autoScrollTimer","arrowSize","ref","buttonDisplay","setButtonDisplays","displayLeft","displayRight","shouldAutoScroll","setShouldAutoScroll","autoScrollRef","current","id","setInterval","scrollCheck","clearInterval","handleButtonNavigation","offsetWidth","scrollWidth","handleScroll","scrollLeft","updatedDisplayLeft","updatedDisplayRight","direction","wrapperClassName","contentClassName","propTypes","string","number","oneOfType","arrayOf","node","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst CarouselWrapper = ({\n  children,\n  bannerModifier,\n  itemsPerRow,\n  enableAutoScroll,\n  autoScrollTimer,\n  arrowSize\n}) => {\n  const ref = useRef();\n  const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });\n  const [shouldAutoScroll, setShouldAutoScroll] = useState(false);\n  const autoScrollRef = useRef();\n\n  useEffect(\n    () => {\n      autoScrollRef.current = shouldAutoScroll;\n      const id = setInterval(scrollCheck, autoScrollTimer);\n      function scrollCheck() {\n        if (!autoScrollRef.current) {\n          clearInterval(id);\n        } else {\n          handleButtonNavigation(true);\n        }\n      }\n\n      return () => clearInterval(id);\n    },\n    [autoScrollTimer, shouldAutoScroll]\n  );\n\n  useEffect(\n    () => {\n      const {\n        current: { offsetWidth, scrollWidth }\n      } = ref;\n      if (scrollWidth <= offsetWidth)\n        setButtonDisplays({ displayLeft: false, displayRight: false });\n      setShouldAutoScroll(enableAutoScroll);\n    },\n    [enableAutoScroll]\n  );\n\n  const handleScroll = () => {\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n    const updatedDisplayLeft = !!scrollLeft;\n    const updatedDisplayRight = scrollLeft + offsetWidth + 1 < scrollWidth;\n    setButtonDisplays({ displayLeft: updatedDisplayLeft, displayRight: updatedDisplayRight });\n  };\n\n  const handleButtonNavigation = direction => {\n    if (!ref || !ref.current) return;\n    const {\n      current: { offsetWidth, scrollLeft, scrollWidth }\n    } = ref;\n\n    if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {\n      ref.current.scrollLeft = 0;\n    } else {\n      ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;\n    }\n  };\n\n  const { displayLeft, displayRight } = buttonDisplay;\n  const wrapperClassName = `cards-carousel${bannerModifier}`;\n  const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;\n\n  return (\n    <div className={wrapperClassName}>\n      <div className=\"cards-carousel--left-button-wrapper\">\n        {displayLeft && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-back icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation();\n            }}>\n            <i className=\"arrow left\" />\n          </button>\n        )}\n      </div>\n      <div className=\"cards-carousel--right-button-wrapper\">\n        {displayRight && (\n          <button\n            type=\"button\"\n            className=\"cards-carousel--button-forward icon-button icon\"\n            onClick={() => {\n              setShouldAutoScroll(false);\n              handleButtonNavigation(true);\n            }}>\n            <i className=\"arrow right\" />\n          </button>\n        )}\n      </div>\n      <div className={contentClassName} ref={ref} onScroll={handleScroll}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nCarouselWrapper.propTypes = {\n  bannerModifier: PropTypes.string,\n  itemsPerRow: PropTypes.number,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  enableAutoScroll: PropTypes.bool,\n  autoScrollTimer: PropTypes.number,\n  arrowSize: PropTypes.number\n};\n\nCarouselWrapper.defaultProps = {\n  itemsPerRow: 0,\n  bannerModifier: '',\n  children: [],\n  enableAutoScroll: false,\n  autoScrollTimer: 0,\n  arrowSize: 14\n};\n\nexport default CarouselWrapper;\n"],"file":"CarouselWrapper.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.124.0-alpha.1",
+  "version": "0.124.0-alpha.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -30,7 +30,7 @@
     "@blaze-cms/core-auth-ui": "^0.119.0",
     "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "^0.2.0",
-    "@blaze-cms/nextjs-components": "^0.124.0-alpha.1",
+    "@blaze-cms/nextjs-components": "^0.124.0-alpha.2",
     "@blaze-cms/setup-ui": "^0.92.0",
     "@blaze-cms/utils": "^0.118.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
@@ -84,5 +84,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "797f21d4f5d2291343e2bdb017039cfd3b6290e0"
+  "gitHead": "52045d2ed84e79531b9634ad5ce95b89f674382a"
 }

package/src/components/CarouselWrapper.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
 const CarouselWrapper = ({
   children,
@@ -81,9 +80,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation();
             }}>
-            <i>
-              <FaAngleLeft size={arrowSize} />
-            </i>
+            <i className="arrow left" />
           </button>
         )}
       </div>
@@ -96,9 +93,7 @@ const CarouselWrapper = ({
               setShouldAutoScroll(false);
               handleButtonNavigation(true);
             }}>
-            <i>
-              <FaAngleRight size={arrowSize} />
-            </i>
+            <i className="arrow right" />
           </button>
         )}
       </div>