@blaze-cms/react-page-builder 0.141.0-core-styles.22 → 0.141.0-core-styles.23

package/lib-es/components/Video/providers/get-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-provider.js","names":["dynamic","SUPPORTED_PROVIDERS","youtube","JWPlayer","vimeo","default","getProvider","provider"],"sources":["../../../../src/components/Video/providers/get-provider.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst SUPPORTED_PROVIDERS = {\n  youtube: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVideoYouTube\" */ './YouTube/YouTubeProvider')\n  ),\n  JWPlayer: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVideoJWPlayer\" */ './JWPlayer/JWPlayerProvider')\n  ),\n  vimeo: dynamic(() => import(/* webpackChunkName: \"blazePbVideoVimeo\" */ './Vimeo/VimeoProvider')),\n  default: dynamic(() => import(/* webpackChunkName: \"blazePbVideoDefault\" */ './Default'))\n};\n\nfunction getProvider(provider) {\n  return SUPPORTED_PROVIDERS[provider] || SUPPORTED_PROVIDERS.default;\n}\n\nexport default getProvider;\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,mBAAmB,GAAG;EAC1BC,OAAO,EAAEF,OAAO,CAAC,MACf,MAAM,EAAC,6CAA8C,2BAA2B,CAClF,CAAC;EACDG,QAAQ,EAAEH,OAAO,CAAC,MAChB,MAAM,EAAC,8CAA+C,6BAA6B,CACrF,CAAC;EACDI,KAAK,EAAEJ,OAAO,CAAC,MAAM,MAAM,EAAC,2CAA4C,uBAAuB,CAAC,CAAC;EACjGK,OAAO,EAAEL,OAAO,CAAC,MAAM,MAAM,EAAC,6CAA8C,WAAW,CAAC;AAC1F,CAAC;AAED,SAASM,WAAWA,CAACC,QAAQ,EAAE;EAC7B,OAAON,mBAAmB,CAACM,QAAQ,CAAC,IAAIN,mBAAmB,CAACI,OAAO;AACrE;AAEA,eAAeC,WAAW"}
+{"version":3,"file":"get-provider.js","names":["dynamic","SUPPORTED_PROVIDERS","youtube","JWPlayer","vimeo","default","html","getProvider","provider"],"sources":["../../../../src/components/Video/providers/get-provider.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst SUPPORTED_PROVIDERS = {\n  youtube: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVideoYouTube\" */ './YouTube/YouTubeProvider')\n  ),\n  JWPlayer: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVideoJWPlayer\" */ './JWPlayer/JWPlayerProvider')\n  ),\n  vimeo: dynamic(() => import(/* webpackChunkName: \"blazePbVideoVimeo\" */ './Vimeo/VimeoProvider')),\n  default: dynamic(() => import(/* webpackChunkName: \"blazePbVideoDefault\" */ './Default')),\n  html: dynamic(() => import(/* webpackChunkName: \"blazePbVideoDefault\" */ './Default'))\n};\n\nfunction getProvider(provider) {\n  return SUPPORTED_PROVIDERS[provider] || SUPPORTED_PROVIDERS.default;\n}\n\nexport default getProvider;\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,mBAAmB,GAAG;EAC1BC,OAAO,EAAEF,OAAO,CAAC,MACf,MAAM,EAAC,6CAA8C,2BAA2B,CAClF,CAAC;EACDG,QAAQ,EAAEH,OAAO,CAAC,MAChB,MAAM,EAAC,8CAA+C,6BAA6B,CACrF,CAAC;EACDI,KAAK,EAAEJ,OAAO,CAAC,MAAM,MAAM,EAAC,2CAA4C,uBAAuB,CAAC,CAAC;EACjGK,OAAO,EAAEL,OAAO,CAAC,MAAM,MAAM,EAAC,6CAA8C,WAAW,CAAC,CAAC;EACzFM,IAAI,EAAEN,OAAO,CAAC,MAAM,MAAM,EAAC,6CAA8C,WAAW,CAAC;AACvF,CAAC;AAED,SAASO,WAAWA,CAACC,QAAQ,EAAE;EAC7B,OAAOP,mBAAmB,CAACO,QAAQ,CAAC,IAAIP,mBAAmB,CAACI,OAAO;AACrE;AAEA,eAAeE,WAAW"}

package/lib-es/hooks/helpers/getVariant.js.map

@@ -1 +1 @@
-{"version":3,"file":"getVariant.js","names":["variantHandler","getVariant","settings","variant","VariantComponent","getSettings","get","variantSettings"],"sources":["../../../src/hooks/helpers/getVariant.js"],"sourcesContent":["import { variantHandler } from '../../utils';\n\nexport default function getVariant(settings) {\n  const { variant } = settings;\n  if (!variant) return [null, {}];\n  const { VariantComponent, getSettings } = variantHandler.get(variant) || {};\n  const variantSettings =\n    !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;\n\n  return [VariantComponent, variantSettings];\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,aAAa;AAE5C,eAAe,SAASC,UAAUA,CAACC,QAAQ,EAAE;EAC3C,MAAM;IAAEC;EAAQ,CAAC,GAAGD,QAAQ;EAC5B,IAAI,CAACC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;EAC/B,MAAM;IAAEC,gBAAgB;IAAEC;EAAY,CAAC,GAAGL,cAAc,CAACM,GAAG,CAACH,OAAO,CAAC,IAAI,CAAC,CAAC;EAC3E,MAAMI,eAAe,GACnB,CAAC,CAACF,WAAW,IAAI,OAAOA,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACH,QAAQ,CAAC,GAAGA,QAAQ;EAEvF,OAAO,CAACE,gBAAgB,EAAEG,eAAe,CAAC;AAC5C"}
+{"version":3,"file":"getVariant.js","names":["variantHandler","getVariant","settings","variant","VariantComponent","getSettings","get","variantSettings"],"sources":["../../../src/hooks/helpers/getVariant.js"],"sourcesContent":["import { variantHandler } from '../../utils';\n\nexport default function getVariant(settings) {\n  const { variant } = settings;\n  if (!variant) return [null, {}];\n\n  const { VariantComponent, getSettings } = variantHandler.get(variant) || {};\n  const variantSettings =\n    !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;\n\n  return [VariantComponent, variantSettings];\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,aAAa;AAE5C,eAAe,SAASC,UAAUA,CAACC,QAAQ,EAAE;EAC3C,MAAM;IAAEC;EAAQ,CAAC,GAAGD,QAAQ;EAC5B,IAAI,CAACC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;EAE/B,MAAM;IAAEC,gBAAgB;IAAEC;EAAY,CAAC,GAAGL,cAAc,CAACM,GAAG,CAACH,OAAO,CAAC,IAAI,CAAC,CAAC;EAC3E,MAAMI,eAAe,GACnB,CAAC,CAACF,WAAW,IAAI,OAAOA,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACH,QAAQ,CAAC,GAAGA,QAAQ;EAEvF,OAAO,CAACE,gBAAgB,EAAEG,eAAe,CAAC;AAC5C"}

package/lib-es/utils/variant-handler.js

@@ -13,7 +13,8 @@ function variantMapHandler() {
   }
   function validate(key, variant) {
     if (!key || !variant) throw new BlazeError('Variant requires key and component');
-    if (variants.has(key) && key !== 'array') throw new BlazeError(`Variant already exists`);
+    // eslint-disable-next-line no-console
+    if (variants.has(key) && key !== 'array') console.warn(`Variant already exists: ${key}`); // todo: restore error // throw new BlazeError(`Variant already exists: ${key}`);
   }
   return {
     add,

package/lib-es/utils/variant-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"variant-handler.js","names":["BlazeError","variantMapHandler","variants","Map","get","key","getAll","Array","from","entries","add","variant","validate","set","has","variantHandler"],"sources":["../../src/utils/variant-handler.js"],"sourcesContent":["import { BlazeError } from '@blaze-cms/core-errors';\n\nfunction variantMapHandler() {\n  const variants = new Map();\n\n  function get(key) {\n    return variants.get(key);\n  }\n\n  function getAll() {\n    return Array.from(variants.entries());\n  }\n\n  function add(key, variant) {\n    validate(key, variant);\n    variants.set(key, variant);\n  }\n\n  function validate(key, variant) {\n    if (!key || !variant) throw new BlazeError('Variant requires key and component');\n    if (variants.has(key) && key !== 'array') throw new BlazeError(`Variant already exists`);\n  }\n\n  return {\n    add,\n    get,\n    getAll\n  };\n}\n\nconst variantHandler = variantMapHandler();\n\nexport default variantHandler;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,MAAMC,QAAQ,GAAG,IAAIC,GAAG,CAAC,CAAC;EAE1B,SAASC,GAAGA,CAACC,GAAG,EAAE;IAChB,OAAOH,QAAQ,CAACE,GAAG,CAACC,GAAG,CAAC;EAC1B;EAEA,SAASC,MAAMA,CAAA,EAAG;IAChB,OAAOC,KAAK,CAACC,IAAI,CAACN,QAAQ,CAACO,OAAO,CAAC,CAAC,CAAC;EACvC;EAEA,SAASC,GAAGA,CAACL,GAAG,EAAEM,OAAO,EAAE;IACzBC,QAAQ,CAACP,GAAG,EAAEM,OAAO,CAAC;IACtBT,QAAQ,CAACW,GAAG,CAACR,GAAG,EAAEM,OAAO,CAAC;EAC5B;EAEA,SAASC,QAAQA,CAACP,GAAG,EAAEM,OAAO,EAAE;IAC9B,IAAI,CAACN,GAAG,IAAI,CAACM,OAAO,EAAE,MAAM,IAAIX,UAAU,CAAC,oCAAoC,CAAC;IAChF,IAAIE,QAAQ,CAACY,GAAG,CAACT,GAAG,CAAC,IAAIA,GAAG,KAAK,OAAO,EAAE,MAAM,IAAIL,UAAU,CAAE,wBAAuB,CAAC;EAC1F;EAEA,OAAO;IACLU,GAAG;IACHN,GAAG;IACHE;EACF,CAAC;AACH;AAEA,MAAMS,cAAc,GAAGd,iBAAiB,CAAC,CAAC;AAE1C,eAAec,cAAc"}
+{"version":3,"file":"variant-handler.js","names":["BlazeError","variantMapHandler","variants","Map","get","key","getAll","Array","from","entries","add","variant","validate","set","has","console","warn","variantHandler"],"sources":["../../src/utils/variant-handler.js"],"sourcesContent":["import { BlazeError } from '@blaze-cms/core-errors';\n\nfunction variantMapHandler() {\n  const variants = new Map();\n\n  function get(key) {\n    return variants.get(key);\n  }\n\n  function getAll() {\n    return Array.from(variants.entries());\n  }\n\n  function add(key, variant) {\n    validate(key, variant);\n    variants.set(key, variant);\n  }\n\n  function validate(key, variant) {\n    if (!key || !variant) throw new BlazeError('Variant requires key and component');\n    // eslint-disable-next-line no-console\n    if (variants.has(key) && key !== 'array') console.warn(`Variant already exists: ${key}`); // todo: restore error // throw new BlazeError(`Variant already exists: ${key}`);\n  }\n\n  return {\n    add,\n    get,\n    getAll\n  };\n}\n\nconst variantHandler = variantMapHandler();\n\nexport default variantHandler;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,MAAMC,QAAQ,GAAG,IAAIC,GAAG,CAAC,CAAC;EAE1B,SAASC,GAAGA,CAACC,GAAG,EAAE;IAChB,OAAOH,QAAQ,CAACE,GAAG,CAACC,GAAG,CAAC;EAC1B;EAEA,SAASC,MAAMA,CAAA,EAAG;IAChB,OAAOC,KAAK,CAACC,IAAI,CAACN,QAAQ,CAACO,OAAO,CAAC,CAAC,CAAC;EACvC;EAEA,SAASC,GAAGA,CAACL,GAAG,EAAEM,OAAO,EAAE;IACzBC,QAAQ,CAACP,GAAG,EAAEM,OAAO,CAAC;IACtBT,QAAQ,CAACW,GAAG,CAACR,GAAG,EAAEM,OAAO,CAAC;EAC5B;EAEA,SAASC,QAAQA,CAACP,GAAG,EAAEM,OAAO,EAAE;IAC9B,IAAI,CAACN,GAAG,IAAI,CAACM,OAAO,EAAE,MAAM,IAAIX,UAAU,CAAC,oCAAoC,CAAC;IAChF;IACA,IAAIE,QAAQ,CAACY,GAAG,CAACT,GAAG,CAAC,IAAIA,GAAG,KAAK,OAAO,EAAEU,OAAO,CAACC,IAAI,CAAE,2BAA0BX,GAAI,EAAC,CAAC,CAAC,CAAC;EAC5F;EAEA,OAAO;IACLK,GAAG;IACHN,GAAG;IACHE;EACF,CAAC;AACH;AAEA,MAAMW,cAAc,GAAGhB,iBAAiB,CAAC,CAAC;AAE1C,eAAegB,cAAc"}

package/lib-es/variants/HeroImage/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; }
+const HeroImage = {
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    modifier: 'hero-image'
+  })
+};
+export default HeroImage;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HeroImage","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/HeroImage/index.js"],"sourcesContent":["const HeroImage = {\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    modifier: 'hero-image'\n  })\n};\n\nexport default HeroImage;\n"],"mappings":";;;AAAA,MAAMA,SAAS,GAAG;EAChBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAY;AAE1B,CAAC;AAED,eAAeJ,SAAS"}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import useInfographic from './useInfographic';
+const Infographic = props => {
+  const {
+    contentRef,
+    id,
+    className,
+    tabId,
+    children
+  } = useInfographic(props);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    id: id,
+    className: className,
+    role: "tabpanel",
+    "aria-labelledby": tabId
+  }, children);
+};
+export default Infographic;
+//# sourceMappingURL=Infographic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Infographic.js","names":["React","useInfographic","Infographic","props","contentRef","id","className","tabId","children","createElement","ref","role"],"sources":["../../../src/variants/Infographic/Infographic.js"],"sourcesContent":["import React from 'react';\nimport useInfographic from './useInfographic';\n\nconst Infographic = props => {\n  const { contentRef, id, className, tabId, children } = useInfographic(props);\n\n  return (\n    <div ref={contentRef} id={id} className={className} role=\"tabpanel\" aria-labelledby={tabId}>\n      {children}\n    </div>\n  );\n};\n\nexport default Infographic;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IAAEC,UAAU;IAAEC,EAAE;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGP,cAAc,CAACE,KAAK,CAAC;EAE5E,oBACEH,KAAA,CAAAS,aAAA;IAAKC,GAAG,EAAEN,UAAW;IAACC,EAAE,EAAEA,EAAG;IAACC,SAAS,EAAEA,SAAU;IAACK,IAAI,EAAC,UAAU;IAAC,mBAAiBJ;EAAM,GACxFC,QACE,CAAC;AAEV,CAAC;AAED,eAAeN,WAAW"}

package/lib-es/variants/Infographic/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 dynamic from 'next/dynamic';
+const Infographic = {
+  getSettings: componentSettings => _objectSpread({}, componentSettings),
+  VariantComponent: dynamic(() => import( /* webpackChunkName: "blazePbVariantInfographic" */'./Infographic'))
+};
+export default Infographic;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["dynamic","Infographic","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/Infographic/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst Infographic = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantInfographic\" */ './Infographic')\n  )\n};\n\nexport default Infographic;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,WAAW,GAAG;EAClBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,EAAC,mDAAoD,eAAe,CAC5E;AACF,CAAC;AAED,eAAeC,WAAW"}

package/lib-es/variants/Infographic/useInfographic.js

@@ -0,0 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["className"];
+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 { useInView } from '@blaze-react/utils/lib/customHooks';
+const useInfographic = _ref => {
+  let {
+      className: _className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [isIntersecting, contentRef] = useInView({
+    once: true,
+    offset: '200px'
+  });
+  const className = `${_className} infographic${isIntersecting ? ' infographic__active' : ''}`;
+  return _objectSpread(_objectSpread({}, props), {}, {
+    className,
+    contentRef
+  });
+};
+export default useInfographic;
+//# sourceMappingURL=useInfographic.js.map

package/lib-es/variants/Infographic/useInfographic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfographic.js","names":["useInView","useInfographic","_ref","className","_className","props","_objectWithoutProperties","_excluded","isIntersecting","contentRef","once","offset","_objectSpread"],"sources":["../../../src/variants/Infographic/useInfographic.js"],"sourcesContent":["import { useInView } from '@blaze-react/utils/lib/customHooks';\n\nconst useInfographic = ({ className: _className, ...props }) => {\n  const [isIntersecting, contentRef] = useInView({\n    once: true,\n    offset: '200px'\n  });\n\n  const className = `${_className} infographic${isIntersecting ? ' infographic__active' : ''}`;\n\n  return {\n    ...props,\n    className,\n    contentRef\n  };\n};\n\nexport default useInfographic;\n"],"mappings":";;;;;AAAA,SAASA,SAAS,QAAQ,oCAAoC;AAE9D,MAAMC,cAAc,GAAGC,IAAA,IAAyC;EAAA,IAAxC;MAAEC,SAAS,EAAEC;IAAqB,CAAC,GAAAF,IAAA;IAAPG,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACvD,MAAM,CAACC,cAAc,EAAEC,UAAU,CAAC,GAAGT,SAAS,CAAC;IAC7CU,IAAI,EAAE,IAAI;IACVC,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,MAAMR,SAAS,GAAI,GAAEC,UAAW,eAAcI,cAAc,GAAG,sBAAsB,GAAG,EAAG,EAAC;EAE5F,OAAAI,aAAA,CAAAA,aAAA,KACKP,KAAK;IACRF,SAAS;IACTM;EAAU;AAEd,CAAC;AAED,eAAeR,cAAc"}

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { withTitle } from '../../HOC';
+import useLongformGallery from './useLongformGallery';
+import LongformGalleryImage from './LongformGalleryImage';
+const LongformGallery = props => {
+  const {
+    loading,
+    error,
+    groupedImages,
+    shouldDisplayCaption,
+    caption,
+    handleImageOnClick
+  } = useLongformGallery(props);
+  if (loading || error || !groupedImages.length) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "longform-gallery",
+    "data-testid": "longform-gallery"
+  }, groupedImages.map((imageGroup, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement("div", {
+    key: i,
+    "data-testid": "grouped-images",
+    className: "longform-gallery__images"
+  }, imageGroup.map(secondaryImage => /*#__PURE__*/React.createElement(LongformGalleryImage, _extends({
+    key: secondaryImage.id
+  }, secondaryImage, {
+    numberOfImages: imageGroup.length,
+    className: imageGroup.length > 2 ? 'longform-gallery__images__image secondary-image' : 'longform-gallery__images__image main-image',
+    handleImageOnClick: handleImageOnClick
+  }))))), shouldDisplayCaption && /*#__PURE__*/React.createElement("div", {
+    className: "carousel__details",
+    "data-testid": "carousel-details"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "caption"
+  }, caption)));
+};
+export default withTitle(LongformGallery);
+//# sourceMappingURL=LongformGallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LongformGallery.js","names":["React","withTitle","useLongformGallery","LongformGalleryImage","LongformGallery","props","loading","error","groupedImages","shouldDisplayCaption","caption","handleImageOnClick","length","createElement","className","map","imageGroup","i","key","secondaryImage","_extends","id","numberOfImages"],"sources":["../../../src/variants/LongformGallery/LongformGallery.js"],"sourcesContent":["import React from 'react';\nimport { withTitle } from '../../HOC';\nimport useLongformGallery from './useLongformGallery';\nimport LongformGalleryImage from './LongformGalleryImage';\n\nconst LongformGallery = props => {\n  const {\n    loading,\n    error,\n    groupedImages,\n    shouldDisplayCaption,\n    caption,\n    handleImageOnClick\n  } = useLongformGallery(props);\n\n  if (loading || error || !groupedImages.length) return null;\n\n  return (\n    <div className=\"longform-gallery\" data-testid=\"longform-gallery\">\n      {groupedImages.map((imageGroup, i) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <div key={i} data-testid=\"grouped-images\" className=\"longform-gallery__images\">\n          {imageGroup.map(secondaryImage => (\n            <LongformGalleryImage\n              key={secondaryImage.id}\n              {...secondaryImage}\n              numberOfImages={imageGroup.length}\n              className={\n                imageGroup.length > 2\n                  ? 'longform-gallery__images__image secondary-image'\n                  : 'longform-gallery__images__image main-image'\n              }\n              handleImageOnClick={handleImageOnClick}\n            />\n          ))}\n        </div>\n      ))}\n      {shouldDisplayCaption && (\n        <div className=\"carousel__details\" data-testid=\"carousel-details\">\n          <div className=\"caption\">{caption}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default withTitle(LongformGallery);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,WAAW;AACrC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,MAAMC,eAAe,GAAGC,KAAK,IAAI;EAC/B,MAAM;IACJC,OAAO;IACPC,KAAK;IACLC,aAAa;IACbC,oBAAoB;IACpBC,OAAO;IACPC;EACF,CAAC,GAAGT,kBAAkB,CAACG,KAAK,CAAC;EAE7B,IAAIC,OAAO,IAAIC,KAAK,IAAI,CAACC,aAAa,CAACI,MAAM,EAAE,OAAO,IAAI;EAE1D,oBACEZ,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,kBAAkB;IAAC,eAAY;EAAkB,GAC7DN,aAAa,CAACO,GAAG,CAAC,CAACC,UAAU,EAAEC,CAAC;EAAA;EAC/B;EACAjB,KAAA,CAAAa,aAAA;IAAKK,GAAG,EAAED,CAAE;IAAC,eAAY,gBAAgB;IAACH,SAAS,EAAC;EAA0B,GAC3EE,UAAU,CAACD,GAAG,CAACI,cAAc,iBAC5BnB,KAAA,CAAAa,aAAA,CAACV,oBAAoB,EAAAiB,QAAA;IACnBF,GAAG,EAAEC,cAAc,CAACE;EAAG,GACnBF,cAAc;IAClBG,cAAc,EAAEN,UAAU,CAACJ,MAAO;IAClCE,SAAS,EACPE,UAAU,CAACJ,MAAM,GAAG,CAAC,GACjB,iDAAiD,GACjD,4CACL;IACDD,kBAAkB,EAAEA;EAAmB,EACxC,CACF,CACE,CACN,CAAC,EACDF,oBAAoB,iBACnBT,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAC,eAAY;EAAkB,gBAC/Dd,KAAA,CAAAa,aAAA;IAAKC,SAAS,EAAC;EAAS,GAAEJ,OAAa,CACpC,CAEJ,CAAC;AAEV,CAAC;AAED,eAAeT,SAAS,CAACG,eAAe,CAAC"}

package/lib-es/variants/LongformGallery/LongformGalleryImage.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["id", "url", "caption", "altText", "priority", "className", "numberOfImages", "handleImageOnClick"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+import { useInView } from '@blaze-react/utils/lib/customHooks';
+import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import { IN_VIEW_CONFIG } from './constants';
+const LongformGalleryImage = _ref => {
+  let {
+      id,
+      url,
+      caption,
+      altText,
+      priority,
+      className,
+      numberOfImages,
+      handleImageOnClick
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
+  const shouldRender = priority || isIntersecting;
+  const HeadComponent = priority ? Head : null;
+  const sizeKey = `carousel:longform:${numberOfImages}`;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: outerRef,
+    className: `${className}`
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "longform-gallery__images__image__container",
+    "data-testid": "longform-gallery__images__image__container",
+    onClick: () => handleImageOnClick(id)
+  }, shouldRender && /*#__PURE__*/React.createElement(ResponsiveImage, _extends({
+    sizeKey: sizeKey,
+    role: "button",
+    src: url,
+    alt: altText,
+    priority: priority,
+    HeadComponent: HeadComponent
+  }, props))), !!caption && /*#__PURE__*/React.createElement("div", {
+    className: "longform-gallery__images__image__details",
+    "data-testid": "longform-gallery__images__image__details"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "longform-gallery__images__image__details__caption"
+  }, caption)));
+};
+LongformGalleryImage.propTypes = {
+  id: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  caption: PropTypes.string.isRequired,
+  numberOfImages: PropTypes.number.isRequired,
+  altText: PropTypes.string.isRequired,
+  priority: PropTypes.bool.isRequired,
+  className: PropTypes.string.isRequired,
+  handleImageOnClick: PropTypes.func.isRequired
+};
+export default LongformGalleryImage;
+//# sourceMappingURL=LongformGalleryImage.js.map

package/lib-es/variants/LongformGallery/LongformGalleryImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LongformGalleryImage.js","names":["React","PropTypes","Head","useInView","ResponsiveImage","IN_VIEW_CONFIG","LongformGalleryImage","_ref","id","url","caption","altText","priority","className","numberOfImages","handleImageOnClick","props","_objectWithoutProperties","_excluded","isIntersecting","outerRef","shouldRender","HeadComponent","sizeKey","createElement","ref","role","onClick","_extends","src","alt","propTypes","string","isRequired","number","bool","func"],"sources":["../../../src/variants/LongformGallery/LongformGalleryImage.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Head from 'next/head';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { ResponsiveImage } from '@blaze-cms/image-cdn-react';\nimport { IN_VIEW_CONFIG } from './constants';\n\nconst LongformGalleryImage = ({\n  id,\n  url,\n  caption,\n  altText,\n  priority,\n  className,\n  numberOfImages,\n  handleImageOnClick,\n  ...props\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const shouldRender = priority || isIntersecting;\n  const HeadComponent = priority ? Head : null;\n  const sizeKey = `carousel:longform:${numberOfImages}`;\n\n  return (\n    <div ref={outerRef} className={`${className}`}>\n      <div\n        role=\"button\"\n        className=\"longform-gallery__images__image__container\"\n        data-testid=\"longform-gallery__images__image__container\"\n        onClick={() => handleImageOnClick(id)}>\n        {shouldRender && (\n          <ResponsiveImage\n            sizeKey={sizeKey}\n            role=\"button\"\n            src={url}\n            alt={altText}\n            priority={priority}\n            HeadComponent={HeadComponent}\n            {...props}\n          />\n        )}\n      </div>\n      {!!caption && (\n        <div\n          className=\"longform-gallery__images__image__details\"\n          data-testid=\"longform-gallery__images__image__details\">\n          <div className=\"longform-gallery__images__image__details__caption\">{caption}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nLongformGalleryImage.propTypes = {\n  id: PropTypes.string.isRequired,\n  url: PropTypes.string.isRequired,\n  caption: PropTypes.string.isRequired,\n  numberOfImages: PropTypes.number.isRequired,\n  altText: PropTypes.string.isRequired,\n  priority: PropTypes.bool.isRequired,\n  className: PropTypes.string.isRequired,\n  handleImageOnClick: PropTypes.func.isRequired\n};\n\nexport default LongformGalleryImage;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,WAAW;AAC5B,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,cAAc,QAAQ,aAAa;AAE5C,MAAMC,oBAAoB,GAAGC,IAAA,IAUvB;EAAA,IAVwB;MAC5BC,EAAE;MACFC,GAAG;MACHC,OAAO;MACPC,OAAO;MACPC,QAAQ;MACRC,SAAS;MACTC,cAAc;MACdC;IAEF,CAAC,GAAAR,IAAA;IADIS,KAAK,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAER,MAAM,CAACC,cAAc,EAAEC,QAAQ,CAAC,GAAGjB,SAAS,CAACE,cAAc,CAAC;EAC5D,MAAMgB,YAAY,GAAGT,QAAQ,IAAIO,cAAc;EAC/C,MAAMG,aAAa,GAAGV,QAAQ,GAAGV,IAAI,GAAG,IAAI;EAC5C,MAAMqB,OAAO,GAAI,qBAAoBT,cAAe,EAAC;EAErD,oBACEd,KAAA,CAAAwB,aAAA;IAAKC,GAAG,EAAEL,QAAS;IAACP,SAAS,EAAG,GAAEA,SAAU;EAAE,gBAC5Cb,KAAA,CAAAwB,aAAA;IACEE,IAAI,EAAC,QAAQ;IACbb,SAAS,EAAC,4CAA4C;IACtD,eAAY,4CAA4C;IACxDc,OAAO,EAAEA,CAAA,KAAMZ,kBAAkB,CAACP,EAAE;EAAE,GACrCa,YAAY,iBACXrB,KAAA,CAAAwB,aAAA,CAACpB,eAAe,EAAAwB,QAAA;IACdL,OAAO,EAAEA,OAAQ;IACjBG,IAAI,EAAC,QAAQ;IACbG,GAAG,EAAEpB,GAAI;IACTqB,GAAG,EAAEnB,OAAQ;IACbC,QAAQ,EAAEA,QAAS;IACnBU,aAAa,EAAEA;EAAc,GACzBN,KAAK,CACV,CAEA,CAAC,EACL,CAAC,CAACN,OAAO,iBACRV,KAAA,CAAAwB,aAAA;IACEX,SAAS,EAAC,0CAA0C;IACpD,eAAY;EAA0C,gBACtDb,KAAA,CAAAwB,aAAA;IAAKX,SAAS,EAAC;EAAmD,GAAEH,OAAa,CAC9E,CAEJ,CAAC;AAEV,CAAC;AAEDJ,oBAAoB,CAACyB,SAAS,GAAG;EAC/BvB,EAAE,EAAEP,SAAS,CAAC+B,MAAM,CAACC,UAAU;EAC/BxB,GAAG,EAAER,SAAS,CAAC+B,MAAM,CAACC,UAAU;EAChCvB,OAAO,EAAET,SAAS,CAAC+B,MAAM,CAACC,UAAU;EACpCnB,cAAc,EAAEb,SAAS,CAACiC,MAAM,CAACD,UAAU;EAC3CtB,OAAO,EAAEV,SAAS,CAAC+B,MAAM,CAACC,UAAU;EACpCrB,QAAQ,EAAEX,SAAS,CAACkC,IAAI,CAACF,UAAU;EACnCpB,SAAS,EAAEZ,SAAS,CAAC+B,MAAM,CAACC,UAAU;EACtClB,kBAAkB,EAAEd,SAAS,CAACmC,IAAI,CAACH;AACrC,CAAC;AAED,eAAe3B,oBAAoB"}

package/lib-es/variants/LongformGallery/constants.js

@@ -0,0 +1,18 @@
+import { gql } from '@apollo/client';
+const GET_IMAGES_QUERY = gql`
+  query getImages($where: JSON!) {
+    getImages: getFiles(where: $where) {
+      id
+      url
+      data
+    }
+  }
+`;
+const PROPS_TO_CHECK = ['altText', 'caption', 'hrefUrl', 'credits'];
+const IN_VIEW_CONFIG = {
+  once: true,
+  offset: '200px',
+  bottomOffset: '-200px'
+};
+export { GET_IMAGES_QUERY, IN_VIEW_CONFIG, PROPS_TO_CHECK };
+//# sourceMappingURL=constants.js.map

package/lib-es/variants/LongformGallery/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["gql","GET_IMAGES_QUERY","PROPS_TO_CHECK","IN_VIEW_CONFIG","once","offset","bottomOffset"],"sources":["../../../src/variants/LongformGallery/constants.js"],"sourcesContent":["import { gql } from '@apollo/client';\n\nconst GET_IMAGES_QUERY = gql`\n  query getImages($where: JSON!) {\n    getImages: getFiles(where: $where) {\n      id\n      url\n      data\n    }\n  }\n`;\n\nconst PROPS_TO_CHECK = ['altText', 'caption', 'hrefUrl', 'credits'];\n\nconst IN_VIEW_CONFIG = {\n  once: true,\n  offset: '200px',\n  bottomOffset: '-200px'\n};\n\nexport { GET_IMAGES_QUERY, IN_VIEW_CONFIG, PROPS_TO_CHECK };\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,gBAAgB,GAAGD,GAAI;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAME,cAAc,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAEnE,MAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE,IAAI;EACVC,MAAM,EAAE,OAAO;EACfC,YAAY,EAAE;AAChB,CAAC;AAED,SAASL,gBAAgB,EAAEE,cAAc,EAAED,cAAc"}

package/lib-es/variants/LongformGallery/helpers/index.js

@@ -0,0 +1,5 @@
+import parseImageData from './parseImageData';
+import separateImages from './separateImages';
+import shouldSkip from './shouldSkip';
+export { parseImageData, separateImages, shouldSkip };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["parseImageData","separateImages","shouldSkip"],"sources":["../../../../src/variants/LongformGallery/helpers/index.js"],"sourcesContent":["import parseImageData from './parseImageData';\nimport separateImages from './separateImages';\nimport shouldSkip from './shouldSkip';\n\nexport { parseImageData, separateImages, shouldSkip };\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,UAAU,MAAM,cAAc;AAErC,SAASF,cAAc,EAAEC,cAAc,EAAEC,UAAU"}

package/lib-es/variants/LongformGallery/helpers/parseImageData.js

@@ -0,0 +1,26 @@
+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 parseHTML from 'html-react-parser';
+import { PROPS_TO_CHECK } from '../constants';
+const parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {
+  const {
+    data = {}
+  } = image;
+  const parsedData = {};
+  PROPS_TO_CHECK.forEach(dataKey => {
+    const value = data && data[dataKey];
+    if (dataKey === 'caption') {
+      parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';
+      return;
+    }
+    parsedData[dataKey] = value || '';
+  });
+  return _objectSpread(_objectSpread({}, parsedData), {}, {
+    id: image.id,
+    url: image.url,
+    priority: index < priorityLimit
+  });
+};
+export default parseImageData;
+//# sourceMappingURL=parseImageData.js.map

package/lib-es/variants/LongformGallery/helpers/parseImageData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseImageData.js","names":["parseHTML","PROPS_TO_CHECK","parseImageData","image","index","priorityLimit","shouldDisplayCaption","data","parsedData","forEach","dataKey","value","_objectSpread","id","url","priority"],"sources":["../../../../src/variants/LongformGallery/helpers/parseImageData.js"],"sourcesContent":["import parseHTML from 'html-react-parser';\nimport { PROPS_TO_CHECK } from '../constants';\n\nconst parseImageData = (image, index, priorityLimit, shouldDisplayCaption) => {\n  const { data = {} } = image;\n  const parsedData = {};\n\n  PROPS_TO_CHECK.forEach(dataKey => {\n    const value = data && data[dataKey];\n    if (dataKey === 'caption') {\n      parsedData[dataKey] = shouldDisplayCaption && !!value ? parseHTML(value) : '';\n      return;\n    }\n    parsedData[dataKey] = value || '';\n  });\n\n  return {\n    ...parsedData,\n    id: image.id,\n    url: image.url,\n    priority: index < priorityLimit\n  };\n};\n\nexport default parseImageData;\n"],"mappings":";;;AAAA,OAAOA,SAAS,MAAM,mBAAmB;AACzC,SAASC,cAAc,QAAQ,cAAc;AAE7C,MAAMC,cAAc,GAAGA,CAACC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EAC5E,MAAM;IAAEC,IAAI,GAAG,CAAC;EAAE,CAAC,GAAGJ,KAAK;EAC3B,MAAMK,UAAU,GAAG,CAAC,CAAC;EAErBP,cAAc,CAACQ,OAAO,CAACC,OAAO,IAAI;IAChC,MAAMC,KAAK,GAAGJ,IAAI,IAAIA,IAAI,CAACG,OAAO,CAAC;IACnC,IAAIA,OAAO,KAAK,SAAS,EAAE;MACzBF,UAAU,CAACE,OAAO,CAAC,GAAGJ,oBAAoB,IAAI,CAAC,CAACK,KAAK,GAAGX,SAAS,CAACW,KAAK,CAAC,GAAG,EAAE;MAC7E;IACF;IACAH,UAAU,CAACE,OAAO,CAAC,GAAGC,KAAK,IAAI,EAAE;EACnC,CAAC,CAAC;EAEF,OAAAC,aAAA,CAAAA,aAAA,KACKJ,UAAU;IACbK,EAAE,EAAEV,KAAK,CAACU,EAAE;IACZC,GAAG,EAAEX,KAAK,CAACW,GAAG;IACdC,QAAQ,EAAEX,KAAK,GAAGC;EAAa;AAEnC,CAAC;AAED,eAAeH,cAAc"}

package/lib-es/variants/LongformGallery/helpers/separateImages.js

@@ -0,0 +1,25 @@
+import parseImageData from './parseImageData';
+const buildImageGroups = (images, priorityLimit, shouldDisplayCaption) => {
+  const imageGroups = [];
+  let imageGroupIndex = 0;
+  const isDivisible = images.length % 3 === 0;
+  images.forEach((image, index) => {
+    if (!imageGroups[imageGroupIndex]) imageGroups[imageGroupIndex] = [parseImageData(image, index, priorityLimit, shouldDisplayCaption)];else imageGroups[imageGroupIndex].push(parseImageData(image, index, priorityLimit, shouldDisplayCaption));
+    if (isDivisible) {
+      if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;
+    } else {
+      if (imageGroupIndex === 0 && imageGroups[imageGroupIndex].length >= 2) {
+        imageGroupIndex += 1;
+        return;
+      }
+      if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;
+    }
+  });
+  return imageGroups;
+};
+const separateImages = (images, priorityLimit, shouldDisplayCaption) => {
+  if (!images || !images.length) return [];
+  return buildImageGroups(images, priorityLimit, shouldDisplayCaption);
+};
+export default separateImages;
+//# sourceMappingURL=separateImages.js.map

package/lib-es/variants/LongformGallery/helpers/separateImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separateImages.js","names":["parseImageData","buildImageGroups","images","priorityLimit","shouldDisplayCaption","imageGroups","imageGroupIndex","isDivisible","length","forEach","image","index","push","separateImages"],"sources":["../../../../src/variants/LongformGallery/helpers/separateImages.js"],"sourcesContent":["import parseImageData from './parseImageData';\n\nconst buildImageGroups = (images, priorityLimit, shouldDisplayCaption) => {\n  const imageGroups = [];\n  let imageGroupIndex = 0;\n  const isDivisible = images.length % 3 === 0;\n\n  images.forEach((image, index) => {\n    if (!imageGroups[imageGroupIndex])\n      imageGroups[imageGroupIndex] = [\n        parseImageData(image, index, priorityLimit, shouldDisplayCaption)\n      ];\n    else\n      imageGroups[imageGroupIndex].push(\n        parseImageData(image, index, priorityLimit, shouldDisplayCaption)\n      );\n\n    if (isDivisible) {\n      if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;\n    } else {\n      if (imageGroupIndex === 0 && imageGroups[imageGroupIndex].length >= 2) {\n        imageGroupIndex += 1;\n        return;\n      }\n      if (imageGroups[imageGroupIndex].length >= 3) imageGroupIndex += 1;\n    }\n  });\n\n  return imageGroups;\n};\n\nconst separateImages = (images, priorityLimit, shouldDisplayCaption) => {\n  if (!images || !images.length) return [];\n\n  return buildImageGroups(images, priorityLimit, shouldDisplayCaption);\n};\n\nexport default separateImages;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAE7C,MAAMC,gBAAgB,GAAGA,CAACC,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EACxE,MAAMC,WAAW,GAAG,EAAE;EACtB,IAAIC,eAAe,GAAG,CAAC;EACvB,MAAMC,WAAW,GAAGL,MAAM,CAACM,MAAM,GAAG,CAAC,KAAK,CAAC;EAE3CN,MAAM,CAACO,OAAO,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;IAC/B,IAAI,CAACN,WAAW,CAACC,eAAe,CAAC,EAC/BD,WAAW,CAACC,eAAe,CAAC,GAAG,CAC7BN,cAAc,CAACU,KAAK,EAAEC,KAAK,EAAER,aAAa,EAAEC,oBAAoB,CAAC,CAClE,CAAC,KAEFC,WAAW,CAACC,eAAe,CAAC,CAACM,IAAI,CAC/BZ,cAAc,CAACU,KAAK,EAAEC,KAAK,EAAER,aAAa,EAAEC,oBAAoB,CAClE,CAAC;IAEH,IAAIG,WAAW,EAAE;MACf,IAAIF,WAAW,CAACC,eAAe,CAAC,CAACE,MAAM,IAAI,CAAC,EAAEF,eAAe,IAAI,CAAC;IACpE,CAAC,MAAM;MACL,IAAIA,eAAe,KAAK,CAAC,IAAID,WAAW,CAACC,eAAe,CAAC,CAACE,MAAM,IAAI,CAAC,EAAE;QACrEF,eAAe,IAAI,CAAC;QACpB;MACF;MACA,IAAID,WAAW,CAACC,eAAe,CAAC,CAACE,MAAM,IAAI,CAAC,EAAEF,eAAe,IAAI,CAAC;IACpE;EACF,CAAC,CAAC;EAEF,OAAOD,WAAW;AACpB,CAAC;AAED,MAAMQ,cAAc,GAAGA,CAACX,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,KAAK;EACtE,IAAI,CAACF,MAAM,IAAI,CAACA,MAAM,CAACM,MAAM,EAAE,OAAO,EAAE;EAExC,OAAOP,gBAAgB,CAACC,MAAM,EAAEC,aAAa,EAAEC,oBAAoB,CAAC;AACtE,CAAC;AAED,eAAeS,cAAc"}

package/lib-es/variants/LongformGallery/helpers/shouldSkip.js

@@ -0,0 +1,3 @@
+const shouldSkip = ids => !ids || Array.isArray(ids) && !ids.length;
+export default shouldSkip;
+//# sourceMappingURL=shouldSkip.js.map

package/lib-es/variants/LongformGallery/helpers/shouldSkip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shouldSkip.js","names":["shouldSkip","ids","Array","isArray","length"],"sources":["../../../../src/variants/LongformGallery/helpers/shouldSkip.js"],"sourcesContent":["const shouldSkip = ids => !ids || (Array.isArray(ids) && !ids.length);\n\nexport default shouldSkip;\n"],"mappings":"AAAA,MAAMA,UAAU,GAAGC,GAAG,IAAI,CAACA,GAAG,IAAKC,KAAK,CAACC,OAAO,CAACF,GAAG,CAAC,IAAI,CAACA,GAAG,CAACG,MAAO;AAErE,eAAeJ,UAAU"}

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

@@ -0,0 +1,12 @@
+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 dynamic from 'next/dynamic';
+const LongformGallery = {
+  VariantComponent: dynamic(() => import( /* webpackChunkName: "blazePbVariantLongformGallery" */'./LongformGallery')),
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    modifier: 'longformGallery'
+  })
+};
+export default LongformGallery;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["dynamic","LongformGallery","VariantComponent","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LongformGallery/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst LongformGallery = {\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantLongformGallery\" */ './LongformGallery')\n  ),\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    modifier: 'longformGallery'\n  })\n};\n\nexport default LongformGallery;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,eAAe,GAAG;EACtBC,gBAAgB,EAAEF,OAAO,CAAC,MACxB,MAAM,EAAC,uDAAwD,mBAAmB,CACpF,CAAC;EACDG,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAiB;AAE/B,CAAC;AAED,eAAeL,eAAe"}

package/lib-es/variants/LongformGallery/useLongformGallery.js

@@ -0,0 +1,47 @@
+import { useQuery } from '@apollo/client';
+import { GET_IMAGES_QUERY } from './constants';
+import { separateImages, shouldSkip } from './helpers';
+const useLongformGallery = ({
+  imageIds = [],
+  priorityLimit = 0,
+  caption = '',
+  shouldDisplayCaption = false,
+  enableLightbox = false,
+  toggleModal = () => {},
+  handleSelectedImage = () => {}
+}) => {
+  const skip = shouldSkip(imageIds);
+  const {
+    data,
+    loading,
+    error
+  } = useQuery(GET_IMAGES_QUERY, {
+    variables: {
+      where: {
+        id: {
+          _in: imageIds
+        }
+      }
+    },
+    skip
+  });
+  const {
+    getImages
+  } = data || {};
+  const groupedImages = separateImages(getImages, priorityLimit, shouldDisplayCaption);
+  const handleImageOnClick = clickedImageId => {
+    if (!enableLightbox) return;
+    toggleModal();
+    handleSelectedImage(clickedImageId);
+  };
+  return {
+    loading,
+    error,
+    shouldDisplayCaption,
+    caption,
+    groupedImages,
+    handleImageOnClick
+  };
+};
+export default useLongformGallery;
+//# sourceMappingURL=useLongformGallery.js.map

package/lib-es/variants/LongformGallery/useLongformGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongformGallery.js","names":["useQuery","GET_IMAGES_QUERY","separateImages","shouldSkip","useLongformGallery","imageIds","priorityLimit","caption","shouldDisplayCaption","enableLightbox","toggleModal","handleSelectedImage","skip","data","loading","error","variables","where","id","_in","getImages","groupedImages","handleImageOnClick","clickedImageId"],"sources":["../../../src/variants/LongformGallery/useLongformGallery.js"],"sourcesContent":["import { useQuery } from '@apollo/client';\nimport { GET_IMAGES_QUERY } from './constants';\nimport { separateImages, shouldSkip } from './helpers';\n\nconst useLongformGallery = ({\n  imageIds = [],\n  priorityLimit = 0,\n  caption = '',\n  shouldDisplayCaption = false,\n  enableLightbox = false,\n  toggleModal = () => {},\n  handleSelectedImage = () => {}\n}) => {\n  const skip = shouldSkip(imageIds);\n\n  const { data, loading, error } = useQuery(GET_IMAGES_QUERY, {\n    variables: { where: { id: { _in: imageIds } } },\n    skip\n  });\n\n  const { getImages } = data || {};\n\n  const groupedImages = separateImages(getImages, priorityLimit, shouldDisplayCaption);\n\n  const handleImageOnClick = clickedImageId => {\n    if (!enableLightbox) return;\n    toggleModal();\n    handleSelectedImage(clickedImageId);\n  };\n\n  return {\n    loading,\n    error,\n    shouldDisplayCaption,\n    caption,\n    groupedImages,\n    handleImageOnClick\n  };\n};\n\nexport default useLongformGallery;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,cAAc,EAAEC,UAAU,QAAQ,WAAW;AAEtD,MAAMC,kBAAkB,GAAGA,CAAC;EAC1BC,QAAQ,GAAG,EAAE;EACbC,aAAa,GAAG,CAAC;EACjBC,OAAO,GAAG,EAAE;EACZC,oBAAoB,GAAG,KAAK;EAC5BC,cAAc,GAAG,KAAK;EACtBC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,mBAAmB,GAAGA,CAAA,KAAM,CAAC;AAC/B,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGT,UAAU,CAACE,QAAQ,CAAC;EAEjC,MAAM;IAAEQ,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAACC,gBAAgB,EAAE;IAC1De,SAAS,EAAE;MAAEC,KAAK,EAAE;QAAEC,EAAE,EAAE;UAAEC,GAAG,EAAEd;QAAS;MAAE;IAAE,CAAC;IAC/CO;EACF,CAAC,CAAC;EAEF,MAAM;IAAEQ;EAAU,CAAC,GAAGP,IAAI,IAAI,CAAC,CAAC;EAEhC,MAAMQ,aAAa,GAAGnB,cAAc,CAACkB,SAAS,EAAEd,aAAa,EAAEE,oBAAoB,CAAC;EAEpF,MAAMc,kBAAkB,GAAGC,cAAc,IAAI;IAC3C,IAAI,CAACd,cAAc,EAAE;IACrBC,WAAW,CAAC,CAAC;IACbC,mBAAmB,CAACY,cAAc,CAAC;EACrC,CAAC;EAED,OAAO;IACLT,OAAO;IACPC,KAAK;IACLP,oBAAoB;IACpBD,OAAO;IACPc,aAAa;IACbC;EACF,CAAC;AACH,CAAC;AAED,eAAelB,kBAAkB"}

package/lib-es/variants/LongformRow/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; }
+const LongformRow = {
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    modifier: 'longform-row'
+  })
+};
+export default LongformRow;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LongformRow","getSettings","componentSettings","_objectSpread","modifier"],"sources":["../../../src/variants/LongformRow/index.js"],"sourcesContent":["const LongformRow = {\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    modifier: 'longform-row'\n  })\n};\n\nexport default LongformRow;\n"],"mappings":";;;AAAA,MAAMA,WAAW,GAAG;EAClBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE;EAAc;AAE5B,CAAC;AAED,eAAeJ,WAAW"}

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

@@ -0,0 +1,11 @@
+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; }
+const ParallaxImageTextRight = {
+  getSettings: componentSettings => _objectSpread(_objectSpread({}, componentSettings), {}, {
+    parallax: true,
+    modifier: 'image-children-right'
+  })
+};
+export default ParallaxImageTextRight;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ParallaxImageTextRight","getSettings","componentSettings","_objectSpread","parallax","modifier"],"sources":["../../../src/variants/ParallaxImageTextRight/index.js"],"sourcesContent":["const ParallaxImageTextRight = {\n  getSettings: componentSettings => ({\n    ...componentSettings,\n    parallax: true,\n    modifier: 'image-children-right'\n  })\n};\n\nexport default ParallaxImageTextRight;\n"],"mappings":";;;AAAA,MAAMA,sBAAsB,GAAG;EAC7BC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,CAAAA,aAAA,KACzBD,iBAAiB;IACpBE,QAAQ,EAAE,IAAI;IACdC,QAAQ,EAAE;EAAsB;AAEpC,CAAC;AAED,eAAeL,sBAAsB"}

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

@@ -1,10 +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';
+import dynamic from 'next/dynamic';
 const ThumbnailCarousel = {
   getSettings: componentSettings => _objectSpread({}, componentSettings),
-  VariantComponent: ThumbnailCarouselComponent
+  VariantComponent: dynamic(() => import( /* webpackChunkName: "blazePbVariantThumbnailCarousel" */'./ThumbnailCarousel'))
 };
 export default ThumbnailCarousel;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"version":3,"file":"index.js","names":["dynamic","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantThumbnailCarousel\" */ './ThumbnailCarousel')\n  )\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,EAAC,yDAA0D,qBAAqB,CACxF;AACF,CAAC;AAED,eAAeC,iBAAiB"}

package/lib-es/variants/index.js

@@ -1,5 +1,15 @@
+import heroImage from './HeroImage';
+import infographic from './Infographic';
+import longformGallery from './LongformGallery';
+import longformRow from './LongformRow';
+import parallaxImageTextRight from './ParallaxImageTextRight';
 import thumbnailCarousel from './ThumbnailCarousel';
 export default {
+  heroImage,
+  infographic,
+  longformGallery,
+  longformRow,
+  parallaxImageTextRight,
   thumbnailCarousel
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["heroImage","infographic","longformGallery","longformRow","parallaxImageTextRight","thumbnailCarousel"],"sources":["../../src/variants/index.js"],"sourcesContent":["import heroImage from './HeroImage';\nimport infographic from './Infographic';\nimport longformGallery from './LongformGallery';\nimport longformRow from './LongformRow';\nimport parallaxImageTextRight from './ParallaxImageTextRight';\nimport thumbnailCarousel from './ThumbnailCarousel';\n\nexport default {\n  heroImage,\n  infographic,\n  longformGallery,\n  longformRow,\n  parallaxImageTextRight,\n  thumbnailCarousel\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,eAAe;EACbL,SAAS;EACTC,WAAW;EACXC,eAAe;EACfC,WAAW;EACXC,sBAAsB;EACtBC;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.141.0-core-styles.22",
+  "version": "0.141.0-core-styles.23",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "5c47857c58e770d9533e569522053fa587f41a38"
+  "gitHead": "d9d2e56511f87e137bad4f0010ad520a00dfba7c"
 }

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { getActiveTab } from './helpers';
 import { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';
 
-const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sectionsData }) => {
+const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, VariantComponent }) => {
   const router = useRouter();
   const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
   const { asPath } = router;
@@ -21,10 +21,12 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
     [asPath, sectionsData, selectedTab]
   );
 
+  const WrapperComponent = VariantComponent || 'div';
+
   return (
     <div className={mainDivClass}>
       <ul className={contentGroupClass} role="tablist" aria-label={name}>
-        {groupSections.map((groupSection, index) => {
+        {groupSections.map((_, index) => {
           const [sectionName, sectioLabel] = sectionsData[index];
           const tabId = `${TAB}-${sectionName}`;
           const panelId = `${PANEL}-${sectionName}`;
@@ -61,14 +63,15 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
         if (selectedTab !== tabId) return null;
 
         return (
-          <div
-            id={sectionName}
+          <WrapperComponent
             key={panelId}
+            id={sectionName}
             className={sectionClass}
             role="tabpanel"
+            tabId={tabId}
             aria-labelledby={tabId}>
             {groupSection}
-          </div>
+          </WrapperComponent>
         );
       })}
     </div>
@@ -78,13 +81,13 @@ const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sections
 ContentGroupTabs.propTypes = {
   name: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
-  modifier: PropTypes.string,
   groupSections: PropTypes.array.isRequired,
-  sectionsData: PropTypes.array.isRequired
+  sectionsData: PropTypes.array.isRequired,
+  VariantComponent: PropTypes.func
 };
 
 ContentGroupTabs.defaultProps = {
-  modifier: ''
+  VariantComponent: null
 };
 
 export default ContentGroupTabs;